/* ========================================================================== LogPose design system shadcn-inspired token layer + component primitives. Theme is driven by (set by logpose.js). :root defaults to light; [data-theme="dark"] overrides. ========================================================================== */ :root { /* neutrals tinted toward the brand hue (265) */ --background: oklch(98.5% 0.003 265); --surface: oklch(100% 0 0); --surface-2: oklch(96.5% 0.005 265); --elevated: oklch(100% 0 0); --foreground: oklch(24% 0.02 265); --muted: oklch(96% 0.005 265); --muted-foreground: oklch(50% 0.02 265); --faint-foreground: oklch(62% 0.018 265); --border: oklch(90.5% 0.006 265); --input: oklch(89% 0.007 265); --ring: oklch(55% 0.17 265); --primary: oklch(55% 0.17 265); --primary-hover: oklch(50% 0.17 265); --primary-foreground: oklch(99% 0.002 265); --primary-wash: oklch(55% 0.17 265 / 10%); --accent-surface: oklch(94.5% 0.008 265); /* hover fill for ghost controls */ --success: oklch(52% 0.15 150); --warning: oklch(60% 0.14 70); --danger: oklch(56% 0.20 25); --info: oklch(52% 0.15 240); /* Static log-level palette (badge fill + dot share one hue per level). */ --level-debug: oklch(56% 0.022 265); /* muted blue-grey */ --level-info: oklch(52% 0.15 240); /* azure — same as --info */ --level-warning: oklch(64% 0.15 75); /* amber/yellow */ --level-error: oklch(56% 0.20 25); /* red */ --level-critical: oklch(44% 0.19 20); /* deep bordeaux */ /* json / code token colors — value in orange, tuned for light contrast */ --json-key: oklch(45% 0.13 200); --json-value: oklch(52% 0.17 50); --json-num: oklch(50% 0.20 300); --json-null: var(--faint-foreground); --json-true: var(--success); --json-false: var(--danger); --shadow-sm: 0 1px 2px oklch(24% 0.02 265 / 8%); --shadow-md: 0 4px 16px oklch(24% 0.02 265 / 10%); --shadow-lg: 0 12px 32px oklch(24% 0.02 265 / 14%); --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem; --fs-md: 0.9375rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --chevron-down: url('data:image/svg+xml;utf8,'); } :root[data-theme="dark"] { --background: oklch(16% 0.010 265); --surface: oklch(19.5% 0.012 265); --surface-2: oklch(23% 0.014 265); --elevated: oklch(22% 0.013 265); --foreground: oklch(92% 0.006 265); --muted: oklch(24% 0.014 265); --muted-foreground: oklch(70% 0.02 265); --faint-foreground: oklch(56% 0.018 265); --border: oklch(30% 0.016 265); --input: oklch(32% 0.016 265); --ring: oklch(72% 0.14 265); --primary: oklch(72% 0.14 265); --primary-hover: oklch(78% 0.145 265); --primary-foreground: oklch(18% 0.02 265); --primary-wash: oklch(72% 0.14 265 / 15%); --accent-surface: oklch(26% 0.014 265); --success: oklch(74% 0.15 152); --warning: oklch(80% 0.145 85); --danger: oklch(70% 0.18 25); --info: oklch(76% 0.10 230); --level-debug: oklch(70% 0.022 265); /* muted blue-grey */ --level-info: oklch(76% 0.10 230); /* azure — same as --info */ --level-warning: oklch(82% 0.14 82); /* amber/yellow */ --level-error: oklch(70% 0.18 25); /* red */ --level-critical: oklch(64% 0.19 18); /* deep bordeaux */ --json-key: oklch(80% 0.13 190); --json-value: oklch(76% 0.15 55); --json-num: oklch(80% 0.12 300); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 30%); --shadow-md: 0 8px 24px oklch(0% 0 0 / 35%); --shadow-lg: 0 16px 40px oklch(0% 0 0 / 45%); } /* ------------------------------------------------------------------ reset */ * { box-sizing: border-box; } html { color-scheme: light dark; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Inter, Helvetica, Arial, sans-serif; font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color 200ms var(--ease), color 200ms var(--ease); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--primary-wash); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.014em; } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } .muted { color: var(--muted-foreground); } .faint { color: var(--faint-foreground); } .mono { font-family: "SF Mono", "JetBrains Mono", Consolas, "Cascadia Code", Menlo, monospace; } /* ------------------------------------------------------------------ icons */ .lucide { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; } .lucide-lg { width: 18px; height: 18px; } .lucide-xl { width: 22px; height: 22px; } /* ---------------------------------------------------------------- topbar */ .topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 60px; padding: 0 20px; background: color-mix(in oklab, var(--surface) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 680; font-size: var(--fs-md); letter-spacing: -0.02em; color: var(--foreground); justify-self: start; } .brand:hover { text-decoration: none; } .brand .brand-logo { height: 26px; width: auto; display: block; } .brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--primary-wash); font-size: 16px; } .mainnav { display: inline-flex; align-items: center; gap: 4px; justify-self: center; } .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9px; font-size: var(--fs-md); font-weight: 550; letter-spacing: -0.01em; color: var(--muted-foreground); transition: background-color 160ms var(--ease), color 160ms var(--ease); } .nav-link:hover { color: var(--foreground); background: var(--accent-surface); text-decoration: none; } .nav-link .lucide { color: currentColor; opacity: 0.85; } .nav-link.active { color: var(--foreground); background: var(--primary-wash); font-weight: 620; } .nav-link.active .lucide { color: var(--primary); opacity: 1; } .topbar-actions { display: inline-flex; align-items: center; gap: 8px; justify-self: end; } /* ---------------------------------------------------------------- layout */ main { max-width: 1280px; margin: 0 auto; padding: 30px 24px 72px; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .page-head .subtitle { color: var(--muted-foreground); font-size: var(--fs-sm); margin-top: 5px; } .section-head { display: flex; align-items: center; gap: 9px; margin: 30px 0 14px; } .section-head:first-child { margin-top: 0; } .section-head .lucide { color: var(--muted-foreground); } /* ------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-base); font-weight: 550; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease); } .btn .lucide { width: 16px; height: 16px; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { background: var(--primary-hover); text-decoration: none; } .btn-outline { background: var(--surface); color: var(--foreground); border-color: var(--input); } .btn-outline:hover { background: var(--accent-surface); text-decoration: none; } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--accent-surface); text-decoration: none; } .btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-sm); } .btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; } /* square icon-only button */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--surface); color: var(--foreground); cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); } .icon-btn:hover { background: var(--accent-surface); } .icon-btn .lucide { width: 18px; height: 18px; } /* ------------------------------------------------------------- controls */ .field { display: inline-flex; flex-direction: column; gap: 6px; } .field > label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--muted-foreground); } .input, .select { height: 36px; padding: 0 12px; background: var(--surface); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-base); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); } .input { min-width: 180px; } .input::placeholder { color: var(--faint-foreground); } .input:hover, .select:hover { border-color: var(--faint-foreground); } .input:focus-visible, .select:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--primary-wash); } /* custom select: strip native chevron, draw a lucide chevron via wrapper */ .select-wrap { position: relative; display: inline-flex; } .select { appearance: none; -webkit-appearance: none; padding-right: 34px; min-width: 148px; cursor: pointer; } .select-wrap::after { content: ""; position: absolute; right: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none; background: var(--muted-foreground); -webkit-mask: var(--chevron-down) center / 14px no-repeat; mask: var(--chevron-down) center / 14px no-repeat; } /* switch (used for auto-refresh) */ .switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: var(--fs-sm); color: var(--muted-foreground); } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--input); transition: background-color 180ms var(--ease); } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 200ms var(--ease); } .switch input:checked + .track { background: var(--primary); } .switch input:checked + .track::after { transform: translateX(14px); } .switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--primary-wash); } /* -------------------------------------------------------------- toolbar */ .control-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; margin-bottom: 22px; } .filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .toolbar { display: inline-flex; align-items: center; gap: 14px; } .toolbar .stamp { font-size: var(--fs-xs); color: var(--faint-foreground); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------- legend */ .service-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; } .legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--muted-foreground); } .legend-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--svc-color, var(--faint-foreground)); } /* -------------------------------------------------------------- metrics */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 28px; } .metric { display: block; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); } a.metric:hover { text-decoration: none; border-color: var(--faint-foreground); box-shadow: var(--shadow-md); transform: translateY(-1px); } .metric-top { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: var(--fs-sm); font-weight: 550; } .metric-top .lucide { width: 16px; height: 16px; } .metric-value { display: block; margin-top: 10px; font-size: var(--fs-3xl); font-weight: 680; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .metric.tone-danger .metric-value { color: var(--danger); } .metric.tone-danger .metric-top .lucide { color: var(--danger); } .metric-sub { display: block; margin-top: 7px; font-size: var(--fs-xs); color: var(--faint-foreground); } /* --------------------------------------------------------------- table */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } thead th { text-align: left; padding: 11px 16px; background: var(--surface-2); color: var(--muted-foreground); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--border); } tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: top; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background-color 120ms var(--ease); } tbody tr:hover { background: var(--surface-2); } /* service color as a thin left accent on the row (via first cell inset) */ tbody tr[data-service] td:first-child { box-shadow: inset 3px 0 0 0 var(--svc-color, transparent); } td.col-date, td.col-time { white-space: nowrap; color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); } td.col-time { color: var(--faint-foreground); } td.col-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted-foreground); } td.col-service { white-space: nowrap; font-weight: 550; } .empty-cell { padding: 40px 16px !important; text-align: center; color: var(--muted-foreground); } /* --------------------------------------------------------------- pills */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-running { color: var(--warning); background: color-mix(in oklab, var(--warning) 16%, transparent); } .pill-completed { color: var(--success); background: color-mix(in oklab, var(--success) 16%, transparent); } .pill-failed { color: var(--danger); background: color-mix(in oklab, var(--danger) 16%, transparent); } .pill-cancelled { color: var(--faint-foreground); background: color-mix(in oklab, var(--faint-foreground) 18%, transparent); } /* Log levels — fixed, per-level color coding. */ .pill-debug { color: var(--level-debug); background: color-mix(in oklab, var(--level-debug) 18%, transparent); } .pill-info { color: var(--level-info); background: color-mix(in oklab, var(--level-info) 16%, transparent); } .pill-warning { color: var(--level-warning); background: color-mix(in oklab, var(--level-warning) 18%, transparent); } .pill-error { color: var(--level-error); background: color-mix(in oklab, var(--level-error) 16%, transparent); } .pill-critical { color: var(--level-critical); background: color-mix(in oklab, var(--level-critical) 18%, transparent); } /* -------------------------------------------------------------- json */ .json-pretty { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: "SF Mono", "JetBrains Mono", Consolas, "Cascadia Code", Menlo, monospace; font-size: 0.8125rem; line-height: 1.55; } .json-inline { font-family: "SF Mono", "JetBrains Mono", Consolas, "Cascadia Code", Menlo, monospace; font-size: 0.8125rem; } .jv-key { color: var(--json-key); } .jv-str { color: var(--json-value); } .jv-num { color: var(--json-num); } .jv-null { color: var(--json-null); font-style: italic; } .jv-true { color: var(--json-true); font-weight: 600; } .jv-false { color: var(--json-false); font-weight: 600; } .kw-ok { color: var(--success); font-weight: 600; } .kw-bad { color: var(--danger); font-weight: 600; } pre.traceback { margin: 0; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; font-size: 0.8125rem; color: var(--muted-foreground); font-family: "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace; } .kv-block { margin-top: 12px; } .kv-label { margin-bottom: 5px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--faint-foreground); } /* ------------------------------------------------------- run detail */ .run-card { padding: 18px 20px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .run-card.tone-running { background: color-mix(in oklab, var(--warning) 6%, var(--surface)); border-color: color-mix(in oklab, var(--warning) 30%, var(--border)); } .run-card.tone-completed { background: color-mix(in oklab, var(--success) 6%, var(--surface)); border-color: color-mix(in oklab, var(--success) 28%, var(--border)); } .run-card.tone-failed { background: color-mix(in oklab, var(--danger) 7%, var(--surface)); border-color: color-mix(in oklab, var(--danger) 32%, var(--border)); } .run-title { font-size: var(--fs-md); font-weight: 650; } .run-card .meta, .step-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--muted-foreground); font-size: var(--fs-sm); } .steps { display: flex; flex-direction: column; gap: 10px; } .step-card { padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .step-title { display: flex; align-items: center; gap: 8px; font-weight: 600; } /* ------------------------------------------------------- timeline */ .timeline-card { padding: 18px 20px 14px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .timeline-row { display: flex; align-items: center; gap: 14px; padding: 6px 0; } .timeline-label { flex: 0 0 220px; width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); } .timeline-row.root .timeline-label { font-weight: 650; } .timeline-track { position: relative; flex: 1; height: 20px; border-radius: 5px; background: var(--muted); } .timeline-block { position: absolute; top: 3px; bottom: 3px; min-width: 6px; border-radius: 4px; opacity: 0.95; } .timeline-block.status-running { background: var(--warning); } .timeline-block.status-completed { background: var(--success); } .timeline-block.status-failed { background: var(--danger); } .timeline-block.status-cancelled { background: var(--faint-foreground); } .timeline-axis { display: flex; justify-content: space-between; margin: 10px 0 0 234px; font-size: var(--fs-xs); color: var(--faint-foreground); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------- pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 22px; } .page-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--foreground); cursor: pointer; transition: background-color 150ms var(--ease); } .page-ctrl:hover { background: var(--accent-surface); text-decoration: none; } .page-ctrl:active { background: color-mix(in oklab, var(--accent-surface) 70%, var(--foreground) 8%); } .page-ctrl .lucide { width: 18px; height: 18px; } .page-ctrl.disabled { opacity: 0.35; pointer-events: none; } .page-status { min-width: 116px; text-align: center; font-size: var(--fs-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .page-status strong { color: var(--foreground); font-weight: 650; } .page-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: var(--fs-xs); color: var(--faint-foreground); } .per-page { display: inline-flex; align-items: center; gap: 8px; } .per-page > span { white-space: nowrap; } .select-sm { height: 30px; min-width: 0; padding: 0 30px 0 10px; font-size: var(--fs-sm); } .select-wrap:has(.select-sm)::after { right: 9px; width: 12px; height: 12px; } /* ---------------------------------------------------- log rows + drawer */ /* Clamp each log message to at most 3 lines in the list; full text lives in the detail drawer. Works for plain text and inline-rendered JSON alike. */ .js-msg-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-word; } .js-log-row { cursor: pointer; } .js-log-row.is-active { background: var(--primary-wash); } .js-log-row.is-active td:first-child { box-shadow: inset 3px 0 0 0 var(--svc-color, transparent), inset 0 0 0 999px transparent; } /* Scrim behind the drawer — only shown on mobile, where the drawer overlays most of the screen. On desktop it stays hidden so the list stays usable. */ .log-drawer-backdrop { position: fixed; inset: 0; z-index: 39; display: none; background: oklch(0% 0 0 / 45%); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); } .log-drawer { position: fixed; top: 60px; right: 0; z-index: 40; width: min(440px, 94vw); height: calc(100dvh - 60px); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(105%); pointer-events: none; transition: transform 280ms var(--ease); } .log-drawer.is-open { transform: translateX(0); pointer-events: auto; } .log-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .log-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 44px; } .icon-btn-sm { width: 30px; height: 30px; } .icon-btn-sm .lucide { width: 16px; height: 16px; } .detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 6px; } .detail-grid dt { color: var(--muted-foreground); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; align-self: center; } .detail-grid dd { margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .detail-message { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-sm); } .detail-message .json-pretty { margin: 0; } @media (max-width: 720px) { /* Drawer becomes an 80%-width overlay with a tap-to-dismiss scrim. */ .log-drawer { top: 0; height: 100dvh; width: 80vw; z-index: 60; } .log-drawer-backdrop { display: block; z-index: 55; } .log-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } } @media (max-width: 720px) { .topbar { grid-template-columns: auto 1fr; height: auto; padding: 10px 16px; row-gap: 8px; } .mainnav { grid-column: 1 / -1; justify-self: stretch; justify-content: center; order: 3; } .topbar-actions { order: 2; } .nav-link span.label { display: none; } /* Brand collapses to its icon; the mark stays clickable → dashboard. */ .brand .brand-name { display: none; } /* Logout collapses to a square icon-only button, matching the theme toggle. */ .btn-logout { width: 36px; padding: 0; gap: 0; } .btn-logout .label { display: none; } main { padding: 22px 16px 60px; } }