diff options
| author | dakkar <dakkar@thenautilus.net> | 2024-11-08 17:18:29 +0000 |
|---|---|---|
| committer | dakkar <dakkar@thenautilus.net> | 2024-11-08 17:33:04 +0000 |
| commit | a930fd9758c6efaf1cc1da7b3e365ba590a5d298 (patch) | |
| tree | 05e5ebd401230c81d4616eed7341038d693762e3 | |
| parent | probably re-enable friendlycaptcha on signin (diff) | |
| download | sharkey-a930fd9758c6efaf1cc1da7b3e365ba590a5d298.tar.gz sharkey-a930fd9758c6efaf1cc1da7b3e365ba590a5d298.tar.bz2 sharkey-a930fd9758c6efaf1cc1da7b3e365ba590a5d298.zip | |
probably fix most renamed CSS variables
147 files changed, 399 insertions, 400 deletions
diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue index ab7bafc47a..087ad51fe3 100644 --- a/packages/frontend/src/components/MkAchievements.vue +++ b/packages/frontend/src/components/MkAchievements.vue @@ -121,10 +121,10 @@ onMounted(() => { .iconFrame { position: relative; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); padding: 6px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); box-sizing: border-box; pointer-events: none; user-select: none; @@ -191,7 +191,7 @@ onMounted(() => { position: relative; width: 100%; height: 100%; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); box-shadow: 0 1px 0px #ffffff88 inset; } diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue index 13680e7d9c..c28dbc7ffa 100644 --- a/packages/frontend/src/components/MkAsUi.vue +++ b/packages/frontend/src/components/MkAsUi.vue @@ -166,6 +166,6 @@ function openPostForm() { .postForm { background: var(--MI_THEME-bg); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } </style> diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue index ef6b8c69e5..a0cd066c06 100644 --- a/packages/frontend/src/components/MkAutocomplete.vue +++ b/packages/frontend/src/components/MkAutocomplete.vue @@ -427,7 +427,7 @@ onBeforeUnmount(() => { max-width: 28px; max-height: 28px; margin: 0 8px 0 0; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } .userName { diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index 6427f9b58a..a6e5651d63 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -130,7 +130,7 @@ function onMousedown(evt: MouseEvent): void { box-shadow: none; text-decoration: none; background: var(--MI_THEME-buttonBg); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); overflow: clip; box-sizing: border-box; transition: background 0.1s ease; @@ -162,7 +162,7 @@ function onMousedown(evt: MouseEvent): void { } &.rounded { - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } &.primary { @@ -272,7 +272,7 @@ function onMousedown(evt: MouseEvent): void { left: 0; width: 100%; height: 100%; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; pointer-events: none; } @@ -281,7 +281,7 @@ function onMousedown(evt: MouseEvent): void { position: absolute; width: 2px; height: 2px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); background: rgba(0, 0, 0, 0.1); opacity: 1; transform: scale(1); diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue index 99922ffbc8..7aa916134f 100644 --- a/packages/frontend/src/components/MkChannelFollowButton.vue +++ b/packages/frontend/src/components/MkChannelFollowButton.vue @@ -74,7 +74,7 @@ async function onClick() { padding: 0; height: 31px; font-size: 16px; - border-radius: var(--radius-xl); + border-radius: var(--MI-radius-xl); background: #fff; &.full { diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue index a25c596975..a63006dfe4 100644 --- a/packages/frontend/src/components/MkChannelPreview.vue +++ b/packages/frontend/src/components/MkChannelPreview.vue @@ -138,7 +138,7 @@ const bannerStyle = computed(() => { padding: 8px 12px; font-size: 80%; background: rgba(0, 0, 0, 0.7); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); color: #fff; } @@ -149,7 +149,7 @@ const bannerStyle = computed(() => { left: 16px; background: rgba(0, 0, 0, 0.7); color: var(--MI_THEME-warn); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); font-weight: bold; font-size: 1em; padding: 4px 7px; @@ -215,7 +215,7 @@ const bannerStyle = computed(() => { transform: translate(25%, -25%); background-color: var(--MI_THEME-accent); border: solid var(--MI_THEME-bg) 4px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); width: 1.5rem; height: 1.5rem; aspect-ratio: 1 / 1; diff --git a/packages/frontend/src/components/MkChartLegend.vue b/packages/frontend/src/components/MkChartLegend.vue index 1e402a617c..e28d6ad6ba 100644 --- a/packages/frontend/src/components/MkChartLegend.vue +++ b/packages/frontend/src/components/MkChartLegend.vue @@ -54,7 +54,7 @@ defineExpose({ font-size: 85%; padding: 4px 12px 4px 8px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); &:hover { border-color: var(--MI_THEME-inputBorderHover); @@ -69,7 +69,7 @@ defineExpose({ display: inline-block; width: 12px; height: 12px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); vertical-align: -10%; } } diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue index ae80bf33ba..e253b1b55f 100644 --- a/packages/frontend/src/components/MkCode.core.vue +++ b/packages/frontend/src/components/MkCode.core.vue @@ -95,7 +95,7 @@ watch(() => props.lang, (to) => { padding: 1em; margin: .5em 0; overflow: auto; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); border: 1px solid var(--MI_THEME-divider); font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; @@ -140,7 +140,7 @@ watch(() => props.lang, (to) => { & :global(.shiki) { padding: 12px; margin: 0; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); border: none; min-height: 130px; pointer-events: none; diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index b4a04d4cc3..a46b220101 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -75,7 +75,7 @@ function copy() { padding: 1em; margin: .5em 0; overflow: auto; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .codeBlockFallbackCode { @@ -91,7 +91,7 @@ function copy() { cursor: pointer; box-sizing: border-box; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); padding: 24px; margin-top: 4px; color: var(--MI_THEME-fg); diff --git a/packages/frontend/src/components/MkCodeEditor.vue b/packages/frontend/src/components/MkCodeEditor.vue index 1f9bd3e186..49b083815a 100644 --- a/packages/frontend/src/components/MkCodeEditor.vue +++ b/packages/frontend/src/components/MkCodeEditor.vue @@ -158,7 +158,7 @@ watch(v, newValue => { overflow-y: hidden; box-sizing: border-box; margin: 0; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); padding: 0; color: var(--MI_THEME-fg); border: solid 1px var(--MI_THEME-panel); @@ -171,7 +171,7 @@ watch(v, newValue => { .focused.codeEditorRoot { border-color: var(--MI_THEME-accent) !important; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .codeEditorScroller { @@ -199,7 +199,7 @@ watch(v, newValue => { caret-color: var(--MI_THEME-fg); background-color: transparent; border: 0; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); box-sizing: border-box; outline: 0; min-width: calc(100% - 24px); diff --git a/packages/frontend/src/components/MkColorInput.vue b/packages/frontend/src/components/MkColorInput.vue index e83c0bccd4..babf356942 100644 --- a/packages/frontend/src/components/MkColorInput.vue +++ b/packages/frontend/src/components/MkColorInput.vue @@ -101,7 +101,7 @@ const onInput = () => { color: var(--MI_THEME-fg); background: var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); outline: none; box-shadow: none; box-sizing: border-box; diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index 15d41baa7e..55442f8598 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -138,7 +138,7 @@ onUnmounted(() => { position: relative; overflow: clip; contain: content; - background: color-mix(in srgb, var(--panel) 65%, transparent); + background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent); &.naked { background: transparent !important; box-shadow: none !important; @@ -172,7 +172,7 @@ onUnmounted(() => { border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider); z-index: 2; line-height: 1.4em; - background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent); + background: color-mix(in srgb, var(--MI_THEME-panelHeaderBg) 35%, transparent); } .title { @@ -224,7 +224,7 @@ onUnmounted(() => { background: var(--MI_THEME-panel); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index 8fda097df6..46c667768f 100644 --- a/packages/frontend/src/components/MkDateSeparatedList.vue +++ b/packages/frontend/src/components/MkDateSeparatedList.vue @@ -190,7 +190,7 @@ export default defineComponent({ } .date-separated-list-nogap { - border-radius: var(--radius); + border-radius: var(--MI-radius); > * { margin: 0 !important; diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index 5af2816acf..73b3f457d4 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -186,7 +186,7 @@ function onInputKeydown(evt: KeyboardEvent) { box-sizing: border-box; text-align: center; background: var(--MI_THEME-panel); - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } .icon { diff --git a/packages/frontend/src/components/MkDonation.vue b/packages/frontend/src/components/MkDonation.vue index 9f413fc078..43d2002204 100644 --- a/packages/frontend/src/components/MkDonation.vue +++ b/packages/frontend/src/components/MkDonation.vue @@ -83,7 +83,7 @@ function neverShow() { width: calc(100% - (var(--MI-margin) * 2)); max-width: 500px; display: flex; - backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--MI-blur, blur(15px)); } .icon { diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue index f7249f19fb..5dee448329 100644 --- a/packages/frontend/src/components/MkDrive.file.vue +++ b/packages/frontend/src/components/MkDrive.file.vue @@ -112,7 +112,7 @@ function onDragend() { position: relative; padding: 8px 0 0 0; min-height: 180px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); cursor: pointer; &:hover { diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue index a0693c3827..8496890f60 100644 --- a/packages/frontend/src/components/MkDrive.folder.vue +++ b/packages/frontend/src/components/MkDrive.folder.vue @@ -314,7 +314,7 @@ function onContextmenu(ev: MouseEvent) { padding: 8px; height: 64px; background: var(--MI_THEME-driveFolderBg); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); cursor: pointer; &.draghover { @@ -327,7 +327,7 @@ function onContextmenu(ev: MouseEvent) { bottom: -4px; left: -4px; border: 2px dashed var(--MI_THEME-focus); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } } } diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue index 623c4895eb..1079e52030 100644 --- a/packages/frontend/src/components/MkDriveFileThumbnail.vue +++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue @@ -70,7 +70,7 @@ const isThumbnailAvailable = computed(() => { position: relative; display: flex; background: var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue index e2762eb3cb..fac3c045dc 100644 --- a/packages/frontend/src/components/MkEmojiPicker.section.vue +++ b/packages/frontend/src/components/MkEmojiPicker.section.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと --> <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） --> -<section v-if="!hasChildSection" v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);"> +<section v-if="!hasChildSection" v-panel style="border-radius: var(--MI-radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);"> <header class="_acrylic" @click="shown = !shown"> <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ph-smiley-sticker ph-bold ph-lg"></i>:{{ emojis.length }}) </header> @@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </section> <!-- フォルダの中にはカスタム絵文字やフォルダがある --> -<section v-else v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);"> +<section v-else v-panel style="border-radius: var(--MI-radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);"> <header class="_acrylic" @click="shown = !shown"> <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder ti-fw"></i>:{{ customEmojiTree?.length }} <i class="ph-smiley-sticker ph-bold ph-lg ti-fw"></i>:{{ emojis.length }}) </header> diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 667bb832a2..17e989aefa 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -722,7 +722,7 @@ defineExpose({ width: var(--eachSize); height: var(--eachSize); contain: strict; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); font-size: 24px; &:hover { diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 18e80d8445..3178f72498 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -87,7 +87,7 @@ function opening() { <style lang="scss" module> .drawer { - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue index 5bc85a3a83..204bf69f48 100644 --- a/packages/frontend/src/components/MkFileListForAdmin.vue +++ b/packages/frontend/src/components/MkFileListForAdmin.vue @@ -108,7 +108,7 @@ const props = defineProps<{ padding: 2px 4px; background: #ff0000bf; color: #fff; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); font-size: 85%; animation: sensitive-blink 1s infinite; } diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index 3715654b03..4c483c59f0 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -147,7 +147,7 @@ onMounted(() => { background: var(--MI_THEME-folderHeaderBg); -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); transition: border-radius 0.3s; &:hover { @@ -165,7 +165,7 @@ onMounted(() => { } &.opened { - border-radius: var(--radius-sm) var(--radius-sm) 0 0; + border-radius: var(--MI-radius-sm) var(--MI-radius-sm) 0 0; } } @@ -225,7 +225,7 @@ onMounted(() => { .body { background: var(--MI_THEME-panel); - border-radius: 0 0 var(--radius-sm) var(--radius-sm); + border-radius: 0 0 var(--MI-radius-sm) var(--MI-radius-sm); container-type: inline-size; &.bgSame { diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index 3733583192..a02a570180 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -170,7 +170,7 @@ onBeforeUnmount(() => { padding: 0; height: 31px; font-size: 16px; - border-radius: var(--radius-xl); + border-radius: var(--MI-radius-xl); background: #fff; &.full { diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue index ad26030846..6cdab2479e 100644 --- a/packages/frontend/src/components/MkGoogle.vue +++ b/packages/frontend/src/components/MkGoogle.vue @@ -42,7 +42,7 @@ const search = () => { height: 40px; font-size: 16px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-xs) 0 0 var(--radius-xs); + border-radius: var(--MI-radius-xs) 0 0 var(--MI-radius-xs); -webkit-appearance: textfield; } @@ -52,7 +52,7 @@ const search = () => { padding: 0 16px; border: solid 1px var(--MI_THEME-divider); border-left: none; - border-radius: 0 var(--radius-xs) var(--radius-xs) 0; + border-radius: 0 var(--MI-radius-xs) var(--MI-radius-xs) 0; &:active { box-shadow: 0 2px 4px rgba(#000, 0.15) inset; diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue index edaa605590..7510b77724 100644 --- a/packages/frontend/src/components/MkInput.vue +++ b/packages/frontend/src/components/MkInput.vue @@ -245,7 +245,7 @@ defineExpose({ color: var(--MI_THEME-fg); background: var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); outline: none; box-shadow: none; box-sizing: border-box; diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue index 4ba49be941..b063b82b17 100644 --- a/packages/frontend/src/components/MkInstanceCardMini.vue +++ b/packages/frontend/src/components/MkInstanceCardMini.vue @@ -47,14 +47,14 @@ function getInstanceIcon(instance): string { align-items: center; padding: 16px; background: var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); > :global(.icon) { display: block; width: ($bodyTitleHieght + $bodyInfoHieght); height: ($bodyTitleHieght + $bodyInfoHieght); object-fit: cover; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); margin-right: 10px; } diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue index 46d42248d3..2a8d5c9f71 100644 --- a/packages/frontend/src/components/MkInstanceTicker.vue +++ b/packages/frontend/src/components/MkInstanceTicker.vue @@ -46,7 +46,7 @@ $height: 2ex; display: flex; align-items: center; height: $height; - border-radius: var(--radius-xs) 0 0 var(--radius-xs); + border-radius: var(--MI-radius-xs) 0 0 var(--MI-radius-xs); overflow: clip; color: #fff; text-shadow: /* .866 ≈ sin(60deg) */ diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index 0382dbe926..c7af75e2e7 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -77,12 +77,12 @@ function close() { overflow: auto; overscroll-behavior: contain; text-align: left; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); &.asDrawer { width: 100%; padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px; - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; text-align: center; @@ -100,7 +100,7 @@ function close() { justify-content: center; vertical-align: bottom; height: 100px; - border-radius: var(--radius); + border-radius: var(--MI-radius); padding: 10px; box-sizing: border-box; diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index e1714fb54d..56048a33d8 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -53,7 +53,7 @@ async function show() { <style lang="scss" module> .root { width: 100%; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); margin-top: 4px; overflow: clip; } @@ -76,7 +76,7 @@ async function show() { } .audio { - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } </style> diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index 2aedaa4cd6..4aca7256a5 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -186,7 +186,7 @@ function showMenu(ev: MouseEvent) { .hide { display: block; position: absolute; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); background-color: black; color: var(--MI_THEME-accentLighten); font-size: 12px; @@ -225,7 +225,7 @@ html[data-color-scheme=light] .visible { .menu { display: block; position: absolute; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background-color: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); @@ -261,7 +261,7 @@ html[data-color-scheme=light] .visible { .indicator { /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */ background-color: black; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); color: var(--MI_THEME-accentLighten); display: inline-block; font-weight: bold; diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index 7f8033bcb6..ae7234d1fa 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -324,7 +324,7 @@ defineExpose({ .media { overflow: hidden; // clipにするとバグる - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } :global(.pswp) { diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index c3cecba7b7..8936cd8a5d 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -539,7 +539,7 @@ onDeactivated(() => { .hide { display: block; position: absolute; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); background-color: black; color: var(--MI_THEME-accentLighten); font-size: 12px; @@ -728,10 +728,10 @@ onDeactivated(() => { } .indicator { - /* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */ + /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */ background-color: black; - border-radius: var(--radius-sm); - color: var(--accentLighten); + border-radius: var(--MI-radius-sm); + color: var(--MI_THEME-accentLighten); display: inline-block; font-weight: bold; font-size: 0.8em; diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue index 0391c6bc39..f64ca4bc77 100644 --- a/packages/frontend/src/components/MkMention.vue +++ b/packages/frontend/src/components/MkMention.vue @@ -46,7 +46,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages .root { display: inline-block; padding: 4px 8px 4px 4px; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); color: var(--MI_THEME-mention); background: color(from var(--MI_THEME-mention) srgb r g b / 0.1); white-space: nowrap; @@ -63,7 +63,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages object-fit: cover; margin: 0 0.2em 0 0; vertical-align: bottom; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } .host { diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index ff5f9b9a5d..b0a1b80210 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -454,7 +454,7 @@ onBeforeUnmount(() => { > .menu { padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; width: 100%; - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; @@ -464,7 +464,7 @@ onBeforeUnmount(() => { &::before { width: calc(100% - 24px); - border-radius: var(--radius); + border-radius: var(--MI-radius); } > .icon { @@ -520,7 +520,7 @@ onBeforeUnmount(() => { margin: auto; width: calc(100% - 16px); height: 100%; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } &:focus-visible { diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 55259406f8..380e7bfbe2 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -132,7 +132,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="renoteButton" :class="$style.footerButton" class="_button" - :style="renoted ? 'color: var(--accent) !important;' : ''" + :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''" @click.stop @mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()" > @@ -922,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) { padding: 0 4px; margin-bottom: 0 !important; background: var(--MI_THEME-popup); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); box-shadow: 0px 4px 32px var(--MI_THEME-shadow); } @@ -1067,7 +1067,7 @@ function emitUpdReaction(emoji: string, delta: number) { left: 8px; width: 5px; height: calc(100% - 16px); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); pointer-events: none; } @@ -1075,8 +1075,8 @@ function emitUpdReaction(emoji: string, delta: number) { flex-shrink: 0; display: block !important; margin: 0 14px 0 0; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); position: sticky !important; top: calc(22px + var(--MI-stickyTop, 0px)); left: 0; @@ -1106,7 +1106,7 @@ function emitUpdReaction(emoji: string, delta: number) { background: var(--MI_THEME-popup); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } @@ -1136,7 +1136,7 @@ function emitUpdReaction(emoji: string, delta: number) { background: var(--MI_THEME-panel); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } @@ -1176,7 +1176,7 @@ function emitUpdReaction(emoji: string, delta: number) { .quoteNote { padding: 16px; border: dashed 1px var(--MI_THEME-renote); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 1e0c78e82e..6828e6ef67 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -135,7 +135,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="renoteButton" class="_button" :class="$style.noteFooterButton" - :style="renoted ? 'color: var(--accent) !important;' : ''" + :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''" @mousedown.prevent="renoted ? undoRenote() : boostVisibility()" > <i class="ti ti-repeat"></i> @@ -883,7 +883,7 @@ function animatedMFM() { width: 28px; height: 28px; margin: 0 8px 0 0; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .renoteText { @@ -932,8 +932,8 @@ function animatedMFM() { .noteHeaderAvatar { display: block; flex-shrink: 0; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); } .noteHeaderBody { @@ -957,7 +957,7 @@ function animatedMFM() { font-size: 80%; line-height: 1; border: solid 0.5px var(--MI_THEME-divider); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .noteHeaderInfo { @@ -1017,7 +1017,7 @@ function animatedMFM() { .quoteNote { padding: 16px; border: dashed 1px var(--MI_THEME-renote); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } @@ -1095,7 +1095,7 @@ function animatedMFM() { .reactionTab { padding: 4px 6px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .reactionTabActive { diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index 10107ba0b1..b01f87a121 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -92,7 +92,7 @@ const mock = inject<boolean>('mock', false); padding: 1px 6px; font-size: 80%; border: solid 0.5px var(--MI_THEME-divider); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .username { diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue index 7ccc2c0320..4f907231bb 100644 --- a/packages/frontend/src/components/MkNotePreview.vue +++ b/packages/frontend/src/components/MkNotePreview.vue @@ -56,7 +56,7 @@ const props = defineProps<{ margin: 0 10px 0 0 !important; width: 40px !important; height: 40px !important; - border-radius: var(--radius-sm) !important; + border-radius: var(--MI-radius-sm) !important; pointer-events: none !important; } diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue index 4a4cdef679..273d49efd6 100644 --- a/packages/frontend/src/components/MkNoteSimple.vue +++ b/packages/frontend/src/components/MkNoteSimple.vue @@ -56,7 +56,7 @@ watch(() => props.expandAllCws, (expandAllCws) => { margin: 0 10px 0 0; width: 34px; height: 34px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); position: sticky !important; top: calc(16px + var(--MI-stickyTop, 0px)); left: 0; diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue index c0be406893..3ab0227695 100644 --- a/packages/frontend/src/components/MkNoteSub.vue +++ b/packages/frontend/src/components/MkNoteSub.vue @@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="renoteButton" class="_button" :class="$style.noteFooterButton" - :style="renoted ? 'color: var(--accent) !important;' : ''" + :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''" @mousedown="renoted ? undoRenote() : boostVisibility()" > <i class="ph-rocket-launch ph-bold ph-lg"></i> @@ -438,7 +438,7 @@ if (props.detail) { left: 8px; width: 5px; height: calc(100% - 8px); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); pointer-events: none; } @@ -448,7 +448,7 @@ if (props.detail) { margin: 0 8px 0 0; width: 38px; height: 38px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .body { @@ -475,7 +475,7 @@ if (props.detail) { } &:hover { - color: var(--fgHighlighted); + color: var(--MI_THEME-fgHighlighted); } } @@ -493,7 +493,7 @@ if (props.detail) { opacity: 0.7; &.reacted { - color: var(--accent); + color: var(--MI_THEME-accent); } } @@ -533,6 +533,6 @@ if (props.detail) { padding: 8px !important; border: 1px solid var(--MI_THEME-divider); margin: 8px 8px 0 8px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } </style> diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue index 4144e69d1e..b13df2813b 100644 --- a/packages/frontend/src/components/MkNotes.vue +++ b/packages/frontend/src/components/MkNotes.vue @@ -61,7 +61,7 @@ defineExpose({ <style lang="scss" module> .root { &.noGap { - border-radius: var(--radius); + border-radius: var(--MI-radius); > .notes { background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent); diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index ed66360d0e..7976cdab5b 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -267,7 +267,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification) width: 80%; height: 80%; font-size: 15px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); color: #fff; } @@ -284,7 +284,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification) } .icon_app { - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .subIcon { @@ -295,7 +295,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification) width: 20px; height: 20px; box-sizing: border-box; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); background: var(--MI_THEME-panel); box-shadow: 0 0 0 3px var(--MI_THEME-panel); font-size: 11px; @@ -448,7 +448,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification) width: 20px; height: 20px; box-sizing: border-box; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); background: var(--MI_THEME-panel); box-shadow: 0 0 0 3px var(--MI_THEME-panel); font-size: 11px; diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue index e19c34ba87..b978a71c15 100644 --- a/packages/frontend/src/components/MkOmit.vue +++ b/packages/frontend/src/components/MkOmit.vue @@ -69,7 +69,7 @@ onUnmounted(() => { background: var(--MI_THEME-panel); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue index e11fb4fc99..7c61ba1e83 100644 --- a/packages/frontend/src/components/MkPoll.vue +++ b/packages/frontend/src/components/MkPoll.vue @@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only <p v-if="!readOnly" :class="$style.info"> <span>{{ i18n.tsx._poll.totalVotes({ n: total }) }}</span> <span v-if="poll.multiple"> · </span> - <span v-if="poll.multiple" style="color: var(--accent); font-weight: bolder;">{{ i18n.ts._poll.multiple }}</span> + <span v-if="poll.multiple" style="color: var(--MI_THEME-accent); font-weight: bolder;">{{ i18n.ts._poll.multiple }}</span> <span> · </span> <a v-if="!closed && !isVoted" style="color: inherit;" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a> <span v-if="isVoted">{{ i18n.ts._poll.voted }}</span> @@ -141,7 +141,7 @@ const refreshVotes = async () => { padding: 4px; //border: solid 0.5px var(--MI_THEME-divider); background: var(--MI_THEME-accentedBg); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); overflow: clip; cursor: pointer; } @@ -161,7 +161,7 @@ const refreshVotes = async () => { display: inline-block; padding: 3px 5px; background: var(--MI_THEME-panel); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .info { diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue index d14873008b..932e515892 100644 --- a/packages/frontend/src/components/MkPopupMenu.vue +++ b/packages/frontend/src/components/MkPopupMenu.vue @@ -73,7 +73,7 @@ function close() { <style lang="scss" module> .drawer { - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index b7d67f19ad..689884f653 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkAcct :user="u"/> <button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button> </span> - <button class="_buttonPrimary" style="padding: 4px; border-radius: var(--radius-sm);" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button> + <button class="_buttonPrimary" style="padding: 4px; border-radius: var(--MI-radius-sm);" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button> </div> </div> <MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo> @@ -1207,7 +1207,7 @@ defineExpose({ left: 12px; width: 5px; height: 100% ; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); pointer-events: none; } @@ -1215,7 +1215,7 @@ defineExpose({ padding: 0 12px; line-height: 34px; font-weight: bold; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); min-width: 90px; box-sizing: border-box; color: var(--MI_THEME-fgOnAccent); @@ -1225,7 +1225,7 @@ defineExpose({ .headerRightItem { margin: 0; padding: 8px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); &:hover { background: var(--MI_THEME-X5); @@ -1291,7 +1291,7 @@ defineExpose({ .visibleUser { margin-right: 14px; padding: 8px 0 8px 8px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); background: var(--MI_THEME-X4); } @@ -1363,7 +1363,7 @@ defineExpose({ padding: 4px 6px; font-size: .9em; color: var(--MI_THEME-warn); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); min-width: 1.6em; text-align: center; @@ -1403,7 +1403,7 @@ defineExpose({ font-size: 1em; width: auto; height: 100%; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); &:hover { background: var(--MI_THEME-X5); diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue index a601a110fa..b3f95b75a2 100644 --- a/packages/frontend/src/components/MkPostFormAttaches.vue +++ b/packages/frontend/src/components/MkPostFormAttaches.vue @@ -203,7 +203,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | Keyboar width: 64px; height: 64px; margin-right: 4px; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); overflow: hidden; cursor: move; diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue index 838eaee292..fc5ea59a3c 100644 --- a/packages/frontend/src/components/MkRadio.vue +++ b/packages/frontend/src/components/MkRadio.vue @@ -56,7 +56,7 @@ function toggle(): void { background-color: var(--MI_THEME-panel); background-clip: padding-box !important; border: solid 1px var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); font-size: 90%; transition: all 0.2s; user-select: none; @@ -107,7 +107,7 @@ function toggle(): void { height: 14px; background: none; border: solid 2px var(--MI_THEME-inputBorder); - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); transition: inherit; &::after { @@ -118,7 +118,7 @@ function toggle(): void { right: 3px; bottom: 3px; left: 3px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); opacity: 0; transform: scale(0); transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue index 72e9aa6c0b..d009f3858c 100644 --- a/packages/frontend/src/components/MkRange.vue +++ b/packages/frontend/src/components/MkRange.vue @@ -226,7 +226,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) { padding: 7px 12px; background: var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); > .container { position: relative; @@ -242,7 +242,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) { width: calc(100% - #{$thumbWidth}); height: 3px; background: rgba(0, 0, 0, 0.1); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); overflow: clip; > .highlight { @@ -273,7 +273,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) { height: 3px; margin-left: - math.div($tickWidth, 2); background: var(--MI_THEME-divider); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } } @@ -283,7 +283,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) { height: $thumbHeight; cursor: grab; background: var(--MI_THEME-accent); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); &:hover { background: var(--MI_THEME-accentLighten); diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index 32ab8ac3c3..9cd972639f 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -175,7 +175,7 @@ if (!mock) { margin: 2px; padding: 0 6px; font-size: 1.5em; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); align-items: center; justify-content: center; @@ -194,7 +194,7 @@ if (!mock) { &.small { height: 32px; font-size: 1em; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); > .count { font-size: 0.9em; @@ -205,7 +205,7 @@ if (!mock) { &.large { height: 52px; font-size: 2em; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); > .count { font-size: 0.6em; diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue index 154fff6d2f..ca988178e1 100644 --- a/packages/frontend/src/components/MkSelect.vue +++ b/packages/frontend/src/components/MkSelect.vue @@ -259,7 +259,7 @@ function show() { color: var(--MI_THEME-fg); background: var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); outline: none; box-shadow: none; box-sizing: border-box; diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue index 12f9621fda..06481b808c 100644 --- a/packages/frontend/src/components/MkSignupDialog.rules.vue +++ b/packages/frontend/src/components/MkSignupDialog.rules.vue @@ -183,7 +183,7 @@ async function updateAgreeNote(v: boolean) { font-weight: bold; align-items: center; justify-content: center; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } } diff --git a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue index 9bfa2789af..84dc244b23 100644 --- a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue +++ b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue @@ -71,7 +71,7 @@ function close() { width: calc(100% - (var(--MI-margin) * 2)); max-width: 500px; display: flex; - backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--MI-blur, blur(15px)); } .icon { diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 46ef575c23..a32fd53c51 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -117,7 +117,7 @@ watch(() => props.expandAllCws, (expandAllCws) => { background: var(--MI_THEME-panel); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } @@ -142,8 +142,8 @@ watch(() => props.expandAllCws, (expandAllCws) => { } .translation { - border: solid 0.5px var(--divider); - border-radius: var(--radius); + border: solid 0.5px var(--MI_THEME-divider); + border-radius: var(--MI-radius); padding: 12px; margin-top: 8px; } @@ -164,7 +164,7 @@ watch(() => props.expandAllCws, (expandAllCws) => { background: var(--MI_THEME-popup); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue index e938da8e57..e8ed7f6e04 100644 --- a/packages/frontend/src/components/MkSuperMenu.vue +++ b/packages/frontend/src/components/MkSuperMenu.vue @@ -59,7 +59,7 @@ defineProps<{ width: 100%; box-sizing: border-box; padding: 9px 16px 9px 8px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); font-size: 0.9em; &:hover { @@ -145,7 +145,7 @@ defineProps<{ height: 60px; aspect-ratio: 1; background: var(--MI_THEME-panel); - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } > .text { diff --git a/packages/frontend/src/components/MkSwitch.button.vue b/packages/frontend/src/components/MkSwitch.button.vue index a06a407de1..581aa4e644 100644 --- a/packages/frontend/src/components/MkSwitch.button.vue +++ b/packages/frontend/src/components/MkSwitch.button.vue @@ -54,7 +54,7 @@ const toggle = () => { background: var(--MI_THEME-switchOffBg); background-clip: content-box; border: solid 1px var(--MI_THEME-switchOffBg); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); cursor: pointer; transition: inherit; user-select: none; @@ -75,7 +75,7 @@ const toggle = () => { top: 3px; width: calc(var(--height) - 6px); height: calc(var(--height) - 6px); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); transition: all 0.2s ease; &:not(.knobChecked) { diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue index 07ab007482..52e4d304bc 100644 --- a/packages/frontend/src/components/MkTab.vue +++ b/packages/frontend/src/components/MkTab.vue @@ -39,7 +39,7 @@ export default defineComponent({ > button { flex: 1; padding: 10px 8px; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); &:disabled { opacity: 1 !important; diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue index 9a003d9db8..9deb6528d1 100644 --- a/packages/frontend/src/components/MkTextarea.vue +++ b/packages/frontend/src/components/MkTextarea.vue @@ -182,7 +182,7 @@ onUnmounted(() => { color: var(--MI_THEME-fg); background: var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); outline: none; box-shadow: none; box-sizing: border-box; diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue index f731b3264f..38b537cbc9 100644 --- a/packages/frontend/src/components/MkToast.vue +++ b/packages/frontend/src/components/MkToast.vue @@ -70,7 +70,7 @@ onMounted(() => { max-width: calc(100% - 32px); width: min-content; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; text-align: center; pointer-events: none; diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue index 25350a8a40..22e74aa6d1 100644 --- a/packages/frontend/src/components/MkTooltip.vue +++ b/packages/frontend/src/components/MkTooltip.vue @@ -109,7 +109,7 @@ onUnmounted(() => { padding: 8px 12px; box-sizing: border-box; text-align: center; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); border: solid 0.5px var(--MI_THEME-divider); pointer-events: none; transform-origin: center center; diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue index 0d210acbae..367c573617 100644 --- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue +++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue @@ -116,7 +116,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({ left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); } diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue index 3ac58163c5..e1fc3e4f26 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue @@ -126,7 +126,7 @@ const exampleNote = reactive<Misskey.entities.Note>({ left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); } diff --git a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue index 328f7e95d1..931b7343c5 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue @@ -66,7 +66,7 @@ import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js'; left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); } diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index be12304ae6..98b65aca84 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -241,7 +241,7 @@ onUnmounted(() => { display: block; font-size: 14px; box-shadow: 0 0 0 1px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; &:hover { diff --git a/packages/frontend/src/components/MkUrlWarningDialog.vue b/packages/frontend/src/components/MkUrlWarningDialog.vue index f2e9b11fd9..3bec6eecdd 100644 --- a/packages/frontend/src/components/MkUrlWarningDialog.vue +++ b/packages/frontend/src/components/MkUrlWarningDialog.vue @@ -94,7 +94,7 @@ onBeforeUnmount(() => { min-width: 320px; max-width: 480px; box-sizing: border-box; - background: var(--panel); + background: var(--MI_THEME-panel); border-radius: 16px; } @@ -106,7 +106,7 @@ onBeforeUnmount(() => { .icon { font-size: 18px; - color: var(--warn); + color: var(--MI_THEME-warn); } .title { @@ -117,7 +117,7 @@ onBeforeUnmount(() => { .urlAddress { padding: 10px 14px; border-radius: 8px; - border: 1px solid var(--divider); + border: 1px solid var(--MI_THEME-divider); overflow-x: auto; white-space: nowrap; } diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue index f3c3625c3a..ce28f6ec5e 100644 --- a/packages/frontend/src/components/MkUserCardMini.vue +++ b/packages/frontend/src/components/MkUserCardMini.vue @@ -50,7 +50,7 @@ $bodyInfoHieght: 16px; align-items: center; padding: 16px; background: var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .avatar { diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue index 64a3867d33..a6bbacacee 100644 --- a/packages/frontend/src/components/MkUserInfo.vue +++ b/packages/frontend/src/components/MkUserInfo.vue @@ -75,8 +75,8 @@ defineProps<{ top: 62px; left: 13px; z-index: 2; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); border: solid 4px var(--MI_THEME-panel); } @@ -110,7 +110,7 @@ defineProps<{ color: #fff; background: rgba(0, 0, 0, 0.7); font-size: 0.7em; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .description { @@ -169,7 +169,7 @@ defineProps<{ color: #fff; background: rgba(0, 0, 0, 0.7); font-size: 0.7em; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); list-style-type: none; margin-left: 0; } diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue index a4fee52367..7a6ded110a 100644 --- a/packages/frontend/src/components/MkUserOnlineIndicator.vue +++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue @@ -40,7 +40,7 @@ const text = computed(() => { // sharkey: the comment mentions something about 100% radius not behaving correctly on blink. // couldn't reproduce, assuming the 120% here was just an old workaround - border-radius: var(--radius-full); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる + border-radius: var(--MI-radius-full); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる &.status_online { background: #58d4c9; diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index 9de8639fe4..2bdf854d1e 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -160,7 +160,7 @@ onMounted(() => { color: #fff; background: rgba(0, 0, 0, 0.7); font-size: 0.7em; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .locked:first-child { @@ -171,7 +171,7 @@ onMounted(() => { color: #fff; background: rgba(0, 0, 0, 0.7); font-size: 0.7em; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .locked:not(:first-child) { @@ -182,7 +182,7 @@ onMounted(() => { color: #fff; background: rgba(0, 0, 0, 0.7); font-size: 0.7em; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .avatarBack { @@ -202,8 +202,8 @@ onMounted(() => { right: 0; margin: 0 auto; z-index: 2; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); } .title { @@ -238,8 +238,8 @@ onMounted(() => { .fields { font-size: 0.8em; padding: 16px; - border-top: solid 1px var(--divider); - border-bottom: solid 1px var(--divider); + border-top: solid 1px var(--MI_THEME-divider); + border-bottom: solid 1px var(--MI_THEME-divider); } .field { @@ -305,7 +305,7 @@ onMounted(() => { right: 44px; padding: 6px; background: var(--MI_THEME-panel); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } .follow { diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.vue b/packages/frontend/src/components/MkUserSetupDialog.User.vue index c7732af808..4c4f4989c5 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.User.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.User.vue @@ -59,8 +59,8 @@ async function follow() { top: 30px; left: 13px; z-index: 2; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); border: solid 4px var(--MI_THEME-panel); } diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue index 465204d7a2..5624abbd33 100644 --- a/packages/frontend/src/components/MkVisibilityPicker.vue +++ b/packages/frontend/src/components/MkVisibilityPicker.vue @@ -82,7 +82,7 @@ function choose(visibility: typeof Misskey.noteVisibilities[number]): void { &.asDrawer { padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; width: 100%; - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); border-bottom-right-radius: 0; border-bottom-left-radius: 0; diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue index 688340c6b1..54f2ee655c 100644 --- a/packages/frontend/src/components/MkVisitorDashboard.vue +++ b/packages/frontend/src/components/MkVisitorDashboard.vue @@ -140,7 +140,7 @@ function showMenu(ev: MouseEvent) { right: 16px; width: 32px; height: 32px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); font-size: 18px; z-index: 50; } diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue index f3d0bcd58f..7a1d9f4728 100644 --- a/packages/frontend/src/components/MkWidgets.vue +++ b/packages/frontend/src/components/MkWidgets.vue @@ -158,7 +158,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) { height: 32px; color: #fff; background: rgba(#000, 0.7); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } &Config { diff --git a/packages/frontend/src/components/SkInstanceTicker.vue b/packages/frontend/src/components/SkInstanceTicker.vue index eb987d9c77..2bfe5cc157 100644 --- a/packages/frontend/src/components/SkInstanceTicker.vue +++ b/packages/frontend/src/components/SkInstanceTicker.vue @@ -45,7 +45,7 @@ const bg = { display: flex; align-items: center; height: 1.5ex; - border-radius: var(--radius-xl); + border-radius: var(--MI-radius-xl); padding: 4px; overflow: clip; color: #fff; diff --git a/packages/frontend/src/components/SkMfmWindow.vue b/packages/frontend/src/components/SkMfmWindow.vue index c599531ec5..aaf2fdc9fb 100644 --- a/packages/frontend/src/components/SkMfmWindow.vue +++ b/packages/frontend/src/components/SkMfmWindow.vue @@ -494,8 +494,8 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[ top: var(--stickyTop, 0px); padding: 16px; font-weight: bold; - -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-color: var(--X16); } @@ -507,7 +507,7 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[ } > .preview { - border-top: solid 0.5px var(--divider); + border-top: solid 0.5px var(--MI_THEME-divider); padding: 16px; } } diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue index 58a96cfb63..8607bca45d 100644 --- a/packages/frontend/src/components/SkModPlayer.vue +++ b/packages/frontend/src/components/SkModPlayer.vue @@ -440,9 +440,9 @@ onDeactivated(() => { <style lang="scss" scoped> .hide { - border-radius: var(--radius-sm) !important; + border-radius: var(--MI-radius-sm) !important; background-color: black !important; - color: var(--accentLighten) !important; + color: var(--MI_THEME-accentLighten) !important; font-size: 12px !important; } @@ -455,9 +455,9 @@ onDeactivated(() => { > i { display: block; position: absolute; - border-radius: var(--radius-sm); - background-color: var(--fg); - color: var(--accentLighten); + border-radius: var(--MI-radius-sm); + background-color: var(--MI_THEME-fg); + color: var(--MI_THEME-accentLighten); font-size: 14px; opacity: .5; padding: 3px 6px; @@ -518,7 +518,7 @@ onDeactivated(() => { justify-content: center; align-items: center; background: rgba(64, 64, 64, 0.3); - backdrop-filter: var(--modalBgFilter); + backdrop-filter: var(--MI-modalBgFilter); color: #fff; font-size: 12px; @@ -536,7 +536,7 @@ onDeactivated(() => { > .controls { display: flex; width: 100%; - background-color: var(--bg); + background-color: var(--MI_THEME-bg); z-index: 5; > * { @@ -546,11 +546,11 @@ onDeactivated(() => { > button, a { border: none; background-color: transparent; - color: var(--accent); + color: var(--MI_THEME-accent); cursor: pointer; &:hover { - background-color: var(--fg); + background-color: var(--MI_THEME-fg); } } @@ -578,11 +578,11 @@ onDeactivated(() => { outline: none; &::-webkit-slider-runnable-track { - background: var(--bg); + background: var(--MI_THEME-bg); } &::-ms-fill-lower, &::-ms-fill-upper { - background: var(--bg); + background: var(--MI_THEME-bg); } } @@ -592,8 +592,8 @@ onDeactivated(() => { cursor: pointer; border-radius: 0; animate: 0.2s; - background: var(--bg); - border: 1px solid var(--fg); + background: var(--MI_THEME-bg); + border: 1px solid var(--MI_THEME-fg); overflow-x: hidden; } @@ -602,10 +602,10 @@ onDeactivated(() => { height: 100%; width: 14px; border-radius: 0; - background: var(--accentLighten); + background: var(--MI_THEME-accentLighten); cursor: pointer; -webkit-appearance: none; - box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent); + box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent); clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px)); z-index: 1; } @@ -616,14 +616,14 @@ onDeactivated(() => { cursor: pointer; border-radius: 0; animate: 0.2s; - background: var(--bg); - border: 1px solid var(--fg); + background: var(--MI_THEME-bg); + border: 1px solid var(--MI_THEME-fg); } &::-moz-range-progress { cursor: pointer; height: 100%; - background: var(--accent); + background: var(--MI_THEME-accent); } &::-moz-range-thumb { @@ -631,7 +631,7 @@ onDeactivated(() => { height: 100%; border-radius: 0; width: 14px; - background: var(--accentLighten); + background: var(--MI_THEME-accentLighten); cursor: pointer; } @@ -647,14 +647,14 @@ onDeactivated(() => { } &::-ms-fill-lower { - background: var(--accent); - border: 1px solid var(--fg); + background: var(--MI_THEME-accent); + border: 1px solid var(--MI_THEME-fg); border-radius: 0; } &::-ms-fill-upper { - background: var(--bg); - border: 1px solid var(--fg); + background: var(--MI_THEME-bg); + border: 1px solid var(--MI_THEME-fg); border-radius: 0; } @@ -664,7 +664,7 @@ onDeactivated(() => { height: 100%; width: 14px; border-radius: 0; - background: var(--accentLighten); + background: var(--MI_THEME-accentLighten); cursor: pointer; } diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue index 025436f52f..eab5d45c89 100644 --- a/packages/frontend/src/components/SkNote.vue +++ b/packages/frontend/src/components/SkNote.vue @@ -158,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only </button> <button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()" @click.stop> <i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i> - <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i> + <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i> <i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> <i v-else class="ph-smiley ph-bold ph-lg"></i> <p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p> @@ -930,7 +930,7 @@ function emitUpdReaction(emoji: string, delta: number) { padding: 0 4px; margin-bottom: 0 !important; background: var(--MI_THEME-popup); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); box-shadow: 0px 4px 32px var(--MI_THEME-shadow); } @@ -977,7 +977,7 @@ function emitUpdReaction(emoji: string, delta: number) { position: relative; display: flex; align-items: center; - padding: 24px 32px 0 calc(32px + var(--avatar) + 14px); + padding: 24px 32px 0 calc(32px + var(--MI-avatar) + 14px); line-height: 28px; white-space: pre; color: var(--MI_THEME-renote); @@ -986,9 +986,9 @@ function emitUpdReaction(emoji: string, delta: number) { content: ''; position: absolute; top: 0; - left: calc(32px + .5 * var(--avatar)); + left: calc(32px + .5 * var(--MI-avatar)); bottom: -8px; - border-left: var(--thread-width) solid var(--MI_THEME-thread); + border-left: var(--MI-thread-width) solid var(--MI_THEME-thread); } &:first-child { @@ -1077,9 +1077,9 @@ function emitUpdReaction(emoji: string, delta: number) { .collapsedInReplyToLine { position: absolute; - left: calc(32px + .5 * var(--avatar)); + left: calc(32px + .5 * var(--MI-avatar)); // using solid instead of dotted, stylelistic choice - border-left: var(--thread-width) solid var(--MI_THEME-thread); + border-left: var(--MI-thread-width) solid var(--MI_THEME-thread); top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote) height: 28px; } @@ -1095,7 +1095,7 @@ function emitUpdReaction(emoji: string, delta: number) { left: 8px; width: 5px; height: calc(100% - 16px); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); pointer-events: none; } @@ -1104,8 +1104,8 @@ function emitUpdReaction(emoji: string, delta: number) { display: block !important; position: sticky !important; margin: 0 14px 0 0; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); position: sticky !important; top: calc(22px + var(--MI-stickyTop, 0px)); left: 0; @@ -1141,7 +1141,7 @@ function emitUpdReaction(emoji: string, delta: number) { background: var(--MI_THEME-popup); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } @@ -1171,7 +1171,7 @@ function emitUpdReaction(emoji: string, delta: number) { background: var(--MI_THEME-panel); padding: 6px 10px; font-size: 0.8em; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } @@ -1211,7 +1211,7 @@ function emitUpdReaction(emoji: string, delta: number) { padding: 16px; // Made border solid, stylistic choice border: solid 1px var(--MI_THEME-renote); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } @@ -1247,14 +1247,14 @@ function emitUpdReaction(emoji: string, delta: number) { @container (max-width: 580px) { .root { font-size: 0.95em; - --avatar: 46px; + --MI-avatar: 46px; } .renote { - padding: 24px 26px 0 calc(26px + var(--avatar) + 14px); + padding: 24px 26px 0 calc(26px + var(--MI-avatar) + 14px); &::before { - left: calc(26px + .5 * var(--avatar)); + left: calc(26px + .5 * var(--MI-avatar)); } } @@ -1267,7 +1267,7 @@ function emitUpdReaction(emoji: string, delta: number) { } .collapsedInReplyToLine { - left: calc(26px + .5 * var(--avatar)); + left: calc(26px + .5 * var(--MI-avatar)); } .article { @@ -1289,26 +1289,26 @@ function emitUpdReaction(emoji: string, delta: number) { } .collapsedInReplyToLine { - left: calc(25px + .5 * var(--avatar)); + left: calc(25px + .5 * var(--MI-avatar)); } } @container (max-width: 500px) { .renote { - padding: 23px 25px 0 calc(25px + var(--avatar) + 14px); + padding: 23px 25px 0 calc(25px + var(--MI-avatar) + 14px); &::before { - left: calc(25px + .5 * var(--avatar)); + left: calc(25px + .5 * var(--MI-avatar)); } } } @container (max-width: 480px) { .renote { - padding: 22px 24px 0 calc(24px + var(--avatar) + 14px); + padding: 22px 24px 0 calc(24px + var(--MI-avatar) + 14px); &::before { - left: calc(24px + .5 * var(--avatar)); + left: calc(24px + .5 * var(--MI-avatar)); } } @@ -1326,7 +1326,7 @@ function emitUpdReaction(emoji: string, delta: number) { } .collapsedInReplyToLine { - left: calc(24px + .5 * var(--avatar)); + left: calc(24px + .5 * var(--MI-avatar)); top: calc(22px + 28px); // 22px of .root padding, plus 28px of avatar height } @@ -1337,7 +1337,7 @@ function emitUpdReaction(emoji: string, delta: number) { @container (max-width: 450px) { .root { - --avatar: 44px; + --MI-avatar: 44px; } .avatar { diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue index 3fb8e76d51..7e718f1560 100644 --- a/packages/frontend/src/components/SkNoteDetailed.vue +++ b/packages/frontend/src/components/SkNoteDetailed.vue @@ -913,7 +913,7 @@ onUnmounted(() => { width: 28px; height: 28px; margin: 0 8px 0 0; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .renoteText { @@ -985,8 +985,8 @@ onUnmounted(() => { .noteHeaderAvatar { display: block; flex-shrink: 0; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); } .noteHeaderBody { @@ -1010,7 +1010,7 @@ onUnmounted(() => { font-size: 80%; line-height: 1; border: solid 0.5px var(--MI_THEME-divider); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .noteHeaderInfo { @@ -1077,7 +1077,7 @@ onUnmounted(() => { .quoteNote { padding: 16px; border: solid 1px var(--MI_THEME-renote); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } @@ -1162,7 +1162,7 @@ onUnmounted(() => { .reactionTab { padding: 4px 6px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .reactionTabActive { @@ -1221,7 +1221,7 @@ onUnmounted(() => { margin: 0 10px 0 0 !important; width: 40px !important; height: 40px !important; - border-radius: var(--radius-sm) !important; + border-radius: var(--MI-radius-sm) !important; } .muted { diff --git a/packages/frontend/src/components/SkNoteHeader.vue b/packages/frontend/src/components/SkNoteHeader.vue index f31ec69dd9..6bcc30f6cb 100644 --- a/packages/frontend/src/components/SkNoteHeader.vue +++ b/packages/frontend/src/components/SkNoteHeader.vue @@ -189,7 +189,7 @@ const mock = inject<boolean>('mock', false); padding: 1px 6px; font-size: 80%; border: solid 0.5px var(--MI_THEME-divider); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .username { diff --git a/packages/frontend/src/components/SkNoteSimple.vue b/packages/frontend/src/components/SkNoteSimple.vue index 4e8f6667d4..b9895305f2 100644 --- a/packages/frontend/src/components/SkNoteSimple.vue +++ b/packages/frontend/src/components/SkNoteSimple.vue @@ -61,7 +61,7 @@ watch(() => props.expandAllCws, (expandAllCws) => { margin: 0 10px 0 0; width: 34px; height: 34px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); position: sticky !important; top: calc(16px + var(--MI-stickyTop, 0px)); left: 0; diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue index 40f5c5f43c..3e9d2a780f 100644 --- a/packages/frontend/src/components/SkNoteSub.vue +++ b/packages/frontend/src/components/SkNoteSub.vue @@ -426,7 +426,7 @@ if (props.detail) { padding: 28px 32px; position: relative; - --reply-indent: calc(.5 * var(--avatar)); + --reply-indent: calc(.5 * var(--MI-avatar)); &.children { padding: 10px 0 0 8px; @@ -434,16 +434,16 @@ if (props.detail) { &.isReply { /* @link https://utopia.fyi/clamp/calculator?a=450,580,26—36 */ - --avatar: clamp(26px, -8.6154px + 7.6923cqi, 36px); + --MI-avatar: clamp(26px, -8.6154px + 7.6923cqi, 36px); } } .line { position: absolute; - left: calc(32px + .5 * var(--avatar)); + left: calc(32px + .5 * var(--MI-avatar)); // using solid instead of dotted, stylelistic choice - border-left: var(--thread-width) solid var(--MI_THEME-thread); - top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote) + border-left: var(--MI-thread-width) solid var(--MI_THEME-thread); + top: calc(28px + var(--MI-avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote) bottom: -28px; } @@ -487,7 +487,7 @@ if (props.detail) { left: 8px; width: 5px; height: calc(100% - 8px); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); pointer-events: none; } @@ -495,9 +495,9 @@ if (props.detail) { flex-shrink: 0; display: block; margin: 0 14px 0 0; - width: var(--avatar); - height: var(--avatar); - border-radius: var(--radius-sm); + width: var(--MI-avatar); + height: var(--MI-avatar); + border-radius: var(--MI-radius-sm); } .body { @@ -541,11 +541,11 @@ if (props.detail) { @container (max-width: 580px) { .root { padding: 28px 26px 0; - --avatar: 46px; + --MI-avatar: 46px; } .line { - left: calc(26px + .5 * var(--avatar)); + left: calc(26px + .5 * var(--MI-avatar)); } } @@ -555,8 +555,8 @@ if (props.detail) { } .line { - top: calc(23px + var(--avatar)); - left: calc(25px + .5 * var(--avatar)); + top: calc(23px + var(--MI-avatar)); + left: calc(25px + .5 * var(--MI-avatar)); } } @@ -605,14 +605,14 @@ if (props.detail) { } .line { - top: calc(22px + var(--avatar)); - left: calc(24px + .5 * var(--avatar)); + top: calc(22px + var(--MI-avatar)); + left: calc(24px + .5 * var(--MI-avatar)); } } @container (max-width: 450px) { .root { - --avatar: 44px; + --MI-avatar: 44px; } } @@ -621,7 +621,7 @@ if (props.detail) { padding: 8px !important; border: 1px solid var(--MI_THEME-divider); margin: 8px 8px 0 8px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } // avatar container with line @@ -633,7 +633,7 @@ if (props.detail) { .threadLine { width: 0; flex-grow: 1; - border-left: var(--thread-width) solid var(--MI_THEME-thread); + border-left: var(--MI-thread-width) solid var(--MI_THEME-thread); margin-left: var(--reply-indent); } @@ -642,10 +642,10 @@ if (props.detail) { } .reply:not(:last-child) { - border-left: var(--thread-width) solid var(--MI_THEME-thread); + border-left: var(--MI-thread-width) solid var(--MI_THEME-thread); &::before { - left: calc(-1 * var(--thread-width)); + left: calc(-1 * var(--MI-thread-width)); } } @@ -654,10 +654,10 @@ if (props.detail) { content: ''; left: 0px; top: -10px; - height: calc(10px + 10px + .5 * var(--avatar)); + height: calc(10px + 10px + .5 * var(--MI-avatar)); width: 15px; - border-left: var(--thread-width) solid var(--MI_THEME-thread); - border-bottom: var(--thread-width) solid var(--MI_THEME-thread); + border-left: var(--MI-thread-width) solid var(--MI_THEME-thread); + border-bottom: var(--MI-thread-width) solid var(--MI_THEME-thread); border-bottom-left-radius: 15px; } diff --git a/packages/frontend/src/components/SkOldNoteWindow.vue b/packages/frontend/src/components/SkOldNoteWindow.vue index 3810b62366..48b9020402 100644 --- a/packages/frontend/src/components/SkOldNoteWindow.vue +++ b/packages/frontend/src/components/SkOldNoteWindow.vue @@ -182,8 +182,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS .noteHeaderAvatar { display: block; flex-shrink: 0; - width: var(--avatar); - height: var(--avatar); + width: var(--MI-avatar); + height: var(--MI-avatar); } .noteHeaderBody { @@ -206,8 +206,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS padding: 4px 6px; font-size: 80%; line-height: 1; - border: solid 0.5px var(--divider); - border-radius: var(--radius-xs); + border: solid 0.5px var(--MI_THEME-divider); + border-radius: var(--MI-radius-xs); } .noteHeaderInfo { @@ -240,19 +240,19 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS } .noteReplyTarget { - color: var(--accent); + color: var(--MI_THEME-accent); margin-right: 0.5em; } .rn { margin-left: 4px; font-style: oblique; - color: var(--renote); + color: var(--MI_THEME-renote); } .translation { - border: solid 0.5px var(--divider); - border-radius: var(--radius); + border: solid 0.5px var(--MI_THEME-divider); + border-radius: var(--MI-radius); padding: 12px; margin-top: 8px; } @@ -267,8 +267,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS .quoteNote { padding: 16px; - border: dashed 1px var(--renote); - border-radius: var(--radius-xs); + border: dashed 1px var(--MI_THEME-renote); + border-radius: var(--MI-radius-xs); overflow: clip; } @@ -287,7 +287,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS } &:hover { - color: var(--fgHighlighted); + color: var(--MI_THEME-fgHighlighted); } } diff --git a/packages/frontend/src/components/SkOneko.vue b/packages/frontend/src/components/SkOneko.vue index 24bb392335..ef7bdd74f0 100644 --- a/packages/frontend/src/components/SkOneko.vue +++ b/packages/frontend/src/components/SkOneko.vue @@ -240,6 +240,6 @@ onMounted(init); pointer-events: none; image-rendering: pixelated; z-index: 2147483647; - background-image: var(--oneko-image, url(/client-assets/oneko.gif)); + background-image: var(--MI_THEME-oneko-image, url(/client-assets/oneko.gif)); } </style> diff --git a/packages/frontend/src/components/SkUserRecentNotes.vue b/packages/frontend/src/components/SkUserRecentNotes.vue index 2cdb4b6586..f355facb51 100644 --- a/packages/frontend/src/components/SkUserRecentNotes.vue +++ b/packages/frontend/src/components/SkUserRecentNotes.vue @@ -94,7 +94,7 @@ onMounted(async () => { <style lang="scss" module> .panel { - background: var(--panel); + background: var(--MI_THEME-panel); } .userInfo { diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue index 1cfde0c903..b8837d7133 100644 --- a/packages/frontend/src/components/form/link.vue +++ b/packages/frontend/src/components/form/link.vue @@ -61,7 +61,7 @@ const props = defineProps<{ box-sizing: border-box; padding: 10px 14px; background: var(--MI_THEME-folderHeaderBg); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); font-size: 0.9em; &:hover { diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue index 57af034354..fdfc429f4a 100644 --- a/packages/frontend/src/components/global/MkAd.vue +++ b/packages/frontend/src/components/global/MkAd.vue @@ -175,7 +175,7 @@ function reduceFrequency(): void { display: block; object-fit: contain; margin: auto; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } .i { @@ -185,7 +185,7 @@ function reduceFrequency(): void { display: grid; place-content: center; background: var(--MI_THEME-panel); - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); padding: 2px; } diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue index 64c828ba4a..77dddaff89 100644 --- a/packages/frontend/src/components/global/MkError.vue +++ b/packages/frontend/src/components/global/MkError.vue @@ -44,6 +44,6 @@ const emit = defineEmits<{ width: 128px; height: 128px; margin-bottom: 16px; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } </style> diff --git a/packages/frontend/src/components/global/MkMfm.ts b/packages/frontend/src/components/global/MkMfm.ts index 90b3999092..a45e531932 100644 --- a/packages/frontend/src/components/global/MkMfm.ts +++ b/packages/frontend/src/components/global/MkMfm.ts @@ -362,7 +362,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven const child = token.children[0]; const unixtime = parseInt(child.type === 'text' ? child.props.text : ''); return h('span', { - style: 'display: inline-block; font-size: 90%; border: solid 1px var(--MI_THEME-divider); border-radius: var(--radius-ellipse); padding: 4px 10px 4px 6px;', + style: 'display: inline-block; font-size: 90%; border: solid 1px var(--MI_THEME-divider); border-radius: var(--MI-radius-ellipse); padding: 4px 10px 4px 6px;', }, [ h('i', { class: 'ti ti-clock', diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue index 20be1b8725..acf2933743 100644 --- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue +++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue @@ -219,7 +219,7 @@ onUnmounted(() => { &.active { opacity: 1; - color: var(--accent); + color: var(--MI_THEME-accent); } &.animate { @@ -249,7 +249,7 @@ onUnmounted(() => { bottom: 0; height: 3px; background: var(--MI_THEME-accent); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); transition: none; pointer-events: none; diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index cc7633dcff..18c97b1bdb 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -239,7 +239,7 @@ onUnmounted(() => { width: calc(var(--height) - (var(--margin))); box-sizing: border-box; position: relative; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); &:hover { background: rgba(0, 0, 0, 0.05); diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue index 83f596b870..0bafc385a6 100644 --- a/packages/frontend/src/pages/_error_.vue +++ b/packages/frontend/src/pages/_error_.vue @@ -83,6 +83,6 @@ definePageMetadata(() => ({ vertical-align: bottom; height: 128px; margin-bottom: 24px; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } </style> diff --git a/packages/frontend/src/pages/about-sharkey.vue b/packages/frontend/src/pages/about-sharkey.vue index 7ebae62a7b..3b571475fb 100644 --- a/packages/frontend/src/pages/about-sharkey.vue +++ b/packages/frontend/src/pages/about-sharkey.vue @@ -266,7 +266,7 @@ definePageMetadata(() => ({ .znqjceqz { > .about { position: relative; - border-radius: var(--radius); + border-radius: var(--MI-radius); > .treasure { position: absolute; @@ -305,7 +305,7 @@ definePageMetadata(() => ({ display: block; width: 80px; margin: 0 auto; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); position: relative; z-index: 1; transform: translateX(-10%); @@ -355,23 +355,23 @@ definePageMetadata(() => ({ display: flex; align-items: center; padding: 12px; - background: var(--buttonBg); - border-radius: var(--radius-sm); + background: var(--MI_THEME-buttonBg); + border-radius: var(--MI-radius-sm); &:hover { text-decoration: none; - background: var(--buttonHoverBg); + background: var(--MI_THEME-buttonHoverBg); } &.active { - color: var(--accent); - background: var(--buttonHoverBg); + color: var(--MI_THEME-accent); + background: var(--MI_THEME-buttonHoverBg); } } .contributorAvatar { width: 30px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } .contributorUsername { @@ -388,13 +388,13 @@ definePageMetadata(() => ({ display: flex; align-items: center; padding: 12px; - background: var(--buttonBg); - border-radius: var(--radius-sm); + background: var(--MI_THEME-buttonBg); + border-radius: var(--MI-radius-sm); } .patronIcon { width: 24px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } .patronName { diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue index 42898b3447..347214c8fa 100644 --- a/packages/frontend/src/pages/about.overview.vue +++ b/packages/frontend/src/pages/about.overview.vue @@ -170,7 +170,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu <style lang="scss" module> .banner { text-align: center; - border-radius: var(--radius); + border-radius: var(--MI-radius); overflow: clip; background-color: var(--MI_THEME-panel); background-size: cover; @@ -181,7 +181,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu display: block; margin: 16px auto 0 auto; max-height: 96px; - border-radius: var(--radius-sm);; + border-radius: var(--MI-radius-sm);; } .bannerName { @@ -220,7 +220,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu font-weight: bold; align-items: center; justify-content: center; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } } @@ -238,23 +238,23 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu display: flex; align-items: center; padding: 12px; - background: var(--buttonBg); - border-radius: var(--radius-sm); + background: var(--MI_THEME-buttonBg); + border-radius: var(--MI-radius-sm); &:hover { text-decoration: none; - background: var(--buttonHoverBg); + background: var(--MI_THEME-buttonHoverBg); } &.active { - color: var(--accent); - background: var(--buttonHoverBg); + color: var(--MI_THEME-accent); + background: var(--MI_THEME-buttonHoverBg); } } .contributorAvatar { width: 30px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } .contributorUsername { diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue index f63b81c393..f4421855de 100644 --- a/packages/frontend/src/pages/admin-user.vue +++ b/packages/frontend/src/pages/admin-user.vue @@ -605,7 +605,7 @@ definePageMetadata(() => ({ > .suspended, > .silenced, > .moderator { display: inline-block; border: solid 1px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); padding: 2px 6px; font-size: 85%; } @@ -644,13 +644,13 @@ definePageMetadata(() => ({ .casdwq { .silenced { - color: var(--warn); - border-color: var(--warn); + color: var(--MI_THEME-warn); + border-color: var(--MI_THEME-warn); } .moderator { - color: var(--success); - border-color: var(--success); + color: var(--MI_THEME-success); + border-color: var(--MI_THEME-success); } } </style> @@ -694,7 +694,7 @@ definePageMetadata(() => ({ .announcementItem { display: flex; padding: 8px 12px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); cursor: pointer; } </style> diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue index b061b2fa0c..b0651150a6 100644 --- a/packages/frontend/src/pages/admin/_header_.vue +++ b/packages/frontend/src/pages/admin/_header_.vue @@ -182,7 +182,7 @@ onUnmounted(() => { width: calc(var(--height) - (var(--margin) * 2)); box-sizing: border-box; position: relative; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); &:hover { background: rgba(0, 0, 0, 0.05); @@ -287,7 +287,7 @@ onUnmounted(() => { bottom: 0; height: 3px; background: var(--MI_THEME-accent); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); transition: all 0.2s ease; pointer-events: none; } diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue index 1fb49d51d9..a1cd1af102 100644 --- a/packages/frontend/src/pages/admin/index.vue +++ b/packages/frontend/src/pages/admin/index.vue @@ -366,7 +366,7 @@ defineExpose({ display: block; margin: auto; height: 42px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } } } diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue index 8af8d29e1a..37a9cc83e7 100644 --- a/packages/frontend/src/pages/admin/modlog.ModLog.vue +++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue @@ -215,7 +215,7 @@ const props = defineProps<{ .diff { background: #fff; color: #000; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } diff --git a/packages/frontend/src/pages/admin/overview.federation.vue b/packages/frontend/src/pages/admin/overview.federation.vue index 1ada4a5251..9062c73ff6 100644 --- a/packages/frontend/src/pages/admin/overview.federation.vue +++ b/packages/frontend/src/pages/admin/overview.federation.vue @@ -153,7 +153,7 @@ onMounted(async () => { margin-right: 12px; background: var(--MI_THEME-accentedBg); color: var(--MI_THEME-accent); - border-radius: var(--radius); + border-radius: var(--MI-radius); } &.sub { diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue index 12f2c82ff7..a967b305f7 100644 --- a/packages/frontend/src/pages/admin/overview.stats.vue +++ b/packages/frontend/src/pages/admin/overview.stats.vue @@ -116,7 +116,7 @@ onMounted(async () => { margin-right: 12px; background: var(--MI_THEME-accentedBg); color: var(--MI_THEME-accent); - border-radius: var(--radius); + border-radius: var(--MI-radius); } &.users { diff --git a/packages/frontend/src/pages/admin/server-rules.vue b/packages/frontend/src/pages/admin/server-rules.vue index 1ce7190d9c..6c1227b3cf 100644 --- a/packages/frontend/src/pages/admin/server-rules.vue +++ b/packages/frontend/src/pages/admin/server-rules.vue @@ -104,7 +104,7 @@ definePageMetadata(() => ({ height: 28px; align-items: center; justify-content: center; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); margin-right: 8px; } @@ -119,7 +119,7 @@ definePageMetadata(() => ({ height: 40px; color: var(--MI_THEME-error); margin-left: auto; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); &:hover { background: var(--MI_THEME-X5); diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue index fbfbb6edf7..350f772d65 100644 --- a/packages/frontend/src/pages/antenna-timeline.vue +++ b/packages/frontend/src/pages/antenna-timeline.vue @@ -111,7 +111,7 @@ definePageMetadata(() => ({ display: block; margin: var(--MI-margin) auto 0 auto; padding: 8px 16px; - border-radius: var(--radius-xl); + border-radius: var(--MI-radius-xl); } .tl { diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue index 6193e8857e..9cd2546312 100644 --- a/packages/frontend/src/pages/channel.vue +++ b/packages/frontend/src/pages/channel.vue @@ -352,7 +352,7 @@ definePageMetadata(() => ({ padding: 8px 12px; font-size: 80%; background: rgba(0, 0, 0, 0.7); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); color: #fff; } @@ -367,7 +367,7 @@ definePageMetadata(() => ({ left: 16px; background: rgba(0, 0, 0, 0.7); color: var(--MI_THEME-warn); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); font-weight: bold; font-size: 1em; padding: 4px 7px; diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue index 604abba562..9d74a47ec6 100644 --- a/packages/frontend/src/pages/drive.file.info.vue +++ b/packages/frontend/src/pages/drive.file.info.vue @@ -258,7 +258,7 @@ onMounted(async () => { .fileQuickActionsOthersButton { padding: .5rem; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); &:hover, &:focus-visible { diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue index 7bcd5addef..beb8914d65 100644 --- a/packages/frontend/src/pages/emoji-edit-dialog.vue +++ b/packages/frontend/src/pages/emoji-edit-dialog.vue @@ -212,7 +212,7 @@ async function del() { .imgContainer { padding: 8px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .img { diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue index 458642699e..d2d9b2a226 100644 --- a/packages/frontend/src/pages/emojis.emoji.vue +++ b/packages/frontend/src/pages/emojis.emoji.vue @@ -59,7 +59,7 @@ function menu(ev) { padding: 12px; text-align: left; background: var(--MI_THEME-panel); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); &:hover { border-color: var(--MI_THEME-accent); diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue index 400dfdbe6d..ffa1e648c7 100644 --- a/packages/frontend/src/pages/follow-requests.vue +++ b/packages/frontend/src/pages/follow-requests.vue @@ -115,7 +115,7 @@ definePageMetadata(() => ({ margin: 0 12px 0 0; width: 42px; height: 42px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } > .body { diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue index d45f572739..c3ab149ec2 100644 --- a/packages/frontend/src/pages/following-feed.vue +++ b/packages/frontend/src/pages/following-feed.vue @@ -226,7 +226,7 @@ definePageMetadata(() => ({ // The universal layout inserts a "spacer" thing that causes a stray scroll bar. // We have to create fake "space" for it to "roll up" and back into the viewport, which removes the scrollbar. - margin-bottom: calc(-1 * var(--minBottomSpacing)); + margin-bottom: calc(-1 * var(--MI-minBottomSpacing)); // Some "just in case" backup properties. // These should not be needed, but help to maintain the layout if the above trick ever stops working. @@ -277,6 +277,6 @@ definePageMetadata(() => ({ } .panel { - background: var(--panel); + background: var(--MI_THEME-panel); } </style> diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue index 78d765df80..96aebb14d2 100644 --- a/packages/frontend/src/pages/instance-info.vue +++ b/packages/frontend/src/pages/instance-info.vue @@ -461,7 +461,7 @@ definePageMetadata(() => ({ display: block; margin: 0 16px 0 0; height: 64px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } > .name { diff --git a/packages/frontend/src/pages/invite.vue b/packages/frontend/src/pages/invite.vue index ef485a9446..47f6e497b5 100644 --- a/packages/frontend/src/pages/invite.vue +++ b/packages/frontend/src/pages/invite.vue @@ -115,6 +115,6 @@ definePageMetadata(() => ({ width: 128px; height: 128px; margin-bottom: 16px; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } </style> diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue index cab807d610..2bcf16e668 100644 --- a/packages/frontend/src/pages/list.vue +++ b/packages/frontend/src/pages/list.vue @@ -143,7 +143,7 @@ definePageMetadata(() => ({ width: 128px; height: 128px; margin-bottom: 16px; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } .button { diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue index 607843892e..540cb34904 100644 --- a/packages/frontend/src/pages/my-antennas/index.vue +++ b/packages/frontend/src/pages/my-antennas/index.vue @@ -74,7 +74,7 @@ onActivated(() => { display: block; padding: 16px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); &:hover { border: solid 1px var(--MI_THEME-accent); diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue index a6e1f12d8a..d08f6fec5a 100644 --- a/packages/frontend/src/pages/my-lists/index.vue +++ b/packages/frontend/src/pages/my-lists/index.vue @@ -86,7 +86,7 @@ onActivated(() => { display: block; padding: 16px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); margin-bottom: 8px; &:hover { diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue index 28b224f752..1739c2fc00 100644 --- a/packages/frontend/src/pages/page-editor/page-editor.container.vue +++ b/packages/frontend/src/pages/page-editor/page-editor.container.vue @@ -62,7 +62,7 @@ function remove() { overflow: hidden; background: var(--MI_THEME-panel); border: solid 2px var(--MI_THEME-X12); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); &:hover { border: solid 2px var(--MI_THEME-X13); diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue index 9ee3fd7f01..9855442088 100644 --- a/packages/frontend/src/pages/role.vue +++ b/packages/frontend/src/pages/role.vue @@ -115,6 +115,6 @@ definePageMetadata(() => ({ width: 128px; height: 128px; margin-bottom: 16px; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } </style> diff --git a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue index 5c59f4cbe4..518f906d2f 100644 --- a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue +++ b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue @@ -45,7 +45,7 @@ const emit = defineEmits<{ cursor: pointer; padding: 16px 16px 28px 16px; border: solid 2px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); text-align: center; font-size: 90%; overflow: clip; diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue index 4054cd810a..1ad3613e4b 100644 --- a/packages/frontend/src/pages/settings/drive-cleaner.vue +++ b/packages/frontend/src/pages/settings/drive-cleaner.vue @@ -197,7 +197,7 @@ definePageMetadata(() => ({ height: 12px; background: rgba(0, 0, 0, 0.1); overflow: clip; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } .meterValue { diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue index c1e3258631..eef2e5b505 100644 --- a/packages/frontend/src/pages/settings/drive.vue +++ b/packages/frontend/src/pages/settings/drive.vue @@ -152,12 +152,12 @@ definePageMetadata(() => ({ .meter { height: 10px; background: rgba(0, 0, 0, 0.1); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); overflow: clip; } .meterValue { height: 100%; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } </style> diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue index eb5424ea6c..7ddc1eab71 100644 --- a/packages/frontend/src/pages/settings/emoji-picker.vue +++ b/packages/frontend/src/pages/settings/emoji-picker.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps"> <div> - <div v-panel style="border-radius: var(--radius-sm);"> + <div v-panel style="border-radius: var(--MI-radius-sm);"> <Sortable v-model="pinnedEmojisForReaction" :class="$style.emojis" @@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps"> <div> - <div v-panel style="border-radius: var(--radius-sm);"> + <div v-panel style="border-radius: var(--MI-radius-sm);"> <Sortable v-model="pinnedEmojis" :class="$style.emojis" diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue index 34a0245406..9f7842ecdc 100644 --- a/packages/frontend/src/pages/settings/theme.vue +++ b/packages/frontend/src/pages/settings/theme.vue @@ -175,7 +175,7 @@ definePageMetadata(() => ({ <style lang="scss" scoped> .rfqxtzch { - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); > .toggle { position: relative; @@ -255,7 +255,7 @@ definePageMetadata(() => ({ background-color: #E8CDA5; opacity: 0; transition: opacity 200ms ease-in-out !important; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); } .crater--1 { diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue index 21f4548d2e..a530f4b5d6 100644 --- a/packages/frontend/src/pages/theme-editor.vue +++ b/packages/frontend/src/pages/theme-editor.vue @@ -236,7 +236,7 @@ definePageMetadata(() => ({ position: relative; width: 64px; height: 64px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); > .preview { position: absolute; @@ -247,7 +247,7 @@ definePageMetadata(() => ({ margin: auto; width: 42px; height: 42px; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); box-shadow: 0 2px 4px rgb(0 0 0 / 30%); transition: transform 0.15s ease; } @@ -263,10 +263,10 @@ definePageMetadata(() => ({ } &.rounded { - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); > .preview { - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } } diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 92bfd9cdf1..c8e12e2542 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -377,7 +377,7 @@ definePageMetadata(() => ({ display: block; margin: var(--MI-margin) auto 0 auto; padding: 8px 16px; - border-radius: var(--radius-xl); + border-radius: var(--MI-radius-xl); } .postForm { diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue index d7326f0195..85e44b2503 100644 --- a/packages/frontend/src/pages/user-list-timeline.vue +++ b/packages/frontend/src/pages/user-list-timeline.vue @@ -128,7 +128,7 @@ definePageMetadata(() => ({ display: block; margin: var(--MI-margin) auto 0 auto; padding: 8px 16px; - border-radius: var(--radius-xl); + border-radius: var(--MI-radius-xl); } .tl { diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 30ecbd5100..38dc568f82 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -423,7 +423,7 @@ onUnmounted(() => { background-size: cover; background-position: center; pointer-events: none; - filter: var(--blur, blur(10px)) opacity(0.6); + filter: var(--MI-blur, blur(10px)) opacity(0.6); // Funny CSS schenanigans to make background escape container left: -100%; top: -5%; @@ -446,7 +446,7 @@ onUnmounted(() => { > .main { position: relative; overflow: clip; - background: color-mix(in srgb, var(--panel) 65%, transparent); + background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent); > .banner-container { position: relative; @@ -481,7 +481,7 @@ onUnmounted(() => { backdrop-filter: var(--MI-blur, blur(8px)); background: rgba(0, 0, 0, 0.2); padding: 8px; - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); > .menu { vertical-align: bottom; @@ -534,7 +534,7 @@ onUnmounted(() => { color: #fff; -webkit-backdrop-filter: var(--MI-blur, blur(8px)); backdrop-filter: var(--MI-blur, blur(8px)); - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); padding: 4px 8px; font-size: 80%; } @@ -594,7 +594,7 @@ onUnmounted(() => { > .role { border: solid 1px var(--color, var(--MI_THEME-divider)); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); margin-right: 4px; padding: 3px 8px; } @@ -609,7 +609,7 @@ onUnmounted(() => { background: transparent; color: var(--MI_THEME-fg); border: 1px solid var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); padding: 8px; line-height: 0; @@ -819,12 +819,12 @@ onUnmounted(() => { .tab { margin-bottom: calc(var(--margin) / 2); padding: calc(var(--margin) / 2) 0; - background: color-mix(in srgb, var(--bg) 65%, transparent); - backdrop-filter: var(--blur, blur(15px)); - border-radius: var(--radius-sm); + background: color-mix(in srgb, var(--MI_THEME-bg) 65%, transparent); + backdrop-filter: var(--MI-blur, blur(15px)); + border-radius: var(--MI-radius-sm); > button { - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); margin-left: 0.4rem; margin-right: 0.4rem; } @@ -836,7 +836,7 @@ onUnmounted(() => { } .pinnedNote:not(:last-child) { - border-bottom: solid 0.5px var(--divider); + border-bottom: solid 0.5px var(--MI_THEME-divider); } .infoBadges { @@ -855,7 +855,7 @@ onUnmounted(() => { color: #fff; background: rgba(0, 0, 0, 0.7); font-size: 0.7em; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); list-style-type: none; margin-left: 0; } diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue index 23fd4ca23e..7fe90da865 100644 --- a/packages/frontend/src/pages/user/index.files.vue +++ b/packages/frontend/src/pages/user/index.files.vue @@ -96,7 +96,7 @@ onMounted(() => { .img { position: relative; height: 128px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; } diff --git a/packages/frontend/src/pages/user/lists.vue b/packages/frontend/src/pages/user/lists.vue index 46af3f7f37..a3d1974ced 100644 --- a/packages/frontend/src/pages/user/lists.vue +++ b/packages/frontend/src/pages/user/lists.vue @@ -45,7 +45,7 @@ const pagination = { display: block; padding: 16px; border: solid 1px var(--MI_THEME-divider); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); margin-bottom: 8px; &:hover { diff --git a/packages/frontend/src/pages/user/raw.vue b/packages/frontend/src/pages/user/raw.vue index 4499eec10a..f24a215afc 100644 --- a/packages/frontend/src/pages/user/raw.vue +++ b/packages/frontend/src/pages/user/raw.vue @@ -107,7 +107,7 @@ const suspended = computed(() => props.user.isSuspended ?? false); > .moderator { display: inline-block; border: solid 1px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); padding: 2px 6px; font-size: 85%; } diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue index f6b7557e6d..f1842255e0 100644 --- a/packages/frontend/src/pages/welcome.entrance.a.vue +++ b/packages/frontend/src/pages/welcome.entrance.a.vue @@ -167,7 +167,7 @@ misskeyApiGet('federation/instances', { background: var(--MI_THEME-acrylicPanel); -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); overflow: clip; width: 800px; padding: 8px 0; @@ -187,14 +187,14 @@ misskeyApiGet('federation/instances', { padding: 6px 12px 6px 6px; margin: 0 10px 0 0; background: var(--MI_THEME-panel); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); > :global(.icon) { display: inline-block; width: 20px; height: 20px; margin-right: 5px; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } } </style> diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue index 5a03483d0c..460a225f23 100644 --- a/packages/frontend/src/pages/welcome.timeline.note.vue +++ b/packages/frontend/src/pages/welcome.timeline.note.vue @@ -92,7 +92,7 @@ onUpdated(() => { padding: 16px; margin: 0 0 0 auto; max-width: max-content; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } .reactions { diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index a5972276e2..1f62c9ca70 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -78,7 +78,7 @@ class FavIconDot { this.ctx.beginPath(); this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI); const computedStyle = getComputedStyle(document.documentElement); - this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--navIndicator')).toHexString(); + this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--MI_THEME-navIndicator')).toHexString(); this.ctx.strokeStyle = 'white'; this.ctx.fill(); this.ctx.stroke(); @@ -104,7 +104,7 @@ class FavIconDot { this.drawDot(); this.canvas.toDataURL('image/png'); } catch (error) { - return false; + return false; } return true; } @@ -140,6 +140,6 @@ export async function worksOnInstance() { icon = new FavIconDot(); await icon.setup(); } - + return await icon.worksOnInstance(); } diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 116e650666..bc20985a72 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -15,16 +15,15 @@ */ :root { - --radius-xs: 5px; - --radius-sm: 5px; - --radius: 5px; - --radius-md: 5px; - --radius-lg: 5px; - --radius-xl: 5px; - --radius-ellipse: 5px; - --radius-full: 5px; + --MI-radius-xs: 5px; + --MI-radius-sm: 5px; + --MI-radius: 5px; + --MI-radius-md: 5px; + --MI-radius-lg: 5px; + --MI-radius-xl: 5px; + --MI-radius-ellipse: 5px; + --MI-radius-full: 5px; - --MI-radius: 12px; --MI-marginFull: 16px; --MI-marginHalf: 10px; @@ -38,19 +37,19 @@ --MI-margin: var(--MI-marginHalf); } - --avatar: 48px; - --thread-width: 2px; + --MI-avatar: 48px; + --MI-thread-width: 2px; } html.radius-misskey { - --radius-xs: 4px; - --radius-sm: 8px; - --radius: 12px; - --radius-md: 16px; - --radius-lg: 24px; - --radius-xl: 32px; - --radius-ellipse: 999px; - --radius-full: 100%; + --MI-radius-xs: 4px; + --MI-radius-sm: 8px; + --MI-radius: 12px; + --MI-radius-md: 16px; + --MI-radius-lg: 24px; + --MI-radius-xl: 32px; + --MI-radius-ellipse: 999px; + --MI-radius-full: 100%; } ::selection { @@ -197,7 +196,7 @@ rt { display: inline-block; width: 1em; height: 1em; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); background: currentColor; } @@ -210,7 +209,7 @@ rt { min-width: 1em; align-items: center; justify-content: center; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); padding: 0.3em 0.5em; } @@ -400,7 +399,7 @@ rt { padding: 2px 3px; color: var(--MI_THEME-accent); border: solid 1px var(--MI_THEME-accent); - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); vertical-align: top; } @@ -450,7 +449,7 @@ rt { vertical-align: bottom; height: 128px; margin-bottom: 16px; - border-radius: var(--radius-md); + border-radius: var(--MI-radius-md); } } diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index c8c0915dc9..aa72de6089 100644 --- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue @@ -159,7 +159,7 @@ function more() { left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); } @@ -246,7 +246,7 @@ function more() { left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: var(--MI_THEME-accentedBg); } } diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 9481a99231..a5e6a238ae 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -220,7 +220,7 @@ function more(ev: MouseEvent) { left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); } @@ -339,7 +339,7 @@ function more(ev: MouseEvent) { left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: var(--MI_THEME-accentedBg); } } @@ -438,7 +438,7 @@ function more(ev: MouseEvent) { margin: auto; width: 52px; aspect-ratio: 1/1; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); } @@ -534,7 +534,7 @@ function more(ev: MouseEvent) { left: 0; right: 0; bottom: 0; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); background: var(--MI_THEME-accentedBg); } diff --git a/packages/frontend/src/ui/_common_/notification.vue b/packages/frontend/src/ui/_common_/notification.vue index 29ae04387a..2d527c1a65 100644 --- a/packages/frontend/src/ui/_common_/notification.vue +++ b/packages/frontend/src/ui/_common_/notification.vue @@ -22,7 +22,7 @@ defineProps<{ <style lang="scss" module> .root { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); overflow: clip; contain: content; } diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue index d15c497645..12de579d90 100644 --- a/packages/frontend/src/ui/_common_/upload.vue +++ b/packages/frontend/src/ui/_common_/upload.vue @@ -40,7 +40,7 @@ const zIndex = os.claimZIndex('high'); padding: 16px 20px; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .mk-uploader:empty { display: none; @@ -116,7 +116,7 @@ const zIndex = os.claimZIndex('high'); display: block; background: transparent; border: none; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); overflow: hidden; grid-column: 2/3; grid-row: 2/3; diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index dfd6c7bf6f..0d82558a00 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -441,7 +441,7 @@ body { width: 100%; max-width: 60px; margin: auto; - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); background: transparent; color: var(--MI_THEME-fg); @@ -467,7 +467,7 @@ body { &:active { background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5))); - color: var(--fgOnAccent); + color: var(--MI_THEME-fgOnAccent); } } diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue index d89c322c72..2eb232096e 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -287,7 +287,7 @@ function onDrop(ev) { height: 100%; overflow: clip; contain: strict; - border-radius: var(--radius); + border-radius: var(--MI-radius); &.draghover { &::after { @@ -388,7 +388,7 @@ function onDrop(ev) { width: 3px; height: calc(100% - 24px); background: var(--MI_THEME-accent); - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); } .tabShape { diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 0b3f5875f2..c552b65318 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -353,7 +353,7 @@ $widgets-hide-threshold: 1090px; right: 32px; width: 64px; height: 64px; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); font-size: 22px; background: var(--MI_THEME-panel); @@ -413,7 +413,7 @@ $widgets-hide-threshold: 1090px; width: 100%; max-width: 60px; margin: auto; - border-radius: var(--radius-lg); + border-radius: var(--MI-radius-lg); background: transparent; color: var(--MI_THEME-fg); diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue index 371eba4540..f048ac2124 100644 --- a/packages/frontend/src/ui/visitor.vue +++ b/packages/frontend/src/ui/visitor.vue @@ -281,7 +281,7 @@ defineExpose({ padding: 10px; box-sizing: border-box; text-align: center; - border-radius: var(--radius-ellipse); + border-radius: var(--MI-radius-ellipse); &._button { background: var(--MI_THEME-panel); diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue index 7c2a6cc729..757aa6669d 100644 --- a/packages/frontend/src/ui/zen.vue +++ b/packages/frontend/src/ui/zen.vue @@ -80,7 +80,7 @@ document.documentElement.style.overflowY = 'scroll'; width: 100%; max-width: 60px; margin: auto; - border-radius: var(--radius-full); + border-radius: var(--MI-radius-full); background: var(--MI_THEME-panel); color: var(--MI_THEME-fg); right: var(--MI-margin); diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue index 6a1fcfa1a6..946124058c 100644 --- a/packages/frontend/src/widgets/WidgetAiscript.vue +++ b/packages/frontend/src/widgets/WidgetAiscript.vue @@ -145,7 +145,7 @@ defineExpose<WidgetComponentExpose>({ padding: 0 10px; height: 28px; outline: none; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); &:disabled { opacity: 0.7; diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue index 2387cb1ab4..a3fe93f025 100644 --- a/packages/frontend/src/widgets/WidgetCalendar.vue +++ b/packages/frontend/src/widgets/WidgetCalendar.vue @@ -208,7 +208,7 @@ defineExpose<WidgetComponentExpose>({ width: 100%; overflow: hidden; background: var(--MI_THEME-X11); - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } .meterVal { diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue index 3632975048..260dd06c13 100644 --- a/packages/frontend/src/widgets/WidgetFederation.vue +++ b/packages/frontend/src/widgets/WidgetFederation.vue @@ -112,7 +112,7 @@ defineExpose<WidgetComponentExpose>({ width: ($bodyTitleHieght + $bodyInfoHieght); height: ($bodyTitleHieght + $bodyInfoHieght); object-fit: cover; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); margin-right: 8px; } diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue index 014cf01a5d..b99f9bdb2b 100644 --- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue +++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue @@ -66,7 +66,7 @@ defineExpose<WidgetComponentExpose>({ display: inline-block; width: 60px; height: 60px; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); box-sizing: border-box; border: solid 3px #fff; } diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue index 82e03c1c65..5addf1066d 100644 --- a/packages/frontend/src/widgets/WidgetMemo.vue +++ b/packages/frontend/src/widgets/WidgetMemo.vue @@ -107,7 +107,7 @@ defineExpose<WidgetComponentExpose>({ padding: 0 10px; height: 28px; outline: none; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); &:disabled { opacity: 0.7; diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue index 86ece91de6..17bdb156f2 100644 --- a/packages/frontend/src/widgets/WidgetPhotos.vue +++ b/packages/frontend/src/widgets/WidgetPhotos.vue @@ -102,7 +102,7 @@ defineExpose<WidgetComponentExpose>({ .img { border: solid 4px transparent; - border-radius: var(--radius-sm); + border-radius: var(--MI-radius-sm); } } @@ -121,7 +121,7 @@ defineExpose<WidgetComponentExpose>({ background-size: cover; background-clip: content-box; border: solid 2px transparent; - border-radius: var(--radius-xs); + border-radius: var(--MI-radius-xs); } } </style> diff --git a/packages/frontend/src/widgets/WidgetSearch.vue b/packages/frontend/src/widgets/WidgetSearch.vue index 1a328be7ce..974536e880 100644 --- a/packages/frontend/src/widgets/WidgetSearch.vue +++ b/packages/frontend/src/widgets/WidgetSearch.vue @@ -176,6 +176,6 @@ defineExpose<WidgetComponentExpose>({ <style lang="scss" scoped> .skw-search { - border-radius: var(--radius-sm) !important; + border-radius: var(--MI-radius-sm) !important; } </style> |