sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
280 changed files with 1076 additions and 1093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/pages/settings/2fa.vue
View File

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #icon><i class="ti ti-shield-lock"></i></template>
<template #label>{{ i18n.ts.totp }}</template>
<template #caption>{{ i18n.ts.totpDescription }}</template>
<template #suffix><i v-if="$i.twoFactorEnabled" class="ti ti-check" style="color: var(--success)"></i></template>
<template #suffix><i v-if="$i.twoFactorEnabled" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<div v-if="$i.twoFactorEnabled" class="_gaps_s">
<div v-text="i18n.ts._2fa.alreadyRegistered"/>

6
packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
View File

@@ -43,7 +43,7 @@ const emit = defineEmits<{
.root {
cursor: pointer;
padding: 16px 16px 28px 16px;
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
border-radius: 8px;
text-align: center;
font-size: 90%;
@@ -52,8 +52,8 @@ const emit = defineEmits<{
}
.active {
background-color: var(--accentedBg);
border-color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
border-color: var(--MI_THEME-accent);
}
.name {

2
packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
View File

@@ -150,7 +150,7 @@ async function detach() {
bottom: 0;
left: 0;
padding: 12px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}

2
packages/frontend/src/pages/settings/drive-cleaner.vue
View File

@@ -132,7 +132,7 @@ definePageMetadata(() => ({
align-items: center;
&:hover {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}

2
packages/frontend/src/pages/settings/email.vue
View File

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInput v-model="emailAddress" type="email" manualSave>
<template #prefix><i class="ti ti-mail"></i></template>
<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i> {{ i18n.ts.emailVerified }}</template>
</MkInput>
</FormSection>

4
packages/frontend/src/pages/settings/emoji-picker.vue
View File

@@ -250,7 +250,7 @@ definePageMetadata(() => ({
.tab {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
background: var(--bg);
background: var(--MI_THEME-bg);
}
.emojis {
@@ -272,6 +272,6 @@ definePageMetadata(() => ({
.editorCaption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

2
packages/frontend/src/pages/settings/mute-block.vue
View File

@@ -244,7 +244,7 @@ definePageMetadata(() => ({
.userItemSub {
padding: 6px 12px;
font-size: 85%;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
.userItemMainBody {

2
packages/frontend/src/pages/settings/navbar.vue
View File

@@ -122,7 +122,7 @@ definePageMetadata(() => ({
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: var(--navFg);
color: var(--MI_THEME-navFg);
}
.itemIcon {

2
packages/frontend/src/pages/settings/profile.vue
View File

@@ -282,7 +282,7 @@ definePageMetadata(() => ({
height: 130px;
background-size: cover;
background-position: center;
border-bottom: solid 1px var(--divider);
border-bottom: solid 1px var(--MI_THEME-divider);
overflow: clip;
}

6
packages/frontend/src/pages/settings/security.vue
View File

@@ -124,7 +124,7 @@ definePageMetadata(() => ({
}
&:not(:last-child) {
border-bottom: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
> header {
@@ -136,11 +136,11 @@ definePageMetadata(() => ({
margin-right: 0.75em;
&.succ {
color: var(--success);
color: var(--MI_THEME-success);
}
&.fail {
color: var(--error);
color: var(--MI_THEME-error);
}
}

4
packages/frontend/src/pages/settings/sounds.sound.vue
View File

@@ -194,7 +194,7 @@ function save() {
flex-grow: 1;
min-width: 0;
font-weight: 700;
color: var(--error);
color: var(--MI_THEME-error);
}
.fileSelectorButton {
@@ -203,6 +203,6 @@ function save() {
.fileNotSelected {
font-weight: 700;
color: var(--infoWarnFg);
color: var(--MI_THEME-infoWarnFg);
}
</style>

12
packages/frontend/src/pages/settings/theme.vue
View File

@@ -204,7 +204,7 @@ definePageMetadata(() => ({
}
.dn:focus-visible ~ .toggle {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: 2px;
}
@@ -227,12 +227,12 @@ definePageMetadata(() => ({
> .before {
left: -70px;
color: var(--accent);
color: var(--MI_THEME-accent);
}
> .after {
right: -68px;
color: var(--fg);
color: var(--MI_THEME-fg);
}
}
@@ -350,11 +350,11 @@ definePageMetadata(() => ({
background-color: #749DD6;
> .before {
color: var(--fg);
color: var(--MI_THEME-fg);
}
> .after {
color: var(--accent);
color: var(--MI_THEME-accent);
}
.toggle__handler {
@@ -405,7 +405,7 @@ definePageMetadata(() => ({
> .sync {
padding: 14px 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
}

2
packages/frontend/src/pages/settings/webhook.edit.vue
View File

@@ -184,6 +184,6 @@ definePageMetadata(() => ({
.description {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

4
packages/frontend/src/pages/settings/webhook.vue
View File

@@ -17,8 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #icon>
<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"></i>
<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--MI_THEME-success)' }"></i>
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--MI_THEME-error)' }"></i>
</template>
{{ webhook.name || webhook.url }}
<template #suffix>