diff --git a/CALCKEY.md b/CALCKEY.md index 540592f6a8..5c5a3964e3 100644 --- a/CALCKEY.md +++ b/CALCKEY.md @@ -20,7 +20,6 @@ ## Work in progress -- Profile background as banner - Less cluttered notification summary - Better timeline top bar @@ -31,6 +30,7 @@ - Star as default reaction - Rosé Pine by default (+ non-themable elements made Rosé Pine) - Better sidebar/navbar +- Profile background as banner - Mark as read from notifications widget - Better welcome screen (not logged in) - Ability to turn off "Connection lost" message diff --git a/packages/client/src/components/user-info.vue b/packages/client/src/components/user-info.vue index fe9043cb63..174167c26e 100644 --- a/packages/client/src/components/user-info.vue +++ b/packages/client/src/components/user-info.vue @@ -48,17 +48,6 @@ defineProps<{ background-size: cover; background-position: center; - &::after { - content: ""; - background-image: inherit; - position: fixed; - inset: 0; - background-size: cover; - background-position: center; - pointer-events: none; - opacity: .1; - filter: blur(10px); - } } > .avatar { diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue index f80947f75a..54472b1201 100644 --- a/packages/client/src/components/user-preview.vue +++ b/packages/client/src/components/user-preview.vue @@ -120,6 +120,18 @@ export default defineComponent({ background-color: rgba(0, 0, 0, 0.1); background-size: cover; background-position: center; + + &::after { + content: ""; + background-image: inherit; + position: fixed; + inset: 0; + background-size: cover; + background-position: center; + pointer-events: none; + opacity: .1; + filter: blur(10px); + } } > .avatar { diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue index fa72a995b3..9a20055b13 100644 --- a/packages/client/src/pages/user/home.vue +++ b/packages/client/src/pages/user/home.vue @@ -213,11 +213,23 @@ onUnmounted(() => { > .banner { height: 100%; - background-color: #4c5e6d; + background-color: #26233a; background-size: cover; background-position: center; box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset; will-change: background-position; + + &::after { + content: ""; + background-image: inherit; + position: fixed; + inset: 0; + background-size: cover; + background-position: center; + pointer-events: none; + opacity: .1; + filter: blur(10px); + } } > .fade {