From b668d161a9a0a2f73c487f3fa6d54fd7597635a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
<67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:12:16 +0900
Subject: [PATCH] refactor(frontend): prefix css variables (UI) (#14739)
* refactor(frontend): prefix css variables
* `MI_UI` -> `MI`
* fix
* `stickyBottom`
* stickyTop
---
.../src/components/EmMediaBanner.vue | 4 +--
.../src/components/EmMediaVideo.vue | 4 +--
.../frontend-embed/src/components/EmNote.vue | 10 +++---
.../src/components/EmNoteDetailed.vue | 2 +-
.../src/components/EmNoteSimple.vue | 2 +-
.../src/components/EmSubNoteContent.vue | 2 +-
packages/frontend-embed/src/pages/clip.vue | 2 +-
packages/frontend-embed/src/pages/tag.vue | 2 +-
.../src/pages/user-timeline.vue | 2 +-
packages/frontend-embed/src/style.scss | 22 ++++++------
packages/frontend-embed/src/ui.vue | 2 +-
packages/frontend/src/boot/common.ts | 6 ++--
.../src/components/MkAccountMoved.vue | 2 +-
.../src/components/MkAnnouncementDialog.vue | 2 +-
packages/frontend/src/components/MkChart.vue | 4 +--
.../frontend/src/components/MkContainer.vue | 4 +--
.../src/components/MkCropperDialog.vue | 4 +--
.../MkCustomEmojiDetailedDialog.vue | 4 +--
.../src/components/MkDateSeparatedList.vue | 2 +-
.../frontend/src/components/MkDonation.vue | 4 +--
packages/frontend/src/components/MkDrive.vue | 2 +-
.../src/components/MkExtensionInstaller.vue | 2 +-
.../src/components/MkFoldableSection.vue | 6 ++--
packages/frontend/src/components/MkFolder.vue | 10 +++---
.../frontend/src/components/MkFukidashi.vue | 2 +-
packages/frontend/src/components/MkInfo.vue | 2 +-
.../src/components/MkInstanceStats.vue | 2 +-
.../frontend/src/components/MkMediaAudio.vue | 4 +--
.../frontend/src/components/MkMediaImage.vue | 4 +--
.../frontend/src/components/MkMediaList.vue | 6 ++--
.../frontend/src/components/MkMediaVideo.vue | 2 +-
.../frontend/src/components/MkModalWindow.vue | 6 ++--
packages/frontend/src/components/MkNote.vue | 10 +++---
.../src/components/MkNoteDetailed.vue | 4 +--
.../frontend/src/components/MkNoteSimple.vue | 2 +-
packages/frontend/src/components/MkNotes.vue | 2 +-
packages/frontend/src/components/MkOmit.vue | 2 +-
.../frontend/src/components/MkPagePreview.vue | 8 ++---
.../frontend/src/components/MkPageWindow.vue | 2 +-
.../src/components/MkRemoteCaution.vue | 2 +-
.../src/components/MkSigninDialog.vue | 4 +--
.../src/components/MkSignupDialog.rules.vue | 2 +-
.../components/MkSourceCodeAvailablePopup.vue | 4 +--
.../src/components/MkSubNoteContent.vue | 2 +-
.../src/components/MkSystemWebhookEditor.vue | 4 +--
.../frontend/src/components/MkTextarea.vue | 2 +-
.../src/components/MkTokenGenerateWindow.vue | 2 +-
.../src/components/MkTutorialDialog.Note.vue | 2 +-
.../components/MkTutorialDialog.PostNote.vue | 2 +-
.../components/MkTutorialDialog.Sensitive.vue | 2 +-
.../components/MkTutorialDialog.Timeline.vue | 2 +-
.../frontend/src/components/MkUpdated.vue | 2 +-
.../MkUserAnnouncementEditDialog.vue | 4 +--
.../frontend/src/components/MkUserList.vue | 2 +-
.../components/MkUserSetupDialog.Follow.vue | 2 +-
.../src/components/MkVisitorDashboard.vue | 2 +-
.../src/components/MkWaitingDialog.vue | 2 +-
.../frontend/src/components/MkWidgets.vue | 4 +--
packages/frontend/src/components/MkWindow.vue | 6 ++--
.../src/components/global/MkPageHeader.vue | 6 ++--
.../components/global/MkStickyContainer.vue | 8 ++---
.../src/components/page/page.dynamic.vue | 4 +--
.../src/components/page/page.image.vue | 2 +-
.../src/components/page/page.note.vue | 2 +-
packages/frontend/src/pages/about-misskey.vue | 2 +-
.../frontend/src/pages/about.federation.vue | 2 +-
.../frontend/src/pages/about.overview.vue | 2 +-
.../src/pages/admin/RolesEditorFormula.vue | 2 +-
.../frontend/src/pages/admin/_header_.vue | 4 +--
.../notification-recipient.editor.vue | 4 +--
packages/frontend/src/pages/admin/ads.vue | 2 +-
.../frontend/src/pages/admin/branding.vue | 4 +--
.../src/pages/admin/email-settings.vue | 4 +--
.../frontend/src/pages/admin/federation.vue | 2 +-
packages/frontend/src/pages/admin/files.vue | 4 +--
.../src/pages/admin/modlog.ModLog.vue | 2 +-
packages/frontend/src/pages/admin/modlog.vue | 6 ++--
.../src/pages/admin/object-storage.vue | 4 +--
.../src/pages/admin/overview.queue.vue | 2 +-
.../frontend/src/pages/admin/queue.chart.vue | 2 +-
.../frontend/src/pages/admin/roles.edit.vue | 4 +--
.../frontend/src/pages/antenna-timeline.vue | 8 ++---
.../frontend/src/pages/avatar-decorations.vue | 8 ++---
packages/frontend/src/pages/channel.vue | 6 ++--
.../src/pages/custom-emojis-manager.vue | 8 ++---
.../frontend/src/pages/drive.file.info.vue | 6 ++--
.../frontend/src/pages/emoji-edit-dialog.vue | 4 +--
.../frontend/src/pages/explore.featured.vue | 2 +-
packages/frontend/src/pages/explore.users.vue | 2 +-
packages/frontend/src/pages/favorites.vue | 2 +-
.../frontend/src/pages/flash/flash-edit.vue | 2 +-
packages/frontend/src/pages/gallery/index.vue | 2 +-
packages/frontend/src/pages/gallery/post.vue | 2 +-
.../frontend/src/pages/install-extensions.vue | 2 +-
packages/frontend/src/pages/list.vue | 2 +-
packages/frontend/src/pages/my-lists/list.vue | 6 ++--
packages/frontend/src/pages/note.vue | 6 ++--
packages/frontend/src/pages/notifications.vue | 2 +-
packages/frontend/src/pages/page.vue | 12 +++----
.../src/pages/reversi/game.setting.vue | 4 +--
packages/frontend/src/pages/reversi/index.vue | 2 +-
packages/frontend/src/pages/scratchpad.vue | 2 +-
.../settings/avatar-decoration.dialog.vue | 4 +--
.../src/pages/settings/avatar-decoration.vue | 2 +-
.../src/pages/settings/emoji-picker.vue | 4 +--
.../pages/settings/preferences-backups.vue | 2 +-
.../frontend/src/pages/settings/theme.vue | 2 +-
.../frontend/src/pages/signup-complete.vue | 2 +-
packages/frontend/src/pages/tag.vue | 4 +--
packages/frontend/src/pages/timeline.vue | 14 ++++----
.../frontend/src/pages/user-list-timeline.vue | 8 ++---
.../frontend/src/pages/user/follow-list.vue | 2 +-
packages/frontend/src/pages/user/gallery.vue | 2 +-
packages/frontend/src/pages/user/home.vue | 14 ++++----
.../src/pages/user/index.timeline.vue | 4 +--
.../frontend/src/pages/welcome.entrance.a.vue | 4 +--
packages/frontend/src/pages/welcome.setup.vue | 2 +-
.../frontend/src/pages/welcome.timeline.vue | 4 +--
packages/frontend/src/style.scss | 34 +++++++++----------
packages/frontend/src/ui/_common_/common.vue | 10 +++---
.../src/ui/_common_/navbar-for-mobile.vue | 8 ++---
packages/frontend/src/ui/_common_/navbar.vue | 16 ++++-----
.../src/ui/_common_/stream-indicator.vue | 4 +--
packages/frontend/src/ui/classic.vue | 18 +++++-----
packages/frontend/src/ui/deck.vue | 6 ++--
packages/frontend/src/ui/deck/column.vue | 4 +--
.../frontend/src/ui/deck/widgets-column.vue | 4 +--
packages/frontend/src/ui/universal.vue | 18 +++++-----
packages/frontend/src/ui/zen.vue | 8 ++---
.../src/widgets/WidgetBirthdayFollowings.vue | 6 ++--
130 files changed, 296 insertions(+), 296 deletions(-)
diff --git a/packages/frontend-embed/src/components/EmMediaBanner.vue b/packages/frontend-embed/src/components/EmMediaBanner.vue
index 3e3dfd95b2..cf4a4c53b5 100644
--- a/packages/frontend-embed/src/components/EmMediaBanner.vue
+++ b/packages/frontend-embed/src/components/EmMediaBanner.vue
@@ -31,10 +31,10 @@ defineProps<{
display: flex;
align-items: center;
width: 100%;
- padding: var(--margin);
+ padding: var(--MI-margin);
margin-top: 4px;
border: 1px solid var(--MI_THEME-inputBorder);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
background-color: var(--MI_THEME-panel);
transition: background-color .1s, border-color .1s;
diff --git a/packages/frontend-embed/src/components/EmMediaVideo.vue b/packages/frontend-embed/src/components/EmMediaVideo.vue
index 5ca0b92d43..e2779bdee4 100644
--- a/packages/frontend-embed/src/components/EmMediaVideo.vue
+++ b/packages/frontend-embed/src/components/EmMediaVideo.vue
@@ -29,9 +29,9 @@ defineProps<{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
- padding: var(--margin);
+ padding: var(--MI-margin);
border: 1px solid var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
background-color: #000;
&:hover {
diff --git a/packages/frontend-embed/src/components/EmNote.vue b/packages/frontend-embed/src/components/EmNote.vue
index 7eeeda1797..d4b4827c90 100644
--- a/packages/frontend-embed/src/components/EmNote.vue
+++ b/packages/frontend-embed/src/components/EmNote.vue
@@ -190,7 +190,7 @@ const isDeleted = ref(false);
width: calc(100% - 8px);
height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@@ -356,7 +356,7 @@ const isDeleted = ref(false);
width: 58px;
height: 58px;
position: sticky !important;
- top: calc(22px + var(--stickyTop, 0px));
+ top: calc(22px + var(--MI-stickyTop, 0px));
left: 0;
}
@@ -377,7 +377,7 @@ const isDeleted = ref(false);
width: 100%;
margin-top: 14px;
position: sticky;
- bottom: calc(var(--stickyBottom, 0px) + 14px);
+ bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {
@@ -430,7 +430,7 @@ const isDeleted = ref(false);
.translation {
border: solid 0.5px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@@ -550,7 +550,7 @@ const isDeleted = ref(false);
margin: 0 10px 0 0;
width: 46px;
height: 46px;
- top: calc(14px + var(--stickyTop, 0px));
+ top: calc(14px + var(--MI-stickyTop, 0px));
}
}
diff --git a/packages/frontend-embed/src/components/EmNoteDetailed.vue b/packages/frontend-embed/src/components/EmNoteDetailed.vue
index ccd723d7d2..b39b47c065 100644
--- a/packages/frontend-embed/src/components/EmNoteDetailed.vue
+++ b/packages/frontend-embed/src/components/EmNoteDetailed.vue
@@ -364,7 +364,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
width: 100%;
margin-top: 14px;
position: sticky;
- bottom: calc(var(--stickyBottom, 0px) + 14px);
+ bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {
diff --git a/packages/frontend-embed/src/components/EmNoteSimple.vue b/packages/frontend-embed/src/components/EmNoteSimple.vue
index 704a876e59..b9aaf3fa4a 100644
--- a/packages/frontend-embed/src/components/EmNoteSimple.vue
+++ b/packages/frontend-embed/src/components/EmNoteSimple.vue
@@ -53,7 +53,7 @@ const showContent = ref(false);
height: 34px;
border-radius: 8px;
position: sticky !important;
- top: calc(16px + var(--stickyTop, 0px));
+ top: calc(16px + var(--MI-stickyTop, 0px));
left: 0;
}
diff --git a/packages/frontend-embed/src/components/EmSubNoteContent.vue b/packages/frontend-embed/src/components/EmSubNoteContent.vue
index dcaa1ec914..61815ddfd8 100644
--- a/packages/frontend-embed/src/components/EmSubNoteContent.vue
+++ b/packages/frontend-embed/src/components/EmSubNoteContent.vue
@@ -100,7 +100,7 @@ const collapsed = ref(isLong);
width: 100%;
margin-top: 14px;
position: sticky;
- bottom: calc(var(--stickyBottom, 0px) + 14px);
+ bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {
diff --git a/packages/frontend-embed/src/pages/clip.vue b/packages/frontend-embed/src/pages/clip.vue
index d805cb3e4f..f4d4e8cf6f 100644
--- a/packages/frontend-embed/src/pages/clip.vue
+++ b/packages/frontend-embed/src/pages/clip.vue
@@ -100,7 +100,7 @@ function top(ev: MouseEvent) {
display: flex;
min-width: 0;
align-items: center;
- gap: var(--margin);
+ gap: var(--MI-margin);
overflow: hidden;
.headerClipIconRoot {
diff --git a/packages/frontend-embed/src/pages/tag.vue b/packages/frontend-embed/src/pages/tag.vue
index 78049e4041..4b00ae7c2d 100644
--- a/packages/frontend-embed/src/pages/tag.vue
+++ b/packages/frontend-embed/src/pages/tag.vue
@@ -83,7 +83,7 @@ function top(ev: MouseEvent) {
display: flex;
min-width: 0;
align-items: center;
- gap: var(--margin);
+ gap: var(--MI-margin);
overflow: hidden;
.headerClipIconRoot {
diff --git a/packages/frontend-embed/src/pages/user-timeline.vue b/packages/frontend-embed/src/pages/user-timeline.vue
index 85e6f52d50..348b1a7622 100644
--- a/packages/frontend-embed/src/pages/user-timeline.vue
+++ b/packages/frontend-embed/src/pages/user-timeline.vue
@@ -117,7 +117,7 @@ function top(ev: MouseEvent) {
display: flex;
min-width: 0;
align-items: center;
- gap: var(--margin);
+ gap: var(--MI-margin);
overflow: hidden;
.avatarLink {
diff --git a/packages/frontend-embed/src/style.scss b/packages/frontend-embed/src/style.scss
index 1569de01f8..2e43cfd20a 100644
--- a/packages/frontend-embed/src/style.scss
+++ b/packages/frontend-embed/src/style.scss
@@ -7,11 +7,11 @@
*/
:root {
- --radius: 12px;
- --marginFull: 14px;
- --marginHalf: 10px;
+ --MI-radius: 12px;
+ --MI-marginFull: 14px;
+ --MI-marginHalf: 10px;
- --margin: var(--marginFull);
+ --MI-margin: var(--MI-marginFull);
}
html {
@@ -218,12 +218,12 @@ rt {
._panel {
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
._margin {
- margin: var(--margin) 0;
+ margin: var(--MI-margin) 0;
}
._gaps_m {
@@ -241,7 +241,7 @@ rt {
._gaps {
display: flex;
flex-direction: column;
- gap: var(--margin);
+ gap: var(--MI-margin);
}
._buttons {
@@ -264,7 +264,7 @@ rt {
box-sizing: border-box;
text-align: center;
border: solid 0.5px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
&:active {
border-color: var(--MI_THEME-accent);
@@ -273,14 +273,14 @@ rt {
._popup {
background: var(--MI_THEME-popup);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
contain: content;
}
._acrylic {
background: var(--MI_THEME-acrylicPanel);
- -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));
}
._fullinfo {
diff --git a/packages/frontend-embed/src/ui.vue b/packages/frontend-embed/src/ui.vue
index 2ed2f58376..4ba5968a91 100644
--- a/packages/frontend-embed/src/ui.vue
+++ b/packages/frontend-embed/src/ui.vue
@@ -95,7 +95,7 @@ onUnmounted(() => {
height: auto;
&.rounded {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
&.noBorder {
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 52f8fb49e5..1145891b71 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -186,14 +186,14 @@ export async function common(createVue: () => App<Element>) {
});
watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
- document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+ document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true });
watch(defaultStore.reactiveState.useBlurEffect, v => {
if (v) {
- document.documentElement.style.removeProperty('--blur');
+ document.documentElement.style.removeProperty('--MI-blur');
} else {
- document.documentElement.style.setProperty('--blur', 'none');
+ document.documentElement.style.setProperty('--MI-blur', 'none');
}
}, { immediate: true });
diff --git a/packages/frontend/src/components/MkAccountMoved.vue b/packages/frontend/src/components/MkAccountMoved.vue
index bd6f8ceb09..0839955d9d 100644
--- a/packages/frontend/src/components/MkAccountMoved.vue
+++ b/packages/frontend/src/components/MkAccountMoved.vue
@@ -34,7 +34,7 @@ misskeyApi('users/show', { userId: props.movedTo }).then(u => user.value = u);
font-size: 90%;
background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-error);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.link {
diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue
index 488492701e..1adb244c9e 100644
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/packages/frontend/src/components/MkAnnouncementDialog.vue
@@ -84,7 +84,7 @@ onMounted(() => {
max-width: 480px;
box-sizing: border-box;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.header {
diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
index 57d325b11a..d05f4921f6 100644
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@@ -863,8 +863,8 @@ onMounted(() => {
left: 0;
width: 100%;
height: 100%;
- -webkit-backdrop-filter: var(--blur, blur(12px));
- backdrop-filter: var(--blur, blur(12px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(12px));
+ backdrop-filter: var(--MI-blur, blur(12px));
display: flex;
justify-content: center;
align-items: center;
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index f2bafb4adf..8ab01d7db8 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -165,7 +165,7 @@ onUnmounted(() => {
.header {
position: sticky;
- top: var(--stickyTop, 0px);
+ top: var(--MI-stickyTop, 0px);
left: 0;
color: var(--MI_THEME-panelHeaderFg);
background: var(--MI_THEME-panelHeaderBg);
@@ -201,7 +201,7 @@ onUnmounted(() => {
}
.content {
- --stickyTop: 0px;
+ --MI-stickyTop: 0px;
&.omitted {
position: relative;
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index a25dc36882..c2a1aaf29a 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -170,8 +170,8 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
- -webkit-backdrop-filter: var(--blur, blur(10px));
- backdrop-filter: var(--blur, blur(10px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(10px));
+ backdrop-filter: var(--MI-blur, blur(10px));
background: rgba(0, 0, 0, 0.5);
}
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
index 29a435fb1a..949adc6a8e 100644
--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -86,7 +86,7 @@ function cancel() {
max-width: 100%;
height: 40cqh;
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
margin: auto;
overflow-y: hidden;
}
@@ -103,6 +103,6 @@ function cancel() {
padding: 3px 10px;
background-color: var(--MI_THEME-X5);
border: solid 1px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
</style>
diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index 0886b7a4f7..a8a32e8bc7 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -182,7 +182,7 @@ export default defineComponent({
}
&:not(.date-separated-list-nogap) > *:not(:last-child) {
- margin-bottom: var(--margin);
+ margin-bottom: var(--MI-margin);
}
}
diff --git a/packages/frontend/src/components/MkDonation.vue b/packages/frontend/src/components/MkDonation.vue
index ebface5185..0e0da64750 100644
--- a/packages/frontend/src/components/MkDonation.vue
+++ b/packages/frontend/src/components/MkDonation.vue
@@ -65,12 +65,12 @@ function neverShow() {
.root {
position: fixed;
z-index: v-bind(zIndex);
- bottom: var(--margin);
+ bottom: var(--MI-margin);
left: 0;
right: 0;
margin: auto;
box-sizing: border-box;
- width: calc(100% - (var(--margin) * 2));
+ width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px;
display: flex;
}
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 8bd7ee8324..23883a44e9 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -768,7 +768,7 @@ onBeforeUnmount(() => {
.main {
flex: 1;
overflow: auto;
- padding: var(--margin);
+ padding: var(--MI-margin);
user-select: none;
&.fetching {
diff --git a/packages/frontend/src/components/MkExtensionInstaller.vue b/packages/frontend/src/components/MkExtensionInstaller.vue
index ed29dade7a..b41604b2c3 100644
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@@ -110,7 +110,7 @@ const emits = defineEmits<{
<style lang="scss" module>
.extInstallerRoot {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
background: var(--MI_THEME-panel);
padding: 1.5rem;
}
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index ef1d075360..1717f8fc98 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -118,9 +118,9 @@ onMounted(() => {
position: relative;
z-index: 10;
position: sticky;
- top: var(--stickyTop, 0px);
- -webkit-backdrop-filter: var(--blur, blur(8px));
- backdrop-filter: var(--blur, blur(20px));
+ top: var(--MI-stickyTop, 0px);
+ -webkit-backdrop-filter: var(--MI-blur, blur(8px));
+ backdrop-filter: var(--MI-blur, blur(20px));
}
.title {
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 290d73dd92..5f9500d923 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -145,8 +145,8 @@ onMounted(() => {
box-sizing: border-box;
padding: 9px 12px 9px 12px;
background: var(--MI_THEME-folderHeaderBg);
- -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));
border-radius: 6px;
transition: border-radius 0.3s;
@@ -236,12 +236,12 @@ onMounted(() => {
.footer {
position: sticky !important;
z-index: 1;
- bottom: var(--stickyBottom, 0px);
+ bottom: var(--MI-stickyBottom, 0px);
left: 0;
padding: 12px;
background: var(--MI_THEME-acrylicBg);
- -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));
background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
border-radius: 0 0 6px 6px;
diff --git a/packages/frontend/src/components/MkFukidashi.vue b/packages/frontend/src/components/MkFukidashi.vue
index 307cd15dc8..8b1c56fca4 100644
--- a/packages/frontend/src/components/MkFukidashi.vue
+++ b/packages/frontend/src/components/MkFukidashi.vue
@@ -39,7 +39,7 @@ withDefaults(defineProps<{
<style module lang="scss">
.root {
- --fukidashi-radius: var(--radius);
+ --fukidashi-radius: var(--MI-radius);
--fukidashi-bg: var(--MI_THEME-panel);
position: relative;
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
index 87c98cf072..90ca1b5a9d 100644
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -38,7 +38,7 @@ function close() {
font-size: 90%;
background: var(--MI_THEME-infoBg);
color: var(--MI_THEME-infoFg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
white-space: pre-wrap;
&.warn {
diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue
index da313d4d70..8ccbf61e48 100644
--- a/packages/frontend/src/components/MkInstanceStats.vue
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@@ -257,7 +257,7 @@ onMounted(() => {
min-width: 0;
position: relative;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
padding: 24px;
max-height: 300px;
diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 915d67db7f..8b713b2734 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -392,7 +392,7 @@ onDeactivated(() => {
container-type: inline-size;
position: relative;
border: .5px solid var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
&:focus-visible {
@@ -454,7 +454,7 @@ onDeactivated(() => {
.controlButton {
padding: 6px;
- border-radius: calc(var(--radius) / 2);
+ border-radius: calc(var(--MI-radius) / 2);
font-size: 1.05rem;
&:hover {
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index fbd973c196..ec85569df5 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -226,8 +226,8 @@ html[data-color-scheme=light] .visible {
position: absolute;
border-radius: 999px;
background-color: rgba(0, 0, 0, 0.3);
- -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));
color: #fff;
font-size: 0.8em;
width: 28px;
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 9fab73d87b..32766f2029 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -317,7 +317,7 @@ defineExpose({
<style lang="scss">
.pswp__bg {
background: var(--MI_THEME-modalBg);
- backdrop-filter: var(--modalBgFilter);
+ backdrop-filter: var(--MI-modalBgFilter);
}
.pswp__alt-text-container {
@@ -338,8 +338,8 @@ defineExpose({
color: var(--MI_THEME-fg);
margin: 0 auto;
text-align: center;
- padding: var(--margin);
- border-radius: var(--radius);
+ padding: var(--MI-margin);
+ border-radius: var(--MI-radius);
max-height: 8em;
overflow-y: auto;
text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 271c66552b..d3a12ca734 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -658,7 +658,7 @@ onDeactivated(() => {
.controlButton {
padding: 6px;
- border-radius: calc(var(--radius) / 2);
+ border-radius: calc(var(--MI-radius) / 2);
transition: background-color .2s ease-in-out;
font-size: 1.05rem;
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index c77611ef12..fe9e1ce088 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -90,7 +90,7 @@ defineExpose({
display: flex;
flex-direction: column;
contain: content;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
--root-margin: 24px;
@@ -106,8 +106,8 @@ defineExpose({
display: flex;
flex-shrink: 0;
background: var(--MI_THEME-windowHeader);
- -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));
}
.headerButton {
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index c5f5431dcf..be93b3c529 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -644,7 +644,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: calc(100% - 8px);
height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@@ -810,7 +810,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: 58px;
height: 58px;
position: sticky !important;
- top: calc(22px + var(--stickyTop, 0px));
+ top: calc(22px + var(--MI-stickyTop, 0px));
left: 0;
}
@@ -831,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: 100%;
margin-top: 14px;
position: sticky;
- bottom: calc(var(--stickyBottom, 0px) + 14px);
+ bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {
@@ -884,7 +884,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.translation {
border: solid 0.5px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@@ -998,7 +998,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: 0 10px 0 0;
width: 46px;
height: 46px;
- top: calc(14px + var(--stickyTop, 0px));
+ top: calc(14px + var(--MI-stickyTop, 0px));
}
}
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 8a7a98d23f..6d53685651 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -570,7 +570,7 @@ function loadConversation() {
width: calc(100% - 8px);
height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@@ -711,7 +711,7 @@ function loadConversation() {
.translation {
border: solid 0.5px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index c3f3c42b42..e684cf2a30 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -51,7 +51,7 @@ const showContent = ref(false);
height: 34px;
border-radius: 8px;
position: sticky !important;
- top: calc(16px + var(--stickyTop, 0px));
+ top: calc(16px + var(--MI-stickyTop, 0px));
left: 0;
}
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index cb240160cf..1c17c6b691 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -66,7 +66,7 @@ defineExpose({
.note {
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
}
}
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index 38c8664575..a05176e2f4 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -47,7 +47,7 @@ onUnmounted(() => {
<style lang="scss" module>
.content {
- --stickyTop: 0px;
+ --MI-stickyTop: 0px;
&.omitted {
position: relative;
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index b5281d8a3d..19579cc4cc 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -42,7 +42,7 @@ const props = defineProps<{
.eyeCatchingImageRoot {
width: 100%;
height: 200px;
- border-radius: var(--radius) var(--radius) 0 0;
+ border-radius: var(--MI-radius) var(--MI-radius) 0 0;
overflow: hidden;
}
</style>
@@ -67,7 +67,7 @@ const props = defineProps<{
left: 0;
width: 100%;
height: 100%;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
pointer-events: none;
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
}
@@ -75,14 +75,14 @@ const props = defineProps<{
> .thumbnail {
& + article {
- border-radius: 0 0 var(--radius) var(--radius);
+ border-radius: 0 0 var(--MI-radius) var(--MI-radius);
}
}
> article {
background-color: var(--MI_THEME-panel);
padding: 16px;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
> header {
margin-bottom: 8px;
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 421051f73d..4777da2848 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -181,6 +181,6 @@ defineExpose({
min-height: 100%;
background: var(--MI_THEME-bg);
- --margin: var(--marginHalf);
+ --MI-margin: var(--MI-marginHalf);
}
</style>
diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue
index 3ffb50dbd9..a56a4b1671 100644
--- a/packages/frontend/src/components/MkRemoteCaution.vue
+++ b/packages/frontend/src/components/MkRemoteCaution.vue
@@ -21,7 +21,7 @@ defineProps<{
padding: 16px;
background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-infoWarnFg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index 51dea960aa..676a336ec7 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -70,7 +70,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
max-height: 450px;
box-sizing: border-box;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.header {
@@ -83,7 +83,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
display: flex;
align-items: center;
font-weight: bold;
- backdrop-filter: var(--blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg);
z-index: 1;
}
diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue
index 1470f1e57e..e2a06dd91f 100644
--- a/packages/frontend/src/components/MkSignupDialog.rules.vue
+++ b/packages/frontend/src/components/MkSignupDialog.rules.vue
@@ -170,7 +170,7 @@ async function updateAgreeNote(v: boolean) {
flex-shrink: 0;
display: flex;
position: sticky;
- top: calc(var(--stickyTop, 0px) + 8px);
+ top: calc(var(--MI-stickyTop, 0px) + 8px);
counter-increment: item;
content: counter(item);
width: 32px;
diff --git a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
index 438dd7e3a5..4c197ed43e 100644
--- a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
+++ b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
@@ -63,12 +63,12 @@ function close() {
.root {
position: fixed;
z-index: v-bind(zIndex);
- bottom: var(--margin);
+ bottom: var(--MI-margin);
left: 0;
right: 0;
margin: auto;
box-sizing: border-box;
- width: calc(100% - (var(--margin) * 2));
+ width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px;
display: flex;
}
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index a36765b73c..9e02884b8c 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -97,7 +97,7 @@ const collapsed = ref(isLong);
width: 100%;
margin-top: 14px;
position: sticky;
- bottom: calc(var(--stickyBottom, 0px) + 14px);
+ bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {
diff --git a/packages/frontend/src/components/MkSystemWebhookEditor.vue b/packages/frontend/src/components/MkSystemWebhookEditor.vue
index 23130d7f9f..a00cf0d9d3 100644
--- a/packages/frontend/src/components/MkSystemWebhookEditor.vue
+++ b/packages/frontend/src/components/MkSystemWebhookEditor.vue
@@ -263,8 +263,8 @@ onMounted(async () => {
padding: 12px;
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));
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
}
.switchBox {
diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue
index 0139712232..d1a6e1ebbf 100644
--- a/packages/frontend/src/components/MkTextarea.vue
+++ b/packages/frontend/src/components/MkTextarea.vue
@@ -226,7 +226,7 @@ onUnmounted(() => {
.mfmPreview {
padding: 12px;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
box-sizing: border-box;
min-height: 130px;
pointer-events: none;
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue
index 63dc93ae27..a7bc3f37f1 100644
--- a/packages/frontend/src/components/MkTokenGenerateWindow.vue
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue
@@ -137,7 +137,7 @@ function enableAll(): void {
margin: 8px -6px 0;
padding: 24px 6px 6px;
border: 2px solid var(--MI_THEME-error);
- border-radius: calc(var(--radius) / 2);
+ border-radius: calc(var(--MI-radius) / 2);
}
.adminPermissionsHeader {
diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue
index 5644907434..b26a01737e 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Note.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue
@@ -105,7 +105,7 @@ function removeReaction(emoji) {
<style lang="scss" module>
.exampleNoteRoot {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel);
}
diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
index 7044e05804..6559307a94 100644
--- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
@@ -81,7 +81,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
<style lang="scss" module>
.exampleRoot {
max-width: none!important;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel);
}
diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
index ce06b97b6b..f7b60fbc45 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
@@ -91,7 +91,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
<style lang="scss" module>
.exampleRoot {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel);
}
diff --git a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
index 9e33afbb53..b203110ef0 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
@@ -31,7 +31,7 @@ import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js';
<style lang="scss" module>
.exampleNoteRoot {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel);
}
diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue
index fe50ab8cff..c937b4ce59 100644
--- a/packages/frontend/src/components/MkUpdated.vue
+++ b/packages/frontend/src/components/MkUpdated.vue
@@ -47,7 +47,7 @@ onMounted(() => {
box-sizing: border-box;
text-align: center;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.title {
diff --git a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
index 26ba108244..7a2b5f5ddc 100644
--- a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
+++ b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
@@ -142,7 +142,7 @@ async function del() {
left: 0;
padding: 12px;
border-top: solid 0.5px var(--MI_THEME-divider);
- -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));
}
</style>
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index 17a9254d01..8b4afd7994 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -39,6 +39,6 @@ const props = withDefaults(defineProps<{
.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
- grid-gap: var(--margin);
+ grid-gap: var(--MI-margin);
}
</style>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
index 1524ea0ec9..5153c06139 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
@@ -62,7 +62,7 @@ const popularUsers: Paging = {
.users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
- grid-gap: var(--margin);
+ grid-gap: var(--MI-margin);
justify-content: center;
}
</style>
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 91e2898798..97c765d81c 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -107,7 +107,7 @@ function showMenu(ev: MouseEvent) {
.panel {
position: relative;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
}
diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue
index 62e187f172..34fa6b0723 100644
--- a/packages/frontend/src/components/MkWaitingDialog.vue
+++ b/packages/frontend/src/components/MkWaitingDialog.vue
@@ -48,7 +48,7 @@ watch(() => props.showing, () => {
box-sizing: border-box;
text-align: center;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
width: 250px;
&.iconOnly {
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index 0c51cfa9ce..492dd4cdc0 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root">
<template v-if="edit">
<header :class="$style.editHeader">
- <MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select>
+ <MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--MI-margin)" data-cy-widget-select>
<template #label>{{ i18n.ts.selectWidget }}</template>
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.ts._widgets[widget] }}</option>
</MkSelect>
@@ -123,7 +123,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
.widget {
contain: content;
- margin: var(--margin) 0;
+ margin: var(--MI-margin) 0;
&:first-of-type {
margin-top: 0;
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index dd92952a35..a5f7a2e9e5 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -502,7 +502,7 @@ defineExpose({
contain: content;
width: 100%;
height: 100%;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.header {
@@ -515,8 +515,8 @@ defineExpose({
user-select: none;
height: var(--height);
background: var(--MI_THEME-windowHeader);
- -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));
//border-bottom: solid 1px var(--MI_THEME-divider);
font-size: 90%;
font-weight: bold;
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index e032313b02..aa4be69b2c 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -130,8 +130,8 @@ onUnmounted(() => {
<style lang="scss" module>
.root {
- -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));
border-bottom: solid 0.5px var(--MI_THEME-divider);
width: 100%;
}
@@ -145,7 +145,7 @@ onUnmounted(() => {
.upper {
--height: 50px;
display: flex;
- gap: var(--margin);
+ gap: var(--MI-margin);
height: var(--height);
.tabs:first-child {
diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue
index 72993991ce..cb21dafd2b 100644
--- a/packages/frontend/src/components/global/MkStickyContainer.vue
+++ b/packages/frontend/src/components/global/MkStickyContainer.vue
@@ -69,28 +69,28 @@ onMounted(() => {
watch(childStickyTop, () => {
if (bodyEl.value == null) return;
- bodyEl.value.style.setProperty('--stickyTop', `${childStickyTop.value}px`);
+ bodyEl.value.style.setProperty('--MI-stickyTop', `${childStickyTop.value}px`);
}, {
immediate: true,
});
watch(childStickyBottom, () => {
if (bodyEl.value == null) return;
- bodyEl.value.style.setProperty('--stickyBottom', `${childStickyBottom.value}px`);
+ bodyEl.value.style.setProperty('--MI-stickyBottom', `${childStickyBottom.value}px`);
}, {
immediate: true,
});
if (headerEl.value != null) {
headerEl.value.style.position = 'sticky';
- headerEl.value.style.top = 'var(--stickyTop, 0)';
+ headerEl.value.style.top = 'var(--MI-stickyTop, 0)';
headerEl.value.style.zIndex = '1';
observer.observe(headerEl.value);
}
if (footerEl.value != null) {
footerEl.value.style.position = 'sticky';
- footerEl.value.style.bottom = 'var(--stickyBottom, 0)';
+ footerEl.value.style.bottom = 'var(--MI-stickyBottom, 0)';
footerEl.value.style.zIndex = '1';
observer.observe(footerEl.value);
}
diff --git a/packages/frontend/src/components/page/page.dynamic.vue b/packages/frontend/src/components/page/page.dynamic.vue
index c355cd07d7..c2449931c1 100644
--- a/packages/frontend/src/components/page/page.dynamic.vue
+++ b/packages/frontend/src/components/page/page.dynamic.vue
@@ -28,8 +28,8 @@ const props = defineProps<{
<style lang="scss" module>
.root {
border: 1px solid var(--MI_THEME-divider);
- border-radius: var(--radius);
- padding: var(--margin);
+ border-radius: var(--MI-radius);
+ padding: var(--MI-margin);
text-align: center;
}
diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue
index c4bedcdb54..69443ce7dd 100644
--- a/packages/frontend/src/components/page/page.image.vue
+++ b/packages/frontend/src/components/page/page.image.vue
@@ -29,7 +29,7 @@ onMounted(() => {
<style lang="scss" module>
.root {
border: 1px solid var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: hidden;
}
.mediaList {
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index 4a1be9b772..84436e7adb 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -36,6 +36,6 @@ onMounted(() => {
<style lang="scss" module>
.root {
border: 1px solid var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
</style>
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index a66d580db9..891489f1a1 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -441,7 +441,7 @@ definePageMetadata(() => ({
.znqjceqz {
> .about {
position: relative;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
> .treasure {
position: absolute;
diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue
index b3776c67e6..0a7cb8a50b 100644
--- a/packages/frontend/src/pages/about.federation.vue
+++ b/packages/frontend/src/pages/about.federation.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
- <FormSplit style="margin-top: var(--margin);">
+ <FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option>
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index c19757f88f..e5e57c05c4 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -183,7 +183,7 @@ const initStats = () => misskeyApi('stats', {});
flex-shrink: 0;
display: flex;
position: sticky;
- top: calc(var(--stickyTop, 0px) + 8px);
+ top: calc(var(--MI-stickyTop, 0px) + 8px);
counter-increment: item;
content: counter(item);
width: 32px;
diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.vue b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
index dc2862d225..4762ef3f97 100644
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.vue
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@@ -156,7 +156,7 @@ function removeSelf() {
.item {
border: solid 2px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
padding: 12px;
&:hover {
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index 36fe483771..9b1bf51f58 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -156,8 +156,8 @@ onUnmounted(() => {
--height: 60px;
display: flex;
width: 100%;
- -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));
> .buttons {
--margin: 8px;
diff --git a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
index f70b46b84a..eef24afd32 100644
--- a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
+++ b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
@@ -296,8 +296,8 @@ onMounted(async () => {
padding: 12px;
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));
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
}
.systemWebhook {
diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index 6c8901b10b..0d67359e47 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -266,7 +266,7 @@ definePageMetadata(() => ({
padding: 32px;
&:not(:last-child) {
- margin-bottom: var(--margin);
+ margin-bottom: var(--MI-margin);
}
}
.input {
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index 947dde767e..95f82c1f24 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -183,7 +183,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
- -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));
}
</style>
diff --git a/packages/frontend/src/pages/admin/email-settings.vue b/packages/frontend/src/pages/admin/email-settings.vue
index 4a858887f3..5b60e67dac 100644
--- a/packages/frontend/src/pages/admin/email-settings.vue
+++ b/packages/frontend/src/pages/admin/email-settings.vue
@@ -138,7 +138,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
- -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));
}
</style>
diff --git a/packages/frontend/src/pages/admin/federation.vue b/packages/frontend/src/pages/admin/federation.vue
index debf684c9b..e7b9fd8621 100644
--- a/packages/frontend/src/pages/admin/federation.vue
+++ b/packages/frontend/src/pages/admin/federation.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
- <FormSplit style="margin-top: var(--margin);">
+ <FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option>
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index 5132b85c64..4cc859227f 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :contentMax="900">
<div class="_gaps">
- <div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+ <div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.instance }}</template>
<option value="combined">{{ i18n.ts.all }}</option>
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
</div>
- <div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+ <div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>User ID</template>
</MkInput>
diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index ddbd293c3a..1e144394fb 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<div>
- <div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+ <div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<div style="flex: 1;">{{ i18n.ts.moderator }}: <MkA :to="`/admin/user/${log.userId}`" class="_link">@{{ log.user?.username }}</MkA></div>
<div style="flex: 1;">{{ i18n.ts.dateAndTime }}: <MkTime :time="log.createdAt" mode="detail"/></div>
</div>
diff --git a/packages/frontend/src/pages/admin/modlog.vue b/packages/frontend/src/pages/admin/modlog.vue
index 38610e7e92..c9eaf07531 100644
--- a/packages/frontend/src/pages/admin/modlog.vue
+++ b/packages/frontend/src/pages/admin/modlog.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="900">
<div>
- <div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+ <div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="type" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.type }}</template>
<option :value="null">{{ i18n.ts.all }}</option>
@@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkInput>
</div>
- <MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--margin);">
- <MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--margin: 8px;">
+ <MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--MI-margin);">
+ <MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--MI-margin: 8px;">
<XModLog :key="item.id" :log="item"/>
</MkDateSeparatedList>
</MkPagination>
diff --git a/packages/frontend/src/pages/admin/object-storage.vue b/packages/frontend/src/pages/admin/object-storage.vue
index 5fddb715cd..d5a664934c 100644
--- a/packages/frontend/src/pages/admin/object-storage.vue
+++ b/packages/frontend/src/pages/admin/object-storage.vue
@@ -157,7 +157,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
- -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));
}
</style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.vue b/packages/frontend/src/pages/admin/overview.queue.vue
index 98d1b8d7f6..de6b254412 100644
--- a/packages/frontend/src/pages/admin/overview.queue.vue
+++ b/packages/frontend/src/pages/admin/overview.queue.vue
@@ -120,7 +120,7 @@ onUnmounted(() => {
min-width: 0;
padding: 16px;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
> .title {
font-size: 0.85em;
diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue
index 700865c91c..7c171ba0e1 100644
--- a/packages/frontend/src/pages/admin/queue.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@@ -136,7 +136,7 @@ onUnmounted(() => {
min-width: 0;
padding: 16px;
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.chartTitle {
diff --git a/packages/frontend/src/pages/admin/roles.edit.vue b/packages/frontend/src/pages/admin/roles.edit.vue
index 60f06d50ba..2b4006c3f7 100644
--- a/packages/frontend/src/pages/admin/roles.edit.vue
+++ b/packages/frontend/src/pages/admin/roles.edit.vue
@@ -95,7 +95,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
- -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));
}
</style>
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 167f402931..a01bafd996 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -97,26 +97,26 @@ definePageMetadata(() => ({
<style lang="scss" module>
.new {
position: sticky;
- top: calc(var(--stickyTop, 0px) + 16px);
+ top: calc(var(--MI-stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px) 0;
&:first-child {
- margin-top: calc(-0.675em - 8px - var(--margin));
+ margin-top: calc(-0.675em - 8px - var(--MI-margin));
}
}
.newButton {
display: block;
- margin: var(--margin) auto 0 auto;
+ margin: var(--MI-margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
.tl {
background: var(--MI_THEME-bg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
</style>
diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index b377314856..b97e7c0eea 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -124,7 +124,7 @@ definePageMetadata(() => ({
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
- gap: var(--margin);
+ gap: var(--MI-margin);
}
.preview {
@@ -132,7 +132,7 @@ definePageMetadata(() => ({
place-items: center;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
- gap: var(--margin);
+ gap: var(--MI-margin);
}
.previewItem {
@@ -142,7 +142,7 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
justify-content: center;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
&.light {
background: #eee;
@@ -157,7 +157,7 @@ definePageMetadata(() => ({
.editorWrapper {
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
- gap: calc(var(--margin) * 2);
+ gap: calc(var(--MI-margin) * 2);
}
.preview {
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index c8b04ca350..b61054118d 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -269,12 +269,12 @@ definePageMetadata(() => ({
<style lang="scss" module>
.main {
- min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+ min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.footer {
- -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));
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
}
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 6d0b3d8d2e..1e416e22d3 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -317,14 +317,14 @@ definePageMetadata(() => ({
.ogwlenmc {
> .local {
.empty {
- margin: var(--margin);
+ margin: var(--MI-margin);
}
.ldhfsamy {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
- margin: var(--margin) 0;
+ margin: var(--MI-margin) 0;
> .emoji {
display: flex;
@@ -369,14 +369,14 @@ definePageMetadata(() => ({
> .remote {
.empty {
- margin: var(--margin);
+ margin: var(--MI-margin);
}
.ldhfsamy {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
- margin: var(--margin) 0;
+ margin: var(--MI-margin) 0;
> .emoji {
display: flex;
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 98fa99e2a3..dfcc82c77b 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -232,7 +232,7 @@ onMounted(async () => {
.filePreviewRoot {
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
// MkMediaList 内の上部マージン 4px
padding: calc(1rem - 4px) 1rem 1rem;
}
@@ -285,7 +285,7 @@ onMounted(async () => {
align-items: center;
min-width: 0;
font-weight: 700;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
font-size: .8rem;
>.fileNameEditIcon {
@@ -322,7 +322,7 @@ onMounted(async () => {
display: block;
width: 100%;
padding: .5rem 1rem;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
.kvEditIcon {
display: inline-block;
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index bd798d9f3a..969aa6bbf7 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -245,7 +245,7 @@ async function del() {
padding: 12px;
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));
+ -webkit-backdrop-filter: var(--MI-blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
}
</style>
diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue
index cfdb235d3a..8b16a88ff3 100644
--- a/packages/frontend/src/pages/explore.featured.vue
+++ b/packages/frontend/src/pages/explore.featured.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkSpacer :contentMax="800">
- <MkTab v-model="tab" style="margin-bottom: var(--margin);">
+ <MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
<option value="notes">{{ i18n.ts.notes }}</option>
<option value="polls">{{ i18n.ts.poll }}</option>
</MkTab>
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index e9608ae94e..c9acfec04f 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkSpacer :contentMax="1200">
- <MkTab v-model="origin" style="margin-bottom: var(--margin);">
+ <MkTab v-model="origin" style="margin-bottom: var(--MI-margin);">
<option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option>
</MkTab>
diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue
index e2765da3e9..6716566101 100644
--- a/packages/frontend/src/pages/favorites.vue
+++ b/packages/frontend/src/pages/favorites.vue
@@ -47,6 +47,6 @@ definePageMetadata(() => ({
<style lang="scss" module>
.note {
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
</style>
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index 87bd707f6d..d84ec4873b 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -467,7 +467,7 @@ definePageMetadata(() => ({
</script>
<style lang="scss" module>
.footer {
- backdrop-filter: var(--blur, blur(15px));
+ backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg);
border-top: solid .5px var(--MI_THEME-divider);
}
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index e0e187f2ce..f396fd2c0c 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -130,6 +130,6 @@ definePageMetadata(() => ({
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
- margin: 0 var(--margin);
+ margin: 0 var(--MI-margin);
}
</style>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index aab4e53454..feb4c60611 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -321,7 +321,7 @@ definePageMetadata(() => ({
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
- margin: var(--margin);
+ margin: var(--MI-margin);
> .post {
diff --git a/packages/frontend/src/pages/install-extensions.vue b/packages/frontend/src/pages/install-extensions.vue
index 30e658d8c0..6d68ed83b4 100644
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@@ -250,7 +250,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.extInstallerRoot {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
background: var(--MI_THEME-panel);
padding: 1.5rem;
}
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index 954246ff93..48bc568ac4 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -108,7 +108,7 @@ definePageMetadata(() => ({
</script>
<style lang="scss" module>
.main {
- min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+ min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.userItem {
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index a78f4bb539..804a5ae8f8 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -199,7 +199,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.main {
- min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+ min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.userItem {
@@ -234,8 +234,8 @@ definePageMetadata(() => ({
}
.footer {
- -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));
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index d2e7559109..448244204d 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -170,11 +170,11 @@ definePageMetadata(() => ({
}
.loadNext {
- margin-bottom: var(--margin);
+ margin-bottom: var(--MI-margin);
}
.loadPrev {
- margin-top: var(--margin);
+ margin-top: var(--MI-margin);
}
.loadButton {
@@ -182,7 +182,7 @@ definePageMetadata(() => ({
}
.note {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
background: var(--MI_THEME-panel);
}
</style>
diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue
index bd93fc8369..46ee501c76 100644
--- a/packages/frontend/src/pages/notifications.vue
+++ b/packages/frontend/src/pages/notifications.vue
@@ -102,7 +102,7 @@ definePageMetadata(() => ({
<style module lang="scss">
.notifications {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
</style>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 73fe938e9c..a1bec52f18 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -365,7 +365,7 @@ definePageMetadata(() => ({
}
.pageMain {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
padding: 2rem;
background: var(--MI_THEME-panel);
box-sizing: border-box;
@@ -374,7 +374,7 @@ definePageMetadata(() => ({
.pageBanner {
width: calc(100% + 4rem);
margin: -2rem -2rem 1.5rem;
- border-radius: var(--radius) var(--radius) 0 0;
+ border-radius: var(--MI-radius) var(--MI-radius) 0 0;
overflow: hidden;
position: relative;
@@ -458,7 +458,7 @@ definePageMetadata(() => ({
flex-shrink: 0;
display: flex;
align-items: center;
- gap: var(--marginHalf);
+ gap: var(--MI-marginHalf);
margin-left: auto;
}
}
@@ -479,7 +479,7 @@ definePageMetadata(() => ({
> .other {
margin-left: auto;
display: flex;
- gap: var(--marginHalf);
+ gap: var(--MI-marginHalf);
}
}
@@ -526,11 +526,11 @@ definePageMetadata(() => ({
display: flex;
align-items: center;
flex-wrap: wrap;
- gap: var(--marginHalf);
+ gap: var(--MI-marginHalf);
}
.relatedPagesRoot {
- padding: var(--margin);
+ padding: var(--MI-margin);
}
.relatedPagesItem > article {
diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue
index f24614f2eb..dfb6e3f53e 100644
--- a/packages/frontend/src/pages/reversi/game.setting.vue
+++ b/packages/frontend/src/pages/reversi/game.setting.vue
@@ -290,8 +290,8 @@ onUnmounted(() => {
}
.footer {
- -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));
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
}
diff --git a/packages/frontend/src/pages/reversi/index.vue b/packages/frontend/src/pages/reversi/index.vue
index 91616d3a50..d608a2411c 100644
--- a/packages/frontend/src/pages/reversi/index.vue
+++ b/packages/frontend/src/pages/reversi/index.vue
@@ -285,7 +285,7 @@ definePageMetadata(() => ({
.gamePreviews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
- grid-gap: var(--margin);
+ grid-gap: var(--MI-margin);
}
.gamePreview {
diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
index 280a8d0d44..2250e1ce60 100644
--- a/packages/frontend/src/pages/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -204,7 +204,7 @@ definePageMetadata(() => ({
.root {
display: flex;
flex-direction: column;
- gap: var(--margin);
+ gap: var(--MI-margin);
}
.editor {
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
index 7f1c6fd401..853e536ea3 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
@@ -151,7 +151,7 @@ async function detach() {
left: 0;
padding: 12px;
border-top: solid 0.5px var(--MI_THEME-divider);
- -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));
}
</style>
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue
index 77229d3349..9fca306f9f 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.vue
@@ -145,7 +145,7 @@ definePageMetadata(() => ({
.current {
padding: 16px;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.decorations {
diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue
index 427cdbe64e..fd3581d114 100644
--- a/packages/frontend/src/pages/settings/emoji-picker.vue
+++ b/packages/frontend/src/pages/settings/emoji-picker.vue
@@ -248,8 +248,8 @@ definePageMetadata(() => ({
<style lang="scss" module>
.tab {
- margin: calc(var(--margin) / 2) 0;
- padding: calc(var(--margin) / 2) 0;
+ margin: calc(var(--MI-margin) / 2) 0;
+ padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index 80d04ec686..7388e014ed 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -445,7 +445,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.buttons {
display: flex;
- gap: var(--margin);
+ gap: var(--MI-margin);
flex-wrap: wrap;
}
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 73cc075082..f1ec231588 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -412,7 +412,7 @@ definePageMetadata(() => ({
.rsljpzjq {
> .selects {
display: flex;
- gap: 1.5em var(--margin);
+ gap: 1.5em var(--MI-margin);
flex-wrap: wrap;
> .select {
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index ab8502c1e6..14fb96d4f1 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -71,7 +71,7 @@ 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;
diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue
index 3e6d4db03d..b669e25179 100644
--- a/packages/frontend/src/pages/tag.vue
+++ b/packages/frontend/src/pages/tag.vue
@@ -76,8 +76,8 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
- -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));
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
display: flex;
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index f913060096..4feba54104 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -9,10 +9,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
<div :key="src" ref="rootEl">
- <MkInfo v-if="isBasicTimeline(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
+ <MkInfo v-if="isBasicTimeline(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
{{ i18n.ts._timelineDescription[src] }}
</MkInfo>
- <MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
+ <MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--MI-margin);"/>
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div :class="$style.tl">
<MkTimeline
@@ -345,30 +345,30 @@ definePageMetadata(() => ({
<style lang="scss" module>
.new {
position: sticky;
- top: calc(var(--stickyTop, 0px) + 16px);
+ top: calc(var(--MI-stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px) 0;
&:first-child {
- margin-top: calc(-0.675em - 8px - var(--margin));
+ margin-top: calc(-0.675em - 8px - var(--MI-margin));
}
}
.newButton {
display: block;
- margin: var(--margin) auto 0 auto;
+ margin: var(--MI-margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
.postForm {
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
.tl {
background: var(--MI_THEME-bg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
</style>
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index a05743a5a1..3efeb46c0a 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -79,26 +79,26 @@ definePageMetadata(() => ({
<style lang="scss" module>
.new {
position: sticky;
- top: calc(var(--stickyTop, 0px) + 16px);
+ top: calc(var(--MI-stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
margin: calc(-0.675em - 8px) 0;
&:first-child {
- margin-top: calc(-0.675em - 8px - var(--margin));
+ margin-top: calc(-0.675em - 8px - var(--MI-margin));
}
}
.newButton {
display: block;
- margin: var(--margin) auto 0 auto;
+ margin: var(--MI-margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
.tl {
background: var(--MI_THEME-bg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
</style>
diff --git a/packages/frontend/src/pages/user/follow-list.vue b/packages/frontend/src/pages/user/follow-list.vue
index e60dccec17..868767e8f4 100644
--- a/packages/frontend/src/pages/user/follow-list.vue
+++ b/packages/frontend/src/pages/user/follow-list.vue
@@ -45,6 +45,6 @@ const followersPagination = {
.users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
- grid-gap: var(--margin);
+ grid-gap: var(--MI-margin);
}
</style>
diff --git a/packages/frontend/src/pages/user/gallery.vue b/packages/frontend/src/pages/user/gallery.vue
index 9ba81322ba..0bc5628528 100644
--- a/packages/frontend/src/pages/user/gallery.vue
+++ b/packages/frontend/src/pages/user/gallery.vue
@@ -38,6 +38,6 @@ const pagination = {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
- margin: var(--margin);
+ margin: var(--MI-margin);
}
</style>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index f0f8724c67..00b5740639 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -377,8 +377,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;
@@ -432,8 +432,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%;
@@ -616,7 +616,7 @@ onUnmounted(() => {
> .contents {
> .content {
- margin-bottom: var(--margin);
+ margin-bottom: var(--MI-margin);
}
}
}
@@ -633,7 +633,7 @@ onUnmounted(() => {
> .sub {
max-width: 350px;
min-width: 350px;
- margin-left: var(--margin);
+ margin-left: var(--MI-margin);
}
}
}
@@ -711,7 +711,7 @@ onUnmounted(() => {
<style lang="scss" module>
.tl {
background: var(--MI_THEME-bg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 6339c54ddf..49d015a530 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -51,13 +51,13 @@ const pagination = computed(() => tab.value === 'featured' ? {
<style lang="scss" module>
.tab {
- padding: calc(var(--margin) / 2) 0;
+ padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.tl {
background: var(--MI_THEME-bg);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
</style>
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index 8e1f9a4a2c..f0e4a852c9 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -165,8 +165,8 @@ misskeyApiGet('federation/instances', {
right: 0;
margin: auto;
background: var(--MI_THEME-acrylicPanel);
- -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));
border-radius: 999px;
overflow: clip;
width: 800px;
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 6174bcd820..33cc139a45 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -99,7 +99,7 @@ function submit() {
.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;
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index 732d483615..9be3a80a9e 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/style.scss b/packages/frontend/src/style.scss
index 424cc02d0e..cfc988bd58 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -7,20 +7,20 @@
*/
: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%);
@media (max-width: 500px) {
- --margin: var(--marginHalf);
+ --MI-margin: var(--MI-marginHalf);
}
}
@@ -130,7 +130,7 @@ optgroup, option {
}
hr {
- margin: var(--margin) 0 var(--margin) 0;
+ margin: var(--MI-margin) 0 var(--MI-margin) 0;
border: none;
height: 1px;
background: var(--MI_THEME-divider);
@@ -210,8 +210,8 @@ rt {
width: 100%;
height: 100%;
background: var(--MI_THEME-modalBg);
- -webkit-backdrop-filter: var(--modalBgFilter);
- backdrop-filter: var(--modalBgFilter);
+ -webkit-backdrop-filter: var(--MI-modalBgFilter);
+ backdrop-filter: var(--MI-modalBgFilter);
}
._shadow {
@@ -290,12 +290,12 @@ rt {
._panel {
background: var(--MI_THEME-panel);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
overflow: clip;
}
._margin {
- margin: var(--margin) 0;
+ margin: var(--MI-margin) 0;
}
._gaps_m {
@@ -313,7 +313,7 @@ rt {
._gaps {
display: flex;
flex-direction: column;
- gap: var(--margin);
+ gap: var(--MI-margin);
}
._buttons {
@@ -336,7 +336,7 @@ rt {
box-sizing: border-box;
text-align: center;
border: solid 0.5px var(--MI_THEME-divider);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
&:active {
border-color: var(--MI_THEME-accent);
@@ -345,14 +345,14 @@ rt {
._popup {
background: var(--MI_THEME-popup);
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
contain: content;
}
._acrylic {
background: var(--MI_THEME-acrylicPanel);
- -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));
}
._formLinksGrid {
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index e3c0f1f4ce..d145b9b6c6 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -116,27 +116,27 @@ if ($i) {
.notifications {
position: fixed;
z-index: 3900000;
- padding: 0 var(--margin);
+ padding: 0 var(--MI-margin);
pointer-events: none;
display: flex;
&.notificationsPosition_leftTop {
- top: var(--margin);
+ top: var(--MI-margin);
left: 0;
}
&.notificationsPosition_rightTop {
- top: var(--margin);
+ top: var(--MI-margin);
right: 0;
}
&.notificationsPosition_leftBottom {
- bottom: calc(var(--minBottomSpacing) + var(--margin));
+ bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
left: 0;
}
&.notificationsPosition_rightBottom {
- bottom: calc(var(--minBottomSpacing) + var(--margin));
+ bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
right: 0;
}
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index a71f57670d..9acf7b2ede 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -94,8 +94,8 @@ function more() {
z-index: 1;
padding: 20px 0;
background: var(--nav-bg-transparent);
- -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));
}
.banner {
@@ -128,8 +128,8 @@ function more() {
bottom: 0;
padding: 20px 0;
background: var(--nav-bg-transparent);
- -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));
}
.post {
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 4d01330432..cbfdaac235 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -146,8 +146,8 @@ function more(ev: MouseEvent) {
z-index: 1;
padding: 20px 0;
background: var(--nav-bg-transparent);
- -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));
}
.banner {
@@ -189,8 +189,8 @@ function more(ev: MouseEvent) {
bottom: 0;
padding-top: 20px;
background: var(--nav-bg-transparent);
- -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));
}
.post {
@@ -380,8 +380,8 @@ function more(ev: MouseEvent) {
z-index: 1;
padding: 20px 0;
background: var(--nav-bg-transparent);
- -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));
}
.instance {
@@ -410,8 +410,8 @@ function more(ev: MouseEvent) {
bottom: 0;
padding-top: 20px;
background: var(--nav-bg-transparent);
- -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));
}
.post {
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
index ad93b7e61c..cc62a28b14 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -48,8 +48,8 @@ onUnmounted(() => {
.root {
position: fixed;
z-index: v-bind(zIndex);
- bottom: calc(var(--minBottomSpacing) + var(--margin));
- right: var(--margin);
+ bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
+ right: var(--MI-margin);
margin: 0;
padding: 12px;
font-size: 0.9em;
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 9715e1ba18..5ea9bf7068 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
<XSidebar/>
</div>
<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
- <XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
+ <XWidgets place="left" :marginTop="'var(--MI-margin)'" @mounted="attachSticky(widgetsLeft)"/>
</div>
<main class="main" @contextmenu.stop="onContextmenu">
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</main>
<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
- <XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
+ <XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--MI-margin)'" @mounted="attachSticky(widgetsRight)"/>
</div>
</div>
@@ -217,7 +217,7 @@ onMounted(() => {
&.wallpaper {
background: var(--MI_THEME-wallpaperOverlay);
- //backdrop-filter: var(--blur, blur(4px));
+ //backdrop-filter: var(--MI-blur, blur(4px));
}
> .columns {
@@ -253,13 +253,13 @@ onMounted(() => {
border-right: solid 1px var(--MI_THEME-divider);
border-radius: 0;
overflow: clip;
- --margin: 12px;
+ --MI-margin: 12px;
}
> .widgets {
//--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;
@@ -278,12 +278,12 @@ onMounted(() => {
> .main {
margin-top: 0;
border: solid 1px var(--MI_THEME-divider);
- border-radius: var(--radius);
- --stickyTop: var(--globalHeaderHeight);
+ border-radius: var(--MI-radius);
+ --MI-stickyTop: var(--globalHeaderHeight);
}
> .widgets {
- --stickyTop: var(--globalHeaderHeight);
+ --MI-stickyTop: var(--globalHeaderHeight);
margin-top: 0;
}
}
@@ -314,7 +314,7 @@ 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(--MI_THEME-bg);
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 623a109e88..36ffca8264 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -305,7 +305,7 @@ body {
.root {
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
- --margin: var(--marginHalf);
+ --MI-margin: var(--MI-marginHalf);
--columnGap: 6px;
@@ -428,8 +428,8 @@ body {
grid-gap: 8px;
width: 100%;
box-sizing: border-box;
- -webkit-backdrop-filter: var(--blur, blur(32px));
- backdrop-filter: var(--blur, blur(32px));
+ -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);
}
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 4aaaea0fd9..da0bf24a56 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -332,8 +332,8 @@ function onDrop(ev) {
&.naked {
background: var(--MI_THEME-acrylicBg) !important;
- -webkit-backdrop-filter: var(--blur, blur(10px));
- backdrop-filter: var(--blur, blur(10px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(10px));
+ backdrop-filter: var(--MI-blur, blur(10px));
> .header {
background: transparent;
diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue
index da12570ae2..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 = [{
<style lang="scss" module>
.root {
- --margin: 8px;
+ --MI-margin: 8px;
--MI_THEME-panelBorder: none;
- padding: 0 var(--margin);
+ padding: 0 var(--MI-margin);
}
.intro {
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 73c4e7c195..9fc8bd102d 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -225,12 +225,12 @@ provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
watch(navFooter, () => {
if (navFooter.value) {
navFooterHeight.value = navFooter.value.offsetHeight;
- document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
- document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
+ document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
+ document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
} else {
navFooterHeight.value = 0;
- document.body.style.setProperty('--stickyBottom', '0px');
- document.body.style.setProperty('--minBottomSpacing', '0px');
+ document.body.style.setProperty('--MI-stickyBottom', '0px');
+ document.body.style.setProperty('--MI-minBottomSpacing', '0px');
}
}, {
immediate: true,
@@ -336,7 +336,7 @@ $widgets-hide-threshold: 1090px;
height: 100%;
box-sizing: border-box;
overflow: auto;
- 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));
border-left: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-bg);
@@ -370,7 +370,7 @@ $widgets-hide-threshold: 1090px;
z-index: 1001;
width: 310px;
height: 100dvh;
- padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important;
+ padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box;
overflow: auto;
overscroll-behavior: contain;
@@ -400,8 +400,8 @@ $widgets-hide-threshold: 1090px;
grid-gap: 8px;
width: 100%;
box-sizing: border-box;
- -webkit-backdrop-filter: var(--blur, blur(24px));
- backdrop-filter: var(--blur, blur(24px));
+ -webkit-backdrop-filter: var(--MI-blur, blur(24px));
+ backdrop-filter: var(--MI-blur, blur(24px));
background-color: var(--MI_THEME-header);
border-top: solid 0.5px var(--MI_THEME-divider);
}
@@ -484,6 +484,6 @@ $widgets-hide-threshold: 1090px;
}
.spacer {
- height: calc(var(--minBottomSpacing));
+ height: calc(var(--MI-minBottomSpacing));
}
</style>
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 93d57b647e..1f73b5fcaf 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -63,12 +63,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;
}
@@ -83,7 +83,7 @@ document.documentElement.style.overflowY = 'scroll';
border-radius: 100%;
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
- right: var(--margin);
- bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
+ right: var(--MI-margin);
+ bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
}
</style>
diff --git a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
index bcfaaf00ab..c2bda85ac7 100644
--- a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
+++ b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
@@ -115,7 +115,7 @@ defineExpose<WidgetComponentExpose>({
<style lang="scss" module>
.bdayFRoot {
overflow: hidden;
- min-height: calc(calc(calc(50px * 3) - 8px) + calc(var(--margin) * 2));
+ min-height: calc(calc(calc(50px * 3) - 8px) + calc(var(--MI-margin) * 2));
}
.bdayFGrid {
display: grid;
@@ -123,7 +123,7 @@ defineExpose<WidgetComponentExpose>({
grid-template-rows: repeat(3, 42px);
place-content: center;
gap: 8px;
- margin: var(--margin) auto;
+ margin: var(--MI-margin) auto;
}
.bdayFFallback {
@@ -139,6 +139,6 @@ defineExpose<WidgetComponentExpose>({
width: auto;
max-width: 90%;
margin-bottom: 8px;
- border-radius: var(--radius);
+ border-radius: var(--MI-radius);
}
</style>