misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor(frontend): prefix css variables (#14725)

Browse source 
* wip

* Update index.d.ts

* remove unnecessary codes
This commit is contained in:
syuilo 2024-10-09 18:08:14 +09:00 • committed by GitHub
parent 0ad31bd5d4
commit 4a356f1ba7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
280 changed files with 1076 additions and 1093 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend/src/ui/_common_/announcements.vue
View file

@ -13,9 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<span :class="$style.icon">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i>
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
</span>
<span :class="$style.title">{{ announcement.title }}</span>
<span :class="$style.body">{{ announcement.text }}</span>
@ -30,7 +30,7 @@ import { $i } from '@/account.js';
<style lang="scss" module>
.root {
font-size: 15px;
background: var(--panel);
background: var(--MI_THEME-panel);
}
.item {
@ -44,8 +44,8 @@ import { $i } from '@/account.js';
height: var(--height);
overflow: clip;
contain: strict;
background: var(--accent);
color: var(--fgOnAccent);
background: var(--MI_THEME-accent);
color: var(--MI_THEME-fgOnAccent);
@container (max-width: 1000px) {
display: block;

4
packages/frontend/src/ui/_common_/common.vue
View file

@ -234,8 +234,8 @@ if ($i) {
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: var(--accent);
border-left-color: var(--accent);
border-top-color: var(--MI_THEME-accent);
border-left-color: var(--MI_THEME-accent);
border-radius: 50%;
animation: progress-spinner 400ms linear infinite;
}

20
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -82,7 +82,7 @@ function more() {
<style lang="scss" module>
.root {
--nav-bg-transparent: color(from var(--navBg) srgb r g b / 0.5);
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
display: flex;
flex-direction: column;
@ -137,7 +137,7 @@ function more() {
display: block;
width: 100%;
height: 40px;
color: var(--fgOnAccent);
color: var(--MI_THEME-fgOnAccent);
font-weight: bold;
text-align: left;
@ -153,12 +153,12 @@ function more() {
right: 0;
bottom: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
}
&:hover, &.active {
&::before {
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
}
}
@ -202,7 +202,7 @@ function more() {
.divider {
margin: 16px 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.item {
@ -216,15 +216,15 @@ function more() {
width: 100%;
text-align: left;
box-sizing: border-box;
color: var(--navFg);
color: var(--MI_THEME-navFg);
&:hover {
text-decoration: none;
color: var(--navHoverFg);
color: var(--MI_THEME-navHoverFg);
}
&.active {
color: var(--navActive);
color: var(--MI_THEME-navActive);
}
&:hover, &.active {
@ -240,7 +240,7 @@ function more() {
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
}
}
@ -255,7 +255,7 @@ function more() {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
color: var(--MI_THEME-navIndicator);
font-size: 8px;
animation: global-blink 1s infinite;

54
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -111,7 +111,7 @@ function more(ev: MouseEvent) {
.root {
--nav-width: 250px;
--nav-icon-only-width: 80px;
--nav-bg-transparent: color(from var(--navBg) srgb r g b / 0.5);
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
flex: 0 0 var(--nav-width);
width: var(--nav-width);
@ -129,7 +129,7 @@ function more(ev: MouseEvent) {
overflow: auto;
overflow-x: clip;
overscroll-behavior: contain;
background: var(--navBg);
background: var(--MI_THEME-navBg);
contain: strict;
display: flex;
flex-direction: column;
@ -172,7 +172,7 @@ function more(ev: MouseEvent) {
outline: none;
> .instanceIcon {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: 2px;
}
}
@ -198,7 +198,7 @@ function more(ev: MouseEvent) {
display: block;
width: 100%;
height: 40px;
color: var(--fgOnAccent);
color: var(--MI_THEME-fgOnAccent);
font-weight: bold;
text-align: left;
@ -214,21 +214,21 @@ function more(ev: MouseEvent) {
right: 0;
bottom: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
}
&:focus-visible {
outline: none;
&::before {
outline: 2px solid var(--fgOnAccent);
outline: 2px solid var(--MI_THEME-fgOnAccent);
outline-offset: -4px;
}
}
&:hover, &.active {
&::before {
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
}
}
@ -258,7 +258,7 @@ function more(ev: MouseEvent) {
outline: none;
> .avatar {
box-shadow: 0 0 0 4px var(--focus);
box-shadow: 0 0 0 4px var(--MI_THEME-focus);
}
}
}
@ -284,7 +284,7 @@ function more(ev: MouseEvent) {
.divider {
margin: 16px 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.item {
@ -298,28 +298,28 @@ function more(ev: MouseEvent) {
width: 100%;
text-align: left;
box-sizing: border-box;
color: var(--navFg);
color: var(--MI_THEME-navFg);
&:hover {
text-decoration: none;
color: var(--navHoverFg);
color: var(--MI_THEME-navHoverFg);
}
&.active {
color: var(--navActive);
color: var(--MI_THEME-navActive);
}
&:focus-visible {
outline: none;
&::before {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: -2px;
}
}
&:hover, &.active, &:focus {
color: var(--accent);
color: var(--MI_THEME-accent);
&::before {
content: "";
@ -333,7 +333,7 @@ function more(ev: MouseEvent) {
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
}
}
@ -348,7 +348,7 @@ function more(ev: MouseEvent) {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
color: var(--MI_THEME-navIndicator);
font-size: 8px;
animation: global-blink 1s infinite;
@ -393,7 +393,7 @@ function more(ev: MouseEvent) {
outline: none;
> .instanceIcon {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: 2px;
}
}
@ -433,28 +433,28 @@ function more(ev: MouseEvent) {
width: 52px;
aspect-ratio: 1/1;
border-radius: 100%;
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
}
&:focus-visible {
outline: none;
&::before {
outline: 2px solid var(--fgOnAccent);
outline: 2px solid var(--MI_THEME-fgOnAccent);
outline-offset: -4px;
}
}
&:hover, &.active {
&::before {
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
}
}
.postIcon {
position: relative;
color: var(--fgOnAccent);
color: var(--MI_THEME-fgOnAccent);
}
.postText {
@ -472,7 +472,7 @@ function more(ev: MouseEvent) {
outline: none;
> .avatar {
box-shadow: 0 0 0 4px var(--focus);
box-shadow: 0 0 0 4px var(--MI_THEME-focus);
}
}
}
@ -494,7 +494,7 @@ function more(ev: MouseEvent) {
.divider {
margin: 8px auto;
width: calc(100% - 32px);
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.item {
@ -508,14 +508,14 @@ function more(ev: MouseEvent) {
outline: none;
&::before {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: -2px;
}
}
&:hover, &.active, &:focus {
text-decoration: none;
color: var(--accent);
color: var(--MI_THEME-accent);
&::before {
content: "";
@ -529,7 +529,7 @@ function more(ev: MouseEvent) {
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
> .icon,
@ -553,7 +553,7 @@ function more(ev: MouseEvent) {
position: absolute;
top: 6px;
left: 24px;
color: var(--navIndicator);
color: var(--MI_THEME-navIndicator);
font-size: 8px;
animation: global-blink 1s infinite;

4
packages/frontend/src/ui/_common_/statusbars.vue
View file

@ -32,7 +32,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
<style lang="scss" module>
.root {
font-size: 15px;
background: var(--panel);
background: var(--MI_THEME-panel);
}
.item {
@ -81,7 +81,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
.name {
padding: 0 var(--nameMargin);
font-weight: bold;
color: var(--accent);
color: var(--MI_THEME-accent);
&:empty {
display: none;

4
packages/frontend/src/ui/_common_/upload.vue
View file

@ -125,10 +125,10 @@ const zIndex = os.claimZIndex('high');
height: 8px;
}
.mk-uploader > ol > li > progress::-webkit-progress-value {
background: var(--accent);
background: var(--MI_THEME-accent);
}
.mk-uploader > ol > li > progress::-webkit-progress-bar {
//background: var(--accentAlpha01);
//background: var(--MI_THEME-accentAlpha01);
background: transparent;
}
</style>