/* ========================================================================== H3 Studio — stylesheet Dark-first, no external assets, no fonts fetched over the network. Theme resolution: is always written by app.js (from localStorage, falling back to prefers-color-scheme), so the CSS only ever has to read the attribute. ========================================================================== */ /* ---------- tokens ---------- */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --sp-7: 44px; --ease: cubic-bezier(.22, .61, .36, 1); --dur: 180ms; --maxw: 1560px; } /* dark (default) */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0b0a10; --bg-grad: radial-gradient(1200px 620px at 12% -10%, #1d1733 0%, transparent 62%), radial-gradient(900px 520px at 92% 4%, #0e2430 0%, transparent 58%); --surface: #131220; --surface-2: #1a1929; --surface-3: #222034; --line: #2a2840; --line-soft: #211f33; --text: #eceaf5; --text-2: #a9a5c0; --text-3: #75718c; --accent: #a78bfa; --accent-2: #7c5cf5; --accent-ink: #12091f; --accent-soft: rgba(167, 139, 250, .14); --teal: #4fd1c5; --ok: #3ddc97; --warn: #f5b544; --danger: #ff6b81; --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 10px 34px -12px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.35); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } /* light */ [data-theme="light"] { color-scheme: light; --bg: #f6f5fa; --bg-grad: radial-gradient(1100px 560px at 10% -12%, #e8e2ff 0%, transparent 60%), radial-gradient(820px 460px at 94% 0%, #dff2f4 0%, transparent 56%); --surface: #ffffff; --surface-2: #f3f2f9; --surface-3: #e9e7f4; --line: #ddd9ec; --line-soft: #eae7f4; --text: #191627; --text-2: #57536e; --text-3: #85809b; --accent: #6d43e8; --accent-2: #5a2fd6; --accent-ink: #ffffff; --accent-soft: rgba(109, 67, 232, .10); --teal: #0e9188; --ok: #14915f; --warn: #b7791f; --danger: #d13b52; --shadow-1: 0 1px 2px rgba(30,25,60,.08); --shadow-2: 0 14px 36px -18px rgba(40,30,90,.35), 0 2px 6px rgba(40,30,90,.06); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } /* ---------- base ---------- */ * { box-sizing: border-box; } /* Several containers below set `display`, which would otherwise beat the UA's [hidden] rule and leave hidden overlays swallowing clicks. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -.012em; line-height: 1.25; } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-3); padding: .1em .38em; border-radius: var(--r-sm); } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } em { font-style: italic; color: var(--text); } :where(button, input, select, textarea, a, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- buttons ---------- */ .btn { --btn-bg: var(--surface-3); --btn-fg: var(--text); appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); border: 1px solid var(--line); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 560; padding: 9px 15px; border-radius: var(--r-md); cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .btn:hover:not(:disabled) { border-color: var(--accent); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .btn-primary { --btn-bg: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); --btn-fg: var(--accent-ink); border-color: transparent; box-shadow: var(--shadow-1); } .btn-primary:hover:not(:disabled) { filter: brightness(1.07); border-color: transparent; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-2); border-color: var(--line); } .btn-ghost:hover:not(:disabled) { --btn-fg: var(--text); background: var(--surface-2); } .btn-danger { --btn-bg: transparent; --btn-fg: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); } .btn-sm { padding: 6px 11px; font-size: 13px; border-radius: var(--r-sm); } .btn-block { width: 100%; } .icon-btn { appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center; font-size: 16px; line-height: 1; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .icon-btn:hover { color: var(--text); border-color: var(--accent); } /* ---------- boot + login ---------- */ .boot { position: fixed; inset: 0; display: grid; place-items: center; color: var(--text-2); } .boot-inner { display: flex; align-items: center; gap: var(--sp-3); font-size: 14px; } .spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .login { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); } .login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--shadow-2); text-align: center; } .login-mark { width: 52px; height: 52px; margin: 0 auto var(--sp-4); display: grid; place-items: center; border-radius: 15px; background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; font-size: 19px; box-shadow: var(--shadow-1); } .login-title { font-size: 25px; } .login-sub { color: var(--text-2); font-size: 14px; margin: var(--sp-2) 0 var(--sp-5); } .login-card .field { text-align: left; margin-bottom: var(--sp-4); } .login-error { color: var(--danger); font-size: 13.5px; margin: 0 0 var(--sp-3); background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); } /* ---------- app shell ---------- */ .app { min-height: 100dvh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line-soft); } .topbar-brand { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; } .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; font-size: 13px; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-text strong { font-size: 15px; letter-spacing: -.01em; } .brand-text small { font-size: 11.5px; color: var(--text-3); } .topbar-actions { margin-left: auto; flex: 0 0 auto; } .theme-icon::before { content: "☀"; } [data-theme="light"] .theme-icon::before { content: "☾"; } /* status bar — fixed min widths so a poll never reflows the header */ .statusbar { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 auto; min-width: 0; padding: 6px var(--sp-4); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; font-size: 12.5px; overflow-x: auto; scrollbar-width: none; } .statusbar::-webkit-scrollbar { display: none; } .stat { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; flex: 0 0 auto; } .stat-key { color: var(--text-3); } .stat-value { color: var(--text-2); } .stat-online .stat-value { min-width: 5.2ch; } .stat-gpu .stat-key { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } .stat + .stat { padding-left: var(--sp-4); border-left: 1px solid var(--line-soft); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: 0 0 8px; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .dot[data-state="online"] { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); } .dot[data-state="offline"] { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); } .dot[data-state="unknown"] { background: var(--text-3); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } .vram { display: flex; align-items: center; gap: var(--sp-2); } .vram-track { width: 68px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: 0 0 68px; } .vram-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--accent)); transition: width 400ms var(--ease); } #vram-text { min-width: 11ch; } #queue-text { min-width: 6ch; } #deadline-text { min-width: 8ch; } .stat-deadline[data-level="warn"] .stat-value { color: var(--warn); font-weight: 600; } .stat-deadline[data-level="warn"] .stat-key { color: var(--warn); } .stat-deadline[data-level="danger"] .stat-value { color: var(--danger); font-weight: 700; } .stat-deadline[data-level="danger"] .stat-key { color: var(--danger); } .stat-deadline[data-level="danger"] { animation: blink 2s ease-in-out infinite; } @keyframes blink { 50% { opacity: .6; } } /* banners */ .banner { margin: var(--sp-4) var(--sp-5) 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: 13.5px; display: flex; gap: var(--sp-2); flex-wrap: wrap; } .banner-offline { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--text); } .banner-offline strong { color: var(--danger); } /* ---------- layout ---------- */ .layout { flex: 1 1 auto; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5); display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 430px) minmax(0, 1fr); align-items: start; } @media (max-width: 1080px) { .layout { grid-template-columns: minmax(0, 1fr); } } .panel { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); } .controls { position: sticky; top: 76px; } @media (max-width: 1080px) { .controls { position: static; } } .block { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); } .block-tight { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .block-title { font-size: 13px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); } .counter { font-size: 12px; color: var(--text-3); } /* ---------- tabs ---------- */ .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 3px; } .tab { appearance: none; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; font-weight: 560; padding: 9px 8px; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .tab:hover:not([aria-disabled="true"]) { color: var(--text); } .tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); } .tab[aria-disabled="true"] { opacity: .4; cursor: not-allowed; } .pane { animation: fade var(--dur) var(--ease); } @keyframes fade { from { opacity: 0; transform: translateY(-3px); } } .hint { font-size: 13px; color: var(--text-2); margin-bottom: var(--sp-3); } .note { font-size: 12.2px; color: var(--text-3); line-height: 1.5; margin: var(--sp-2) 0 0; } .note-warn { color: var(--warn); } /* ---------- drop zones ---------- */ .dropzones { display: grid; gap: var(--sp-3); } .dropzones.two { grid-template-columns: 1fr 1fr; } @media (max-width: 420px) { .dropzones.two { grid-template-columns: 1fr; } } .dz { position: relative; border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: var(--sp-4); min-height: 118px; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); cursor: pointer; text-align: center; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .dz:hover { border-color: var(--accent); } .dz.is-drag { border-color: var(--accent); background: var(--accent-soft); } .dz.has-items { text-align: left; } .dz.has-items .dz-body { display: none; } /* the browse affordance is a real