Spaces:
Paused
Paused
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /** | |
| * Design tokens and base styles. | |
| * | |
| * Modernized with Tailwind CSS and executive dark theme design tokens. | |
| * Detection canvas color variables are preserved. | |
| */ | |
| :root { | |
| --bg: #09090b; | |
| --panel: #121215; | |
| --panel-2: #18181b; | |
| --line: #27272a; | |
| --line-soft: #202024; | |
| --text: #fafafa; | |
| --text-dim: #a1a1aa; | |
| --text-faint: #71717a; | |
| --accent: #38bdf8; | |
| --ok: #4ec9a0; | |
| --warn: #e5b567; | |
| --bad: #ef7a7a; | |
| /* Active release and shadow candidate must not look alike. */ | |
| --active: #6aa9ff; | |
| --shadow: #d59bf0; | |
| --added: #4ec9a0; | |
| --missing: #ef7a7a; | |
| --relabelled: #e5b567; | |
| --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; | |
| --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; | |
| --radius: 6px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body, | |
| #root { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font: 14px/1.5 var(--sans); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { | |
| color: var(--accent); | |
| } | |
| button { | |
| font: inherit; | |
| color: var(--text); | |
| background: var(--panel-2); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 6px 12px; | |
| cursor: pointer; | |
| } | |
| button:hover:not(:disabled) { | |
| border-color: var(--accent); | |
| } | |
| button:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| button.primary { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #07101f; | |
| font-weight: 600; | |
| } | |
| button.danger { | |
| border-color: var(--bad); | |
| color: var(--bad); | |
| } | |
| input, | |
| select, | |
| textarea { | |
| font: inherit; | |
| color: var(--text); | |
| background: var(--bg); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 6px 8px; | |
| width: 100%; | |
| } | |
| /* ---- layout ---- */ | |
| .app { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .banner { | |
| padding: 6px 16px; | |
| background: #241d10; | |
| border-bottom: 1px solid #4a3a1a; | |
| color: var(--warn); | |
| font-size: 12.5px; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 16px; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--panel); | |
| } | |
| .topbar h1 { | |
| font-size: 15px; | |
| margin: 0; | |
| font-weight: 650; | |
| letter-spacing: 0.2px; | |
| } | |
| .topbar .sub { | |
| color: var(--text-faint); | |
| font-size: 12px; | |
| } | |
| .spacer { | |
| flex: 1; | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 2px; | |
| padding: 0 16px; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--panel); | |
| } | |
| .tabs button { | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| border-radius: 0; | |
| background: none; | |
| color: var(--text-dim); | |
| padding: 9px 14px; | |
| } | |
| .tabs button[aria-current="true"] { | |
| color: var(--text); | |
| border-bottom-color: var(--accent); | |
| } | |
| .main { | |
| flex: 1; | |
| overflow: auto; | |
| padding: 16px; | |
| } | |
| .grid { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .grid.two { | |
| grid-template-columns: minmax(320px, 420px) 1fr; | |
| } | |
| @media (max-width: 900px) { | |
| .grid.two { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .panel { | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 14px; | |
| } | |
| .panel h2 { | |
| margin: 0 0 10px; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| color: var(--text-dim); | |
| font-weight: 600; | |
| } | |
| .panel h3 { | |
| margin: 14px 0 6px; | |
| font-size: 12.5px; | |
| color: var(--text-dim); | |
| font-weight: 600; | |
| } | |
| .row { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .row.wrap { | |
| flex-wrap: wrap; | |
| } | |
| .stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| /* ---- data ---- */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| th, | |
| td { | |
| text-align: left; | |
| padding: 6px 8px; | |
| border-bottom: 1px solid var(--line-soft); | |
| vertical-align: top; | |
| } | |
| th { | |
| color: var(--text-faint); | |
| font-weight: 600; | |
| font-size: 11.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.4px; | |
| } | |
| td.num, | |
| th.num { | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| font-family: var(--mono); | |
| font-size: 12.5px; | |
| } | |
| .mono { | |
| font-family: var(--mono); | |
| font-size: 12.5px; | |
| } | |
| .dim { | |
| color: var(--text-dim); | |
| } | |
| .faint { | |
| color: var(--text-faint); | |
| font-size: 12px; | |
| } | |
| .pill { | |
| display: inline-block; | |
| padding: 1px 7px; | |
| border-radius: 999px; | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| border: 1px solid var(--line); | |
| } | |
| .pill.ok { | |
| color: var(--ok); | |
| border-color: #24503f; | |
| background: #12251e; | |
| } | |
| .pill.bad { | |
| color: var(--bad); | |
| border-color: #54292a; | |
| background: #261416; | |
| } | |
| .pill.warn { | |
| color: var(--warn); | |
| border-color: #4d3d1c; | |
| background: #241d10; | |
| } | |
| .pill.info { | |
| color: var(--accent); | |
| border-color: #24405f; | |
| background: #101c29; | |
| } | |
| .pill.synthetic { | |
| color: var(--shadow); | |
| border-color: #4a3560; | |
| background: #1d1526; | |
| } | |
| .bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background: var(--line); | |
| overflow: hidden; | |
| } | |
| .bar > span { | |
| display: block; | |
| height: 100%; | |
| background: var(--accent); | |
| } | |
| .bar.ok > span { | |
| background: var(--ok); | |
| } | |
| .bar.bad > span { | |
| background: var(--bad); | |
| } | |
| .error { | |
| color: var(--bad); | |
| background: #241416; | |
| border: 1px solid #54292a; | |
| border-radius: var(--radius); | |
| padding: 8px 10px; | |
| font-size: 13px; | |
| white-space: pre-wrap; | |
| } | |
| .notice { | |
| color: var(--text-dim); | |
| background: var(--panel-2); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 8px 10px; | |
| font-size: 12.5px; | |
| } | |
| /* ---- page viewer ---- */ | |
| .viewer { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .canvas-wrap { | |
| position: relative; | |
| overflow: auto; | |
| max-height: 68vh; | |
| background: #0a0c10; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| } | |
| .canvas-wrap canvas { | |
| display: block; | |
| } | |
| .legend { | |
| display: flex; | |
| gap: 14px; | |
| flex-wrap: wrap; | |
| font-size: 12px; | |
| color: var(--text-dim); | |
| } | |
| .legend i { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 2px; | |
| margin-right: 5px; | |
| vertical-align: -1px; | |
| } | |
| .list { | |
| max-height: 260px; | |
| overflow: auto; | |
| border: 1px solid var(--line-soft); | |
| border-radius: var(--radius); | |
| } | |
| .list button { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| border: none; | |
| border-bottom: 1px solid var(--line-soft); | |
| border-radius: 0; | |
| background: none; | |
| padding: 6px 9px; | |
| font-size: 12.5px; | |
| } | |
| .list button[aria-current="true"] { | |
| background: var(--panel-2); | |
| color: var(--text); | |
| } | |
| .timing { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| gap: 3px 10px; | |
| align-items: center; | |
| font-size: 12.5px; | |
| } | |
| .timing .label { | |
| color: var(--text-dim); | |
| } | |
| .timing .value { | |
| font-family: var(--mono); | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .hint { | |
| color: var(--text-faint); | |
| font-size: 12px; | |
| font-style: italic; | |
| } | |