155 lines
6.3 KiB
CSS
155 lines
6.3 KiB
CSS
/* Dashboard Mode owns its internal navigation and scroll frame. No GNB/LNB CSS variable or responsive dependency. */
|
||
:root, [data-hm-theme] {
|
||
--hm-dashboard-height: 100dvh;
|
||
--hm-dashboard-background: var(--hm-sem-palette-green-light-2);
|
||
--hm-dashboard-content-background: var(--hm-sem-bg-content);
|
||
--hm-dashboard-content-top-radius: 12px;
|
||
--hm-dashboard-content-side-radius: 18px;
|
||
--hm-dashboard-sidebar-width: 272px;
|
||
--hm-dashboard-min-width: 960px;
|
||
--hm-dashboard-header-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
|
||
/* Compact 48px source surface; independent of shared action/GNB/LNB gradients. */
|
||
--hm-dashboard-compact-background:
|
||
linear-gradient(270deg, rgba(18, 66, 51, 0.4) 0%, rgba(20, 112, 95, 0.4) 100%),
|
||
linear-gradient(178deg, #103D2E 1.07%, #2A6652 11.07%, #12352A 87.72%);
|
||
--hm-dashboard-nav-text: var(--hm-sem-on-action-primary);
|
||
--hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
|
||
--hm-dashboard-nav-text-stroke-width: 1px;
|
||
--hm-dashboard-nav-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
|
||
--hm-dashboard-nav-focus-outline: 2px solid var(--hm-sem-on-action-primary);
|
||
--hm-dashboard-padding: 34px;
|
||
--hm-dashboard-gap: 24px;
|
||
--hm-dashboard-content-shadow-top: 0 -8px 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
|
||
--hm-dashboard-content-shadow-side: -8px 0 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
|
||
}
|
||
|
||
[data-slot="dashboard-scroll"] {
|
||
box-sizing: border-box;
|
||
height: var(--hm-dashboard-height);
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
overflow: auto;
|
||
}
|
||
[data-slot="dashboard-layout"] {
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
/* 4 × 200px KPI cards + 3 × 24px gaps + 2 × 34px padding + 20px scrollbar allowance.
|
||
Also fits the measured 549px compact status bar, its wings and the 125px brand without overlap. */
|
||
min-width: var(--hm-dashboard-min-width, 960px);
|
||
}
|
||
[data-slot="dashboard-layout"][data-sidebar] {
|
||
min-width: calc(var(--hm-dashboard-min-width) + var(--hm-dashboard-sidebar-width));
|
||
}
|
||
[data-slot="dashboard-body"] {
|
||
flex: 1 1 0;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
background: var(--hm-dashboard-background);
|
||
}
|
||
[data-slot="dashboard-header"] {
|
||
display: flex;
|
||
flex: none;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
height: 48px;
|
||
padding: 0 20px;
|
||
background: var(--hm-dashboard-header-background);
|
||
color: var(--hm-dashboard-nav-text);
|
||
}
|
||
[data-slot="dashboard-body"] > [data-slot="dashboard-sidebar"] {
|
||
flex: none;
|
||
width: var(--hm-dashboard-sidebar-width);
|
||
min-height: 0;
|
||
padding: 28px 20px 22px;
|
||
gap: 22px;
|
||
background: linear-gradient(90deg, var(--hm-sem-action-primary) 0%, var(--hm-sem-palette-green-light-1) 30%, var(--hm-sem-palette-green-light-2) 50%, var(--hm-sem-palette-green-light-3) 90%, var(--hm-sem-palette-green-light-2) 100%);
|
||
color: var(--hm-dashboard-nav-text);
|
||
}
|
||
[data-slot="dashboard-sidebar"] > nav {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
}
|
||
[data-slot="dashboard-sidebar"] [data-slot="button"] {
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
min-height: 44px;
|
||
height: auto;
|
||
white-space: normal;
|
||
color: var(--hm-dashboard-nav-text);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [data-slot="button"]:hover {
|
||
background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] {
|
||
background: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [data-slot="collapsible"][data-current] > [data-slot="button"] {
|
||
color: var(--hm-sem-palette-yellow-accent);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] > svg {
|
||
transform: rotate(90deg);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [aria-current="page"],
|
||
[data-slot="dashboard-sidebar"] [aria-current="page"]:hover {
|
||
background: var(--hm-dashboard-content-background);
|
||
color: var(--hm-sem-action-primary);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [data-slot="button"]:focus-visible {
|
||
outline: var(--hm-dashboard-nav-focus-outline);
|
||
}
|
||
[data-slot="dashboard-sidebar"] [aria-current="page"]:focus-visible {
|
||
outline-color: var(--hm-sem-action-primary);
|
||
}
|
||
|
||
/* Content surface and vertical scroll container, positioned after Dashboard's internal navigation. */
|
||
[data-slot="dashboard-main"] {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
padding: var(--hm-dashboard-padding);
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
/* Let horizontal wheel/touch gestures chain to the outer Dashboard frame. */
|
||
overscroll-behavior-y: contain;
|
||
background: var(--hm-dashboard-content-background);
|
||
}
|
||
/* Dashboard header and sidebar use Dashboard-owned radii. */
|
||
[data-slot="dashboard-layout"][data-header] [data-slot="dashboard-main"] {
|
||
border-radius: var(--hm-dashboard-content-top-radius) var(--hm-dashboard-content-top-radius) 0 0;
|
||
box-shadow: var(--hm-dashboard-content-shadow-top);
|
||
}
|
||
|
||
[data-slot="dashboard-content"] {
|
||
gap: var(--hm-dashboard-gap);
|
||
min-width: 0;
|
||
}
|
||
[data-slot="dashboard-content"] > * {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Preserve the desktop filter row inside the minimum-width frame, independent of the viewport's mobile Filter Bar rules. */
|
||
[data-slot="dashboard-layout"] [data-slot="filter-bar"] {
|
||
flex-wrap: nowrap;
|
||
}
|
||
[data-slot="dashboard-layout"] [data-slot="filter-bar"][data-layout] { flex-wrap: wrap; }
|
||
[data-slot="dashboard-layout"] [data-slot="filter-bar-search"] {
|
||
flex: 0 0 var(--hm-filter-bar-search-width);
|
||
}
|
||
[data-slot="dashboard-layout"] [data-slot="filter-bar"] > :is([data-slot="select-trigger"], [data-slot="combobox-trigger"], [data-slot="date-picker-trigger"], [data-slot="input"]) {
|
||
flex: 0 0 var(--hm-filter-bar-control-width);
|
||
width: var(--hm-filter-bar-control-width);
|
||
}
|
||
[data-slot="dashboard-layout"] [data-slot="filter-bar-actions"] {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* The sidebar remains inside the Dashboard minimum-width frame at every viewport width. */
|
||
[data-slot="dashboard-layout"][data-sidebar] [data-slot="dashboard-main"] {
|
||
border-radius: var(--hm-dashboard-content-side-radius) 0 0 var(--hm-dashboard-content-side-radius);
|
||
box-shadow: var(--hm-dashboard-content-shadow-side);
|
||
}
|