Bergasha
e58c229664
* feat(header): add opt-in auto-hide-on-scroll for the header New per-user header preference (default off): when enabled, the header slides away while scrolling down and reappears on scroll-up or near the top of the page. Disabled while in board edit mode, and skipped entirely while focus is inside the header. Only applies when the header is set to visible - the existing hover-to-reveal floating controls already cover the hidden-header case. * chore(api): regenerate the checked-in OpenAPI schema check:openapi was failing in CI - the schema on disk hadn't been regenerated after the header preferences gained autoHideOnScroll. Add scripts/generate-openapi-schema.mts (and a generate:openapi package script) alongside the existing check script so this is a one-command fix next time the schema drifts. * docs(users): document the header studio's visibility and auto-hide options Header customization (drag-to-arrange controls, hide/show, hover-reveal and pin, auto-hide-on-scroll) had no documentation on the user general settings page.
189 lines
3.3 KiB
CSS
189 lines
3.3 KiB
CSS
.header {
|
|
overflow: hidden;
|
|
transition: transform 220ms ease;
|
|
}
|
|
|
|
.header[data-visible="false"] {
|
|
display: none;
|
|
}
|
|
|
|
.header[data-auto-hidden="true"]:not(:focus-within) {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.desktopContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
align-items: center;
|
|
gap: var(--mantine-spacing-sm);
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-inline: var(--mantine-spacing-md);
|
|
}
|
|
|
|
.zone {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--mantine-spacing-sm);
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding-inline-end: rem(10px);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.zone::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.zone[data-zone="left"] {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.zone[data-zone="center"] {
|
|
justify-content: center;
|
|
}
|
|
|
|
.zone[data-zone="right"] {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.search {
|
|
display: flex;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.search[data-display="icon"] {
|
|
width: 2.25rem;
|
|
flex: 0 0 2.25rem;
|
|
}
|
|
|
|
.search > * {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.zone [data-tour-target="board-search"] {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.contextActions {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.userMenu {
|
|
display: flex;
|
|
padding-inline: rem(6px);
|
|
}
|
|
|
|
.mobileContent {
|
|
display: none;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--mantine-spacing-xs);
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-inline: var(--mantine-spacing-xs);
|
|
}
|
|
|
|
.mobileZone {
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.mobileZone::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.mobileZone[data-zone="left"] {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.mobileZone[data-zone="right"] {
|
|
justify-content: flex-end;
|
|
max-width: 72vw;
|
|
}
|
|
|
|
.floatingControls {
|
|
position: fixed;
|
|
z-index: var(--homarr-z-index-board-header);
|
|
top: max(rem(10px), env(safe-area-inset-top));
|
|
right: max(rem(10px), env(safe-area-inset-right));
|
|
padding: rem(8px);
|
|
border: rem(1px) solid color-mix(in srgb, var(--mantine-color-default-border) 70%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--mantine-color-body) 58%, transparent);
|
|
box-shadow: 0 rem(12px) rem(36px) rgb(0 0 0 / 20%);
|
|
backdrop-filter: blur(rem(20px)) saturate(140%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateY(rem(-8px)) scale(0.98);
|
|
transition:
|
|
opacity 160ms ease,
|
|
transform 180ms ease;
|
|
}
|
|
|
|
.floatingControls[data-visible="true"],
|
|
.floatingControls:focus-within {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.floatingControls button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.floatingControlsCorner {
|
|
position: fixed;
|
|
z-index: calc(var(--homarr-z-index-board-header) - 1);
|
|
top: 0;
|
|
right: 0;
|
|
width: rem(112px);
|
|
height: rem(112px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.floatingControlsCorner[data-active="true"] {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (max-width: $mantine-breakpoint-sm) {
|
|
.desktopContent {
|
|
display: none;
|
|
}
|
|
|
|
.mobileContent {
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
@media (hover: none), (pointer: coarse) {
|
|
.floatingControls {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: none;
|
|
}
|
|
|
|
.floatingControlsCorner {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.header,
|
|
.floatingControls {
|
|
transition: none;
|
|
}
|
|
}
|