diff options
| author | Fuwn <[email protected]> | 2026-05-15 11:59:35 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-15 11:59:35 +0000 |
| commit | 45c66eaa88aefba86bf2a75d17c0f2fcdebaae1b (patch) | |
| tree | 8f8e87423fb30e8a05348d02ce14f0d090033836 /src/lib | |
| parent | fix(a11y): drop redundant alts and the landing em dash (diff) | |
| download | due.moe-45c66eaa88aefba86bf2a75d17c0f2fcdebaae1b.tar.xz due.moe-45c66eaa88aefba86bf2a75d17c0f2fcdebaae1b.zip | |
style(card): move backdrop blur to an opt-in .card-glass modifier
Strip backdrop-filter: blur(4px) from the base .card so the ~50
in-flow surfaces (landing panels, schedule rows, tool cards, user
profile cards, badge wall, etc.) stop paying for a blur they don't
need. Introduce .card-glass for the surfaces that actually float over
other content: the sticky page header, header nav dropdowns, command
palette, title-attribute tooltips, LinkedTooltip, and HoverCover.
Popup, MediaRoulette, and Notification keep their existing
parent-overlay or solid-background treatments.
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/CommandPalette/CommandPalette.svelte | 2 | ||||
| -rw-r--r-- | src/lib/Layout/Dropdown.svelte | 2 | ||||
| -rw-r--r-- | src/lib/Media/Cover/HoverCover.svelte | 2 | ||||
| -rw-r--r-- | src/lib/Tooltip/LinkedTooltip.svelte | 2 | ||||
| -rw-r--r-- | src/lib/Tooltip/tooltip.ts | 1 |
5 files changed, 5 insertions, 4 deletions
diff --git a/src/lib/CommandPalette/CommandPalette.svelte b/src/lib/CommandPalette/CommandPalette.svelte index 5eb06ef7..ca3513f4 100644 --- a/src/lib/CommandPalette/CommandPalette.svelte +++ b/src/lib/CommandPalette/CommandPalette.svelte @@ -178,7 +178,7 @@ const handleGlobalKey = (e: KeyboardEvent) => { aria-modal="true" aria-label="Command palette" > - <div class="dropdown-content card card-small"> + <div class="dropdown-content card card-small card-glass"> <input bind:this={inputRef} bind:value={search} diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte index 105b29f3..95b763ad 100644 --- a/src/lib/Layout/Dropdown.svelte +++ b/src/lib/Layout/Dropdown.svelte @@ -111,7 +111,7 @@ const handleItemKey = async (e: KeyboardEvent, index: number) => { </span> <div - class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`} + class={`dropdown-content card card-small card-glass ${open ? 'dropdown-open' : ''}`} id={menuId} role="menu" aria-labelledby={toggleId} diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte index 1909449f..c1412fa4 100644 --- a/src/lib/Media/Cover/HoverCover.svelte +++ b/src/lib/Media/Cover/HoverCover.svelte @@ -8,7 +8,7 @@ export let width = 250; {#if options.hovering} <img - class="hover-image show card card-small" + class="hover-image show card card-small card-glass" src={options.media ? $settings.displayDataSaver ? options.media.coverImage.medium diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte index bbf0ffe5..2a7961f5 100644 --- a/src/lib/Tooltip/LinkedTooltip.svelte +++ b/src/lib/Tooltip/LinkedTooltip.svelte @@ -253,7 +253,7 @@ const handleMouseLeave = () => { {#if tooltipDiv} <div - class="tooltip card card-small" + class="tooltip card card-small card-glass" style={`left: ${$tooltipPosition.x}px; top: ${$tooltipPosition.y}px; opacity: ${opacity}; --tooltip-opacity-transition-time: ${tooltipOpacityTransitionTime}ms;`} > {#key content} diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts index 3235cb25..3024bbff 100644 --- a/src/lib/Tooltip/tooltip.ts +++ b/src/lib/Tooltip/tooltip.ts @@ -24,6 +24,7 @@ const tooltip = (element: HTMLElement) => { tooltipDiv.classList.add("card"); tooltipDiv.classList.add("card-small"); + tooltipDiv.classList.add("card-glass"); document.body.appendChild(tooltipDiv); } }; |