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

10
packages/frontend/src/pages/about-misskey.vue
View File

@@ -529,17 +529,17 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
padding: 12px;
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
border-radius: 6px;
&:hover {
text-decoration: none;
background: var(--buttonHoverBg);
background: var(--MI_THEME-buttonHoverBg);
}
&.active {
color: var(--accent);
background: var(--buttonHoverBg);
color: var(--MI_THEME-accent);
background: var(--MI_THEME-buttonHoverBg);
}
}
@@ -562,7 +562,7 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
padding: 12px;
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
border-radius: 6px;
}

6
packages/frontend/src/pages/about.overview.vue
View File

@@ -147,7 +147,7 @@ const initStats = () => misskeyApi('stats', {});
text-align: center;
border-radius: 10px;
overflow: clip;
background-color: var(--panel);
background-color: var(--MI_THEME-panel);
background-size: cover;
background-position: center center;
}
@@ -189,8 +189,8 @@ const initStats = () => misskeyApi('stats', {});
width: 32px;
height: 32px;
line-height: 32px;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
font-size: 13px;
font-weight: bold;
align-items: center;

20
packages/frontend/src/pages/admin-user.vue
View File

@@ -159,9 +159,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-for="announcement in items" :key="announcement.id" v-panel :class="$style.announcementItem" @click="editAnnouncement(announcement)">
<span style="margin-right: 0.5em;">
<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>{{ announcement.title }}</span>
<span v-if="announcement.reads > 0" style="margin-left: auto; opacity: 0.7;">{{ i18n.ts.messageRead }}</span>
@@ -582,18 +582,18 @@ definePageMetadata(() => ({
}
> .suspended {
color: var(--error);
border-color: var(--error);
color: var(--MI_THEME-error);
border-color: var(--MI_THEME-error);
}
> .silenced {
color: var(--warn);
border-color: var(--warn);
color: var(--MI_THEME-warn);
border-color: var(--MI_THEME-warn);
}
> .moderator {
color: var(--success);
border-color: var(--success);
color: var(--MI_THEME-success);
border-color: var(--MI_THEME-success);
}
}
}
@@ -640,7 +640,7 @@ definePageMetadata(() => ({
.roleItemSub {
padding: 6px 12px;
font-size: 85%;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
.roleUnassign {

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>

6
packages/frontend/src/pages/announcement.vue
View File

@@ -20,9 +20,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
<span style="margin-right: 0.5em;">
<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>
<Mfm :text="announcement.title"/>
</div>

6
packages/frontend/src/pages/announcements.vue
View File

@@ -17,9 +17,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
<span style="margin-right: 0.5em;">
<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>
<MkA :to="`/announcements/${announcement.id}`"><span>{{ announcement.title }}</span></MkA>
</div>

2
packages/frontend/src/pages/antenna-timeline.vue
View File

@@ -115,7 +115,7 @@ definePageMetadata(() => ({
}
.tl {
background: var(--bg);
background: var(--MI_THEME-bg);
border-radius: var(--radius);
overflow: clip;
}

2
packages/frontend/src/pages/channel-editor.vue
View File

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

8
packages/frontend/src/pages/channel.vue
View File

@@ -275,8 +275,8 @@ definePageMetadata(() => ({
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background: var(--acrylicBg);
border-top: solid 0.5px var(--divider);
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.bannerContainer {
@@ -310,7 +310,7 @@ definePageMetadata(() => ({
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
}
.bannerStatus {
@@ -335,7 +335,7 @@ definePageMetadata(() => ({
bottom: 16px;
left: 16px;
background: rgba(0, 0, 0, 0.7);
color: var(--warn);
color: var(--MI_THEME-warn);
border-radius: 6px;
font-weight: bold;
font-size: 1em;

2
packages/frontend/src/pages/clip.vue
View File

@@ -198,7 +198,7 @@ definePageMetadata(() => ({
.user {
--height: 32px;
padding: 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
line-height: var(--height);
}

8
packages/frontend/src/pages/custom-emojis-manager.vue
View File

@@ -331,14 +331,14 @@ definePageMetadata(() => ({
align-items: center;
padding: 11px;
text-align: left;
border: solid 1px var(--panel);
border: solid 1px var(--MI_THEME-panel);
&:hover {
border-color: var(--inputBorderHover);
border-color: var(--MI_THEME-inputBorderHover);
}
&.selected {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
> .img {
@@ -385,7 +385,7 @@ definePageMetadata(() => ({
text-align: left;
&:hover {
color: var(--accent);
color: var(--MI_THEME-accent);
}
> .img {

16
packages/frontend/src/pages/drive.file.info.vue
View File

@@ -231,7 +231,7 @@ onMounted(async () => {
<style lang="scss" module>
.filePreviewRoot {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
// MkMediaList 内の上部マージン 4px
padding: calc(1rem - 4px) 1rem 1rem;
@@ -262,8 +262,8 @@ onMounted(async () => {
&:hover,
&:focus-visible {
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
text-decoration: none;
outline: none;
}
@@ -299,12 +299,12 @@ onMounted(async () => {
}
&:hover {
background-color: var(--accentedBg);
background-color: var(--MI_THEME-accentedBg);
>.fileName,
>.fileNameEditIcon {
visibility: visible;
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
}
@@ -332,11 +332,11 @@ onMounted(async () => {
}
&:hover {
color: var(--accent);
background-color: var(--accentedBg);
color: var(--MI_THEME-accent);
background-color: var(--MI_THEME-accentedBg);
.kvEditIcon {
color: var(--accent);
color: var(--MI_THEME-accent);
visibility: visible;
}
}

2
packages/frontend/src/pages/drop-and-fusion.game.vue
View File

@@ -111,7 +111,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="replaying" class="_woodenFrame">
<div class="_woodenFrameInner">
<div style="background: #0004;">
<div style="height: 10px; background: var(--accent); will-change: width;" :style="{ width: `${(currentFrame / endedAtFrame) * 100}%` }"></div>
<div style="height: 10px; background: var(--MI_THEME-accent); will-change: width;" :style="{ width: `${(currentFrame / endedAtFrame) * 100}%` }"></div>
</div>
</div>
<div class="_woodenFrameInner">

4
packages/frontend/src/pages/emoji-edit-dialog.vue
View File

@@ -243,8 +243,8 @@ async function del() {
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/emojis.emoji.vue
View File

@@ -58,11 +58,11 @@ function menu(ev) {
align-items: center;
padding: 12px;
text-align: left;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 8px;
&:hover {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
}

2
packages/frontend/src/pages/favorites.vue
View File

@@ -46,7 +46,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.note {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
}
</style>

4
packages/frontend/src/pages/flash/flash-edit.vue
View File

@@ -468,7 +468,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
backdrop-filter: var(--blur, blur(15px));
background: var(--acrylicBg);
border-top: solid .5px var(--divider);
background: var(--MI_THEME-acrylicBg);
border-top: solid .5px var(--MI_THEME-divider);
}
</style>

4
packages/frontend/src/pages/flash/flash.vue
View File

@@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div><i class="ti ti-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="flash.createdAt" mode="detail"/></div>
</div>
</div>
<MkA v-if="$i && $i.id === flash.userId" :to="`/play/${flash.id}/edit`" style="color: var(--accent);">{{ i18n.ts._play.editThisPage }}</MkA>
<MkA v-if="$i && $i.id === flash.userId" :to="`/play/${flash.id}/edit`" style="color: var(--MI_THEME-accent);">{{ i18n.ts._play.editThisPage }}</MkA>
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
</div>
<MkError v-else-if="error" @retry="fetchFlash()"/>
@@ -367,7 +367,7 @@ definePageMetadata(() => ({
justify-content: center;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--divider);
border-bottom: 1px solid var(--MI_THEME-divider);
&:last-child {
border-bottom: none;

4
packages/frontend/src/pages/gallery/edit.vue
View File

@@ -141,7 +141,7 @@ definePageMetadata(() => ({
top: 8px;
left: 9px;
padding: 8px;
background: var(--panel);
background: var(--MI_THEME-panel);
}
> .remove {
@@ -149,7 +149,7 @@ definePageMetadata(() => ({
top: 8px;
right: 9px;
padding: 8px;
background: var(--panel);
background: var(--MI_THEME-panel);
}
}
</style>

14
packages/frontend/src/pages/gallery/post.vue
View File

@@ -262,14 +262,14 @@ definePageMetadata(() => ({
align-items: center;
margin-top: 16px;
padding: 16px 0 0 0;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
> .like {
> .button {
--accent: rgb(241 97 132);
--X8: rgb(241 92 128);
--buttonBg: rgb(216 71 106 / 5%);
--buttonHoverBg: rgb(216 71 106 / 10%);
--MI_THEME-accent: rgb(241 97 132);
--MI_THEME-X8: rgb(241 92 128);
--MI_THEME-buttonBg: rgb(216 71 106 / 5%);
--MI_THEME-buttonHoverBg: rgb(216 71 106 / 10%);
color: #ff002f;
::v-deep(.count) {
@@ -286,7 +286,7 @@ definePageMetadata(() => ({
margin: 0 8px;
&:hover {
color: var(--fgHighlighted);
color: var(--MI_THEME-fgHighlighted);
}
}
}
@@ -295,7 +295,7 @@ definePageMetadata(() => ({
> .user {
margin-top: 16px;
padding: 16px 0 0 0;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
display: flex;
align-items: center;
flex-wrap: wrap;

2
packages/frontend/src/pages/games.vue
View File

@@ -35,7 +35,7 @@ definePageMetadata(() => ({
<style module>
.link:focus-within {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: -2px;
}
</style>

8
packages/frontend/src/pages/install-extensions.vue
View File

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
<template #value>
<!-- この画面が出ている時点でハッシュの検証には成功している -->
<i class="ti ti-check" style="color: var(--accent)"></i>
<i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i>
</template>
</MkKeyValue>
</div>
@@ -251,7 +251,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.extInstallerRoot {
border-radius: var(--radius);
background: var(--panel);
background: var(--MI_THEME-panel);
padding: 1.5rem;
}
@@ -265,8 +265,8 @@ definePageMetadata(() => ({
margin-left: auto;
margin-right: auto;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
}
.error .extInstallerIconWrapper {

4
packages/frontend/src/pages/my-antennas/index.vue
View File

@@ -73,11 +73,11 @@ onActivated(() => {
.antenna {
display: block;
padding: 16px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: 6px;
&:hover {
border: solid 1px var(--accent);
border: solid 1px var(--MI_THEME-accent);
text-decoration: none;
}
}

4
packages/frontend/src/pages/my-lists/index.vue
View File

@@ -85,12 +85,12 @@ onActivated(() => {
.list {
display: block;
padding: 16px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: 6px;
margin-bottom: 8px;
&:hover {
border: solid 1px var(--accent);
border: solid 1px var(--MI_THEME-accent);
text-decoration: none;
}
}

4
packages/frontend/src/pages/my-lists/list.vue
View File

@@ -134,7 +134,7 @@ async function removeUser(item, ev) {
async function showMembershipMenu(item, ev) {
const withRepliesRef = ref(item.withReplies);
os.popupMenu([{
type: 'switch',
text: i18n.ts.showRepliesToOthersInTimeline,
@@ -236,6 +236,6 @@ definePageMetadata(() => ({
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>

2
packages/frontend/src/pages/note.vue
View File

@@ -183,6 +183,6 @@ definePageMetadata(() => ({
.note {
border-radius: var(--radius);
background: var(--panel);
background: var(--MI_THEME-panel);
}
</style>

2
packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
View File

@@ -63,7 +63,7 @@ onUnmounted(() => {
box-shadow: none;
padding: 16px;
background: transparent;
color: var(--fg);
color: var(--MI_THEME-fg);
font-size: 14px;
box-sizing: border-box;
}

6
packages/frontend/src/pages/page-editor/page-editor.container.vue
View File

@@ -60,12 +60,12 @@ function remove() {
.cpjygsrt {
position: relative;
overflow: hidden;
background: var(--panel);
border: solid 2px var(--X12);
background: var(--MI_THEME-panel);
border: solid 2px var(--MI_THEME-X12);
border-radius: 8px;
&:hover {
border: solid 2px var(--X13);
border: solid 2px var(--MI_THEME-X13);
}
&.warn {

18
packages/frontend/src/pages/page.vue
View File

@@ -357,8 +357,8 @@ definePageMetadata(() => ({
&:hover,
&:focus-visible {
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
text-decoration: none;
outline: none;
}
@@ -367,7 +367,7 @@ definePageMetadata(() => ({
.pageMain {
border-radius: var(--radius);
padding: 2rem;
background: var(--panel);
background: var(--MI_THEME-panel);
box-sizing: border-box;
}
@@ -399,7 +399,7 @@ definePageMetadata(() => ({
}
.pageBannerBgFallback2 {
background-color: var(--accentedBg);
background-color: var(--MI_THEME-accentedBg);
}
&::after {
@@ -409,7 +409,7 @@ definePageMetadata(() => ({
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(0deg, var(--panel), transparent);
background: linear-gradient(0deg, var(--MI_THEME-panel), transparent);
}
}
@@ -433,7 +433,7 @@ definePageMetadata(() => ({
h1 {
font-size: 2rem;
font-weight: 700;
color: var(--fg);
color: var(--MI_THEME-fg);
margin: 0;
}
@@ -472,7 +472,7 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
border-top: 1px solid var(--divider);
border-top: 1px solid var(--MI_THEME-divider);
padding-top: 1.5rem;
margin-bottom: 1.5rem;
@@ -487,7 +487,7 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
border-top: 1px solid var(--divider);
border-top: 1px solid var(--MI_THEME-divider);
padding-top: 1.5rem;
margin-bottom: 1.5rem;
@@ -534,6 +534,6 @@ definePageMetadata(() => ({
}
.relatedPagesItem > article {
background-color: var(--panelHighlight) !important;
background-color: var(--MI_THEME-panelHighlight) !important;
}
</style>

16
packages/frontend/src/pages/reversi/game.board.vue
View File

@@ -504,7 +504,7 @@ $gap: 4px;
.boardInner {
padding: 32px;
background: var(--panel);
background: var(--MI_THEME-panel);
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
border-radius: 8px;
}
@@ -574,34 +574,34 @@ $gap: 4px;
transition: border 0.25s ease, opacity 0.25s ease;
&.boardCell_empty {
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
}
&.boardCell_empty.boardCell_can {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
opacity: 0.5;
}
&.boardCell_empty.boardCell_myTurn {
border-color: var(--divider);
border-color: var(--MI_THEME-divider);
opacity: 1;
&.boardCell_can {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
cursor: pointer;
&:hover {
background: var(--accent);
background: var(--MI_THEME-accent);
}
}
}
&.boardCell_prev {
box-shadow: 0 0 0 4px var(--accent);
box-shadow: 0 0 0 4px var(--MI_THEME-accent);
}
&.boardCell_isEnded {
border-color: var(--divider);
border-color: var(--MI_THEME-divider);
}
&.boardCell_none {

12
packages/frontend/src/pages/reversi/game.setting.vue
View File

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else>
<div class="_panel">
<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);">
<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--MI_THEME-divider);">
<div>{{ mapName }}</div>
<MkButton style="margin-left: auto;" @click="chooseMap">{{ i18n.ts._reversi.chooseBoard }}</MkButton>
</div>
@@ -87,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div style="text-align: center;" class="_gaps_s">
<div v-if="opponentHasSettingsChanged" style="color: var(--warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
<div v-if="opponentHasSettingsChanged" style="color: var(--MI_THEME-warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
<div>
<template v-if="isReady && isOpReady">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
<template v-if="isReady && !isOpReady">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
@@ -273,14 +273,14 @@ onUnmounted(() => {
width: 300px;
height: 300px;
margin: 0 auto;
color: var(--fg);
color: var(--MI_THEME-fg);
}
.boardCell {
display: grid;
place-items: center;
background: transparent;
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
border-radius: 6px;
overflow: clip;
cursor: pointer;
@@ -292,7 +292,7 @@ onUnmounted(() => {
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background: var(--acrylicBg);
border-top: solid 0.5px var(--divider);
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>

18
packages/frontend/src/pages/reversi/index.vue
View File

@@ -36,13 +36,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isStarted && !g.isEnded && $style.gamePreviewWaiting, g.isStarted && !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers">
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div>
<div :class="$style.gamePreviewFooter">
<span v-if="g.isStarted && !g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
@@ -63,13 +63,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isStarted && !g.isEnded && $style.gamePreviewWaiting, g.isStarted && !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers">
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div>
<div :class="$style.gamePreviewFooter">
<span v-if="g.isStarted && !g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
@@ -295,11 +295,11 @@ definePageMetadata(() => ({
}
.gamePreviewActive {
box-shadow: inset 0 0 8px 0px var(--accent);
box-shadow: inset 0 0 8px 0px var(--MI_THEME-accent);
}
.gamePreviewWaiting {
box-shadow: inset 0 0 8px 0px var(--warn);
box-shadow: inset 0 0 8px 0px var(--MI_THEME-warn);
}
.gamePreviewPlayers {
@@ -324,19 +324,19 @@ definePageMetadata(() => ({
.gamePreviewFooter {
display: flex;
align-items: baseline;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
padding: 6px 10px;
font-size: 0.9em;
}
.gamePreviewStatusActive {
color: var(--accent);
color: var(--MI_THEME-accent);
font-weight: bold;
animation: blink 2s infinite;
}
.gamePreviewStatusWaiting {
color: var(--warn);
color: var(--MI_THEME-warn);
font-weight: bold;
animation: blink 2s infinite;
}

4
packages/frontend/src/pages/scratchpad.vue
View File

@@ -242,14 +242,14 @@ definePageMetadata(() => ({
}
.uiInspectorUnShown {
color: var(--fgTransparent);
color: var(--MI_THEME-fgTransparent);
}
.uiInspectorType {
display: inline-block;
border: hidden;
border-radius: 10px;
background-color: var(--panelHighlight);
background-color: var(--MI_THEME-panelHighlight);
padding: 2px 8px;
font-size: 12px;
}

4
packages/frontend/src/pages/search.note.vue
View File

@@ -211,12 +211,12 @@ async function search() {
justify-content: center;
}
.addMeButton {
border: 2px dashed var(--fgTransparent);
border: 2px dashed var(--MI_THEME-fgTransparent);
padding: 12px;
margin-right: 16px;
}
.addUserButton {
border: 2px dashed var(--fgTransparent);
border: 2px dashed var(--MI_THEME-fgTransparent);
padding: 12px;
flex-grow: 1;
}

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>

4
packages/frontend/src/pages/signup-complete.vue
View File

@@ -81,7 +81,7 @@ place-content: center;
padding: 16px;
text-align: center;
font-size: 26px;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
}
</style>

4
packages/frontend/src/pages/tag.vue
View File

@@ -78,8 +78,8 @@ definePageMetadata(() => ({
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background: var(--acrylicBg);
border-top: solid 0.5px var(--divider);
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
display: flex;
}

2
packages/frontend/src/pages/theme-editor.vue
View File

@@ -268,7 +268,7 @@ definePageMetadata(() => ({
}
&.active {
box-shadow: 0 0 0 2px var(--divider) inset;
box-shadow: 0 0 0 2px var(--MI_THEME-divider) inset;
}
&.rounded {

2
packages/frontend/src/pages/timeline.vue
View File

@@ -367,7 +367,7 @@ definePageMetadata(() => ({
}
.tl {
background: var(--bg);
background: var(--MI_THEME-bg);
border-radius: var(--radius);
overflow: clip;
}

2
packages/frontend/src/pages/user-list-timeline.vue
View File

@@ -97,7 +97,7 @@ definePageMetadata(() => ({
}
.tl {
background: var(--bg);
background: var(--MI_THEME-bg);
border-radius: var(--radius);
overflow: clip;
}

2
packages/frontend/src/pages/user/clips.vue
View File

@@ -43,6 +43,6 @@ const pagination = {
.description {
margin-top: 8px;
padding-top: 8px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>

28
packages/frontend/src/pages/user/home.vue
View File

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkUserName class="name" :user="user" :nowrap="true"/>
<div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true"/></span>
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--MI_THEME-badge);"><i class="ti ti-shield"></i></span>
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
<button v-if="$i && !isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkUserName :user="user" :nowrap="false" class="name"/>
<div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true"/></span>
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--MI_THEME-badge);"><i class="ti ti-shield"></i></span>
<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
</div>
@@ -447,7 +447,7 @@ onUnmounted(() => {
text-align: center;
padding: 50px 8px 16px 8px;
font-weight: bold;
border-bottom: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
> .bottom {
> * {
@@ -474,7 +474,7 @@ onUnmounted(() => {
> .fukidashi {
display: block;
--fukidashi-bg: color-mix(in srgb, var(--accent), var(--panel) 85%);
--fukidashi-bg: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-panel) 85%);
--fukidashi-radius: 16px;
font-size: 0.9em;
@@ -493,7 +493,7 @@ onUnmounted(() => {
gap: 8px;
> .role {
border: solid 1px var(--color, var(--divider));
border: solid 1px var(--color, var(--MI_THEME-divider));
border-radius: 999px;
margin-right: 4px;
padding: 3px 8px;
@@ -507,15 +507,15 @@ onUnmounted(() => {
> .memo {
margin: 12px 24px 0 154px;
background: transparent;
color: var(--fg);
border: 1px solid var(--divider);
color: var(--MI_THEME-fg);
border: 1px solid var(--MI_THEME-divider);
border-radius: 8px;
padding: 8px;
line-height: 0;
> .heading {
text-align: left;
color: var(--fgTransparent);
color: var(--MI_THEME-fgTransparent);
line-height: 1.5;
font-size: 85%;
}
@@ -530,7 +530,7 @@ onUnmounted(() => {
height: auto;
min-height: 0;
line-height: 1.5;
color: var(--fg);
color: var(--MI_THEME-fg);
overflow: hidden;
background: transparent;
font-family: inherit;
@@ -550,7 +550,7 @@ onUnmounted(() => {
> .fields {
padding: 24px;
font-size: 0.9em;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
> .field {
display: flex;
@@ -587,14 +587,14 @@ onUnmounted(() => {
> .status {
display: flex;
padding: 24px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
> a {
flex: 1;
text-align: center;
&.active {
color: var(--accent);
color: var(--MI_THEME-accent);
}
&:hover {
@@ -710,13 +710,13 @@ onUnmounted(() => {
<style lang="scss" module>
.tl {
background: var(--bg);
background: var(--MI_THEME-bg);
border-radius: var(--radius);
overflow: clip;
}
.verifiedLink {
margin-left: 4px;
color: var(--success);
color: var(--MI_THEME-success);
}
</style>

4
packages/frontend/src/pages/user/index.timeline.vue
View File

@@ -52,11 +52,11 @@ const pagination = computed(() => tab.value === 'featured' ? {
<style lang="scss" module>
.tab {
padding: calc(var(--margin) / 2) 0;
background: var(--bg);
background: var(--MI_THEME-bg);
}
.tl {
background: var(--bg);
background: var(--MI_THEME-bg);
border-radius: var(--radius);
overflow: clip;
}

4
packages/frontend/src/pages/user/lists.vue
View File

@@ -44,12 +44,12 @@ const pagination = {
.list {
display: block;
padding: 16px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: 6px;
margin-bottom: 8px;
&:hover {
border: solid 1px var(--accent);
border: solid 1px var(--MI_THEME-accent);
text-decoration: none;
}
}

12
packages/frontend/src/pages/user/raw.vue
View File

@@ -113,18 +113,18 @@ const suspended = computed(() => props.user.isSuspended ?? false);
}
> .suspended {
color: var(--error);
border-color: var(--error);
color: var(--MI_THEME-error);
border-color: var(--MI_THEME-error);
}
> .silenced {
color: var(--warn);
border-color: var(--warn);
color: var(--MI_THEME-warn);
border-color: var(--MI_THEME-warn);
}
> .moderator {
color: var(--success);
border-color: var(--success);
color: var(--MI_THEME-success);
border-color: var(--MI_THEME-success);
}
}
</style>

2
packages/frontend/src/pages/user/reactions.vue
View File

@@ -44,7 +44,7 @@ const pagination = {
align-items: center;
padding: 8px 16px;
margin-bottom: 8px;
border-bottom: solid 2px var(--divider);
border-bottom: solid 2px var(--MI_THEME-divider);
}
.avatar {

8
packages/frontend/src/pages/welcome.entrance.a.vue
View File

@@ -98,7 +98,7 @@ misskeyApiGet('federation/instances', {
left: 0;
width: 100vw;
height: 100vh;
background: var(--accent);
background: var(--MI_THEME-accent);
clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
}
> .shape2 {
@@ -107,7 +107,7 @@ misskeyApiGet('federation/instances', {
left: 0;
width: 100vw;
height: 100vh;
background: var(--accent);
background: var(--MI_THEME-accent);
clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
opacity: 0.5;
}
@@ -164,7 +164,7 @@ misskeyApiGet('federation/instances', {
left: 0;
right: 0;
margin: auto;
background: var(--acrylicPanel);
background: var(--MI_THEME-acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-radius: 999px;
@@ -186,7 +186,7 @@ misskeyApiGet('federation/instances', {
vertical-align: bottom;
padding: 6px 12px 6px 6px;
margin: 0 10px 0 0;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 999px;
> :global(.icon) {

4
packages/frontend/src/pages/welcome.setup.vue
View File

@@ -110,8 +110,8 @@ function submit() {
font-size: 1.5em;
text-align: center;
padding: 32px;
background: var(--accentedBg);
color: var(--accent);
background: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
font-weight: bold;
}

4
packages/frontend/src/pages/welcome.timeline.note.vue
View File

@@ -84,7 +84,7 @@ onUpdated(() => {
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
}
}
@@ -100,7 +100,7 @@ onUpdated(() => {
margin: 8px -16px -8px;
padding: 8px 16px 0;
width: calc(100% + 32px);
border-top: 1px solid var(--divider);
border-top: 1px solid var(--MI_THEME-divider);
}
.richcontent {