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

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>