From 4ba4062519df5121fee8cdb3ddb262d2c99b0dce Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 16 Oct 2021 18:18:41 +0900
Subject: [PATCH] :art:

---
 src/client/components/tab.vue            | 13 +++++--
 src/client/pages/pages.vue               | 48 ++++++++++++------------
 src/client/pages/user/index.timeline.vue |  4 +-
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index 58538c2ca1..ce86af8f95 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -35,8 +35,8 @@ export default defineComponent({
 
 	> button {
 		flex: 1;
-		padding: 15px 12px 12px 12px;
-		border-bottom: solid 3px transparent;
+		padding: 10px 8px;
+		border-radius: 6px;
 
 		&:disabled {
 			opacity: 1 !important;
@@ -45,11 +45,16 @@ export default defineComponent({
 
 		&.active {
 			color: var(--accent);
-			border-bottom-color: var(--accent);
+			background: var(--accentedBg);
 		}
 
 		&:not(.active):hover {
 			color: var(--fgHighlighted);
+			background: var(--panelHighlight);
+		}
+
+		&:not(:first-child) {
+			margin-left: 8px;
 		}
 
 		> .icon {
@@ -61,7 +66,7 @@ export default defineComponent({
 		font-size: 80%;
 
 		> button {
-			padding: 11px 8px 8px 8px;
+			padding: 11px 8px;
 		}
 	}
 }
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index 988a759b91..8300e8a6e4 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -2,33 +2,35 @@
 <div>
 	<MkHeader :info="header"/>
 
-	<!-- TODO: MkHeaderに統合 -->
-	<MkTab v-model="tab" v-if="$i">
-		<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
-		<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
-		<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
-	</MkTab>
+	<MkSpacer>
+		<!-- TODO: MkHeaderに統合 -->
+		<MkTab v-model="tab" v-if="$i">
+			<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
+			<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
+			<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
+		</MkTab>
 
-	<div class="_section">
-		<div class="rknalgpo _content" v-if="tab === 'featured'">
-			<MkPagination :pagination="featuredPagesPagination" #default="{items}">
-				<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
-			</MkPagination>
-		</div>
+		<div class="_section">
+			<div class="rknalgpo _content" v-if="tab === 'featured'">
+				<MkPagination :pagination="featuredPagesPagination" #default="{items}">
+					<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
+				</MkPagination>
+			</div>
 
-		<div class="rknalgpo _content my" v-if="tab === 'my'">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-			<MkPagination :pagination="myPagesPagination" #default="{items}">
-				<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
-			</MkPagination>
-		</div>
+			<div class="rknalgpo _content my" v-if="tab === 'my'">
+				<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+				<MkPagination :pagination="myPagesPagination" #default="{items}">
+					<MkPagePreview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
+				</MkPagination>
+			</div>
 
-		<div class="rknalgpo _content" v-if="tab === 'liked'">
-			<MkPagination :pagination="likedPagesPagination" #default="{items}">
-				<MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
-			</MkPagination>
+			<div class="rknalgpo _content" v-if="tab === 'liked'">
+				<MkPagination :pagination="likedPagesPagination" #default="{items}">
+					<MkPagePreview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
+				</MkPagination>
+			</div>
 		</div>
-	</div>
+	</MkSpacer>
 </div>
 </template>
 
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index 8796ded469..c3444f26f6 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="yrzkoczt" v-sticky-container>
-	<MkTab v-model="with_" class="_gap tab">
+	<MkTab v-model="with_" class="tab">
 		<option :value="null">{{ $ts.notes }}</option>
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
@@ -60,6 +60,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .yrzkoczt {
 	> .tab {
+		margin: calc(var(--margin) / 2) 0;
+		padding: calc(var(--margin) / 2) 0;
 		background: var(--bg);
 	}
 }