From d8d07914daf6dbdb7d4a8569fc4730f158c2c8ff Mon Sep 17 00:00:00 2001 From: npc0-hue Date: Wed, 5 Aug 2026 18:08:01 +0800 Subject: [PATCH] Style shared scrollbars --- platform_web/theme/base-css.test.js | 10 ++++++++++ platform_web/theme/base.css | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/platform_web/theme/base-css.test.js b/platform_web/theme/base-css.test.js index f884873..d7f9a79 100644 --- a/platform_web/theme/base-css.test.js +++ b/platform_web/theme/base-css.test.js @@ -40,6 +40,16 @@ describe("platform web shared theme CSS", () => { expect(css).toContain(".runtime-task-meter-track{height:10px"); }); + it("themes shared scrollbars instead of exposing browser-default gutters", () => { + const css = compact(readThemeCss()); + + expect(css).toContain(":root[data-theme-palette],:root[data-theme-palette]*{scrollbar-color:color-mix(insrgb,var(--accent)62%,var(--surface-solid))color-mix(insrgb,var(--surface-solid)62%,transparent);scrollbar-width:thin}"); + expect(css).toContain(":root[data-theme-palette]::-webkit-scrollbar,:root[data-theme-palette]*::-webkit-scrollbar{width:10px;height:10px}"); + expect(css).toContain(":root[data-theme-palette]::-webkit-scrollbar-thumb,:root[data-theme-palette]*::-webkit-scrollbar-thumb{min-height:42px;border:2pxsolid"); + expect(css).toContain("background:linear-gradient(180deg,color-mix(insrgb,var(--accent)62%,var(--surface-solid)),color-mix(insrgb,var(--gold)46%,var(--accent)))"); + expect(css).toContain("::-webkit-scrollbar-corner"); + }); + it("keeps server card stat tiles readable over busy backgrounds", () => { const css = compact(readThemeCss()); diff --git a/platform_web/theme/base.css b/platform_web/theme/base.css index 12f9276..885234f 100644 --- a/platform_web/theme/base.css +++ b/platform_web/theme/base.css @@ -1,6 +1,12 @@ :root{--ink:#e7f7ff;--ink-soft:#a4bfca;--ink-faint:#6f8b98;--surface:rgba(5, 9, 15, 0.68);--surface-solid:rgba(8, 13, 20, 0.94);--surface-raised:rgba(12, 20, 29, 0.78);--line:rgba(84, 227, 255, 0.24);--line-strong:rgba(104, 239, 255, 0.62);--accent:#48e6ff;--accent-deep:#9af7ff;--accent-soft:rgba(72, 230, 255, 0.14);--teal:#4fffd7;--teal-soft:rgba(79, 255, 215, 0.14);--pink:#ff4d6d;--pink-soft:rgba(255, 77, 109, 0.13);--gold:#ffb84d;--gold-soft:rgba(255, 184, 77, 0.18);--danger:#ff5a6e;--danger-soft:rgba(255, 90, 110, 0.14);--success:#4fffd7;--success-soft:rgba(79, 255, 215, 0.14);--background-base:#05070b;--background-glow-1:rgba(72, 230, 255, 0.16);--background-glow-2:rgba(255, 184, 77, 0.11);--background-glow-3:rgba(255, 77, 109, 0.1);--rim-light:rgba(180, 248, 255, 0.64);--candy-glow:rgba(72, 230, 255, 0.32);--glass-wash:linear-gradient(145deg, rgba(39, 56, 68, 0.82), rgba(5, 9, 15, 0.66) 46%, rgba(72, 230, 255, 0.1));--shine-sweep:linear-gradient(112deg, transparent 0 38%, rgba(132, 243, 255, 0.24) 46%, transparent 56%);--glass-tint:rgba(72, 230, 255, 0.08);--crystal-rim:rgba(137, 239, 255, 0.64);--moonbeam:rgba(60, 176, 255, 0.34);--diamond-line:rgba(119, 237, 255, 0.34);--glass-shadow:rgba(0, 0, 0, 0.56);--crystal-spark:rgba(172, 250, 255, 0.92);--sparkle:rgba(196, 252, 255, 0.96);--sparkle-gold:rgba(255, 184, 77, 0.82);--corner-sparkle:linear-gradient(135deg, rgba(72, 230, 255, 0.72) 0 2px, transparent 2px 100%),linear-gradient(315deg, rgba(255, 184, 77, 0.72) 0 2px, transparent 2px 100%),radial-gradient(circle at 86% 18%, rgba(132, 243, 255, 0.88) 0 1.4px, transparent 2.4px);--jelly-highlight:linear-gradient(145deg, rgba(132, 243, 255, 0.16), transparent 32%),radial-gradient(circle at 82% 16%, rgba(255, 184, 77, 0.16), transparent 24%);--sugar-dust:linear-gradient(90deg, rgba(72, 230, 255, 0.08) 1px, transparent 1px),linear-gradient(180deg, rgba(72, 230, 255, 0.07) 1px, transparent 1px),radial-gradient(circle at 88% 18%, rgba(255, 184, 77, 0.62) 0 1.2px, transparent 2px);--crystal-edge-glow:0 0 0 1px rgba(72, 230, 255, 0.28),0 0 22px rgba(72, 230, 255, 0.2),0 0 44px rgba(0, 0, 0, 0.48);--jelly-inset:inset 0 1px 0 rgba(180, 248, 255, 0.22),inset 0 -1px 0 rgba(72, 230, 255, 0.16),inset 0 0 24px rgba(72, 230, 255, 0.08);--frosted-edge:linear-gradient(180deg, rgba(132, 243, 255, 0.18), rgba(7, 12, 18, 0.74) 48%, rgba(255, 184, 77, 0.1));--frosted-surface:linear-gradient(145deg, rgba(18, 29, 40, 0.92), rgba(6, 10, 16, 0.72) 48%, rgba(72, 230, 255, 0.08));--frame-corner:linear-gradient(135deg, rgba(72, 230, 255, 0.9) 0 2px, transparent 2px),linear-gradient(315deg, rgba(255, 184, 77, 0.72) 0 2px, transparent 2px);--frame-accent:linear-gradient(90deg, rgba(72, 230, 255, 0), rgba(72, 230, 255, 0.78), rgba(255, 184, 77, 0.58), rgba(72, 230, 255, 0));--frame-accessory-top:none;--frame-accessory-bottom:none;--frame-accessory-heart:var(--frame-accessory-top);--frame-accessory-wand:var(--frame-accessory-top);--frame-accessory-moon:var(--frame-accessory-top);--frame-accessory-ribbon:var(--frame-accessory-bottom);--frame-accessory-crystal:var(--frame-accessory-bottom);--frame-accessory-circle:var(--frame-accessory-bottom);--frame-accessory-image:var(--frame-accessory-top);--frame-accessory-opacity:0.22;--frame-accessory-size:44px 16px;--menu-item-bg:linear-gradient(90deg, rgba(72, 230, 255, 0.14) 0 1px, transparent 1px 100%),linear-gradient(135deg, rgba(17, 31, 43, 0.94), rgba(4, 8, 13, 0.82) 58%, rgba(255, 184, 77, 0.08));--menu-item-active-bg:linear-gradient(90deg, rgba(72, 230, 255, 0.44) 0 3px, transparent 3px 100%),linear-gradient(135deg, rgba(20, 51, 64, 0.98), rgba(6, 11, 18, 0.9) 52%, rgba(255, 184, 77, 0.18));--menu-glyph-bg:linear-gradient(135deg, rgba(72, 230, 255, 0.28), rgba(255, 184, 77, 0.14)),repeating-linear-gradient(90deg, rgba(137, 239, 255, 0.18) 0 1px, transparent 1px 6px),rgba(5, 9, 15, 0.9);--menu-title-shadow:0 0 14px rgba(72, 230, 255, 0.5),0 0 2px rgba(255, 184, 77, 0.8);--menu-active-outline:linear-gradient(90deg, rgba(72, 230, 255, 0.95), rgba(255, 184, 77, 0.72), rgba(72, 230, 255, 0.95));--control-surface:linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 90%, rgba(255, 255, 255, 0.08)), color-mix(in srgb, var(--surface-solid) 76%, var(--accent-soft))),var(--glass-wash);--control-surface-active:linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 72%, var(--accent-soft)), color-mix(in srgb, var(--surface-solid) 82%, var(--pink-soft))),var(--glass-wash);--primary-command-surface:linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.16)), color-mix(in srgb, var(--pink) 36%, var(--surface-solid)) 68%, color-mix(in srgb, var(--surface-solid) 84%, var(--pink-soft)));--panel-material:var(--sugar-dust),var(--glass-wash),linear-gradient(135deg, rgba(4, 8, 13, 0.78), rgba(13, 23, 32, 0.64));--panel-shadow:var(--jelly-inset),inset 0 0 0 1px rgba(119, 237, 255, 0.24),inset 9px 0 0 rgba(72, 230, 255, 0.08),0 18px 42px rgba(0, 0, 0, 0.5),0 0 34px rgba(72, 230, 255, 0.14);--ultimate-effect-alpha:0.86;--custom-background-overlay:linear-gradient(180deg, rgba(4, 7, 11, 0.62), rgba(4, 7, 11, 0.78));--code-surface:#05090f;--code-ink:#dffcff;--code-muted:#87afba;--workspace-background-image:none;--workspace-background-pattern-image:radial-gradient(circle at 76% 18%, transparent 0 68px, rgba(72, 230, 255, 0.3) 69px 71px, transparent 72px),radial-gradient(circle at 76% 18%, transparent 0 34px, rgba(255, 184, 77, 0.24) 35px 36px, transparent 37px),conic-gradient(from 0deg at 76% 18%, transparent 0 8%, rgba(72, 230, 255, 0.24) 8% 9%, transparent 9% 28%, rgba(72, 230, 255, 0.18) 28% 29%, transparent 29% 100%),linear-gradient(90deg, rgba(72, 230, 255, 0.08) 1px, transparent 1px),linear-gradient(180deg, rgba(72, 230, 255, 0.07) 1px, transparent 1px),linear-gradient(135deg, transparent 0 48%, rgba(255, 184, 77, 0.1) 49% 50%, transparent 51% 100%),radial-gradient(circle at 20% 78%, rgba(255, 77, 109, 0.12), transparent 28%);--workspace-background-pattern-size:auto,auto,auto,42px 42px,42px 42px,180px 180px,auto;--workspace-background-pattern-position:center,center,center,0 0,0 0,0 0,center;--workspace-background-pattern-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,no-repeat;--workspace-background-pattern-opacity:0.92;--workspace-background-pattern-filter:saturate(1.18) contrast(1.08);--font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-display:var(--font-ui);--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;--title-weight:720;--title-tracking:0;--heading-weight:760;--heading-tracking:0;color:var(--ink);background:var(--background-base);font-family:var(--font-ui);font-synthesis:none;text-rendering:optimizeLegibility} *{box-sizing:border-box} body{margin:0;min-width:320px;min-height:100vh} +:root[data-theme-palette],:root[data-theme-palette] *{scrollbar-color:color-mix(in srgb,var(--accent) 62%,var(--surface-solid)) color-mix(in srgb,var(--surface-solid) 62%,transparent);scrollbar-width:thin} +:root[data-theme-palette]::-webkit-scrollbar,:root[data-theme-palette] *::-webkit-scrollbar{width:10px;height:10px} +:root[data-theme-palette]::-webkit-scrollbar-track,:root[data-theme-palette] *::-webkit-scrollbar-track{border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-solid) 72%,transparent),color-mix(in srgb,var(--surface) 62%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 48%,transparent)} +:root[data-theme-palette]::-webkit-scrollbar-thumb,:root[data-theme-palette] *::-webkit-scrollbar-thumb{min-height:42px;border:2px solid color-mix(in srgb,var(--surface-solid) 70%,transparent);border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 62%,var(--surface-solid)),color-mix(in srgb,var(--gold) 46%,var(--accent)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-light) 58%,transparent),0 0 12px color-mix(in srgb,var(--accent) 28%,transparent)} +:root[data-theme-palette]::-webkit-scrollbar-thumb:hover,:root[data-theme-palette] *::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent-deep),color-mix(in srgb,var(--accent) 68%,var(--gold)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--rim-light) 72%,transparent),0 0 16px color-mix(in srgb,var(--accent) 42%,transparent)} +:root[data-theme-palette]::-webkit-scrollbar-corner,:root[data-theme-palette] *::-webkit-scrollbar-corner{background:transparent} button{font:inherit} .app-shell{min-height:100dvh;display:grid;grid-template-columns:var(--sidebar-width,216px) minmax(0,1fr);position:relative;isolation:isolate;transition:grid-template-columns 180ms ease;background:radial-gradient(1200px 520px at 82% -12%,var(--background-glow-1),transparent 62%),radial-gradient(900px 440px at -12% 26%,var(--background-glow-2),transparent 58%),radial-gradient(760px 390px at 64% 110%,var(--background-glow-3),transparent 62%),linear-gradient(135deg,rgba(255,255,255,.06),transparent 48%),var(--background-base)} .app-shell-sidebar-collapsed{--sidebar-width:72px}