fix(compat): add backdrop-filter fallback for Brave Shields
Add --bg-solid-fallback CSS variable to all 11 themes and a @supports not (backdrop-filter) block. UI remains usable when Brave Shields or strict fingerprinting settings block backdrop-filter.
This commit is contained in:
@@ -68,6 +68,19 @@
|
|||||||
--board-hover-border: rgba(179,89,255,0.18);
|
--board-hover-border: rgba(179,89,255,0.18);
|
||||||
--toggle-on-bg: rgba(214,92,255,0.22);
|
--toggle-on-bg: rgba(214,92,255,0.22);
|
||||||
--logo-shadow: rgba(179,89,255,0.35);
|
--logo-shadow: rgba(179,89,255,0.35);
|
||||||
|
--bg-solid-fallback: #0a060e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback fuer Browser die backdrop-filter blockieren (z.B. Brave Shields) */
|
||||||
|
@supports not (backdrop-filter: blur(1px)) {
|
||||||
|
.board,
|
||||||
|
.widget,
|
||||||
|
.settings-panel,
|
||||||
|
.dialog-box,
|
||||||
|
.theme-modal,
|
||||||
|
.search-bar {
|
||||||
|
background-color: var(--bg-solid-fallback, var(--bg-primary));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -91,6 +104,7 @@
|
|||||||
--board-hover-border: rgba(179,89,255,0.18);
|
--board-hover-border: rgba(179,89,255,0.18);
|
||||||
--toggle-on-bg: rgba(214,92,255,0.22);
|
--toggle-on-bg: rgba(214,92,255,0.22);
|
||||||
--logo-shadow: rgba(179,89,255,0.35);
|
--logo-shadow: rgba(179,89,255,0.35);
|
||||||
|
--bg-solid-fallback: #0a060e;
|
||||||
}
|
}
|
||||||
[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); }
|
[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); }
|
||||||
[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); }
|
[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); }
|
||||||
@@ -116,6 +130,7 @@
|
|||||||
--board-hover-border: rgba(212, 189, 138, 0.20);
|
--board-hover-border: rgba(212, 189, 138, 0.20);
|
||||||
--toggle-on-bg: rgba(200,168,74,0.22);
|
--toggle-on-bg: rgba(200,168,74,0.22);
|
||||||
--logo-shadow: rgba(212, 189, 138, 0.40);
|
--logo-shadow: rgba(212, 189, 138, 0.40);
|
||||||
|
--bg-solid-fallback: #080c16;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -146,6 +161,7 @@
|
|||||||
--board-hover-border: rgba(157, 92, 255, 0.22);
|
--board-hover-border: rgba(157, 92, 255, 0.22);
|
||||||
--toggle-on-bg: rgba(224,128,48,0.22);
|
--toggle-on-bg: rgba(224,128,48,0.22);
|
||||||
--logo-shadow: rgba(157, 92, 255, 0.45);
|
--logo-shadow: rgba(157, 92, 255, 0.45);
|
||||||
|
--bg-solid-fallback: #08050f;
|
||||||
}
|
}
|
||||||
[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); }
|
[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); }
|
||||||
[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); }
|
[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); }
|
||||||
@@ -172,6 +188,7 @@
|
|||||||
--board-hover-border: rgba(46, 184, 184, 0.20);
|
--board-hover-border: rgba(46, 184, 184, 0.20);
|
||||||
--toggle-on-bg: rgba(78,207,207,0.22);
|
--toggle-on-bg: rgba(78,207,207,0.22);
|
||||||
--logo-shadow: rgba(46, 184, 184, 0.45);
|
--logo-shadow: rgba(46, 184, 184, 0.45);
|
||||||
|
--bg-solid-fallback: #060a0a;
|
||||||
}
|
}
|
||||||
[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); }
|
[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); }
|
||||||
[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); }
|
[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); }
|
||||||
@@ -197,6 +214,7 @@
|
|||||||
--board-hover-border: rgba(125, 179, 255, 0.22);
|
--board-hover-border: rgba(125, 179, 255, 0.22);
|
||||||
--toggle-on-bg: rgba(91,159,255,0.22);
|
--toggle-on-bg: rgba(91,159,255,0.22);
|
||||||
--logo-shadow: rgba(125, 179, 255, 0.50);
|
--logo-shadow: rgba(125, 179, 255, 0.50);
|
||||||
|
--bg-solid-fallback: #070a14;
|
||||||
}
|
}
|
||||||
[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; }
|
[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; }
|
||||||
[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; }
|
[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; }
|
||||||
@@ -225,6 +243,7 @@
|
|||||||
--board-hover-border: rgba(255, 140, 61, 0.22);
|
--board-hover-border: rgba(255, 140, 61, 0.22);
|
||||||
--toggle-on-bg: rgba(240,124,48,0.22);
|
--toggle-on-bg: rgba(240,124,48,0.22);
|
||||||
--logo-shadow: rgba(255, 140, 61, 0.45);
|
--logo-shadow: rgba(255, 140, 61, 0.45);
|
||||||
|
--bg-solid-fallback: #0f0a08;
|
||||||
}
|
}
|
||||||
[data-theme="sc-sunset"] .board {
|
[data-theme="sc-sunset"] .board {
|
||||||
border-color: rgba(255, 140, 61, 0.15);
|
border-color: rgba(255, 140, 61, 0.15);
|
||||||
@@ -253,6 +272,7 @@
|
|||||||
--board-hover-border: rgba(50, 255, 106, 0.20);
|
--board-hover-border: rgba(50, 255, 106, 0.20);
|
||||||
--toggle-on-bg: rgba(34,204,68,0.20);
|
--toggle-on-bg: rgba(34,204,68,0.20);
|
||||||
--logo-shadow: rgba(50, 255, 106, 0.40);
|
--logo-shadow: rgba(50, 255, 106, 0.40);
|
||||||
|
--bg-solid-fallback: #050805;
|
||||||
--danger: #ff4d4d;
|
--danger: #ff4d4d;
|
||||||
}
|
}
|
||||||
[data-theme="hellion-hud"] .board {
|
[data-theme="hellion-hud"] .board {
|
||||||
@@ -287,6 +307,7 @@
|
|||||||
--board-hover-border: rgba(30, 255, 142, 0.25);
|
--board-hover-border: rgba(30, 255, 142, 0.25);
|
||||||
--toggle-on-bg: rgba(0,232,122,0.18);
|
--toggle-on-bg: rgba(0,232,122,0.18);
|
||||||
--logo-shadow: rgba(30, 255, 142, 0.60);
|
--logo-shadow: rgba(30, 255, 142, 0.60);
|
||||||
|
--bg-solid-fallback: #040705;
|
||||||
}
|
}
|
||||||
[data-theme="hellion-energy"] .board {
|
[data-theme="hellion-energy"] .board {
|
||||||
border-color: rgba(30, 255, 142, 0.15);
|
border-color: rgba(30, 255, 142, 0.15);
|
||||||
@@ -322,6 +343,7 @@
|
|||||||
--board-hover-border: rgba(0, 180, 216, 0.25);
|
--board-hover-border: rgba(0, 180, 216, 0.25);
|
||||||
--toggle-on-bg: rgba(0, 180, 216, 0.20);
|
--toggle-on-bg: rgba(0, 180, 216, 0.20);
|
||||||
--logo-shadow: rgba(0, 180, 216, 0.40);
|
--logo-shadow: rgba(0, 180, 216, 0.40);
|
||||||
|
--bg-solid-fallback: #1a0f08;
|
||||||
}
|
}
|
||||||
[data-theme="satisfactory"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
|
[data-theme="satisfactory"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
|
||||||
[data-theme="satisfactory"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); }
|
[data-theme="satisfactory"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); }
|
||||||
@@ -352,6 +374,7 @@
|
|||||||
--board-hover-border: rgba(46, 196, 160, 0.22);
|
--board-hover-border: rgba(46, 196, 160, 0.22);
|
||||||
--toggle-on-bg: rgba(46, 196, 160, 0.18);
|
--toggle-on-bg: rgba(46, 196, 160, 0.18);
|
||||||
--logo-shadow: rgba(46, 196, 160, 0.50);
|
--logo-shadow: rgba(46, 196, 160, 0.50);
|
||||||
|
--bg-solid-fallback: #020d0c;
|
||||||
}
|
}
|
||||||
[data-theme="avorion"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; }
|
[data-theme="avorion"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; }
|
||||||
[data-theme="avorion"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); }
|
[data-theme="avorion"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); }
|
||||||
@@ -382,6 +405,7 @@
|
|||||||
--board-hover-border: rgba(94, 194, 255, 0.25);
|
--board-hover-border: rgba(94, 194, 255, 0.25);
|
||||||
--toggle-on-bg: rgba(94, 194, 255, 0.20);
|
--toggle-on-bg: rgba(94, 194, 255, 0.20);
|
||||||
--logo-shadow: rgba(94, 194, 255, 0.45);
|
--logo-shadow: rgba(94, 194, 255, 0.45);
|
||||||
|
--bg-solid-fallback: #0d0f12;
|
||||||
}
|
}
|
||||||
[data-theme="hellion-stealth"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 4px; }
|
[data-theme="hellion-stealth"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 4px; }
|
||||||
[data-theme="hellion-stealth"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); }
|
[data-theme="hellion-stealth"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); }
|
||||||
|
|||||||
Reference in New Issue
Block a user