Changeset c2a9522 in Klonkt for src/views

Timestamp:

06/17/2026 01:03:25 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

3068cc0

Parents:

d8693e4

Message:

User-menu dropdown frosted blur now works: masthead backdrop-filter removed

Root cause: the masthead (ancestor) had backdrop-filter:blur(12px), which
blocks the backdrop-filter of child elements below it (an element cannot
blur the page if an ancestor already has a backdrop-filter). The masthead
is nearly opaque anyway → backdrop-filter removed, bg set to 94%. Dropdown
now blur(34px)/60%. CSS cache-buster v5.

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

Location:

src/views

Files:

• partials/topnav.ejs (modified) (1 diff)
• shell.ejs (modified) (1 diff)

src/views/partials/topnav.ejs

@@ -364 +364 @@
   min-width: 220px;
   padding: .35rem;
-  /* Frosted glass: bewust transparanter (was 92%) zodat de blur écht doorkomt. */
-  background: color-mix(in srgb, var(--paper) 66%, transparent);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  /* Frosted glass: transparant + zware blur zodat het frosted effect duidelijk is. */
+  background: color-mix(in srgb, var(--paper) 60%, transparent);
+  backdrop-filter: blur(34px) saturate(190%);
+  -webkit-backdrop-filter: blur(34px) saturate(190%);
   border: 1px solid var(--rule);
   border-radius: 12px;

src/views/shell.ejs

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