feat: sticky toolbars in all module pages

This commit is contained in:
Ulas Kalayci
2026-04-29 16:34:02 +02:00
parent 6c069fc99c
commit 91f15bc62f
6 changed files with 45 additions and 4 deletions
+6 -1
View File
@@ -36,7 +36,12 @@
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-surface);
background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
position: sticky;
top: 0;
z-index: var(--z-sticky);
flex-shrink: 0;
border-top: 3px solid var(--module-accent);
}
+6 -1
View File
@@ -34,7 +34,12 @@
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-surface);
background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
position: sticky;
top: 0;
z-index: var(--z-sticky);
flex-shrink: 0;
border-top: 3px solid var(--module-accent);
}
+15
View File
@@ -1625,6 +1625,21 @@
margin-bottom: var(--space-4);
}
/* ── prefers-reduced-transparency Fallback ──
* Deaktiviert Blur und transparente Hintergründe für bessere Zugänglichkeit.
*/
@media (prefers-reduced-transparency: reduce) {
.tasks-toolbar,
.notes-toolbar,
.cal-toolbar,
.contacts-toolbar,
.list-header {
background-color: var(--color-surface);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* --------------------------------------------------------
* Toast-Benachrichtigungen
* -------------------------------------------------------- */
+6 -1
View File
@@ -34,7 +34,12 @@
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-surface);
background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
position: sticky;
top: 0;
z-index: var(--z-sticky);
flex-shrink: 0;
gap: var(--space-3);
border-top: 3px solid var(--module-accent);
+6
View File
@@ -115,6 +115,12 @@
padding: var(--space-3) var(--space-4) var(--space-2);
flex-shrink: 0;
border-top: 3px solid var(--module-accent);
background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.list-header__name {
+6 -1
View File
@@ -43,7 +43,12 @@
padding: var(--space-3) var(--space-4);
border-top: 3px solid var(--module-accent);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-surface);
background-color: color-mix(in srgb, var(--color-surface) 90%, transparent);
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-sm);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.tasks-toolbar__title {