From 048ed26f4137e994d93b0a2cb35130c4403d2f5a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Aug 2021 12:28:23 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=E9=80=A3=E5=90=88=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=83=B3=E3=82=B9=E8=A8=AD=E5=AE=9A=E3=83=80?=
 =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/pages/instance-info.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue
index 4165f73734..7d03c0847d 100644
--- a/src/client/pages/instance-info.vue
+++ b/src/client/pages/instance-info.vue
@@ -14,6 +14,8 @@
 			</FormKeyValueView>
 		</FormGroup>
 
+		<FormButton v-if="$i.isAdmin || $i.isModerator" @click="info" primary>{{ $ts.settings }}</FormButton>
+
 		<FormTextarea readonly :value="instance.description">
 			<span>{{ $ts.description }}</span>
 		</FormTextarea>
@@ -147,6 +149,7 @@ import * as os from '@client/os';
 import number from '@client/filters/number';
 import bytes from '@client/filters/bytes';
 import * as symbols from '@client/symbols';
+import MkInstanceInfo from '@client/pages/instance/instance.vue';
 
 const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -440,6 +443,12 @@ export default defineComponent({
 				}]
 			};
 		},
+
+		info() {
+			os.popup(MkInstanceInfo, {
+				instance: this.instance
+			}, {}, 'closed');
+		}
 	}
 });
 </script>

From 1c764139bf9dfa5575ea32cfa0a4eecf9690cd7d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Aug 2021 18:01:12 +0900
Subject: [PATCH 2/6] :art:

---
 src/client/components/emoji-picker-dialog.vue | 157 ++----------------
 src/client/components/emoji-picker.vue        |   3 +-
 src/client/components/poll-editor.vue         |   3 +-
 src/client/components/ui/button.vue           |   1 +
 src/client/components/ui/menu.vue             |  24 ++-
 src/client/components/ui/popup-menu.vue       |   4 +-
 src/client/components/ui/popup.vue            |   5 +-
 src/client/components/ui/window.vue           |   1 +
 src/client/pages/doc.vue                      |   2 +-
 src/client/pages/my-lists/index.vue           |  15 +-
 src/client/style.scss                         |   2 +-
 11 files changed, 61 insertions(+), 156 deletions(-)

diff --git a/src/client/components/emoji-picker-dialog.vue b/src/client/components/emoji-picker-dialog.vue
index 9aca47f547..aa17b8b250 100644
--- a/src/client/components/emoji-picker-dialog.vue
+++ b/src/client/components/emoji-picker-dialog.vue
@@ -1,6 +1,6 @@
 <template>
-<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
-	<MkEmojiPicker class="_shadow" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
+	<MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
 </MkPopup>
 </template>
 
@@ -56,145 +56,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.omfetrab {
-	$pad: 8px;
-	--eachSize: 40px;
-
-	display: flex;
-	flex-direction: column;
-	contain: content;
-
-	&.big {
-		--eachSize: 44px;
-	}
-
-	&.w1 {
-		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
-	}
-
-	&.w2 {
-		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.w3 {
-		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
-	}
-
-	&.h1 {
-		--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
-	}
-
-	&.h2 {
-		--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.h3 {
-		--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-	}
-
-	> .search {
-		width: 100%;
-		padding: 12px;
-		box-sizing: border-box;
-		font-size: 1em;
-		outline: none;
-		border: none;
-		background: transparent;
-		color: var(--fg);
-
-		&:not(.filled) {
-			order: 1;
-			z-index: 2;
-			box-shadow: 0px -1px 0 0px var(--divider);
-		}
-	}
-
-	> .emojis {
-		height: var(--height);
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		> .index {
-			min-height: var(--height);
-			position: relative;
-			border-bottom: solid 0.5px var(--divider);
-				
-			> .arrow {
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				padding: 16px 0;
-				text-align: center;
-				opacity: 0.5;
-				pointer-events: none;
-			}
-		}
-
-		section {
-			> header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1;
-				padding: 8px;
-				font-size: 12px;
-			}
-
-			> div {
-				padding: $pad;
-
-				> button {
-					position: relative;
-					padding: 0;
-					width: var(--eachSize);
-					height: var(--eachSize);
-					border-radius: 4px;
-
-					&:focus {
-						outline: solid 2px var(--focus);
-						z-index: 1;
-					}
-
-					&:hover {
-						background: rgba(0, 0, 0, 0.05);
-					}
-
-					&:active {
-						background: var(--accent);
-						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
-					}
-
-					> * {
-						font-size: 24px;
-						height: 1.25em;
-						vertical-align: -.25em;
-						pointer-events: none;
-					}
-				}
-			}
-
-			&.result {
-				border-bottom: solid 0.5px var(--divider);
-
-				&:empty {
-					display: none;
-				}
-			}
-
-			&.unicode {
-				min-height: 384px;
-			}
-
-			&.custom {
-				min-height: 64px;
-			}
+.ryghynhb {
+	&.pointer {
+		&:before {
+			--size: 8px;
+			content: '';
+			display: block;
+			position: absolute;
+			top: calc(0px - (var(--size) * 2));
+			left: 0;
+			right: 0;
+			width: 0;
+			margin: auto;
+			border: solid var(--size) transparent;
+			border-bottom-color: var(--popup);
 		}
 	}
 }
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index 06653324d7..d8703202c7 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]">
+<div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
 	<input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
 	<div class="emojis" ref="emojis">
 		<section class="result">
@@ -346,7 +346,6 @@ export default defineComponent({
 
 	display: flex;
 	flex-direction: column;
-	contain: content;
 
 	&.big {
 		--eachSize: 44px;
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index dfc198fc1e..0a9a1c6a03 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -5,8 +5,7 @@
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)">
-				<template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template>
+			<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
 			</MkInput>
 			<button @click="remove(i)" class="_button">
 				<i class="fas fa-times"></i>
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 4c5d617d76..1e72660f33 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -127,6 +127,7 @@ export default defineComponent({
 	border-radius: 999px;
 	overflow: hidden;
 	box-sizing: border-box;
+	transition: background 0.1s ease;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index 8a1871e256..d652d9b84f 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="rrevdjwt" :class="{ left: align === 'left' }"
+<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
 	ref="items"
 	@contextmenu.self="e => e.preventDefault()"
 	v-hotkey="keymap"
@@ -58,7 +58,11 @@ export default defineComponent({
 		align: {
 			type: String,
 			requried: false
-		}
+		},
+		point: {
+			type: String,
+			requried: false
+		},
 	},
 	emits: ['close'],
 	data() {
@@ -137,6 +141,22 @@ export default defineComponent({
 .rrevdjwt {
 	padding: 8px 0;
 
+	&.pointer {
+		&:before {
+			--size: 8px;
+			content: '';
+			display: block;
+			position: absolute;
+			top: calc(0px - (var(--size) * 2));
+			left: 0;
+			right: 0;
+			width: 0;
+			margin: auto;
+			border: solid var(--size) transparent;
+			border-bottom-color: var(--popup);
+		}
+	}
+
 	&.left {
 		> .item {
 			text-align: left;
diff --git a/src/client/components/ui/popup-menu.vue b/src/client/components/ui/popup-menu.vue
index 23f7c89f3b..3590426172 100644
--- a/src/client/components/ui/popup-menu.vue
+++ b/src/client/components/ui/popup-menu.vue
@@ -1,6 +1,6 @@
 <template>
-<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
-	<MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/>
+<MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}">
+	<MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/>
 </MkPopup>
 </template>
 
diff --git a/src/client/components/ui/popup.vue b/src/client/components/ui/popup.vue
index c98e17fa25..9e360411c0 100644
--- a/src/client/components/ui/popup.vue
+++ b/src/client/components/ui/popup.vue
@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
 	<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<slot></slot>
+		<slot :point="point"></slot>
 	</div>
 </transition>
 </template>
@@ -52,6 +52,7 @@ export default defineComponent({
 			fixed: false,
 			transformOrigin: 'center',
 			contentClicking: false,
+			point: null,
 		};
 	},
 
@@ -135,8 +136,10 @@ export default defineComponent({
 			}
 
 			if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
+				this.point = 'top';
 				this.transformOrigin = 'center top';
 			} else {
+				this.point = null;
 				this.transformOrigin = 'center';
 			}
 
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue
index f8b7d82d4a..4fabab3d6d 100644
--- a/src/client/components/ui/window.vue
+++ b/src/client/components/ui/window.vue
@@ -416,6 +416,7 @@ export default defineComponent({
 			flex-shrink: 0;
 			user-select: none;
 			height: var(--height);
+			border-bottom: solid 1px var(--divider);
 
 			> ::v-deep(button) {
 				height: var(--height);
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index 753dd8013d..af3f56abcb 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -115,7 +115,7 @@ export default defineComponent({
 	line-height: 1.5;
 
 	&.max-width_500px {
-		padding: 16px;
+		padding: 24px;
 	}
 
 	> .main {
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index 2b60917060..e92f11c7d0 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -1,11 +1,9 @@
 <template>
-<div class="qkcjvfiv _section">
+<div class="qkcjvfiv">
 	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
 	<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
-		<div class="list _panel" v-for="(list, i) in items" :key="list.id">
-			<MkA :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA>
-		</div>
+		<MkA v-for="(list, i) in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA>
 	</MkPagination>
 </div>
 </template>
@@ -57,6 +55,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qkcjvfiv {
+	padding: 16px;
+
 	> .add {
 		margin: 0 auto var(--margin) auto;
 	}
@@ -65,6 +65,13 @@ export default defineComponent({
 		> .list {
 			display: flex;
 			padding: 16px;
+			border: solid 1px var(--divider);
+			border-radius: 6px;
+
+			&:hover {
+				border: solid 1px var(--accent);
+				text-decoration: none;
+			}
 		}
 	}
 }
diff --git a/src/client/style.scss b/src/client/style.scss
index 25a30a36ff..5b6969356d 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -321,7 +321,7 @@ hr {
 ._popup {
 	background: var(--popup);
 	border-radius: var(--radius);
-	contain: content;
+	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
 ._root {

From f9022fdf16d1eeb62336a9467dbf355f931b7c4a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Aug 2021 18:05:32 +0900
Subject: [PATCH 3/6] :art:

---
 src/client/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/style.scss b/src/client/style.scss
index 5b6969356d..874928942f 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -189,7 +189,7 @@ hr {
 
 ._buttonPrimary {
 	@extend ._button;
-	color: #fff;
+	color: var(--fgOnAccent);
 	background: var(--accent);
 
 	&:not(:disabled):hover {

From e3642a8d10dcc8c23d0d91ca35fa0b0c655039c3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Aug 2021 18:55:39 +0900
Subject: [PATCH 4/6] :art:

---
 src/client/components/reactions-viewer.reaction.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 99b4d50c52..6754d13815 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -170,7 +170,7 @@ export default defineComponent({
 		}
 
 		> span {
-			color: #fff;
+			color: var(--fgOnAccent);
 		}
 	}
 

From 6678d97cc46cd91caa9598a451999caee27792a7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Aug 2021 21:41:20 +0900
Subject: [PATCH 5/6] :art:

---
 src/client/components/modal-page-window.vue | 2 +-
 src/client/components/ui/modal-window.vue   | 2 +-
 src/client/components/ui/window.vue         | 2 +-
 src/client/style.scss                       | 6 ++++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index ddf8ac446e..e7d96f7a6f 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
+	<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
 			<span class="title">
 				<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>
diff --git a/src/client/components/ui/modal-window.vue b/src/client/components/ui/modal-window.vue
index 2d2b587662..da98192b87 100644
--- a/src/client/components/ui/modal-window.vue
+++ b/src/client/components/ui/modal-window.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
+	<div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header">
 			<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
 			<span class="title">
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue
index 4fabab3d6d..773c3b9b13 100644
--- a/src/client/components/ui/window.vue
+++ b/src/client/components/ui/window.vue
@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
 	<div class="ebkgocck" :class="{ front }" v-if="showing">
-		<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
+		<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
 
diff --git a/src/client/style.scss b/src/client/style.scss
index 874928942f..1253141d36 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -318,6 +318,12 @@ hr {
 	}
 }
 
+._window {
+	background: var(--panel);
+	border-radius: var(--radius);
+	contain: content;
+}
+
 ._popup {
 	background: var(--popup);
 	border-radius: var(--radius);

From fa49427df0ca9fd3ec5878a64cb4e1a4e40bf0f5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Aug 2021 21:45:46 +0900
Subject: [PATCH 6/6] :art:

---
 src/client/pages/federation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/pages/federation.vue b/src/client/pages/federation.vue
index 4a861ac911..f4ab9d0ec3 100644
--- a/src/client/pages/federation.vue
+++ b/src/client/pages/federation.vue
@@ -228,6 +228,7 @@ export default defineComponent({
 		> .footer {
 			display: flex;
 			align-items: center;
+			font-size: 0.9em;
 
 			> .status {
 				&.suspended {
@@ -249,7 +250,6 @@ export default defineComponent({
 
 			> .right {
 				margin-left: auto;
-				font-size: 0.9em;
 
 				> .latestStatus {
 					border: solid 1px var(--divider);