etc/Sharkey
0
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey synced 2024-11-22 05:55:12 +00: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 {
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;
}

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

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

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

@ -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 {

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

@ -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);

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

@ -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 {

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

@ -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;

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

@ -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%;
}
}

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

@ -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;

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

@ -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);

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

@ -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);

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

@ -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;

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

@ -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%);
}

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

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

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

@ -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 {

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

@ -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 {

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

@ -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 {

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

@ -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);
}
}
}

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

@ -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;
}

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

@ -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>

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

@ -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 {

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

@ -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;
}

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

@ -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;
}

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

@ -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 {

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

@ -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 {

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

@ -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;

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

@ -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;

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

@ -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;
}

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

@ -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) */

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

@ -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;

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

@ -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>

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

@ -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;

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

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

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

@ -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;

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

@ -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 {

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

@ -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 {

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

@ -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;
}

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

@ -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 {

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

@ -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 {

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

@ -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;
}

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

@ -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;

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

@ -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>

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

@ -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);

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

@ -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;

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

@ -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%);
}

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">
<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 {

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

@ -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;
}

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

@ -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);

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

@ -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;

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

@ -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);

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

@ -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);

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

@ -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;

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

@ -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;

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

@ -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);
}
}

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

@ -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 {

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

@ -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%);
}

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

@ -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 {

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

@ -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) {

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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));
}

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

@ -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));
}

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

@ -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));
}

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

@ -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 {

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

@ -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;
}

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

@ -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 {

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

@ -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;
}

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.
// 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;

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

@ -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 {

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

@ -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);
}

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

@ -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;

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

@ -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;
}

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

@ -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 {

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

@ -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;

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);
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;
}
}

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

@ -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;
}

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

@ -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 {

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

@ -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 {

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

@ -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 {

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

@ -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;

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

@ -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;
}

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

@ -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);
}
}

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

@ -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>

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

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

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

@ -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 {

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

@ -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;
}

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

@ -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>

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 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',

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

@ -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;

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

@ -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);

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

@ -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>

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

@ -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 {

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>
.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 {

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

@ -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>

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

@ -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;
}

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

@ -366,7 +366,7 @@ defineExpose({
display: block;
margin: auto;
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 {
background: #fff;
color: #000;
border-radius: var(--radius-sm);
border-radius: var(--MI-radius-sm);
overflow: clip;
}

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

@ -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 {

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

@ -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 {

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