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

---
 src/client/components/date-separated-list.vue |  6 +++++-
 src/client/components/notes.vue               | 14 +++++++-------
 src/client/style.scss                         |  1 +
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 10f6dea51..d41dd9d52 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,5 +1,5 @@
 <template>
-<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" appear :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
+<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
 		<slot :item="item" :i="i"></slot>
 		<div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)">
@@ -76,6 +76,10 @@ 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;
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 9bbde6293..deb682d58 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -8,10 +8,10 @@
 	<mk-error v-if="error" @retry="init()"/>
 
 	<div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);">
-		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+		<div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</mk-button>
+		</div>
 	</div>
 
 	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
@@ -19,10 +19,10 @@
 	</x-list>
 
 	<div class="more" v-if="more && !reversed" style="margin-top: var(--margin);">
-		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+		<div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</mk-button>
+		</div>
 	</div>
 </div>
 </template>
@@ -118,10 +118,10 @@ export default Vue.extend({
 	}
 
 	> .more > .button {
-		margin-left: auto;
-		margin-right: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		height: 48px;
-		width: 100%;
 	}
 }
 </style>
diff --git a/src/client/style.scss b/src/client/style.scss
index 2d80e6f6f..5f10893a8 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -279,6 +279,7 @@ hr {
 	position: relative;
 	background: var(--panel);
 	border-radius: var(--radius);
+	box-shadow: 0 0 0 1px var(--shadow);
 }
 
 main ._panel {