From 32654c71531cce80688254a7854f9b355934fde9 Mon Sep 17 00:00:00 2001
From: CenTdemeern1 <timo.herngreen@gmail.com>
Date: Sat, 30 Nov 2024 11:21:08 +0100
Subject: [PATCH] Use new `--MI` and `--MI_THEME`

---
 .../frontend/src/components/SkModPlayer.vue   | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 467665398c..0933806109 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -440,9 +440,9 @@ onDeactivated(() => {
 <style lang="scss" module>
 
 .hide {
-	border-radius: var(--radius-sm) !important;
+	border-radius: var(--MI-radius-sm) !important;
 	background-color: black !important;
-	color: var(--accentLighten) !important;
+	color: var(--MI_THEME-accentLighten) !important;
 	font-size: 12px !important;
 }
 
@@ -456,9 +456,9 @@ onDeactivated(() => {
 	> i {
 		display: block;
 		position: absolute;
-		border-radius: var(--radius-sm);
-		background-color: var(--fg);
-		color: var(--accentLighten);
+		border-radius: var(--MI-radius-sm);
+		background-color: var(--MI_THEME-fg);
+		color: var(--MI_THEME-accentLighten);
 		font-size: 14px;
 		opacity: .5;
 		padding: 3px 6px;
@@ -519,7 +519,7 @@ onDeactivated(() => {
 			justify-content: center;
 			align-items: center;
 			background: rgba(64, 64, 64, 0.3);
-			backdrop-filter: var(--modalBgFilter);
+			backdrop-filter: var(--MI-modalBgFilter);
 			color: #fff;
 			font-size: 12px;
 
@@ -537,7 +537,7 @@ onDeactivated(() => {
 	> .controls {
 		display: flex;
 		width: 100%;
-		background-color: var(--bg);
+		background-color: var(--MI_THEME-bg);
 		z-index: 5;
 
 		> * {
@@ -547,11 +547,11 @@ onDeactivated(() => {
 		> button, a {
 			border: none;
 			background-color: transparent;
-			color: var(--accent);
+			color: var(--MI_THEME-accent);
 			cursor: pointer;
 
 			&:hover {
-				background-color: var(--fg);
+				background-color: var(--MI_THEME-fg);
 			}
 		}
 
@@ -579,11 +579,11 @@ onDeactivated(() => {
 				outline: none;
 
 				&::-webkit-slider-runnable-track {
-					background: var(--bg);
+					background: var(--MI_THEME-bg);
 				}
 
 				&::-ms-fill-lower, &::-ms-fill-upper {
-					background: var(--bg);
+					background: var(--MI_THEME-bg);
 				}
 			}
 
@@ -593,8 +593,8 @@ onDeactivated(() => {
 				cursor: pointer;
 				border-radius: 0;
 				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 				overflow-x: hidden;
 			}
 
@@ -603,10 +603,10 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				cursor: pointer;
 				-webkit-appearance: none;
-				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
+				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
 				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
 				z-index: 1;
 			}
@@ -617,14 +617,14 @@ onDeactivated(() => {
 				cursor: pointer;
 				border-radius: 0;
 				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 			}
 
 			&::-moz-range-progress {
 				cursor: pointer;
 				height: 100%;
-				background: var(--accent);
+				background: var(--MI_THEME-accent);
 			}
 
 			&::-moz-range-thumb {
@@ -632,7 +632,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				cursor: pointer;
 			}
 
@@ -648,14 +648,14 @@ onDeactivated(() => {
 			}
 
 			&::-ms-fill-lower {
-				background: var(--accent);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-accent);
+				border: 1px solid var(--MI_THEME-fg);
 				border-radius: 0;
 			}
 
 			&::-ms-fill-upper {
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 				border-radius: 0;
 			}
 
@@ -665,7 +665,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				cursor: pointer;
 			}