Use new --MI and --MI_THEME

This commit is contained in:
CenTdemeern1 2024-11-30 11:21:08 +01:00
parent a6a78d35a7
commit 32654c7153

View file

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