From f31c94e2ea43fa36d2a0fc8742e0a52a0025b643 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 18:11:39 +0900
Subject: [PATCH] wip

---
 src/client/app.vue                            |  6 ++--
 src/client/components/date-separated-list.vue |  6 ----
 src/client/components/notes.vue               |  3 +-
 src/client/components/notifications.vue       | 32 ++++---------------
 src/client/components/post-form-dialog.vue    |  3 +-
 src/client/components/post-form.vue           |  1 -
 src/client/components/ui/button.vue           |  1 -
 src/client/components/ui/container.vue        |  1 +
 src/client/pages/messaging-room.message.vue   |  1 -
 src/client/style.scss                         | 24 ++++++--------
 src/client/themes/_dark.json5                 |  3 +-
 src/client/themes/_light.json5                |  3 +-
 src/client/themes/lavender.json5              |  1 -
 src/client/widgets/notifications.vue          |  7 +---
 src/client/widgets/timeline.vue               |  8 +----
 15 files changed, 29 insertions(+), 71 deletions(-)

diff --git a/src/client/app.vue b/src/client/app.vue
index 48df0b9aa8..df571f824b 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -975,17 +975,18 @@ export default Vue.extend({
 		> main {
 			width: $main-width;
 			min-width: $main-width;
+			box-shadow: 1px 0 0 0 var(--shadow), -1px 0 0 0 var(--shadow);
 
 			@media (max-width: $side-hide-threshold) {
 				min-width: 0;
 			}
 
 			> .content {
-				padding: 16px;
+				padding: 16px 0;
 				box-sizing: border-box;
 
 				@media (max-width: 500px) {
-					padding: 8px;
+					padding: 8px 0;
 				}
 			}
 
@@ -1023,6 +1024,7 @@ export default Vue.extend({
 
 		> .widgets {
 			box-sizing: border-box;
+			margin-left: var(--margin);
 
 			@media (max-width: $side-hide-threshold) {
 				display: none;
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 53fd0a7c7f..10f6dea517 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -76,10 +76,6 @@ export default Vue.extend({
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
-	> .list-enter-active {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
-	}
-
 	&[data-direction="up"] {
 		> .list-enter {
 			opacity: 0;
@@ -109,8 +105,6 @@ export default Vue.extend({
 			line-height: 32px;
 			text-align: center;
 			font-size: 12px;
-			border-radius: 64px;
-			background: var(--dateLabelBg);
 			color: var(--dateLabelFg);
 
 			> span {
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index dc93c1f6c4..9bbde6293a 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -111,7 +111,8 @@ export default Vue.extend({
 	&.max-width_500px {
 		> .notes {
 			> ::v-deep *:not(:last-child) {
-				margin-bottom: var(--marginHalf);
+				//margin-bottom: var(--marginHalf);
+				margin-bottom: 0;
 			}
 		}
 	}
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index ff6d63821f..f090dc6bc4 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,8 +1,8 @@
 <template>
-<div class="mk-notifications" :class="{ page }">
+<div class="mk-notifications">
 	<x-list class="notifications" :items="items" v-slot="{ item: notification }">
 		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" :key="notification.id"/>
-		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="notification" :class="{ _panel: page }" :key="notification.id"/>
+		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 	</x-list>
 
 	<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
@@ -43,11 +43,6 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
-		page: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
 	},
 
 	data() {
@@ -94,25 +89,10 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-notifications {
-	&.page {
-		> .notifications {
-			> ::v-deep * {
-				margin-bottom: var(--margin);
-			}
-		}
-	}
-
-	&:not(.page) {
-		> .notifications {
-			> ::v-deep * {
-				margin-bottom: 8px;
-			}
-
-			> .notification {
-				background: var(--panel);
-				border-radius: 6px;
-				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-			}
+	> .notifications {
+		> ::v-deep * {
+			//margin-bottom: var(--margin);
+			margin-bottom: 0;
 		}
 	}
 
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index b6531474cf..9cb527af23 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -17,7 +17,8 @@
 				:initial-note="initialNote"
 				:instant="instant"
 				@posted="onPosted"
-				@cancel="onCanceled"/>
+				@cancel="onCanceled"
+				style="border-radius: var(--radius);"/>
 		</transition>
 	</div>
 </div>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 2d35cfe167..7b84938d5a 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -586,7 +586,6 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .gafaadew {
 	background: var(--panel);
-	border-radius: var(--radius);
 
 	> header {
 		z-index: 1000;
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 5264224c18..15289c820e 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -124,7 +124,6 @@ export default Vue.extend({
 	&.primary {
 		color: #fff;
 		background: var(--accent);
-		box-shadow: 0 6px 16px var(--accentShadow);
 
 		&:not(:disabled):hover {
 			background: var(--jkhztclx);
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 4e7c9420ab..9d5abdf2dd 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -110,6 +110,7 @@ export default Vue.extend({
 	> header {
 		position: relative;
 		box-shadow: 0 1px 0 0 var(--divider);
+		z-index: 1;
 
 		> .title {
 			margin: 0;
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging-room.message.vue
index 48de2c7cd7..a520306f28 100644
--- a/src/client/pages/messaging-room.message.vue
+++ b/src/client/pages/messaging-room.message.vue
@@ -287,7 +287,6 @@ export default Vue.extend({
 
 			> .balloon {
 				background: $me-balloon-color;
-				box-shadow: 0 6px 16px var(--accentShadow);
 				text-align: left;
 
 				&[data-no-text] {
diff --git a/src/client/style.scss b/src/client/style.scss
index 93d4159d4d..2d80e6f6f8 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -230,7 +230,6 @@ hr {
 	@extend ._button;
 	color: #fff;
 	background: var(--accent);
-	box-shadow: 0 6px 16px var(--accentShadow);
 
 	&:not(:disabled):hover {
 		background: var(--jkhztclx);
@@ -276,25 +275,22 @@ hr {
 	}
 }
 
-._shadow {
-	box-shadow: 0 8px 32px var(--shadow);
-
-	@media (max-width: 700px) {
-		box-shadow: 0 4px 16px var(--shadow);
-	}
-
-	@media (max-width: 500px) {
-		box-shadow: 0 2px 8px var(--shadow);
-	}
-}
-
 ._panel {
-	@extend ._shadow;
 	position: relative;
 	background: var(--panel);
 	border-radius: var(--radius);
 }
 
+main ._panel {
+	border-radius: 0;
+	box-shadow: 0 1px 0 0 var(--shadow), 0 -1px 0 0 var(--shadow);
+}
+
+._panel ._panel {
+	border-radius: 0;
+	box-shadow: 0 1px 0 0 var(--shadow), 0 -1px 0 0 var(--shadow);
+}
+
 ._card {
 	@extend ._panel;
 
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 5f30d2141b..db4813d8ba 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -33,8 +33,7 @@
 		divider: 'rgba(255, 255, 255, 0.1)',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		dateLabelBg: 'rgba(255, 255, 255, 0.08)',
-		dateLabelFg: '#fff',
+		dateLabelFg: '@fg',
 		infoBg: '#253142',
 		infoFg: '#fff',
 		infoWarnBg: '#42321c',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 2b411fb28d..ead162011a 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -33,8 +33,7 @@
 		divider: 'rgba(0, 0, 0, 0.1)',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
-		dateLabelBg: 'rgba(0, 0, 0, 0.5)',
-		dateLabelFg: '#fff',
+		dateLabelFg: '@fg',
 		infoBg: '#e5f5ff',
 		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
diff --git a/src/client/themes/lavender.json5 b/src/client/themes/lavender.json5
index 4eb4a54749..faa4093612 100644
--- a/src/client/themes/lavender.json5
+++ b/src/client/themes/lavender.json5
@@ -14,6 +14,5 @@
 		link: '@accent',
 		mention: '@accent',
 		hashtag: '@accent',
-		dateLabelBg: 'rgb(204, 186, 188)',
 	},
 }
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 2a718a6666..9c1bddb2ee 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -3,7 +3,7 @@
 	<mk-container :show-header="!props.compact" class="container">
 		<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
 
-		<div class="tl">
+		<div>
 			<x-notifications/>
 		</div>
 	</mk-container>
@@ -81,10 +81,5 @@ export default define({
 			flex-grow: 1;
 		}
 	}
-
-	.tl {
-		background: var(--bg);
-		padding: 8px;
-	}
 }
 </style>
diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue
index ab5664a4d8..55f78f985f 100644
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -14,7 +14,7 @@
 			</button>
 		</template>
 
-		<div class="tl">
+		<div>
 			<x-timeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list" :antenna="props.antenna"/>
 		</div>
 	</mk-container>
@@ -148,11 +148,5 @@ export default define({
 			flex-grow: 1;
 		}
 	}
-
-	.tl {
-		padding: 8px;
-		background: var(--bg);
-		box-sizing: border-box;
-	}
 }
 </style>