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/style.scss

@@ -242,11 +242,21 @@ hr {
 	//border: var(--panelBorder);
 	box-shadow: var(--panelShadow);
 	overflow: hidden;
+	overflow: clip;
+}
+
+._block {
+	@extend ._panel;
+}
+
+._isolated {
+	margin: var(--margin) 0;
 }
 
 ._card {
 	@extend ._panel;
 
+	// TODO: _cardTitle に
 	> ._title {
 		margin: 0;
 		padding: 22px 32px;
@@ -262,6 +272,7 @@ hr {
 		}
 	}
 
+	// TODO: _cardContent に
 	> ._content {
 		padding: 32px;
 
@@ -274,12 +285,13 @@ hr {
 		}
 
 		& + ._content {
-			border-top: solid 1px var(--divider);
+			border-top: solid 0.5px var(--divider);
 		}
 	}
 
+	// TODO: _cardFooter に
 	> ._footer {
-		border-top: solid 1px var(--divider);
+		border-top: solid 0.5px var(--divider);
 		padding: 24px 32px;
 
 		@media (max-width: 500px) {
@@ -288,26 +300,6 @@ hr {
 	}
 }
 
-._noGap_ ._list_ {
-	@extend ._panel;
-
-	> * {
-		margin: 0 !important;
-		border: none;
-		border-bottom: solid 1px var(--divider);
-		border-radius: 0;
-		box-shadow: none;
-	}
-}
-
-._inContainer_ ._list_ > * {
-	margin: 0 !important;
-	border: none;
-	border-bottom: solid 1px var(--divider);
-	border-radius: 0;
-	box-shadow: none;
-}
-
 ._borderButton {
 	@extend ._button;
 	display: block;
@@ -315,7 +307,7 @@ hr {
 	padding: 10px;
 	box-sizing: border-box;
 	text-align: center;
-	border: solid 1px var(--divider);
+	border: solid 0.5px var(--divider);
 	border-radius: var(--radius);
 
 	&:active {
@@ -329,47 +321,36 @@ hr {
 	contain: content;
 }
 
-._section {
-	padding: var(--section-padding, 32px);
+._root {
+	box-sizing: border-box;
+	margin: var(--root-margin, 32px) auto;
+	max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
 
-	&:empty {
-		display: none;
-	}
-
-	&:not(:empty) + ._section {
-		border-top: solid 1px var(--divider);
+	._hr {
+		margin: var(--margin) calc(var(--root-margin, 32px) * -1);
 	}
 
 	@media (max-width: 500px) {
-		padding: var(--section-padding, 10px);
-
-		> ._title {
-			font-size: 1.1em;
-			font-weight: bold;
-		}
-	}
-
-	> ._title,
-	> ._content {
-		box-sizing: border-box;
-		max-width: var(--baseContentWidth);
-		margin: 0 auto;
-	}
-
-	> ._title {
-		margin-bottom: 24px;
-		font-weight: bold;
-	}
-
-	&._fitBottom {
-		padding-bottom: 0;
+		--root-margin: 10px;
 	}
 }
 
-._narrow_ ._section {
-	> ._title {
-		padding: 8px;
-		font-size: 1em;
+._flat_ {
+	--root-margin: 0;
+	--baseContentWidth: 100%;
+	--panelShadow: none;
+
+	._block {
+		//border-top: solid 0.5px var(--divider);
+		//border-bottom: solid 0.5px var(--divider);
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	@media (max-width: 500px) {
+		._root {
+			--root-margin: 0;
+		}
 	}
 }