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