diff --git a/src/lib/theme/components.css b/src/lib/theme/components.css index 929648b..d375d6d 100644 --- a/src/lib/theme/components.css +++ b/src/lib/theme/components.css @@ -1,7 +1,36 @@ /* Headerbar */ -.md3 ion-header.md { - box-shadow: unset; - -webkit-box-shadow: unset; +.md3 ion-toolbar { + --min-height: 64px; + --padding-start: 16px; + --padding-end: 16px; +} + +.md3 ion-toolbar *[slot=start] { + color: var(--md3-shade-10); +} + +.ion-palette-dark.md3 ion-toolbar *[slot=start] { + color: var(--md3-shade-90); +} + +.md3 ion-toolbar *[slot=end] { + color: var(--md3-shade-30); +} + +.ion-palette-dark.md3 ion-toolbar *[slot=end] { + color: var(--md3-shade-80); +} + +.md3 ion-header { + box-shadow: 0px 2px 4px -1px rgb(var(--md3-light-shadow) / 0.2), + 0px 4px 5px 0px rgb(var(--md3-light-shadow) / 0.14), + 0px 1px 10px 0px rgb(var(--md3-light-shadow) / 0.12); +} + +.ion-palette-dark.md3 ion-header { + box-shadow: 0px 2px 4px -1px rgb(var(--md3-dark-shadow) / 0.2), + 0px 4px 5px 0px rgb(var(--md3-dark-shadow) / 0.14), + 0px 1px 10px 0px rgb(var(--md3-dark-shadow) / 0.12); } /* FAB */