set header background to page color with blur

This commit is contained in:
sefaria
2026-07-28 16:28:05 +02:00
parent 9267fece60
commit 987022deb3
+10 -17
View File
@@ -481,26 +481,19 @@ button:active, .button-primary:active, .logo:active {
/* Site header */ /* Site header */
.site-header { .site-header {
display: flex;
align-items: center;
justify-content: center;
position: sticky; position: sticky;
top: 0; top: 0;
padding-top: max(1px, env(safe-area-inset-top));
z-index: 100; z-index: 100;
background-image: linear-gradient( display: flex;
180deg, justify-content: center;
light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%, margin-bottom: var(--spacing-3);
6%, padding-top: max(1px, env(safe-area-inset-top));
light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%, background:
44%, color-mix(in srgb, var(--color-background) 60%, transparent);
light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%, -webkit-backdrop-filter: blur(6px) saturate(140%);
76%, backdrop-filter: blur(6px) saturate(140%);
light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
); border-bottom: 1px solid color-mix(in srgb, var(--color-background) 10%, transparent);
/* background: rgb(255 255 255 / 0.88); */
/* backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); */
} }
.menu-bar { .menu-bar {