Let a header that paints its own surface show through while sticky
A section in the header set to #ffffff00 for the scrolled page still looked white: the sticky header element paints its own white surface and a shadow line underneath, so a transparent section showed that surface instead of the page, and the line could be neither recoloured nor removed. When a top-level header section defines a background of its own - normal, hover or scrolled - the header element now gets `has-own-surface` and paints nothing. A header without its own design keeps the white surface, so it does not turn see-through over the content. A text colour alone is not a surface, and a boxed column is not the whole header. The check is a Twig function rather than a controller variable because four paths render the header: page, archive, editor preview and area preview. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
fb7cfa37d1
commit
a4ee04533c
5 files changed
+85
-2
No files matched your search
@@ -409,6 +409,10 @@ body.consent-open{padding-bottom:320px}
|
||||
Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den
|
||||
ganzen Kopf auseinander - auf dem Telefon sah es aus, als fehle das Menue. */
|
||||
.site-header{position:relative}
|
||||
/* Gibt der Kopfbereich seine Flaeche selbst vor, malt der klebende Kopf keine zweite dahinter:
|
||||
sonst zeigte eine durchsichtige Sektion Weiss statt Seite, und die Schattenlinie liesse sich
|
||||
weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */
|
||||
.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}
|
||||
.site-header .menu-burger[open]>summary{border-radius:8px}
|
||||
.site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30;
|
||||
padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px;
|
||||
|
||||
Reference in new issue
Block a user