Improved: Header (#4927)

* all themes

* fix

4 files changed, 43 insertions, 48 deletions

diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index ab7ec6e3e..76280d7a7 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -6,25 +6,24 @@
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: variables.$sid-bg;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
 
 	.item {
 		vertical-align: middle;
 
 		&.title {
-			width: 280px;
-			font-weight: 400;
-
 			a {
-				img {
-					margin: 0.6em 0 0.3em;
+				padding: 0.5rem 1rem;
+
+				.logo {
 					filter: invert(80%);
 				}
+
+				&:hover {
+					.logo {
+						filter: invert(80%) opacity(80%);
+					}
+				}
 			}
 		}
 
@@ -81,10 +80,6 @@
 		}
 
 		&.configure {
-			width: 3rem;
-			position: absolute;
-			right: 1rem;
-			top: 1rem;
 			text-align: center;
 
 			.btn {
@@ -97,7 +92,7 @@
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (calc(3rem + 2 * var(--frss-padding-top-bottom))));
 }
 
 /*=== Prompt (centered) */
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index af9a82190..bb13a0e83 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -35,7 +35,7 @@
 	}
 
 	.header {
-		padding: 0.5rem;
+		display: block;
 		height: 8rem;
 
 		.item {
@@ -65,6 +65,12 @@
 					padding: 0.5rem 2rem;
 				}
 			}
+
+			&.configure {
+				position: absolute;
+				top: 0;
+				right: 0;
+			}
 		}
 	}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 4d761c272..baf47f47f 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -650,24 +650,20 @@ form th {
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: #fbf9f6;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
 }
 .header .item {
 	vertical-align: middle;
 }
-.header .item.title {
-	width: 280px;
-	font-weight: 400;
+.header .item.title a {
+	padding: 0.5rem 1rem;
 }
-.header .item.title a img {
-	margin: 0.6em 0 0.3em;
+.header .item.title a .logo {
 	filter: invert(80%);
 }
+.header .item.title a:hover .logo {
+	filter: invert(80%) opacity(80%);
+}
 .header .item.search input {
 	width: 230px;
 	color: #363330;
@@ -709,10 +705,6 @@ form th {
 	filter: brightness(3);
 }
 .header .item.configure {
-	width: 3rem;
-	position: absolute;
-	right: 1rem;
-	top: 1rem;
 	text-align: center;
 }
 .header .item.configure .btn {
@@ -722,7 +714,7 @@ form th {
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
 }
 
 /*=== Prompt (centered) */
@@ -1199,7 +1191,7 @@ main.prompt {
 		filter: grayscale(100%) brightness(2.5);
 	}
 	.header {
-		padding: 0.5rem;
+		display: block;
 		height: 8rem;
 	}
 	.header .item.search {
@@ -1222,6 +1214,11 @@ main.prompt {
 		min-height: 49px;
 		padding: 0.5rem 2rem;
 	}
+	.header .item.configure {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
 	#global {
 		height: calc(100% - 8rem);
 	}
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 936f2cf6d..ac38ced4a 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -650,24 +650,20 @@ form th {
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: #fbf9f6;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
 }
 .header .item {
 	vertical-align: middle;
 }
-.header .item.title {
-	width: 280px;
-	font-weight: 400;
+.header .item.title a {
+	padding: 0.5rem 1rem;
 }
-.header .item.title a img {
-	margin: 0.6em 0 0.3em;
+.header .item.title a .logo {
 	filter: invert(80%);
 }
+.header .item.title a:hover .logo {
+	filter: invert(80%) opacity(80%);
+}
 .header .item.search input {
 	width: 230px;
 	color: #363330;
@@ -709,10 +705,6 @@ form th {
 	filter: brightness(3);
 }
 .header .item.configure {
-	width: 3rem;
-	position: absolute;
-	left: 1rem;
-	top: 1rem;
 	text-align: center;
 }
 .header .item.configure .btn {
@@ -722,7 +714,7 @@ form th {
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
 }
 
 /*=== Prompt (centered) */
@@ -1199,7 +1191,7 @@ main.prompt {
 		filter: grayscale(100%) brightness(2.5);
 	}
 	.header {
-		padding: 0.5rem;
+		display: block;
 		height: 8rem;
 	}
 	.header .item.search {
@@ -1222,6 +1214,11 @@ main.prompt {
 		min-height: 49px;
 		padding: 0.5rem 2rem;
 	}
+	.header .item.configure {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
 	#global {
 		height: calc(100% - 8rem);
 	}