summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkMediaVideo.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/components/MkMediaVideo.vue')
-rw-r--r--packages/frontend/src/components/MkMediaVideo.vue18
1 files changed, 9 insertions, 9 deletions
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 0502bdd401..c3cecba7b7 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
- <div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
+ <div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
</div>
@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
- <div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
+ <div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
<div :class="$style.videoControls" @click.self="togglePlayPause">
<div :class="[$style.controlsChild, $style.controlsLeft]">
@@ -511,7 +511,7 @@ onDeactivated(() => {
height: 100%;
pointer-events: none;
border-radius: inherit;
- box-shadow: inset 0 0 0 4px var(--warn);
+ box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
}
}
@@ -526,10 +526,10 @@ onDeactivated(() => {
}
.indicator {
- /* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
+ /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
background-color: black;
border-radius: 6px;
- color: var(--accentLighten);
+ color: var(--MI_THEME-accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;
@@ -541,7 +541,7 @@ onDeactivated(() => {
position: absolute;
border-radius: var(--radius-sm);
background-color: black;
- color: var(--accentLighten);
+ color: var(--MI_THEME-accentLighten);
font-size: 12px;
opacity: .5;
padding: 5px 8px;
@@ -595,7 +595,7 @@ onDeactivated(() => {
opacity: 0;
transition: opacity .4s ease-in-out;
- background: var(--accent);
+ background: var(--MI_THEME-accent);
color: #fff;
padding: 1rem;
border-radius: 99rem;
@@ -661,12 +661,12 @@ onDeactivated(() => {
.controlButton {
padding: 6px;
- border-radius: calc(var(--radius) / 2);
+ border-radius: calc(var(--MI-radius) / 2);
transition: background-color .2s ease-in-out;
font-size: 1.05rem;
&:hover {
- background-color: var(--accent);
+ background-color: var(--MI_THEME-accent);
}
&:focus-visible {