fix: close #477

TeamBlackCrystal · Aug 2, 2022 · 815e04f · yupix · Aug 2, 2022 · 815e04f
1 parent faf3e97
commit 815e04f
Showing 1 changed file with 61 additions and 43 deletions.
diff --git a/src/client/app/auth/views/index.vue b/src/client/app/auth/views/index.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="index">
+	<div class="index-body">
 	<main v-if="$store.getters.isSignedIn">
 		<p class="fetching" v-if="fetching">{{ $t('loading') }}<mk-ellipsis/></p>
 		<x-form
@@ -27,6 +28,8 @@
 		<h1>{{ $t('sign-in') }}</h1>
 		<mk-signin/>
 	</main>
+	</div>
+
 	<footer><img src="/assets/auth/icon.svg" alt="Misskey"/></footer>
 </div>
 </template>
@@ -89,65 +92,80 @@ export default Vue.extend({
 });
 </script>
 
+<style lang="css">
+body {
+	padding: 0px !important;
+}
+
+</style>
+
 <style lang="stylus" scoped>
 .index
-
-	> main
-		width 100%
-		max-width 500px
-		margin 0 auto
-		text-align center
-		background #fff
-		box-shadow 0 4px 16px rgba(#000, 0.2)
-
-		> .fetching
-			margin 0
-			padding 32px
-			color #555
-
-		> div:not(.form)
-			padding 64px
-
-			> h1
-				margin 0 0 8px 0
-				padding 0
-				font-size 20px
-				font-weight normal
-
-			> p
+	background var(--bg)
+	color var(--text)
+
+	> .index-body
+		display flex
+		justify-content center
+		align-items center
+		height 100vh
+
+		> main
+			width 100%
+			max-width 500px
+			margin 0 auto
+			text-align center
+			background var(--face)
+			box-shadow 0 4px 16px rgba(#000, 0.2)
+
+			> .fetching
 				margin 0
+				padding 32px
 				color #555
 
-			&.denied > h1
-				color #e65050
+			> div:not(.form)
+				padding 64px
 
-			&.accepted > h1
-				color #54af7c
+				> h1
+					margin 0 0 8px 0
+					padding 0
+					font-size 20px
+					font-weight normal
 
-		&.signin
-			padding 32px 32px 16px 32px
+				> p
+					margin 0
+					color #555
 
-			> h1
-				margin 0 0 22px 0
-				padding 0
-				font-size 20px
-				font-weight normal
-				color #555
+				&.denied > h1
+					color #e65050
+
+				&.accepted > h1
+					color #54af7c
 
-		@media (max-width 600px)
-			max-width none
-			box-shadow none
+			&.signin
+				padding 32px 32px 16px 32px
 
-		@media (max-width 500px)
-			> div
 				> h1
-					font-size 16px
+					margin 0 0 22px 0
+					padding 0
+					font-size 20px
+					font-weight normal
+					color var(--text)
+
+			@media (max-width 600px)
+				max-width none
+				box-shadow none
+
+			@media (max-width 500px)
+				> div
+					> h1
+						font-size 16px
 
 	> footer
 		> img
 			display block
 			width 32px
 			height 32px
-			margin 16px auto
+			margin auto auto
 
 </style>