From eb2634ed4401756dbcf0662e1cfe027e4181abc4 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Mon, 12 Jun 2023 02:31:30 +0900
Subject: [PATCH] enhance navbar design

---
 packages/frontend/src/ui/_common_/navbar-for-mobile.vue | 6 +++---
 packages/frontend/src/ui/_common_/navbar.vue            | 6 +++---
 packages/frontend/src/ui/friendly/navbar-for-mobile.vue | 6 +++---
 packages/frontend/src/ui/friendly/navbar.vue            | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index d813822bdf..e63c2ffd61 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -97,15 +97,15 @@ function more() {
 
 	&.topBanner {
 		top: 0;
-		height: 100%;
+		height: 150%;
 		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 	}
 
 	&.bottomBanner {
 		bottom: 0;
-		height: 80%;
-		background-position-y: -10px;
+		height: 100%;
+		background-position-y: 20px;
 		-webkit-mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 		mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 	}
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 574615704d..498a238c2a 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -150,15 +150,15 @@ function more(ev: MouseEvent) {
 
 		&.topBanner {
 			top: 0;
-			height: 100%;
+			height: 150%;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 		}
 
 		&.bottomBanner {
 			bottom: 0;
-			height: 80%;
-			background-position-y: -10px;
+			height: 100%;
+			background-position-y: 20px;
 			-webkit-mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 			mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 		}
diff --git a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
index 0c557cafbb..fd4a737f6c 100644
--- a/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/friendly/navbar-for-mobile.vue
@@ -106,15 +106,15 @@ function openProfile() {
 
 	&.topBanner {
 		top: 0;
-		height: 100%;
+		height: 150%;
 		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 	}
 
 	&.bottomBanner {
 		bottom: 0;
-		height: 80%;
-		background-position-y: -10px;
+		height: 100%;
+		background-position-y: 20px;
 		-webkit-mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 		mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 	}
diff --git a/packages/frontend/src/ui/friendly/navbar.vue b/packages/frontend/src/ui/friendly/navbar.vue
index 3620d28fb3..914dc4ad01 100644
--- a/packages/frontend/src/ui/friendly/navbar.vue
+++ b/packages/frontend/src/ui/friendly/navbar.vue
@@ -161,15 +161,15 @@ function openProfile() {
 
 		&.topBanner {
 			top: 0;
-			height: 100%;
+			height: 150%;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
 		}
 
 		&.bottomBanner {
 			bottom: 0;
-			height: 80%;
-			background-position-y: -10px;
+			height: 100%;
+			background-position-y: 20px;
 			-webkit-mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 			mask-image: linear-gradient(0deg,rgba(0,0,0,.75) 15%,rgba(0,0,0,0) 80%);
 		}