94 lines
1.9 KiB
CSS
94 lines
1.9 KiB
CSS
.app-header {
|
|
--app-topbar-item-padding: 5px;
|
|
--app-topbar-list-gap: 8px;
|
|
--app-topbar-divider: 1px solid var(--app-border);
|
|
--app-topbar-margin-bottom: calc(var(--app-spacing) * 2);
|
|
--app-topbar-muted: var(--app-form-element-placeholder-color);
|
|
--app-topbar-bg: var(--app-background-color);
|
|
padding-block-start: 0;
|
|
padding-left: var(--app-spacing);
|
|
padding-right: var(--app-spacing);
|
|
margin-bottom: var(--app-topbar-margin-bottom);
|
|
color: var(--app-contrast);
|
|
border-bottom: var(--app-topbar-divider);
|
|
}
|
|
|
|
main:has(.app-details-container) .app-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.app-header nav {
|
|
gap: var(--app-spacing);
|
|
}
|
|
|
|
.app-header nav li {
|
|
padding: 0;
|
|
}
|
|
|
|
.app-header form:has(input#app-search) {
|
|
flex: 1;
|
|
}
|
|
|
|
.app-header li:has(#toggle-main-content-aside) {
|
|
display: none;
|
|
}
|
|
|
|
main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
|
|
display: block;
|
|
}
|
|
|
|
.app-header nav > ul {
|
|
display: flex;
|
|
gap: var(--app-topbar-list-gap);
|
|
align-items: center;
|
|
color: var(--app-muted-color);
|
|
}
|
|
|
|
.app-header details.dropdown > summary:not([role]) {
|
|
border: none;
|
|
height: auto;
|
|
padding: var(--app-topbar-item-padding);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.app-header details.dropdown > summary:not([role]):after {
|
|
display: none;
|
|
}
|
|
|
|
.app-header nav > ul li a {
|
|
padding: var(--app-topbar-item-padding);
|
|
color: var(--app-topbar-muted);
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
.app-header button {
|
|
padding: var(--app-topbar-item-padding);
|
|
color: var(--app-topbar-muted);
|
|
display: block;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
.app-header #global-back.is-disabled,
|
|
.app-header #global-forward.is-disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
header.app-header {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--app-topbar-bg);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.app-header details.dropdown[open] > summary::before {
|
|
display: none;
|
|
}
|