Use transform instead of scale for scaling game icons

Vauhtijuoksu · Apr 28, 2024 · 0d2765c · 0d2765c
1 parent 0527279
commit 0d2765c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/lib/StreamLayout.svelte b/src/lib/StreamLayout.svelte
@@ -124,4 +124,18 @@
 		:global(.row.overflow) {
 			overflow: visible;
 		}
+		:global(.debug) {
+			border: 1px solid red;
+		}
+		:global(.debug .debug) {
+			border-color: blue;
+		}
+
+		:global(.debug .debug .debug) {
+			border-color: greenyellow;
+		}
+
+		:global(.debug .debug .debug .debug) {
+			border-color: plum;
+		}
 </style>
diff --git a/src/lib/components/Incentives.svelte b/src/lib/components/Incentives.svelte
@@ -114,7 +114,7 @@
 		font-size: var(--font-size-lg);
 	}
 	.icon {
-        scale: var(--setup-time-game-icon-scale, 1);
+		transform: scale(var(--setup-time-game-icon-scale, 1));
 		margin-left: -100px;
 		margin-top: 10px;
 	}

diff --git a/src/lib/components/Upcoming.svelte b/src/lib/components/Upcoming.svelte
@@ -95,7 +95,7 @@
         display: flex;
         width: 160px;
         margin: -10px -10px -30px -10px;
-        scale: var(--setup-time-game-icon-scale, 1);
+		transform: scale(var(--setup-time-game-icon-scale, 1));
     }
     .gamerow .col {
         flex-grow: 1;

diff --git a/src/lib/themes/vj2024.ts b/src/lib/themes/vj2024.ts
@@ -184,7 +184,7 @@ const vj2024base: LayoutTheme = {
     --fourthree-gameicon-margin-left: -20px;
     --fourthree-gameicon-margin-right: 0px;
     --fourthree-gameicon-margin-bottom: 200px;
-    --setup-time-game-icon-scale: 0.8;
+    --setup-time-game-icon-scale: 80%;
     --divider-size: 40px;
   `
 }