🎨

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;
 		}
 	}
 }

src/client/pages/pages.vue

@@ -2,6 +2,7 @@
 <div>
 	<MkHeader :info="header"/>
 
+	<MkSpacer>
 		<!-- TODO: MkHeaderに統合 -->
 		<MkTab v-model="tab" v-if="$i">
 			<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
@@ -29,6 +30,7 @@
 				</MkPagination>
 			</div>
 		</div>
+	</MkSpacer>
 </div>
 </template>
 

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);
 	}
 }