Improved: Header (#4927)

* all themes

* fix

p/themes/Alternative-Dark/adark.css

@@ -540,21 +540,19 @@ kbd {
 }
 
 .header > .item {
-	padding: 10px;
 	border-bottom: 1px solid var(--border-color-dark);
 	vertical-align: middle;
 	text-align: center;
 }
 
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title .logo {
-	margin: 0.5em 0;
 	filter: grayscale(100%) brightness(2.5);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(2.8);
+}
+
 .header > .item.search input {
 	width: 230px;
 }

p/themes/Alternative-Dark/adark.rtl.css

@@ -540,21 +540,19 @@ kbd {
 }
 
 .header > .item {
-	padding: 10px;
 	border-bottom: 1px solid var(--border-color-dark);
 	vertical-align: middle;
 	text-align: center;
 }
 
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title .logo {
-	margin: 0.5em 0;
 	filter: grayscale(100%) brightness(2.5);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(2.8);
+}
+
 .header > .item.search input {
 	width: 230px;
 }

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) */

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;
+			}
 		}
 	}
 

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);
 	}

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);
 	}

p/themes/Dark-pink/pinkdark.css

@@ -91,6 +91,10 @@ input:focus {
 	filter: sepia(62%) brightness(107%) hue-rotate(315deg) saturate(248%) contrast(104%) invert(100%);
 }
 
+.header > .item.title a:hover .logo {
+	filter: sepia(62%) brightness(70%) hue-rotate(315deg) saturate(248%) contrast(104%) invert(100%);
+}
+
 .icon[src*="/all"],
 .icon[src*="/down"],
 .icon[src*="/help"],

p/themes/Dark-pink/pinkdark.rtl.css

@@ -91,6 +91,10 @@ input:focus {
 	filter: sepia(62%) brightness(107%) hue-rotate(315deg) saturate(248%) contrast(104%) invert(100%);
 }
 
+.header > .item.title a:hover .logo {
+	filter: sepia(62%) brightness(70%) hue-rotate(315deg) saturate(248%) contrast(104%) invert(100%);
+}
+
 .icon[src*="/all"],
 .icon[src*="/down"],
 .icon[src*="/help"],

p/themes/Dark/dark.css

@@ -529,20 +529,19 @@ a.btn {
 /*===============*/
 /*=== Header */
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 	border-bottom: 1px solid #333;
 }
 
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title .logo {
 	filter: grayscale(60%) brightness(1.1);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(60%) brightness(1.5);
+}
+
 .header > .item.search input {
 	width: 230px;
 }

p/themes/Dark/dark.rtl.css

@@ -529,20 +529,19 @@ a.btn {
 /*===============*/
 /*=== Header */
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 	border-bottom: 1px solid #333;
 }
 
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title .logo {
 	filter: grayscale(60%) brightness(1.1);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(60%) brightness(1.5);
+}
+
 .header > .item.search input {
 	width: 230px;
 }

p/themes/Flat/flat.css

@@ -531,13 +531,12 @@ a.btn {
 }
 
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 }
 
-.header > .item.title {
-	width: 230px;
+.header > .item.title a:hover .logo {
+	filter: brightness(1.5);
 }
 
 .header > .item.title h1 {

p/themes/Flat/flat.rtl.css

@@ -531,13 +531,12 @@ a.btn {
 }
 
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 }
 
-.header > .item.title {
-	width: 230px;
+.header > .item.title a:hover .logo {
+	filter: brightness(1.5);
 }
 
 .header > .item.title h1 {

p/themes/Mapco/_layout.scss

@@ -6,29 +6,23 @@
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: variables.$sid-bg;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
-
-	.logo {
-		margin: 11px 0 5px;
-		filter: grayscale(100%) brightness(100);
-	}
 
 	.item {
 		vertical-align: middle;
 
 		&.title {
-			width: 280px;
+			a {
+				padding: 0.5rem 1rem;
 
-			font-weight: 400;
+				.logo {
+					filter: grayscale(100%) brightness(3);
+				}
 
-			a {
-				img {
-					margin-right: 0.5rem;
+				&:hover {
+					.logo {
+						filter: grayscale(100%) brightness(2.2);
+					}
 				}
 			}
 		}
@@ -82,10 +76,6 @@
 		}
 
 		&.configure {
-			width: 3rem;
-			position: absolute;
-			right: 1rem;
-			top: 1rem;
 			text-align: center;
 
 			.btn .icon,
@@ -107,7 +97,7 @@
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (calc(3rem + 2 * var(--frss-padding-top-bottom))));
 }
 
 /*=== Prompt (centered) */

p/themes/Mapco/_mobile.scss

@@ -35,7 +35,7 @@
 	}
 
 	.header {
-		padding: 0.5rem;
+		display: block;
 		height: 8rem;
 
 		.item {
@@ -61,6 +61,12 @@
 				}
 			}
 
+			&.configure {
+				position: absolute;
+				top: 0;
+				right: 0;
+			}
+
 		}
 	}
 

p/themes/Mapco/mapco.css

@@ -664,26 +664,19 @@ form th {
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: #303136;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
-}
-.header .logo {
-	margin: 11px 0 5px;
-	filter: grayscale(100%) brightness(100);
 }
 .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 .logo {
+	filter: grayscale(100%) brightness(3);
 }
-.header .item.title a img {
-	margin-right: 0.5rem;
+.header .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
 	width: 230px;
@@ -723,10 +716,6 @@ form th {
 	filter: brightness(3);
 }
 .header .item.configure {
-	width: 3rem;
-	position: absolute;
-	right: 1rem;
-	top: 1rem;
 	text-align: center;
 }
 .header .item.configure .btn .icon,
@@ -743,7 +732,7 @@ form th {
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
 }
 
 /*=== Prompt (centered) */
@@ -1219,7 +1208,7 @@ main.prompt {
 		filter: grayscale(100%) brightness(2.5);
 	}
 	.header {
-		padding: 0.5rem;
+		display: block;
 		height: 8rem;
 	}
 	.header .item.search {
@@ -1238,6 +1227,11 @@ main.prompt {
 	.header .item.search input:focus {
 		width: 100%;
 	}
+	.header .item.configure {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
 	#global {
 		height: calc(100% - 8rem);
 	}

p/themes/Mapco/mapco.rtl.css

@@ -664,26 +664,19 @@ form th {
 /*===============*/
 /*=== Header */
 .header {
-	padding: 0.5rem 1.35rem;
 	background: #303136;
-	display: block;
-	width: auto;
-	height: 3.5rem;
-	table-layout: none;
-}
-.header .logo {
-	margin: 11px 0 5px;
-	filter: grayscale(100%) brightness(100);
 }
 .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 .logo {
+	filter: grayscale(100%) brightness(3);
 }
-.header .item.title a img {
-	margin-left: 0.5rem;
+.header .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
 	width: 230px;
@@ -723,10 +716,6 @@ form th {
 	filter: brightness(3);
 }
 .header .item.configure {
-	width: 3rem;
-	position: absolute;
-	left: 1rem;
-	top: 1rem;
 	text-align: center;
 }
 .header .item.configure .btn .icon,
@@ -743,7 +732,7 @@ form th {
 
 /*=== Body */
 #global {
-	height: calc(100% - 3.5rem);
+	height: calc(100vh - (3rem + 2 * var(--frss-padding-top-bottom)));
 }
 
 /*=== Prompt (centered) */
@@ -1219,7 +1208,7 @@ main.prompt {
 		filter: grayscale(100%) brightness(2.5);
 	}
 	.header {
-		padding: 0.5rem;
+		display: block;
 		height: 8rem;
 	}
 	.header .item.search {
@@ -1238,6 +1227,11 @@ main.prompt {
 	.header .item.search input:focus {
 		width: 100%;
 	}
+	.header .item.configure {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
 	#global {
 		height: calc(100% - 8rem);
 	}

p/themes/Nord/nord.css

@@ -188,6 +188,25 @@ a.btn {
 	opacity: .8;
 	cursor: pointer;
 }
+
+.stick input {
+	margin: 0 5px 0 0;
+}
+
+.stick .btn {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.stick {
+	margin: 0 5px;
+}
+
+.header .stick,
+.header .btn {
+	margin: 0
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
@@ -425,16 +444,10 @@ img.favicon {
 /*===============*/
 /*=== Header */
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 }
 
-
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title h1 {
 	margin: 0.5em 0;
 }
@@ -455,6 +468,10 @@ img.favicon {
 	filter: grayscale(100%) brightness(2.5);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(85%) brightness(2.5);
+}
+
 /*=== Body */
 .aside {
 	background-color: var(--accent-bg);

p/themes/Nord/nord.rtl.css

@@ -188,6 +188,25 @@ a.btn {
 	opacity: .8;
 	cursor: pointer;
 }
+
+.stick input {
+	margin: 0 0 0 5px;
+}
+
+.stick .btn {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.stick {
+	margin: 0 5px;
+}
+
+.header .stick,
+.header .btn {
+	margin: 0
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
@@ -425,16 +444,10 @@ img.favicon {
 /*===============*/
 /*=== Header */
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 }
 
-
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title h1 {
 	margin: 0.5em 0;
 }
@@ -455,6 +468,10 @@ img.favicon {
 	filter: grayscale(100%) brightness(2.5);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(85%) brightness(2.5);
+}
+
 /*=== Body */
 .aside {
 	background-color: var(--accent-bg);

p/themes/Origine-compact/origine-compact.css

@@ -57,6 +57,10 @@ a.btn,
 	height: calc(2.1rem + 2 * var(--frss-padding-top-bottom));
 }
 
+.header > .item.title a {
+	padding: 0 1rem;
+}
+
 .header > .item.title .logo {
 	/* logo is smaller than needed */
 	height: 1.5rem;

p/themes/Origine-compact/origine-compact.rtl.css

@@ -57,6 +57,10 @@ a.btn,
 	height: calc(2.1rem + 2 * var(--frss-padding-top-bottom));
 }
 
+.header > .item.title a {
+	padding: 0 1rem;
+}
+
 .header > .item.title .logo {
 	/* logo is smaller than needed */
 	height: 1.5rem;

p/themes/Origine/origine.css

@@ -651,6 +651,10 @@ a:hover .icon {
 	width: 300px;
 }
 
+.header > .item.title a:hover .logo {
+	filter: brightness(1.4);
+}
+
 .header > .item.search input {
 	width: 230px;
 }
@@ -660,10 +664,6 @@ a:hover .icon {
 }
 
 /*=== Body */
-#global {
-	height: calc(100vh - 4rem);
-}
-
 .aside {
 	background-color: var(--background-color-light);
 	border-right: 1px solid var(--border-color);

p/themes/Origine/origine.rtl.css

@@ -651,6 +651,10 @@ a:hover .icon {
 	width: 300px;
 }
 
+.header > .item.title a:hover .logo {
+	filter: brightness(1.4);
+}
+
 .header > .item.search input {
 	width: 230px;
 }
@@ -660,10 +664,6 @@ a:hover .icon {
 }
 
 /*=== Body */
-#global {
-	height: calc(100vh - 4rem);
-}
-
 .aside {
 	background-color: var(--background-color-light);
 	border-left: 1px solid var(--border-color);

p/themes/Pafat/pafat.css

@@ -592,6 +592,10 @@ a.btn {
 	filter: grayscale(100%) brightness(2.5);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(4);
+}
+
 a.signin {
 	text-decoration: none;
 	color: var(--font-color-grey-light);

p/themes/Pafat/pafat.rtl.css

@@ -592,6 +592,10 @@ a.btn {
 	filter: grayscale(100%) brightness(2.5);
 }
 
+.header > .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(4);
+}
+
 a.signin {
 	text-decoration: none;
 	color: var(--font-color-grey-light);

p/themes/Swage/swage.css

@@ -570,6 +570,12 @@ form th {
 	position: absolute;
 	text-align: center;
 }
+.header > .item.title a {
+	padding: 0 1rem;
+}
+.header > .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(100) opacity(90%);
+}
 .header > .item.title .logo {
 	display: inline-block;
 	height: 26px;

p/themes/Swage/swage.rtl.css

@@ -570,6 +570,12 @@ form th {
 	position: absolute;
 	text-align: center;
 }
+.header > .item.title a {
+	padding: 0 1rem;
+}
+.header > .item.title a:hover .logo {
+	filter: grayscale(100%) brightness(100) opacity(90%);
+}
 .header > .item.title .logo {
 	display: inline-block;
 	height: 26px;

p/themes/Swage/swage.scss

@@ -729,6 +729,16 @@ form {
 			position: absolute;
 			text-align: center;
 
+			a {
+				padding: 0 1rem;
+
+				&:hover {
+					.logo {
+						filter: grayscale(100%) brightness(100) opacity(90%);
+					}
+				}
+			}
+
 			.logo {
 				display: inline-block;
 				height: 26px;

p/themes/base-theme/base.css

@@ -394,15 +394,10 @@ a.btn {
 }
 
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 }
 
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title h1 {
 	margin: 0.5em 0;
 }

p/themes/base-theme/base.rtl.css

@@ -394,15 +394,10 @@ a.btn {
 }
 
 .header > .item {
-	padding: 10px;
 	vertical-align: middle;
 	text-align: center;
 }
 
-.header > .item.title {
-	width: 230px;
-}
-
 .header > .item.title h1 {
 	margin: 0.5em 0;
 }

p/themes/base-theme/frss.css

@@ -1006,7 +1006,7 @@ li.drag-hover {
 .header {
 	display: table;
 	width: 100%;
-	height: calc(2rem + 2 * var(--frss-padding-top-bottom));
+	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
 	table-layout: fixed;
 }
 
@@ -1017,7 +1017,8 @@ li.drag-hover {
 }
 
 .header > .item.title {
-	width: 250px;
+	width: 300px;
+	text-align: center;
 	white-space: nowrap;
 }
 
@@ -1025,12 +1026,22 @@ li.drag-hover {
 	display: inline-block;
 }
 
+.header > .item.title a {
+	padding: 0.25rem 1rem;
+	display: inline-block;
+}
+
 .header > .item.title .logo {
 	display: inline-block;
 	height: 2rem;
 	vertical-align: middle;
 }
 
+.header > .item.title a:hover .logo {
+	filter: brightness(1.4);
+	transition: filter 0.1s linear;
+}
+
 .header > .item.configure {
 	width: 100px;
 }
@@ -1044,7 +1055,7 @@ input[type="search"] {
 	background: inherit;
 	display: table;
 	width: 100%;
-	height: calc(100vh - (calc(2rem + 2 * var(--frss-padding-top-bottom))));
+	height: calc(100vh - (calc(2.5rem + 2 * var(--frss-padding-top-bottom) + 1px)));
 	table-layout: fixed;
 }
 
@@ -1966,6 +1977,11 @@ input:checked + .slide-container .properties {
 		padding: 5px;
 	}
 
+	.header > .item.title {
+		width: 75%;
+		text-align: left;
+	}
+
 	.header > .item.title .logo {
 		height: 24px;
 	}

p/themes/base-theme/frss.rtl.css

@@ -1006,7 +1006,7 @@ li.drag-hover {
 .header {
 	display: table;
 	width: 100%;
-	height: calc(2rem + 2 * var(--frss-padding-top-bottom));
+	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
 	table-layout: fixed;
 }
 
@@ -1017,7 +1017,8 @@ li.drag-hover {
 }
 
 .header > .item.title {
-	width: 250px;
+	width: 300px;
+	text-align: center;
 	white-space: nowrap;
 }
 
@@ -1025,12 +1026,22 @@ li.drag-hover {
 	display: inline-block;
 }
 
+.header > .item.title a {
+	padding: 0.25rem 1rem;
+	display: inline-block;
+}
+
 .header > .item.title .logo {
 	display: inline-block;
 	height: 2rem;
 	vertical-align: middle;
 }
 
+.header > .item.title a:hover .logo {
+	filter: brightness(1.4);
+	transition: filter 0.1s linear;
+}
+
 .header > .item.configure {
 	width: 100px;
 }
@@ -1044,7 +1055,7 @@ input[type="search"] {
 	background: inherit;
 	display: table;
 	width: 100%;
-	height: calc(100vh - (calc(2rem + 2 * var(--frss-padding-top-bottom))));
+	height: calc(100vh - (calc(2.5rem + 2 * var(--frss-padding-top-bottom) + 1px)));
 	table-layout: fixed;
 }
 
@@ -1966,6 +1977,11 @@ input:checked + .slide-container .properties {
 		padding: 5px;
 	}
 
+	.header > .item.title {
+		width: 75%;
+		text-align: right;
+	}
+
 	.header > .item.title .logo {
 		height: 24px;
 	}