🎨

src/client/app/desktop/views/components/home.vue

@@ -38,7 +38,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="main" :class="{ withBg: $store.state.i.wallpaperUrl != null }">
+	<div class="main">
 		<template v-if="customize">
 			<x-draggable v-for="place in ['left', 'right']"
 				:list="widgets[place]"
@@ -342,9 +342,6 @@ root(isDark)
 		margin 0 auto
 		max-width 1240px
 
-		&.withBg
-			background rgba(isDark ? #000 : #fff, 0.5)
-
 		> *
 			.customize-container
 				cursor move

src/client/app/desktop/views/components/ui.header.vue

@@ -55,7 +55,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.$store.commit('setUiHeaderHeight', 48);
+		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 
 		if (this.$store.getters.isSignedIn) {
 			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
@@ -120,8 +120,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	position -webkit-sticky
-	position sticky
+	position fixed
 	top 0
 	z-index 1000
 	width 100%

src/client/app/desktop/views/components/ui.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="mk-ui" :style="style" v-hotkey.global="keymap">
+<div class="mk-ui" v-hotkey.global="keymap">
+	<div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div>
 	<x-header class="header" v-show="!zenMode"/>
 	<div class="content">
 		<slot></slot>
@@ -41,6 +42,16 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		'$store.state.uiHeaderHeight'() {
+			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+		}
+	},
+
+	mounted() {
+		this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+	},
+
 	methods: {
 		post() {
 			(this as any).apis.post();
@@ -55,20 +66,22 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-ui
-	display flex
-	flex-direction column
-	flex 1
+	min-height 100vh
+	padding-top 48px
+
+	> .bg
+		position fixed
+		top 0
+		left 0
+		width 100%
+		height 100vh
 		background-size cover
 		background-position center
 		background-attachment fixed
+		opacity 0.3
 
 	> .header
 		@media (max-width 1000px)
 			display none
 
-	> .content
-		display flex
-		flex-direction column
-		flex 1
-		overflow hidden
 </style>