-
+
{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}
{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? host }) }}
@@ -223,7 +223,7 @@ async function later(later: boolean) {
.progressBarValue {
height: 100%;
- background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+ background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
transition: all 0.5s cubic-bezier(0,.5,.5,1);
}
@@ -252,7 +252,7 @@ async function later(later: boolean) {
left: 0;
flex-shrink: 0;
padding: 12px;
- border-top: solid 0.5px var(--divider);
+ border-top: solid 0.5px var(--MI_THEME-divider);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue
index 75066bbc3..650e639c4 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -124,7 +124,7 @@ function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
}
&.active {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
}
diff --git a/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue b/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
index cab42cd59..d098dad9a 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
@@ -62,7 +62,7 @@ async function renderChart() {
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const computedStyle = getComputedStyle(document.documentElement);
- const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+ const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
const colorRead = accent;
const colorWrite = '#2ecc71';
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index fe802a402..558ce48d4 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -106,7 +106,7 @@ function showMenu(ev: MouseEvent) {
.panel {
position: relative;
- background: var(--panel);
+ background: var(--MI_THEME-panel);
border-radius: var(--radius);
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
}
@@ -178,14 +178,14 @@ function showMenu(ev: MouseEvent) {
}
.statsItemLabel {
- color: var(--fgTransparentWeak);
+ color: var(--MI_THEME-fgTransparentWeak);
font-size: 0.9em;
}
.statsItemCount {
font-weight: bold;
font-size: 1.2em;
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
.tl {
@@ -194,7 +194,7 @@ function showMenu(ev: MouseEvent) {
.tlHeader {
padding: 12px 16px;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 1px var(--MI_THEME-divider);
}
.tlBody {
diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue
index 60b75b6d3..62e187f17 100644
--- a/packages/frontend/src/components/MkWaitingDialog.vue
+++ b/packages/frontend/src/components/MkWaitingDialog.vue
@@ -47,7 +47,7 @@ watch(() => props.showing, () => {
padding: 32px;
box-sizing: border-box;
text-align: center;
- background: var(--panel);
+ background: var(--MI_THEME-panel);
border-radius: var(--radius);
width: 250px;
@@ -65,7 +65,7 @@ watch(() => props.showing, () => {
font-size: 32px;
&.success {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
&.waiting {
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index 08906a120..dd92952a3 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -514,10 +514,10 @@ defineExpose({
flex-shrink: 0;
user-select: none;
height: var(--height);
- background: var(--windowHeader);
+ background: var(--MI_THEME-windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
- //border-bottom: solid 1px var(--divider);
+ //border-bottom: solid 1px var(--MI_THEME-divider);
font-size: 90%;
font-weight: bold;
@@ -531,11 +531,11 @@ defineExpose({
width: var(--height);
&:hover {
- color: var(--fgHighlighted);
+ color: var(--MI_THEME-fgHighlighted);
}
&.highlighted {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
}
@@ -560,7 +560,7 @@ defineExpose({
.content {
flex: 1;
overflow: auto;
- background: var(--panel);
+ background: var(--MI_THEME-panel);
container-type: size;
}
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index d6585bf4a..8fa9e4aff 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -51,18 +51,18 @@ const props = defineProps<{
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
- background: var(--folderHeaderBg);
+ background: var(--MI_THEME-folderHeaderBg);
border-radius: 6px;
font-size: 0.9em;
&:hover {
text-decoration: none;
- background: var(--folderHeaderHoverBg);
+ background: var(--MI_THEME-folderHeaderHoverBg);
}
&.active {
- color: var(--accent);
- background: var(--folderHeaderHoverBg);
+ color: var(--MI_THEME-accent);
+ background: var(--MI_THEME-folderHeaderHoverBg);
}
}
@@ -70,7 +70,7 @@ const props = defineProps<{
margin-right: 0.75em;
flex-shrink: 0;
text-align: center;
- color: var(--fgTransparentWeak);
+ color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
diff --git a/packages/frontend/src/components/form/section.vue b/packages/frontend/src/components/form/section.vue
index ad37daa26..5fca3acc3 100644
--- a/packages/frontend/src/components/form/section.vue
+++ b/packages/frontend/src/components/form/section.vue
@@ -21,8 +21,8 @@ defineProps<{
diff --git a/packages/frontend/src/components/form/slot.vue b/packages/frontend/src/components/form/slot.vue
index f54db0ca8..da94b7abb 100644
--- a/packages/frontend/src/components/form/slot.vue
+++ b/packages/frontend/src/components/form/slot.vue
@@ -35,7 +35,7 @@ function focus() {
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
- color: var(--fgTransparentWeak);
+ color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index f0e943960..b525a81fb 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -191,7 +191,7 @@ function reduceFrequency(): void {
right: 1px;
display: grid;
place-content: center;
- background: var(--panel);
+ background: var(--MI_THEME-panel);
border-radius: 100%;
padding: 2px;
}
@@ -210,7 +210,7 @@ function reduceFrequency(): void {
padding: 8px;
margin: 0 auto;
max-width: 400px;
- border: solid 1px var(--divider);
+ border: solid 1px var(--MI_THEME-divider);
}
.menuButton {
diff --git a/packages/frontend/src/components/global/MkLoading.vue b/packages/frontend/src/components/global/MkLoading.vue
index 49d8ace37..47d797606 100644
--- a/packages/frontend/src/components/global/MkLoading.vue
+++ b/packages/frontend/src/components/global/MkLoading.vue
@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
--size: 38px;
&.colored {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
&.inline {
diff --git a/packages/frontend/src/components/global/MkMfm.ts b/packages/frontend/src/components/global/MkMfm.ts
index d91449223..0d4ae8cac 100644
--- a/packages/frontend/src/components/global/MkMfm.ts
+++ b/packages/frontend/src/components/global/MkMfm.ts
@@ -6,6 +6,7 @@
import { VNode, h, SetupContext, provide } from 'vue';
import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js';
+import { host } from '@@/js/config.js';
import MkUrl from '@/components/global/MkUrl.vue';
import MkTime from '@/components/global/MkTime.vue';
import MkLink from '@/components/MkLink.vue';
@@ -17,7 +18,6 @@ import MkCodeInline from '@/components/MkCodeInline.vue';
import MkGoogle from '@/components/MkGoogle.vue';
import MkSparkle from '@/components/MkSparkle.vue';
import MkA, { MkABehavior } from '@/components/global/MkA.vue';
-import { host } from '@@/js/config.js';
import { defaultStore } from '@/store.js';
function safeParseFloat(str: unknown): number | null {
@@ -31,8 +31,8 @@ const QUOTE_STYLE = `
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
-color: var(--fg);
-border-left: solid 3px var(--fg);
+color: var(--MI_THEME-fg);
+border-left: solid 3px var(--MI_THEME-fg);
opacity: 0.7;
`.split('\n').join(' ');
@@ -57,7 +57,8 @@ type MfmEvents = {
// eslint-disable-next-line import/no-default-export
export default function (props: MfmProps, { emit }: { emit: SetupContext
['emit'] }) {
- provide('linkNavigationBehavior', props.linkNavigationBehavior);
+ // こうしたいところだけど functional component 内では provide は使えない
+ //provide('linkNavigationBehavior', props.linkNavigationBehavior);
const isNote = props.isNote ?? true;
const shouldNyaize = props.nyaize ? props.nyaize === 'respect' ? props.author?.isCat : false : false;
@@ -269,7 +270,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext {
position: absolute;
bottom: 0;
height: 3px;
- background: var(--accent);
+ background: var(--MI_THEME-accent);
border-radius: 999px;
transition: none;
pointer-events: none;
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index ff58a8f5f..b76e87433 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -100,7 +100,7 @@ function onTabClick(): void {
}
const calcBg = () => {
- const rawBg = 'var(--bg)';
+ const rawBg = '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();
@@ -133,7 +133,7 @@ onUnmounted(() => {
.root {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
- border-bottom: solid 0.5px var(--divider);
+ border-bottom: solid 0.5px var(--MI_THEME-divider);
width: 100%;
}
@@ -231,7 +231,7 @@ onUnmounted(() => {
}
&.highlighted {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
}
diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue
index 50bec990a..f600f7eed 100644
--- a/packages/frontend/src/components/global/MkTime.vue
+++ b/packages/frontend/src/components/global/MkTime.vue
@@ -99,10 +99,10 @@ if (!invalid && props.origin === null && (props.mode === 'relative' || props.mod
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 19bd794a5..38bdfc52d 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -27,6 +27,7 @@ import MkLoadingPage from '@/pages/_loading_.vue';
const props = defineProps<{
router?: IRouter;
+ nested?: boolean;
}>();
const router = props.router ?? inject('router');
@@ -39,6 +40,8 @@ const currentDepth = inject('routerCurrentDepth', 0);
provide('routerCurrentDepth', currentDepth + 1);
function resolveNested(current: Resolved, d = 0): Resolved | null {
+ if (!props.nested) return current;
+
if (d === currentDepth) {
return current;
} else {
diff --git a/packages/frontend/src/components/page/page.dynamic.vue b/packages/frontend/src/components/page/page.dynamic.vue
index 8c511a690..c355cd07d 100644
--- a/packages/frontend/src/components/page/page.dynamic.vue
+++ b/packages/frontend/src/components/page/page.dynamic.vue
@@ -27,7 +27,7 @@ const props = defineProps<{
diff --git a/packages/frontend/src/directives/adaptive-bg.ts b/packages/frontend/src/directives/adaptive-bg.ts
index 23fd1bddf..45891de88 100644
--- a/packages/frontend/src/directives/adaptive-bg.ts
+++ b/packages/frontend/src/directives/adaptive-bg.ts
@@ -21,7 +21,7 @@ export default {
const myBg = window.getComputedStyle(src).backgroundColor;
if (parentBg === myBg) {
- src.style.backgroundColor = 'var(--bg)';
+ src.style.backgroundColor = 'var(--MI_THEME-bg)';
} else {
src.style.backgroundColor = myBg;
}
diff --git a/packages/frontend/src/directives/adaptive-border.ts b/packages/frontend/src/directives/adaptive-border.ts
index b436075fc..685ca38e9 100644
--- a/packages/frontend/src/directives/adaptive-border.ts
+++ b/packages/frontend/src/directives/adaptive-border.ts
@@ -21,7 +21,7 @@ export default {
const myBg = window.getComputedStyle(src).backgroundColor;
if (parentBg === myBg) {
- src.style.borderColor = 'var(--divider)';
+ src.style.borderColor = 'var(--MI_THEME-divider)';
} else {
src.style.borderColor = myBg;
}
diff --git a/packages/frontend/src/directives/panel.ts b/packages/frontend/src/directives/panel.ts
index bbcc220e0..7b5969c67 100644
--- a/packages/frontend/src/directives/panel.ts
+++ b/packages/frontend/src/directives/panel.ts
@@ -18,12 +18,12 @@ export default {
const parentBg = getBgColor(src.parentElement);
- const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel');
+ const myBg = getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel');
if (parentBg === myBg) {
- src.style.backgroundColor = 'var(--bg)';
+ src.style.backgroundColor = 'var(--MI_THEME-bg)';
} else {
- src.style.backgroundColor = 'var(--panel)';
+ src.style.backgroundColor = 'var(--MI_THEME-panel)';
}
},
} as Directive;
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 615223d10..9cfb07f0c 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -531,17 +531,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);
}
}
@@ -564,7 +564,7 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
padding: 12px;
- background: var(--buttonBg);
+ background: var(--MI_THEME-buttonBg);
border-radius: 6px;
}
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index b645506ef..c19757f88 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -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;
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index d40d1eee5..d33b11605 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -53,6 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.moderationNote }}
+ {{ i18n.ts.moderationNoteDescription }}
-
-
+
+
+
+
@@ -54,7 +60,6 @@ SPDX-License-Identifier: AGPL-3.0-only
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
index f37b53aeb..f72a0b938 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
@@ -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 {
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
index 1938b8d48..7f1c6fd40 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
@@ -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));
}
diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue
index 8d2946db6..6a13984dd 100644
--- a/packages/frontend/src/pages/settings/drive-cleaner.vue
+++ b/packages/frontend/src/pages/settings/drive-cleaner.vue
@@ -132,7 +132,7 @@ definePageMetadata(() => ({
align-items: center;
&:hover {
- color: var(--accent);
+ color: var(--MI_THEME-accent);
}
}
diff --git a/packages/frontend/src/pages/settings/email.vue b/packages/frontend/src/pages/settings/email.vue
index f22664756..d452f249b 100644
--- a/packages/frontend/src/pages/settings/email.vue
+++ b/packages/frontend/src/pages/settings/email.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.verificationEmailSent }}
- {{ i18n.ts.emailVerified }}
+ {{ i18n.ts.emailVerified }}
diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue
index 999a73df4..427cdbe64 100644
--- a/packages/frontend/src/pages/settings/emoji-picker.vue
+++ b/packages/frontend/src/pages/settings/emoji-picker.vue
@@ -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);
}
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 7d16740a3..96a95f163 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only