diff options
| author | piuvas <mail@piuvas.net> | 2025-05-30 23:18:37 -0300 |
|---|---|---|
| committer | piuvas <mail@piuvas.net> | 2025-05-30 23:18:37 -0300 |
| commit | dcb62a3fcc2c781bc4571adc4adb5523c2cf962e (patch) | |
| tree | 8c2867224b344fd4fc55699cf41c3ba8c0dfc007 | |
| parent | merge: Block remote interactions with local-only posts (resolves #972) (!1070) (diff) | |
| download | sharkey-dcb62a3fcc2c781bc4571adc4adb5523c2cf962e.tar.gz sharkey-dcb62a3fcc2c781bc4571adc4adb5523c2cf962e.tar.bz2 sharkey-dcb62a3fcc2c781bc4571adc4adb5523c2cf962e.zip | |
Update navbar.vue
| -rw-r--r-- | packages/frontend/src/ui/_common_/navbar.vue | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 6bf0dfc17c..503bfb1602 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div :class="[$style.root, { [$style.iconOnly]: iconOnly }]"> <div :class="$style.body"> <div :class="$style.top"> + <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div> <button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu"> <img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/favicon.ico'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/> </button> @@ -299,6 +300,18 @@ function menuEdit() { backdrop-filter: var(--MI-blur, blur(8px)); } + .banner { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center center; + -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%); + mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%); + } + .instance { position: relative; display: block; |