/* HLogin Fluent 2 — component layer for HLogin.Web (ASP.NET MVC, no React). Load order: hl-tokens.css → this file (hl-fluent.css). Source: the "HLogin Fluent 2" design system components/bundle.css, copied verbatim apart from this header — see src/WebApp/HLogin.Web/design/README.md. Every colour, radius, spacing, shadow and type value is a token variable from tokens.json; component sizes (32px controls, 5px button padding, 16px checkbox …) are copied from @fluentui/react-components 9.74.9 *.styles.raw.js. "HLogin skin" comments mark where this file departs from Fluent on purpose (top bar, sidebar, tabs, inputs, cards) so it does not read as Microsoft 365. Prefix: hl-. Theme: . */ /* ---------- motion (Fluent durations/curves; tokens.json has no motion family) ---------- */ :root { --durationUltraFast: 50ms; --durationFaster: 100ms; --durationFast: 150ms; --durationNormal: 200ms; --durationGentle: 250ms; --durationSlow: 300ms; --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1); --curveDecelerateMid: cubic-bezier(0, 0, 0, 1); --curveAccelerateMid: cubic-bezier(1, 0, 1, 1); --curveLinear: cubic-bezier(0, 0, 1, 1); color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --durationUltraFast: 0.01ms; --durationFaster: 0.01ms; --durationFast: 0.01ms; --durationNormal: 0.01ms; --durationGentle: 0.01ms; --durationSlow: 0.01ms; } } /* ---------- base ---------- */ html { font-family: var(--font-base); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; } body { margin: 0; } *, *::before, *::after { box-sizing: border-box; } h1, h2, h3, h4, h5, h6, p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { vertical-align: middle; } code, kbd, pre, samp { font-family: var(--font-mono); } ::selection { background: var(--colorBrandBackground2Hover); color: var(--colorNeutralForeground1); } :focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 1px; } :focus:not(:focus-visible) { outline: none; } /* :where() keeps plain links at zero specificity so every hl-* class that renders as wins */ :where(a), .hl-link { color: var(--colorBrandForegroundLink); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; } :where(a):hover, .hl-link:hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; } :where(a):active, .hl-link:active { color: var(--colorBrandForegroundLinkPressed); } .hl-link--subtle { color: var(--colorNeutralForeground2); } .hl-link--subtle:hover { color: var(--colorNeutralForeground2Hover); } /* ---------- utilities (the small set that replaces Primer's most-used ones) ---------- */ .hl-text-muted { color: var(--colorNeutralForeground3); } .hl-text-subtle { color: var(--colorNeutralForeground2); } .hl-text-brand { color: var(--colorBrandForeground1); } .hl-text-success { color: var(--colorStatusSuccessForeground1); } .hl-text-warning { color: var(--colorStatusWarningForeground3); } .hl-text-danger { color: var(--colorStatusDangerForeground1); } .hl-stack { display: flex; flex-direction: column; gap: var(--spacingVerticalL); } .hl-stack--s { gap: var(--spacingVerticalS); } .hl-stack--m { gap: var(--spacingVerticalM); } .hl-stack--xl { gap: var(--spacingVerticalXXL); } .hl-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingHorizontalS); } .hl-cluster--between { justify-content: space-between; } .hl-cluster--end { justify-content: flex-end; } .hl-icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; } .hl-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ---------- Button ---------- */ .hl-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacingHorizontalSNudge); min-width: 96px; margin: 0; padding: 4px var(--spacingHorizontalM); /* 4+22+4+테두리 2 = 32px — 입력란과 높이를 맞춘다(design/README 「타이포그래피」) */ border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-family: inherit; font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); line-height: var(--lineHeightBase300); text-decoration: none; text-align: center; vertical-align: middle; white-space: nowrap; cursor: pointer; outline-style: none; overflow: hidden; transition: background var(--durationFaster) var(--curveEasyEase), border-color var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase); } .hl-button:hover { background: var(--colorNeutralBackground1Hover); border-color: var(--colorNeutralStroke1Hover); color: var(--colorNeutralForeground1Hover); text-decoration: none; } .hl-button:hover:active { background: var(--colorNeutralBackground1Pressed); border-color: var(--colorNeutralStroke1Pressed); } .hl-button:focus-visible { border-color: var(--colorStrokeFocus2); box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset; outline: var(--strokeWidthThick) solid transparent; z-index: 1; } .hl-button > svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; } .hl-button--primary { background: var(--colorBrandBackground); border-color: transparent; color: var(--colorNeutralForegroundOnBrand); } .hl-button--primary:hover { background: var(--colorBrandBackgroundHover); border-color: transparent; color: var(--colorNeutralForegroundOnBrand); } .hl-button--primary:hover:active { background: var(--colorBrandBackgroundPressed); border-color: transparent; } .hl-button--primary:focus-visible, .hl-button--danger:focus-visible { border-color: var(--colorStrokeFocus2); box-shadow: var(--shadow2), 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset, 0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset; } .hl-button--outline { background: transparent; } .hl-button--outline:hover { background: transparent; } .hl-button--outline:hover:active { background: transparent; } .hl-button--subtle, .hl-button--transparent { background: transparent; border-color: transparent; color: var(--colorNeutralForeground2); } .hl-button--subtle:hover { background: var(--colorSubtleBackgroundHover); border-color: transparent; color: var(--colorNeutralForeground2Hover); } .hl-button--subtle:hover > svg { color: var(--colorNeutralForeground2BrandHover); } .hl-button--subtle:hover:active { background: var(--colorSubtleBackgroundPressed); border-color: transparent; } .hl-button--subtle:hover:active > svg { color: var(--colorNeutralForeground2BrandPressed); } .hl-button--transparent:hover { background: transparent; border-color: transparent; color: var(--colorNeutralForeground2BrandHover); } .hl-button--transparent:hover:active { background: transparent; border-color: transparent; color: var(--colorNeutralForeground2BrandPressed); } .hl-button--danger { background: var(--colorStatusDangerBackground3); border-color: transparent; color: var(--colorNeutralForegroundOnBrand); } .hl-button--danger:hover { background: var(--colorStatusDangerBackground3Hover); border-color: transparent; color: var(--colorNeutralForegroundOnBrand); } .hl-button--danger:hover:active { background: var(--colorStatusDangerBackground3Pressed); border-color: transparent; } .hl-button--small { min-width: 64px; padding: 2px var(--spacingHorizontalS); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightRegular); line-height: var(--lineHeightBase200); } .hl-button--small > svg { width: 16px; height: 16px; } .hl-button--large { padding: 7px var(--spacingHorizontalL); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); } .hl-button--block { display: flex; width: 100%; } .hl-button--icon { min-width: 0; padding: 5px; } .hl-button--icon.hl-button--small { padding: 1px; } .hl-button--icon.hl-button--large { padding: 9px; } .hl-button--circular { border-radius: var(--borderRadiusCircular); } .hl-button:disabled, .hl-button[aria-disabled="true"], .hl-button:disabled:hover, .hl-button[aria-disabled="true"]:hover { background: var(--colorNeutralBackgroundDisabled); border-color: var(--colorNeutralStrokeDisabled); color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; box-shadow: none; } .hl-button--subtle:disabled, .hl-button--transparent:disabled, .hl-button--outline:disabled, .hl-button--subtle[aria-disabled="true"], .hl-button--transparent[aria-disabled="true"] { background: transparent; } .hl-button--subtle:disabled, .hl-button--transparent:disabled, .hl-button--subtle[aria-disabled="true"], .hl-button--transparent[aria-disabled="true"] { border-color: transparent; } /* ---------- Field · Input · Select · Textarea ---------- */ .hl-form { display: flex; flex-direction: column; gap: var(--spacingVerticalL); } .hl-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacingVerticalXXS); min-width: 0; } .hl-field--horizontal { grid-template-columns: minmax(120px, 33%) minmax(0, 1fr); column-gap: var(--spacingHorizontalM); align-items: start; } .hl-field--horizontal > .hl-label { padding-top: 5px; } .hl-field--horizontal > :not(.hl-label) { grid-column: 2; } .hl-label { display: block; padding: var(--spacingVerticalXXS) 0; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); color: var(--colorNeutralForeground1); } .hl-label--strong { font-weight: var(--fontWeightSemibold); } .hl-label__required { padding-left: var(--spacingHorizontalXS); color: var(--colorStatusDangerForeground1); } .hl-field__hint { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); margin-top: var(--spacingVerticalXXS); } .hl-field__error, .hl-field .field-validation-error { display: flex; align-items: flex-start; gap: var(--spacingHorizontalXS); margin-top: var(--spacingVerticalXXS); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorStatusDangerForeground1); } .hl-field__error::before, .hl-field .field-validation-error::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 11A5 5 0 1 0 6 1a5 5 0 0 0 0 10m-.75-2.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0m.26-4.84a.5.5 0 0 1 .98 0l.01.09v2.59a.5.5 0 0 1-1 0V3.41'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 11A5 5 0 1 0 6 1a5 5 0 0 0 0 10m-.75-2.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0m.26-4.84a.5.5 0 0 1 .98 0l.01.09v2.59a.5.5 0 0 1-1 0V3.41'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .hl-field .field-validation-valid { display: none; } .hl-input, .hl-textarea, .hl-select > select { display: block; width: 100%; min-width: 0; margin: 0; min-height: 32px; padding: 0 var(--spacingHorizontalM); border: var(--strokeWidthThin) solid var(--hlInputStroke); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font-family: inherit; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightRegular); transition: box-shadow var(--durationNormal) var(--curveDecelerateMid), border-color var(--durationFaster) var(--curveEasyEase); } .hl-input { height: 32px; } .hl-input::placeholder, .hl-textarea::placeholder { color: var(--colorNeutralForeground4); opacity: 1; } .hl-input:hover, .hl-textarea:hover, .hl-select > select:hover { border-color: var(--colorNeutralStrokeAccessible); } /* HLogin skin: brand border + soft brand halo instead of Fluent's growing bottom underline */ .hl-input:focus, .hl-textarea:focus, .hl-select > select:focus { outline: var(--strokeWidthThick) solid transparent; border-color: var(--colorCompoundBrandStroke); box-shadow: 0 0 0 3px var(--colorBrandStroke2); } .hl-input[aria-invalid="true"]:not(:focus), .hl-input.input-validation-error:not(:focus), .hl-textarea[aria-invalid="true"]:not(:focus), .hl-textarea.input-validation-error:not(:focus), .hl-select > select[aria-invalid="true"]:not(:focus), .hl-select > select.input-validation-error:not(:focus) { border-color: var(--colorPaletteRedBorder2); } .hl-input:disabled, .hl-textarea:disabled, .hl-select > select:disabled { background: transparent; border-color: var(--colorNeutralStrokeDisabled); color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; } .hl-input:disabled::placeholder { color: var(--colorNeutralForegroundDisabled); } .hl-input[readonly] { background: var(--colorNeutralBackground3); border-color: var(--colorNeutralStroke1); } .hl-input--small { height: 24px; min-height: 24px; padding: 0 var(--spacingHorizontalS); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); } .hl-input--large { height: 40px; min-height: 40px; padding: 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); } .hl-input--inline { display: inline-block; width: auto; } .hl-input--code { font-family: var(--font-mono); letter-spacing: 0.2em; text-align: center; } .hl-textarea { min-height: 72px; padding: var(--spacingVerticalSNudge) var(--spacingHorizontalM); resize: vertical; } .hl-select { position: relative; display: block; } .hl-select > select { height: 32px; padding-right: calc(var(--spacingHorizontalM) + 20px + var(--spacingHorizontalXS)); -webkit-appearance: none; appearance: none; cursor: pointer; } .hl-select::after { content: ""; position: absolute; top: 50%; right: var(--spacingHorizontalS); width: 20px; height: 20px; margin-top: -10px; background: var(--colorNeutralForeground3); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0'/%3E%3C/svg%3E") center / 20px 20px no-repeat; } .hl-select--large > select { height: 40px; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); } .hl-select:has(select:disabled)::after { background: var(--colorNeutralForegroundDisabled); } /* input with a trailing button (password reveal, copy) */ .hl-input-group { position: relative; display: block; } .hl-input-group > .hl-input { padding-right: 40px; } .hl-input-group > .hl-input--large { padding-right: 48px; } .hl-input-group > .hl-button { position: absolute; top: 50%; right: var(--spacingHorizontalXS); transform: translateY(-50%); } /* ---------- Checkbox · Radio ---------- */ .hl-check { display: inline-flex; align-items: flex-start; gap: var(--spacingHorizontalS); padding: var(--spacingVerticalSNudge) 0; color: var(--colorNeutralForeground1); cursor: pointer; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); } .hl-check__input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 16px; height: 16px; margin: 3px 0 0; border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible); border-radius: var(--borderRadiusSmall); background: transparent; cursor: pointer; } .hl-check__input[type="radio"] { border-radius: var(--borderRadiusCircular); } .hl-check:hover .hl-check__input:not(:checked):not(:disabled) { border-color: var(--colorNeutralStrokeAccessibleHover); } .hl-check:hover:active .hl-check__input:not(:checked):not(:disabled) { border-color: var(--colorNeutralStrokeAccessiblePressed); } .hl-check__input:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; } .hl-check__input[type="checkbox"]:checked, .hl-check__input[type="checkbox"]:indeterminate { background: var(--colorCompoundBrandBackground); border-color: var(--colorCompoundBrandBackground); } .hl-check:hover .hl-check__input[type="checkbox"]:checked { background: var(--colorCompoundBrandBackgroundHover); border-color: var(--colorCompoundBrandBackgroundHover); } .hl-check:hover:active .hl-check__input[type="checkbox"]:checked { background: var(--colorCompoundBrandBackgroundPressed); border-color: var(--colorCompoundBrandBackgroundPressed); } .hl-check__input[type="checkbox"]:checked::after, .hl-check__input[type="checkbox"]:indeterminate::after { content: ""; position: absolute; inset: 1px; background: var(--colorNeutralForegroundInverted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .hl-check__input[type="checkbox"]:indeterminate::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6c0-.41.34-.75.75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 2 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6c0-.41.34-.75.75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 2 6'/%3E%3C/svg%3E"); } .hl-check__input[type="radio"]:checked { border-color: var(--colorCompoundBrandStroke); } .hl-check__input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--borderRadiusCircular); background: var(--colorCompoundBrandForeground1); } .hl-check:has(.hl-check__input:disabled) { color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; } .hl-check__input:disabled { border-color: var(--colorNeutralStrokeDisabled); cursor: not-allowed; } .hl-check__input[type="checkbox"]:disabled:checked { background: transparent; border-color: var(--colorNeutralStrokeDisabled); } .hl-check__input[type="checkbox"]:disabled:checked::after { background: var(--colorNeutralForegroundDisabled); } .hl-check__input[type="radio"]:disabled:checked::after { background: var(--colorNeutralForegroundDisabled); } .hl-check__hint { display: block; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); } .hl-check-group { display: flex; flex-direction: column; } .hl-check-group--horizontal { flex-direction: row; flex-wrap: wrap; column-gap: var(--spacingHorizontalL); } /* ---------- Card (replaces Primer Box) ---------- */ /* HLogin skin: hairline + faint shadow (Fluent's borderless shadow4 card reads as Microsoft 365) */ .hl-card { display: flex; flex-direction: column; gap: var(--spacingVerticalM); padding: var(--spacingHorizontalL); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); box-shadow: var(--shadow2); min-width: 0; } ol.hl-card, ul.hl-card { margin: 0; list-style: none; } .hl-card--outline { box-shadow: none; } .hl-card--flush { padding: 0; gap: 0; overflow: hidden; } .hl-card--danger { box-shadow: none; border: var(--strokeWidthThin) solid var(--colorStatusDangerBorder1); } .hl-card--danger .hl-card__title { color: var(--colorStatusDangerForeground1); } .hl-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacingHorizontalM); } .hl-card--flush > .hl-card__header { padding: var(--spacingVerticalM) var(--spacingHorizontalL); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .hl-card__title { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); } .hl-card__description { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); margin-top: var(--spacingVerticalXXS); } .hl-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spacingHorizontalS); } .hl-card--flush > .hl-card__footer { padding: var(--spacingVerticalM) var(--spacingHorizontalL); border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground2); } .hl-card__row { display: flex; align-items: center; gap: var(--spacingHorizontalM); padding: var(--spacingVerticalM) var(--spacingHorizontalL); border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .hl-card--flush > .hl-card__row:first-child, .hl-card--flush > .hl-card__header + .hl-card__row { border-top: 0; } .hl-card__row--start { align-items: flex-start; } .hl-card__row--interactive { color: inherit; text-decoration: none; cursor: pointer; } .hl-card__row--interactive:hover { background: var(--colorNeutralBackground1Hover); text-decoration: none; color: inherit; } .hl-card__row-main { flex: 1 1 auto; min-width: 0; } .hl-card__row-title { font-weight: var(--fontWeightSemibold); } .hl-card__row-meta { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); } .hl-card__row > svg { color: var(--colorNeutralForeground3); } /* ---------- Table (replaces Primer markdown-body table in Users/*, #130) ---------- */ /* Fluent v9 Table metrics: 44px rows (medium), header in Foreground2 semibold, row dividers Stroke2. Put the table in hl-card hl-card--flush hl-table-wrap so wide tables scroll inside the card. */ .hl-table-wrap { overflow-x: auto; } .hl-table { width: 100%; border-collapse: collapse; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); } .hl-table th, .hl-table td { padding: var(--spacingVerticalS) var(--spacingHorizontalM); text-align: left; vertical-align: middle; } .hl-table thead th { height: 44px; color: var(--colorNeutralForeground2); font-weight: var(--fontWeightSemibold); white-space: nowrap; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .hl-table tbody td, .hl-table tbody th { height: 44px; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .hl-table tbody tr:first-child > * { border-top: 0; } .hl-table img + a, .hl-table img + span { margin-left: var(--spacingHorizontalXS); } .hl-table__nowrap { white-space: nowrap; } /* OS · browser marks from OSSvgIcons/BrowserSvgIcons (C#-built SVG without a fill — it would stay black in dark mode) */ .hl-ua-icon { display: inline-flex; color: var(--colorNeutralForeground2); } .hl-ua-icon > svg { width: 20px; height: 20px; fill: currentColor; } .hl-table__empty { padding: var(--spacingVerticalXXL) var(--spacingHorizontalL); text-align: center; color: var(--colorNeutralForeground3); } /* key/value table (one record): label column on the left */ .hl-table--details tbody th { width: 180px; color: var(--colorNeutralForeground3); font-weight: var(--fontWeightRegular); vertical-align: top; } .hl-table--details tbody td { vertical-align: top; word-break: break-all; } /* inside a card that already has padding (dashboard): flush to the card edges, smaller cells */ .hl-table--compact th, .hl-table--compact td { padding: var(--spacingVerticalSNudge) var(--spacingHorizontalS) var(--spacingVerticalSNudge) 0; } .hl-table--compact thead th, .hl-table--compact tbody td { height: auto; } /* ---------- PageHeader (replaces Primer Subhead) ---------- */ .hl-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacingVerticalS) var(--spacingHorizontalM); margin-bottom: var(--spacingVerticalXXL); } .hl-page-header__text { flex: 1 1 320px; min-width: 0; } .hl-page-header__title { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: var(--fontWeightSemibold); } .hl-page-header__description { margin-top: var(--spacingVerticalXS); color: var(--colorNeutralForeground3); } .hl-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalS); } .hl-section-header { margin: var(--spacingVerticalXXL) 0 var(--spacingVerticalM); } .hl-section-header__title { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); } .hl-section-header__description { margin-top: var(--spacingVerticalXXS); color: var(--colorNeutralForeground3); } /* ---------- MessageBar (replaces Primer flash) ---------- */ .hl-message-bar { display: flex; align-items: flex-start; gap: var(--spacingHorizontalS); min-height: 36px; padding: 6px var(--spacingHorizontalM); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); } .hl-message-bar > svg:first-child { width: 20px; height: 20px; margin-top: 1px; flex: none; fill: currentColor; color: var(--colorNeutralForeground3); } .hl-message-bar__body { flex: 1 1 auto; min-width: 0; } .hl-message-bar__body > * + * { margin-top: var(--spacingVerticalXS); } .hl-message-bar ul { margin: 0; padding-left: var(--spacingHorizontalXL); } .hl-message-bar__title { font-weight: var(--fontWeightSemibold); margin-right: var(--spacingHorizontalXS); } .hl-message-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingHorizontalS); margin: -1px 0; } .hl-message-bar--success { background: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); } .hl-message-bar--success > svg:first-child { color: var(--colorStatusSuccessForeground1); } .hl-message-bar--warning { background: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); } .hl-message-bar--warning > svg:first-child { color: var(--colorStatusWarningForeground3); } .hl-message-bar--error { background: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); } .hl-message-bar--error > svg:first-child { color: var(--colorStatusDangerForeground1); } .hl-message-bar--square { border-radius: 0; border-left: 0; border-right: 0; } /* ---------- Badge (replaces Primer Label) ---------- */ .hl-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacingHorizontalXXS); min-width: 20px; height: 20px; padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS)); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground4); color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); white-space: nowrap; vertical-align: middle; } .hl-badge > svg { width: 12px; height: 12px; fill: currentColor; } .hl-badge--brand { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); border-color: var(--colorBrandStroke2); } .hl-badge--success { background: var(--colorStatusSuccessBackground1); color: var(--colorStatusSuccessForeground1); border-color: var(--colorStatusSuccessBorder1); } .hl-badge--warning { background: var(--colorStatusWarningBackground1); color: var(--colorStatusWarningForeground3); border-color: var(--colorStatusWarningBorder1); } .hl-badge--danger { background: var(--colorStatusDangerBackground1); color: var(--colorStatusDangerForeground1); border-color: var(--colorStatusDangerBorder1); } .hl-badge--filled { background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); border-color: transparent; } .hl-badge--circular { border-radius: var(--borderRadiusCircular); } .hl-badge--small { min-width: 16px; height: 16px; padding: 0 calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS)); font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); } /* ---------- TabList (replaces Primer UnderlineNav) ---------- */ /* HLogin skin: the selected tab is a brand-tint pill, not Fluent's 3px underline */ .hl-tablist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingHorizontalXS); margin: 0 0 var(--spacingVerticalL); padding: 0; list-style: none; } .hl-tablist--divided { padding-bottom: var(--spacingVerticalS); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .hl-tab { position: relative; display: inline-flex; align-items: center; gap: var(--spacingHorizontalSNudge); min-height: 32px; padding: var(--spacingVerticalSNudge) var(--spacingHorizontalM); border: 0; border-radius: var(--borderRadiusCircular); background: transparent; color: var(--colorNeutralForeground2); font-family: inherit; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightMedium); text-decoration: none; white-space: nowrap; cursor: pointer; } .hl-tab > svg { width: 20px; height: 20px; fill: currentColor; color: var(--colorNeutralForeground3); } .hl-tab:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground2Hover); text-decoration: none; } .hl-tab:hover:active { background: var(--colorSubtleBackgroundPressed); } .hl-tab[aria-selected="true"], .hl-tab[aria-current="page"], .hl-tab.is-selected { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); font-weight: var(--fontWeightSemibold); } .hl-tab[aria-selected="true"] > svg, .hl-tab[aria-current="page"] > svg, .hl-tab.is-selected > svg { color: var(--colorBrandForeground2); } .hl-tab:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 1px; } .hl-tablist--small .hl-tab { min-height: 24px; padding: var(--spacingVerticalXXS) var(--spacingHorizontalS); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); } /* ---------- Spinner (replaces Primer anim-rotate) ---------- */ .hl-spinner { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); color: var(--colorNeutralForeground1); vertical-align: middle; } .hl-spinner--vertical { flex-direction: column; } .hl-spinner__ring { flex: none; width: 32px; height: 32px; border-radius: var(--borderRadiusCircular); border: var(--strokeWidthThicker) solid var(--colorBrandStroke2); border-top-color: var(--colorBrandStroke1); animation: hl-spin 1.5s linear infinite; } .hl-spinner--tiny .hl-spinner__ring { width: 20px; height: 20px; border-width: var(--strokeWidthThick); } .hl-spinner--small .hl-spinner__ring { width: 24px; height: 24px; border-width: var(--strokeWidthThick); } .hl-spinner--large .hl-spinner__ring { width: 40px; height: 40px; border-width: var(--strokeWidthThicker); } @keyframes hl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hl-spinner__ring { animation-duration: 3s; } } /* ---------- Avatar ---------- */ .hl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--borderRadiusCircular); overflow: hidden; background: var(--colorNeutralBackground6); color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase300); line-height: 1; font-weight: var(--fontWeightSemibold); vertical-align: middle; user-select: none; } .hl-avatar > img { width: 100%; height: 100%; object-fit: cover; } .hl-avatar > svg { width: 20px; height: 20px; fill: currentColor; } .hl-avatar--brand { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); } .hl-avatar--24 { width: 24px; height: 24px; font-size: var(--fontSizeBase100); } .hl-avatar--24 > svg { width: 16px; height: 16px; } .hl-avatar--40 { width: 40px; height: 40px; font-size: var(--fontSizeBase400); } .hl-avatar--56 { width: 56px; height: 56px; font-size: var(--fontSizeBase500); } .hl-avatar--56 > svg { width: 28px; height: 28px; } /* ---------- My applications: view switch + cards/tiles (#208) ---------- */ /* /Users/Apps — list view is plain hl-card__row; cards and tiles are a grid of whole-item links (hl-app-card / hl-app-tile) with an initial in an hl-avatar (apps have no logo field). A link-less app keeps the shape as a --disabled box. */ .hl-apps-switch { margin: 0; } /* centred wrap (#249): a handful of apps sits in the middle instead of hugging the left edge. Flex, not grid — grid's auto-fit counts columns by the track maximum, so capping the width there also cut how many fit per row. Here the basis (minimum) decides the count, items grow up to max-width, and what is left of a row is split around it. */ .hl-apps-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacingHorizontalM); margin: 0; padding: 0; list-style: none; } .hl-apps-grid > li { display: flex; min-width: 0; } .hl-apps-grid--cards > li { flex: 1 1 260px; max-width: 320px; } .hl-apps-grid--tiles > li { flex: 1 1 128px; max-width: 160px; } .hl-app-card, .hl-app-tile { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--spacingHorizontalM); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); box-shadow: var(--shadow2); color: var(--colorNeutralForeground1); text-decoration: none; } a.hl-app-card:hover, a.hl-app-tile:hover { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground1); text-decoration: none; } a.hl-app-card:hover:active, a.hl-app-tile:hover:active { background: var(--colorNeutralBackground1Pressed); } .hl-app-card:focus-visible, .hl-app-tile:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; } .hl-app-card--disabled, .hl-app-tile--disabled { color: var(--colorNeutralForeground3); background: var(--colorNeutralBackground2); box-shadow: none; } .hl-app-card { align-items: flex-start; padding: var(--spacingVerticalL) var(--spacingHorizontalL); } .hl-app-card__text { display: flex; flex-direction: column; gap: var(--spacingVerticalXXS); min-width: 0; } .hl-app-card__name { font-weight: var(--fontWeightSemibold); overflow-wrap: anywhere; } .hl-app-card__description { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); overflow-wrap: anywhere; } .hl-app-tile { flex-direction: column; align-items: center; justify-content: center; gap: var(--spacingVerticalS); min-height: 112px; padding: var(--spacingVerticalM) var(--spacingHorizontalS); text-align: center; } .hl-app-tile__text { min-width: 0; max-width: 100%; } .hl-app-tile__name { display: block; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); overflow-wrap: anywhere; } @media (max-width: 479.98px) { .hl-apps-grid--cards > li { flex-basis: 100%; max-width: none; } .hl-apps-grid--tiles { gap: var(--spacingHorizontalS); } .hl-apps-grid--tiles > li { flex-basis: 96px; max-width: 120px; } } /* ---------- EmptyState (replaces Primer blankslate) ---------- */ .hl-empty { display: flex; flex-direction: column; align-items: center; gap: var(--spacingVerticalS); padding: var(--spacingVerticalXXXL) var(--spacingHorizontalXXL); text-align: center; } .hl-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--spacingVerticalXS); border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground4); color: var(--colorNeutralForeground3); } .hl-empty__icon > svg { width: 24px; height: 24px; fill: currentColor; } .hl-empty__title { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); } .hl-empty__description { max-width: 420px; color: var(--colorNeutralForeground3); } .hl-empty__actions { margin-top: var(--spacingVerticalS); display: flex; gap: var(--spacingHorizontalS); } /* ---------- Pagination (Fluent has none: subtle buttons in a row) ---------- */ .hl-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacingHorizontalXS); margin: var(--spacingVerticalL) 0 0; padding: 0; list-style: none; } .hl-pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--spacingHorizontalS); border: var(--strokeWidthThin) solid transparent; border-radius: var(--borderRadiusMedium); color: var(--colorNeutralForeground2); background: transparent; text-decoration: none; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); } .hl-pagination__item > svg { width: 20px; height: 20px; fill: currentColor; } a.hl-pagination__item:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground2Hover); text-decoration: none; } a.hl-pagination__item:hover:active { background: var(--colorSubtleBackgroundPressed); } .hl-pagination__item[aria-current="page"] { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); font-weight: var(--fontWeightSemibold); } .hl-pagination__item[aria-disabled="true"] { color: var(--colorNeutralForegroundDisabled); cursor: not-allowed; } .hl-pagination__gap { color: var(--colorNeutralForeground3); padding: 0 var(--spacingHorizontalXS); } /* ---------- Menu (replaces Primer dropdown-menu) ---------- */ .hl-menu { min-width: 138px; max-width: 300px; width: max-content; padding: 4px; border: var(--strokeWidthThin) solid transparent; border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); box-shadow: var(--shadow16); display: flex; flex-direction: column; } [data-theme="dark"] .hl-menu { border-color: var(--colorNeutralStroke3); } .hl-menu--anchored { position: absolute; top: calc(100% + var(--spacingVerticalXS)); right: 0; z-index: 100; } .hl-menu__item { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 32px; max-width: 290px; padding: var(--spacingVerticalSNudge); border: 0; border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground2); font-family: inherit; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); text-align: left; text-decoration: none; cursor: pointer; } .hl-menu__item > span { padding: 0 2px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-menu__item > svg { width: 20px; height: 20px; flex: none; fill: currentColor; } .hl-menu__item:hover { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground2Hover); text-decoration: none; } .hl-menu__item:hover > svg { color: var(--colorNeutralForeground2BrandSelected); } .hl-menu__item:hover:active { background: var(--colorNeutralBackground1Pressed); } .hl-menu__item:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: -2px; } .hl-menu__item--danger { color: var(--colorStatusDangerForeground1); } .hl-menu__item--danger:hover { color: var(--colorStatusDangerForeground1); } .hl-menu__item--danger:hover > svg { color: var(--colorStatusDangerForeground1); } .hl-menu__header { padding: var(--spacingVerticalSNudge) 8px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground3); } .hl-menu__identity { display: flex; align-items: center; gap: var(--spacingHorizontalS); padding: var(--spacingVerticalS); } .hl-menu__identity-text { min-width: 0; } .hl-menu__identity-name { font-weight: var(--fontWeightSemibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-menu__identity-sub { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-menu__divider { height: 1px; margin: 4px -5px; border: 0; background: var(--colorNeutralStroke2); flex: none; } /* 강조 색 메뉴(#165) — 견본 원은 자기 data-brand 의 램프(80·100 반반)로 칠해진다. 고른 항목은 aria-checked 와 체크 표시. 견본은 .hl-menu__item > span(글자 칸, flex:1·padding)과 겹치므로 두 클래스 선택자로 그 규칙을 이긴다. */ .hl-menu__item > .hl-accent-swatch { width: 16px; height: 16px; margin: 0 4px 0 2px; padding: 0; border-radius: var(--borderRadiusCircular); flex: none; background: linear-gradient(135deg, var(--brand-80) 50%, var(--brand-100) 50%); box-shadow: inset 0 0 0 var(--strokeWidthThin) var(--colorNeutralStroke1); } .hl-menu__item--accent > svg, .hl-menu__item--accent:hover > svg { visibility: hidden; color: var(--colorBrandForeground1); } .hl-menu__item--accent[aria-checked="true"] { font-weight: var(--fontWeightSemibold); } .hl-menu__item--accent[aria-checked="true"] > svg { visibility: visible; } /* 언어 메뉴(#206, Shared/_LanguageSelector) — 고른 언어는 aria-current 와 체크 표시. 폼이 메뉴 항목을 감싸므로 폼도 세로로 쌓는다. */ .hl-lang--menu { display: flex; flex-direction: column; margin: 0; } .hl-menu__item--lang > svg, .hl-menu__item--lang:hover > svg { visibility: hidden; color: var(--colorBrandForeground1); } .hl-menu__item--lang[aria-current="true"] { font-weight: var(--fontWeightSemibold); } .hl-menu__item--lang[aria-current="true"] > svg { visibility: visible; } /* ---------- TopBar (replaces Primer Header) ---------- */ .hl-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--spacingHorizontalS); height: var(--hlHeaderHeight); padding: 0 var(--spacingHorizontalM); background: var(--hlHeaderBackground); color: var(--hlHeaderForeground); border-bottom: var(--strokeWidthThin) solid var(--hlHeaderStroke); } .hl-topbar__brand { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); min-width: 0; color: inherit; text-decoration: none; } .hl-topbar__brand:hover { color: inherit; text-decoration: none; } .hl-topbar__logo { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--spacingHorizontalS); border-radius: var(--borderRadiusMedium); background: var(--hlLogoPlate); } .hl-topbar__logo > img { max-height: 24px; max-width: 120px; object-fit: contain; } /* HLogin 심볼(#139) — 테라코타 원이라 흰 표면·다크 표면 모두에서 윤곽이 서므로 반전 심볼로 바꾸지 않는다. */ .hl-topbar__symbol { flex: none; width: 24px; height: 24px; } .hl-topbar__product { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); white-space: nowrap; } .hl-topbar__spacer { flex: 1 1 auto; } .hl-topbar__button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacingHorizontalS); min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--borderRadiusMedium); background: transparent; color: var(--colorNeutralForeground2); cursor: pointer; font-family: inherit; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightSemibold); } .hl-topbar__button > svg { width: 20px; height: 20px; fill: currentColor; flex: none; } .hl-topbar__button:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground2Hover); } .hl-topbar__button:hover:active { background: var(--colorSubtleBackgroundPressed); } .hl-topbar__button:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: -2px; } .hl-topbar__user { max-width: 240px; padding: 0 var(--spacingHorizontalXS); } .hl-topbar__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-topbar__menu { position: relative; } /* theme toggle (data-hl-theme-cycle): the icon shows the theme a click moves towards — moon on light, sun on dark */ .hl-topbar__theme-dark { display: none; } [data-theme="dark"] .hl-topbar__theme-light { display: none; } [data-theme="dark"] .hl-topbar__theme-dark { display: inline-flex; } /* ---------- NavMenu (sidebar; replaces Primer ActionList in Layout-sidebar) ---------- */ /* HLogin skin: page-coloured sidebar, current item = brand-tint pill (no Fluent 4×20 indicator bar) */ .hl-nav { display: flex; flex-direction: column; gap: 2px; width: var(--hlNavWidth); padding: var(--spacingVerticalS) var(--spacingHorizontalM); background: var(--hlNavBackground); border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke2); overflow-y: auto; } .hl-nav__section { margin: var(--spacingVerticalL) 0 var(--spacingVerticalXS) 10px; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground3); } .hl-nav__section:first-child { margin-top: var(--spacingVerticalXS); } .hl-nav__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .hl-nav__item { position: relative; display: flex; align-items: center; gap: var(--spacingHorizontalS); width: 100%; padding: var(--spacingVerticalS) var(--spacingHorizontalM); border: 0; border-radius: var(--borderRadiusLarge); background: transparent; color: var(--colorNeutralForeground2); font-family: inherit; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightMedium); text-align: left; text-decoration: none; cursor: pointer; } .hl-nav__item > svg { width: 20px; height: 20px; flex: none; fill: currentColor; color: var(--colorNeutralForeground3); } .hl-nav__item:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); text-decoration: none; } .hl-nav__item:hover:active { background: var(--colorSubtleBackgroundPressed); } .hl-nav__item:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: calc(var(--strokeWidthThick) * -1); } .hl-nav__item[aria-current="page"] { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); font-weight: var(--fontWeightSemibold); } .hl-nav__item[aria-current="page"] > svg { color: var(--colorBrandForeground2); } .hl-nav__item-external { margin-left: auto; color: var(--colorNeutralForeground3); } .hl-nav__divider { height: 1px; margin: var(--spacingVerticalS) var(--spacingHorizontalXS); background: var(--colorNeutralStroke2); border: 0; } /* ---------- AppShell (replaces Primer Layout + Layout-sidebar, _Layout.cshtml) ---------- */ .hl-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--colorNeutralBackground2); } .hl-app__body { flex: 1 1 auto; display: flex; min-height: 0; } .hl-app__body > .hl-nav { flex: none; position: sticky; top: var(--hlHeaderHeight); height: calc(100vh - var(--hlHeaderHeight)); } .hl-app__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXXL); } /* content grows so a short page still puts .hl-app__footer at the bottom of the viewport. Left-aligned next to the nav (not centred) so a wide screen does not push the page away from the menu (#166). */ .hl-app__content { flex: 1 0 auto; width: 100%; max-width: var(--hlContentMaxWidth); margin: 0; } .hl-app__content--form { max-width: var(--hlFormMaxWidth); } .hl-app__footer { padding: var(--spacingVerticalXXL) 0 var(--spacingVerticalL); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); } .hl-app__scrim { display: none; } .hl-app__nav-toggle { display: none; } @media (max-width: 1023.98px) { .hl-app__nav-toggle { display: inline-flex; } .hl-app__main { padding: var(--spacingVerticalL); } .hl-app__body > .hl-nav { position: fixed; top: var(--hlHeaderHeight); left: 0; bottom: 0; height: auto; z-index: 40; transform: translateX(-100%); transition: transform var(--durationNormal) var(--curveDecelerateMid); box-shadow: var(--shadow16); border-right: 0; } .hl-app.is-nav-open .hl-app__body > .hl-nav { transform: none; } body:has(> .hl-app.is-nav-open) { overflow: hidden; } .hl-app.is-nav-open .hl-app__scrim { display: block; position: fixed; inset: var(--hlHeaderHeight) 0 0 0; z-index: 30; background: var(--colorBackgroundOverlay); } } /* ---------- LoginCard (anonymous / interim pages, _AccountLayout2.cshtml) ---------- */ .hl-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacingVerticalL); padding: var(--spacingVerticalXXL) var(--spacingHorizontalL); background: var(--colorNeutralBackground3); } .hl-login__card { width: 100%; max-width: var(--hlLoginCardWidth); display: flex; flex-direction: column; gap: var(--spacingVerticalXXL); padding: var(--spacingVerticalXXXL); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); box-shadow: var(--shadow16); } .hl-login__logo { display: flex; align-items: center; min-height: 40px; } .hl-login__logo > img { max-height: 40px; max-width: 180px; object-fit: contain; } .hl-login__heading { display: flex; flex-direction: column; gap: var(--spacingVerticalXS); } .hl-login__title { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); font-weight: var(--fontWeightSemibold); } .hl-login__description { color: var(--colorNeutralForeground3); } .hl-login__identity { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); padding: var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalXS); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusCircular); max-width: 100%; align-self: flex-start; } .hl-login__identity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-login__divider { display: flex; align-items: center; gap: var(--spacingHorizontalM); color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); } .hl-login__divider::before, .hl-login__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--colorNeutralStroke2); } .hl-login__footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacingHorizontalS) var(--spacingHorizontalL); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); } .hl-login__footer a { color: var(--colorNeutralForeground2); } .hl-login__footer a:hover { color: var(--colorNeutralForeground2Hover); } /* 언어 선택기(#206, Shared/_LanguageSelector) — 푸터 글자 크기 그대로, 링크처럼 보이는 제출 버튼. */ .hl-lang { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacingHorizontalXS); margin: 0; } .hl-lang__option { padding: 0; border: 0; background: none; font: inherit; color: var(--colorNeutralForeground2); cursor: pointer; } .hl-lang__option:hover { color: var(--colorNeutralForeground2Hover); text-decoration: underline; } .hl-lang__option:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; border-radius: var(--borderRadiusSmall); } .hl-lang__option[aria-current="true"] { font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1); } @media (max-width: 479.98px) { .hl-login { justify-content: flex-start; padding: 0; background: var(--colorNeutralBackground1); } .hl-login__card { max-width: none; box-shadow: none; border-radius: 0; padding: var(--spacingVerticalXXL) var(--spacingHorizontalL); } .hl-login__footer { padding: 0 var(--spacingHorizontalL) var(--spacingVerticalXXL); } } /* number to match on the phone (2FA push, mobile sign-in, password-reset push) */ .hl-login__number { font-size: var(--fontSizeHero1000); line-height: var(--lineHeightHero1000); font-weight: var(--fontWeightSemibold); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; text-align: center; } /* enrollment PIN typed into the app */ .hl-login__pin { font-family: var(--font-mono); font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); font-weight: var(--fontWeightBold); letter-spacing: 0.2em; color: var(--colorBrandForeground1); text-align: center; } /* QR codes stay dark-on-white in both themes — scanners need the contrast */ .hl-qr { display: inline-block; padding: var(--spacingVerticalS); line-height: 0; border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); background: var(--hlLogoPlate); } .hl-stack--center { align-items: center; text-align: center; } /* a wrapping row inside a centered column stays centered when it breaks onto two lines (device enrollment store links) */ .hl-stack--center > .hl-cluster { justify-content: center; } .hl-login__card .hl-tablist { margin-bottom: 0; } /* error pages (Shared/Error, Misc/OidcError, #133): the status code above the title */ .hl-login__code { font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground3); } /* an input with a trailing button on the same line (copy the request id) */ .hl-input-group { display: flex; align-items: center; gap: var(--spacingHorizontalS); } .hl-input-group > .hl-input { flex: 1 1 auto; } .hl-input--mono { font-family: var(--font-mono); font-size: var(--fontSizeBase200); } /* copy button icons swapped by hl-app.js (data-hl-copy-idle / data-hl-copy-done) */ .hl-copy-icon { display: inline-flex; } /* ---------- Standalone pages (no layout: Account/UiSelector, Misc/BrowserInfo, #133) ---------- */ .hl-standalone { max-width: var(--hlContentMaxWidth); margin: 0 auto; padding: var(--spacingVerticalXXXL) var(--spacingHorizontalXXL); } @media (max-width: 559.98px) { .hl-standalone { padding: var(--spacingVerticalXXL) var(--spacingHorizontalL); } } /* sign-in variant cards (UiSelector): the current one is outlined in brand, like the current sidebar item is tinted */ .hl-variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacingHorizontalXL); } .hl-variant[aria-current="true"] { border-color: var(--colorBrandStroke1); box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorBrandStroke1); } .hl-variant__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--colorNeutralBackground3); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); } .hl-variant__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--spacingVerticalS); padding: var(--spacingVerticalL) var(--spacingHorizontalL); } .hl-variant > .hl-card__footer { margin: 0; } /* MVC asp-validation-summary — the tag helper renders .validation-summary-errors|-valid around a