diff --git a/src/App.js b/src/App.js index 52700319..c79184ab 100644 --- a/src/App.js +++ b/src/App.js @@ -54,13 +54,16 @@ export default { return this.currentUser.background_image || this.$store.state.instance.background }, bgStyle () { - return { - 'background-image': `url(${this.background})` - } - }, - bgAppStyle () { - return { - '--body-background-image': `url(${this.background})` + if ( + this.currentUser.background_image || + ( + this.$store.state.instance.background && + !this.$store.getters.mergedConfig.hideInstanceWallpaper + ) + ) { + return { + '--body-background-image': `url(${this.background})` + } } }, chat () { return this.$store.state.chat.channel.state === 'joined' }, diff --git a/src/App.scss b/src/App.scss index cdc3209c..394d6434 100644 --- a/src/App.scss +++ b/src/App.scss @@ -14,7 +14,9 @@ right: -20px; background-size: cover; background-repeat: no-repeat; - background-position: 0 50%; + background-color: var(--wallpaper); + background-image: var(--body-background-image); + background-position: 50% 50px; } i[class^='icon-'] { diff --git a/src/App.vue b/src/App.vue index b4eb0524..1a166778 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,11 @@ <template> <div id="app" - :style="bgAppStyle" + :style="bgStyle" > <div id="app_bg_wrapper" class="app-bg-wrapper" - :style="bgStyle" /> <MobileNav v-if="isMobileLayout" /> <DesktopNav v-else /> diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 8fd8e620..2d468588 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -5,6 +5,10 @@ width: 100%; position: fixed; + a { + color: var(--topBarLink, $fallback--link); + } + .inner-nav { display: grid; grid-template-rows: 50px; diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index df592a10..029ee7a1 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -34,6 +34,10 @@ const GeneralTab = { return this.$store.state.instance.postFormats || [] }, instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, + instanceWallpaperUsed () { + return this.$store.state.instance.background && + !this.$store.state.users.currentUser.background_image + }, ...SharedComputedObject() } } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index c1d0d0ec..a9081793 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -11,6 +11,11 @@ {{ $t('settings.hide_isp') }} </Checkbox> </li> + <li v-if="instanceWallpaperUsed"> + <Checkbox v-model="hideInstanceWallpaper"> + {{ $t('settings.hide_wallpaper') }} + </Checkbox> + </li> </ul> </div> <div class="setting-item"> diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index 926eceff..1b7d9f31 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -165,7 +165,8 @@ border-color: var(--border, $fallback--border); margin: 1em 0; padding: 1em; - background: var(--body-background-image); + background-color: var(--wallpaper); + background-image: var(--body-background-image); background-size: cover; background-position: 50% 50%; diff --git a/src/i18n/en.json b/src/i18n/en.json index ef23efd6..7c8bfec2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -328,6 +328,7 @@ "hide_muted_posts": "Hide posts of muted users", "max_thumbnails": "Maximum amount of thumbnails per post", "hide_isp": "Hide instance-specific panel", + "hide_wallpaper": "Hide instance wallpaper", "preload_images": "Preload images", "use_one_click_nsfw": "Open NSFW attachments with just one click", "hide_post_stats": "Hide post statistics (e.g. the number of favorites)", diff --git a/src/modules/config.js b/src/modules/config.js index 444b8ec7..cd088737 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -20,6 +20,7 @@ export const defaultState = { customTheme: undefined, customThemeSource: undefined, hideISP: false, + hideInstanceWallpaper: false, // bad name: actually hides posts of muted USERS hideMutedPosts: undefined, // instance default collapseMessageWithSubject: undefined, // instance default diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 7ed85797..bec1eebd 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -84,6 +84,10 @@ export const SLOT_INHERITANCE = { opacity: 'bg', priority: 1 }, + wallpaper: { + depends: ['bg'], + color: (mod, bg) => brightness(-2 * mod, bg).rgb + }, fg: { depends: [], priority: 1 diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 24480d2c..b62769db 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -267,6 +267,7 @@ }, "colors": { "bg": "#c0c0c0", + "wallpaper": "#008080", "text": "#000000", "link": "#0000ff", "accent": "#000080", diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index cf9010fe..83b59109 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -258,6 +258,7 @@ }, "colors": { "bg": "#c0c0c0", + "wallpaper": "#008080", "text": "#000000", "link": "#0000ff", "accent": "#000080", diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index 7fdc4a6d..60ceae7c 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -240,6 +240,7 @@ }, "colors": { "bg": "#d6d6ce", + "wallpaper": "#396ba5", "text": "#000000", "link": "#0000ff", "accent": "#0a246a",