From 73ce1f61a833393c4e709d44b374aa5a4715384a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 16 Aug 2021 15:21:58 +0900
Subject: [PATCH] Tweak client style

---
 src/client/components/note-detailed.vue |   4 +-
 src/client/components/notes.vue         |  19 ++-
 src/client/components/ui/popup.vue      |   2 +-
 src/client/pages/docs.vue               | 159 +++++++++++++-----------
 src/client/pages/favorites.vue          |  19 ++-
 src/client/pages/note.vue               |  17 ++-
 src/client/pages/notifications.vue      |   2 +-
 src/client/pages/timeline.vue           |   7 +-
 src/client/style.scss                   |   1 +
 src/client/ui/universal.vue             |   4 +
 10 files changed, 143 insertions(+), 91 deletions(-)

diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index 720f5aa2b..e7f116d1f 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	class="note _block"
+	class="lxwezrsl _block"
 	v-if="!muted"
 	v-show="!isDeleted"
 	:tabindex="!isDeleted ? '-1' : null"
@@ -899,7 +899,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.note {
+.lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 560441ba6..ba3b7d2b3 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -9,7 +9,7 @@
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
-	<div v-else class="giivymft">
+	<div v-else class="giivymft" :class="{ noGap }">
 		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
 			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
@@ -18,7 +18,7 @@
 		</div>
 
 		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
-			<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+			<XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 		</XList>
 
 		<div v-show="more && !reversed" style="margin-top: var(--margin);">
@@ -110,8 +110,19 @@ export default defineComponent({
 }
 
 .giivymft {
-	> .notes {
-		background: var(--panel);
+	&.noGap {
+		> .notes {
+			background: var(--panel);
+		}
+	}
+
+	&:not(.noGap) {
+		> .notes {
+			.qtqtichx {
+				background: var(--panel);
+				border-radius: var(--radius);
+			}
+		}
 	}
 }
 </style>
diff --git a/src/client/components/ui/popup.vue b/src/client/components/ui/popup.vue
index 9e360411c..8497eedec 100644
--- a/src/client/components/ui/popup.vue
+++ b/src/client/components/ui/popup.vue
@@ -1,5 +1,5 @@
 <template>
-<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
+<transition :name="$store.state.animation ? 'popup-menu' : ''" 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 :point="point"></slot>
 	</div>
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 6dc5eb1ae..be4d4255d 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -1,50 +1,54 @@
 <template>
 <div class="vtaihdtm">
-	<div class="search">
-		<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
-			<template #prefix><i class="fas fa-search"></i></template>
-		</MkInput>
+	<div class="body">
+		<div class="search">
+			<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+				<template #prefix><i class="fas fa-search"></i></template>
+			</MkInput>
+		</div>
+		<div class="list">
+			<MkFolder>
+				<template #header>{{ $ts._docs.generalTopics }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.features }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.advancedTopics }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.admin }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+		</div>
 	</div>
-	<MkFolder>
-		<template #header>{{ $ts._docs.generalTopics }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.features }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.advancedTopics }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.admin }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
 </div>
 </template>
 
@@ -97,41 +101,50 @@ export default defineComponent({
 .vtaihdtm {
 	background: var(--panel);
 
-	> .search {
-		padding: 16px;
-	}
+	> .body {
+		max-width: 900px;
+		margin: 0 auto;
 
-	.docs {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-		grid-gap: 12px;
-		margin: 0 16px 16px 16px;
-
-		> .doc {
-			display: inline-block;
+		> .search {
 			padding: 16px;
-			border: solid 1px var(--divider);
-			border-radius: 6px;
+		}
 
-			&:hover {
-				border: solid 1px var(--accent);
-				text-decoration: none;
-			}
+		> .list {
+			padding: 0 16px;
 
-			> .title {
-				font-weight: bold;
-			}
+			.docs {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+				grid-gap: 12px;
+				margin: 0 0 16px 0;
 
-			> .summary {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				font-size: 0.9em;
-			}
+				> .doc {
+					display: inline-block;
+					padding: 16px;
+					border: solid 1px var(--divider);
+					border-radius: 6px;
 
-			> .read {
-				color: var(--link);
-				font-size: 0.9em;
+					&:hover {
+						border: solid 1px var(--accent);
+						text-decoration: none;
+					}
+
+					> .title {
+						font-weight: bold;
+					}
+
+					> .summary {
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 0.9em;
+					}
+
+					> .read {
+						color: var(--link);
+						font-size: 0.9em;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 408ab222b..a2d61b98d 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -1,6 +1,8 @@
 <template>
-<div class="_section">
-	<XNotes class="_content" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+<div class="jmelgwjh">
+	<div class="body">
+		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+	</div>
 </div>
 </template>
 
@@ -42,3 +44,16 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.jmelgwjh {
+	background: var(--bg);
+
+	> .body {
+		box-sizing: border-box;
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 16px;
+	}
+}
+</style>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index ce4af4eb4..7725ca14b 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -8,9 +8,9 @@
 
 			<div class="main _gap">
 				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
-				<div class="_content _gap">
-					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
-					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+				<div class="note _gap">
+					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
+					<XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
 				</div>
 				<div class="_content clips _gap" v-if="clips && clips.length > 0">
 					<div class="title">{{ $ts.clip }}</div>
@@ -108,6 +108,7 @@ export default defineComponent({
 			os.api('notes/show', {
 				noteId: this.noteId
 			}).then(note => {
+				this.note = note;
 				Promise.all([
 					os.api('notes/clips', {
 						noteId: note.id,
@@ -126,7 +127,6 @@ export default defineComponent({
 					this.clips = clips;
 					this.hasPrev = prev.length !== 0;
 					this.hasNext = next.length !== 0;
-					this.note = note;
 				});
 			}).catch(e => {
 				this.error = e;
@@ -147,6 +147,8 @@ export default defineComponent({
 }
 
 .fcuexfpr {
+	background: var(--bg);
+
 	> .note {
 		> .main {
 			> .load {
@@ -163,6 +165,13 @@ export default defineComponent({
 				}
 			}
 
+			> .note {
+				> .note {
+					border-radius: var(--radius);
+					background: var(--panel);
+				}
+			}
+
 			> .clips {
 				> .title {
 					font-weight: bold;
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 38797d746..6b16b85b7 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="_root">
+<div class="">
 	<XNotifications class="_content" @before="before" @after="after" page/>
 </div>
 </template>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 4e149cc51..119815e2a 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="cmuxhskf _root" v-hotkey.global="keymap">
+<div class="cmuxhskf" v-hotkey.global="keymap">
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
 	<div class="tabs">
@@ -260,10 +260,9 @@ export default defineComponent({
 						left: 0;
 						right: 0;
 						margin: 0 auto;
-						width: calc(100% - 16px);
-						height: 4px;
+						width: 100%;
+						height: 2px;
 						background: var(--accent);
-						border-radius: 8px 8px 0 0;
 					}
 				}
 
diff --git a/src/client/style.scss b/src/client/style.scss
index a3e3b6a6a..a6c027745 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -330,6 +330,7 @@ hr {
 	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
+// TODO: 廃止
 ._root {
 	box-sizing: border-box;
 	margin: var(--root-margin, 32px) auto;
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index ce957d23c..d6cace0f4 100644
--- a/src/client/ui/universal.vue
+++ b/src/client/ui/universal.vue
@@ -257,6 +257,10 @@ export default defineComponent({
 		//backdrop-filter: var(--blur, blur(4px));
 	}
 
+	> .sidebar {
+		border-right: solid 0.5px var(--divider);
+	}
+
 	> .contents {
 		width: 100%;
 		min-width: 0;