From 177a5c048cfd3f71762d6b9ba071dad59ddfd381 Mon Sep 17 00:00:00 2001 From: Vavency Date: Thu, 24 Jul 2025 20:24:20 +0300 Subject: [PATCH] [frontend] Theme: add SkModPlayer slider knob as a theme-able var. --- packages/frontend-shared/themes/_dark.json5 | 2 ++ packages/frontend-shared/themes/_light.json5 | 2 ++ packages/frontend/src/components/SkModPlayer.vue | 7 ++++--- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5 index a9de410cee..2987765976 100644 --- a/packages/frontend-shared/themes/_dark.json5 +++ b/packages/frontend-shared/themes/_dark.json5 @@ -79,6 +79,8 @@ modPlayerVolume: '#80ff80', modPlayerFx: '#ff80e0', modPlayerOperant: '#ffe080', + modPlayerShadow: 'rgba(0, 0, 0, 0.5)', + modPlayerSliderKnob: ':darken<10<@indicator', }, codeHighlighter: { diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5 index 79d8996a11..b4475d8d54 100644 --- a/packages/frontend-shared/themes/_light.json5 +++ b/packages/frontend-shared/themes/_light.json5 @@ -79,6 +79,8 @@ modPlayerVolume: '#80ff80', modPlayerFx: '#ff80e0', modPlayerOperant: '#ffe080', + modPlayerShadow: 'rgba(0, 0, 0, 0.5)', + modPlayerSliderKnob: ':darken<10<@indicator', }, codeHighlighter: { diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue index 4dd671936f..4cf4722c3c 100644 --- a/packages/frontend/src/components/SkModPlayer.vue +++ b/packages/frontend/src/components/SkModPlayer.vue @@ -551,6 +551,7 @@ onDeactivated(() => { --MI_THEME-modPlayerFx: #ff80e0; --MI_THEME-modPlayerOperant: #ffe080; --MI_THEME-modPlayerShadow: #00000080; + --MI_THEME-modPlayerSliderKnob: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.1)); } .hide { @@ -761,7 +762,7 @@ onDeactivated(() => { height: 100%; width: 14px; border-radius: 0; - background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5)); + background: var(--MI_THEME-modPlayerSliderKnob); cursor: pointer; -webkit-appearance: none; box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent); @@ -790,7 +791,7 @@ onDeactivated(() => { height: 100%; border-radius: 0; width: 14px; - background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5)); + background: var(--MI_THEME-modPlayerSliderKnob); cursor: pointer; } @@ -823,7 +824,7 @@ onDeactivated(() => { height: 100%; width: 14px; border-radius: 0; - background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5)); + background: var(--MI_THEME-modPlayerSliderKnob); cursor: pointer; }