🎨

src/client/app/common/views/components/ui/card.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ui-card" :class="{ shadow: $store.state.settings.useShadow }">
+<div class="ui-card" :class="{ shadow: $store.state.device.useShadow }">
 	<header>
 		<slot name="title"></slot>
 	</header>

src/client/app/common/views/deck/deck.column.vue

@@ -1,6 +1,5 @@
 <template>
 <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
-		:data-mobile="$root.isMobile"
 		@dragover.prevent.stop="onDragover"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
@@ -327,13 +326,6 @@ export default Vue.extend({
 	box-shadow var(--shadow)
 	overflow hidden
 
-	&[data-mobile]
-		border-radius 0
-		box-shadow none
-
-		> header
-			box-shadow none
-
 	&.draghover
 		box-shadow 0 0 0 2px var(--primaryAlpha08)
 

src/client/app/common/views/deck/deck.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-mobile="$root.isMobile" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
@@ -332,15 +332,8 @@ export default Vue.extend({
 	overflow-y hidden
 	-webkit-overflow-scrolling touch
 
-	&[data-mobile]
+	@media (max-width 500px)
-		padding 0
+		padding 8px 0 8px 8px
-
-		> div
-			margin-right 0
-
-			&.folder
-				> *:not(:last-child)
-					margin-bottom 0
 
 	> div
 		margin-right 8px

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

@@ -387,13 +387,13 @@ export default Vue.extend({
 		},
 
 		useShadow: {
-			get() { return this.$store.state.settings.useShadow; },
+			get() { return this.$store.state.device.useShadow; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
+			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
 		},
 
 		roundedCorners: {
-			get() { return this.$store.state.settings.roundedCorners; },
+			get() { return this.$store.state.device.roundedCorners; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
+			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
 		},
 
 		lineWidth: {

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

@@ -61,7 +61,7 @@ export default Vue.extend({
 	computed: {
 		style(): any {
 			return {
-				'box-shadow': this.$store.state.settings.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
+				'box-shadow': this.$store.state.device.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
 			};
 		}
 	},

src/client/app/init.ts

@@ -405,13 +405,13 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
 			const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
 			const shadowLeft = '-4px 0 4px rgba(0, 0, 0, 0.1)';
-			if (os.store.state.settings.useShadow) {
+			if (os.store.state.device.useShadow) {
 				document.documentElement.style.setProperty('--shadow', shadow);
 				document.documentElement.style.setProperty('--shadowRight', shadowRight);
 				document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
 			}
 			os.store.watch(s => {
-				return s.settings.useShadow;
+				return s.device.useShadow;
 			}, v => {
 				document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
 				document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
@@ -421,9 +421,9 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 
 			//#region rounded corners
 			const round = '6px';
-			if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round);
+			if (os.store.state.device.roundedCorners) document.documentElement.style.setProperty('--round', round);
 			os.store.watch(s => {
-				return s.settings.roundedCorners;
+				return s.device.roundedCorners;
 			}, v => {
 				document.documentElement.style.setProperty('--round', v ? round : '0');
 			});

src/client/app/mobile/views/components/ui-container.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ukygtjoj" :class="{ naked, inDeck, inNakedDeckColumn, hideHeader: !showHeader }">
+<div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -36,9 +36,6 @@ export default Vue.extend({
 		},
 	},
 	inject: {
-		inDeck: {
-			default: false
-		},
 		inNakedDeckColumn: {
 			default: false
 		}
@@ -60,13 +57,12 @@ export default Vue.extend({
 .ukygtjoj
 	overflow hidden
 
-	&.inDeck
-		box-shadow none !important
-
 	&:not(.inNakedDeckColumn)
 		background var(--face)
 		border-radius 8px
-		box-shadow 0 4px 16px rgba(#000, 0.1)
+
+		&.shadow
+			box-shadow 0 4px 16px rgba(#000, 0.1)
 
 		& + .ukygtjoj
 			margin-top 16px

src/client/app/mobile/views/pages/settings.vue

@@ -15,6 +15,8 @@
 
 				<section>
 					<ui-switch v-model="darkmode">{{ $t('dark-mode') }}</ui-switch>
+					<ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch>
+					<ui-switch v-model="roundedCorners">{{ $t('rounded-corners') }}</ui-switch>
 					<ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch>
 					<section>
 						<header>{{ $t('@.line-width') }}</header>
@@ -214,6 +216,16 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 		},
 
+		useShadow: {
+			get() { return this.$store.state.device.useShadow; },
+			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.device.roundedCorners; },
+			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
+		},
+
 		useOsDefaultEmojis: {
 			get() { return this.$store.state.device.useOsDefaultEmojis; },
 			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }

src/client/app/store.ts

@@ -17,8 +17,6 @@ const defaultSettings = {
 	showPostFormOnTopOfTl: false,
 	suggestRecentHashtags: true,
 	showClockOnHeader: true,
-	useShadow: true,
-	roundedCorners: false,
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,
@@ -48,6 +46,8 @@ const defaultDeviceSettings = {
 	deckMode: false,
 	deckColumnAlign: 'center',
 	deckColumnWidth: 'normal',
+	useShadow: true,
+	roundedCorners: false,
 	reduceMotion: false,
 	autoPopout: false,
 	darkmode: false,