Tweak client style

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;

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 {
+	&.noGap {
 		> .notes {
 			background: var(--panel);
 		}
 	}
+
+	&:not(.noGap) {
+		> .notes {
+			.qtqtichx {
+				background: var(--panel);
+				border-radius: var(--radius);
+			}
+		}
+	}
+}
 </style>

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>

src/client/pages/docs.vue

@@ -1,10 +1,12 @@
 <template>
 <div class="vtaihdtm">
+	<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">
@@ -46,6 +48,8 @@
 				</div>
 			</MkFolder>
 		</div>
+	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -97,15 +101,22 @@ export default defineComponent({
 .vtaihdtm {
 	background: var(--panel);
 
+	> .body {
+		max-width: 900px;
+		margin: 0 auto;
+
 		> .search {
 			padding: 16px;
 		}
 
+		> .list {
+			padding: 0 16px;
+
 			.docs {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
 				grid-gap: 12px;
-		margin: 0 16px 16px 16px;
+				margin: 0 0 16px 0;
 
 				> .doc {
 					display: inline-block;
@@ -136,4 +147,6 @@ export default defineComponent({
 				}
 			}
 		}
+	}
+}
 </style>

src/client/pages/favorites.vue

@@ -1,6 +1,8 @@
 <template>
-<div class="_section">
+<div class="jmelgwjh">
-	<XNotes class="_content" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+	<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>

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">
+				<div class="note _gap">
-					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
+					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
-					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+					<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;

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>

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);
+						width: 100%;
-						height: 4px;
+						height: 2px;
 						background: var(--accent);
-						border-radius: 8px 8px 0 0;
 					}
 				}
 

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;

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;