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

@@ -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;
         }
     }
 

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>

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