Changeset 93d6345 in Klonkt

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@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/footer.ejs (modified) (3 diffs)
• views/shell.ejs (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;

src/views/partials/footer.ejs

@@ -4 +4 @@
       <span>© <%= new Date().getFullYear() %> <%= (site && site.title) || 'Klonkt' %></span>
     </div>
+    <%# Install-app knop — in de footer-rij (midden), bespaart een hele extra rij.
+        JS detecteert platform & opent een modal met PWA-install-stappen. %>
+    <button type="button" class="install-app-btn install-app-btn--footer" data-pcms-install-app>
+      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.84v6h5.66V9h3.84L12 2z" fill="currentColor"/></svg>
+      <span>Installeer app</span>
+    </button>
     <div class="footer-meta">
       <span>Klonkt Beta<%= (typeof appVersion !== 'undefined' && appVersion) ? ' v' + appVersion : '' %></span>
@@ -20 +26 @@
   </div>
 
-  <%# Install-app button. JS detects platform & opens a modal with PWA-install
-      steps (iOS share-sheet / Android Chrome / desktop). PWA only — geen APK. %>
-  <div class="site-footer-install container">
-    <button type="button" class="install-app-btn" data-pcms-install-app>
-      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.84v6h5.66V9h3.84L12 2z" fill="currentColor"/></svg>
-      <span>Installeer app</span>
-    </button>
-  </div>
 </footer>
 
@@ -102 +100 @@
 }
 
-/* Install-app button container — sits centered under the footer-inner row */
-.site-footer-install {
-  display: flex;
-  justify-content: center;
-  margin-top: 1.25rem;
+/* Compacte install-knop ín de footer-rij (midden) i.p.v. een grote losse CTA
+   op een eigen regel — bespaart verticale ruimte. */
+.install-app-btn--footer {
+  flex: 0 0 auto;
+  width: auto !important;          /* override de mobile .install-app-btn width:100% */
+  padding: 0.42rem 0.95rem;
+  font-size: 0.82rem;
+  gap: 0.4rem;
+}
+.install-app-btn--footer svg { width: 15px; height: 15px; }
+/* Op smal scherm: laat de drie items netjes centreren als ze wrappen. */
+@media (max-width: 600px) {
+  .site-footer-inner { justify-content: center; text-align: center; }
 }
 </style>

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=7">
+<link rel="stylesheet" href="/assets/css/style.css?v=8">
 
 <!-- Audio player styles: loaded on every page so the mini-player works