Spaces:
Running
Running
| /* Palette and rhythm from the in-car Qt HMI (hmi_qt/NovaUI/Theme.qml). */ | |
| :root { | |
| --base: #07080b; --surface: #0e1016; --surface-hi: #151922; --hairline: #1e2330; | |
| --cyan: #4cd6ff; --violet: #b66bff; --red: #ff5e7e; --green: #4dffb4; --yellow: #ffd84d; | |
| --text-hi: #eef1f7; --text-mid: #8b93a7; --text-lo: #4d5566; | |
| --idle: #2a3242; --accent: var(--idle); | |
| --u: 8px; --radius: 14px; | |
| --font: "SF Pro Text", Inter, Roboto, system-ui, sans-serif; | |
| color-scheme: dark; | |
| } | |
| [data-state="listening"] { --accent: var(--cyan); } | |
| [data-state="thinking"] { --accent: var(--violet); } | |
| [data-state="speaking"] { --accent: var(--green); } | |
| [data-state="error"] { --accent: var(--red); } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; height: 100%; background: var(--base); color: var(--text-hi); font: 15px/1.45 var(--font); } | |
| #app { max-width: 560px; min-height: 100%; margin: 0 auto; padding: calc(2 * var(--u)); display: flex; flex-direction: column; } | |
| .topbar { display: flex; align-items: center; gap: var(--u); padding-block: var(--u); } | |
| .brand { font-weight: 700; letter-spacing: .28em; font-size: 14px; } | |
| .phase { margin-left: auto; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: color .3s; } | |
| [data-state="idle"] .phase { color: var(--text-lo); } | |
| button, input { font: inherit; color: inherit; } | |
| button { cursor: pointer; border: 1px solid var(--hairline); background: var(--surface-hi); border-radius: 999px; padding: 6px 14px; } | |
| button:hover:not(:disabled) { border-color: var(--text-lo); } | |
| button:disabled { opacity: .5; cursor: default; } | |
| button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } | |
| .chip { font-size: 12px; color: var(--text-mid); padding: 3px 10px; } | |
| .chip[data-mode="local"] { color: var(--yellow); } | |
| .chip[data-mode="openrouter"] { color: var(--cyan); } | |
| .ghost { background: transparent; } | |
| .danger { border-color: #3a1d27; color: var(--red); } | |
| .gate { margin-top: 18vh; } | |
| .lede { color: var(--text-mid); margin: 0 0 calc(3 * var(--u)); } | |
| #login { display: flex; flex-wrap: wrap; gap: var(--u); align-items: center; } | |
| #login label { width: 100%; font-size: 12px; color: var(--text-mid); letter-spacing: .08em; text-transform: uppercase; } | |
| #passcode { flex: 1 1 200px; min-width: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 14px; } | |
| #connect { background: var(--cyan); color: var(--base); border: 0; font-weight: 600; padding: 10px 20px; } | |
| .msg { min-height: 1.45em; color: var(--text-mid); font-size: 13px; } | |
| .msg.bad { color: var(--red); } | |
| .live { flex: 1; display: flex; flex-direction: column; } | |
| .orb-wrap { display: grid; place-items: center; padding-block: calc(2 * var(--u)); } | |
| #orb { width: min(260px, 60vw); aspect-ratio: 1; max-width: 100%; } | |
| .transcript { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; max-height: 38vh; display: flex; flex-direction: column; gap: var(--u); } | |
| .transcript li { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 8px 12px; max-width: 88%; } | |
| .transcript li.you { align-self: flex-end; color: var(--text-mid); } | |
| .transcript li.nova { align-self: flex-start; } | |
| .transcript li::before { display: block; font-size: 10px; letter-spacing: .14em; color: var(--text-lo); margin-bottom: 2px; } | |
| .transcript li.you::before { content: "YOU"; } | |
| .transcript li.nova::before { content: "NOVA"; } | |
| .controls { display: flex; align-items: center; gap: var(--u); padding-top: calc(2 * var(--u)); padding-bottom: env(safe-area-inset-bottom, 0px); } | |
| .metrics { flex: 1; text-align: center; font: 12px "SF Mono", "JetBrains Mono", monospace; color: var(--text-lo); } | |
| #mute[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); } | |
| #orb { cursor: pointer; } | |