🎨

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

@@ -1,5 +1,6 @@
 <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"
@@ -113,7 +114,7 @@ export default Vue.extend({
 			column: this,
 			isScrollTop: this.isScrollTop,
 			count: v => this.count = v,
-			inDeck: !this.naked
+			inNakedDeckColumn: !this.naked
 		};
 	},
 
@@ -326,6 +327,13 @@ 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" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-mobile="$root.isMobile" 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">
@@ -68,6 +68,7 @@ export default Vue.extend({
 
 	provide() {
 		return {
+			inDeck: true,
 			getColumnVm: this.getColumnVm,
 			narrow: true
 		};
@@ -331,6 +332,16 @@ export default Vue.extend({
 	overflow-y hidden
 	-webkit-overflow-scrolling touch
 
+	&[data-mobile]
+		padding 0
+
+		> div
+			margin-right 0
+
+			&.folder
+				> *:not(:last-child)
+					margin-bottom 0
+
 	> div
 		margin-right 8px
 		width 330px

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

@@ -1,5 +1,5 @@
 <template>
-<div class="kedshtep" :class="{ naked, inDeck }">
+<div class="kedshtep" :class="{ naked, inNakedDeckColumn }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -36,7 +36,7 @@ export default Vue.extend({
 		},
 	},
 	inject: {
-		inDeck: {
+		inNakedDeckColumn: {
 			default: false
 		}
 	},
@@ -58,7 +58,7 @@ export default Vue.extend({
 .kedshtep
 	overflow hidden
 
-	&:not(.inDeck)
+	&:not(.inNakedDeckColumn)
 		background var(--face)
 		box-shadow var(--shadow)
 		border-radius var(--round)
@@ -106,7 +106,7 @@ export default Vue.extend({
 				&:active
 					color var(--faceTextButtonActive)
 
-	&.inDeck
+	&.inNakedDeckColumn
 		background var(--face)
 
 		> header

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

@@ -1,5 +1,5 @@
 <template>
-<div class="ukygtjoj" :class="{ naked, inDeck, hideHeader: !showHeader }">
+<div class="ukygtjoj" :class="{ naked, inDeck, inNakedDeckColumn, hideHeader: !showHeader }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -38,6 +38,9 @@ export default Vue.extend({
 	inject: {
 		inDeck: {
 			default: false
+		},
+		inNakedDeckColumn: {
+			default: false
 		}
 	},
 	data() {
@@ -57,7 +60,10 @@ export default Vue.extend({
 .ukygtjoj
 	overflow hidden
 
-	&:not(.inDeck)
+	&.inDeck
+		box-shadow none !important
+
+	&:not(.inNakedDeckColumn)
 		background var(--face)
 		border-radius 8px
 		box-shadow 0 4px 16px rgba(#000, 0.1)
@@ -102,7 +108,7 @@ export default Vue.extend({
 		> div
 			color var(--text)
 
-	&.inDeck
+	&.inNakedDeckColumn
 		background var(--face)
 
 		> header