{{ i18n.ts.moderationNote }}
+ {{ i18n.ts.moderationNoteDescription }}
{{ i18n.ts.addModerationNote }}
@@ -206,6 +207,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
import { useRouter } from '@/router/supplier.js';
import { getStaticImageUrl } 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';
@@ -460,8 +462,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;
@@ -516,8 +518,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%;
@@ -531,7 +533,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 {
> * {
@@ -558,7 +560,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;
@@ -577,7 +579,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;
@@ -591,15 +593,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%;
}
@@ -614,7 +616,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;
@@ -636,8 +638,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;
}
@@ -647,7 +649,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;
@@ -684,14 +686,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 {
@@ -728,7 +730,7 @@ onUnmounted(() => {
> .contents {
> .content {
- margin-bottom: var(--margin);
+ margin-bottom: var(--MI-margin);
}
}
}
@@ -745,7 +747,7 @@ onUnmounted(() => {
> .sub {
max-width: 350px;
min-width: 350px;
- margin-left: var(--margin);
+ margin-left: var(--MI-margin);
}
}
}
@@ -833,8 +835,14 @@ onUnmounted(() => {
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 3d6f11e36f..af8261de77 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -71,13 +71,13 @@ const pagination = computed(() => tab.value === 'featured' ? {
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 16b98e872d..f6ca077725 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -99,7 +99,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 {
@@ -108,7 +108,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;
}
@@ -165,9 +165,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;
@@ -187,7 +187,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 7f1c26d9d6..b6e439823b 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -304,13 +304,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,
+ },
});
}
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 0dcc318f87..ee92f24c3f 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -80,6 +80,10 @@ export const defaultStore = markRaw(new Storage('base', {
global: false,
},
},
+ abusesTutorial: {
+ where: 'account',
+ default: false,
+ },
keepCw: {
where: 'account',
default: true,
@@ -234,7 +238,7 @@ export const defaultStore = markRaw(new Storage('base', {
},
animatedMfm: {
where: 'device',
- default: true,
+ default: !window.matchMedia('(prefers-reduced-motion)').matches,
},
advancedMfm: {
where: 'device',
@@ -484,6 +488,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,
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 1c4d669610..501ce46222 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