From 3bd827d7dacd72ff83967fee48bbd2c45f31d0f0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 27 Feb 2020 15:13:46 +0900
Subject: Update google.vue

---
 src/client/components/google.vue | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/google.vue b/src/client/components/google.vue
index 21560008f6..01dcf24bf8 100644
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -1,12 +1,13 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><fa icon="search"/> {{ $t('search') }}</button>
+	<button @click="search"><fa :icon="faSearch"/> {{ $t('search') }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 
 export default Vue.extend({
@@ -14,7 +15,8 @@ export default Vue.extend({
 	props: ['q'],
 	data() {
 		return {
-			query: null
+			query: null,
+			faSearch
 		};
 	},
 	mounted() {
@@ -42,27 +44,17 @@ export default Vue.extend({
 		width: 100%;
 		height: 40px;
 		font-size: 16px;
-		color: var(--googleSearchFg);
-		background: var(--googleSearchBg);
-		border: solid 1px var(--googleSearchBorder);
+		border: solid 1px var(--divider);
 		border-radius: 4px 0 0 4px;
-
-		&:hover {
-			border-color: var(--googleSearchHoverBorder);
-		}
 	}
 
 	> button {
 		flex-shrink: 0;
 		padding: 0 16px;
-		border: solid 1px var(--googleSearchBorder);
+		border: solid 1px var(--divider);
 		border-left: none;
 		border-radius: 0 4px 4px 0;
 
-		&:hover {
-			background-color: var(--googleSearchHoverButton);
-		}
-
 		&:active {
 			box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
 		}
-- 
cgit v1.2.3-freya


From 3ca3712bae1b3eefb05f1969ab834fcbdd4463b6 Mon Sep 17 00:00:00 2001
From: fuyu <54523771+mfmfuyu@users.noreply.github.com>
Date: Fri, 6 Mar 2020 22:54:23 +0900
Subject: ダークテーマ利用時にセレクトが使いにくくなる問題を修正 (#6117)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/ui/select.vue | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/client/components')

diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index a1e89cdf02..ce21949713 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -158,6 +158,11 @@ export default Vue.extend({
 			outline: none;
 			box-shadow: none;
 			color: var(--fg);
+
+			option,
+			optgroup {
+				background: var(--bg);
+			}
 		}
 
 		> .prefix,
-- 
cgit v1.2.3-freya


From 4e2f954683d77447a1317cea48b587828137f511 Mon Sep 17 00:00:00 2001
From: Oni-Men <sensyaheis@gmail.com>
Date: Sat, 7 Mar 2020 00:31:48 +0900
Subject: note overflow: hidden (#6138)

---
 src/client/components/note.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client/components')

diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 909ed30235..fea074461e 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -684,6 +684,7 @@ export default Vue.extend({
 .note {
 	position: relative;
 	transition: box-shadow 0.1s ease;
+	overflow: hidden;
 
 	&.max-width_500px {
 		font-size: 0.9em;
-- 
cgit v1.2.3-freya


From 1ad8603cc20acd936e2aa8e47895dd2d3269dec7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 14 Mar 2020 11:31:03 +0900
Subject: fix gif badge (#6153)

---
 src/client/components/media-image.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/components')

diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 3bb1bda5e2..79b5150b11 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -90,7 +90,7 @@ export default Vue.extend({
 	> div {
 		background-color: var(--fg);
 		border-radius: 6px;
-		color: var(--secondary);
+		color: var(--accentLighten);
 		display: inline-block;
 		font-size: 14px;
 		font-weight: bold;
-- 
cgit v1.2.3-freya


From b5d5275e9b6524f006210eaf27f3bc6ea8c6120a Mon Sep 17 00:00:00 2001
From: Yuiga Wada <51681991+YuigaWada@users.noreply.github.com>
Date: Sat, 14 Mar 2020 15:59:02 +0900
Subject: Auth認証画面から正常にログインできるよう修正 (#6154)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix #6095

Auth認証画面から正常にログインできるよう修正

* Fix #6095
---
 src/client/components/signin.vue | 0
 src/client/pages/auth.vue        | 5 ++++-
 2 files changed, 4 insertions(+), 1 deletion(-)
 mode change 100644 => 100755 src/client/components/signin.vue
 mode change 100644 => 100755 src/client/pages/auth.vue

(limited to 'src/client/components')

diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
old mode 100644
new mode 100755
diff --git a/src/client/pages/auth.vue b/src/client/pages/auth.vue
old mode 100644
new mode 100755
index 8855948416..9f5b45f001
--- a/src/client/pages/auth.vue
+++ b/src/client/pages/auth.vue
@@ -26,7 +26,7 @@
 </div>
 <div class="signin" v-else>
 	<h1>{{ $t('sign-in') }}</h1>
-	<mk-signin/>
+	<mk-signin @login="onLogin"/>
 </div>
 </template>
 
@@ -85,6 +85,9 @@ export default Vue.extend({
 			if (this.session.app.callbackUrl) {
 				location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
 			}
+		}, onLogin(res) {
+			localStorage.setItem('i', res.i);
+			location.reload();
 		}
 	}
 });
-- 
cgit v1.2.3-freya


From b0151afa9a921198074a78940fca4cf674420739 Mon Sep 17 00:00:00 2001
From: Oni-Men <sensyaheis@gmail.com>
Date: Fri, 20 Mar 2020 14:30:37 +0900
Subject: Add range component, 音量設定で使用する (#6146)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add range component, use range component at volume setting

* refactor

* refactor 2

* Update range.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 src/client/components/ui/range.vue     | 138 +++++++++++++++++++++++++++++++++
 src/client/pages/preferences/index.vue |  18 ++++-
 2 files changed, 152 insertions(+), 4 deletions(-)
 create mode 100644 src/client/components/ui/range.vue

(limited to 'src/client/components')

diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
new file mode 100644
index 0000000000..ab59bf516c
--- /dev/null
+++ b/src/client/components/ui/range.vue
@@ -0,0 +1,138 @@
+<template>
+<div class="timctyfi" :class="{ focused, disabled }">
+	<div class="icon"><slot name="icon"></slot></div>
+	<span class="title"><slot name="title"></slot></span>
+	<input
+		type="range"
+		ref="input"
+		v-model="v"
+		:disabled="disabled"
+		:min="min"
+		:max="max"
+		:step="step"
+		:autofocus="autofocus"
+		@focus="focused = true"
+		@blur="focused = false"
+		@input="$emit('input', $event.target.value)"
+	/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		min: {
+			type: String,
+			required: false,
+			default: "0"
+		},
+		max: {
+			type: String,
+			required: false,
+			default: "100"
+		},
+		step: {
+			type: String,
+			required: false,
+			default: "1"
+		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		}
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false
+		};
+	},
+	watch: {
+		value(v) {
+			this.v = parseFloat(v);
+		}
+	},
+	mounted() {
+		if (this.autofocus) {
+			this.$nextTick(() => {
+				this.$refs.input.focus();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.timctyfi {
+	position: relative;
+	margin: 8px;
+
+	> .icon {
+		display: inline-block;
+		width: 24px;
+		text-align: center;
+	}
+
+	> .title {
+		pointer-events: none;
+		font-size: 16px;
+		color: var(--inputLabel);
+		overflow: hidden;
+	}
+
+	> input {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background: var(--xxubwiul);
+		height: 7px;
+		margin: 0 8px;
+		outline: 0;
+		border: 0;
+		border-radius: 7px;
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			box-sizing: content-box;
+		}
+
+		&::-moz-range-thumb {
+			-moz-appearance: none;
+			appearance: none;
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index eddf69653d..3bc305a229 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -8,8 +8,10 @@
 	<section class="_card">
 		<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
 		<div class="_content">
-			{{ $t('volume') }}
-			<input type="range" v-model="sfxVolume" min="0" max="1" step="0.1"/>
+			<mk-range v-model="sfxVolume" min="0" max="1" step="0.1">
+				<fa slot="icon" :icon="volumeIcon"/>
+				<span slot="title">{{ $t('volume') }}</span>
+			</mk-range>
 		</div>
 		<div class="_content">
 			<mk-select v-model="sfxNote">
@@ -85,12 +87,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faImage, faCog, faMusic, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
 import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkRadio from '../../components/ui/radio.vue';
+import MkRange from '../../components/ui/range.vue';
 import XTheme from './theme.vue';
 import i18n from '../../i18n';
 import { langs } from '../../config';
@@ -128,6 +131,7 @@ export default Vue.extend({
 		MkSwitch,
 		MkSelect,
 		MkRadio,
+		MkRange
 	},
 
 	data() {
@@ -136,7 +140,7 @@ export default Vue.extend({
 			lang: localStorage.getItem('lang'),
 			fontSize: localStorage.getItem('fontSize'),
 			sounds,
-			faImage, faCog, faMusic, faPlay
+			faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute
 		}
 	},
 
@@ -210,6 +214,12 @@ export default Vue.extend({
 			get() { return this.$store.state.device.sfxAntenna; },
 			set(value) { this.$store.commit('device/set', { key: 'sfxAntenna', value }); }
 		},
+
+		volumeIcon: {
+			get() {
+				return this.sfxVolume === 0 ? faVolumeMute : faVolumeUp;
+			}
+		}
 	},
 
 	watch: {
-- 
cgit v1.2.3-freya


From 933638d0355670eb7e178d4cbdecbae82b48b2ed Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 18:00:42 +0900
Subject: Fix bug

---
 src/client/components/poll-editor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index b5b8c2c02d..91c7dab598 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -53,7 +53,7 @@ import Vue from 'vue';
 import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import { erase } from '../../prelude/array';
-import { addTimespan } from '../../prelude/time';
+import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '../../misc/format-time-string';
 import MkInput from './ui/input.vue';
 import MkSelect from './ui/select.vue';
@@ -73,7 +73,7 @@ export default Vue.extend({
 			choices: ['', ''],
 			multiple: false,
 			expiration: 'infinite',
-			atDate: formatDateTimeString(addTimespan(new Date(), 1, 'days'), 'yyyy-MM-dd'),
+			atDate: formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'),
 			atTime: '00:00',
 			after: 0,
 			unit: 'second',
-- 
cgit v1.2.3-freya


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: 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(-)

(limited to 'src/client/components')

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>
-- 
cgit v1.2.3-freya


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: 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(-)

(limited to 'src/client/components')

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 10f6dea517..d41dd9d521 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 9bbde6293a..deb682d586 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 2d80e6f6f8..5f10893a8f 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 {
-- 
cgit v1.2.3-freya


From 25d0b4bbf1a34cf1f61b703dc4c8d65718db6f03 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 19:06:50 +0900
Subject: wip

---
 src/client/app.vue                    | 2 +-
 src/client/components/url-preview.vue | 2 +-
 src/client/style.scss                 | 6 +++---
 src/client/themes/_dark.json5         | 1 -
 src/client/themes/_light.json5        | 1 -
 5 files changed, 5 insertions(+), 7 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/app.vue b/src/client/app.vue
index df571f824b..0b7c18fcbd 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -975,7 +975,7 @@ 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);
+			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
 
 			@media (max-width: $side-hide-threshold) {
 				min-width: 0;
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 940d3892db..2abde9c99a 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -230,7 +230,7 @@ export default Vue.extend({
 		position: relative;
 		display: block;
 		font-size: 14px;
-		box-shadow: 0 1px 4px var(--tyvedwbe);
+		box-shadow: 0 0 0 1px var(--divider);
 		border-radius: 4px;
 		overflow: hidden;
 
diff --git a/src/client/style.scss b/src/client/style.scss
index 5f10893a8f..b698f2c04f 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -279,17 +279,17 @@ hr {
 	position: relative;
 	background: var(--panel);
 	border-radius: var(--radius);
-	box-shadow: 0 0 0 1px var(--shadow);
+	box-shadow: 0 0 0 1px var(--divider);
 }
 
 main ._panel {
 	border-radius: 0;
-	box-shadow: 0 1px 0 0 var(--shadow), 0 -1px 0 0 var(--shadow);
+	box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
 }
 
 ._panel ._panel {
 	border-radius: 0;
-	box-shadow: 0 1px 0 0 var(--shadow), 0 -1px 0 0 var(--shadow);
+	box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
 }
 
 ._card {
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index db4813d8ba..e6d8b42a5c 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -57,7 +57,6 @@
 		nwjktjjq: 'rgba(255, 255, 255, 0.1)',
 		geavgsxy: 'rgba(255, 255, 255, 0.05)',
 		nhzhphzx: 'rgba(255, 255, 255, 0.15)',
-		tyvedwbe: 'rgba(0, 0, 0, 0.5)',
 		bwqtlupy: 'rgba(255, 255, 255, 0.05)',
 		jkhztclx: ':lighten<5<@accent',
 		zbqjwygh: ':darken<5<@accent',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index ead162011a..18a1222919 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -57,7 +57,6 @@
 		nwjktjjq: 'rgba(0, 0, 0, 0.1)',
 		geavgsxy: 'rgba(0, 0, 0, 0.05)',
 		nhzhphzx: 'rgba(0, 0, 0, 0.25)',
-		tyvedwbe: 'rgba(0, 0, 0, 0.1)',
 		bwqtlupy: 'rgba(0, 0, 0, 0.05)',
 		jkhztclx: ':lighten<5<@accent',
 		zbqjwygh: ':darken<5<@accent',
-- 
cgit v1.2.3-freya


From e69ab4504487c30a72a381a2873b1f3e52109611 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 19:19:28 +0900
Subject: wip

---
 src/client/components/note.sub.vue |  5 ++---
 src/client/components/note.vue     | 13 +++++--------
 2 files changed, 7 insertions(+), 11 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index 7f6f972896..a8eee8de6a 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="zlrxdaqttccpwhpaagdmkawtzklsccam">
+<div class="wrpstxzv">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<x-note-header class="header" :note="note" :mini="true"/>
@@ -56,11 +56,10 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.zlrxdaqttccpwhpaagdmkawtzklsccam {
+.wrpstxzv {
 	display: flex;
 	padding: 16px 32px;
 	font-size: 0.9em;
-	background: rgba(0, 0, 0, 0.03);
 
 	@media (max-width: 450px) {
 		padding: 14px 16px;
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index fea074461e..6850ebd14a 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -750,14 +750,6 @@ export default Vue.extend({
 		opacity: 1;
 	}
 
-	> *:first-child {
-		border-radius: var(--radius) var(--radius) 0 0;
-	}
-
-	> *:last-child {
-		border-radius: 0 0 var(--radius) var(--radius);
-	}
-
 	> .info {
 		display: flex;
 		align-items: center;
@@ -785,6 +777,11 @@ export default Vue.extend({
 		padding-top: 8px;
 	}
 
+	> .reply-to {
+		opacity: 0.7;
+		padding-bottom: 0;
+	}
+
 	> .renote {
 		display: flex;
 		align-items: center;
-- 
cgit v1.2.3-freya


From def5ea797801f87759b12bb0b4fe660fed2f998c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 21:58:04 +0900
Subject: wip

---
 src/client/app.vue                          | 3 ++-
 src/client/components/note.sub.vue          | 4 ++--
 src/client/pages/messaging-room.message.vue | 4 +++-
 src/client/themes/_dark.json5               | 3 ++-
 src/client/themes/_light.json5              | 1 +
 5 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/app.vue b/src/client/app.vue
index 0b7c18fcbd..b0c92105ed 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -652,7 +652,7 @@ export default Vue.extend({
 	$header-height: 60px;
 	$nav-width: 250px;
 	$nav-icon-only-width: 74px;
-	$main-width: 700px;
+	$main-width: 650px;
 	$ui-font-size: 1em;
 	$nav-icon-only-threshold: 1300px;
 	$nav-hide-threshold: 700px;
@@ -976,6 +976,7 @@ export default Vue.extend({
 			width: $main-width;
 			min-width: $main-width;
 			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
+			background: var(--mainBg);
 
 			@media (max-width: $side-hide-threshold) {
 				min-width: 0;
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index a8eee8de6a..5efbb8f1e9 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wrpstxzv">
+<div class="wrpstxzv" v-size="[{ max: 450 }]">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<x-note-header class="header" :note="note" :mini="true"/>
@@ -61,7 +61,7 @@ export default Vue.extend({
 	padding: 16px 32px;
 	font-size: 0.9em;
 
-	@media (max-width: 450px) {
+	&.max-width_450px {
 		padding: 14px 16px;
 	}
 
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging-room.message.vue
index a520306f28..ba30f6145b 100644
--- a/src/client/pages/messaging-room.message.vue
+++ b/src/client/pages/messaging-room.message.vue
@@ -2,7 +2,7 @@
 <div class="thvuemwp" :data-is-me="isMe">
 	<mk-avatar class="avatar" :user="message.user"/>
 	<div class="content">
-		<div class="balloon _panel" :data-no-text="message.text == null">
+		<div class="balloon" :data-no-text="message.text == null">
 			<button class="delete-button" v-if="isMe" :title="$t('delete')" @click="del">
 				<img src="/assets/remove.png" alt="Delete"/>
 			</button>
@@ -243,6 +243,7 @@ export default Vue.extend({
 	}
 
 	&:not([data-is-me]) {
+		padding-left: var(--margin);
 
 		> .content {
 			padding-left: 16px;
@@ -279,6 +280,7 @@ export default Vue.extend({
 
 	&[data-is-me] {
 		flex-direction: row-reverse;
+		padding-right: var(--margin);
 
 		> .content {
 			padding-right: 16px;
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index e6d8b42a5c..7ef6e339b5 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -17,9 +17,10 @@
 		fgHighlighted: ':lighten<3<@fg',
 		html: '@bg',
 		indicator: '@accent',
-		panel: '#111213',
+		panel: '#000',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(20, 20, 20, 0.75)',
+		mainBg: ':lighten<3<@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':lighten<17<@fg',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 18a1222919..3727b93a3b 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -20,6 +20,7 @@
 		panel: '#fff',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(255, 255, 255, 0.75)',
+		mainBg: '@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':darken<17<@fg',
-- 
cgit v1.2.3-freya


From 4785ee8c325a7fdb8f82ba34e81877f19351d146 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 23:08:45 +0900
Subject: wip

---
 src/client/components/ui/range.vue    | 12 ++++++------
 src/client/components/url-preview.vue |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index ab59bf516c..7fb857f520 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -33,19 +33,19 @@ export default Vue.extend({
 			default: false
 		},
 		min: {
-			type: String,
+			type: Number,
 			required: false,
-			default: "0"
+			default: 0
 		},
 		max: {
-			type: String,
+			type: Number,
 			required: false,
-			default: "100"
+			default: 100
 		},
 		step: {
-			type: String,
+			type: Number,
 			required: false,
-			default: "1"
+			default: 1
 		},
 		autofocus: {
 			type: Boolean,
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 2abde9c99a..94d07cbaed 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -231,7 +231,7 @@ export default Vue.extend({
 		display: block;
 		font-size: 14px;
 		box-shadow: 0 0 0 1px var(--divider);
-		border-radius: 4px;
+		border-radius: 6px;
 		overflow: hidden;
 
 		&:hover {
-- 
cgit v1.2.3-freya


From ebbc42bebc4255047ba009733c6c417353d70786 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Mar 2020 00:21:33 +0900
Subject: wip

---
 src/client/components/error.vue               |  2 --
 src/client/components/index.ts                |  2 --
 src/client/components/menu.vue                |  6 ++--
 src/client/components/sequential-entrance.vue | 40 ---------------------------
 src/client/components/ui/pagination.vue       |  4 +--
 src/client/components/users-dialog.vue        |  6 ++--
 src/client/components/visibility-chooser.vue  |  4 +--
 src/client/pages/instance/queue.queue.vue     |  6 ++--
 src/client/pages/messaging.vue                |  4 +--
 src/client/pages/user/index.vue               |  6 ++--
 src/client/style.scss                         |  2 +-
 11 files changed, 19 insertions(+), 63 deletions(-)
 delete mode 100644 src/client/components/sequential-entrance.vue

(limited to 'src/client/components')

diff --git a/src/client/components/error.vue b/src/client/components/error.vue
index f4698247b2..7446a7cb5d 100644
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -27,8 +27,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mjndxjcg {
-	max-width: 350px;
-	margin: 0 auto;
 	padding: 32px;
 	text-align: center;
 
diff --git a/src/client/components/index.ts b/src/client/components/index.ts
index 9e95fba873..87547599a9 100644
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -9,7 +9,6 @@ import ellipsis from './ellipsis.vue';
 import time from './time.vue';
 import url from './url.vue';
 import loading from './loading.vue';
-import SequentialEntrance from './sequential-entrance.vue';
 import error from './error.vue';
 import streamIndicator from './stream-indicator.vue';
 
@@ -23,5 +22,4 @@ Vue.component('mk-time', time);
 Vue.component('mk-url', url);
 Vue.component('mk-loading', loading);
 Vue.component('mk-error', error);
-Vue.component('sequential-entrance', SequentialEntrance);
 Vue.component('stream-indicator', streamIndicator);
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
index 6fee809c40..74e9a29ccf 100644
--- a/src/client/components/menu.vue
+++ b/src/client/components/menu.vue
@@ -1,6 +1,6 @@
 <template>
 <x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction" ref="items">
+	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>
 			<span v-else-if="item.type === 'label'" class="label item" :key="i">
@@ -28,7 +28,7 @@
 				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
 			</button>
 		</template>
-	</sequential-entrance>
+	</div>
 </x-popup>
 </template>
 
@@ -91,7 +91,7 @@ export default Vue.extend({
 	mounted() {
 		if (this.viaKeyboard) {
 			this.$nextTick(() => {
-				focusNext(this.$refs.items.$slots.default[0].elm, true);
+				focusNext(this.$refs.items.children[0], true);
 			});
 		}
 	},
diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue
deleted file mode 100644
index 50113cff1c..0000000000
--- a/src/client/components/sequential-entrance.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<transition-group v-if="$store.state.device.animation"
-	class="uupnnhew"
-	name="staggered"
-	tag="div"
-	appear
->
-	<slot></slot>
-</transition-group>
-<div v-else>
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	methods: {
-		focus() {
-			this.$slots.default[0].elm.focus();
-		}
-	},
-});
-</script>
-
-<style lang="scss">
-.uupnnhew {
-	> .staggered-enter {
-		opacity: 0;
-		transform: translateY(-64px);
-	}
-
-	@for $i from 1 through 30 {
-		> .staggered-enter-active:nth-child(#{$i}) {
-			transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
-		}
-	}
-}
-</style>
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index 7f04b35de1..e888b7420c 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -1,5 +1,5 @@
 <template>
-<sequential-entrance class="cxiknjgy" :class="{ autoMargin }">
+<div class="cxiknjgy" :class="{ autoMargin }">
 	<slot :items="items"></slot>
 	<div class="empty" v-if="empty" key="_empty_">
 		<slot name="empty"></slot>
@@ -10,7 +10,7 @@
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</mk-button>
 	</div>
-</sequential-entrance>
+</div>
 </template>
 
 <script lang="ts">
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index a70b3c2d13..9d0c5e4251 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -6,15 +6,15 @@
 			<button class="_button" @click="close()"><fa :icon="faTimes"/></button>
 		</div>
 
-		<sequential-entrance class="users">
-			<router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
+		<div class="users">
+			<router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
 				<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
 				<div class="body">
 					<mk-user-name :user="extract ? extract(item) : item" class="name"/>
 					<mk-acct :user="extract ? extract(item) : item" class="acct"/>
 				</div>
 			</router-link>
-		</sequential-entrance>
+		</div>
 
 		<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
index 28413fd837..dc7b41e286 100644
--- a/src/client/components/visibility-chooser.vue
+++ b/src/client/components/visibility-chooser.vue
@@ -1,6 +1,6 @@
 <template>
 <x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<sequential-entrance class="gqyayizv" :delay="30">
+	<div class="gqyayizv">
 		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
 			<div><fa :icon="faGlobe"/></div>
 			<div>
@@ -29,7 +29,7 @@
 				<span>{{ $t('_visibility.specifiedDescription') }}</span>
 			</div>
 		</button>
-	</sequential-entrance>
+	</div>
 </x-popup>
 </template>
 
diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue
index 710f4ec099..7f0fc7d2bc 100644
--- a/src/client/pages/instance/queue.queue.vue
+++ b/src/client/pages/instance/queue.queue.vue
@@ -11,12 +11,12 @@
 		<canvas ref="chart"></canvas>
 	</div>
 	<div class="_content" style="max-height: 180px; overflow: auto;">
-		<sequential-entrance :delay="15" v-if="jobs.length > 0">
-			<div v-for="(job, i) in jobs" :key="job[0]">
+		<div v-if="jobs.length > 0">
+			<div v-for="job in jobs" :key="job[0]">
 				<span>{{ job[0] }}</span>
 				<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
 			</div>
-		</sequential-entrance>
+		</div>
 		<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
 	</div>
 </section>
diff --git a/src/client/pages/messaging.vue b/src/client/pages/messaging.vue
index bc85e7a56b..2179115dea 100644
--- a/src/client/pages/messaging.vue
+++ b/src/client/pages/messaging.vue
@@ -5,7 +5,7 @@
 
 	<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
 
-	<sequential-entrance class="history" v-if="messages.length > 0" :delay="30">
+	<div class="history" v-if="messages.length > 0">
 		<router-link v-for="(message, i) in messages"
 			class="message _panel"
 			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
@@ -30,7 +30,7 @@
 				</div>
 			</div>
 		</router-link>
-	</sequential-entrance>
+	</div>
 	<div class="no-history" v-if="!fetching && messages.length == 0">
 		<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
 		<div>{{ $t('noHistory') }}</div>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index f7fabd1786..f7a51c1fbc 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -80,9 +80,9 @@
 	</div>
 	<router-view :user="user"></router-view>
 	<template v-if="$route.name == 'user'">
-		<sequential-entrance class="pins">
-			<x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
-		</sequential-entrance>
+		<div class="pins">
+			<x-note v-for="note in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
+		</div>
 		<mk-container :body-togglable="true" class="content">
 			<template #header><fa :icon="faImage"/>{{ $t('images') }}</template>
 			<div>
diff --git a/src/client/style.scss b/src/client/style.scss
index b698f2c04f..da0c20d990 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -3,7 +3,7 @@
 :root {
 	--radius: 8px;
 	--marginFull: 16px;
-	--marginHalf: 8px;
+	--marginHalf: 10px;
 
 	--margin: var(--marginFull);
 
-- 
cgit v1.2.3-freya


From f1fc12d9cc779fe2a2ec9e072912bc197d5e23b1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Mar 2020 12:32:40 +0900
Subject: wip

---
 src/client/components/note.vue          |  6 +++++-
 src/client/components/notes.vue         | 19 ++++++-------------
 src/client/components/notifications.vue | 16 ++--------------
 src/client/pages/note.vue               | 28 ++++++++++++----------------
 src/client/style.scss                   |  8 ++++++++
 5 files changed, 33 insertions(+), 44 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 6850ebd14a..db669309d3 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -79,7 +79,7 @@
 			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply"/>
 </div>
 </template>
 
@@ -935,5 +935,9 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	> .reply {
+		border-top: solid 1px var(--divider);
+	}
 }
 </style>
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index deb682d586..bc2ae8472c 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -7,22 +7,22 @@
 
 	<mk-error v-if="error" @retry="init()"/>
 
-	<div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);">
-		<div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+	<div v-if="more && reversed" style="margin-bottom: var(--margin);">
+		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</div>
+		</button>
 	</div>
 
 	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
 		<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</x-list>
 
-	<div class="more" v-if="more && !reversed" style="margin-top: var(--margin);">
-		<div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+	<div v-if="more && !reversed" style="margin-top: var(--margin);">
+		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</div>
+		</button>
 	</div>
 </div>
 </template>
@@ -116,12 +116,5 @@ export default Vue.extend({
 			}
 		}
 	}
-
-	> .more > .button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 48px;
-	}
 }
 </style>
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index f090dc6bc4..a17663b01d 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -5,9 +5,9 @@
 		<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">
+	<button class="_panel _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-		<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
+		<template v-if="moreFetching"><mk-loading inline/></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import paging from '../scripts/paging';
 import XNotification from './notification.vue';
@@ -55,7 +54,6 @@ export default Vue.extend({
 					includeTypes: this.type ? [this.type] : undefined
 				})
 			},
-			faSpinner
 		};
 	},
 
@@ -96,16 +94,6 @@ export default Vue.extend({
 		}
 	}
 
-	> .more {
-		display: block;
-		width: 100%;
-		padding: 16px;
-
-		> [data-icon] {
-			margin-right: 4px;
-		}
-	}
-
 	> .empty {
 		margin: 0;
 		padding: 16px;
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index ae7917c602..3f270b115a 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -8,22 +8,20 @@
 		/>
 	</portal>
 
-	<transition :name="$store.state.device.animation ? 'zoom' : ''" mode="out-in">
-		<div v-if="note">
-			<mk-button v-if="hasNext && !showNext" @click="showNext = true" primary style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></mk-button>
-			<x-notes v-if="showNext" ref="next" :pagination="next"/>
-			<hr v-if="showNext"/>
+	<div v-if="note">
+		<button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button>
+		<x-notes v-if="showNext" ref="next" :pagination="next"/>
+		<hr v-if="showNext"/>
 
-			<x-note :note="note" :key="note.id" :detail="true"/>
-			<div v-if="error">
-				<mk-error @retry="fetch()"/>
-			</div>
-
-			<mk-button v-if="hasPrev && !showPrev" @click="showPrev = true" primary style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></mk-button>
-			<hr v-if="showPrev"/>
-			<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
+		<x-note :note="note" :key="note.id" :detail="true"/>
+		<div v-if="error">
+			<mk-error @retry="fetch()"/>
 		</div>
-	</transition>
+
+		<button class="_panel _button" v-if="hasPrev && !showPrev" @click="showPrev = true" style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></button>
+		<hr v-if="showPrev"/>
+		<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
+	</div>
 </div>
 </template>
 
@@ -34,7 +32,6 @@ import i18n from '../i18n';
 import Progress from '../scripts/loading';
 import XNote from '../components/note.vue';
 import XNotes from '../components/notes.vue';
-import MkButton from '../components/ui/button.vue';
 
 export default Vue.extend({
 	i18n,
@@ -46,7 +43,6 @@ export default Vue.extend({
 	components: {
 		XNote,
 		XNotes,
-		MkButton,
 	},
 	data() {
 		return {
diff --git a/src/client/style.scss b/src/client/style.scss
index da0c20d990..fee64c7ca8 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -292,6 +292,14 @@ main ._panel {
 	box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
 }
 
+._panel._button {
+	display: flex;
+	width: 100%;
+	min-height: 48px;
+	align-items: center;
+	justify-content: center;
+}
+
 ._card {
 	@extend ._panel;
 
-- 
cgit v1.2.3-freya


From ee6311e83da0131a93a1bc5379342689cff23a47 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Mar 2020 13:07:02 +0900
Subject: Resolve #6145

---
 src/client/components/remote-caution.vue | 29 +++++++++++++++++++++++++++++
 src/client/pages/note.vue                |  4 ++++
 src/client/pages/user/index.vue          | 15 +++------------
 3 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 src/client/components/remote-caution.vue

(limited to 'src/client/components')

diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
new file mode 100644
index 0000000000..b24b9af2db
--- /dev/null
+++ b/src/client/components/remote-caution.vue
@@ -0,0 +1,29 @@
+<template>
+<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../i18n';
+export default Vue.extend({
+	i18n,
+	props: {
+		href: {
+			type: String,
+			required: true
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.jmgmzlwq {
+	font-size: 0.8em;
+	padding: 16px;
+
+	> a {
+		margin-left: 4px;
+		color: var(--accent);
+	}
+}
+</style>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 3f270b115a..5f57d0d999 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -9,6 +9,8 @@
 	</portal>
 
 	<div v-if="note">
+		<mk-remote-caution v-if="note.user.host != null" :href="note.url" style="margin-bottom: var(--margin)"/>
+		
 		<button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button>
 		<x-notes v-if="showNext" ref="next" :pagination="next"/>
 		<hr v-if="showNext"/>
@@ -32,6 +34,7 @@ import i18n from '../i18n';
 import Progress from '../scripts/loading';
 import XNote from '../components/note.vue';
 import XNotes from '../components/notes.vue';
+import MkRemoteCaution from '../components/remote-caution.vue';
 
 export default Vue.extend({
 	i18n,
@@ -43,6 +46,7 @@ export default Vue.extend({
 	components: {
 		XNote,
 		XNotes,
+		MkRemoteCaution,
 	},
 	data() {
 		return {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index f7a51c1fbc..827f7e1c9e 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -3,7 +3,7 @@
 	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
 	
-	<div class="remote-caution _panel" v-if="user.host != null"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="user.url" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+	<mk-remote-caution v-if="user.host != null" :href="user.url" style="margin-bottom: var(--margin)"/>
 	<div class="profile _panel" :key="user.id">
 		<div class="banner-container" :style="style">
 			<div class="banner" ref="banner" :style="style"></div>
@@ -113,6 +113,7 @@ import XUserMenu from '../../components/user-menu.vue';
 import XNote from '../../components/note.vue';
 import MkFollowButton from '../../components/follow-button.vue';
 import MkContainer from '../../components/ui/container.vue';
+import MkRemoteCaution from '../../components/remote-caution.vue';
 import Progress from '../../scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
 
@@ -122,6 +123,7 @@ export default Vue.extend({
 		XNote,
 		MkFollowButton,
 		MkContainer,
+		MkRemoteCaution,
 		XPhotos: () => import('./index.photos.vue').then(m => m.default),
 		XActivity: () => import('./index.activity.vue').then(m => m.default),
 	},
@@ -215,17 +217,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-user-page {
-	> .remote-caution {
-		font-size: 0.8em;
-		padding: 16px;
-		margin-bottom: var(--margin);
-
-		> a {
-			margin-left: 4px;
-			color: var(--accent);
-		}
-	}
-
 	> .profile {
 		position: relative;
 		margin-bottom: var(--margin);
-- 
cgit v1.2.3-freya


From 452005381f6a7142433ce860620186d68779d216 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Mar 2020 13:10:44 +0900
Subject: Fix bug

---
 src/client/components/remote-caution.vue | 7 +++++++
 src/client/pages/user/index.vue          | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/client/components')

diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
index b24b9af2db..95b37d3053 100644
--- a/src/client/components/remote-caution.vue
+++ b/src/client/components/remote-caution.vue
@@ -4,7 +4,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
+
 export default Vue.extend({
 	i18n,
 	props: {
@@ -13,6 +15,11 @@ export default Vue.extend({
 			required: true
 		},
 	},
+	data() {
+		return {
+			faExclamationTriangle
+		};
+	}
 });
 </script>
 
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 5f84a30c63..9f5f968901 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -105,7 +105,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faEllipsisH, faRobot, faLock, faBookmark, faExclamationTriangle, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
 import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
 import XUserTimeline from './index.timeline.vue';
@@ -139,7 +139,7 @@ export default Vue.extend({
 			user: null,
 			error: null,
 			parallaxAnimationId: null,
-			faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faExclamationTriangle, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
+			faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
 		};
 	},
 
-- 
cgit v1.2.3-freya