tweak classic ui

4 files changed, 32 insertions, 7 deletions

diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index 46d79e6355..77a64aac37 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -2,6 +2,9 @@
 <div class="azykntjl">
 	<div class="body">
 		<div class="left">
+			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
+				<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+			</button>
 			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
 				<i class="ti ti-home ti-fw"></i>
 			</MkA>
@@ -40,6 +43,7 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
+import { openInstanceMenu } from './_common_/common';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
@@ -88,6 +92,8 @@ export default defineComponent({
 	},
 
 	methods: {
+		openInstanceMenu,
+
 		calcViewState() {
 			this.settingsWindowed = (window.innerWidth > 1400);
 		},
@@ -186,6 +192,25 @@ export default defineComponent({
 				border-right: solid 0.5px var(--divider);
 			}
 
+			> .instance {
+				display: inline-block;
+				position: relative;
+				width: 56px;
+				height: 100%;
+				vertical-align: bottom;
+
+				> img {
+					display: inline-block;
+					width: 24px;
+					position: absolute;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					margin: auto;
+				}
+			}
+
 			> .post {
 				display: inline-block;
 			
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index dac09ea703..ec379fbaa7 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -32,9 +32,9 @@
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
-		<MkA v-click-anime class="link" to="/about">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-		</MkA>
+		<button v-click-anime class="item _button" @click="openInstanceMenu">
+			<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+		</button>
 	</div>
 	<!--<MisskeyLogo class="misskey"/>-->
 </div>
@@ -42,6 +42,7 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
+import { openInstanceMenu } from './_common_/common';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
@@ -107,6 +108,8 @@ export default defineComponent({
 	},
 
 	methods: {
+		openInstanceMenu,
+
 		calcViewState() {
 			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
 			this.settingsWindowed = (window.innerWidth > 1400);
@@ -207,7 +210,7 @@ export default defineComponent({
 		padding: 8px 0 16px 0;
 		text-align: center;
 
-		> .link {
+		> .item {
 			display: block;
 			width: 32px;
 			margin: 0 auto;
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index 44b017ea96..dd955fb3b0 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -235,7 +235,6 @@ onMounted(() => {
 			min-width: 0;
 			width: 750px;
 			margin: 0 16px 0 0;
-			background: var(--panel);
 			border-left: solid 1px var(--divider);
 			border-right: solid 1px var(--divider);
 			border-radius: 0;
diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue
index 002aab1090..736cfacd80 100644
--- a/packages/frontend/src/ui/universal.widgets.vue
+++ b/packages/frontend/src/ui/universal.widgets.vue
@@ -89,8 +89,6 @@ function updateWidgets(thisWidgets) {
 	box-sizing: border-box;
 
 	&.universal {
-		padding: var(--margin) 0;
-
 		> * {
 			margin: var(--margin) 0;
 		}