{{ i18n.ts.moderationNote }}
+ {{ i18n.ts.moderationNoteDescription }}
{{ i18n.ts.addModerationNote }}
@@ -218,6 +219,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { useRouter } from '@/router/supplier.js';
import { getStaticImageUrl, getProxiedImageUrl } from '@/scripts/media-proxy.js';
+import MkSparkle from '@/components/MkSparkle.vue';
import { miLocalStorage } from '@/local-storage.js';
import { editNickname } from '@/scripts/edit-nickname.js';
import { vibrate } from '@/scripts/vibrate.js';
@@ -482,8 +484,8 @@ onUnmounted(() => {
position: absolute;
top: 12px;
right: 12px;
- -webkit-backdrop-filter: var(--blur, blur(8px));
- backdrop-filter: var(--blur, blur(8px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(8px));
+ backdrop-filter: var(--MI-blur, blur(8px));
background: rgba(0, 0, 0, 0.2);
padding: 8px;
border-radius: 24px;
@@ -538,8 +540,8 @@ onUnmounted(() => {
> .add-note-button {
background: rgba(0, 0, 0, 0.2);
color: #fff;
- -webkit-backdrop-filter: var(--blur, blur(8px));
- backdrop-filter: var(--blur, blur(8px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(8px));
+ backdrop-filter: var(--MI-blur, blur(8px));
border-radius: 24px;
padding: 4px 8px;
font-size: 80%;
@@ -553,7 +555,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 {
> * {
@@ -580,7 +582,7 @@ onUnmounted(() => {
> .fukidashi {
display: block;
- --fukidashi-bg: color-mix(in srgb, var(--love), 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;
@@ -599,7 +601,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;
@@ -613,15 +615,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%;
}
@@ -636,7 +638,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;
@@ -658,8 +660,8 @@ onUnmounted(() => {
}
> .translation {
- border: solid 0.5px var(--divider);
- border-radius: var(--radius);
+ border: solid 0.5px var(--MI_THEME-divider);
+ border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@@ -669,7 +671,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;
@@ -706,14 +708,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 {
@@ -750,7 +752,7 @@ onUnmounted(() => {
> .contents {
> .content {
- margin-bottom: var(--margin);
+ margin-bottom: var(--MI-margin);
}
}
}
@@ -767,7 +769,7 @@ onUnmounted(() => {
> .sub {
max-width: 350px;
min-width: 350px;
- margin-left: var(--margin);
+ margin-left: var(--MI-margin);
}
}
}
@@ -855,9 +857,48 @@ onUnmounted(() => {
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 00a35aedee..3ca38618c2 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
-
-
+
+
diff --git a/packages/frontend/src/pages/user/lists.vue b/packages/frontend/src/pages/user/lists.vue
index 59f944d304..d1092a1790 100644
--- a/packages/frontend/src/pages/user/lists.vue
+++ b/packages/frontend/src/pages/user/lists.vue
@@ -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;
}
}
diff --git a/packages/frontend/src/pages/user/raw.vue b/packages/frontend/src/pages/user/raw.vue
index 9e90cabe5e..9a3909c2ab 100644
--- a/packages/frontend/src/pages/user/raw.vue
+++ b/packages/frontend/src/pages/user/raw.vue
@@ -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);
}
}
diff --git a/packages/frontend/src/pages/user/reactions.vue b/packages/frontend/src/pages/user/reactions.vue
index 3828fe5236..50b0142429 100644
--- a/packages/frontend/src/pages/user/reactions.vue
+++ b/packages/frontend/src/pages/user/reactions.vue
@@ -42,7 +42,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 {
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index 10b9e8cb73..5f69998f82 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -79,7 +79,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 {
@@ -88,7 +88,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;
}
@@ -145,9 +145,9 @@ misskeyApiGet('federation/instances', {
left: 0;
right: 0;
margin: auto;
- background: var(--acrylicPanel);
- -webkit-backdrop-filter: var(--blur, blur(15px));
- backdrop-filter: var(--blur, blur(15px));
+ background: var(--MI_THEME-acrylicPanel);
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 999px;
overflow: clip;
width: 800px;
@@ -167,7 +167,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) {
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 896b61a3fb..0181abcf3d 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -14,6 +14,10 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.intro }}
+
+ {{ i18n.ts.initialPasswordForSetup }}
+
+
{{ i18n.ts.username }}
@
@@ -47,6 +51,7 @@ import MkAnimBg from '@/components/MkAnimBg.vue';
const username = ref('');
const password = ref('');
+const setupPassword = ref('');
const submitting = ref(false);
function submit() {
@@ -56,14 +61,27 @@ function submit() {
misskeyApi('admin/accounts/create', {
username: username.value,
password: password.value,
+ setupPassword: setupPassword.value === '' ? null : setupPassword.value,
}).then(res => {
return login(res.token);
- }).catch(() => {
+ }).catch((err) => {
submitting.value = false;
+ let title = i18n.ts.somethingHappened;
+ let text = err.message + '\n' + err.id;
+
+ if (err.code === 'ACCESS_DENIED') {
+ title = i18n.ts.permissionDeniedError;
+ text = i18n.ts.operationForbidden;
+ } else if (err.code === 'INCORRECT_INITIAL_PASSWORD') {
+ title = i18n.ts.permissionDeniedError;
+ text = i18n.ts.incorrectPassword;
+ }
+
os.alert({
type: 'error',
- text: i18n.ts.somethingHappened,
+ title,
+ text,
});
});
}
@@ -74,14 +92,14 @@ function submit() {
min-height: 100svh;
padding: 32px 32px 64px 32px;
box-sizing: border-box;
-display: grid;
-place-content: center;
+ display: grid;
+ place-content: center;
}
.form {
position: relative;
z-index: 10;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
overflow: clip;
max-width: 500px;
@@ -92,8 +110,8 @@ place-content: center;
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;
}
diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue
index c4f0df2d83..2fb48cf62f 100644
--- a/packages/frontend/src/pages/welcome.timeline.note.vue
+++ b/packages/frontend/src/pages/welcome.timeline.note.vue
@@ -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 {
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index 805010e582..cad638fc37 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -60,7 +60,7 @@ onUpdated(() => {
transform: translate3d(0, 0, 0);
}
100% {
- transform: translate3d(0, calc(calc(-100% - 128px) - var(--margin)), 0);
+ transform: translate3d(0, calc(calc(-100% - 128px) - var(--MI-margin)), 0);
}
}
@@ -69,7 +69,7 @@ onUpdated(() => {
transform: translate3d(0, -128px, 0);
}
100% {
- transform: translate3d(0, calc(calc(-100% - 128px) - var(--margin)), 0);
+ transform: translate3d(0, calc(calc(-100% - 128px) - var(--MI-margin)), 0);
}
}
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
index 157b255790..2d4de5d3cb 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -305,13 +305,10 @@ export function getNoteMenu(props: {
function togglePin(pin: boolean): void {
os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
noteId: appearNote.id,
- }, undefined, null, res => {
- if (res.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
- os.alert({
- type: 'error',
- text: i18n.ts.pinLimitExceeded,
- });
- }
+ }, undefined, {
+ '72dab508-c64d-498f-8740-a8eec1ba385a': {
+ text: i18n.ts.pinLimitExceeded,
+ },
});
}
@@ -525,18 +522,20 @@ export function getNoteMenu(props: {
action: showViewTextSource,
});
- if (props.noNyaize.value) {
- noteChildMenu.push({
- icon: 'ti ti-paw-filled',
- text: i18n.ts.revertNoNyaization,
- action: revertNoNyaizeText,
- });
- } else {
- noteChildMenu.push({
- icon: 'ti ti-paw-off',
- text: i18n.ts.noNyaization,
- action: noNyaizeText,
- });
+ if (!defaultStore.state.disableNyaize) {
+ if (props.noNyaize.value) {
+ noteChildMenu.push({
+ icon: 'ti ti-paw-filled',
+ text: i18n.ts.revertNoNyaization,
+ action: revertNoNyaizeText,
+ });
+ } else {
+ noteChildMenu.push({
+ icon: 'ti ti-paw-off',
+ text: i18n.ts.noNyaization,
+ action: noNyaizeText,
+ });
+ }
}
if (appearNote.userId === $i.id) {
diff --git a/packages/frontend/src/scripts/init-chart.ts b/packages/frontend/src/scripts/init-chart.ts
index 2465a14703..41e1636aa7 100644
--- a/packages/frontend/src/scripts/init-chart.ts
+++ b/packages/frontend/src/scripts/init-chart.ts
@@ -50,7 +50,7 @@ export function initChart() {
);
// フォントカラー
- Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+ Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-fg');
Chart.defaults.borderColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
diff --git a/packages/frontend/src/scripts/theme.ts b/packages/frontend/src/scripts/theme.ts
index 1f7ab5b9a7..bd2b5c0f4d 100644
--- a/packages/frontend/src/scripts/theme.ts
+++ b/packages/frontend/src/scripts/theme.ts
@@ -110,7 +110,7 @@ export function applyTheme(theme: Theme, persist = true) {
}
for (const [k, v] of Object.entries(props)) {
- document.documentElement.style.setProperty(`--${k}`, v.toString());
+ document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
}
document.documentElement.style.setProperty('color-scheme', colorScheme);
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 147fddfc65..f2b3d35c94 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -81,6 +81,10 @@ export const defaultStore = markRaw(new Storage('base', {
media: false,
},
},
+ abusesTutorial: {
+ where: 'account',
+ default: false,
+ },
keepCw: {
where: 'account',
default: true,
@@ -248,7 +252,7 @@ export const defaultStore = markRaw(new Storage('base', {
},
animatedMfm: {
where: 'device',
- default: true,
+ default: !window.matchMedia('(prefers-reduced-motion)').matches,
},
advancedMfm: {
where: 'device',
@@ -498,6 +502,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: 'app' as 'app' | 'appWithShift' | 'native',
},
+ skipNoteRender: {
+ where: 'device',
+ default: true,
+ },
showUnreadNotificationsCount: {
where: 'deviceAccount',
default: false,
@@ -578,6 +586,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: true,
},
+ disableNyaize: {
+ where: 'device',
+ default: false,
+ },
// - Settings/Appearance
collapseReplies: {
@@ -654,7 +666,7 @@ export const defaultStore = markRaw(new Storage('base', {
},
showNoAltTextWarning: {
where: 'device',
- default: true,
+ default: false,
},
alwaysShowCw: {
where: 'device',
@@ -692,6 +704,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: true,
},
+ selectReaction: {
+ where: 'device',
+ default: '❤️' as string,
+ },
// - Settings/Navigation bar
showMenuButtonInNavbar: {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 613515af72..3dceb5e136 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -16,38 +16,36 @@ $monospace-font: "Pretendard JP", Pretendard, "JetBrains Mono", "Fira code", "Fi
$code-monospace-font: "JetBrains Mono", "Pretendard JP", Pretendard, Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
:root {
- --radius: 12px;
- --marginFull: 16px;
- --marginHalf: 10px;
+ --MI-radius: 12px;
+ --MI-marginFull: 16px;
+ --MI-marginHalf: 10px;
- --margin: var(--marginFull);
+ --MI-margin: var(--MI-marginFull);
// switch dynamically
- --minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
- --minBottomSpacing: var(--minBottomSpacingMobile);
+ --MI-minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
+ --MI-minBottomSpacing: var(--MI-minBottomSpacingMobile);
- //--ad: rgb(255 169 0 / 10%);
-
- --cherry: rgb(255, 188, 220);
- --pick: rgb(177, 211, 255);
- --misskey: rgb(134, 179, 0);
- --cast: rgb(181, 151, 246);
- --ella: rgb(150, 198, 234);
+ --CP-cherry: rgb(255, 188, 220);
+ --CP-pick: rgb(177, 211, 255);
+ --CP-misskey: rgb(134, 179, 0);
+ --CP-cast: rgb(181, 151, 246);
+ --CP-ella: rgb(150, 198, 234);
@media (max-width: 500px) {
- --margin: var(--marginHalf);
+ --MI-margin: var(--MI-marginHalf);
}
}
::selection {
- color: var(--fgOnAccent);
- background-color: var(--accent);
+ color: var(--MI_THEME-fgOnAccent);
+ background-color: var(--MI_THEME-accent);
}
html {
- background-color: var(--bg);
- color: var(--fg);
- accent-color: var(--accent);
+ background-color: var(--MI_THEME-bg);
+ color: var(--MI_THEME-fg);
+ accent-color: var(--MI_THEME-accent);
overflow: auto;
overflow-wrap: break-word;
font-family: $default-font;
@@ -60,7 +58,7 @@ html {
-webkit-text-size-adjust: 100%;
&, * {
- scrollbar-color: var(--scrollbarHandle) transparent;
+ scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
scrollbar-width: thin;
&::-webkit-scrollbar {
@@ -73,14 +71,14 @@ html {
}
&::-webkit-scrollbar-thumb {
- background: var(--scrollbarHandle);
+ background: var(--MI_THEME-scrollbarHandle);
&:hover {
- background: var(--scrollbarHandleHover);
+ background: var(--MI_THEME-scrollbarHandleHover);
}
&:active {
- background: var(--accent);
+ background: var(--MI_THEME-accent);
}
}
}
@@ -210,15 +208,15 @@ textarea, input {
}
optgroup, option {
- background: var(--panel);
- color: var(--fg);
+ background: var(--MI_THEME-panel);
+ color: var(--MI_THEME-fg);
}
hr {
- margin: var(--margin) 0 var(--margin) 0;
+ margin: var(--MI-margin) 0 var(--MI-margin) 0;
border: none;
height: 1px;
- background: var(--divider);
+ background: var(--MI_THEME-divider);
}
rt {
@@ -226,7 +224,7 @@ rt {
}
:focus-visible {
- outline: var(--focus) solid 2px;
+ outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
&:hover {
@@ -259,9 +257,9 @@ rt {
._indicateCounter {
display: inline-flex;
- color: var(--fgOnAccent);
+ color: var(--MI_THEME-fgOnAccent);
font-weight: 700;
- background: var(--indicator);
+ background: var(--MI_THEME-indicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
@@ -294,13 +292,13 @@ rt {
left: 0;
width: 100%;
height: 100%;
- background: var(--modalBg);
- -webkit-backdrop-filter: var(--modalBgFilter);
- backdrop-filter: var(--modalBgFilter);
+ background: var(--MI_THEME-modalBg);
+ -webkit-backdrop-filter: var(--MI-modalBgFilter);
+ backdrop-filter: var(--MI-modalBgFilter);
}
._shadow {
- box-shadow: 0px 4px 32px var(--shadow) !important;
+ box-shadow: 0px 4px 32px var(--MI_THEME-shadow) !important;
}
._button {
@@ -329,40 +327,40 @@ rt {
._buttonPrimary {
@extend ._button;
- color: var(--fgOnAccent);
- background: var(--accent);
+ color: var(--MI_THEME-fgOnAccent);
+ background: var(--MI_THEME-accent);
&:not(:disabled):hover {
- background: hsl(from var(--accent) h s calc(l + 5));
+ background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
}
&:not(:disabled):active {
- background: hsl(from var(--accent) h s calc(l - 5));
+ background: hsl(from var(--MI_THEME-accent) h s calc(l - 5));
}
}
._buttonGradate {
@extend ._buttonPrimary;
- color: var(--fgOnAccent);
- background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+ color: var(--MI_THEME-fgOnAccent);
+ background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
&:not(:disabled):hover {
- background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
+ background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
}
&:not(:disabled):active {
- background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
+ background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
}
}
._help {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
cursor: help;
}
._textButton {
@extend ._button;
- color: var(--accent);
+ color: var(--MI_THEME-accent);
&:focus-visible {
outline-offset: 2px;
@@ -374,13 +372,13 @@ rt {
}
._panel {
- background: var(--panel);
- border-radius: var(--radius);
+ background: var(--MI_THEME-panel);
+ border-radius: var(--MI-radius);
overflow: clip;
}
._margin {
- margin: var(--margin) 0;
+ margin: var(--MI-margin) 0;
}
._gaps_m {
@@ -398,7 +396,7 @@ rt {
._gaps {
display: flex;
flex-direction: column;
- gap: var(--margin);
+ gap: var(--MI-margin);
}
._buttons {
@@ -420,32 +418,32 @@ rt {
padding: 10px;
box-sizing: border-box;
text-align: center;
- border: solid 0.5px var(--divider);
- border-radius: var(--radius);
+ border: solid 0.5px var(--MI_THEME-divider);
+ border-radius: var(--MI-radius);
&:active {
- border-color: var(--accent);
+ border-color: var(--MI_THEME-accent);
}
}
._popup {
- background: var(--popup);
- border-radius: var(--radius);
+ background: var(--MI_THEME-popup);
+ border-radius: var(--MI-radius);
contain: content;
}
._popupAcrylic {
- background: var(--acrylicPanel);
- border-radius: var(--radius);
+ background: var(--MI_THEME-acrylicPanel);
+ border-radius: var(--MI-radius);
contain: content;
- -webkit-backdrop-filter: var(--blur, blur(15px));
- backdrop-filter: var(--blur, blur(15px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
}
._acrylic {
- background: var(--acrylicPanel);
- -webkit-backdrop-filter: var(--blur, blur(15px));
- backdrop-filter: var(--blur, blur(15px));
+ background: var(--MI_THEME-acrylicPanel);
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
}
._formLinksGrid {
@@ -458,8 +456,8 @@ rt {
margin-left: 0.7em;
font-size: 65%;
padding: 2px 3px;
- color: var(--accent);
- border: solid 1px var(--accent);
+ color: var(--MI_THEME-accent);
+ border: solid 1px var(--MI_THEME-accent);
border-radius: 4px;
vertical-align: top;
}
@@ -468,8 +466,8 @@ rt {
margin-left: 0.7em;
font-size: 65%;
padding: 2px 3px;
- color: var(--warn);
- border: solid 1px var(--warn);
+ color: var(--MI_THEME-warn);
+ border: solid 1px var(--MI_THEME-warn);
border-radius: 4px;
vertical-align: top;
}
@@ -515,7 +513,7 @@ rt {
}
._link {
- color: var(--link);
+ color: var(--MI_THEME-link);
}
._caption {
@@ -544,14 +542,14 @@ pre[class*="language-"] {
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
border-radius: 10px;
- --bg: #F1E8DC;
- --fg: #693410;
+ --MI_THEME-bg: #F1E8DC;
+ --MI_THEME-fg: #693410;
}
html[data-color-scheme=dark] ._woodenFrame {
- --bg: #1d0c02;
- --fg: #F1E8DC;
- --panel: #192320;
+ --MI_THEME-bg: #1d0c02;
+ --MI_THEME-fg: #F1E8DC;
+ --MI_THEME-panel: #192320;
}
._woodenFrameH {
@@ -562,10 +560,10 @@ html[data-color-scheme=dark] ._woodenFrame {
._woodenFrameInner {
padding: 8px;
margin-top: 8px;
- background: var(--bg);
+ background: var(--MI_THEME-bg);
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
border-radius: 6px;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
&:first-child {
margin-top: 0;
@@ -580,7 +578,11 @@ html[data-color-scheme=dark] ._woodenFrame {
transform: scale(0.9);
}
-@keyframes global-blink {
+._blink {
+ animation: blink 1s infinite;
+}
+
+@keyframes blink {
0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.5); }
diff --git a/packages/frontend/src/ui/_common_/announcements.vue b/packages/frontend/src/ui/_common_/announcements.vue
index 374bc20b54..d153dc8726 100644
--- a/packages/frontend/src/ui/_common_/announcements.vue
+++ b/packages/frontend/src/ui/_common_/announcements.vue
@@ -13,9 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
>
-
-
-
+
+
+
{{ announcement.title }}
{{ announcement.text }}
@@ -30,7 +30,7 @@ import { $i } from '@/account.js';
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
index 690366307b..5f9a938017 100644
--- a/packages/frontend/src/ui/_common_/statusbars.vue
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -32,7 +32,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index cafc475bc3..5dad914202 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -17,17 +17,17 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
-
+
@@ -148,7 +148,7 @@ onMounted(() => {
z-index: 1000;
width: 100%;
height: $height;
- background-color: var(--bg);
+ background-color: var(--MI_THEME-bg);
> .body {
max-width: 1380px;
@@ -184,18 +184,17 @@ onMounted(() => {
position: absolute;
top: 0;
left: 0;
- color: var(--navIndicator);
+ color: var(--MI_THEME-navIndicator);
font-size: 8px;
- animation: global-blink 1s infinite;
}
&:hover {
text-decoration: none;
- color: var(--navHoverFg);
+ color: var(--MI_THEME-navHoverFg);
}
&.active {
- color: var(--navActive);
+ color: var(--MI_THEME-navActive);
}
}
@@ -203,7 +202,7 @@ onMounted(() => {
display: inline-block;
height: 16px;
margin: 0 10px;
- border-right: solid 0.5px var(--divider);
+ border-right: solid 0.5px var(--MI_THEME-divider);
}
> .instance {
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index e77b294b57..0f9f304816 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ navbarItemDef[item].title }}
-
+
{{ navbarItemDef[item].indicateValue }}
@@ -30,11 +30,11 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.controlPanel }}
-
+
{{ i18n.ts.settings }}
@@ -200,7 +200,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
> .divider {
margin: 10px 0;
- border-top: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
}
> .post {
@@ -208,7 +208,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
top: 0;
z-index: 1;
padding: 16px 0;
- background: var(--bg);
+ background: var(--MI_THEME-bg);
> .button {
min-width: 0;
@@ -263,9 +263,8 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
position: absolute;
top: 0;
left: 0;
- color: var(--navIndicator);
+ color: var(--MI_THEME-navIndicator);
font-size: 8px;
- animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
@@ -276,11 +275,11 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
&:hover {
text-decoration: none;
- color: var(--navHoverFg);
+ color: var(--MI_THEME-navHoverFg);
}
&.active {
- color: var(--navActive);
+ color: var(--MI_THEME-navActive);
}
}
}
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 688ef42400..710c3b4d21 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
@@ -216,8 +216,8 @@ onMounted(() => {
box-sizing: border-box;
&.wallpaper {
- background: var(--wallpaperOverlay);
- //backdrop-filter: var(--blur, blur(4px));
+ background: var(--MI_THEME-wallpaperOverlay);
+ //backdrop-filter: var(--MI-blur, blur(4px));
}
> .columns {
@@ -249,17 +249,17 @@ onMounted(() => {
min-width: 0;
width: 750px;
margin: 0 16px 0 0;
- border-left: solid 1px var(--divider);
- border-right: solid 1px var(--divider);
+ border-left: solid 1px var(--MI_THEME-divider);
+ border-right: solid 1px var(--MI_THEME-divider);
border-radius: 0;
overflow: clip;
- --margin: 12px;
+ --MI-margin: 12px;
}
> .widgets {
- //--panelBorder: none;
+ //--MI_THEME-panelBorder: none;
width: 300px;
- padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
+ padding-bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
@media (max-width: $widgets-hide-threshold) {
display: none;
@@ -277,13 +277,13 @@ onMounted(() => {
&.withGlobalHeader {
> .main {
margin-top: 0;
- border: solid 1px var(--divider);
- border-radius: var(--radius);
- --stickyTop: var(--globalHeaderHeight);
+ border: solid 1px var(--MI_THEME-divider);
+ border-radius: var(--MI-radius);
+ --MI-stickyTop: var(--globalHeaderHeight);
}
> .widgets {
- --stickyTop: var(--globalHeaderHeight);
+ --MI-stickyTop: var(--globalHeaderHeight);
margin-top: 0;
}
}
@@ -292,7 +292,7 @@ onMounted(() => {
margin: 0;
> .sidebar {
- border-right: solid 0.5px var(--divider);
+ border-right: solid 0.5px var(--MI_THEME-divider);
}
> .main {
@@ -314,10 +314,10 @@ onMounted(() => {
right: 0;
z-index: 1001;
height: 100dvh;
- padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
+ padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
overflow: auto;
- background: var(--bg);
+ background: var(--MI_THEME-bg);
}
> .ivnzpscs {
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index d195723ada..deae828172 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -50,18 +50,18 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
-
+
@@ -306,7 +306,7 @@ body {
.root {
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
- --margin: var(--marginHalf);
+ --MI-margin: var(--MI-marginHalf);
--columnGap: 6px;
@@ -333,7 +333,7 @@ body {
overflow-x: auto;
overflow-y: clip;
overscroll-behavior: contain;
- background: var(--deckBg);
+ background: var(--MI_THEME-deckBg);
&.center {
> .section:first-of-type {
@@ -415,7 +415,7 @@ body {
contain: strict;
overflow: auto;
overscroll-behavior: contain;
- background: var(--navBg);
+ background: var(--MI_THEME-navBg);
}
.nav {
@@ -429,10 +429,10 @@ body {
grid-gap: 8px;
width: 100%;
box-sizing: border-box;
- -webkit-backdrop-filter: var(--blur, blur(32px));
- backdrop-filter: var(--blur, blur(32px));
- background-color: var(--header);
- border-top: solid 0.5px var(--divider);
+ -webkit-backdrop-filter: var(--MI-blur, blur(32px));
+ backdrop-filter: var(--MI-blur, blur(32px));
+ background-color: var(--MI_THEME-header);
+ border-top: solid 0.5px var(--MI_THEME-divider);
}
.navButton {
@@ -443,29 +443,29 @@ body {
max-width: 60px;
margin: auto;
border-radius: 100%;
- background: var(--panel);
- color: var(--fg);
+ background: var(--MI_THEME-panel);
+ color: var(--MI_THEME-fg);
&:hover {
- background: var(--panelHighlight);
+ background: var(--MI_THEME-panelHighlight);
}
&:active {
- background: hsl(from var(--panel) h s calc(l - 2));
+ background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
}
}
.postButton {
composes: navButton;
- background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
- color: var(--fgOnAccent);
+ background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+ color: var(--MI_THEME-fgOnAccent);
&:hover {
- background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
+ background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
}
&:active {
- background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
+ background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
}
}
@@ -478,9 +478,8 @@ body {
position: absolute;
top: 0;
left: 0;
- color: var(--indicator);
+ color: var(--MI_THEME-indicator);
font-size: 16px;
- animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 78cdd29792..f1613505e1 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
@@ -299,7 +299,7 @@ function onDrop(ev) {
left: 0;
width: 100%;
height: 100%;
- background: var(--focus);
+ background: var(--MI_THEME-focus);
}
}
@@ -313,7 +313,7 @@ function onDrop(ev) {
left: 0;
width: 100%;
height: 100%;
- background: var(--focus);
+ background: var(--MI_THEME-focus);
opacity: 0.5;
}
}
@@ -331,19 +331,19 @@ function onDrop(ev) {
}
&.naked {
- background: var(--acrylicBg) !important;
- -webkit-backdrop-filter: var(--blur, blur(10px));
- backdrop-filter: var(--blur, blur(10px));
+ background: var(--MI_THEME-acrylicBg) !important;
+ -webkit-backdrop-filter: var(--MI-blur, blur(10px));
+ backdrop-filter: var(--MI-blur, blur(10px));
> .header {
background: transparent;
box-shadow: none;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
}
> .body {
background: transparent !important;
- scrollbar-color: var(--scrollbarHandle) transparent;
+ scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
&::-webkit-scrollbar-track {
background: transparent;
@@ -352,12 +352,12 @@ function onDrop(ev) {
}
&.paged {
- background: var(--bg) !important;
+ background: var(--MI_THEME-bg) !important;
> .body {
- background: var(--bg) !important;
+ background: var(--MI_THEME-bg) !important;
overflow-y: scroll !important;
- scrollbar-color: var(--scrollbarHandle) transparent;
+ scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
&::-webkit-scrollbar-track {
background: inherit;
@@ -374,9 +374,9 @@ function onDrop(ev) {
height: var(--deckColumnHeaderHeight);
padding: 0 16px 0 30px;
font-size: 0.9em;
- color: var(--panelHeaderFg);
- background: var(--panelHeaderBg);
- box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
+ color: var(--MI_THEME-panelHeaderFg);
+ background: var(--MI_THEME-panelHeaderBg);
+ box-shadow: 0 1px 0 0 var(--MI_THEME-panelHeaderDivider);
cursor: pointer;
user-select: none;
}
@@ -387,7 +387,7 @@ function onDrop(ev) {
left: 12px;
width: 3px;
height: calc(100% - 24px);
- background: var(--accent);
+ background: var(--MI_THEME-accent);
border-radius: 999px;
}
@@ -441,11 +441,11 @@ function onDrop(ev) {
overscroll-behavior-y: contain;
box-sizing: border-box;
container-type: size;
- background-color: var(--bg);
- scrollbar-color: var(--scrollbarHandle) var(--panel);
+ background-color: var(--MI_THEME-bg);
+ scrollbar-color: var(--MI_THEME-scrollbarHandle) var(--MI_THEME-panel);
&::-webkit-scrollbar-track {
- background: var(--panel);
+ background: var(--MI_THEME-panel);
}
}
diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue
index 9995996771..a0e62c8264 100644
--- a/packages/frontend/src/ui/deck/widgets-column.vue
+++ b/packages/frontend/src/ui/deck/widgets-column.vue
@@ -57,10 +57,10 @@ const menu = [{
diff --git a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
index 99a2b5dcab..9abe38054e 100644
--- a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ navbarItemDef[item].title }}
-
+
{{ navbarItemDef[item].indicateValue }}
@@ -29,11 +29,11 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.controlPanel }}
-
+
{{ i18n.ts.settings }}
@@ -135,7 +135,7 @@ function openProfile() {
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index b2a88310f1..2c1df55117 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
@@ -190,7 +190,7 @@ defineExpose({
left: 0;
width: 500px;
height: 100vh;
- background: var(--accent);
+ background: var(--MI_THEME-accent);
> .banner {
position: absolute;
@@ -218,7 +218,7 @@ defineExpose({
min-width: 0;
> .header {
- background: var(--panel);
+ background: var(--MI_THEME-panel);
> .wide {
line-height: 50px;
@@ -253,7 +253,7 @@ defineExpose({
left: 0;
width: 240px;
height: 100vh;
- background: var(--panel);
+ background: var(--MI_THEME-panel);
> .link {
display: block;
@@ -267,7 +267,7 @@ defineExpose({
> .divider {
margin: 8px auto;
width: calc(100% - 32px);
- border-top: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
}
> .action {
@@ -282,7 +282,7 @@ defineExpose({
border-radius: 999px;
&._button {
- background: var(--panel);
+ background: var(--MI_THEME-panel);
}
&:first-child {
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 2b99eb5365..be8018f916 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -64,12 +64,12 @@ document.documentElement.style.overflowY = 'scroll';
}
.rootWithBottom {
- min-height: calc(100dvh - (60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px)));
+ min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
box-sizing: border-box;
}
.bottom {
- height: calc(60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px));
+ height: calc(60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px));
width: 100%;
margin-top: auto;
}
@@ -82,9 +82,9 @@ document.documentElement.style.overflowY = 'scroll';
max-width: 60px;
margin: auto;
border-radius: 100%;
- background: var(--panel);
- color: var(--fg);
- right: var(--margin);
- bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
+ background: var(--MI_THEME-panel);
+ color: var(--MI_THEME-fg);
+ right: var(--MI-margin);
+ bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
}
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
index a74483e85e..cf7e9c5a3e 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.vue
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -126,10 +126,10 @@ defineExpose
({
max-width: 100%;
min-width: 100%;
padding: 16px;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
background: transparent;
border: none;
- border-bottom: solid 0.5px var(--divider);
+ border-bottom: solid 0.5px var(--MI_THEME-divider);
border-radius: 0;
box-sizing: border-box;
font: inherit;
@@ -154,7 +154,7 @@ defineExpose({
}
> .logs {
- border-top: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
text-align: left;
padding: 16px;
diff --git a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
index c2a3682a26..0dcbeeb68c 100644
--- a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
+++ b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
@@ -115,7 +115,7 @@ defineExpose({
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index 4d32dfddd4..cdd6e7887f 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -207,7 +207,7 @@ defineExpose({
.meter {
width: 100%;
overflow: hidden;
- background: var(--X11);
+ background: var(--MI_THEME-X11);
border-radius: 8px;
}
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index a9d6c42377..080b032b4d 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -105,7 +105,7 @@ defineExpose({
display: flex;
align-items: center;
padding: 14px 16px;
- border-bottom: solid 0.5px var(--divider);
+ border-bottom: solid 0.5px var(--MI_THEME-divider);
> img {
display: block;
@@ -120,7 +120,7 @@ defineExpose({
flex: 1;
overflow: hidden;
font-size: 0.9em;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
padding-right: 8px;
> .a {
diff --git a/packages/frontend/src/widgets/WidgetJobQueue.vue b/packages/frontend/src/widgets/WidgetJobQueue.vue
index edf6622a13..0ee6b863dc 100644
--- a/packages/frontend/src/widgets/WidgetJobQueue.vue
+++ b/packages/frontend/src/widgets/WidgetJobQueue.vue
@@ -173,14 +173,14 @@ defineExpose({
padding: 16px;
&:not(:first-child) {
- border-top: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
}
> .label {
display: flex;
> .icon {
- color: var(--warn);
+ color: var(--MI_THEME-warn);
margin-left: auto;
animation: warnBlink 1s infinite;
}
@@ -198,11 +198,11 @@ defineExpose({
> div:last-child {
&.inc {
- color: var(--warn);
+ color: var(--MI_THEME-warn);
}
&.dec {
- color: var(--success);
+ color: var(--MI_THEME-success);
}
}
}
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
index 7ee83157c6..7b179ce703 100644
--- a/packages/frontend/src/widgets/WidgetMemo.vue
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -84,10 +84,10 @@ defineExpose({
max-width: 100%;
min-width: 100%;
padding: 16px;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
background: transparent;
border: none;
- border-bottom: solid 0.5px var(--divider);
+ border-bottom: solid 0.5px var(--MI_THEME-divider);
border-radius: 0;
box-sizing: border-box;
font: inherit;
diff --git a/packages/frontend/src/widgets/WidgetOnlineUsers.vue b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
index a22a46ba76..b13b865aaa 100644
--- a/packages/frontend/src/widgets/WidgetOnlineUsers.vue
+++ b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
@@ -72,6 +72,6 @@ defineExpose({
}
.text {
- color: var(--fgTransparentWeak);
+ color: var(--MI_THEME-fgTransparentWeak);
}
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
index dd1dae7758..406f7ee371 100644
--- a/packages/frontend/src/widgets/WidgetRss.vue
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -113,7 +113,7 @@ defineExpose({
.item {
display: block;
padding: 8px 16px;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.vue b/packages/frontend/src/widgets/WidgetRssTicker.vue
index de115666c5..7abeb05e45 100644
--- a/packages/frontend/src/widgets/WidgetRssTicker.vue
+++ b/packages/frontend/src/widgets/WidgetRssTicker.vue
@@ -171,7 +171,7 @@ defineExpose({
display: inline-flex;
align-items: center;
vertical-align: bottom;
- color: var(--fg);
+ color: var(--MI_THEME-fg);
}
.divider {
@@ -179,6 +179,6 @@ defineExpose({
width: 0.5px;
height: 16px;
margin: 0 1em;
- background: var(--divider);
+ background: var(--MI_THEME-divider);
}
diff --git a/packages/frontend/src/widgets/WidgetSearch.vue b/packages/frontend/src/widgets/WidgetSearch.vue
index c3e2955707..2f25850d0c 100644
--- a/packages/frontend/src/widgets/WidgetSearch.vue
+++ b/packages/frontend/src/widgets/WidgetSearch.vue
@@ -121,7 +121,7 @@ defineExpose({