/* ============================================================ Hazy operator UI. Mobile-first; theming via CSS custom properties on :root. Theme modes: - with no data-theme attribute → light by default, dark when prefers-color-scheme: dark - → forced light - → forced dark Visual language is slate-blue ink + magenta accent gradient with a colored glow on emphasized actions. Inspired by portal.zonventure.com. ============================================================ */ /* Author rules like `.field { display: flex }` would otherwise beat the UA `[hidden] { display: none }`, leaving JS-toggled fields visible. */ [hidden] { display: none !important; } :root { /* Brand — pulled from the favicon's bottom-left teal where the infinity loop reads most green. --accent is the readable dark-teal that anchors buttons + links; --accent-2 shifts toward seafoam so the grad-primary sweep (brand wordmark, card stripe) lands as "teal → green" rather than a flat hue. */ --accent: #168a8e; --accent-2: #1f9e7c; --accent-deep: #0c5c5f; /* Ink (text) — hazy-web's --ink / --ink-muted; soft + faint are interpolated points the SPA needs for layered captions. */ --ink: #1a1f2c; --ink-soft: #3d4456; --muted: #5a6478; --faint: #8590a3; /* Surfaces — bg + surface match hazy-web; -2 / -3 are interior layers the SPA stacks for popovers and pressed states. */ --bg: #fbfbfd; --surface: #ffffff; --surface-2: #f4f5f9; --surface-3: #eaedf3; /* Borders */ --border: #e2e6ee; --border-strong:#c2c9d4; /* Status palette — chosen to harmonize with the slate ink + magenta */ --status-pending: #6b7f96; --status-running: #2f6fea; --status-completed: #1f8a3d; --status-failed: #d23a3a; --status-on-hold: #b07b00; /* Semantic aliases used by destructive/success affordances (delete swipe, retry buttons, etc). Resolved against --status-* so the theme overrides for those flow through automatically. */ --danger: var(--status-failed); --success: var(--status-completed); /* Streams */ --stdout: var(--ink); --stderr: #c5471f; /* Shadows — barely-there. Layer separation is carried by borders + surface contrast; shadow only steps in when something genuinely floats above its peers (popovers, modal dialogs). Decorative button glows are gone — hover states lean on color shift instead. RGB tracks the light --ink so the cast stays in-family. */ --shadow: 0 1px 2px rgba(26,31,44,.04); --shadow-lg: 0 2px 8px rgba(26,31,44,.06); --shadow-pop: 0 4px 14px rgba(26,31,44,.10); --glow-accent: none; /* Gradients */ --grad-primary: linear-gradient(135deg, var(--accent), var(--accent-2)); --grad-active: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 0%, transparent)); /* Geometry — radius bumped to 12px to match hazy-web's card + button rounding. Small radius stays at 8px for chips and compact controls where 12px would feel mushy. */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --header-h: 56px; --aside-w: 280px; color-scheme: light; } /* Dark via system preference (only when no explicit choice). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #4ec5cf; --accent-2: #65d5a6; --accent-deep: #2a8d92; --ink: #e9ecf3; --ink-soft: #c5cee0; --muted: #95a0b5; --faint: #6f7d96; --bg: #0e1622; --surface: #14202e; --surface-2: #1a2740; --surface-3: #213050; --border: #233347; --border-strong:#354a6d; --status-running: #5b9eff; --status-completed: #4ec96d; --status-failed: #ff6464; --status-on-hold: #e0a93a; --stderr: #ff9a6a; --shadow: 0 1px 2px rgba(0,0,0,.25); --shadow-lg: 0 2px 8px rgba(0,0,0,.35); --shadow-pop: 0 4px 14px rgba(0,0,0,.5); --glow-accent: none; color-scheme: dark; } } /* Forced dark (explicit user choice). */ :root[data-theme="dark"] { --accent: #4ec5cf; --accent-2: #65d5a6; --accent-deep: #2a8d92; --ink: #e9ecf3; --ink-soft: #c5cee0; --muted: #95a0b5; --faint: #6f7d96; --bg: #0e1622; --surface: #14202e; --surface-2: #1a2740; --surface-3: #213050; --border: #233347; --border-strong:#354a6d; --status-running: #5b9eff; --status-completed: #4ec96d; --status-failed: #ff6464; --status-on-hold: #e0a93a; --stderr: #ff9a6a; --shadow: 0 1px 2px rgba(0,0,0,.25); --shadow-lg: 0 2px 8px rgba(0,0,0,.35); --shadow-pop: 0 4px 14px rgba(0,0,0,.5); --glow-accent: none; color-scheme: dark; } /* ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--ink); /* System-font stack matches the hazy-web marketing pages — no Open Sans web-font dependency, identical rendering on every OS. Antialias + optimizeLegibility lift small UI text without reaching for a custom font. */ font: 14.5px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: grid; grid-template-rows: var(--header-h) 1fr; grid-template-columns: 1fr; min-height: 100dvh; } /* Pre-auth (sign in, signup, forgot, reset, TOTP step, fresh-install setup) replaces the app-slate background with the card's surface tone so the page reads as a single neutral sheet, and drops the app header entirely — the operator-app wordmark + chrome have no business framing a sign-in form. The grid's first track collapses to 0 so the auth card centers naturally in the viewport instead of carrying a 56px ghost gap above it. */ body.signed-out { background: var(--surface); grid-template-rows: 0 1fr; } body.signed-out .app-header { display: none; } a { color: var(--accent); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } /* Focus ring everywhere — accessible and on-brand. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Header ---------- */ .app-header { grid-row: 1; /* Span every column at every breakpoint. Without this, on the multi-column desktop grid (≥960px) the header would land only in the first cell and leave the rest of row 1 empty. */ grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; padding: 0 .9rem; border-bottom: 1px solid var(--border); background: var(--surface); z-index: 30; } /* Wordmark — matches the hazy-web topbar treatment: favicon thumbnail + bold "Hazy" in solid ink, no gradient fill. The grad-primary is now reserved for the card stripe (.card::before) only — a thin decorative edge, not a brand spread. */ .brand { margin: 0; display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: 1.15rem; font-weight: 700; letter-spacing: -.005em; } .brand img { width: 28px; height: 28px; } .spacer { flex: 1; } /* Top-right account menu. The kebab button opens a small popup list with the actions that used to clutter the drawer foot (Settings, Sign out). Anchored to the trigger via the .account-menu wrapper so the menu can use absolute positioning relative to the icon without leaking out of the header's stacking context. */ .account-menu { position: relative; } .account-menu__trigger { color: var(--muted); } .account-menu__trigger[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); } .account-menu__list { position: absolute; top: calc(100% + .35rem); right: 0; min-width: 168px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: .25rem; display: flex; flex-direction: column; gap: .1rem; z-index: 40; } .account-menu__item { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: none; color: var(--ink); font: inherit; font-size: .88rem; padding: .55rem .7rem; border-radius: 6px; cursor: pointer; text-align: left; } .account-menu__item:hover, .account-menu__item:focus-visible { background: var(--surface-2); outline: none; } .account-menu__item svg { color: var(--muted); flex: 0 0 auto; } .account-menu__item:hover svg { color: var(--accent); } /* ---------- Theme picker (segmented) ---------- */ .theme-picker { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; } .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; transition: background .12s, color .12s, transform .12s; } .theme-btn:hover { color: var(--ink); } .theme-btn[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); } /* ---------- Buttons ---------- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; /* 44px is the iOS HIG / Material minimum tap target. The SVG inside stays its declared size (typically 16-20px); the button just gets enough hit area around it. */ width: 44px; height: 44px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, color .12s, border-color .12s, transform .12s; } .icon-btn:hover { background: var(--surface-2); color: var(--accent); } .icon-btn:active { transform: scale(.96); } .icon-btn:disabled { opacity: .35; cursor: not-allowed; color: var(--faint); } .icon-btn:disabled:hover { background: transparent; color: var(--faint); } .text-btn { background: transparent; border: 1px solid var(--border); color: var(--ink); border-radius: var(--radius-sm); padding: .65rem 1rem; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s; } .text-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); } /* Primary button — flat accent pill in the hazy-web vocabulary: no gradient, no glow, just a solid fill that lifts to a subtle hover ring. The previous accent-glow shadow lived to balance a vivid cerise; the new teal accent + opaque ink-shadow combo reads cleaner on its own. */ button.primary { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-pill); padding: .85rem 1.5rem; min-height: 48px; font: inherit; font-weight: 600; letter-spacing: .005em; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, opacity .12s; } button.primary:hover { background: var(--accent-deep); } button.primary:active { opacity: .85; } /* Destructive primary — used for confirmAction({ danger: true }) so the "Delete" button reads as the consequence it carries. Keeps the same geometry/min-height as the regular .primary so dialogs don't shift. Hover is a tone shift on the same fill — no halo. */ button.primary--danger { background: var(--danger); } button.primary--danger:hover { background: color-mix(in srgb, var(--danger) 85%, var(--ink)); } /* Submit-in-flight state set by wireDialog while onSubmit's promise is pending. Faded + cursor + faint pulse so the operator sees the click was received and isn't tempted to mash the button. */ button.primary.is-busy { opacity: .75; cursor: progress; animation: busy-pulse 1.2s ease-in-out infinite; } @keyframes busy-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } } /* ---------- Login card ---------- */ .card { grid-row: 2; /* Span every body grid column so the card stays viewport-centred even after the desktop 3-column layout kicks in. Without this it would land in column 1 only (≈280px) and feel cramped. */ grid-column: 1 / -1; align-self: start; justify-self: center; width: min(440px, calc(100% - 2rem)); margin-top: clamp(2rem, 8vh, 5rem); padding: 1.75rem 1.75rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } /* A thin gradient stripe at the top of the card pulls the brand color in without filling the whole surface. */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-primary); } .card h2 { margin: 0 0 1.2rem; font-size: 1.2rem; font-weight: 700; color: var(--ink); } .setup-blurb { color: var(--muted); font-size: .85rem; margin: -.6rem 0 1.1rem; line-height: 1.5; } /* All auth-card forms (login + setup + signup + forgot + reset + TOTP step) share the same visual: stacked uppercase label / surface-2 input / accent-focused border. Selector list rather than a shared class because the markup already commits to ID- based form-name routing in the JS, and each form has slightly different submit semantics — same look, different wiring. */ #login-form, #setup-form, #signup-form, #forgot-form, #reset-form, #totp-step-form { display: flex; flex-direction: column; gap: .9rem; } #login-form label, #setup-form label, #signup-form label, #forgot-form label, #reset-form label, #totp-step-form label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } #login-form input, #setup-form input, #signup-form input, #forgot-form input, #reset-form input, #totp-step-form input { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .75rem; font: 14.5px inherit; font-weight: 400; letter-spacing: normal; text-transform: none; transition: border-color .12s, box-shadow .12s, background .12s; } #login-form input:focus, #setup-form input:focus, #signup-form input:focus, #forgot-form input:focus, #reset-form input:focus, #totp-step-form input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } #login-form button.primary, #setup-form button.primary, #signup-form button.primary, #forgot-form button.primary, #reset-form button.primary, #totp-step-form button.primary { margin-top: .25rem; } .error { color: var(--status-failed); margin: 0; min-height: 1.2em; font-size: .85rem; } /* ---------- App layout ---------- */ #main, .drawer { grid-row: 2; } #main { grid-column: 1; display: block; min-height: 0; overflow: hidden; /* Reserve space for the collapsed log drawer at the bottom so the last task isn't obscured by the drawer header. Matches .section-head height. */ padding-bottom: 44px; } .pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); } .tasks-pane { height: 100%; } .logs-pane { background: var(--surface-2); } /* ---------- Logs drawer ---------- */ /* Fixed-bottom drawer. Collapsed = section-head only. Open = ~65vh, capped so the drawer never reaches all the way to the top. */ .logs-pane { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 44px; max-height: 100vh; /* No upward halo — the border-top alone marks the divider. */ border-top: 1px solid var(--border); transition: height .28s cubic-bezier(.2,.8,.2,1); } /* Mobile (<960px): the drawer is fixed to the bottom of the viewport; when opened it stretches all the way up to (but not under) the app header so the operator gets the full screen for log inspection. dvh handles iOS' shrinking URL bar — viewport-height units would leave a sliver of tasks visible when the URL bar collapses. */ .logs-pane.open { height: calc(100dvh - var(--header-h)); } /* Logs-pane header. .logs-head replaces the bare-button .section-head because we now host a sibling Clear button next to the toggle, and nesting a