Adjust sizing and color of new paella icons (#1165)

This makes the new play and spinner icons slightly smaller and thinner, and uses a darker grey. <img width="1001" alt="Bildschirmfoto 2024-05-13 um 12 51 08" src="https://github.com/elan-ev/tobira/assets/94838646/f48e2905-46b2-462d-a125-e4d78be93310">
elan-ev · May 23, 2024 · 51008d8 · 51008d8
2 parents f1e01cd + ec055a5
commit 51008d8
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx
@@ -264,14 +264,19 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({ event }) => {
                     zIndex: 500000,
                 },
 
-                "& .preview-play-icon, .loader-container i": {
+                "button:has(.preview-play-icon), & .loader-container i": {
+                    maxWidth: 150,
+                },
+
+                "& .preview-play-icon, & .loader-container i": {
                     color: "#ecf0f1",
-                    opacity: "0.8 !important",
+                    opacity: ".8 !important",
                     transition: "opacity 0.08s",
-                },
 
-                "& .preview-play-icon > svg": {
-                    filter: "drop-shadow(0 0 2px #777777)",
+                    "> svg": {
+                        strokeWidth: 1.5,
+                        filter: "drop-shadow(0 0 1px #000)",
+                    },
                 },
 
                 ":hover .preview-play-icon, .loader-container i": {