Tweak client style

5 files changed, 119 insertions, 83 deletions

diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 6dc5eb1ae8..be4d4255db 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>
-	<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 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>
-	</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 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>
-	</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>
 </template>
 
@@ -97,41 +101,50 @@ export default defineComponent({
 .vtaihdtm {
 	background: var(--panel);
 
-	> .search {
-		padding: 16px;
-	}
-
-	.docs {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-		grid-gap: 12px;
-		margin: 0 16px 16px 16px;
+	> .body {
+		max-width: 900px;
+		margin: 0 auto;
 
-		> .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;
+
+					&: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;
+					> .read {
+						color: var(--link);
+						font-size: 0.9em;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 408ab222b5..a2d61b98d9 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 ce4af4eb4e..7725ca14b4 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 38797d746e..6b16b85b78 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 4e149cc518..119815e2ae 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;
 					}
 				}