diff options
Diffstat (limited to 'src')
| -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 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 2 | ||||
| -rw-r--r-- | src/styles/card.css | 3 |
7 files changed, 9 insertions, 5 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); } }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4aaf2159..633fdffc 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -239,7 +239,7 @@ $: { <Announcement /> <div class="container"> - <div class="card card-centered header" class:header-hidden={!isHeaderVisible}> + <div class="card card-centered card-glass header" class:header-hidden={!isHeaderVisible}> <div> <a href={root('/')} class="header-item">{$locale().navigation.home}</a><a href={root('/completed')} diff --git a/src/styles/card.css b/src/styles/card.css index 6aabf5fb..07a62fcd 100644 --- a/src/styles/card.css +++ b/src/styles/card.css @@ -30,6 +30,9 @@ details, background-color: var(--base0011); padding: 1rem; border-radius: 8px; +} + +.card-glass { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } |