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>
.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;
}