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

4
packages/frontend/src/pages/admin/RolesEditorFormula.vue
View File

@@ -155,12 +155,12 @@ function removeSelf() {
}
.item {
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
border-radius: var(--radius);
padding: 12px;
&:hover {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
}
</style>

6
packages/frontend/src/pages/admin/_header_.vue
View File

@@ -119,7 +119,7 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
}
const calcBg = () => {
const rawBg = pageMetadata.value?.bg ?? 'var(--bg)';
const rawBg = pageMetadata.value?.bg ?? 'var(--MI_THEME-bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString();
@@ -189,7 +189,7 @@ onUnmounted(() => {
}
&.highlighted {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
@@ -286,7 +286,7 @@ onUnmounted(() => {
position: absolute;
bottom: 0;
height: 3px;
background: var(--accent);
background: var(--MI_THEME-accent);
border-radius: 999px;
transition: all 0.2s ease;
pointer-events: none;

4
packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
View File

@@ -294,8 +294,8 @@ onMounted(async () => {
bottom: 0;
left: 0;
padding: 12px;
border-top: solid 0.5px var(--divider);
background: var(--acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}

4
packages/frontend/src/pages/admin/abuse-report/notification-recipient.item.vue
View File

@@ -87,7 +87,7 @@ function onDeleteButtonClicked() {
}
.rightDivider {
border-right: 0.5px solid var(--divider);
border-right: 0.5px solid var(--MI_THEME-divider);
}
.recipientButtons {
@@ -108,7 +108,7 @@ function onDeleteButtonClicked() {
padding: 8px;
&:hover {
background-color: var(--buttonBg);
background-color: var(--MI_THEME-buttonBg);
}
}
</style>

12
packages/frontend/src/pages/admin/announcements.vue
View File

@@ -24,9 +24,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ announcement.title }}</template>
<template #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>
</template>
<template #caption>{{ announcement.text }}</template>
<template #footer>
@@ -51,9 +51,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkRadios v-model="announcement.icon">
<template #label>{{ i18n.ts.icon }}</template>
<option value="info"><i class="ti ti-info-circle"></i></option>
<option value="warning"><i class="ti ti-alert-triangle" style="color: var(--warn);"></i></option>
<option value="error"><i class="ti ti-circle-x" style="color: var(--error);"></i></option>
<option value="success"><i class="ti ti-check" style="color: var(--success);"></i></option>
<option value="warning"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i></option>
<option value="error"><i class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i></option>
<option value="success"><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i></option>
</MkRadios>
<MkRadios v-model="announcement.display">
<template #label>{{ i18n.ts.display }}</template>

2
packages/frontend/src/pages/admin/index.vue
View File

@@ -331,7 +331,7 @@ defineExpose({
width: 32%;
max-width: 280px;
box-sizing: border-box;
border-right: solid 0.5px var(--divider);
border-right: solid 0.5px var(--MI_THEME-divider);
overflow: auto;
height: 100%;
}

6
packages/frontend/src/pages/admin/modlog.ModLog.vue
View File

@@ -205,14 +205,14 @@ const props = defineProps<{
}
.logYellow {
color: var(--warn);
color: var(--MI_THEME-warn);
}
.logRed {
color: var(--error);
color: var(--MI_THEME-error);
}
.logGreen {
color: var(--success);
color: var(--MI_THEME-success);
}
</style>

2
packages/frontend/src/pages/admin/overview.ap-requests.vue
View File

@@ -278,7 +278,7 @@ onMounted(async () => {
padding: 16px;
&:first-child {
border-bottom: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
}
}

4
packages/frontend/src/pages/admin/overview.federation.vue
View File

@@ -151,8 +151,8 @@ onMounted(async () => {
height: 100%;
aspect-ratio: 1;
margin-right: 12px;
background: var(--accentedBg);
color: var(--accent);
background: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
border-radius: 10px;
}

2
packages/frontend/src/pages/admin/overview.pie.vue
View File

@@ -41,7 +41,7 @@ onMounted(() => {
labels: props.data.map(x => x.name),
datasets: [{
backgroundColor: props.data.map(x => x.color),
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel'),
borderWidth: 2,
hoverOffset: 0,
data: props.data.map(x => x.value),

2
packages/frontend/src/pages/admin/overview.queue.vue
View File

@@ -119,7 +119,7 @@ onUnmounted(() => {
> .chart {
min-width: 0;
padding: 16px;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
> .title {

4
packages/frontend/src/pages/admin/overview.stats.vue
View File

@@ -114,8 +114,8 @@ onMounted(async () => {
height: 100%;
aspect-ratio: 1;
margin-right: 12px;
background: var(--accentedBg);
color: var(--accent);
background: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
border-radius: 10px;
}

2
packages/frontend/src/pages/admin/queue.chart.vue
View File

@@ -135,7 +135,7 @@ onUnmounted(() => {
.chart {
min-width: 0;
padding: 16px;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
}

4
packages/frontend/src/pages/admin/relays.vue
View File

@@ -11,8 +11,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel" style="padding: 16px;">
<div>{{ relay.inbox }}</div>
<div style="margin: 8px 0;">
<i v-if="relay.status === 'accepted'" class="ti ti-check" :class="$style.icon" style="color: var(--success);"></i>
<i v-else-if="relay.status === 'rejected'" class="ti ti-ban" :class="$style.icon" style="color: var(--error);"></i>
<i v-if="relay.status === 'accepted'" class="ti ti-check" :class="$style.icon" style="color: var(--MI_THEME-success);"></i>
<i v-else-if="relay.status === 'rejected'" class="ti ti-ban" :class="$style.icon" style="color: var(--MI_THEME-error);"></i>
<i v-else class="ti ti-clock" :class="$style.icon"></i>
<span>{{ i18n.ts._relayStatus[relay.status] }}</span>
</div>

2
packages/frontend/src/pages/admin/roles.role.vue
View File

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

10
packages/frontend/src/pages/admin/server-rules.vue
View File

@@ -76,7 +76,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.item {
display: block;
color: var(--navFg);
color: var(--MI_THEME-navFg);
}
.itemHeader {
@@ -96,8 +96,8 @@ definePageMetadata(() => ({
.itemNumber {
display: flex;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
font-size: 14px;
font-weight: bold;
width: 28px;
@@ -117,12 +117,12 @@ definePageMetadata(() => ({
.itemRemove {
width: 40px;
height: 40px;
color: var(--error);
color: var(--MI_THEME-error);
margin-left: auto;
border-radius: 6px;
&:hover {
background: var(--X5);
background: var(--MI_THEME-X5);
}
}

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

@@ -400,6 +400,6 @@ definePageMetadata(() => ({
<style lang="scss" module>
.subCaption {
font-size: 0.85em;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

6
packages/frontend/src/pages/admin/system-webhook.item.vue
View File

@@ -13,9 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<i
v-else-if="[200, 201, 204].includes(entity.latestStatus)"
class="ti ti-check"
:style="{ color: 'var(--success)' }"
:style="{ color: 'var(--MI_THEME-success)' }"
/>
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"/>
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--MI_THEME-error)' }"/>
</template>
<template #suffix>
<MkTime v-if="entity.latestSentAt" :time="entity.latestSentAt" style="margin-right: 8px"/>
@@ -75,6 +75,6 @@ function onDeleteClick() {
margin-right: 0.75em;
flex-shrink: 0;
text-align: center;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
</style>