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"]) {