ulfrxdev
ded24b53b4
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
76 lines
3.4 KiB
JavaScript
76 lines
3.4 KiB
JavaScript
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%);
|
|
}
|
|
|
|
.filter-liquid-surface.filter-liquid-panel-soft {
|
|
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.52);
|
|
}
|
|
|
|
.dark .filter-liquid-surface.filter-liquid-panel-soft {
|
|
--filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.6);
|
|
}
|
|
`;
|
|
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}`;
|
|
}
|