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>