OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2025-01-17 06:03:02 +01:00
Code Issues Projects Releases Packages Wiki Activity

probably fix most renamed CSS variables

Browse source
This commit is contained in:
dakkar 2024-11-08 17:18:29 +00:00
parent 544fc3239f
commit a930fd9758
147 changed files with 399 additions and 400 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/frontend/src/components/MkAchievements.vue
View file

@ -121,10 +121,10 @@ onMounted(() => {
.iconFrame { .iconFrame {
position: relative; position: relative;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
padding: 6px; padding: 6px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
box-sizing: border-box; box-sizing: border-box;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
@ -191,7 +191,7 @@ onMounted(() => {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
box-shadow: 0 1px 0px #ffffff88 inset; box-shadow: 0 1px 0px #ffffff88 inset;
} }

2
packages/frontend/src/components/MkAsUi.vue
View file

@ -166,6 +166,6 @@ function openPostForm() {
.postForm { .postForm {
background: var(--MI_THEME-bg); background: var(--MI_THEME-bg);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
</style> </style>

2
packages/frontend/src/components/MkAutocomplete.vue
View file

@ -427,7 +427,7 @@ onBeforeUnmount(() => {
max-width: 28px; max-width: 28px;
max-height: 28px; max-height: 28px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
} }
.userName { .userName {

8
packages/frontend/src/components/MkButton.vue
View file

@ -130,7 +130,7 @@ function onMousedown(evt: MouseEvent): void {
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--MI_THEME-buttonBg); background: var(--MI_THEME-buttonBg);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
overflow: clip; overflow: clip;
box-sizing: border-box; box-sizing: border-box;
transition: background 0.1s ease; transition: background 0.1s ease;
@ -162,7 +162,7 @@ function onMousedown(evt: MouseEvent): void {
} }
&.rounded { &.rounded {
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
} }
&.primary { &.primary {
@ -272,7 +272,7 @@ function onMousedown(evt: MouseEvent): void {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
pointer-events: none; pointer-events: none;
} }
@ -281,7 +281,7 @@ function onMousedown(evt: MouseEvent): void {
position: absolute; position: absolute;
width: 2px; width: 2px;
height: 2px; height: 2px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);

2
packages/frontend/src/components/MkChannelFollowButton.vue
View file

@ -74,7 +74,7 @@ async function onClick() {
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
border-radius: var(--radius-xl); border-radius: var(--MI-radius-xl);
background: #fff; background: #fff;
&.full { &.full {

6
packages/frontend/src/components/MkChannelPreview.vue
View file

@ -138,7 +138,7 @@ const bannerStyle = computed(() => {
padding: 8px 12px; padding: 8px 12px;
font-size: 80%; font-size: 80%;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
color: #fff; color: #fff;
} }
@ -149,7 +149,7 @@ const bannerStyle = computed(() => {
left: 16px; left: 16px;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: var(--MI_THEME-warn); color: var(--MI_THEME-warn);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
padding: 4px 7px; padding: 4px 7px;
@ -215,7 +215,7 @@ const bannerStyle = computed(() => {
transform: translate(25%, -25%); transform: translate(25%, -25%);
background-color: var(--MI_THEME-accent); background-color: var(--MI_THEME-accent);
border: solid var(--MI_THEME-bg) 4px; border: solid var(--MI_THEME-bg) 4px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;

4
packages/frontend/src/components/MkChartLegend.vue
View file

@ -54,7 +54,7 @@ defineExpose({
font-size: 85%; font-size: 85%;
padding: 4px 12px 4px 8px; padding: 4px 12px 4px 8px;
border: solid 1px var(--MI_THEME-divider); border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
&:hover { &:hover {
border-color: var(--MI_THEME-inputBorderHover); border-color: var(--MI_THEME-inputBorderHover);
@ -69,7 +69,7 @@ defineExpose({
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
vertical-align: -10%; vertical-align: -10%;
} }
} }

4
packages/frontend/src/components/MkCode.core.vue
View file

@ -95,7 +95,7 @@ watch(() => props.lang, (to) => {
padding: 1em; padding: 1em;
margin: .5em 0; margin: .5em 0;
overflow: auto; overflow: auto;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
@ -140,7 +140,7 @@ watch(() => props.lang, (to) => {
& :global(.shiki) { & :global(.shiki) {
padding: 12px; padding: 12px;
margin: 0; margin: 0;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
border: none; border: none;
min-height: 130px; min-height: 130px;
pointer-events: none; pointer-events: none;

4
packages/frontend/src/components/MkCode.vue
View file

@ -75,7 +75,7 @@ function copy() {
padding: 1em; padding: 1em;
margin: .5em 0; margin: .5em 0;
overflow: auto; overflow: auto;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.codeBlockFallbackCode { .codeBlockFallbackCode {
@ -91,7 +91,7 @@ function copy() {
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
padding: 24px; padding: 24px;
margin-top: 4px; margin-top: 4px;
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);

6
packages/frontend/src/components/MkCodeEditor.vue
View file

@ -158,7 +158,7 @@ watch(v, newValue => {
overflow-y: hidden; overflow-y: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
padding: 0; padding: 0;
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
@ -171,7 +171,7 @@ watch(v, newValue => {
.focused.codeEditorRoot { .focused.codeEditorRoot {
border-color: var(--MI_THEME-accent) !important; border-color: var(--MI_THEME-accent) !important;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.codeEditorScroller { .codeEditorScroller {
@ -199,7 +199,7 @@ watch(v, newValue => {
caret-color: var(--MI_THEME-fg); caret-color: var(--MI_THEME-fg);
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
box-sizing: border-box; box-sizing: border-box;
outline: 0; outline: 0;
min-width: calc(100% - 24px); min-width: calc(100% - 24px);

2
packages/frontend/src/components/MkColorInput.vue
View file

@ -101,7 +101,7 @@ const onInput = () => {
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

6
packages/frontend/src/components/MkContainer.vue
View file

@ -138,7 +138,7 @@ onUnmounted(() => {
position: relative; position: relative;
overflow: clip; overflow: clip;
contain: content; contain: content;
background: color-mix(in srgb, var(--panel) 65%, transparent); background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent);
&.naked { &.naked {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
@ -172,7 +172,7 @@ onUnmounted(() => {
border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider); border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
z-index: 2; z-index: 2;
line-height: 1.4em; 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 { .title {
@ -224,7 +224,7 @@ onUnmounted(() => {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }

2
packages/frontend/src/components/MkDateSeparatedList.vue
View file

@ -190,7 +190,7 @@ export default defineComponent({
} }
.date-separated-list-nogap { .date-separated-list-nogap {
border-radius: var(--radius); border-radius: var(--MI-radius);
> * { > * {
margin: 0 !important; margin: 0 !important;

2
packages/frontend/src/components/MkDialog.vue
View file

@ -186,7 +186,7 @@ function onInputKeydown(evt: KeyboardEvent) {
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-md); border-radius: var(--MI-radius-md);
} }
.icon { .icon {

2
packages/frontend/src/components/MkDonation.vue
View file

@ -83,7 +83,7 @@ function neverShow() {
width: calc(100% - (var(--MI-margin) * 2)); width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px; max-width: 500px;
display: flex; display: flex;
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
.icon { .icon {

2
packages/frontend/src/components/MkDrive.file.vue
View file

@ -112,7 +112,7 @@ function onDragend() {
position: relative; position: relative;
padding: 8px 0 0 0; padding: 8px 0 0 0;
min-height: 180px; min-height: 180px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
cursor: pointer; cursor: pointer;
&:hover { &:hover {

4
packages/frontend/src/components/MkDrive.folder.vue
View file

@ -314,7 +314,7 @@ function onContextmenu(ev: MouseEvent) {
padding: 8px; padding: 8px;
height: 64px; height: 64px;
background: var(--MI_THEME-driveFolderBg); background: var(--MI_THEME-driveFolderBg);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
cursor: pointer; cursor: pointer;
&.draghover { &.draghover {
@ -327,7 +327,7 @@ function onContextmenu(ev: MouseEvent) {
bottom: -4px; bottom: -4px;
left: -4px; left: -4px;
border: 2px dashed var(--MI_THEME-focus); border: 2px dashed var(--MI_THEME-focus);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
} }
} }

2
packages/frontend/src/components/MkDriveFileThumbnail.vue
View file

@ -70,7 +70,7 @@ const isThumbnailAvailable = computed(() => {
position: relative; position: relative;
display: flex; display: flex;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }

4
packages/frontend/src/components/MkEmojiPicker.section.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと --> <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） --> <!-- フォルダの中にはカスタム絵文字だけ（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"> <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 }}) <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> </header>
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</section> </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"> <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 }}) <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> </header>

2
packages/frontend/src/components/MkEmojiPicker.vue
View file

@ -722,7 +722,7 @@ defineExpose({
width: var(--eachSize); width: var(--eachSize);
height: var(--eachSize); height: var(--eachSize);
contain: strict; contain: strict;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
font-size: 24px; font-size: 24px;
&:hover { &:hover {

2
packages/frontend/src/components/MkEmojiPickerDialog.vue
View file

@ -87,7 +87,7 @@ function opening() {
<style lang="scss" module> <style lang="scss" module>
.drawer { .drawer {
border-radius: var(--radius-lg); border-radius: var(--MI-radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }

2
packages/frontend/src/components/MkFileListForAdmin.vue
View file

@ -108,7 +108,7 @@ const props = defineProps<{
padding: 2px 4px; padding: 2px 4px;
background: #ff0000bf; background: #ff0000bf;
color: #fff; color: #fff;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
font-size: 85%; font-size: 85%;
animation: sensitive-blink 1s infinite; animation: sensitive-blink 1s infinite;
} }

6
packages/frontend/src/components/MkFolder.vue
View file

@ -147,7 +147,7 @@ onMounted(() => {
background: var(--MI_THEME-folderHeaderBg); background: var(--MI_THEME-folderHeaderBg);
-webkit-backdrop-filter: var(--MI-blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
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; transition: border-radius 0.3s;
&:hover { &:hover {
@ -165,7 +165,7 @@ onMounted(() => {
} }
&.opened { &.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 { .body {
background: var(--MI_THEME-panel); 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; container-type: inline-size;
&.bgSame { &.bgSame {

2
packages/frontend/src/components/MkFollowButton.vue
View file

@ -170,7 +170,7 @@ onBeforeUnmount(() => {
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
border-radius: var(--radius-xl); border-radius: var(--MI-radius-xl);
background: #fff; background: #fff;
&.full { &.full {

4
packages/frontend/src/components/MkGoogle.vue
View file

@ -42,7 +42,7 @@ const search = () => {
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
border: solid 1px var(--MI_THEME-divider); 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; -webkit-appearance: textfield;
} }
@ -52,7 +52,7 @@ const search = () => {
padding: 0 16px; padding: 0 16px;
border: solid 1px var(--MI_THEME-divider); border: solid 1px var(--MI_THEME-divider);
border-left: none; 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 { &:active {
box-shadow: 0 2px 4px rgba(#000, 0.15) inset; box-shadow: 0 2px 4px rgba(#000, 0.15) inset;

2
packages/frontend/src/components/MkInput.vue
View file

@ -245,7 +245,7 @@ defineExpose({
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

4
packages/frontend/src/components/MkInstanceCardMini.vue
View file

@ -47,14 +47,14 @@ function getInstanceIcon(instance): string {
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
> :global(.icon) { > :global(.icon) {
display: block; display: block;
width: ($bodyTitleHieght + $bodyInfoHieght); width: ($bodyTitleHieght + $bodyInfoHieght);
height: ($bodyTitleHieght + $bodyInfoHieght); height: ($bodyTitleHieght + $bodyInfoHieght);
object-fit: cover; object-fit: cover;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
margin-right: 10px; margin-right: 10px;
} }

2
packages/frontend/src/components/MkInstanceTicker.vue
View file

@ -46,7 +46,7 @@ $height: 2ex;
display: flex; display: flex;
align-items: center; align-items: center;
height: $height; 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; overflow: clip;
color: #fff; color: #fff;
text-shadow: /* .866 ≈ sin(60deg) */ text-shadow: /* .866 ≈ sin(60deg) */

6
packages/frontend/src/components/MkLaunchPad.vue
View file

@ -77,12 +77,12 @@ function close() {
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
text-align: left; text-align: left;
border-radius: var(--radius-md); border-radius: var(--MI-radius-md);
&.asDrawer { &.asDrawer {
width: 100%; width: 100%;
padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px; 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-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
text-align: center; text-align: center;
@ -100,7 +100,7 @@ function close() {
justify-content: center; justify-content: center;
vertical-align: bottom; vertical-align: bottom;
height: 100px; height: 100px;
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;

4
packages/frontend/src/components/MkMediaBanner.vue
View file

@ -53,7 +53,7 @@ async function show() {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
width: 100%; width: 100%;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
margin-top: 4px; margin-top: 4px;
overflow: clip; overflow: clip;
} }
@ -76,7 +76,7 @@ async function show() {
} }
.audio { .audio {
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }
</style> </style>

6
packages/frontend/src/components/MkMediaImage.vue
View file

@ -186,7 +186,7 @@ function showMenu(ev: MouseEvent) {
.hide { .hide {
display: block; display: block;
position: absolute; position: absolute;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
background-color: black; background-color: black;
color: var(--MI_THEME-accentLighten); color: var(--MI_THEME-accentLighten);
font-size: 12px; font-size: 12px;
@ -225,7 +225,7 @@ html[data-color-scheme=light] .visible {
.menu { .menu {
display: block; display: block;
position: absolute; position: absolute;
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--MI-blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
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 { .indicator {
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-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; background-color: black;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
color: var(--MI_THEME-accentLighten); color: var(--MI_THEME-accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;

2
packages/frontend/src/components/MkMediaList.vue
View file

@ -324,7 +324,7 @@ defineExpose({
.media { .media {
overflow: hidden; // clipにするとバグる overflow: hidden; // clipにするとバグる
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
:global(.pswp) { :global(.pswp) {

8
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -539,7 +539,7 @@ onDeactivated(() => {
.hide { .hide {
display: block; display: block;
position: absolute; position: absolute;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
background-color: black; background-color: black;
color: var(--MI_THEME-accentLighten); color: var(--MI_THEME-accentLighten);
font-size: 12px; font-size: 12px;
@ -728,10 +728,10 @@ onDeactivated(() => {
} }
.indicator { .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; background-color: black;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;

4
packages/frontend/src/components/MkMention.vue
View file

@ -46,7 +46,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
.root { .root {
display: inline-block; display: inline-block;
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
color: var(--MI_THEME-mention); color: var(--MI_THEME-mention);
background: color(from var(--MI_THEME-mention) srgb r g b / 0.1); background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
white-space: nowrap; white-space: nowrap;
@ -63,7 +63,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
object-fit: cover; object-fit: cover;
margin: 0 0.2em 0 0; margin: 0 0.2em 0 0;
vertical-align: bottom; vertical-align: bottom;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
} }
.host { .host {

6
packages/frontend/src/components/MkMenu.vue
View file

@ -454,7 +454,7 @@ onBeforeUnmount(() => {
> .menu { > .menu {
padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
width: 100%; width: 100%;
border-radius: var(--radius-lg); border-radius: var(--MI-radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -464,7 +464,7 @@ onBeforeUnmount(() => {
&::before { &::before {
width: calc(100% - 24px); width: calc(100% - 24px);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
> .icon { > .icon {
@ -520,7 +520,7 @@ onBeforeUnmount(() => {
margin: auto; margin: auto;
width: calc(100% - 16px); width: calc(100% - 16px);
height: 100%; height: 100%;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
&:focus-visible { &:focus-visible {

16
packages/frontend/src/components/MkNote.vue
View file

@ -132,7 +132,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton" ref="renoteButton"
:class="$style.footerButton" :class="$style.footerButton"
class="_button" class="_button"
:style="renoted ? 'color: var(--accent) !important;' : ''" :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@click.stop @click.stop
@mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()" @mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()"
> >
@ -922,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 0 4px; padding: 0 4px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
background: var(--MI_THEME-popup); 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); box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
} }
@ -1067,7 +1067,7 @@ function emitUpdReaction(emoji: string, delta: number) {
left: 8px; left: 8px;
width: 5px; width: 5px;
height: calc(100% - 16px); height: calc(100% - 16px);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -1075,8 +1075,8 @@ function emitUpdReaction(emoji: string, delta: number) {
flex-shrink: 0; flex-shrink: 0;
display: block !important; display: block !important;
margin: 0 14px 0 0; margin: 0 14px 0 0;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
position: sticky !important; position: sticky !important;
top: calc(22px + var(--MI-stickyTop, 0px)); top: calc(22px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
@ -1106,7 +1106,7 @@ function emitUpdReaction(emoji: string, delta: number) {
background: var(--MI_THEME-popup); background: var(--MI_THEME-popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); 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); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
@ -1176,7 +1176,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--MI_THEME-renote); border: dashed 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }

14
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -135,7 +135,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton" ref="renoteButton"
class="_button" class="_button"
:class="$style.noteFooterButton" :class="$style.noteFooterButton"
:style="renoted ? 'color: var(--accent) !important;' : ''" :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown.prevent="renoted ? undoRenote() : boostVisibility()" @mousedown.prevent="renoted ? undoRenote() : boostVisibility()"
> >
<i class="ti ti-repeat"></i> <i class="ti ti-repeat"></i>
@ -883,7 +883,7 @@ function animatedMFM() {
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.renoteText { .renoteText {
@ -932,8 +932,8 @@ function animatedMFM() {
.noteHeaderAvatar { .noteHeaderAvatar {
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
} }
.noteHeaderBody { .noteHeaderBody {
@ -957,7 +957,7 @@ function animatedMFM() {
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--MI_THEME-divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.noteHeaderInfo { .noteHeaderInfo {
@ -1017,7 +1017,7 @@ function animatedMFM() {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--MI_THEME-renote); border: dashed 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }
@ -1095,7 +1095,7 @@ function animatedMFM() {
.reactionTab { .reactionTab {
padding: 4px 6px; padding: 4px 6px;
border: solid 1px var(--MI_THEME-divider); border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.reactionTabActive { .reactionTabActive {

2
packages/frontend/src/components/MkNoteHeader.vue
View file

@ -92,7 +92,7 @@ const mock = inject<boolean>('mock', false);
padding: 1px 6px; padding: 1px 6px;
font-size: 80%; font-size: 80%;
border: solid 0.5px var(--MI_THEME-divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.username { .username {

2
packages/frontend/src/components/MkNotePreview.vue
View file

@ -56,7 +56,7 @@ const props = defineProps<{
margin: 0 10px 0 0 !important; margin: 0 10px 0 0 !important;
width: 40px !important; width: 40px !important;
height: 40px !important; height: 40px !important;
border-radius: var(--radius-sm) !important; border-radius: var(--MI-radius-sm) !important;
pointer-events: none !important; pointer-events: none !important;
} }

2
packages/frontend/src/components/MkNoteSimple.vue
View file

@ -56,7 +56,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
position: sticky !important; position: sticky !important;
top: calc(16px + var(--MI-stickyTop, 0px)); top: calc(16px + var(--MI-stickyTop, 0px));
left: 0; left: 0;

12
packages/frontend/src/components/MkNoteSub.vue
View file

@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton" ref="renoteButton"
class="_button" class="_button"
:class="$style.noteFooterButton" :class="$style.noteFooterButton"
:style="renoted ? 'color: var(--accent) !important;' : ''" :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown="renoted ? undoRenote() : boostVisibility()" @mousedown="renoted ? undoRenote() : boostVisibility()"
> >
<i class="ph-rocket-launch ph-bold ph-lg"></i> <i class="ph-rocket-launch ph-bold ph-lg"></i>
@ -438,7 +438,7 @@ if (props.detail) {
left: 8px; left: 8px;
width: 5px; width: 5px;
height: calc(100% - 8px); height: calc(100% - 8px);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -448,7 +448,7 @@ if (props.detail) {
margin: 0 8px 0 0; margin: 0 8px 0 0;
width: 38px; width: 38px;
height: 38px; height: 38px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.body { .body {
@ -475,7 +475,7 @@ if (props.detail) {
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }
@ -493,7 +493,7 @@ if (props.detail) {
opacity: 0.7; opacity: 0.7;
&.reacted { &.reacted {
color: var(--accent); color: var(--MI_THEME-accent);
} }
} }
@ -533,6 +533,6 @@ if (props.detail) {
padding: 8px !important; padding: 8px !important;
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
margin: 8px 8px 0 8px; margin: 8px 8px 0 8px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
</style> </style>

2
packages/frontend/src/components/MkNotes.vue
View file

@ -61,7 +61,7 @@ defineExpose({
<style lang="scss" module> <style lang="scss" module>
.root { .root {
&.noGap { &.noGap {
border-radius: var(--radius); border-radius: var(--MI-radius);
> .notes { > .notes {
background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent); background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent);

8
packages/frontend/src/components/MkNotification.vue
View file

@ -267,7 +267,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
width: 80%; width: 80%;
height: 80%; height: 80%;
font-size: 15px; font-size: 15px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
color: #fff; color: #fff;
} }
@ -284,7 +284,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
} }
.icon_app { .icon_app {
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.subIcon { .subIcon {
@ -295,7 +295,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
width: 20px; width: 20px;
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
box-shadow: 0 0 0 3px var(--MI_THEME-panel); box-shadow: 0 0 0 3px var(--MI_THEME-panel);
font-size: 11px; font-size: 11px;
@ -448,7 +448,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
width: 20px; width: 20px;
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
box-shadow: 0 0 0 3px var(--MI_THEME-panel); box-shadow: 0 0 0 3px var(--MI_THEME-panel);
font-size: 11px; font-size: 11px;

2
packages/frontend/src/components/MkOmit.vue
View file

@ -69,7 +69,7 @@ onUnmounted(() => {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }

6
packages/frontend/src/components/MkPoll.vue
View file

@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<p v-if="!readOnly" :class="$style.info"> <p v-if="!readOnly" :class="$style.info">
<span>{{ i18n.tsx._poll.totalVotes({ n: total }) }}</span> <span>{{ i18n.tsx._poll.totalVotes({ n: total }) }}</span>
<span v-if="poll.multiple"> · </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> <span> · </span>
<a v-if="!closed && !isVoted" style="color: inherit;" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a> <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> <span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
@ -141,7 +141,7 @@ const refreshVotes = async () => {
padding: 4px; padding: 4px;
//border: solid 0.5px var(--MI_THEME-divider); //border: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-accentedBg); background: var(--MI_THEME-accentedBg);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
overflow: clip; overflow: clip;
cursor: pointer; cursor: pointer;
} }
@ -161,7 +161,7 @@ const refreshVotes = async () => {
display: inline-block; display: inline-block;
padding: 3px 5px; padding: 3px 5px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.info { .info {

2
packages/frontend/src/components/MkPopupMenu.vue
View file

@ -73,7 +73,7 @@ function close() {
<style lang="scss" module> <style lang="scss" module>
.drawer { .drawer {
border-radius: var(--radius-lg); border-radius: var(--MI-radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }

14
packages/frontend/src/components/MkPostForm.vue
View file

@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAcct :user="u"/> <MkAcct :user="u"/>
<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button> <button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
</span> </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>
</div> </div>
<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo> <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; left: 12px;
width: 5px; width: 5px;
height: 100% ; height: 100% ;
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -1215,7 +1215,7 @@ defineExpose({
padding: 0 12px; padding: 0 12px;
line-height: 34px; line-height: 34px;
font-weight: bold; font-weight: bold;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
min-width: 90px; min-width: 90px;
box-sizing: border-box; box-sizing: border-box;
color: var(--MI_THEME-fgOnAccent); color: var(--MI_THEME-fgOnAccent);
@ -1225,7 +1225,7 @@ defineExpose({
.headerRightItem { .headerRightItem {
margin: 0; margin: 0;
padding: 8px; padding: 8px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
&:hover { &:hover {
background: var(--MI_THEME-X5); background: var(--MI_THEME-X5);
@ -1291,7 +1291,7 @@ defineExpose({
.visibleUser { .visibleUser {
margin-right: 14px; margin-right: 14px;
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
background: var(--MI_THEME-X4); background: var(--MI_THEME-X4);
} }
@ -1363,7 +1363,7 @@ defineExpose({
padding: 4px 6px; padding: 4px 6px;
font-size: .9em; font-size: .9em;
color: var(--MI_THEME-warn); color: var(--MI_THEME-warn);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
min-width: 1.6em; min-width: 1.6em;
text-align: center; text-align: center;
@ -1403,7 +1403,7 @@ defineExpose({
font-size: 1em; font-size: 1em;
width: auto; width: auto;
height: 100%; height: 100%;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
&:hover { &:hover {
background: var(--MI_THEME-X5); background: var(--MI_THEME-X5);

2
packages/frontend/src/components/MkPostFormAttaches.vue
View file

@ -203,7 +203,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | Keyboar
width: 64px; width: 64px;
height: 64px; height: 64px;
margin-right: 4px; margin-right: 4px;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
overflow: hidden; overflow: hidden;
cursor: move; cursor: move;

6
packages/frontend/src/components/MkRadio.vue
View file

@ -56,7 +56,7 @@ function toggle(): void {
background-color: var(--MI_THEME-panel); background-color: var(--MI_THEME-panel);
background-clip: padding-box !important; background-clip: padding-box !important;
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
font-size: 90%; font-size: 90%;
transition: all 0.2s; transition: all 0.2s;
user-select: none; user-select: none;
@ -107,7 +107,7 @@ function toggle(): void {
height: 14px; height: 14px;
background: none; background: none;
border: solid 2px var(--MI_THEME-inputBorder); border: solid 2px var(--MI_THEME-inputBorder);
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
transition: inherit; transition: inherit;
&::after { &::after {
@ -118,7 +118,7 @@ function toggle(): void {
right: 3px; right: 3px;
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

8
packages/frontend/src/components/MkRange.vue
View file

@ -226,7 +226,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
padding: 7px 12px; padding: 7px 12px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
> .container { > .container {
position: relative; position: relative;
@ -242,7 +242,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
width: calc(100% - #{$thumbWidth}); width: calc(100% - #{$thumbWidth});
height: 3px; height: 3px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
overflow: clip; overflow: clip;
> .highlight { > .highlight {
@ -273,7 +273,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
height: 3px; height: 3px;
margin-left: - math.div($tickWidth, 2); margin-left: - math.div($tickWidth, 2);
background: var(--MI_THEME-divider); 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; height: $thumbHeight;
cursor: grab; cursor: grab;
background: var(--MI_THEME-accent); background: var(--MI_THEME-accent);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
&:hover { &:hover {
background: var(--MI_THEME-accentLighten); background: var(--MI_THEME-accentLighten);

6
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -175,7 +175,7 @@ if (!mock) {
margin: 2px; margin: 2px;
padding: 0 6px; padding: 0 6px;
font-size: 1.5em; font-size: 1.5em;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -194,7 +194,7 @@ if (!mock) {
&.small { &.small {
height: 32px; height: 32px;
font-size: 1em; font-size: 1em;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
> .count { > .count {
font-size: 0.9em; font-size: 0.9em;
@ -205,7 +205,7 @@ if (!mock) {
&.large { &.large {
height: 52px; height: 52px;
font-size: 2em; font-size: 2em;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
> .count { > .count {
font-size: 0.6em; font-size: 0.6em;

2
packages/frontend/src/components/MkSelect.vue
View file

@ -259,7 +259,7 @@ function show() {
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

2
packages/frontend/src/components/MkSignupDialog.rules.vue
View file

@ -183,7 +183,7 @@ async function updateAgreeNote(v: boolean) {
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
} }
} }

2
packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
View file

@ -71,7 +71,7 @@ function close() {
width: calc(100% - (var(--MI-margin) * 2)); width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px; max-width: 500px;
display: flex; display: flex;
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
.icon { .icon {

8
packages/frontend/src/components/MkSubNoteContent.vue
View file

@ -117,7 +117,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
@ -142,8 +142,8 @@ watch(() => props.expandAllCws, (expandAllCws) => {
} }
.translation { .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
} }
@ -164,7 +164,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
background: var(--MI_THEME-popup); background: var(--MI_THEME-popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }

4
packages/frontend/src/components/MkSuperMenu.vue
View file

@ -59,7 +59,7 @@ defineProps<{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 9px 16px 9px 8px; padding: 9px 16px 9px 8px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
font-size: 0.9em; font-size: 0.9em;
&:hover { &:hover {
@ -145,7 +145,7 @@ defineProps<{
height: 60px; height: 60px;
aspect-ratio: 1; aspect-ratio: 1;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
} }
> .text { > .text {

4
packages/frontend/src/components/MkSwitch.button.vue
View file

@ -54,7 +54,7 @@ const toggle = () => {
background: var(--MI_THEME-switchOffBg); background: var(--MI_THEME-switchOffBg);
background-clip: content-box; background-clip: content-box;
border: solid 1px var(--MI_THEME-switchOffBg); border: solid 1px var(--MI_THEME-switchOffBg);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
cursor: pointer; cursor: pointer;
transition: inherit; transition: inherit;
user-select: none; user-select: none;
@ -75,7 +75,7 @@ const toggle = () => {
top: 3px; top: 3px;
width: calc(var(--height) - 6px); width: calc(var(--height) - 6px);
height: 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; transition: all 0.2s ease;
&:not(.knobChecked) { &:not(.knobChecked) {

2
packages/frontend/src/components/MkTab.vue
View file

@ -39,7 +39,7 @@ export default defineComponent({
> button { > button {
flex: 1; flex: 1;
padding: 10px 8px; padding: 10px 8px;
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
&:disabled { &:disabled {
opacity: 1 !important; opacity: 1 !important;

2
packages/frontend/src/components/MkTextarea.vue
View file

@ -182,7 +182,7 @@ onUnmounted(() => {
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

2
packages/frontend/src/components/MkToast.vue
View file

@ -70,7 +70,7 @@ onMounted(() => {
max-width: calc(100% - 32px); max-width: calc(100% - 32px);
width: min-content; width: min-content;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;

2
packages/frontend/src/components/MkTooltip.vue
View file

@ -109,7 +109,7 @@ onUnmounted(() => {
padding: 8px 12px; padding: 8px 12px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
border: solid 0.5px var(--MI_THEME-divider); border: solid 0.5px var(--MI_THEME-divider);
pointer-events: none; pointer-events: none;
transform-origin: center center; transform-origin: center center;

2
packages/frontend/src/components/MkTutorialDialog.PostNote.vue
View file

@ -116,7 +116,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
left: 0; left: 0;
right: 0; right: 0;
bottom: 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)); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
} }

2
packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
View file

@ -126,7 +126,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
left: 0; left: 0;
right: 0; right: 0;
bottom: 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)); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
} }

2
packages/frontend/src/components/MkTutorialDialog.Timeline.vue
View file

@ -66,7 +66,7 @@ import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js';
left: 0; left: 0;
right: 0; right: 0;
bottom: 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)); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
} }

2
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -241,7 +241,7 @@ onUnmounted(() => {
display: block; display: block;
font-size: 14px; font-size: 14px;
box-shadow: 0 0 0 1px var(--MI_THEME-divider); box-shadow: 0 0 0 1px var(--MI_THEME-divider);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
&:hover { &:hover {

6
packages/frontend/src/components/MkUrlWarningDialog.vue
View file

@ -94,7 +94,7 @@ onBeforeUnmount(() => {
min-width: 320px; min-width: 320px;
max-width: 480px; max-width: 480px;
box-sizing: border-box; box-sizing: border-box;
background: var(--panel); background: var(--MI_THEME-panel);
border-radius: 16px; border-radius: 16px;
} }
@ -106,7 +106,7 @@ onBeforeUnmount(() => {
.icon { .icon {
font-size: 18px; font-size: 18px;
color: var(--warn); color: var(--MI_THEME-warn);
} }
.title { .title {
@ -117,7 +117,7 @@ onBeforeUnmount(() => {
.urlAddress { .urlAddress {
padding: 10px 14px; padding: 10px 14px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--divider); border: 1px solid var(--MI_THEME-divider);
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }

2
packages/frontend/src/components/MkUserCardMini.vue
View file

@ -50,7 +50,7 @@ $bodyInfoHieght: 16px;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.avatar { .avatar {

8
packages/frontend/src/components/MkUserInfo.vue
View file

@ -75,8 +75,8 @@ defineProps<{
top: 62px; top: 62px;
left: 13px; left: 13px;
z-index: 2; z-index: 2;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
border: solid 4px var(--MI_THEME-panel); border: solid 4px var(--MI_THEME-panel);
} }
@ -110,7 +110,7 @@ defineProps<{
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.description { .description {
@ -169,7 +169,7 @@ defineProps<{
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
list-style-type: none; list-style-type: none;
margin-left: 0; margin-left: 0;
} }

2
packages/frontend/src/components/MkUserOnlineIndicator.vue
View file

@ -40,7 +40,7 @@ const text = computed(() => {
// sharkey: the comment mentions something about 100% radius not behaving correctly on blink. // 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 // 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 { &.status_online {
background: #58d4c9; background: #58d4c9;

16
packages/frontend/src/components/MkUserPopup.vue
View file

@ -160,7 +160,7 @@ onMounted(() => {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.locked:first-child { .locked:first-child {
@ -171,7 +171,7 @@ onMounted(() => {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.locked:not(:first-child) { .locked:not(:first-child) {
@ -182,7 +182,7 @@ onMounted(() => {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.avatarBack { .avatarBack {
@ -202,8 +202,8 @@ onMounted(() => {
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
z-index: 2; z-index: 2;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
} }
.title { .title {
@ -238,8 +238,8 @@ onMounted(() => {
.fields { .fields {
font-size: 0.8em; font-size: 0.8em;
padding: 16px; padding: 16px;
border-top: solid 1px var(--divider); border-top: solid 1px var(--MI_THEME-divider);
border-bottom: solid 1px var(--divider); border-bottom: solid 1px var(--MI_THEME-divider);
} }
.field { .field {
@ -305,7 +305,7 @@ onMounted(() => {
right: 44px; right: 44px;
padding: 6px; padding: 6px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
} }
.follow { .follow {

4
packages/frontend/src/components/MkUserSetupDialog.User.vue
View file

@ -59,8 +59,8 @@ async function follow() {
top: 30px; top: 30px;
left: 13px; left: 13px;
z-index: 2; z-index: 2;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
border: solid 4px var(--MI_THEME-panel); border: solid 4px var(--MI_THEME-panel);
} }

2
packages/frontend/src/components/MkVisibilityPicker.vue
View file

@ -82,7 +82,7 @@ function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
&.asDrawer { &.asDrawer {
padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
width: 100%; width: 100%;
border-radius: var(--radius-lg); border-radius: var(--MI-radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;

2
packages/frontend/src/components/MkVisitorDashboard.vue
View file

@ -140,7 +140,7 @@ function showMenu(ev: MouseEvent) {
right: 16px; right: 16px;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
font-size: 18px; font-size: 18px;
z-index: 50; z-index: 50;
} }

2
packages/frontend/src/components/MkWidgets.vue
View file

@ -158,7 +158,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
height: 32px; height: 32px;
color: #fff; color: #fff;
background: rgba(#000, 0.7); background: rgba(#000, 0.7);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
&Config { &Config {

2
packages/frontend/src/components/SkInstanceTicker.vue
View file

@ -45,7 +45,7 @@ const bg = {
display: flex; display: flex;
align-items: center; align-items: center;
height: 1.5ex; height: 1.5ex;
border-radius: var(--radius-xl); border-radius: var(--MI-radius-xl);
padding: 4px; padding: 4px;
overflow: clip; overflow: clip;
color: #fff; color: #fff;

6
packages/frontend/src/components/SkMfmWindow.vue
View file

@ -494,8 +494,8 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
padding: 16px; padding: 16px;
font-weight: bold; font-weight: bold;
-webkit-backdrop-filter: var(--blur, blur(10px)); -webkit-backdrop-filter: var(--MI-blur, blur(10px));
backdrop-filter: var(--blur, blur(10px)); backdrop-filter: var(--MI-blur, blur(10px));
background-color: var(--X16); background-color: var(--X16);
} }
@ -507,7 +507,7 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[
} }
> .preview { > .preview {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
padding: 16px; padding: 16px;
} }
} }

48
packages/frontend/src/components/SkModPlayer.vue
View file

@ -440,9 +440,9 @@ onDeactivated(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.hide { .hide {
border-radius: var(--radius-sm) !important; border-radius: var(--MI-radius-sm) !important;
background-color: black !important; background-color: black !important;
color: var(--accentLighten) !important; color: var(--MI_THEME-accentLighten) !important;
font-size: 12px !important; font-size: 12px !important;
} }
@ -455,9 +455,9 @@ onDeactivated(() => {
> i { > i {
display: block; display: block;
position: absolute; position: absolute;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
background-color: var(--fg); background-color: var(--MI_THEME-fg);
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
font-size: 14px; font-size: 14px;
opacity: .5; opacity: .5;
padding: 3px 6px; padding: 3px 6px;
@ -518,7 +518,7 @@ onDeactivated(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgba(64, 64, 64, 0.3); background: rgba(64, 64, 64, 0.3);
backdrop-filter: var(--modalBgFilter); backdrop-filter: var(--MI-modalBgFilter);
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
@ -536,7 +536,7 @@ onDeactivated(() => {
> .controls { > .controls {
display: flex; display: flex;
width: 100%; width: 100%;
background-color: var(--bg); background-color: var(--MI_THEME-bg);
z-index: 5; z-index: 5;
> * { > * {
@ -546,11 +546,11 @@ onDeactivated(() => {
> button, a { > button, a {
border: none; border: none;
background-color: transparent; background-color: transparent;
color: var(--accent); color: var(--MI_THEME-accent);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--fg); background-color: var(--MI_THEME-fg);
} }
} }
@ -578,11 +578,11 @@ onDeactivated(() => {
outline: none; outline: none;
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
background: var(--bg); background: var(--MI_THEME-bg);
} }
&::-ms-fill-lower, &::-ms-fill-upper { &::-ms-fill-lower, &::-ms-fill-upper {
background: var(--bg); background: var(--MI_THEME-bg);
} }
} }
@ -592,8 +592,8 @@ onDeactivated(() => {
cursor: pointer; cursor: pointer;
border-radius: 0; border-radius: 0;
animate: 0.2s; animate: 0.2s;
background: var(--bg); background: var(--MI_THEME-bg);
border: 1px solid var(--fg); border: 1px solid var(--MI_THEME-fg);
overflow-x: hidden; overflow-x: hidden;
} }
@ -602,10 +602,10 @@ onDeactivated(() => {
height: 100%; height: 100%;
width: 14px; width: 14px;
border-radius: 0; border-radius: 0;
background: var(--accentLighten); background: var(--MI_THEME-accentLighten);
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -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)); 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; z-index: 1;
} }
@ -616,14 +616,14 @@ onDeactivated(() => {
cursor: pointer; cursor: pointer;
border-radius: 0; border-radius: 0;
animate: 0.2s; animate: 0.2s;
background: var(--bg); background: var(--MI_THEME-bg);
border: 1px solid var(--fg); border: 1px solid var(--MI_THEME-fg);
} }
&::-moz-range-progress { &::-moz-range-progress {
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
background: var(--accent); background: var(--MI_THEME-accent);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@ -631,7 +631,7 @@ onDeactivated(() => {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
width: 14px; width: 14px;
background: var(--accentLighten); background: var(--MI_THEME-accentLighten);
cursor: pointer; cursor: pointer;
} }
@ -647,14 +647,14 @@ onDeactivated(() => {
} }
&::-ms-fill-lower { &::-ms-fill-lower {
background: var(--accent); background: var(--MI_THEME-accent);
border: 1px solid var(--fg); border: 1px solid var(--MI_THEME-fg);
border-radius: 0; border-radius: 0;
} }
&::-ms-fill-upper { &::-ms-fill-upper {
background: var(--bg); background: var(--MI_THEME-bg);
border: 1px solid var(--fg); border: 1px solid var(--MI_THEME-fg);
border-radius: 0; border-radius: 0;
} }
@ -664,7 +664,7 @@ onDeactivated(() => {
height: 100%; height: 100%;
width: 14px; width: 14px;
border-radius: 0; border-radius: 0;
background: var(--accentLighten); background: var(--MI_THEME-accentLighten);
cursor: pointer; cursor: pointer;
} }

48
packages/frontend/src/components/SkNote.vue
View file

@ -158,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</button> </button>
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()" @click.stop> <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-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-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></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> <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; padding: 0 4px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
background: var(--MI_THEME-popup); 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); box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
} }
@ -977,7 +977,7 @@ function emitUpdReaction(emoji: string, delta: number) {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; 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; line-height: 28px;
white-space: pre; white-space: pre;
color: var(--MI_THEME-renote); color: var(--MI_THEME-renote);
@ -986,9 +986,9 @@ function emitUpdReaction(emoji: string, delta: number) {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(32px + .5 * var(--avatar)); left: calc(32px + .5 * var(--MI-avatar));
bottom: -8px; 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 { &:first-child {
@ -1077,9 +1077,9 @@ function emitUpdReaction(emoji: string, delta: number) {
.collapsedInReplyToLine { .collapsedInReplyToLine {
position: absolute; position: absolute;
left: calc(32px + .5 * var(--avatar)); left: calc(32px + .5 * var(--MI-avatar));
// using solid instead of dotted, stylelistic choice // 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) top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote)
height: 28px; height: 28px;
} }
@ -1095,7 +1095,7 @@ function emitUpdReaction(emoji: string, delta: number) {
left: 8px; left: 8px;
width: 5px; width: 5px;
height: calc(100% - 16px); height: calc(100% - 16px);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -1104,8 +1104,8 @@ function emitUpdReaction(emoji: string, delta: number) {
display: block !important; display: block !important;
position: sticky !important; position: sticky !important;
margin: 0 14px 0 0; margin: 0 14px 0 0;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
position: sticky !important; position: sticky !important;
top: calc(22px + var(--MI-stickyTop, 0px)); top: calc(22px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
@ -1141,7 +1141,7 @@ function emitUpdReaction(emoji: string, delta: number) {
background: var(--MI_THEME-popup); background: var(--MI_THEME-popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); 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); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; 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%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
@ -1211,7 +1211,7 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 16px; padding: 16px;
// Made border solid, stylistic choice // Made border solid, stylistic choice
border: solid 1px var(--MI_THEME-renote); border: solid 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }
@ -1247,14 +1247,14 @@ function emitUpdReaction(emoji: string, delta: number) {
@container (max-width: 580px) { @container (max-width: 580px) {
.root { .root {
font-size: 0.95em; font-size: 0.95em;
--avatar: 46px; --MI-avatar: 46px;
} }
.renote { .renote {
padding: 24px 26px 0 calc(26px + var(--avatar) + 14px); padding: 24px 26px 0 calc(26px + var(--MI-avatar) + 14px);
&::before { &::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 { .collapsedInReplyToLine {
left: calc(26px + .5 * var(--avatar)); left: calc(26px + .5 * var(--MI-avatar));
} }
.article { .article {
@ -1289,26 +1289,26 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
.collapsedInReplyToLine { .collapsedInReplyToLine {
left: calc(25px + .5 * var(--avatar)); left: calc(25px + .5 * var(--MI-avatar));
} }
} }
@container (max-width: 500px) { @container (max-width: 500px) {
.renote { .renote {
padding: 23px 25px 0 calc(25px + var(--avatar) + 14px); padding: 23px 25px 0 calc(25px + var(--MI-avatar) + 14px);
&::before { &::before {
left: calc(25px + .5 * var(--avatar)); left: calc(25px + .5 * var(--MI-avatar));
} }
} }
} }
@container (max-width: 480px) { @container (max-width: 480px) {
.renote { .renote {
padding: 22px 24px 0 calc(24px + var(--avatar) + 14px); padding: 22px 24px 0 calc(24px + var(--MI-avatar) + 14px);
&::before { &::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 { .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 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) { @container (max-width: 450px) {
.root { .root {
--avatar: 44px; --MI-avatar: 44px;
} }
.avatar { .avatar {

14
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -913,7 +913,7 @@ onUnmounted(() => {
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.renoteText { .renoteText {
@ -985,8 +985,8 @@ onUnmounted(() => {
.noteHeaderAvatar { .noteHeaderAvatar {
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
} }
.noteHeaderBody { .noteHeaderBody {
@ -1010,7 +1010,7 @@ onUnmounted(() => {
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--MI_THEME-divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.noteHeaderInfo { .noteHeaderInfo {
@ -1077,7 +1077,7 @@ onUnmounted(() => {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: solid 1px var(--MI_THEME-renote); border: solid 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }
@ -1162,7 +1162,7 @@ onUnmounted(() => {
.reactionTab { .reactionTab {
padding: 4px 6px; padding: 4px 6px;
border: solid 1px var(--MI_THEME-divider); border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.reactionTabActive { .reactionTabActive {
@ -1221,7 +1221,7 @@ onUnmounted(() => {
margin: 0 10px 0 0 !important; margin: 0 10px 0 0 !important;
width: 40px !important; width: 40px !important;
height: 40px !important; height: 40px !important;
border-radius: var(--radius-sm) !important; border-radius: var(--MI-radius-sm) !important;
} }
.muted { .muted {

2
packages/frontend/src/components/SkNoteHeader.vue
View file

@ -189,7 +189,7 @@ const mock = inject<boolean>('mock', false);
padding: 1px 6px; padding: 1px 6px;
font-size: 80%; font-size: 80%;
border: solid 0.5px var(--MI_THEME-divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.username { .username {

2
packages/frontend/src/components/SkNoteSimple.vue
View file

@ -61,7 +61,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
position: sticky !important; position: sticky !important;
top: calc(16px + var(--MI-stickyTop, 0px)); top: calc(16px + var(--MI-stickyTop, 0px));
left: 0; left: 0;

46
packages/frontend/src/components/SkNoteSub.vue
View file

@ -426,7 +426,7 @@ if (props.detail) {
padding: 28px 32px; padding: 28px 32px;
position: relative; position: relative;
--reply-indent: calc(.5 * var(--avatar)); --reply-indent: calc(.5 * var(--MI-avatar));
&.children { &.children {
padding: 10px 0 0 8px; padding: 10px 0 0 8px;
@ -434,16 +434,16 @@ if (props.detail) {
&.isReply { &.isReply {
/* @link https://utopia.fyi/clamp/calculator?a=450,580,26—36 */ /* @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 { .line {
position: absolute; position: absolute;
left: calc(32px + .5 * var(--avatar)); left: calc(32px + .5 * var(--MI-avatar));
// using solid instead of dotted, stylelistic choice // 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 + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote) top: calc(28px + var(--MI-avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
bottom: -28px; bottom: -28px;
} }
@ -487,7 +487,7 @@ if (props.detail) {
left: 8px; left: 8px;
width: 5px; width: 5px;
height: calc(100% - 8px); height: calc(100% - 8px);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -495,9 +495,9 @@ if (props.detail) {
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
margin: 0 14px 0 0; margin: 0 14px 0 0;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.body { .body {
@ -541,11 +541,11 @@ if (props.detail) {
@container (max-width: 580px) { @container (max-width: 580px) {
.root { .root {
padding: 28px 26px 0; padding: 28px 26px 0;
--avatar: 46px; --MI-avatar: 46px;
} }
.line { .line {
left: calc(26px + .5 * var(--avatar)); left: calc(26px + .5 * var(--MI-avatar));
} }
} }
@ -555,8 +555,8 @@ if (props.detail) {
} }
.line { .line {
top: calc(23px + var(--avatar)); top: calc(23px + var(--MI-avatar));
left: calc(25px + .5 * var(--avatar)); left: calc(25px + .5 * var(--MI-avatar));
} }
} }
@ -605,14 +605,14 @@ if (props.detail) {
} }
.line { .line {
top: calc(22px + var(--avatar)); top: calc(22px + var(--MI-avatar));
left: calc(24px + .5 * var(--avatar)); left: calc(24px + .5 * var(--MI-avatar));
} }
} }
@container (max-width: 450px) { @container (max-width: 450px) {
.root { .root {
--avatar: 44px; --MI-avatar: 44px;
} }
} }
@ -621,7 +621,7 @@ if (props.detail) {
padding: 8px !important; padding: 8px !important;
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
margin: 8px 8px 0 8px; margin: 8px 8px 0 8px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
// avatar container with line // avatar container with line
@ -633,7 +633,7 @@ if (props.detail) {
.threadLine { .threadLine {
width: 0; width: 0;
flex-grow: 1; 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); margin-left: var(--reply-indent);
} }
@ -642,10 +642,10 @@ if (props.detail) {
} }
.reply:not(:last-child) { .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 { &::before {
left: calc(-1 * var(--thread-width)); left: calc(-1 * var(--MI-thread-width));
} }
} }
@ -654,10 +654,10 @@ if (props.detail) {
content: ''; content: '';
left: 0px; left: 0px;
top: -10px; top: -10px;
height: calc(10px + 10px + .5 * var(--avatar)); height: calc(10px + 10px + .5 * var(--MI-avatar));
width: 15px; width: 15px;
border-left: var(--thread-width) solid var(--MI_THEME-thread); border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
border-bottom: var(--thread-width) solid var(--MI_THEME-thread); border-bottom: var(--MI-thread-width) solid var(--MI_THEME-thread);
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
} }

22
packages/frontend/src/components/SkOldNoteWindow.vue
View file

@ -182,8 +182,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
.noteHeaderAvatar { .noteHeaderAvatar {
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
width: var(--avatar); width: var(--MI-avatar);
height: var(--avatar); height: var(--MI-avatar);
} }
.noteHeaderBody { .noteHeaderBody {
@ -206,8 +206,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
padding: 4px 6px; padding: 4px 6px;
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.noteHeaderInfo { .noteHeaderInfo {
@ -240,19 +240,19 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
} }
.noteReplyTarget { .noteReplyTarget {
color: var(--accent); color: var(--MI_THEME-accent);
margin-right: 0.5em; margin-right: 0.5em;
} }
.rn { .rn {
margin-left: 4px; margin-left: 4px;
font-style: oblique; font-style: oblique;
color: var(--renote); color: var(--MI_THEME-renote);
} }
.translation { .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
} }
@ -267,8 +267,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--renote); border: dashed 1px var(--MI_THEME-renote);
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
overflow: clip; overflow: clip;
} }
@ -287,7 +287,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }

2
packages/frontend/src/components/SkOneko.vue
View file

@ -240,6 +240,6 @@ onMounted(init);
pointer-events: none; pointer-events: none;
image-rendering: pixelated; image-rendering: pixelated;
z-index: 2147483647; 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> </style>

2
packages/frontend/src/components/SkUserRecentNotes.vue
View file

@ -94,7 +94,7 @@ onMounted(async () => {
<style lang="scss" module> <style lang="scss" module>
.panel { .panel {
background: var(--panel); background: var(--MI_THEME-panel);
} }
.userInfo { .userInfo {

2
packages/frontend/src/components/form/link.vue
View file

@ -61,7 +61,7 @@ const props = defineProps<{
box-sizing: border-box; box-sizing: border-box;
padding: 10px 14px; padding: 10px 14px;
background: var(--MI_THEME-folderHeaderBg); background: var(--MI_THEME-folderHeaderBg);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
font-size: 0.9em; font-size: 0.9em;
&:hover { &:hover {

4
packages/frontend/src/components/global/MkAd.vue
View file

@ -175,7 +175,7 @@ function reduceFrequency(): void {
display: block; display: block;
object-fit: contain; object-fit: contain;
margin: auto; margin: auto;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
} }
.i { .i {
@ -185,7 +185,7 @@ function reduceFrequency(): void {
display: grid; display: grid;
place-content: center; place-content: center;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
padding: 2px; padding: 2px;
} }

2
packages/frontend/src/components/global/MkError.vue
View file

@ -44,6 +44,6 @@ const emit = defineEmits<{
width: 128px; width: 128px;
height: 128px; height: 128px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: var(--radius-md); border-radius: var(--MI-radius-md);
} }
</style> </style>

2
packages/frontend/src/components/global/MkMfm.ts
View file

@ -362,7 +362,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
const child = token.children[0]; const child = token.children[0];
const unixtime = parseInt(child.type === 'text' ? child.props.text : ''); const unixtime = parseInt(child.type === 'text' ? child.props.text : '');
return h('span', { 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', { h('i', {
class: 'ti ti-clock', class: 'ti ti-clock',

4
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View file

@ -219,7 +219,7 @@ onUnmounted(() => {
&.active { &.active {
opacity: 1; opacity: 1;
color: var(--accent); color: var(--MI_THEME-accent);
} }
&.animate { &.animate {
@ -249,7 +249,7 @@ onUnmounted(() => {
bottom: 0; bottom: 0;
height: 3px; height: 3px;
background: var(--MI_THEME-accent); background: var(--MI_THEME-accent);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
transition: none; transition: none;
pointer-events: none; pointer-events: none;

2
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -239,7 +239,7 @@ onUnmounted(() => {
width: calc(var(--height) - (var(--margin))); width: calc(var(--height) - (var(--margin)));
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
&:hover { &:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);

2
packages/frontend/src/pages/_error_.vue
View file

@ -83,6 +83,6 @@ definePageMetadata(() => ({
vertical-align: bottom; vertical-align: bottom;
height: 128px; height: 128px;
margin-bottom: 24px; margin-bottom: 24px;
border-radius: var(--radius-md); border-radius: var(--MI-radius-md);
} }
</style> </style>

22
packages/frontend/src/pages/about-sharkey.vue
View file

@ -266,7 +266,7 @@ definePageMetadata(() => ({
.znqjceqz { .znqjceqz {
> .about { > .about {
position: relative; position: relative;
border-radius: var(--radius); border-radius: var(--MI-radius);
> .treasure { > .treasure {
position: absolute; position: absolute;
@ -305,7 +305,7 @@ definePageMetadata(() => ({
display: block; display: block;
width: 80px; width: 80px;
margin: 0 auto; margin: 0 auto;
border-radius: var(--radius-md); border-radius: var(--MI-radius-md);
position: relative; position: relative;
z-index: 1; z-index: 1;
transform: translateX(-10%); transform: translateX(-10%);
@ -355,23 +355,23 @@ definePageMetadata(() => ({
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
background: var(--buttonBg); background: var(--MI_THEME-buttonBg);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: var(--buttonHoverBg); background: var(--MI_THEME-buttonHoverBg);
} }
&.active { &.active {
color: var(--accent); color: var(--MI_THEME-accent);
background: var(--buttonHoverBg); background: var(--MI_THEME-buttonHoverBg);
} }
} }
.contributorAvatar { .contributorAvatar {
width: 30px; width: 30px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
} }
.contributorUsername { .contributorUsername {
@ -388,13 +388,13 @@ definePageMetadata(() => ({
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
background: var(--buttonBg); background: var(--MI_THEME-buttonBg);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
.patronIcon { .patronIcon {
width: 24px; width: 24px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
} }
.patronName { .patronName {

18
packages/frontend/src/pages/about.overview.vue
View file

@ -170,7 +170,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
<style lang="scss" module> <style lang="scss" module>
.banner { .banner {
text-align: center; text-align: center;
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: clip; overflow: clip;
background-color: var(--MI_THEME-panel); background-color: var(--MI_THEME-panel);
background-size: cover; background-size: cover;
@ -181,7 +181,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
display: block; display: block;
margin: 16px auto 0 auto; margin: 16px auto 0 auto;
max-height: 96px; max-height: 96px;
border-radius: var(--radius-sm);; border-radius: var(--MI-radius-sm);;
} }
.bannerName { .bannerName {
@ -220,7 +220,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
justify-content: 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; display: flex;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
background: var(--buttonBg); background: var(--MI_THEME-buttonBg);
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: var(--buttonHoverBg); background: var(--MI_THEME-buttonHoverBg);
} }
&.active { &.active {
color: var(--accent); color: var(--MI_THEME-accent);
background: var(--buttonHoverBg); background: var(--MI_THEME-buttonHoverBg);
} }
} }
.contributorAvatar { .contributorAvatar {
width: 30px; width: 30px;
border-radius: var(--radius-full); border-radius: var(--MI-radius-full);
} }
.contributorUsername { .contributorUsername {

12
packages/frontend/src/pages/admin-user.vue
View file

@ -605,7 +605,7 @@ definePageMetadata(() => ({
> .suspended, > .silenced, > .moderator { > .suspended, > .silenced, > .moderator {
display: inline-block; display: inline-block;
border: solid 1px; border: solid 1px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
padding: 2px 6px; padding: 2px 6px;
font-size: 85%; font-size: 85%;
} }
@ -644,13 +644,13 @@ definePageMetadata(() => ({
.casdwq { .casdwq {
.silenced { .silenced {
color: var(--warn); color: var(--MI_THEME-warn);
border-color: var(--warn); border-color: var(--MI_THEME-warn);
} }
.moderator { .moderator {
color: var(--success); color: var(--MI_THEME-success);
border-color: var(--success); border-color: var(--MI_THEME-success);
} }
} }
</style> </style>
@ -694,7 +694,7 @@ definePageMetadata(() => ({
.announcementItem { .announcementItem {
display: flex; display: flex;
padding: 8px 12px; padding: 8px 12px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
cursor: pointer; cursor: pointer;
} }
</style> </style>

4
packages/frontend/src/pages/admin/_header_.vue
View file

@ -182,7 +182,7 @@ onUnmounted(() => {
width: calc(var(--height) - (var(--margin) * 2)); width: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border-radius: var(--radius-xs); border-radius: var(--MI-radius-xs);
&:hover { &:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
@ -287,7 +287,7 @@ onUnmounted(() => {
bottom: 0; bottom: 0;
height: 3px; height: 3px;
background: var(--MI_THEME-accent); background: var(--MI_THEME-accent);
border-radius: var(--radius-ellipse); border-radius: var(--MI-radius-ellipse);
transition: all 0.2s ease; transition: all 0.2s ease;
pointer-events: none; pointer-events: none;
} }

2
packages/frontend/src/pages/admin/index.vue
View file

@ -366,7 +366,7 @@ defineExpose({
display: block; display: block;
margin: auto; margin: auto;
height: 42px; height: 42px;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
} }
} }
} }

2
packages/frontend/src/pages/admin/modlog.ModLog.vue
View file

@ -215,7 +215,7 @@ const props = defineProps<{
.diff { .diff {
background: #fff; background: #fff;
color: #000; color: #000;
border-radius: var(--radius-sm); border-radius: var(--MI-radius-sm);
overflow: clip; overflow: clip;
} }

2
packages/frontend/src/pages/admin/overview.federation.vue
View file

@ -153,7 +153,7 @@ onMounted(async () => {
margin-right: 12px; margin-right: 12px;
background: var(--MI_THEME-accentedBg); background: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent); color: var(--MI_THEME-accent);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
&.sub { &.sub {

2
packages/frontend/src/pages/admin/overview.stats.vue
View file

@ -116,7 +116,7 @@ onMounted(async () => {
margin-right: 12px; margin-right: 12px;
background: var(--MI_THEME-accentedBg); background: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent); color: var(--MI_THEME-accent);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
&.users { &.users {

Some files were not shown because too many files have changed in this diff Show more