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); top: var(--MI-stickyTop, 0px);
-webkit-backdrop-filter: var(--MI-blur, blur(8px)); -webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(20px)); 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 { .title {

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

@ -244,9 +244,9 @@ onDeactivated(() => {
} }
.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;
} }
@ -260,9 +260,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;
@ -276,9 +276,9 @@ onDeactivated(() => {
> .alt { > .alt {
display: block; display: block;
position: absolute; position: absolute;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
background-color: black; background-color: black;
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
opacity: .5; opacity: .5;
@ -311,10 +311,10 @@ 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;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
position: absolute; position: absolute;
z-index: 4; z-index: 4;
@ -334,7 +334,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;
> * { > * {
@ -344,12 +344,12 @@ onDeactivated(() => {
> button, a { > button, a {
border: none; border: none;
background-color: transparent; background-color: transparent;
color: var(--accent); color: var(--MI_THEME-accent);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--fg); background-color: var(--MI_THEME-fg);
} }
&:disabled { &:disabled {
@ -385,11 +385,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);
} }
} }
@ -398,8 +398,8 @@ onDeactivated(() => {
height: 100%; height: 100%;
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;
} }
@ -408,9 +408,9 @@ onDeactivated(() => {
height: 100%; height: 100%;
width: 14px; width: 14px;
border-radius: 0; border-radius: 0;
background: var(--accentLighten); background: var(--MI_THEME-accentLighten);
-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;
} }
@ -420,13 +420,13 @@ onDeactivated(() => {
height: 100%; height: 100%;
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 {
height: 100%; height: 100%;
background: var(--accent); background: var(--MI_THEME-accent);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@ -434,7 +434,7 @@ onDeactivated(() => {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
width: 14px; width: 14px;
background: var(--accentLighten); background: var(--MI_THEME-accentLighten);
} }
&::-ms-track { &::-ms-track {
@ -448,14 +448,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;
} }
@ -465,7 +465,7 @@ onDeactivated(() => {
height: 100%; height: 100%;
width: 14px; width: 14px;
border-radius: 0; 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"> <style module lang="scss">
.panel { .panel {
background: var(--panel); background: var(--MI_THEME-panel);
} }
@keyframes border { @keyframes border {
from { from {
border-left: 0 solid var(--accent); border-left: 0 solid var(--MI_THEME-accent);
} }
to { 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 { > .title {
position: sticky; position: sticky;
z-index: 1; z-index: 1;
top: var(--stickyTop, 0px); top: var(--MI-stickyTop, 0px);
padding: 16px; padding: 16px;
font-weight: bold; font-weight: bold;
-webkit-backdrop-filter: var(--MI-blur, blur(10px)); -webkit-backdrop-filter: var(--MI-blur, blur(10px));
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 { > .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> <i class="ph-heart ph-bold ph-lg"></i>
</button> </button>
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()" @click.stop> <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.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-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i> <i v-else class="ph-smiley ph-bold ph-lg"></i>
@ -1147,7 +1147,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom, 0px) - 100px); bottom: calc(var(--MI-stickyBottom, 0px) - 100px);
} }
.showLessLabel { .showLessLabel {
@ -1356,7 +1356,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.avatar { .avatar {
margin: 0 10px 0 0; 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> <i class="ph-heart ph-bold ph-lg"></i>
</button> </button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()"> <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.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-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i> <i v-else class="ph-smiley ph-bold ph-lg"></i>