feat: sticky toolbars in all module pages
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user