Apply liquid glass to pantry view

2026-04-22 19:49:29 +02:00
parent 120959365e
commit b9538a35b6
5 changed files with 251 additions and 201 deletions
--- a/js/ui/filterPopover.js
+++ b/js/ui/filterPopover.js
@@ -0,0 +1,67 @@
+const STYLE_ID = 'filter-popover-liquid-styles';
+
+export function ensureFilterPopoverStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+        .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
+            --filter-liquid-border: rgba(255, 255, 255, 0.32);
+            --filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
+            --filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
+            --filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
+            --filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
+            --filter-liquid-text-muted: rgb(var(--text-muted-rgb));
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.16),
+                0 22px 52px rgba(var(--overlay-rgb), 0.24);
+        }
+
+        .dark .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
+            --filter-liquid-border: rgba(255, 255, 255, 0.12);
+            --filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
+            --filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46);
+        }
+
+        .filter-liquid-panel {
+            isolation: isolate;
+            background: var(--filter-liquid-panel-bg) !important;
+            background-image: none !important;
+            border: 1px solid var(--filter-liquid-border) !important;
+            box-shadow: var(--filter-liquid-shadow) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+ensureFilterPopoverStyles();
+
+export function filterChipStyle(active) {
+    const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
+    const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
+    const borderRule = active
+        ? 'border:1px solid var(--filter-liquid-chip-active-border);'
+        : 'border:1px solid transparent;';
+    const shadow = active
+        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
+        : 'box-shadow:none;';
+    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
+}