🎨

src/client/app/mobile/views/components/note-detail.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-note-detail" tabindex="-1">
+<div class="mk-note-detail" tabindex="-1" :class="{ shadow: $store.state.device.useShadow }">
 	<button
 		class="more"
 		v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@@ -165,10 +165,12 @@ export default Vue.extend({
 	text-align left
 	background var(--face)
 	border-radius 8px
-	box-shadow 0 4px 16px rgba(#000, 0.1)
 
-	@media (min-width 500px)
-		box-shadow 0 8px 32px rgba(#000, 0.1)
+	&.shadow
+		box-shadow 0 4px 16px rgba(#000, 0.1)
+
+		@media (min-width 500px)
+			box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	> .fetching
 		padding 64px 0
@@ -180,7 +182,7 @@ export default Vue.extend({
 		width 100%
 		font-size 1em
 		text-align center
-		color #999
+		color var(--text)
 		cursor pointer
 		background var(--subNoteBg)
 		outline none
@@ -289,7 +291,7 @@ export default Vue.extend({
 				> .location
 					margin 4px 0
 					font-size 12px
-					color #ccc
+					color var(--text)
 
 				> .map
 					width 100%

src/client/app/mobile/views/components/notes.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ivaojijs">
+<div class="ivaojijs" :class="{ shadow: $store.state.device.useShadow }">
 	<div class="empty" v-if="notes.length == 0 && !fetching && inited">{{ $t('@.no-notes') }}</div>
 
 	<mk-error v-if="!fetching && !inited" @retry="init()"/>
@@ -192,10 +192,12 @@ export default Vue.extend({
 	overflow hidden
 	background var(--face)
 	border-radius 8px
-	box-shadow 0 4px 16px rgba(#000, 0.1)
 
-	@media (min-width 500px)
-		box-shadow 0 8px 32px rgba(#000, 0.1)
+	&.shadow
+		box-shadow 0 4px 16px rgba(#000, 0.1)
+
+		@media (min-width 500px)
+			box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	> .empty
 		padding 16px
@@ -239,13 +241,7 @@ export default Vue.extend({
 		padding 32px
 		max-width 400px
 		text-align center
-		color #999
-
-		> [data-icon]
-			display block
-			margin-bottom 16px
-			font-size 3em
-			color #ccc
+		color var(--text)
 
 	> footer
 		text-align center
@@ -258,7 +254,7 @@ export default Vue.extend({
 			margin 0
 			padding 16px
 			width 100%
-			color #ccc
+			color var(--text)
 
 			@media (min-width 500px)
 				padding 20px

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

@@ -1,5 +1,5 @@
 <template>
-<div class="header" ref="root">
+<div class="header" ref="root" :class="{ shadow: $store.state.device.useShadow }">
 	<p class="warn" v-if="env != 'production'">{{ $t('@.do-not-use-in-production') }} <a href="/assets/flush.html?force">Flush</a></p>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
@@ -47,7 +47,9 @@ export default Vue.extend({
 	z-index 1024
 	width calc(100% + 16px)
 	padding 0 8px
-	box-shadow 0 0px 8px rgba(0, 0, 0, 0.25)
+
+	&.shadow
+		box-shadow 0 0px 8px rgba(0, 0, 0, 0.25)
 
 	&, *
 		user-select none

src/client/app/mobile/views/pages/user/index.vue

@@ -59,7 +59,7 @@
 				</div>
 			</div>
 		</header>
-		<nav v-if="$route.name == 'user'">
+		<nav v-if="$route.name == 'user'" :class="{ shadow: $store.state.device.useShadow }">
 			<div class="nav-container">
 				<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> {{ $t('overview') }}</a>
 				<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</a>
@@ -315,10 +315,12 @@ export default Vue.extend({
 		position -webkit-sticky
 		position sticky
 		top 47px
-		box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
 		background-color $bg
 		z-index 2
 
+		&.shadow
+			box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
+
 		> .nav-container
 			display flex
 			justify-content center