From 7ee99ad30fbb8e7117c5e6cb909e77e8d1d36bb8 Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Tue, 23 Jul 2024 09:55:55 +0600 Subject: [PATCH] web/Skeleton: add elevated skeleton and use it for picker item - fixed bg not being visible when shimmer is not on the element in dark theme - fixed stuck gradient when motion is reduced - fixed big skeleton - skeleton is no longer focusable --- web/src/components/dialog/PickerItem.svelte | 14 +++++++------- web/src/components/misc/Skeleton.svelte | 16 +++++++++++++--- web/src/routes/+layout.svelte | 17 ++++++++++++++++- 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte index 9760fdac..496801ed 100644 --- a/web/src/components/dialog/PickerItem.svelte +++ b/web/src/components/dialog/PickerItem.svelte @@ -44,7 +44,7 @@ alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}" /> - <Skeleton class="picker-image" hidden={imageLoaded} /> + <Skeleton class="picker-image elevated" hidden={imageLoaded} /> </button> <style> @@ -72,17 +72,17 @@ display: none; } - .picker-item:active .picker-image { - opacity: 0.8; - } - .picker-image.video-thumbnail { pointer-events: none; } + :global(.picker-item:active .picker-image) { + opacity: 0.7; + } + @media (hover: hover) { - .picker-item:hover .picker-image { - opacity: 0.8; + :global(.picker-item:hover .picker-image) { + opacity: 0.7; } } diff --git a/web/src/components/misc/Skeleton.svelte b/web/src/components/misc/Skeleton.svelte index 7f625e4b..f7fd7881 100644 --- a/web/src/components/misc/Skeleton.svelte +++ b/web/src/components/misc/Skeleton.svelte @@ -36,15 +36,25 @@ line-height: 1; font-size: 1em; text-align: center; + pointer-events: none; } :global([data-theme=light]) .skeleton { background-color: var(--button-hover); } + .skeleton.elevated { + background-image: var(--skeleton-gradient-elevated); + background-color: var(--button-elevated); + } + + :global([data-reduce-motion="true"]) .skeleton { + background-image: none; + } + .skeleton.big { border-radius: var(--border-radius); - background-size: 700px 100%; + background-size: 400px 100%; animation: skeleton-big 1.2s ease-in-out infinite; } @@ -59,10 +69,10 @@ @keyframes skeleton-big { 0% { - background-position: -700px 0; + background-position: -400px 0; } 100% { - background-position: calc(700px + 100%) 0; + background-position: calc(400px + 100%) 0; } } </style> \ No newline at end of file diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 2cf815c9..d5fe935d 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -76,6 +76,7 @@ --button-elevated: #e3e3e3; --button-elevated-hover: #dadada; + --button-elevated-shimmer: #ededed; --popup-bg: #f1f1f1; --popup-stroke: rgba(0, 0, 0, 0.08); @@ -123,6 +124,13 @@ var(--button), var(--button-hover) ); + + --skeleton-gradient-elevated: linear-gradient( + 90deg, + var(--button-elevated), + var(--button-elevated-shimmer), + var(--button-elevated) + ); } :global([data-theme="dark"]) { @@ -143,7 +151,7 @@ --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset; --button-elevated: #282828; - --button-elevated-hover: #2f2f2f; + --button-elevated-hover: #323232; --popup-bg: #191919; --popup-stroke: rgba(255, 255, 255, 0.08); @@ -173,6 +181,13 @@ var(--button-hover), var(--button) ); + + --skeleton-gradient-elevated: linear-gradient( + 90deg, + var(--button-elevated), + var(--button-elevated-hover), + var(--button-elevated) + ); } :global([data-theme="light"] [data-reduce-transparency="true"]) {