sendnrw/misskey
2
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
130 changed files with 296 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/src/ui/_common_/common.vue
View File

@@ -116,27 +116,27 @@ if ($i) {
.notifications {
position: fixed;
z-index: 3900000;
padding: 0 var(--margin);
padding: 0 var(--MI-margin);
pointer-events: none;
display: flex;
&.notificationsPosition_leftTop {
top: var(--margin);
top: var(--MI-margin);
left: 0;
}
&.notificationsPosition_rightTop {
top: var(--margin);
top: var(--MI-margin);
right: 0;
}
&.notificationsPosition_leftBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin));
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
left: 0;
}
&.notificationsPosition_rightBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin));
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
right: 0;
}

8
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@@ -94,8 +94,8 @@ function more() {
z-index: 1;
padding: 20px 0;
background: var(--nav-bg-transparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
}
.banner {
@@ -128,8 +128,8 @@ function more() {
bottom: 0;
padding: 20px 0;
background: var(--nav-bg-transparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
}
.post {

16
packages/frontend/src/ui/_common_/navbar.vue
View File

@@ -146,8 +146,8 @@ function more(ev: MouseEvent) {
z-index: 1;
padding: 20px 0;
background: var(--nav-bg-transparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
}
.banner {
@@ -189,8 +189,8 @@ function more(ev: MouseEvent) {
bottom: 0;
padding-top: 20px;
background: var(--nav-bg-transparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
}
.post {
@@ -380,8 +380,8 @@ function more(ev: MouseEvent) {
z-index: 1;
padding: 20px 0;
background: var(--nav-bg-transparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
}
.instance {
@@ -410,8 +410,8 @@ function more(ev: MouseEvent) {
bottom: 0;
padding-top: 20px;
background: var(--nav-bg-transparent);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
}
.post {

4
packages/frontend/src/ui/_common_/stream-indicator.vue
View File

@@ -48,8 +48,8 @@ onUnmounted(() => {
.root {
position: fixed;
z-index: v-bind(zIndex);
bottom: calc(var(--minBottomSpacing) + var(--margin));
right: var(--margin);
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
right: var(--MI-margin);
margin: 0;
padding: 12px;
font-size: 0.9em;

18
packages/frontend/src/ui/classic.vue
View File

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XSidebar/>
</div>
<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
<XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
<XWidgets place="left" :marginTop="'var(--MI-margin)'" @mounted="attachSticky(widgetsLeft)"/>
</div>
<main class="main" @contextmenu.stop="onContextmenu">
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</main>
<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--MI-margin)'" @mounted="attachSticky(widgetsRight)"/>
</div>
</div>
@@ -217,7 +217,7 @@ onMounted(() => {
&.wallpaper {
background: var(--MI_THEME-wallpaperOverlay);
//backdrop-filter: var(--blur, blur(4px));
//backdrop-filter: var(--MI-blur, blur(4px));
}
> .columns {
@@ -253,13 +253,13 @@ onMounted(() => {
border-right: solid 1px var(--MI_THEME-divider);
border-radius: 0;
overflow: clip;
--margin: 12px;
--MI-margin: 12px;
}
> .widgets {
//--MI_THEME-panelBorder: none;
width: 300px;
padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
padding-bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
@media (max-width: $widgets-hide-threshold) {
display: none;
@@ -278,12 +278,12 @@ onMounted(() => {
> .main {
margin-top: 0;
border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius);
--stickyTop: var(--globalHeaderHeight);
border-radius: var(--MI-radius);
--MI-stickyTop: var(--globalHeaderHeight);
}
> .widgets {
--stickyTop: var(--globalHeaderHeight);
--MI-stickyTop: var(--globalHeaderHeight);
margin-top: 0;
}
}
@@ -314,7 +314,7 @@ onMounted(() => {
right: 0;
z-index: 1001;
height: 100dvh;
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
overflow: auto;
background: var(--MI_THEME-bg);

6
packages/frontend/src/ui/deck.vue
View File

@@ -305,7 +305,7 @@ body {
.root {
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
--margin: var(--marginHalf);
--MI-margin: var(--MI-marginHalf);
--columnGap: 6px;
@@ -428,8 +428,8 @@ body {
grid-gap: 8px;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: var(--blur, blur(32px));
backdrop-filter: var(--blur, blur(32px));
-webkit-backdrop-filter: var(--MI-blur, blur(32px));
backdrop-filter: var(--MI-blur, blur(32px));
background-color: var(--MI_THEME-header);
border-top: solid 0.5px var(--MI_THEME-divider);
}

4
packages/frontend/src/ui/deck/column.vue
View File

@@ -332,8 +332,8 @@ function onDrop(ev) {
&.naked {
background: var(--MI_THEME-acrylicBg) !important;
-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));
> .header {
background: transparent;

4
packages/frontend/src/ui/deck/widgets-column.vue
View File

@@ -57,10 +57,10 @@ const menu = [{
<style lang="scss" module>
.root {
--margin: 8px;
--MI-margin: 8px;
--MI_THEME-panelBorder: none;
padding: 0 var(--margin);
padding: 0 var(--MI-margin);
}
.intro {

18
packages/frontend/src/ui/universal.vue
View File

@@ -225,12 +225,12 @@ provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
watch(navFooter, () => {
if (navFooter.value) {
navFooterHeight.value = navFooter.value.offsetHeight;
document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
} else {
navFooterHeight.value = 0;
document.body.style.setProperty('--stickyBottom', '0px');
document.body.style.setProperty('--minBottomSpacing', '0px');
document.body.style.setProperty('--MI-stickyBottom', '0px');
document.body.style.setProperty('--MI-minBottomSpacing', '0px');
}
}, {
immediate: true,
@@ -336,7 +336,7 @@ $widgets-hide-threshold: 1090px;
height: 100%;
box-sizing: border-box;
overflow: auto;
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
border-left: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-bg);
@@ -370,7 +370,7 @@ $widgets-hide-threshold: 1090px;
z-index: 1001;
width: 310px;
height: 100dvh;
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important;
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box;
overflow: auto;
overscroll-behavior: contain;
@@ -400,8 +400,8 @@ $widgets-hide-threshold: 1090px;
grid-gap: 8px;
width: 100%;
box-sizing: border-box;
-webkit-backdrop-filter: var(--blur, blur(24px));
backdrop-filter: var(--blur, blur(24px));
-webkit-backdrop-filter: var(--MI-blur, blur(24px));
backdrop-filter: var(--MI-blur, blur(24px));
background-color: var(--MI_THEME-header);
border-top: solid 0.5px var(--MI_THEME-divider);
}
@@ -484,6 +484,6 @@ $widgets-hide-threshold: 1090px;
}
.spacer {
height: calc(var(--minBottomSpacing));
height: calc(var(--MI-minBottomSpacing));
}
</style>

8
packages/frontend/src/ui/zen.vue
View File

@@ -63,12 +63,12 @@ document.documentElement.style.overflowY = 'scroll';
}
.rootWithBottom {
min-height: calc(100dvh - (60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px)));
min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
box-sizing: border-box;
}
.bottom {
height: calc(60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px));
height: calc(60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px));
width: 100%;
margin-top: auto;
}
@@ -83,7 +83,7 @@ document.documentElement.style.overflowY = 'scroll';
border-radius: 100%;
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
right: var(--margin);
bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
right: var(--MI-margin);
bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
}
</style>