Default UI redesign (#7429)

* wip

* wip

* wip

* wip

* Update default.sidebar.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update sticky-sidebar.ts

* wip

* wip

* Update messaging-room.form.vue

* Update timeline.vue

src/client/ui/chat/index.vue

@@ -136,7 +136,7 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, faAt, faLink, faEllipsisH, faGlobe } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faStar as farStar, faEnvelope, faComments, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 import { instanceName, url } from '@client/config';
-import XSidebar from '@client/components/sidebar.vue';
+import XSidebar from '@client/ui/_common_/sidebar.vue';
 import XWidgets from './widgets.vue';
 import XCommon from '../_common_/common.vue';
 import XSide from './side.vue';
@@ -354,7 +354,7 @@ export default defineComponent({
 		flex-direction: column;
 		width: 250px;
 		height: 100vh;
-		border-right: solid 1px var(--divider);
+		border-right: solid 0.5px var(--divider);
 
 		> .header, > .footer {
 			$padding: 8px;
@@ -367,11 +367,11 @@ export default defineComponent({
 			user-select: none;
 
 			&.header {
-				border-bottom: solid 1px var(--divider);
+				border-bottom: solid 0.5px var(--divider);
 			}
 
 			&.footer {
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 			}
 
 			> .left, > .right {
@@ -526,7 +526,7 @@ export default defineComponent({
 			padding: $padding;
 			box-sizing: border-box;
 			background-color: var(--panel);
-			border-bottom: solid 1px var(--divider);
+			border-bottom: solid 0.5px var(--divider);
 			user-select: none;
 
 			> .left {
@@ -599,7 +599,7 @@ export default defineComponent({
 
 	> .side {
 		width: 350px;
-		border-left: solid 1px var(--divider);
+		border-left: solid 0.5px var(--divider);
 
 		&.widgets.sideViewOpening {
 			@media (max-width: 1400px) {

src/client/ui/chat/note-header.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 		margin: 0 .5em 0 0;
 		padding: 1px 6px;
 		font-size: 80%;
-		border: solid 1px var(--divider);
+		border: solid 0.5px var(--divider);
 		border-radius: 3px;
 	}
 

src/client/ui/chat/note.sub.vue

@@ -130,7 +130,7 @@ export default defineComponent({
 	}
 
 	> .reply {
-		border-left: solid 1px var(--divider);
+		border-left: solid 0.5px var(--divider);
 		margin-top: 10px;
 	}
 }

src/client/ui/chat/note.vue

@@ -1127,7 +1127,7 @@ export default defineComponent({
 	}
 
 	> .reply {
-		border-top: solid 1px var(--divider);
+		border-top: solid 0.5px var(--divider);
 	}
 }
 

src/client/ui/chat/post-form.vue

@@ -615,7 +615,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .pxiwixjf {
 	position: relative;
-	border: solid 1px var(--divider);
+	border: solid 0.5px var(--divider);
 	border-radius: 8px;
 
 	> .form {
@@ -696,7 +696,7 @@ export default defineComponent({
 		> .cw {
 			z-index: 1;
 			padding-bottom: 8px;
-			border-bottom: solid 1px var(--divider);
+			border-bottom: solid 0.5px var(--divider);
 		}
 
 		> .text {

src/client/ui/chat/side.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 .mrajymqm {
 	$header-height: 54px; // TODO: どこかに集約したい
 
-	--section-padding: 16px;
+	--root-margin: 16px;
 	--margin: var(--marginHalf);
 
 	height: 100%;
@@ -137,7 +137,7 @@ export default defineComponent({
 		-webkit-backdrop-filter: blur(32px);
 		backdrop-filter: blur(32px);
 		background-color: var(--header);
-		border-bottom: solid 1px var(--divider);
+		border-bottom: solid 0.5px var(--divider);
 		box-sizing: border-box;
 
 		> ._button {