OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-10-18 11:31:35 +02:00
Code Issues Projects Releases Packages 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;
align-items: center;
width: 100%;
padding: var(--margin);
padding: var(--MI-margin);
margin-top: 4px;
border: 1px solid var(--MI_THEME-inputBorder);
border-radius: var(--radius);
border-radius: var(--MI-radius);
background-color: var(--MI_THEME-panel);
transition: background-color .1s, border-color .1s;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -95,7 +95,7 @@ onUnmounted(() => {
height: auto;
&.rounded {
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
&.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 => {
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true });
watch(defaultStore.reactiveState.useBlurEffect, v => {
if (v) {
document.documentElement.style.removeProperty('--blur');
document.documentElement.style.removeProperty('--MI-blur');
} else {
document.documentElement.style.setProperty('--blur', 'none');
document.documentElement.style.setProperty('--MI-blur', 'none');
}
}, { immediate: true });

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%;
background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-error);
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
.link {

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

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

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

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

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

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

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

@ -170,8 +170,8 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
-webkit-backdrop-filter: var(--MI-blur, blur(10px));
backdrop-filter: var(--MI-blur, blur(10px));
background: rgba(0, 0, 0, 0.5);
}

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

@ -86,7 +86,7 @@ function cancel() {
max-width: 100%;
height: 40cqh;
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
border-radius: var(--radius);
border-radius: var(--MI-radius);
margin: auto;
overflow-y: hidden;
}
@ -103,6 +103,6 @@ function cancel() {
padding: 3px 10px;
background-color: var(--MI_THEME-X5);
border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
</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) {
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 {
position: fixed;
z-index: v-bind(zIndex);
bottom: var(--margin);
bottom: var(--MI-margin);
left: 0;
right: 0;
margin: auto;
box-sizing: border-box;
width: calc(100% - (var(--margin) * 2));
width: calc(100% - (var(--MI-margin) * 2));
max-width: 500px;
display: flex;
}

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

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

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

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

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

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

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

@ -145,8 +145,8 @@ onMounted(() => {
box-sizing: border-box;
padding: 9px 12px 9px 12px;
background: var(--MI_THEME-folderHeaderBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 6px;
transition: border-radius 0.3s;
@ -236,12 +236,12 @@ onMounted(() => {
.footer {
position: sticky !important;
z-index: 1;
bottom: var(--stickyBottom, 0px);
bottom: var(--MI-stickyBottom, 0px);
left: 0;
padding: 12px;
background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
background-size: auto auto;
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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -66,7 +66,7 @@ defineExpose({
.note {
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>
.content {
--stickyTop: 0px;
--MI-stickyTop: 0px;
&.omitted {
position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -105,7 +105,7 @@ function removeReaction(emoji) {
<style lang="scss" module>
.exampleNoteRoot {
border-radius: var(--radius);
border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
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>
.exampleRoot {
max-width: none!important;
border-radius: var(--radius);
border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
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>
.exampleRoot {
border-radius: var(--radius);
border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
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>
.exampleNoteRoot {
border-radius: var(--radius);
border-radius: var(--MI-radius);
border: var(--MI_THEME-panelBorder);
background: var(--MI_THEME-panel);
}

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

@ -47,7 +47,7 @@ onMounted(() => {
box-sizing: border-box;
text-align: center;
background: var(--MI_THEME-panel);
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
.title {

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

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

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

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

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

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

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

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

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

@ -48,7 +48,7 @@ watch(() => props.showing, () => {
box-sizing: border-box;
text-align: center;
background: var(--MI_THEME-panel);
border-radius: var(--radius);
border-radius: var(--MI-radius);
width: 250px;
&.iconOnly {

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

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

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

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

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

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

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

@ -69,28 +69,28 @@ onMounted(() => {
watch(childStickyTop, () => {
if (bodyEl.value == null) return;
bodyEl.value.style.setProperty('--stickyTop', `${childStickyTop.value}px`);
bodyEl.value.style.setProperty('--MI-stickyTop', `${childStickyTop.value}px`);
}, {
immediate: true,
});
watch(childStickyBottom, () => {
if (bodyEl.value == null) return;
bodyEl.value.style.setProperty('--stickyBottom', `${childStickyBottom.value}px`);
bodyEl.value.style.setProperty('--MI-stickyBottom', `${childStickyBottom.value}px`);
}, {
immediate: true,
});
if (headerEl.value != null) {
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';
observer.observe(headerEl.value);
}
if (footerEl.value != null) {
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';
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>
.root {
border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius);
padding: var(--margin);
border-radius: var(--MI-radius);
padding: var(--MI-margin);
text-align: center;
}

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

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

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

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

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

@ -441,7 +441,7 @@ definePageMetadata(() => ({
.znqjceqz {
> .about {
position: relative;
border-radius: var(--radius);
border-radius: var(--MI-radius);
> .treasure {
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 #label>{{ i18n.ts.host }}</template>
</MkInput>
<FormSplit style="margin-top: var(--margin);">
<FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template>
<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;
display: flex;
position: sticky;
top: calc(var(--stickyTop, 0px) + 8px);
top: calc(var(--MI-stickyTop, 0px) + 8px);
counter-increment: item;
content: counter(item);
width: 32px;

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

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

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

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

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

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

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

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

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

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

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

@ -138,7 +138,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
}
</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 #label>{{ i18n.ts.host }}</template>
</MkInput>
<FormSplit style="margin-top: var(--margin);">
<FormSplit style="margin-top: var(--MI-margin);">
<MkSelect v-model="state">
<template #label>{{ i18n.ts.state }}</template>
<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>
<MkSpacer :contentMax="900">
<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;">
<template #label>{{ i18n.ts.instance }}</template>
<option value="combined">{{ i18n.ts.all }}</option>
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
</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;">
<template #label>User ID</template>
</MkInput>

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

@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<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.dateAndTime }}: <MkTime :time="log.createdAt" mode="detail"/></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>
<MkSpacer :contentMax="900">
<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;">
<template #label>{{ i18n.ts.type }}</template>
<option :value="null">{{ i18n.ts.all }}</option>
@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkInput>
</div>
<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--margin);">
<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--margin: 8px;">
<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--MI-margin);">
<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--MI-margin: 8px;">
<XModLog :key="item.id" :log="item"/>
</MkDateSeparatedList>
</MkPagination>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -269,12 +269,12 @@ definePageMetadata(() => ({
<style lang="scss" module>
.main {
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg);
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 {
> .local {
.empty {
margin: var(--margin);
margin: var(--MI-margin);
}
.ldhfsamy {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
margin: var(--margin) 0;
margin: var(--MI-margin) 0;
> .emoji {
display: flex;
@ -369,14 +369,14 @@ definePageMetadata(() => ({
> .remote {
.empty {
margin: var(--margin);
margin: var(--MI-margin);
}
.ldhfsamy {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
margin: var(--margin) 0;
margin: var(--MI-margin) 0;
> .emoji {
display: flex;

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

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

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

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

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

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<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="polls">{{ i18n.ts.poll }}</option>
</MkTab>

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

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<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="remote">{{ i18n.ts.remote }}</option>
</MkTab>

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

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

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

@ -467,7 +467,7 @@ definePageMetadata(() => ({
</script>
<style lang="scss" module>
.footer {
backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg);
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;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin);
margin: 0 var(--MI-margin);
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -290,8 +290,8 @@ onUnmounted(() => {
}
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
background: var(--MI_THEME-acrylicBg);
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