From bbbafd11bc7a7793ea49d3cccebb6a37ec226264 Mon Sep 17 00:00:00 2001 From: Schalli Date: Fri, 2 Oct 2026 23:10:00 +0200 Subject: [PATCH] style(dashboard): duenne, dezente Scrollleiste in Kacheln Co-Authored-By: Claude Opus 5.5 (1M context) --- apps/web/src/app/globals.css | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 6fd3ec0..e92da47 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -555,6 +555,35 @@ input[type="checkbox"], input[type="radio"] { border-radius: 0.5rem; } +/* Scrollleisten in Kacheln: duenner, dezenter Streifen statt der breiten + Standardleiste. Chromium/WebView2/WebKitGTK ueber ::-webkit-scrollbar; + Firefox nur ueber scrollbar-width/-color — in Chromium wuerde + scrollbar-width die ::-webkit-Regeln abschalten, daher per @supports getrennt. */ +.react-grid-item ::-webkit-scrollbar { + width: 6px; + height: 6px; +} +.react-grid-item ::-webkit-scrollbar-track, +.react-grid-item ::-webkit-scrollbar-corner { + background: transparent; +} +.react-grid-item ::-webkit-scrollbar-thumb { + background: color-mix(in oklab, var(--muted-foreground) 35%, transparent); + border-radius: 3px; +} +.react-grid-item ::-webkit-scrollbar-thumb:hover { + background: color-mix(in oklab, var(--muted-foreground) 60%, transparent); +} +.react-grid-item ::-webkit-scrollbar-button { + display: none; +} +@supports not selector(::-webkit-scrollbar) { + .react-grid-item * { + scrollbar-width: thin; + scrollbar-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent) transparent; + } +} + /* Mit Hintergrund: Kacheln als Windows-11-„Mica“ — halbtransparent mit Unschaerfe. Die einzige Stelle mit Transparenz. Deckkraft so gewaehlt, dass Text auch vor einem rein schwarzen (hell) bzw. rein weissen, dann auf