532 lines
23 KiB
CSS
532 lines
23 KiB
CSS
/* LNB pattern (layout visual reference: D:\컴포넌트\ui-viz Patterns/LNB, implementation: HM Collapsible + plain elements).
|
|
A 272px green column: horizontal 5-stop surface, brand on top, menu in the middle, text-only profile at the bottom. The current
|
|
item is a Beige face (left corners rounded) that runs to the content edge and joins it through two concave corners; hover is
|
|
Black 10% to the same edge; an open group is a Black 8% face with a 1px green line. Spacing values are pattern-local. */
|
|
:root, [data-hm-theme] {
|
|
/* Exposed for the layout: grid column width and the surface that continues behind the content's rounded corners. */
|
|
--hm-lnb-width: 272px;
|
|
--hm-lnb-join: 18px;
|
|
--hm-lnb-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%);
|
|
--hm-lnb-background-end: var(--hm-sem-palette-green-light-2);
|
|
--hm-lnb-padding-top: 28px;
|
|
--hm-lnb-padding-bottom: 22px;
|
|
--hm-lnb-inset-start: 20px;
|
|
--hm-lnb-inset-end: 20px;
|
|
/* Menu top (ui-viz 20 under the brand). Padding inside the scroll region, so the scroll starts right under the brand; keep it at
|
|
least `--hm-lnb-join` so the curve above a current first item is not clipped (the bottom padding is the join for the same reason). */
|
|
--hm-lnb-nav-padding-top: 20px;
|
|
|
|
--hm-lnb-text: var(--hm-sem-on-action-primary);
|
|
--hm-lnb-text-secondary: var(--hm-sem-palette-green-tint);
|
|
--hm-lnb-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
|
|
--hm-lnb-focus-outline: 2px solid var(--hm-sem-on-action-primary);
|
|
|
|
--hm-lnb-brand-padding-x: 30px;
|
|
--hm-lnb-brand-padding-bottom: 22px;
|
|
--hm-lnb-brand-gap: 12px;
|
|
--hm-lnb-brand-eyebrow-size: 11px;
|
|
--hm-lnb-brand-eyebrow-spacing: 0.12em;
|
|
--hm-lnb-brand-name-size: 17px;
|
|
--hm-lnb-brand-text-gap: 5px;
|
|
|
|
--hm-lnb-item-min-height: 56px;
|
|
--hm-lnb-item-padding-start: 18px;
|
|
--hm-lnb-item-gap: 12px;
|
|
--hm-lnb-item-font-size: 18px;
|
|
--hm-lnb-item-line-height: 28px;
|
|
--hm-lnb-item-font-weight: 700;
|
|
--hm-lnb-item-radius: 4px 0 0 4px;
|
|
--hm-lnb-item-icon-size: 20px;
|
|
--hm-lnb-item-icon-opacity: 0.5;
|
|
--hm-lnb-item-icon-stroke: 1.7;
|
|
--hm-lnb-item-text-stroke-width: 1.5px;
|
|
--hm-lnb-item-text-shadow: 1px 2px 1px var(--hm-lnb-text-stroke-color);
|
|
--hm-lnb-hover-background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
|
|
|
|
--hm-lnb-current-background: var(--hm-sem-bg-content);
|
|
--hm-lnb-current-text: var(--hm-sem-action-primary);
|
|
--hm-lnb-current-radius: 8px 0 0 8px;
|
|
/* Inset depth of the current face: left edge, top, bottom; the last quarter fades so the content side stays open. */
|
|
--hm-lnb-current-depth:
|
|
linear-gradient(to right, color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent), transparent 6px) 0 0 / 75% 100% no-repeat,
|
|
linear-gradient(to bottom, color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat,
|
|
linear-gradient(to top, color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat;
|
|
|
|
--hm-lnb-group-open-background: color-mix(in srgb, var(--hm-sem-palette-black) 8%, transparent);
|
|
--hm-lnb-group-open-line: 1px solid var(--hm-sem-palette-green-light-2);
|
|
--hm-lnb-group-radius: 8px 0 0 8px;
|
|
--hm-lnb-group-current-text: var(--hm-sem-palette-yellow-accent);
|
|
--hm-lnb-group-arrow-size: 18px;
|
|
--hm-lnb-subitem-padding-start: 68px;
|
|
/* Align the 2-depth link surface with the 1-depth group text; retain its existing text inset. */
|
|
--hm-lnb-subitem-surface-inset: calc(var(--hm-lnb-item-padding-start) + var(--hm-lnb-group-arrow-size) + var(--hm-lnb-item-gap));
|
|
--hm-lnb-group-padding-bottom: 8px;
|
|
|
|
/* 3-depth: the items of an `LNBGroup` nested in a group. Same 18px; the hierarchy is the extra 20px indent and the connector
|
|
(a vertical line at the 2-depth text start, a 12px branch to each row's middle, 8px to the text; it ends at the last row). */
|
|
--hm-lnb-third-min-height: 48px;
|
|
--hm-lnb-third-padding-block: 12px;
|
|
--hm-lnb-third-padding-start: 88px;
|
|
--hm-lnb-third-line-height: 24px;
|
|
--hm-lnb-third-font-weight: 500;
|
|
--hm-lnb-third-current-font-weight: 700;
|
|
--hm-lnb-third-connector-x: var(--hm-lnb-subitem-padding-start);
|
|
--hm-lnb-third-connector-length: 12px;
|
|
--hm-lnb-third-connector-width: 1px;
|
|
--hm-lnb-third-connector-color: color-mix(in srgb, var(--hm-sem-palette-green-tint) 40%, transparent);
|
|
--hm-lnb-third-connector-current-color: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 40%, transparent);
|
|
|
|
--hm-lnb-profile-padding-x: 30px;
|
|
--hm-lnb-profile-padding-top: 22px;
|
|
--hm-lnb-profile-gap: 12px;
|
|
--hm-lnb-profile-name-size: 16px;
|
|
--hm-lnb-profile-description-size: 12px;
|
|
}
|
|
|
|
[data-slot="lnb"] {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: var(--hm-lnb-width);
|
|
min-height: 100%;
|
|
padding: var(--hm-lnb-padding-top) 0 var(--hm-lnb-padding-bottom);
|
|
background: var(--hm-lnb-background);
|
|
color: var(--hm-lnb-text);
|
|
}
|
|
/* The surface keeps going for `--hm-lnb-join` behind the rounded left corners of the content next to the column. */
|
|
[data-slot="lnb"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 100%;
|
|
width: var(--hm-lnb-join);
|
|
background: var(--hm-lnb-background-end);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Brand (vertical) and profile: text with the dark text border. */
|
|
[data-slot="lnb-brand"] {
|
|
flex: none;
|
|
gap: var(--hm-lnb-brand-gap);
|
|
align-items: flex-start;
|
|
padding: 0 var(--hm-lnb-brand-padding-x) var(--hm-lnb-brand-padding-bottom);
|
|
}
|
|
[data-slot="lnb-brand"] > :is(img, svg) {
|
|
flex: 0 0 auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
[data-slot="lnb-brand"] > span {
|
|
display: grid;
|
|
gap: var(--hm-lnb-brand-text-gap);
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-slot="lnb-brand"] :is(small, strong),
|
|
[data-slot="lnb-profile"] :is(strong, p) {
|
|
-webkit-text-stroke: 1px var(--hm-lnb-text-stroke-color);
|
|
paint-order: stroke fill;
|
|
}
|
|
[data-slot="lnb-brand"] small {
|
|
color: var(--hm-lnb-text-secondary);
|
|
font-size: var(--hm-lnb-brand-eyebrow-size);
|
|
font-weight: 700;
|
|
letter-spacing: var(--hm-lnb-brand-eyebrow-spacing);
|
|
line-height: 1.2;
|
|
}
|
|
[data-slot="lnb-brand"] strong {
|
|
font-size: var(--hm-lnb-brand-name-size);
|
|
font-weight: 700;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-slot="lnb"] > [data-slot="lnb-profile"] {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--hm-lnb-profile-gap);
|
|
align-self: flex-start;
|
|
width: fit-content;
|
|
/* GNB profile's 8px inner hit padding; the existing 30px inset still places the Avatar. */
|
|
max-width: calc(100% - 2 * (var(--hm-lnb-profile-padding-x) - 8px));
|
|
margin-top: auto;
|
|
margin-inline: calc(var(--hm-lnb-profile-padding-x) - 8px);
|
|
min-height: var(--hm-lnb-third-min-height);
|
|
padding: 0 8px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
[data-slot="lnb"] > [data-slot="lnb-profile"]:is(:hover, [data-state="open"]) {
|
|
background: var(--hm-lnb-hover-background);
|
|
}
|
|
[data-slot="lnb"] > [data-slot="lnb-profile"]:focus-visible {
|
|
outline: var(--hm-lnb-focus-outline);
|
|
outline-offset: -2px;
|
|
}
|
|
[data-slot="lnb-profile-text"] {
|
|
min-width: 0;
|
|
}
|
|
[data-slot="lnb-profile"] strong {
|
|
display: block;
|
|
font-size: var(--hm-lnb-profile-name-size);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
[data-slot="lnb-profile"] p {
|
|
margin: 4px 0 0;
|
|
color: var(--hm-lnb-text-secondary);
|
|
font-size: var(--hm-lnb-profile-description-size);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Menu region and the only scroll container of the column (brand and profile are `flex: none`; the column itself never scrolls). In a
|
|
column of fixed height it fills the space between them (`min-height: 0` lets it shrink below the menu height), so it starts at the
|
|
brand bottom and ends at the profile top. It is `inset-end + 1px` wider than the column's inner area so a current item can overlap
|
|
the content by 1px; vertical padding keeps the join curves of the first / last item from being clipped. `direction: rtl` only moves
|
|
the native scrollbar to the left edge, so it never takes width from the right side where the current item joins the content; the
|
|
menu itself is LTR again (direct children, see "Menu rows" below). */
|
|
[data-slot="lnb-nav"] {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
direction: rtl;
|
|
margin: 0 -1px 0 0;
|
|
padding: var(--hm-lnb-nav-padding-top) 0 var(--hm-lnb-join) var(--hm-lnb-inset-start);
|
|
overflow-x: clip;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: color-mix(in srgb, var(--hm-sem-palette-white) 35%, transparent) transparent;
|
|
}
|
|
/* Layout owns the old top spacing only when this column owns a Profile. */
|
|
[data-slot="lnb"]:has(> [data-slot="lnb-profile"]) > [data-slot="lnb-nav"] {
|
|
margin-bottom: var(--hm-lnb-profile-padding-top);
|
|
}
|
|
|
|
/* ── Item ───────────────────────────────────────────────────────────────────────────────────────────── */
|
|
[data-slot="lnb-item"],
|
|
[data-slot="lnb-group-trigger"] {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
gap: var(--hm-lnb-item-gap);
|
|
width: calc(100% - 1px);
|
|
min-height: var(--hm-lnb-item-min-height);
|
|
padding: 14px calc(var(--hm-lnb-inset-end) + 12px) 14px var(--hm-lnb-item-padding-start);
|
|
border: 0;
|
|
border-radius: var(--hm-lnb-item-radius);
|
|
background: transparent;
|
|
color: var(--hm-lnb-text);
|
|
font-family: inherit;
|
|
font-size: var(--hm-lnb-item-font-size);
|
|
line-height: var(--hm-lnb-item-line-height);
|
|
font-weight: var(--hm-lnb-item-font-weight);
|
|
text-align: left;
|
|
text-decoration: none;
|
|
word-break: keep-all;
|
|
overflow-wrap: anywhere;
|
|
cursor: pointer;
|
|
outline: none;
|
|
-webkit-text-stroke: var(--hm-lnb-item-text-stroke-width) var(--hm-lnb-text-stroke-color);
|
|
paint-order: stroke fill;
|
|
text-shadow: var(--hm-lnb-item-text-shadow);
|
|
}
|
|
[data-slot="lnb-item"] > svg:not([data-slot]) {
|
|
flex: 0 0 auto;
|
|
width: var(--hm-lnb-item-icon-size);
|
|
height: var(--hm-lnb-item-icon-size);
|
|
opacity: var(--hm-lnb-item-icon-opacity);
|
|
stroke-width: var(--hm-lnb-item-icon-stroke);
|
|
}
|
|
[data-slot="lnb-item"]:not([aria-current="page"]):hover,
|
|
[data-slot="lnb-group-trigger"]:hover {
|
|
background: var(--hm-lnb-hover-background);
|
|
}
|
|
[data-slot="lnb-item"]:focus-visible,
|
|
[data-slot="lnb-group-trigger"]:focus-visible {
|
|
outline: var(--hm-lnb-focus-outline);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Current: Beige face, left corners 8, runs 1px into the content, concave corners above and below, inset depth. No text effects. */
|
|
[data-slot="lnb-item"][aria-current="page"] {
|
|
z-index: 1;
|
|
width: 100%;
|
|
background: var(--hm-lnb-current-depth), var(--hm-lnb-current-background);
|
|
border-radius: var(--hm-lnb-current-radius);
|
|
color: var(--hm-lnb-current-text);
|
|
-webkit-text-stroke: 0;
|
|
text-shadow: none;
|
|
}
|
|
[data-slot="lnb-item"][aria-current="page"]:focus-visible {
|
|
outline-color: var(--hm-lnb-current-text);
|
|
}
|
|
[data-slot="lnb-item"][aria-current="page"]::before,
|
|
[data-slot="lnb-item"][aria-current="page"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 1px;
|
|
width: var(--hm-lnb-join);
|
|
height: var(--hm-lnb-join);
|
|
pointer-events: none;
|
|
}
|
|
[data-slot="lnb-item"][aria-current="page"]::before {
|
|
bottom: 100%;
|
|
background: radial-gradient(circle at top left, transparent calc(var(--hm-lnb-join) - 0.5px), var(--hm-lnb-current-background) var(--hm-lnb-join));
|
|
}
|
|
[data-slot="lnb-item"][aria-current="page"]::after {
|
|
top: 100%;
|
|
background: radial-gradient(circle at bottom left, transparent calc(var(--hm-lnb-join) - 0.5px), var(--hm-lnb-current-background) var(--hm-lnb-join));
|
|
}
|
|
|
|
/* ── Group (HM Collapsible) ─────────────────────────────────────────────────────────────────────────── */
|
|
[data-slot="lnb-group"] {
|
|
position: relative;
|
|
width: calc(100% - 1px);
|
|
border-radius: var(--hm-lnb-group-radius);
|
|
}
|
|
[data-slot="lnb-group"][data-state="open"] {
|
|
background: var(--hm-lnb-group-open-background);
|
|
}
|
|
[data-slot="lnb-group"][data-state="open"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border: var(--hm-lnb-group-open-line);
|
|
border-right: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
[data-slot="lnb-group-trigger"] {
|
|
width: 100%;
|
|
border-radius: var(--hm-lnb-group-radius);
|
|
}
|
|
[data-slot="lnb-group"][data-state="open"] > [data-slot="lnb-group-trigger"]:hover {
|
|
border-radius: 8px 0 0 0;
|
|
}
|
|
[data-slot="lnb-group"][data-current] > [data-slot="lnb-group-trigger"] {
|
|
color: var(--hm-lnb-group-current-text);
|
|
}
|
|
[data-slot="lnb-group-arrow"] {
|
|
flex: 0 0 auto;
|
|
width: var(--hm-lnb-group-arrow-size);
|
|
height: var(--hm-lnb-group-arrow-size);
|
|
stroke-width: 2;
|
|
filter: drop-shadow(var(--hm-lnb-item-text-shadow));
|
|
transition: transform 0.15s ease;
|
|
}
|
|
[data-slot="lnb-group-trigger"][data-state="open"] > [data-slot="lnb-group-arrow"] {
|
|
transform: rotate(90deg);
|
|
}
|
|
[data-slot="lnb-group-content"][data-state="open"] {
|
|
display: grid;
|
|
padding-bottom: var(--hm-lnb-group-padding-bottom);
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-item"] {
|
|
width: 100%;
|
|
padding-left: var(--hm-lnb-subitem-padding-start);
|
|
border-radius: 0;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-item"]:not([aria-current="page"]):hover {
|
|
border-radius: var(--hm-lnb-item-radius);
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-item"][aria-current="page"] {
|
|
width: calc(100% + 1px);
|
|
margin-right: -1px;
|
|
border-radius: var(--hm-lnb-current-radius);
|
|
}
|
|
/* Only 2-depth destination links: the group keeps its full layout width, while hover, current, focus and click belong to the
|
|
inset link. Subtract the same inset from text padding and width to preserve text wrapping and the right content join. */
|
|
[data-slot="lnb-nav"] > [data-slot="lnb-group"] > [data-slot="lnb-group-content"] > [data-slot="lnb-item"] {
|
|
width: calc(100% - var(--hm-lnb-subitem-surface-inset));
|
|
margin-left: var(--hm-lnb-subitem-surface-inset);
|
|
padding-left: calc(var(--hm-lnb-subitem-padding-start) - var(--hm-lnb-subitem-surface-inset));
|
|
}
|
|
[data-slot="lnb-nav"] > [data-slot="lnb-group"] > [data-slot="lnb-group-content"] > [data-slot="lnb-item"][aria-current="page"] {
|
|
width: calc(100% + 1px - var(--hm-lnb-subitem-surface-inset));
|
|
}
|
|
|
|
/* ── Menu rows (direct children of the menu region) ─────────────────────────────────────────────────── */
|
|
/* Back to LTR. A left scrollbar narrows the content box from the left, so each row starts that much (the scrollbar width, 0 without
|
|
one) to the left again: `100%` is the content box, the region is `--hm-lnb-width + 1px` wide with `--hm-lnb-inset-start` padding. The
|
|
scrollbar sits in that padding and the rows keep x 20 → 272 (current 273) with or without it. */
|
|
[data-slot="lnb-nav"] > * {
|
|
direction: ltr;
|
|
margin-left: calc(100% + var(--hm-lnb-inset-start) - var(--hm-lnb-width) - 1px);
|
|
}
|
|
[data-slot="lnb-nav"] > :is([data-slot="lnb-item"], [data-slot="lnb-group"]) {
|
|
width: auto;
|
|
margin-right: 1px;
|
|
}
|
|
[data-slot="lnb-nav"] > [data-slot="lnb-item"][aria-current="page"] {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* ── Nested group (2-depth group inside a group) ────────────────────────────────────────────────────── */
|
|
/* The outer group already draws the open face and line, so a nested group adds no face, line, padding or width loss; its name
|
|
lines up with the 2-depth item text. */
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-group"] {
|
|
width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-group"][data-state="open"] {
|
|
background: none;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-group"][data-state="open"]::before {
|
|
content: none;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-group-trigger"] {
|
|
padding-left: calc(var(--hm-lnb-subitem-padding-start) - var(--hm-lnb-group-arrow-size) - var(--hm-lnb-item-gap));
|
|
border-radius: 0;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-group"] > [data-slot="lnb-group-trigger"]:hover {
|
|
border-radius: var(--hm-lnb-item-radius);
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-group-content"][data-state="open"] {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* 3-depth only: the row owns the existing connector gradients; the link begins at the branch end.
|
|
Decoration follows the row's real middle when text wraps and never owns pointer interaction. */
|
|
[data-slot="lnb-third-row"] {
|
|
--hm-lnb-third-line: var(--hm-lnb-third-connector-color);
|
|
--hm-lnb-third-line-end: 100%;
|
|
--hm-lnb-third-connector:
|
|
linear-gradient(var(--hm-lnb-third-line), var(--hm-lnb-third-line)) var(--hm-lnb-third-connector-x) 0 / var(--hm-lnb-third-connector-width) var(--hm-lnb-third-line-end) no-repeat,
|
|
linear-gradient(var(--hm-lnb-third-line), var(--hm-lnb-third-line)) var(--hm-lnb-third-connector-x) calc(50% - var(--hm-lnb-third-connector-width) / 2) / var(--hm-lnb-third-connector-length) var(--hm-lnb-third-connector-width) no-repeat;
|
|
position: relative;
|
|
padding-left: calc(var(--hm-lnb-third-connector-x) + var(--hm-lnb-third-connector-length));
|
|
}
|
|
[data-slot="lnb-third-row"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--hm-lnb-third-connector);
|
|
pointer-events: none;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-third-row"] > [data-slot="lnb-item"] {
|
|
min-height: var(--hm-lnb-third-min-height);
|
|
padding-top: var(--hm-lnb-third-padding-block);
|
|
padding-bottom: var(--hm-lnb-third-padding-block);
|
|
padding-left: calc(var(--hm-lnb-third-padding-start) - var(--hm-lnb-third-connector-x) - var(--hm-lnb-third-connector-length));
|
|
line-height: var(--hm-lnb-third-line-height);
|
|
font-weight: var(--hm-lnb-third-font-weight);
|
|
-webkit-text-stroke: 0;
|
|
text-shadow: none;
|
|
}
|
|
/* The vertical line ends at the middle of the last row. */
|
|
[data-slot="lnb-third-row"]:last-child {
|
|
--hm-lnb-third-line-end: 50%;
|
|
}
|
|
[data-slot="lnb-group-content"] [data-slot="lnb-third-row"] > [data-slot="lnb-item"][aria-current="page"] {
|
|
font-weight: var(--hm-lnb-third-current-font-weight);
|
|
}
|
|
|
|
/* Desktop only: below 1024px the column is gone and the layout column collapses with it. */
|
|
@media (max-width: 1023px) {
|
|
:root, [data-hm-theme] {
|
|
--hm-lnb-width: 0px;
|
|
}
|
|
[data-slot="lnb"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* LNB Mobile Header is the mobile representation of LNB Mode, independent of GNB/Dashboard. */
|
|
:root, [data-hm-theme] {
|
|
--hm-lnb-mobile-height: 56px;
|
|
--hm-lnb-mobile-join: 12px;
|
|
--hm-lnb-mobile-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%);
|
|
/* Mobile menu content (inside the HM Sheet, white face). */
|
|
--hm-lnb-mobile-link-height: 44px;
|
|
--hm-lnb-mobile-link-padding-x: 12px;
|
|
--hm-lnb-mobile-link-radius: var(--hm-radius-control-md);
|
|
--hm-lnb-mobile-link-font-size: 14px;
|
|
--hm-lnb-mobile-link-line-height: 20px;
|
|
--hm-lnb-mobile-link-font-weight: 500;
|
|
--hm-lnb-mobile-link-text: var(--hm-sem-fg-primary);
|
|
--hm-lnb-mobile-link-hover-background: var(--accent);
|
|
--hm-lnb-mobile-link-hover-text: var(--accent-foreground);
|
|
--hm-lnb-mobile-link-current-background: var(--hm-sem-bg-content);
|
|
--hm-lnb-mobile-link-current-text: var(--hm-sem-action-primary);
|
|
--hm-lnb-mobile-link-current-font-weight: 700;
|
|
--hm-lnb-mobile-group-label-color: var(--hm-sem-fg-secondary);
|
|
--hm-lnb-mobile-group-gap: 16px;
|
|
--hm-lnb-mobile-nested-gap: 8px;
|
|
--hm-lnb-mobile-nested-indent: var(--hm-lnb-mobile-link-padding-x);
|
|
--hm-lnb-mobile-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
|
|
}
|
|
[data-slot="lnb-mobile-header"] { display: none; }
|
|
[data-slot="lnb-mobile-nav"] {
|
|
display: grid;
|
|
gap: var(--hm-lnb-mobile-group-gap);
|
|
padding-bottom: 16px;
|
|
}
|
|
[data-slot="lnb-mobile-group-label"] {
|
|
margin: 0;
|
|
padding: 0 var(--hm-lnb-mobile-link-padding-x) 4px;
|
|
color: var(--hm-lnb-mobile-group-label-color);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
font-weight: 500;
|
|
}
|
|
/* A group inside a group (a deeper local level, e.g. the LNB 3-depth): one link padding further in, with room above its title. */
|
|
[data-slot="lnb-mobile-group"] [data-slot="lnb-mobile-group"] {
|
|
margin-top: var(--hm-lnb-mobile-nested-gap);
|
|
padding-left: var(--hm-lnb-mobile-nested-indent);
|
|
}
|
|
[data-slot="lnb-mobile-link"] {
|
|
box-sizing: border-box;
|
|
min-height: var(--hm-lnb-mobile-link-height);
|
|
padding: 0 var(--hm-lnb-mobile-link-padding-x);
|
|
border-radius: var(--hm-lnb-mobile-link-radius);
|
|
color: var(--hm-lnb-mobile-link-text);
|
|
font-size: var(--hm-lnb-mobile-link-font-size);
|
|
line-height: var(--hm-lnb-mobile-link-line-height);
|
|
font-weight: var(--hm-lnb-mobile-link-font-weight);
|
|
text-decoration: none;
|
|
overflow-wrap: anywhere;
|
|
outline: none;
|
|
}
|
|
[data-slot="lnb-mobile-link"]:is(:hover, :focus-visible) {
|
|
background: var(--hm-lnb-mobile-link-hover-background);
|
|
color: var(--hm-lnb-mobile-link-hover-text);
|
|
}
|
|
[data-slot="lnb-mobile-link"]:focus-visible {
|
|
box-shadow: var(--hm-lnb-mobile-focus-ring);
|
|
}
|
|
[data-slot="lnb-mobile-link"][aria-current="page"] {
|
|
background: var(--hm-lnb-mobile-link-current-background);
|
|
color: var(--hm-lnb-mobile-link-current-text);
|
|
font-weight: var(--hm-lnb-mobile-link-current-font-weight);
|
|
}
|
|
|
|
|
|
[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"] {
|
|
display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px;
|
|
border-radius: var(--hm-radius-control-md); color: var(--hm-sem-fg-primary); text-align: left; cursor: pointer;
|
|
}
|
|
[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"]:hover { background: var(--accent); }
|
|
[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"]:focus-visible { outline: 2px solid var(--ring); }
|
|
[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"] p { color: var(--hm-sem-fg-secondary); }
|
|
@media (max-width: 1023px) {
|
|
[data-slot="lnb-mobile-header"] {
|
|
position: relative; display: flex; flex: none; align-items: center; gap: 8px;
|
|
height: var(--hm-lnb-mobile-height); padding: 0 16px;
|
|
background: var(--hm-lnb-mobile-background) left top / 100% calc(var(--hm-lnb-mobile-height) + var(--hm-lnb-mobile-join)) no-repeat;
|
|
color: var(--hm-sem-on-action-primary);
|
|
}
|
|
[data-slot="lnb-mobile-header"]::after {
|
|
content: ""; position: absolute; inset: 100% 0 auto; height: var(--hm-lnb-mobile-join);
|
|
background: var(--hm-lnb-mobile-background) left bottom / 100% calc(var(--hm-lnb-mobile-height) + var(--hm-lnb-mobile-join)) no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
[data-slot="lnb-mobile-brand"] { min-width: 0; gap: 12px; text-decoration: none; }
|
|
[data-slot="lnb-mobile-brand"] :is(span, strong) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
[data-slot="lnb-mobile-brand"] strong { font-size: 16px; font-weight: 700; }
|
|
[data-slot="lnb-mobile-brand"] small { display: none; }
|
|
[data-slot="lnb-mobile-brand"] > :is(img, svg) { max-height: 32px; width: auto; }
|
|
[data-slot="lnb-mobile-header"] > [data-slot="button"] { color: var(--hm-sem-on-action-primary); }
|
|
[data-slot="lnb-mobile-header"] > [data-slot="button"]:hover { background: var(--hm-lnb-hover-background); }
|
|
[data-slot="lnb-mobile-header"] > [data-slot="button"]:focus-visible { outline: var(--hm-lnb-focus-outline); outline-offset: -2px; box-shadow: none; }
|
|
}
|