GKaszewski/k-notes
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore backdrop-filter in prod by dropping -webkit- prefix

Browse Source 
LightningCSS was stripping unprefixed backdrop-filter when both
properties were present, breaking Firefox desktop. Removing the
-webkit- prefix lets LightningCSS auto-add it and keep the standard
property, giving both in the bundle.
This commit is contained in:
Gabriel Kaszewski
2026-06-07 22:09:08 +02:00
parent a75eb92a9c
commit 425376874c
1 changed files with 12 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
k-notes-frontend/src/aero-theme.css
View File

@@ -88,7 +88,6 @@
/* ── Background treatment ─────────────────────────────────────── */
body {
background: url("./assets/background2.webp") center / cover no-repeat fixed;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
@@ -96,28 +95,35 @@ body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 0;
background: url("./assets/background2.webp") center / cover no-repeat;
z-index: -2;
pointer-events: none;
}
body::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: -1;
pointer-events: none;
}
body > #root {
position: relative;
z-index: 1;
z-index: 0;
}
/* ── Utility classes ──────────────────────────────────────────── */
@utility glass {
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
background: var(--aero-glass-bg);
border: 1px solid var(--aero-glass-border);
}
@utility glass-card {
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
background: var(--aero-glass-bg);
border: 1px solid var(--aero-glass-border);
box-shadow: var(--aero-glass-shadow), var(--aero-glass-inset);
@@ -127,7 +133,6 @@ body > #root {
@utility glass-heavy {
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -174,7 +179,6 @@ body > #root {
[data-slot="card"] {
background: var(--aero-glass-bg);
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border-color: var(--aero-glass-border);
box-shadow: var(--aero-glass-shadow), var(--aero-glass-inset);
--tw-ring-color: transparent;
@@ -184,13 +188,11 @@ body > #root {
[data-slot="dialog-overlay"] {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-slot="dialog-content"] {
background: rgba(20, 20, 30, 0.8);
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border: 1px solid rgba(255, 255, 255, 0.15);
--tw-ring-color: transparent;
--tw-ring-shadow: none;
@@ -199,13 +201,11 @@ body > #root {
[data-slot="sheet-overlay"] {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-slot="sheet-content"] {
background: rgba(20, 20, 30, 0.85);
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border-color: rgba(255, 255, 255, 0.15);
}
@@ -291,7 +291,6 @@ body > #root {
[data-slot="button"][data-variant="destructive"] {
background: rgba(200, 60, 60, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(220, 80, 80, 0.3);
}
@@ -305,20 +304,17 @@ body > #root {
[data-slot="drawer-content"] {
background: rgba(20, 20, 30, 0.9);
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
}
[data-slot="drawer-overlay"] {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Sonner toast */
[data-sonner-toaster] [data-sonner-toast] {
background: rgba(20, 20, 30, 0.85);
backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border-color: rgba(255, 255, 255, 0.15);
color: oklch(0.985 0 0);
}