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

2
packages/frontend/src/pages/reversi/index.vue
View File

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

2
packages/frontend/src/pages/scratchpad.vue
View File

@@ -204,7 +204,7 @@ definePageMetadata(() => ({
.root {
display: flex;
flex-direction: column;
gap: var(--margin);
gap: var(--MI-margin);
}
.editor {

4
packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
View File

@@ -151,7 +151,7 @@ async function detach() {
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/pages/settings/avatar-decoration.vue
View File

@@ -145,7 +145,7 @@ definePageMetadata(() => ({
.current {
padding: 16px;
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
.decorations {

4
packages/frontend/src/pages/settings/emoji-picker.vue
View File

@@ -248,8 +248,8 @@ definePageMetadata(() => ({
<style lang="scss" module>
.tab {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
margin: calc(var(--MI-margin) / 2) 0;
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}

2
packages/frontend/src/pages/settings/preferences-backups.vue
View File

@@ -445,7 +445,7 @@ definePageMetadata(() => ({
<style lang="scss" module>
.buttons {
display: flex;
gap: var(--margin);
gap: var(--MI-margin);
flex-wrap: wrap;
}

2
packages/frontend/src/pages/settings/theme.vue
View File

@@ -412,7 +412,7 @@ definePageMetadata(() => ({
.rsljpzjq {
> .selects {
display: flex;
gap: 1.5em var(--margin);
gap: 1.5em var(--MI-margin);
flex-wrap: wrap;
> .select {

2
packages/frontend/src/pages/signup-complete.vue
View File

@@ -71,7 +71,7 @@ place-content: center;
.form {
position: relative;
z-index: 10;
border-radius: var(--radius);
border-radius: var(--MI-radius);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
overflow: clip;
max-width: 500px;

4
packages/frontend/src/pages/tag.vue
View File

@@ -76,8 +76,8 @@ 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));
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
display: flex;

14
packages/frontend/src/pages/timeline.vue
View File

@@ -9,10 +9,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
<div :key="src" ref="rootEl">
<MkInfo v-if="isBasicTimeline(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
<MkInfo v-if="isBasicTimeline(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
{{ i18n.ts._timelineDescription[src] }}
</MkInfo>
<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--MI-margin);"/>
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div :class="$style.tl">
<MkTimeline
@@ -345,30 +345,30 @@ 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;
}
.postForm {
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
.tl {
background: var(--MI_THEME-bg);
border-radius: var(--radius);
border-radius: var(--MI-radius);
overflow: clip;
}
</style>

8
packages/frontend/src/pages/user-list-timeline.vue
View File

@@ -79,26 +79,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>

2
packages/frontend/src/pages/user/follow-list.vue
View File

@@ -45,6 +45,6 @@ const followersPagination = {
.users {
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/pages/user/gallery.vue
View File

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

14
packages/frontend/src/pages/user/home.vue
View File

@@ -377,8 +377,8 @@ onUnmounted(() => {
position: absolute;
top: 12px;
right: 12px;
-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));
background: rgba(0, 0, 0, 0.2);
padding: 8px;
border-radius: 24px;
@@ -432,8 +432,8 @@ onUnmounted(() => {
> .add-note-button {
background: rgba(0, 0, 0, 0.2);
color: #fff;
-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));
border-radius: 24px;
padding: 4px 8px;
font-size: 80%;
@@ -616,7 +616,7 @@ onUnmounted(() => {
> .contents {
> .content {
margin-bottom: var(--margin);
margin-bottom: var(--MI-margin);
}
}
}
@@ -633,7 +633,7 @@ onUnmounted(() => {
> .sub {
max-width: 350px;
min-width: 350px;
margin-left: var(--margin);
margin-left: var(--MI-margin);
}
}
}
@@ -711,7 +711,7 @@ onUnmounted(() => {
<style lang="scss" module>
.tl {
background: var(--MI_THEME-bg);
border-radius: var(--radius);
border-radius: var(--MI-radius);
overflow: clip;
}

4
packages/frontend/src/pages/user/index.timeline.vue
View File

@@ -51,13 +51,13 @@ const pagination = computed(() => tab.value === 'featured' ? {
<style lang="scss" module>
.tab {
padding: calc(var(--margin) / 2) 0;
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.tl {
background: var(--MI_THEME-bg);
border-radius: var(--radius);
border-radius: var(--MI-radius);
overflow: clip;
}
</style>

4
packages/frontend/src/pages/welcome.entrance.a.vue
View File

@@ -165,8 +165,8 @@ misskeyApiGet('federation/instances', {
right: 0;
margin: auto;
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));
border-radius: 999px;
overflow: clip;
width: 800px;

2
packages/frontend/src/pages/welcome.setup.vue
View File

@@ -99,7 +99,7 @@ function submit() {
.form {
position: relative;
z-index: 10;
border-radius: var(--radius);
border-radius: var(--MI-radius);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
overflow: clip;
max-width: 500px;

4
packages/frontend/src/pages/welcome.timeline.vue
View File

@@ -60,7 +60,7 @@ onUpdated(() => {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, calc(calc(-100% - 128px) - var(--margin)), 0);
transform: translate3d(0, calc(calc(-100% - 128px) - var(--MI-margin)), 0);
}
}
@@ -69,7 +69,7 @@ onUpdated(() => {
transform: translate3d(0, -128px, 0);
}
100% {
transform: translate3d(0, calc(calc(-100% - 128px) - var(--margin)), 0);
transform: translate3d(0, calc(calc(-100% - 128px) - var(--MI-margin)), 0);
}
}