diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css index ee42b9deba..5072e0ad4e 100644 --- a/packages/backend/src/server/web/style.css +++ b/packages/backend/src/server/web/style.css @@ -1,4 +1,4 @@ -html, body { +html { background-color: var(--bg); color: var(--fg); } diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue index 337873fc1c..63d47f2bf4 100644 --- a/packages/client/src/components/MkFolder.vue +++ b/packages/client/src/components/MkFolder.vue @@ -144,6 +144,10 @@ export default defineComponent({ padding: var(--x-padding); -webkit-backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(20px)); + margin-inline: -12px; + padding-inline: 12px; + mask: linear-gradient(to right, transparent, black 12px calc(100% - 12px), transparent); + -webkit-mask: linear-gradient(to right, transparent, black 12px calc(100% - 12px), transparent); > .title { margin: 0; diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue index 124ffea6a1..c62990ad28 100644 --- a/packages/client/src/components/MkNotes.vue +++ b/packages/client/src/components/MkNotes.vue @@ -64,7 +64,6 @@ defineExpose({ } &:not(.noGap) { > .notes { - background: var(--bg); .qtqtichx { background: var(--panel); border-radius: var(--radius); diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue index c33eed75f2..442d6882a8 100644 --- a/packages/client/src/pages/antenna-timeline.vue +++ b/packages/client/src/pages/antenna-timeline.vue @@ -158,7 +158,7 @@ definePageMetadata( } > .tl { - background: var(--bg); + background: none; border-radius: var(--radius); overflow: clip; } diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index e3f8a0083a..6ab0fdda46 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -391,7 +391,7 @@ onMounted(() => { } > .tl { - background: var(--bg); + background: none; border-radius: var(--radius); overflow: clip; } diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue index 2fd82500e4..352e5d6838 100644 --- a/packages/client/src/pages/user-list-timeline.vue +++ b/packages/client/src/pages/user-list-timeline.vue @@ -125,7 +125,7 @@ definePageMetadata( } > .tl { - background: var(--bg); + background: none; border-radius: var(--radius); overflow: clip; } diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 52c7b62f4a..37cb76f020 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -40,7 +40,6 @@ html { touch-action: manipulation; - background-color: var(--bg); background-attachment: fixed; background-size: cover; background-position: center; diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue index 31c4a40c31..eb73099adf 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -249,7 +249,9 @@ function more(ev: MouseEvent) { box-sizing: border-box; overflow: auto; overflow-x: clip; - background: var(--navBg); + #calckey_app > :not(.wallpaper) & { + background: var(--navBg); + } contain: strict; display: flex; flex-direction: column; @@ -293,12 +295,7 @@ function more(ev: MouseEvent) { } > .bottom { - position: sticky; - bottom: 0; padding: 20px 0; - background: var(--X14); - -webkit-backdrop-filter: var(--blur, blur(8px)); - backdrop-filter: var(--blur, blur(8px)); > .post { position: relative; diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index b40632196c..5785cb1beb 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -239,7 +239,13 @@ onMounted(() => { &.wallpaper { background: var(--wallpaperOverlay); - //backdrop-filter: var(--blur, blur(4px)); + :deep(main) { + background: var(--acrylicBg) !important; + backdrop-filter: blur(12px); + } + :deep(.tl), :deep(.notes) { + background: none !important; + } } > .columns { diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue index 425f00293c..03859abc0a 100644 --- a/packages/client/src/ui/deck/column.vue +++ b/packages/client/src/ui/deck/column.vue @@ -323,6 +323,8 @@ function onDrop(ev) { overflow: hidden; contain: strict; + background: var(--bg); + &.draghover { &:after { content: ""; diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 2fb0adb3a7..f6b57c081f 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -464,13 +464,11 @@ console.log(mainRouter.currentRoute.value.name); > .contents { width: 100%; min-width: 0; - background: var(--bg); } > .widgets { padding: 0 var(--margin); border-left: solid 0.5px var(--divider); - background: var(--bg); @media (max-width: $widgets-hide-threshold) { display: none;