From 4a356f1ba742ae3965d01ad17179d3af4846377a Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Wed, 9 Oct 2024 18:08:14 +0900 Subject: refactor(frontend): prefix css variables (#14725) * wip * Update index.d.ts * remove unnecessary codes --- packages/frontend/src/components/MkTutorialDialog.Note.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/frontend/src/components/MkTutorialDialog.Note.vue') diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue index 2a26d22dc2..5644907434 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Note.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue @@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts._initialTutorial._reaction.description }}
{{ i18n.ts._initialTutorial._reaction.letsTryReacting }}
-
{{ i18n.ts._initialTutorial.wellDone }} {{ i18n.ts._initialTutorial._reaction.reactNotification }}
{{ i18n.ts._initialTutorial._reaction.reactDone }}
+
{{ i18n.ts._initialTutorial.wellDone }} {{ i18n.ts._initialTutorial._reaction.reactNotification }}
{{ i18n.ts._initialTutorial._reaction.reactDone }}
@@ -106,12 +106,12 @@ function removeReaction(emoji) { -- cgit v1.2.3-freya From b668d161a9a0a2f73c487f3fa6d54fd7597635a5 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:12:16 +0900 Subject: refactor(frontend): prefix css variables (UI) (#14739) * refactor(frontend): prefix css variables * `MI_UI` -> `MI` * fix * `stickyBottom` * stickyTop --- .../src/components/EmMediaBanner.vue | 4 +-- .../frontend-embed/src/components/EmMediaVideo.vue | 4 +-- packages/frontend-embed/src/components/EmNote.vue | 10 +++---- .../src/components/EmNoteDetailed.vue | 2 +- .../frontend-embed/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 +- .../frontend-embed/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 ++-- .../frontend/src/components/MkAccountMoved.vue | 2 +- .../src/components/MkAnnouncementDialog.vue | 2 +- packages/frontend/src/components/MkChart.vue | 4 +-- packages/frontend/src/components/MkContainer.vue | 4 +-- .../frontend/src/components/MkCropperDialog.vue | 4 +-- .../src/components/MkCustomEmojiDetailedDialog.vue | 4 +-- .../src/components/MkDateSeparatedList.vue | 2 +- packages/frontend/src/components/MkDonation.vue | 4 +-- packages/frontend/src/components/MkDrive.vue | 2 +- .../src/components/MkExtensionInstaller.vue | 2 +- .../frontend/src/components/MkFoldableSection.vue | 6 ++-- packages/frontend/src/components/MkFolder.vue | 10 +++---- packages/frontend/src/components/MkFukidashi.vue | 2 +- packages/frontend/src/components/MkInfo.vue | 2 +- .../frontend/src/components/MkInstanceStats.vue | 2 +- packages/frontend/src/components/MkMediaAudio.vue | 4 +-- packages/frontend/src/components/MkMediaImage.vue | 4 +-- packages/frontend/src/components/MkMediaList.vue | 6 ++-- packages/frontend/src/components/MkMediaVideo.vue | 2 +- packages/frontend/src/components/MkModalWindow.vue | 6 ++-- packages/frontend/src/components/MkNote.vue | 10 +++---- .../frontend/src/components/MkNoteDetailed.vue | 4 +-- packages/frontend/src/components/MkNoteSimple.vue | 2 +- packages/frontend/src/components/MkNotes.vue | 2 +- packages/frontend/src/components/MkOmit.vue | 2 +- packages/frontend/src/components/MkPagePreview.vue | 8 ++--- packages/frontend/src/components/MkPageWindow.vue | 2 +- .../frontend/src/components/MkRemoteCaution.vue | 2 +- .../frontend/src/components/MkSigninDialog.vue | 4 +-- .../src/components/MkSignupDialog.rules.vue | 2 +- .../src/components/MkSourceCodeAvailablePopup.vue | 4 +-- .../frontend/src/components/MkSubNoteContent.vue | 2 +- .../src/components/MkSystemWebhookEditor.vue | 4 +-- packages/frontend/src/components/MkTextarea.vue | 2 +- .../src/components/MkTokenGenerateWindow.vue | 2 +- .../src/components/MkTutorialDialog.Note.vue | 2 +- .../src/components/MkTutorialDialog.PostNote.vue | 2 +- .../src/components/MkTutorialDialog.Sensitive.vue | 2 +- .../src/components/MkTutorialDialog.Timeline.vue | 2 +- packages/frontend/src/components/MkUpdated.vue | 2 +- .../components/MkUserAnnouncementEditDialog.vue | 4 +-- packages/frontend/src/components/MkUserList.vue | 2 +- .../src/components/MkUserSetupDialog.Follow.vue | 2 +- .../frontend/src/components/MkVisitorDashboard.vue | 2 +- .../frontend/src/components/MkWaitingDialog.vue | 2 +- packages/frontend/src/components/MkWidgets.vue | 4 +-- packages/frontend/src/components/MkWindow.vue | 6 ++-- .../src/components/global/MkPageHeader.vue | 6 ++-- .../src/components/global/MkStickyContainer.vue | 8 ++--- .../frontend/src/components/page/page.dynamic.vue | 4 +-- .../frontend/src/components/page/page.image.vue | 2 +- .../frontend/src/components/page/page.note.vue | 2 +- packages/frontend/src/pages/about-misskey.vue | 2 +- packages/frontend/src/pages/about.federation.vue | 2 +- packages/frontend/src/pages/about.overview.vue | 2 +- .../src/pages/admin/RolesEditorFormula.vue | 2 +- packages/frontend/src/pages/admin/_header_.vue | 4 +-- .../abuse-report/notification-recipient.editor.vue | 4 +-- packages/frontend/src/pages/admin/ads.vue | 2 +- packages/frontend/src/pages/admin/branding.vue | 4 +-- .../frontend/src/pages/admin/email-settings.vue | 4 +-- packages/frontend/src/pages/admin/federation.vue | 2 +- packages/frontend/src/pages/admin/files.vue | 4 +-- .../frontend/src/pages/admin/modlog.ModLog.vue | 2 +- packages/frontend/src/pages/admin/modlog.vue | 6 ++-- .../frontend/src/pages/admin/object-storage.vue | 4 +-- .../frontend/src/pages/admin/overview.queue.vue | 2 +- packages/frontend/src/pages/admin/queue.chart.vue | 2 +- packages/frontend/src/pages/admin/roles.edit.vue | 4 +-- packages/frontend/src/pages/antenna-timeline.vue | 8 ++--- packages/frontend/src/pages/avatar-decorations.vue | 8 ++--- packages/frontend/src/pages/channel.vue | 6 ++-- .../frontend/src/pages/custom-emojis-manager.vue | 8 ++--- packages/frontend/src/pages/drive.file.info.vue | 6 ++-- packages/frontend/src/pages/emoji-edit-dialog.vue | 4 +-- packages/frontend/src/pages/explore.featured.vue | 2 +- packages/frontend/src/pages/explore.users.vue | 2 +- packages/frontend/src/pages/favorites.vue | 2 +- packages/frontend/src/pages/flash/flash-edit.vue | 2 +- packages/frontend/src/pages/gallery/index.vue | 2 +- packages/frontend/src/pages/gallery/post.vue | 2 +- packages/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 ++++---- .../frontend/src/pages/reversi/game.setting.vue | 4 +-- packages/frontend/src/pages/reversi/index.vue | 2 +- packages/frontend/src/pages/scratchpad.vue | 2 +- .../pages/settings/avatar-decoration.dialog.vue | 4 +-- .../src/pages/settings/avatar-decoration.vue | 2 +- .../frontend/src/pages/settings/emoji-picker.vue | 4 +-- .../src/pages/settings/preferences-backups.vue | 2 +- packages/frontend/src/pages/settings/theme.vue | 2 +- packages/frontend/src/pages/signup-complete.vue | 2 +- packages/frontend/src/pages/tag.vue | 4 +-- packages/frontend/src/pages/timeline.vue | 14 ++++----- packages/frontend/src/pages/user-list-timeline.vue | 8 ++--- packages/frontend/src/pages/user/follow-list.vue | 2 +- packages/frontend/src/pages/user/gallery.vue | 2 +- packages/frontend/src/pages/user/home.vue | 14 ++++----- .../frontend/src/pages/user/index.timeline.vue | 4 +-- packages/frontend/src/pages/welcome.entrance.a.vue | 4 +-- packages/frontend/src/pages/welcome.setup.vue | 2 +- packages/frontend/src/pages/welcome.timeline.vue | 4 +-- packages/frontend/src/style.scss | 34 +++++++++++----------- packages/frontend/src/ui/_common_/common.vue | 10 +++---- .../frontend/src/ui/_common_/navbar-for-mobile.vue | 8 ++--- packages/frontend/src/ui/_common_/navbar.vue | 16 +++++----- .../frontend/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 +-- packages/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(-) (limited to 'packages/frontend/src/components/MkTutorialDialog.Note.vue') 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) { }); 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); } 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<{ @@ -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); } 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) { 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); } 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; } 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
-
+
{{ i18n.ts.moderator }}: @{{ log.user?.username }}
{{ i18n.ts.dateAndTime }}:
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
-
+
@@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
- - + + 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(() => ({ 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(() => ({ 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(() => ({ 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(() => ({ 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