モバイルの下のやつ改修

src/client/components/sidebar.vue

@@ -357,12 +357,6 @@ export default defineComponent({
 			top: 0;
 			left: 0;
 			z-index: 1001;
-
-			> div {
-				> .notifications {
-					display: none;
-				}
-			}
 		}
 
 		&:not(.hidden) {

src/client/themes/_dark.json5

@@ -62,7 +62,6 @@
 		error: '#ec4137',
 		warn: '#ecb637',
 		htmlThemeColor: '@bg',
-		X1: ':alpha<0<@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(255, 255, 255, 0.05)',
 		X4: 'rgba(255, 255, 255, 0.1)',

src/client/themes/_light.json5

@@ -62,7 +62,6 @@
 		error: '#ec4137',
 		warn: '#ecb637',
 		htmlThemeColor: '@bg',
-		X1: ':alpha<0<@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(0, 0, 0, 0.05)',
 		X4: 'rgba(0, 0, 0, 0.1)',

src/client/ui/default.vue

@@ -29,6 +29,7 @@
 
 	<div class="buttons" :class="{ navHidden }">
 		<button class="button nav _button" @click="showNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><Fa :icon="faHome"/></button>
 		<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
 		<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
 		<button class="button post _button" @click="post"><Fa :icon="faPencilAlt"/></button>
@@ -339,15 +340,13 @@ export default defineComponent({
 		position: fixed;
 		z-index: 1000;
 		bottom: 0;
-		padding: 0 32px 32px 32px;
+		padding: 16px;
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		background: linear-gradient(0deg, var(--bg), var(--X1));
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
+		-webkit-backdrop-filter: blur(32px);
+		backdrop-filter: blur(32px);
+		background-color: var(--header);
 
 		&:not(.navHidden) {
 			display: none;
@@ -355,15 +354,26 @@ export default defineComponent({
 
 		> .button {
 			position: relative;
+			flex: 1;
 			padding: 0;
 			margin: auto;
-			width: 64px;
 			height: 64px;
-			border-radius: 100%;
-			box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+			border-radius: 8px;
 			background: var(--panel);
 			color: var(--fg);
 
+			&:not(:last-child) {
+				margin-right: 12px;
+			}
+
+			@media (max-width: 400px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
 			&:hover {
 				background: var(--X2);
 			}