183 lines
3.2 KiB
CSS
183 lines
3.2 KiB
CSS
.header {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header[data-visible="false"] {
|
|
display: none;
|
|
}
|
|
|
|
.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) {
|
|
.floatingControls {
|
|
transition: none;
|
|
}
|
|
}
|