Changeset 93d6345 in Klonkt for src/assets/css/style.css

Timestamp:

06/17/2026 03:34:07 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

dbde7f8

Parents:

c3ad46d

Message:

Theme scrollbar + install button in the footer row (no longer a separate row)

• Slim, rounded theme scrollbar (scrollbar-width/color + ::-webkit-scrollbar) instead of the default chunky browser scrollbar; works on page + internal scrollers.
• "Install app" moved from its own row below the footer to the centre of the footer row (compact variant) → saves vertical space.

CSS cache-buster v8.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -245 +245 @@
     margin: 0;
 }
+
+/* ── Thema-scrollbar: slank, afgerond, subtiel — vervangt de standaard chunky
+   browser-scrollbar (met pijltjes) die niet bij het donkere thema past.
+   Werkt op de pagina én op interne scrollers (queue, chat-thread, dropdowns). ── */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--ink) 24%, transparent);
+    border-radius: 999px;
+    border: 2px solid transparent;   /* transparante rand → optisch slanker (≈6px) */
+    background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in srgb, var(--accent) 60%, var(--ink));
+}
+::-webkit-scrollbar-corner { background: transparent; }
 body:not(.admin) {
     min-height: 100dvh;