Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): prefix css variables (UI) (#14739)

Browse source 
* refactor(frontend): prefix css variables

* `MI_UI` -> `MI`

* fix

* `stickyBottom`

* stickyTop
This commit is contained in:
かっこかり 2024-10-10 16:12:16 +09:00 committed by GitHub
parent 21e51567e7
commit b668d161a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
130 changed files with 296 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend-embed/src/components/EmMediaBanner.vue
View file

@ -31,10 +31,10 @@ defineProps<{
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: var(--margin); padding: var(--MI-margin);
margin-top: 4px; margin-top: 4px;
border: 1px solid var(--MI_THEME-inputBorder); border: 1px solid var(--MI_THEME-inputBorder);
border-radius: var(--radius); border-radius: var(--MI-radius);
background-color: var(--MI_THEME-panel); background-color: var(--MI_THEME-panel);
transition: background-color .1s, border-color .1s; transition: background-color .1s, border-color .1s;

4
packages/frontend-embed/src/components/EmMediaVideo.vue
View file

@ -29,9 +29,9 @@ defineProps<{
width: 100%; width: 100%;
height: auto; height: auto;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
padding: var(--margin); padding: var(--MI-margin);
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
background-color: #000; background-color: #000;
&:hover { &:hover {

10
packages/frontend-embed/src/components/EmNote.vue
View file

@ -190,7 +190,7 @@ const isDeleted = ref(false);
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus); border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -356,7 +356,7 @@ const isDeleted = ref(false);
width: 58px; width: 58px;
height: 58px; height: 58px;
position: sticky !important; position: sticky !important;
top: calc(22px + var(--stickyTop, 0px)); top: calc(22px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
} }
@ -377,7 +377,7 @@ const isDeleted = ref(false);
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px); bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
} }
.showLessLabel { .showLessLabel {
@ -430,7 +430,7 @@ const isDeleted = ref(false);
.translation { .translation {
border: solid 0.5px var(--MI_THEME-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;
} }
@ -550,7 +550,7 @@ const isDeleted = ref(false);
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 46px; width: 46px;
height: 46px; height: 46px;
top: calc(14px + var(--stickyTop, 0px)); top: calc(14px + var(--MI-stickyTop, 0px));
} }
} }

2
packages/frontend-embed/src/components/EmNoteDetailed.vue
View file

@ -364,7 +364,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px); bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
} }
.showLessLabel { .showLessLabel {

2
packages/frontend-embed/src/components/EmNoteSimple.vue
View file

@ -53,7 +53,7 @@ const showContent = ref(false);
height: 34px; height: 34px;
border-radius: 8px; border-radius: 8px;
position: sticky !important; position: sticky !important;
top: calc(16px + var(--stickyTop, 0px)); top: calc(16px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
} }

2
packages/frontend-embed/src/components/EmSubNoteContent.vue
View file

@ -100,7 +100,7 @@ const collapsed = ref(isLong);
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px); bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
} }
.showLessLabel { .showLessLabel {

2
packages/frontend-embed/src/pages/clip.vue
View file

@ -100,7 +100,7 @@ function top(ev: MouseEvent) {
display: flex; display: flex;
min-width: 0; min-width: 0;
align-items: center; align-items: center;
gap: var(--margin); gap: var(--MI-margin);
overflow: hidden; overflow: hidden;
.headerClipIconRoot { .headerClipIconRoot {

2
packages/frontend-embed/src/pages/tag.vue
View file

@ -83,7 +83,7 @@ function top(ev: MouseEvent) {
display: flex; display: flex;
min-width: 0; min-width: 0;
align-items: center; align-items: center;
gap: var(--margin); gap: var(--MI-margin);
overflow: hidden; overflow: hidden;
.headerClipIconRoot { .headerClipIconRoot {

2
packages/frontend-embed/src/pages/user-timeline.vue
View file

@ -117,7 +117,7 @@ function top(ev: MouseEvent) {
display: flex; display: flex;
min-width: 0; min-width: 0;
align-items: center; align-items: center;
gap: var(--margin); gap: var(--MI-margin);
overflow: hidden; overflow: hidden;
.avatarLink { .avatarLink {

22
packages/frontend-embed/src/style.scss
View file

@ -7,11 +7,11 @@
*/ */
:root { :root {
--radius: 12px; --MI-radius: 12px;
--marginFull: 14px; --MI-marginFull: 14px;
--marginHalf: 10px; --MI-marginHalf: 10px;
--margin: var(--marginFull); --MI-margin: var(--MI-marginFull);
} }
html { html {
@ -218,12 +218,12 @@ rt {
._panel { ._panel {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: clip; overflow: clip;
} }
._margin { ._margin {
margin: var(--margin) 0; margin: var(--MI-margin) 0;
} }
._gaps_m { ._gaps_m {
@ -241,7 +241,7 @@ rt {
._gaps { ._gaps {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--margin); gap: var(--MI-margin);
} }
._buttons { ._buttons {
@ -264,7 +264,7 @@ rt {
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border: solid 0.5px var(--MI_THEME-divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
&:active { &:active {
border-color: var(--MI_THEME-accent); border-color: var(--MI_THEME-accent);
@ -273,14 +273,14 @@ rt {
._popup { ._popup {
background: var(--MI_THEME-popup); background: var(--MI_THEME-popup);
border-radius: var(--radius); border-radius: var(--MI-radius);
contain: content; contain: content;
} }
._acrylic { ._acrylic {
background: var(--MI_THEME-acrylicPanel); background: var(--MI_THEME-acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
._fullinfo { ._fullinfo {

2
packages/frontend-embed/src/ui.vue
View file

@ -95,7 +95,7 @@ onUnmounted(() => {
height: auto; height: auto;
&.rounded { &.rounded {
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
&.noBorder { &.noBorder {

6
packages/frontend/src/boot/common.ts
View file

@ -186,14 +186,14 @@ export async function common(createVue: () => App<Element>) {
}); });
watch(defaultStore.reactiveState.useBlurEffectForModal, v => { watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true }); }, { immediate: true });
watch(defaultStore.reactiveState.useBlurEffect, v => { watch(defaultStore.reactiveState.useBlurEffect, v => {
if (v) { if (v) {
document.documentElement.style.removeProperty('--blur'); document.documentElement.style.removeProperty('--MI-blur');
} else { } else {
document.documentElement.style.setProperty('--blur', 'none'); document.documentElement.style.setProperty('--MI-blur', 'none');
} }
}, { immediate: true }); }, { immediate: true });

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

@ -34,7 +34,7 @@ misskeyApi('users/show', { userId: props.movedTo }).then(u => user.value = u);
font-size: 90%; font-size: 90%;
background: var(--MI_THEME-infoWarnBg); background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-error); color: var(--MI_THEME-error);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
.link { .link {

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

@ -84,7 +84,7 @@ onMounted(() => {
max-width: 480px; max-width: 480px;
box-sizing: border-box; box-sizing: border-box;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
.header { .header {

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

@ -863,8 +863,8 @@ onMounted(() => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-backdrop-filter: var(--blur, blur(12px)); -webkit-backdrop-filter: var(--MI-blur, blur(12px));
backdrop-filter: var(--blur, blur(12px)); backdrop-filter: var(--MI-blur, blur(12px));
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

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

@ -165,7 +165,7 @@ onUnmounted(() => {
.header { .header {
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--MI-stickyTop, 0px);
left: 0; left: 0;
color: var(--MI_THEME-panelHeaderFg); color: var(--MI_THEME-panelHeaderFg);
background: var(--MI_THEME-panelHeaderBg); background: var(--MI_THEME-panelHeaderBg);
@ -201,7 +201,7 @@ onUnmounted(() => {
} }
.content { .content {
--stickyTop: 0px; --MI-stickyTop: 0px;
&.omitted { &.omitted {
position: relative; position: relative;

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

@ -170,8 +170,8 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
-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: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }

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

@ -86,7 +86,7 @@ function cancel() {
max-width: 100%; max-width: 100%;
height: 40cqh; height: 40cqh;
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px); background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
border-radius: var(--radius); border-radius: var(--MI-radius);
margin: auto; margin: auto;
overflow-y: hidden; overflow-y: hidden;
} }
@ -103,6 +103,6 @@ function cancel() {
padding: 3px 10px; padding: 3px 10px;
background-color: var(--MI_THEME-X5); background-color: var(--MI_THEME-X5);
border: solid 1px var(--MI_THEME-divider); border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
</style> </style>

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

@ -182,7 +182,7 @@ export default defineComponent({
} }
&:not(.date-separated-list-nogap) > *:not(:last-child) { &:not(.date-separated-list-nogap) > *:not(:last-child) {
margin-bottom: var(--margin); margin-bottom: var(--MI-margin);
} }
} }

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

@ -65,12 +65,12 @@ function neverShow() {
.root { .root {
position: fixed; position: fixed;
z-index: v-bind(zIndex); z-index: v-bind(zIndex);
bottom: var(--margin); bottom: var(--MI-margin);
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - (var(--margin) * 2)); width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px; max-width: 500px;
display: flex; display: flex;
} }

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

@ -768,7 +768,7 @@ onBeforeUnmount(() => {
.main { .main {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding: var(--margin); padding: var(--MI-margin);
user-select: none; user-select: none;
&.fetching { &.fetching {

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

@ -110,7 +110,7 @@ const emits = defineEmits<{
<style lang="scss" module> <style lang="scss" module>
.extInstallerRoot { .extInstallerRoot {
border-radius: var(--radius); border-radius: var(--MI-radius);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
padding: 1.5rem; padding: 1.5rem;
} }

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

@ -118,9 +118,9 @@ onMounted(() => {
position: relative; position: relative;
z-index: 10; z-index: 10;
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--MI-stickyTop, 0px);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--blur, blur(20px)); backdrop-filter: var(--MI-blur, blur(20px));
} }
.title { .title {

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

@ -145,8 +145,8 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
padding: 9px 12px 9px 12px; padding: 9px 12px 9px 12px;
background: var(--MI_THEME-folderHeaderBg); background: var(--MI_THEME-folderHeaderBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 6px; border-radius: 6px;
transition: border-radius 0.3s; transition: border-radius 0.3s;
@ -236,12 +236,12 @@ onMounted(() => {
.footer { .footer {
position: sticky !important; position: sticky !important;
z-index: 1; z-index: 1;
bottom: var(--stickyBottom, 0px); bottom: var(--MI-stickyBottom, 0px);
left: 0; left: 0;
padding: 12px; padding: 12px;
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
background-size: auto auto; background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px); background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;

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

@ -39,7 +39,7 @@ withDefaults(defineProps<{
<style module lang="scss"> <style module lang="scss">
.root { .root {
--fukidashi-radius: var(--radius); --fukidashi-radius: var(--MI-radius);
--fukidashi-bg: var(--MI_THEME-panel); --fukidashi-bg: var(--MI_THEME-panel);
position: relative; position: relative;

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

@ -38,7 +38,7 @@ function close() {
font-size: 90%; font-size: 90%;
background: var(--MI_THEME-infoBg); background: var(--MI_THEME-infoBg);
color: var(--MI_THEME-infoFg); color: var(--MI_THEME-infoFg);
border-radius: var(--radius); border-radius: var(--MI-radius);
white-space: pre-wrap; white-space: pre-wrap;
&.warn { &.warn {

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

@ -257,7 +257,7 @@ onMounted(() => {
min-width: 0; min-width: 0;
position: relative; position: relative;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 24px; padding: 24px;
max-height: 300px; max-height: 300px;

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

@ -392,7 +392,7 @@ onDeactivated(() => {
container-type: inline-size; container-type: inline-size;
position: relative; position: relative;
border: .5px solid var(--MI_THEME-divider); border: .5px solid var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: clip; overflow: clip;
&:focus-visible { &:focus-visible {
@ -454,7 +454,7 @@ onDeactivated(() => {
.controlButton { .controlButton {
padding: 6px; padding: 6px;
border-radius: calc(var(--radius) / 2); border-radius: calc(var(--MI-radius) / 2);
font-size: 1.05rem; font-size: 1.05rem;
&:hover { &:hover {

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

@ -226,8 +226,8 @@ html[data-color-scheme=light] .visible {
position: absolute; position: absolute;
border-radius: 999px; border-radius: 999px;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
color: #fff; color: #fff;
font-size: 0.8em; font-size: 0.8em;
width: 28px; width: 28px;

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

@ -317,7 +317,7 @@ defineExpose({
<style lang="scss"> <style lang="scss">
.pswp__bg { .pswp__bg {
background: var(--MI_THEME-modalBg); background: var(--MI_THEME-modalBg);
backdrop-filter: var(--modalBgFilter); backdrop-filter: var(--MI-modalBgFilter);
} }
.pswp__alt-text-container { .pswp__alt-text-container {
@ -338,8 +338,8 @@ defineExpose({
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
padding: var(--margin); padding: var(--MI-margin);
border-radius: var(--radius); border-radius: var(--MI-radius);
max-height: 8em; max-height: 8em;
overflow-y: auto; overflow-y: auto;
text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px; text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px;

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

@ -658,7 +658,7 @@ onDeactivated(() => {
.controlButton { .controlButton {
padding: 6px; padding: 6px;
border-radius: calc(var(--radius) / 2); border-radius: calc(var(--MI-radius) / 2);
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
font-size: 1.05rem; font-size: 1.05rem;

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

@ -90,7 +90,7 @@ defineExpose({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content; contain: content;
border-radius: var(--radius); border-radius: var(--MI-radius);
--root-margin: 24px; --root-margin: 24px;
@ -106,8 +106,8 @@ defineExpose({
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
background: var(--MI_THEME-windowHeader); background: var(--MI_THEME-windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
.headerButton { .headerButton {

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

@ -644,7 +644,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus); border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -810,7 +810,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: 58px; width: 58px;
height: 58px; height: 58px;
position: sticky !important; position: sticky !important;
top: calc(22px + var(--stickyTop, 0px)); top: calc(22px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
} }
@ -831,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px); bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
} }
.showLessLabel { .showLessLabel {
@ -884,7 +884,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.translation { .translation {
border: solid 0.5px var(--MI_THEME-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;
} }
@ -998,7 +998,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 46px; width: 46px;
height: 46px; height: 46px;
top: calc(14px + var(--stickyTop, 0px)); top: calc(14px + var(--MI-stickyTop, 0px));
} }
} }

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

@ -570,7 +570,7 @@ function loadConversation() {
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus); border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -711,7 +711,7 @@ function loadConversation() {
.translation { .translation {
border: solid 0.5px var(--MI_THEME-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;
} }

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

@ -51,7 +51,7 @@ const showContent = ref(false);
height: 34px; height: 34px;
border-radius: 8px; border-radius: 8px;
position: sticky !important; position: sticky !important;
top: calc(16px + var(--stickyTop, 0px)); top: calc(16px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
} }

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

@ -66,7 +66,7 @@ defineExpose({
.note { .note {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
} }
} }

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

@ -47,7 +47,7 @@ onUnmounted(() => {
<style lang="scss" module> <style lang="scss" module>
.content { .content {
--stickyTop: 0px; --MI-stickyTop: 0px;
&.omitted { &.omitted {
position: relative; position: relative;

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

@ -42,7 +42,7 @@ const props = defineProps<{
.eyeCatchingImageRoot { .eyeCatchingImageRoot {
width: 100%; width: 100%;
height: 200px; height: 200px;
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--MI-radius) var(--MI-radius) 0 0;
overflow: hidden; overflow: hidden;
} }
</style> </style>
@ -67,7 +67,7 @@ const props = defineProps<{
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius); border-radius: var(--MI-radius);
pointer-events: none; pointer-events: none;
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus); box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
} }
@ -75,14 +75,14 @@ const props = defineProps<{
> .thumbnail { > .thumbnail {
& + article { & + article {
border-radius: 0 0 var(--radius) var(--radius); border-radius: 0 0 var(--MI-radius) var(--MI-radius);
} }
} }
> article { > article {
background-color: var(--MI_THEME-panel); background-color: var(--MI_THEME-panel);
padding: 16px; padding: 16px;
border-radius: var(--radius); border-radius: var(--MI-radius);
> header { > header {
margin-bottom: 8px; margin-bottom: 8px;

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

@ -181,6 +181,6 @@ defineExpose({
min-height: 100%; min-height: 100%;
background: var(--MI_THEME-bg); background: var(--MI_THEME-bg);
--margin: var(--marginHalf); --MI-margin: var(--MI-marginHalf);
} }
</style> </style>

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

@ -21,7 +21,7 @@ defineProps<{
padding: 16px; padding: 16px;
background: var(--MI_THEME-infoWarnBg); background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-infoWarnFg); color: var(--MI_THEME-infoWarnFg);
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: clip; overflow: clip;
} }

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

@ -70,7 +70,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
max-height: 450px; max-height: 450px;
box-sizing: border-box; box-sizing: border-box;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
.header { .header {
@ -83,7 +83,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
z-index: 1; z-index: 1;
} }

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

@ -170,7 +170,7 @@ async function updateAgreeNote(v: boolean) {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
position: sticky; position: sticky;
top: calc(var(--stickyTop, 0px) + 8px); top: calc(var(--MI-stickyTop, 0px) + 8px);
counter-increment: item; counter-increment: item;
content: counter(item); content: counter(item);
width: 32px; width: 32px;

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

@ -63,12 +63,12 @@ function close() {
.root { .root {
position: fixed; position: fixed;
z-index: v-bind(zIndex); z-index: v-bind(zIndex);
bottom: var(--margin); bottom: var(--MI-margin);
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - (var(--margin) * 2)); width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px; max-width: 500px;
display: flex; display: flex;
} }

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

@ -97,7 +97,7 @@ const collapsed = ref(isLong);
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px); bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
} }
.showLessLabel { .showLessLabel {

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

@ -263,8 +263,8 @@ onMounted(async () => {
padding: 12px; padding: 12px;
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
.switchBox { .switchBox {

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

@ -226,7 +226,7 @@ onUnmounted(() => {
.mfmPreview { .mfmPreview {
padding: 12px; padding: 12px;
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
min-height: 130px; min-height: 130px;
pointer-events: none; pointer-events: none;

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

@ -137,7 +137,7 @@ function enableAll(): void {
margin: 8px -6px 0; margin: 8px -6px 0;
padding: 24px 6px 6px; padding: 24px 6px 6px;
border: 2px solid var(--MI_THEME-error); border: 2px solid var(--MI_THEME-error);
border-radius: calc(var(--radius) / 2); border-radius: calc(var(--MI-radius) / 2);
} }
.adminPermissionsHeader { .adminPermissionsHeader {

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

@ -105,7 +105,7 @@ function removeReaction(emoji) {
<style lang="scss" module> <style lang="scss" module>
.exampleNoteRoot { .exampleNoteRoot {
border-radius: var(--radius); border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder); border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
} }

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

@ -81,7 +81,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
<style lang="scss" module> <style lang="scss" module>
.exampleRoot { .exampleRoot {
max-width: none!important; max-width: none!important;
border-radius: var(--radius); border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder); border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
} }

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

@ -91,7 +91,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
<style lang="scss" module> <style lang="scss" module>
.exampleRoot { .exampleRoot {
border-radius: var(--radius); border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder); border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
} }

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

@ -31,7 +31,7 @@ import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js';
<style lang="scss" module> <style lang="scss" module>
.exampleNoteRoot { .exampleNoteRoot {
border-radius: var(--radius); border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder); border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
} }

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

@ -47,7 +47,7 @@ onMounted(() => {
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); border-radius: var(--MI-radius);
} }
.title { .title {

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

@ -142,7 +142,7 @@ async function del() {
left: 0; left: 0;
padding: 12px; padding: 12px;
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
</style> </style>

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

@ -39,6 +39,6 @@ const props = withDefaults(defineProps<{
.root { .root {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: var(--margin); grid-gap: var(--MI-margin);
} }
</style> </style>

2
packages/frontend/src/components/MkUserSetupDialog.Follow.vue
View file

@ -62,7 +62,7 @@ const popularUsers: Paging = {
.users { .users {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
grid-gap: var(--margin); grid-gap: var(--MI-margin);
justify-content: center; justify-content: center;
} }
</style> </style>

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

@ -107,7 +107,7 @@ function showMenu(ev: MouseEvent) {
.panel { .panel {
position: relative; position: relative;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-shadow: 0 12px 32px rgb(0 0 0 / 25%); box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
} }

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

@ -48,7 +48,7 @@ watch(() => props.showing, () => {
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); border-radius: var(--MI-radius);
width: 250px; width: 250px;
&.iconOnly { &.iconOnly {

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

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root"> <div :class="$style.root">
<template v-if="edit"> <template v-if="edit">
<header :class="$style.editHeader"> <header :class="$style.editHeader">
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select> <MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--MI-margin)" data-cy-widget-select>
<template #label>{{ i18n.ts.selectWidget }}</template> <template #label>{{ i18n.ts.selectWidget }}</template>
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.ts._widgets[widget] }}</option> <option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.ts._widgets[widget] }}</option>
</MkSelect> </MkSelect>
@ -123,7 +123,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
.widget { .widget {
contain: content; contain: content;
margin: var(--margin) 0; margin: var(--MI-margin) 0;
&:first-of-type { &:first-of-type {
margin-top: 0; margin-top: 0;

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

@ -502,7 +502,7 @@ defineExpose({
contain: content; contain: content;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
.header { .header {
@ -515,8 +515,8 @@ defineExpose({
user-select: none; user-select: none;
height: var(--height); height: var(--height);
background: var(--MI_THEME-windowHeader); background: var(--MI_THEME-windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
//border-bottom: solid 1px var(--MI_THEME-divider); //border-bottom: solid 1px var(--MI_THEME-divider);
font-size: 90%; font-size: 90%;
font-weight: bold; font-weight: bold;

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

@ -130,8 +130,8 @@ onUnmounted(() => {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
border-bottom: solid 0.5px var(--MI_THEME-divider); border-bottom: solid 0.5px var(--MI_THEME-divider);
width: 100%; width: 100%;
} }
@ -145,7 +145,7 @@ onUnmounted(() => {
.upper { .upper {
--height: 50px; --height: 50px;
display: flex; display: flex;
gap: var(--margin); gap: var(--MI-margin);
height: var(--height); height: var(--height);
.tabs:first-child { .tabs:first-child {

8
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -69,28 +69,28 @@ onMounted(() => {
watch(childStickyTop, () => { watch(childStickyTop, () => {
if (bodyEl.value == null) return; if (bodyEl.value == null) return;
bodyEl.value.style.setProperty('--stickyTop', `${childStickyTop.value}px`); bodyEl.value.style.setProperty('--MI-stickyTop', `${childStickyTop.value}px`);
}, { }, {
immediate: true, immediate: true,
}); });
watch(childStickyBottom, () => { watch(childStickyBottom, () => {
if (bodyEl.value == null) return; if (bodyEl.value == null) return;
bodyEl.value.style.setProperty('--stickyBottom', `${childStickyBottom.value}px`); bodyEl.value.style.setProperty('--MI-stickyBottom', `${childStickyBottom.value}px`);
}, { }, {
immediate: true, immediate: true,
}); });
if (headerEl.value != null) { if (headerEl.value != null) {
headerEl.value.style.position = 'sticky'; headerEl.value.style.position = 'sticky';
headerEl.value.style.top = 'var(--stickyTop, 0)'; headerEl.value.style.top = 'var(--MI-stickyTop, 0)';
headerEl.value.style.zIndex = '1'; headerEl.value.style.zIndex = '1';
observer.observe(headerEl.value); observer.observe(headerEl.value);
} }
if (footerEl.value != null) { if (footerEl.value != null) {
footerEl.value.style.position = 'sticky'; footerEl.value.style.position = 'sticky';
footerEl.value.style.bottom = 'var(--stickyBottom, 0)'; footerEl.value.style.bottom = 'var(--MI-stickyBottom, 0)';
footerEl.value.style.zIndex = '1'; footerEl.value.style.zIndex = '1';
observer.observe(footerEl.value); observer.observe(footerEl.value);
} }

4
packages/frontend/src/components/page/page.dynamic.vue
View file

@ -28,8 +28,8 @@ const props = defineProps<{
<style lang="scss" module> <style lang="scss" module>
.root { .root {
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: var(--margin); padding: var(--MI-margin);
text-align: center; text-align: center;
} }

2
packages/frontend/src/components/page/page.image.vue
View file

@ -29,7 +29,7 @@ onMounted(() => {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: hidden; overflow: hidden;
} }
.mediaList { .mediaList {

2
packages/frontend/src/components/page/page.note.vue
View file

@ -36,6 +36,6 @@ onMounted(() => {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
border: 1px solid var(--MI_THEME-divider); border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
</style> </style>

2
packages/frontend/src/pages/about-misskey.vue
View file

@ -441,7 +441,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;

2
packages/frontend/src/pages/about.federation.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template> <template #label>{{ i18n.ts.host }}</template>
</MkInput> </MkInput>
<FormSplit style="margin-top: var(--margin);"> <FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state"> <MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template> <template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option> <option value="all">{{ i18n.ts.all }}</option>

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

@ -183,7 +183,7 @@ const initStats = () => misskeyApi('stats', {});
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
position: sticky; position: sticky;
top: calc(var(--stickyTop, 0px) + 8px); top: calc(var(--MI-stickyTop, 0px) + 8px);
counter-increment: item; counter-increment: item;
content: counter(item); content: counter(item);
width: 32px; width: 32px;

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

@ -156,7 +156,7 @@ function removeSelf() {
.item { .item {
border: solid 2px var(--MI_THEME-divider); border: solid 2px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 12px; padding: 12px;
&:hover { &:hover {

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

@ -156,8 +156,8 @@ onUnmounted(() => {
--height: 60px; --height: 60px;
display: flex; display: flex;
width: 100%; width: 100%;
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
> .buttons { > .buttons {
--margin: 8px; --margin: 8px;

4
packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
View file

@ -296,8 +296,8 @@ onMounted(async () => {
padding: 12px; padding: 12px;
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
.systemWebhook { .systemWebhook {

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

@ -266,7 +266,7 @@ definePageMetadata(() => ({
padding: 32px; padding: 32px;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: var(--margin); margin-bottom: var(--MI-margin);
} }
} }
.input { .input {

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

@ -183,7 +183,7 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
</style> </style>

4
packages/frontend/src/pages/admin/email-settings.vue
View file

@ -138,7 +138,7 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
</style> </style>

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

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template> <template #label>{{ i18n.ts.host }}</template>
</MkInput> </MkInput>
<FormSplit style="margin-top: var(--margin);"> <FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state"> <MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template> <template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option> <option value="all">{{ i18n.ts.all }}</option>

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

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><XHeader :actions="headerActions"/></template> <template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :contentMax="900"> <MkSpacer :contentMax="900">
<div class="_gaps"> <div class="_gaps">
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;"> <MkSelect v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.instance }}</template> <template #label>{{ i18n.ts.instance }}</template>
<option value="combined">{{ i18n.ts.all }}</option> <option value="combined">{{ i18n.ts.all }}</option>
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.host }}</template> <template #label>{{ i18n.ts.host }}</template>
</MkInput> </MkInput>
</div> </div>
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;"> <MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>User ID</template> <template #label>User ID</template>
</MkInput> </MkInput>

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

@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<div> <div>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<div style="flex: 1;">{{ i18n.ts.moderator }}: <MkA :to="`/admin/user/${log.userId}`" class="_link">@{{ log.user?.username }}</MkA></div> <div style="flex: 1;">{{ i18n.ts.moderator }}: <MkA :to="`/admin/user/${log.userId}`" class="_link">@{{ log.user?.username }}</MkA></div>
<div style="flex: 1;">{{ i18n.ts.dateAndTime }}: <MkTime :time="log.createdAt" mode="detail"/></div> <div style="flex: 1;">{{ i18n.ts.dateAndTime }}: <MkTime :time="log.createdAt" mode="detail"/></div>
</div> </div>

6
packages/frontend/src/pages/admin/modlog.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="900"> <MkSpacer :contentMax="900">
<div> <div>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="type" style="margin: 0; flex: 1;"> <MkSelect v-model="type" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.type }}</template> <template #label>{{ i18n.ts.type }}</template>
<option :value="null">{{ i18n.ts.all }}</option> <option :value="null">{{ i18n.ts.all }}</option>
@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkInput> </MkInput>
</div> </div>
<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--margin);"> <MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--MI-margin);">
<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--margin: 8px;"> <MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--MI-margin: 8px;">
<XModLog :key="item.id" :log="item"/> <XModLog :key="item.id" :log="item"/>
</MkDateSeparatedList> </MkDateSeparatedList>
</MkPagination> </MkPagination>

4
packages/frontend/src/pages/admin/object-storage.vue
View file

@ -157,7 +157,7 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
</style> </style>

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

@ -120,7 +120,7 @@ onUnmounted(() => {
min-width: 0; min-width: 0;
padding: 16px; padding: 16px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
> .title { > .title {
font-size: 0.85em; font-size: 0.85em;

2
packages/frontend/src/pages/admin/queue.chart.vue
View file

@ -136,7 +136,7 @@ onUnmounted(() => {
min-width: 0; min-width: 0;
padding: 16px; padding: 16px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
.chartTitle { .chartTitle {

4
packages/frontend/src/pages/admin/roles.edit.vue
View file

@ -95,7 +95,7 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
</style> </style>

8
packages/frontend/src/pages/antenna-timeline.vue
View file

@ -97,26 +97,26 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.new { .new {
position: sticky; position: sticky;
top: calc(var(--stickyTop, 0px) + 16px); top: calc(var(--MI-stickyTop, 0px) + 16px);
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
margin: calc(-0.675em - 8px) 0; margin: calc(-0.675em - 8px) 0;
&:first-child { &:first-child {
margin-top: calc(-0.675em - 8px - var(--margin)); margin-top: calc(-0.675em - 8px - var(--MI-margin));
} }
} }
.newButton { .newButton {
display: block; display: block;
margin: var(--margin) auto 0 auto; margin: var(--MI-margin) auto 0 auto;
padding: 8px 16px; padding: 8px 16px;
border-radius: 32px; border-radius: 32px;
} }
.tl { .tl {
background: var(--MI_THEME-bg); background: var(--MI_THEME-bg);
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: clip; overflow: clip;
} }
</style> </style>

8
packages/frontend/src/pages/avatar-decorations.vue
View file

@ -124,7 +124,7 @@ definePageMetadata(() => ({
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: auto auto; grid-template-rows: auto auto;
gap: var(--margin); gap: var(--MI-margin);
} }
.preview { .preview {
@ -132,7 +132,7 @@ definePageMetadata(() => ({
place-items: center; place-items: center;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
gap: var(--margin); gap: var(--MI-margin);
} }
.previewItem { .previewItem {
@ -142,7 +142,7 @@ definePageMetadata(() => ({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--radius); border-radius: var(--MI-radius);
&.light { &.light {
background: #eee; background: #eee;
@ -157,7 +157,7 @@ definePageMetadata(() => ({
.editorWrapper { .editorWrapper {
grid-template-columns: 200px 1fr; grid-template-columns: 200px 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
gap: calc(var(--margin) * 2); gap: calc(var(--MI-margin) * 2);
} }
.preview { .preview {

6
packages/frontend/src/pages/channel.vue
View file

@ -269,12 +269,12 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.main { .main {
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px))); min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
} }
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
} }

8
packages/frontend/src/pages/custom-emojis-manager.vue
View file

@ -317,14 +317,14 @@ definePageMetadata(() => ({
.ogwlenmc { .ogwlenmc {
> .local { > .local {
.empty { .empty {
margin: var(--margin); margin: var(--MI-margin);
} }
.ldhfsamy { .ldhfsamy {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px; grid-gap: 12px;
margin: var(--margin) 0; margin: var(--MI-margin) 0;
> .emoji { > .emoji {
display: flex; display: flex;
@ -369,14 +369,14 @@ definePageMetadata(() => ({
> .remote { > .remote {
.empty { .empty {
margin: var(--margin); margin: var(--MI-margin);
} }
.ldhfsamy { .ldhfsamy {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px; grid-gap: 12px;
margin: var(--margin) 0; margin: var(--MI-margin) 0;
> .emoji { > .emoji {
display: flex; display: flex;

6
packages/frontend/src/pages/drive.file.info.vue
View file

@ -232,7 +232,7 @@ onMounted(async () => {
.filePreviewRoot { .filePreviewRoot {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
// MkMediaList 内の上部マージン 4px // MkMediaList 内の上部マージン 4px
padding: calc(1rem - 4px) 1rem 1rem; padding: calc(1rem - 4px) 1rem 1rem;
} }
@ -285,7 +285,7 @@ onMounted(async () => {
align-items: center; align-items: center;
min-width: 0; min-width: 0;
font-weight: 700; font-weight: 700;
border-radius: var(--radius); border-radius: var(--MI-radius);
font-size: .8rem; font-size: .8rem;
>.fileNameEditIcon { >.fileNameEditIcon {
@ -322,7 +322,7 @@ onMounted(async () => {
display: block; display: block;
width: 100%; width: 100%;
padding: .5rem 1rem; padding: .5rem 1rem;
border-radius: var(--radius); border-radius: var(--MI-radius);
.kvEditIcon { .kvEditIcon {
display: inline-block; display: inline-block;

4
packages/frontend/src/pages/emoji-edit-dialog.vue
View file

@ -245,7 +245,7 @@ async function del() {
padding: 12px; padding: 12px;
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }
</style> </style>

2
packages/frontend/src/pages/explore.featured.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<MkTab v-model="tab" style="margin-bottom: var(--margin);"> <MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
<option value="notes">{{ i18n.ts.notes }}</option> <option value="notes">{{ i18n.ts.notes }}</option>
<option value="polls">{{ i18n.ts.poll }}</option> <option value="polls">{{ i18n.ts.poll }}</option>
</MkTab> </MkTab>

2
packages/frontend/src/pages/explore.users.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<MkSpacer :contentMax="1200"> <MkSpacer :contentMax="1200">
<MkTab v-model="origin" style="margin-bottom: var(--margin);"> <MkTab v-model="origin" style="margin-bottom: var(--MI-margin);">
<option value="local">{{ i18n.ts.local }}</option> <option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option> <option value="remote">{{ i18n.ts.remote }}</option>
</MkTab> </MkTab>

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

@ -47,6 +47,6 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.note { .note {
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--MI-radius);
} }
</style> </style>

2
packages/frontend/src/pages/flash/flash-edit.vue
View file

@ -467,7 +467,7 @@ definePageMetadata(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.footer { .footer {
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
border-top: solid .5px var(--MI_THEME-divider); border-top: solid .5px var(--MI_THEME-divider);
} }

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

@ -130,6 +130,6 @@ definePageMetadata(() => ({
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px; grid-gap: 12px;
margin: 0 var(--margin); margin: 0 var(--MI-margin);
} }
</style> </style>

2
packages/frontend/src/pages/gallery/post.vue
View file

@ -321,7 +321,7 @@ definePageMetadata(() => ({
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px; grid-gap: 12px;
margin: var(--margin); margin: var(--MI-margin);
> .post { > .post {

2
packages/frontend/src/pages/install-extensions.vue
View file

@ -250,7 +250,7 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.extInstallerRoot { .extInstallerRoot {
border-radius: var(--radius); border-radius: var(--MI-radius);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
padding: 1.5rem; padding: 1.5rem;
} }

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

@ -108,7 +108,7 @@ definePageMetadata(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.main { .main {
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px))); min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
} }
.userItem { .userItem {

6
packages/frontend/src/pages/my-lists/list.vue
View file

@ -199,7 +199,7 @@ definePageMetadata(() => ({
<style lang="scss" module> <style lang="scss" module>
.main { .main {
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px))); min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
} }
.userItem { .userItem {
@ -234,8 +234,8 @@ definePageMetadata(() => ({
} }
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
} }
</style> </style>

6
packages/frontend/src/pages/note.vue
View file

@ -170,11 +170,11 @@ definePageMetadata(() => ({
} }
.loadNext { .loadNext {
margin-bottom: var(--margin); margin-bottom: var(--MI-margin);
} }
.loadPrev { .loadPrev {
margin-top: var(--margin); margin-top: var(--MI-margin);
} }
.loadButton { .loadButton {
@ -182,7 +182,7 @@ definePageMetadata(() => ({
} }
.note { .note {
border-radius: var(--radius); border-radius: var(--MI-radius);
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
} }
</style> </style>

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

@ -102,7 +102,7 @@ definePageMetadata(() => ({
<style module lang="scss"> <style module lang="scss">
.notifications { .notifications {
border-radius: var(--radius); border-radius: var(--MI-radius);
overflow: clip; overflow: clip;
} }
</style> </style>

12
packages/frontend/src/pages/page.vue
View file

@ -365,7 +365,7 @@ definePageMetadata(() => ({
} }
.pageMain { .pageMain {
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 2rem; padding: 2rem;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
box-sizing: border-box; box-sizing: border-box;
@ -374,7 +374,7 @@ definePageMetadata(() => ({
.pageBanner { .pageBanner {
width: calc(100% + 4rem); width: calc(100% + 4rem);
margin: -2rem -2rem 1.5rem; margin: -2rem -2rem 1.5rem;
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--MI-radius) var(--MI-radius) 0 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -458,7 +458,7 @@ definePageMetadata(() => ({
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--marginHalf); gap: var(--MI-marginHalf);
margin-left: auto; margin-left: auto;
} }
} }
@ -479,7 +479,7 @@ definePageMetadata(() => ({
> .other { > .other {
margin-left: auto; margin-left: auto;
display: flex; display: flex;
gap: var(--marginHalf); gap: var(--MI-marginHalf);
} }
} }
@ -526,11 +526,11 @@ definePageMetadata(() => ({
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--marginHalf); gap: var(--MI-marginHalf);
} }
.relatedPagesRoot { .relatedPagesRoot {
padding: var(--margin); padding: var(--MI-margin);
} }
.relatedPagesItem > article { .relatedPagesItem > article {

4
packages/frontend/src/pages/reversi/game.setting.vue
View file

@ -290,8 +290,8 @@ onUnmounted(() => {
} }
.footer { .footer {
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg); background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider); border-top: solid 0.5px var(--MI_THEME-divider);
} }

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