97 lines
3.0 KiB
CSS
97 lines
3.0 KiB
CSS
:root { --card-bg:#fff; --muted:#6b7280; }
|
|
|
|
* { box-sizing:border-box; }
|
|
body {
|
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
|
|
margin:0; background:#f3f4f6; color:#111827;
|
|
}
|
|
|
|
/* Header */
|
|
header { padding:24px 16px 8px; text-align:center; }
|
|
h1 { margin:0 0 6px; font-size: clamp(20px, 3vw, 32px); }
|
|
.sub { color: var(--muted); font-size: 14px; }
|
|
|
|
/* Layout */
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
|
|
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
|
|
|
|
/* Card */
|
|
.card { min-width: 0; background: var(--card-bg); border-radius:14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding:18px; margin-bottom: 20px; }
|
|
.card h2 { margin:0 0 12px; font-size:18px; }
|
|
|
|
/* Flex helpers */
|
|
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
|
|
.spacer { flex:1; }
|
|
|
|
/* Buttons */
|
|
.btn { appearance:none; border:0; border-radius:10px; padding:8px 12px; background:#111827; color:#fff; cursor:pointer; font-weight:600; }
|
|
.btn.ghost { background:#e5e7eb; color:#111827; }
|
|
.btn.small { padding:6px 10px; font-size:12px; }
|
|
|
|
/* Pills & chips */
|
|
.pill { border-radius:999px; padding:6px 10px; background:#f3f4f6; color:#111827; display:inline-flex; align-items:center; gap:8px; }
|
|
.status-dot { width:10px; height:10px; border-radius:50%; background:#9CA3AF; display:inline-block; }
|
|
.ok .status-dot { background:#10B981; }
|
|
.bad .status-dot { background:#EF4444; }
|
|
.chip { font-size:12px; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; }
|
|
|
|
/* Inputs & notices */
|
|
.notice { color: var(--muted); font-size:12px; }
|
|
input[type="text"], input[type="password"], select {
|
|
padding:8px; border:1px solid #e5e7eb; border-radius:8px;
|
|
}
|
|
|
|
/* Utility */
|
|
.hidden { display:none; }
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
|
|
|
|
/* Optional: color/preview box used on automation page */
|
|
.color-box { width:36px; height:24px; border-radius:6px; border:1px solid #e5e7eb; }
|
|
|
|
/* Segmented control (automation page) */
|
|
.seg { display:inline-flex; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
|
|
.seg button { background:#fff; color:#111; border:0; padding:6px 10px; }
|
|
.seg button.active { background:#111827; color:#fff; }
|
|
|
|
.top-menu {
|
|
background:#111827;
|
|
padding:10px 20px;
|
|
}
|
|
.top-menu ul {
|
|
list-style:none;
|
|
margin:0;
|
|
padding:0;
|
|
display:flex;
|
|
gap:20px;
|
|
}
|
|
.top-menu a {
|
|
color:white;
|
|
text-decoration:none;
|
|
font-weight:600;
|
|
font-size:14px;
|
|
}
|
|
.top-menu a:hover {
|
|
text-decoration:underline;
|
|
}
|
|
|
|
/* Top menu wrapper */
|
|
.top-menu { padding: 8px 0; }
|
|
|
|
/* Center the buttons and add even spacing */
|
|
.top-menu__row { justify-content: center; gap: 8px; }
|
|
|
|
/* Active page: make the ghost button look “primary” */
|
|
.btn.ghost.is-active {
|
|
background: #111827;
|
|
color: #fff;
|
|
outline: 2px solid #111827; /* subtle emphasis */
|
|
}
|
|
|
|
/* Keyboard focus ring (accessible) */
|
|
.top-menu a.btn:focus-visible {
|
|
outline: 2px solid #111827;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
|