Merge pull request #2835 from WPO-Foundation/wpt-header-fixes

fix text contrast and top stack for mobile nav menu
catchpoint · Apr 20, 2023 · 25b8b9c · 25b8b9c
2 parents 6ac6b83 + fb8cf90
commit 25b8b9c
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/www/assets/css/wpt-header.css b/www/assets/css/wpt-header.css
@@ -29,14 +29,13 @@ body.compare-loading wpt-header {
   --wpt-header-activeborder: #091a3f33;
   --wpt-header-border: #fff;
   --wpt-header-background: #fff;
-  --wpt-user-icon: url(/assets/images/icon-user-dark.svg) left 50% no-repeat;
 }
 
 wpt-header {
   width: 100%;
   grid-column: 1 / 13;
   position: relative;
-  z-index: 999;
+  z-index: 9999999;
   background: none;
   border: none;
 }
@@ -246,13 +245,11 @@ wpt-header .wptheader_acct {
   margin: 1rem;
   padding: 2rem 1rem 2rem 2rem;
   background: var(--wpt-user-icon);
-  color: var(--wpt-header-text);
 }
 
 wpt-header .wptheader_acct a,
 wpt-header .wptheader_acct button[type="submit"] {
   background: none;
-  color: var(--wpt-header-text);
   font-size: 1em;
   border: 0;
   cursor: pointer;
@@ -379,6 +376,9 @@ wpt-header .wptheader_nav_menu details[open] summary span:after {
 }
 
 @media (min-width: 86em) {
+  wpt-header {
+    z-index: 999;
+  }
   cp-header a {
     padding-left: 1.5rem;
   }
@@ -531,6 +531,21 @@ wpt-header .wptheader_nav_menu details[open] summary span:after {
   wpt-header .wptheader_nav li details[open] {
     background: transparent;
   }
+  wpt-header .wptheader_acct a,
+  wpt-header .wptheader_acct button[type="submit"] {
+    color: var(--wpt-header-text);
+  }
+  .account-layout wpt-header,
+  body.history wpt-header,
+  body.about wpt-header,
+  body.four-oh-four wpt-header,
+  body.common wpt-header,
+  body.video wpt-header,
+  body.compare:not(.compare-experiment) wpt-header,
+  body#custom-waterfall wpt-header,
+  body.compare-loading wpt-header {
+    --wpt-user-icon: url(/assets/images/icon-user-dark.svg) left 50% no-repeat;
+  }
 }
 
 @media (min-width: 90em) {