mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-11-04 07:24:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix a bunch of CSS variables

Browse source
This commit is contained in:
dakkar 2024-12-09 09:41:48 +00:00
parent 9937ff39be
commit 3d1e35c9b8
6 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/MkFoldableSection.vue
View file

@ -110,7 +110,7 @@ onMounted(() => {
top: var(--MI-stickyTop, 0px);
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(20px));
background-color: color(from v-bind("parentBg ?? 'var(--bg)'") srgb r g b / 0.85);
background-color: color(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") srgb r g b / 0.85);
}
.title {

54
packages/frontend/src/components/SkFlashPlayer.vue
View file

@ -244,9 +244,9 @@ onDeactivated(() => {
}
.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;
}
@ -260,9 +260,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;
@ -276,9 +276,9 @@ onDeactivated(() => {
> .alt {
display: block;
position: absolute;
border-radius: var(--radius-sm);
border-radius: var(--MI-radius-sm);
background-color: black;
color: var(--accentLighten);
color: var(--MI_THEME-accentLighten);
font-size: 0.8em;
font-weight: bold;
opacity: .5;
@ -311,10 +311,10 @@ 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;
border-radius: var(--radius-sm);
border-radius: var(--MI-radius-sm);
position: absolute;
z-index: 4;
@ -334,7 +334,7 @@ onDeactivated(() => {
> .controls {
display: flex;
width: 100%;
background-color: var(--bg);
background-color: var(--MI_THEME-bg);
z-index: 5;
> * {
@ -344,12 +344,12 @@ onDeactivated(() => {
> button, a {
border: none;
background-color: transparent;
color: var(--accent);
color: var(--MI_THEME-accent);
text-decoration: none;
cursor: pointer;
&:hover {
background-color: var(--fg);
background-color: var(--MI_THEME-fg);
}
&:disabled {
@ -385,11 +385,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);
}
}
@ -398,8 +398,8 @@ onDeactivated(() => {
height: 100%;
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;
}
@ -408,9 +408,9 @@ onDeactivated(() => {
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
-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;
}
@ -420,13 +420,13 @@ onDeactivated(() => {
height: 100%;
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 {
height: 100%;
background: var(--accent);
background: var(--MI_THEME-accent);
}
&::-moz-range-thumb {
@ -434,7 +434,7 @@ onDeactivated(() => {
height: 100%;
border-radius: 0;
width: 14px;
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
&::-ms-track {
@ -448,14 +448,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;
}
@ -465,7 +465,7 @@ onDeactivated(() => {
height: 100%;
width: 14px;
border-radius: 0;
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
}
}

6
packages/frontend/src/components/SkFollowingRecentNotes.vue
View file

@ -118,15 +118,15 @@ function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes)
<style module lang="scss">
.panel {
background: var(--panel);
background: var(--MI_THEME-panel);
}
@keyframes border {
from {
border-left: 0 solid var(--accent);
border-left: 0 solid var(--MI_THEME-accent);
}
to {
border-left: 6px solid var(--accent);
border-left: 6px solid var(--MI_THEME-accent);
}
}

4
packages/frontend/src/components/SkMfmWindow.vue
View file

@ -491,12 +491,12 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[
> .title {
position: sticky;
z-index: 1;
top: var(--stickyTop, 0px);
top: var(--MI-stickyTop, 0px);
padding: 16px;
font-weight: bold;
-webkit-backdrop-filter: var(--MI-blur, blur(10px));
backdrop-filter: var(--MI-blur, blur(10px));
background-color: var(--X16);
background-color: var(--MI_THEME-X16);
}
> .content {

6
packages/frontend/src/components/SkNote.vue
View file

@ -157,7 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-heart ph-bold ph-lg"></i>
</button>
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()" @click.stop>
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
@ -1147,7 +1147,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: 100%;
margin-top: 14px;
position: sticky;
bottom: calc(var(--stickyBottom, 0px) - 100px);
bottom: calc(var(--MI-stickyBottom, 0px) - 100px);
}
.showLessLabel {
@ -1356,7 +1356,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.avatar {
margin: 0 10px 0 0;
top: calc(14px + var(--stickyTop, 0px));
top: calc(14px + var(--MI-stickyTop, 0px));
}
}

2
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -172,7 +172,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-heart ph-bold ph-lg"></i>
</button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>