Ver Fonte

fix(themes): swap header item border to inset box-shadow (#8784)

Alt-Dark, Dark, Origine, and Pafat use `border-bottom: 1px solid` on
`.header > .item`, making their wide-view header 57px tall (56px
content + 1px border). Other shipped themes have no such border and
render at 56px.

Replace `border-bottom` with `box-shadow: inset 0 -1px 0`. Visually
identical (same colour, same position at the bottom of each header
cell), but the shadow doesn't add to the box height. Wide-view
header outerHeight becomes 56px across themes, which lets the
shared `--height-header: 56px` token introduced in #8783 produce
pixel-perfect alignment between the wide header and the narrow
drawer X button. Without this PR, those four themes carry a 1px
residual offset under #8783's alignment fix.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn há 2 semanas atrás
pai
commit
4d2b5fb883

+ 1 - 1
p/themes/Alternative-Dark/adark.css

@@ -577,7 +577,7 @@ kbd {
 }
 }
 
 
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--border-color-dark);
+	box-shadow: inset 0 -1px 0 var(--border-color-dark);
 	vertical-align: middle;
 	vertical-align: middle;
 	text-align: center;
 	text-align: center;
 }
 }

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

@@ -577,7 +577,7 @@ kbd {
 }
 }
 
 
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--border-color-dark);
+	box-shadow: inset 0 -1px 0 var(--border-color-dark);
 	vertical-align: middle;
 	vertical-align: middle;
 	text-align: center;
 	text-align: center;
 }
 }

+ 1 - 1
p/themes/Dark/dark.css

@@ -405,7 +405,7 @@ button.as-link[disabled] {
 /*===============*/
 /*===============*/
 /*=== Header */
 /*=== Header */
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--dark-border-color3);
+	box-shadow: inset 0 -1px 0 var(--dark-border-color3);
 }
 }
 
 
 .header > .item.title .logo {
 .header > .item.title .logo {

+ 1 - 1
p/themes/Dark/dark.rtl.css

@@ -405,7 +405,7 @@ button.as-link[disabled] {
 /*===============*/
 /*===============*/
 /*=== Header */
 /*=== Header */
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--dark-border-color3);
+	box-shadow: inset 0 -1px 0 var(--dark-border-color3);
 }
 }
 
 
 .header > .item.title .logo {
 .header > .item.title .logo {

+ 1 - 1
p/themes/Origine/origine.css

@@ -690,7 +690,7 @@ button:hover .icon,
 }
 }
 
 
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--border-color);
+	box-shadow: inset 0 -1px 0 var(--border-color);
 	vertical-align: middle;
 	vertical-align: middle;
 	text-align: center;
 	text-align: center;
 }
 }

+ 1 - 1
p/themes/Origine/origine.rtl.css

@@ -690,7 +690,7 @@ button:hover .icon,
 }
 }
 
 
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--border-color);
+	box-shadow: inset 0 -1px 0 var(--border-color);
 	vertical-align: middle;
 	vertical-align: middle;
 	text-align: center;
 	text-align: center;
 }
 }

+ 1 - 1
p/themes/Pafat/pafat.css

@@ -583,7 +583,7 @@ th {
 }
 }
 
 
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--border-color-grey-dark);
+	box-shadow: inset 0 -1px 0 var(--border-color-grey-dark);
 	vertical-align: middle;
 	vertical-align: middle;
 	text-align: center;
 	text-align: center;
 }
 }

+ 1 - 1
p/themes/Pafat/pafat.rtl.css

@@ -583,7 +583,7 @@ th {
 }
 }
 
 
 .header > .item {
 .header > .item {
-	border-bottom: 1px solid var(--border-color-grey-dark);
+	box-shadow: inset 0 -1px 0 var(--border-color-grey-dark);
 	vertical-align: middle;
 	vertical-align: middle;
 	text-align: center;
 	text-align: center;
 }
 }