/* Copyright 2026 CloudSurf Software LLC. All rights reserved. * * Fleet-specific chrome for the SurfDoc UI (FLEET_UI=surfdoc), linked from * every surf/ shell via `stylesheet: /static/fleet-surfdoc.css`. Everything * themes through the custom properties of the linked surfdoc.css, so these * rules track the (forced-dark) theme automatically. */ /* ============================================================ CLOUDSURF.COM SKIN — palette + liquid-glass shell Ported from cloudsurf-website app.css (the all-SurfDoc shell re-skin): same palette, radii, glass tokens and backdrop-blur treatment, minus the sky/clouds/stars images and parallax — page backgrounds here are pure CSS gradients that settle into --background, so they are seam-free by construction at any page length. surfdoc.css owns shell GEOMETRY via the --shell-* var hooks; we only re-skin values and layer the blur/sheen effects the hooks can't express. ============================================================ */ :root { /* cloudsurf.com light palette */ --background: #fafafa; --surface: #ffffff; --surface-hover: #f0f0f2; --surface-alt: #f0f0f2; --border: #e2e4e9; --text: #171717; --text-muted: #6b7280; --radius: 12px; --radius-sm: 8px; /* frosted-glass tokens */ --glass-bg: rgba(255, 255, 255, 0.5); --glass-border: rgba(255, 255, 255, 0.6); --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); /* surf-parse shell var-hooks → frosted-glass values */ --shell-nav-bg: rgba(255, 255, 255, 0.45); --shell-btn-bg: var(--glass-bg); --shell-drawer-bg: var(--glass-bg); --shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.5); --shell-control-border: var(--glass-border); /* Pure-CSS page wash (no image): rides surfdoc.css's --ws-bg-texture hook on ; settles into --background so it can never seam. */ --ws-bg-texture: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%); --ws-bg-texture-size: 100% 620px; } [data-theme="dark"] { /* cloudsurf.com dark palette: deep navy, not pure black */ --background: #050510; --surface: rgba(12, 12, 28, 0.85); --surface-hover: rgba(20, 20, 40, 0.9); --surface-alt: rgba(20, 20, 40, 0.9); --border: rgba(255, 255, 255, 0.08); --text: #e5e5e5; --text-muted: #8a8a9a; --glass-bg: rgba(22, 22, 40, 0.5); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); --shell-nav-bg: rgba(10, 12, 24, 0.55); --shell-btn-bg: var(--glass-bg); --shell-drawer-bg: var(--glass-bg); --shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.08); --shell-control-border: var(--glass-border); --ws-bg-texture: linear-gradient(to bottom, #101430 0%, #050510 100%); } /* The gradient is a single wash, not a tile — never repeat it. */ body { background-repeat: no-repeat; } /* Liquid-glass top bar: heavy blur + saturation, an inner top sheen, and a soft drop shadow so it reads as a pane of glass floating over the page. */ .surfdoc-shell-nav { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 24px rgba(15, 23, 42, 0.07); } [data-theme="dark"] .surfdoc-shell-nav { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.35); } /* Circular glass control buttons (menu + theme toggle). */ .surfdoc-shell-menu-btn, .surfdoc-shell-theme-toggle { backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-theme="dark"] .surfdoc-shell-menu-btn, [data-theme="dark"] .surfdoc-shell-theme-toggle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* iOS-style liquid-glass drawer panel: deep blur + inner sheen. */ .surfdoc-shell-drawer { backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-theme="dark"] .surfdoc-shell-drawer { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Soft glass blur behind the drawer scrim. */ .surfdoc-shell-scrim { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ---- rich nav shell color repair ---- * The rich shell was designed to sit OUTSIDE .surfdoc (cloudsurf.com's * layout); in the fleet it renders inside it, so `.surfdoc a` (0,1,1) * repaints the shell's single-class (0,1,0) rules accent-blue — the CTA * label vanished blue-on-blue. Re-assert the intended colors at (0,2,0). */ .surfdoc .surfdoc-shell-brand, .surfdoc .surfdoc-shell-brand:hover { color: var(--text); text-decoration: none; } .surfdoc .surfdoc-shell-nav-cta, .surfdoc .surfdoc-shell-nav-cta:hover { color: var(--accent-text); text-decoration: none; } .surfdoc .surfdoc-shell-drawer-link { color: var(--text); text-decoration: none; } .surfdoc .surfdoc-shell-drawer-link:hover { color: var(--accent); text-decoration: none; } /* ---- GPU heatmap ---- */ .fleet-heatmap-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; } .fleet-heatmap-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 84px; border-radius: 10px; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.12s ease, box-shadow 0.12s ease; } .fleet-heatmap-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } /* surfdoc.css styles content links with the accent color at higher * specificity; cells are tiles, so force every descendant white. */ .fleet-heatmap-cell, .fleet-heatmap-cell:hover, .fleet-heatmap-cell span { color: #fff; } .fleet-heatmap-host { font-size: 11px; opacity: 0.85; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fleet-heatmap-idx { font-size: 10px; opacity: 0.7; } .fleet-heatmap-util { font-size: 18px; font-weight: 700; } .fleet-heatmap-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; font-size: 12px; color: var(--text-muted); } .fleet-heatmap-legend-item { display: inline-flex; align-items: center; gap: 6px; } .fleet-heatmap-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } /* Heatmap color scale (host-owned utility classes; values match the * HeatmapColor palette the Askama UI used). */ .bg-gray-700 { background: #374151; } .bg-gray-900 { background: #111827; } .bg-blue-600 { background: #2563eb; } .bg-yellow-500 { background: #eab308; } .bg-orange-500 { background: #f97316; } .bg-red-500 { background: #ef4444; } .opacity-50 { opacity: 0.5; } /* ---- GPU device cards ---- */ .fleet-device-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; } .fleet-device-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .fleet-device-idx { color: var(--text-muted); font-size: 12px; } .fleet-device-name { font-weight: 600; } .fleet-device-vram, .fleet-device-vendor { font-size: 13px; color: var(--text-muted); } .fleet-device-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-light); } /* ---- forms (cloudsurf.com input idiom) ---- */ .fleet-form, .fleet-auth-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0; } .fleet-form-field { display: flex; flex-direction: column; gap: 6px; } .fleet-form-field label { font-size: 13px; font-weight: 600; color: var(--text-muted); } /* The model-card action forms nest controls directly under .fleet-form * (no .fleet-form-field wrapper) — skin those too, or they fall back to * white UA select chrome on the dark cards. */ .fleet-form > input, .fleet-form > select, .fleet-form > textarea, .fleet-form-field input, .fleet-form-field select, .fleet-form-field textarea { background: var(--background); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; font-size: 0.9375rem; line-height: 1.5; transition: border-color 150ms ease; } .fleet-form-field input::placeholder, .fleet-form-field textarea::placeholder { color: var(--text-muted); } /* Site pattern: focus reads as the accent border, not a hard ring — keyboard users still get the explicit ring via :focus-visible. */ .fleet-form-field input:focus, .fleet-form-field select:focus, .fleet-form-field textarea:focus { outline: none; border-color: var(--accent); } .fleet-form-field input:focus-visible, .fleet-form-field select:focus-visible, .fleet-form-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .fleet-form-check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; } /* ---- buttons / callouts / empty states ---- */ .fleet-action-btn { align-self: flex-start; background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background 150ms ease; } .fleet-action-btn:hover { background: var(--accent-hover); } .fleet-action-form { margin: 12px 0; } .fleet-error-callout { border: 1px solid #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); color: var(--text); border-radius: 10px; padding: 10px 14px; margin: 12px 0; font-size: 14px; } .fleet-empty { color: var(--text-muted); font-style: italic; } /* ---- rich nav shell (fleet adjustments; chrome itself lives in the * inlined surfdoc.css §"shell nav" — never forked here) ---- */ /* The fixed topbar sits over the top of the page column: surfdoc.css only * offsets
, but fleet pages render as
. */ article.surfdoc:has(.surfdoc-shell-nav) { padding-top: var(--shell-nav-h); } /* Active drawer row — stamped client-side (is-active + aria-current="page") * by the fleet's active-link script; surfdoc.css has no active-row style * for the rich shell. */ .surfdoc-shell-drawer-link.is-active, .surfdoc-shell-drawer-link[aria-current="page"] { background: var(--shell-drawer-link-hover-bg); color: var(--accent); font-weight: 600; } .surfdoc-shell-drawer-link.is-active .surfdoc-shell-drawer-link-icon, .surfdoc-shell-drawer-link[aria-current="page"] .surfdoc-shell-drawer-link-icon { color: var(--accent); } /* Stat tiles: stop mid-word label breaks ("ALLOCATE D", "AVG UTILIZATIO N" * seen at 1400px) — widen the floor a touch and forbid intra-word wraps. */ .surfdoc-stat { min-width: 118px; } .surfdoc-stat-label { overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* ---- shell footer (logout) ---- */ .fleet-shell-footer { display: flex; justify-content: center; padding: 20px 24px 32px; } .fleet-logout-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; } .fleet-logout-btn:hover { color: var(--text); border-color: var(--text-muted); } /* ---- S2: latency honesty + busy state ---- */ .fleet-form-note { margin: 0; font-size: 13px; color: var(--text-muted); } #lane-hint:empty { display: none; } .fleet-action-btn:disabled { cursor: default; opacity: 0.85; } .fleet-busy { animation: fleet-busy-pulse 1.2s ease-in-out infinite; } @keyframes fleet-busy-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .fleet-busy { animation: none; } } /* ---- model cards (cloudsurf.com product-card idiom: surface + border, * accent border on hover, no lift) ---- */ .fleet-models { display: flex; flex-direction: column; gap: 24px; margin: 14px 0; } .fleet-model-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; transition: border-color 200ms ease, background 200ms ease; } .fleet-model-card:hover { border-color: var(--accent); } .fleet-model-card h3 { margin-top: 0; margin-bottom: 4px; } .fleet-model-desc { color: var(--text-muted); margin: 0 0 2px; } .fleet-model-size { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; } /* Nested action forms lose their own card chrome inside the model card — * one pane of glass, not cards-in-cards. */ .fleet-model-card .fleet-form { background: transparent; border: none; padding: 0; margin: 12px 0 0; } .fleet-fit-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 10px; } .fleet-fit { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--text-muted); } .fleet-fit-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 10%, transparent); } .fleet-fit-small { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, transparent); } /* ---- S4: scorecard badges (models page) ---- */ .fleet-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--text-muted); } .fleet-badge-passed { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 10%, transparent); } .fleet-badge-failed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, transparent); } /* ---- S4: phone pass (390px) — the drawer nav already collapses; make * forms span the column and never let a wide control force body scroll. ---- */ @media (max-width: 600px) { .fleet-form, .fleet-auth-form { max-width: 100%; } .fleet-form-field input, .fleet-form-field select, .fleet-form-field textarea { max-width: 100%; min-width: 0; } }