/* Kit-wide styles that cannot live in CSS isolation (MudBlazor overrides, tone helpers, floor base). Tokens only - no raw values. Loaded after MudBlazor.min.css and tokens.css. */ /* ---------- Tone helpers usable on any element ---------- */ .fm-tone-neutral { --tone: var(--fm-neutral); --tone-soft: var(--fm-neutral-soft); --tone-text: var(--fm-neutral-text); } .fm-tone-primary { --tone: var(--fm-primary); --tone-soft: var(--fm-primary-soft); --tone-text: var(--fm-primary-text); } .fm-tone-info { --tone: var(--fm-info); --tone-soft: var(--fm-info-soft); --tone-text: var(--fm-info-text); } .fm-tone-success { --tone: var(--fm-success); --tone-soft: var(--fm-success-soft); --tone-text: var(--fm-success-text); } .fm-tone-warning { --tone: var(--fm-warning); --tone-soft: var(--fm-warning-soft); --tone-text: var(--fm-warning-text); } .fm-tone-danger { --tone: var(--fm-danger); --tone-soft: var(--fm-danger-soft); --tone-text: var(--fm-danger-text); } /* ---------- MudBlazor surface overrides so Mud components follow the tokens ---------- */ .mud-paper { border-radius: var(--fm-radius-lg); } .mud-dialog { border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow-3); } .mud-dialog-title { font-size: var(--fm-fs-lg); font-weight: var(--fm-fw-semibold); } /* The hairline is a shadow ring, NOT a border: MudBlazor caps the popover and the list inside it at the same max-height, so 2 px of border makes the popover overflow by 2 px and draw a second scrollbar beside the list's real one. A box-shadow takes no layout space, so the list is the only thing that ever scrolls. */ .mud-popover { border-radius: var(--fm-radius-md); box-shadow: 0 0 0 1px var(--fm-border), var(--fm-shadow-2); } .mud-menu-list .mud-list-item { border-radius: var(--fm-radius-sm); margin: 2px var(--fm-space-1); } /* An autocomplete always highlights the row Enter would pick, and MudBlazor paints that row with its SELECTED look (primary text on a primary tint) - so an empty, required field looks as if the first record were already chosen. Keep the affordance, drop the false claim: the active row reads like a hover. A MudSelect keeps the blue, because there the highlighted item genuinely IS the current value. */ /* !important because MudBlazor sets .mud-primary-text / .mud-primary-hover that way; specificity alone loses. */ .erp-lookup__popover .mud-list-item.mud-selected-item { background-color: var(--fm-surface-2) !important; } .erp-lookup__popover .mud-list-item.mud-selected-item, .erp-lookup__popover .mud-list-item.mud-selected-item .mud-typography { color: var(--fm-text) !important; } .mud-input-control .mud-input-outlined { border-radius: var(--fm-radius-sm); } /* A field reads as somewhere you can TYPE, not as a patch of the page it sits on - see --fm-field-bg. The fill goes on .mud-input (the bordered box), never on .mud-input-control, which also wraps the label and helper text. */ .mud-input-control .mud-input.mud-input-outlined { background-color: var(--fm-field-bg); } /* Mud's own rule is .mud-input.mud-input-outlined .mud-input-outlined-border: match its shape so ours wins on source order. */ .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--fm-field-border); } .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--fm-field-border-hover); } /* A switched-off control must not look like one you can use: the greyness IS the message (the same call as the disabled button label). So a disabled field keeps the page's own ground and only its border remains. */ .mud-input-control .mud-input.mud-input-outlined.mud-disabled { background-color: transparent; } .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border { border-color: var(--fm-border); } .mud-input-label { font-weight: var(--fm-fw-medium); } .mud-input-helper-text { font-size: var(--fm-fs-xs); } .mud-chip { border-radius: var(--fm-radius-full); font-weight: var(--fm-fw-medium); } .mud-tabs .mud-tab { text-transform: none; font-weight: var(--fm-fw-medium); color: var(--fm-text-2); min-width: 0; } .mud-tabs .mud-tab.mud-tab-active { color: var(--fm-text); } .mud-tabs .mud-tab-slider { height: 2px; border-radius: var(--fm-radius-full); } .mud-table { border-radius: var(--fm-radius-lg); } .mud-table-head .mud-table-cell { font-size: var(--fm-fs-xs); font-weight: var(--fm-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fm-text-2); background: var(--fm-surface-2); } .mud-table-cell { padding: var(--fm-space-2) var(--fm-space-3); } .mud-table-row:hover .mud-table-cell { background: var(--fm-surface-2); } .mud-snackbar { border-radius: var(--fm-radius-md); box-shadow: var(--fm-shadow-2); } .mud-tooltip { border-radius: var(--fm-radius-sm); font-size: var(--fm-fs-xs); } /* The sidebar. Scoped to .erp-nav on purpose: MudBlazor's own nested-menu rules carry four classes, so an unscoped .mud-nav-group .mud-collapse-container .mud-nav-link would lose to them. */ .erp-nav .mud-nav-link { border-radius: var(--fm-radius-sm); margin: 1px var(--fm-space-3); padding: 6px var(--fm-space-3); color: var(--fm-text-2); font-weight: var(--fm-fw-medium); } .erp-nav .mud-nav-link .mud-icon-root { color: var(--fm-text-3); font-size: 1.25rem; } .erp-nav .mud-nav-link:hover { background: var(--fm-surface-2); color: var(--fm-text); } .erp-nav .mud-nav-link.active { background: var(--fm-surface-3); color: var(--fm-text); font-weight: var(--fm-fw-semibold); } .erp-nav .mud-nav-link.active .mud-icon-root { color: var(--fm-primary); } /* Children of a nav group are indented under a hairline that traces the group. */ .erp-nav .mud-nav-group .mud-collapse-container { position: relative; } .erp-nav .mud-nav-group .mud-collapse-container::before { content: ""; position: absolute; left: 21px; top: 2px; bottom: 2px; width: 1px; background: var(--fm-border); } .erp-nav .mud-nav-group .mud-collapse-container .mud-nav-link { margin-left: 0; padding: 5px var(--fm-space-3) 5px 50px; font-size: var(--fm-fs-sm); font-weight: var(--fm-fw-regular); } .erp-nav .mud-nav-group .mud-collapse-container .mud-nav-link.active { font-weight: var(--fm-fw-medium); } .erp-nav .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon { color: var(--fm-text-3); } /* Task-oriented section labels above the modules they group (ErpNavMenu renders them). */ .erp-nav .erp-nav__section { display: block; padding: var(--fm-space-4) var(--fm-space-3) var(--fm-space-1); font-size: var(--fm-fs-2xs); font-weight: var(--fm-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fm-text-3); white-space: nowrap; overflow: hidden; } .erp-nav .erp-nav__section:first-child { padding-top: var(--fm-space-2); } .mud-drawer { border-right: 1px solid var(--fm-border); } .mud-appbar { box-shadow: none; border-bottom: 1px solid var(--fm-border); } .mud-drawer-content, .mud-main-content { min-width: 0; } /* ---------- Kit components whose root is a Mud component (CSS isolation cannot reach them) ---------- */ .erp-btn { border-radius: var(--fm-radius-sm); text-transform: none; font-weight: var(--fm-fw-medium); letter-spacing: 0; box-shadow: none; transition: background var(--fm-motion-fast) var(--fm-ease), box-shadow var(--fm-motion-fast) var(--fm-ease); } .erp-btn:hover { box-shadow: none; } .erp-btn--primary { font-weight: var(--fm-fw-semibold); } .erp-btn--secondary { border-color: var(--fm-border-strong); color: var(--fm-text); background: var(--fm-surface); } .erp-btn--secondary:hover { background: var(--fm-surface-2); } .erp-btn--ghost { color: var(--fm-text-2); } .erp-btn--ghost:hover { background: var(--fm-surface-3); color: var(--fm-text); } .erp-btn__spinner { margin-right: var(--fm-space-2); } .erp-shell__appbar { background: var(--fm-surface); color: var(--fm-text); border-bottom: 1px solid var(--fm-border); height: var(--fm-topbar-h); } .erp-shell__appbar .mud-toolbar { min-height: var(--fm-topbar-h); gap: var(--fm-space-2); padding: 0 var(--fm-space-3); } .erp-shell__drawer { background: var(--fm-surface); border-right: 1px solid var(--fm-border); } .erp-shell__drawer .mud-drawer-content { display: flex; flex-direction: column; } .erp-shell__main { background: var(--fm-bg); min-height: 100vh; } /* Collapsed (mini) sidebar: icons only. MudBlazor's own rule needs the nav menu as a direct child of the drawer content; ours sits inside .erp-shell__nav, so the collapsed state is styled here. */ .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link { justify-content: center; padding: var(--fm-space-2) 0; margin: 1px var(--fm-space-1); } .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-nav-link-text, .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-nav-link-expand-icon, .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-group .mud-collapse-container, .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .erp-shell__version, .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .erp-nav__section { display: none; } .erp-shell__drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-icon-root { margin: 0; } .erp-shell__menu-danger { color: var(--fm-danger-text); } .erp-menu__danger, .erp-menu__danger .mud-icon-root { color: var(--fm-danger-text); } /* ---------- Static (SSR) forms: sign-in and other account pages ---------- */ .fm-form { display: flex; flex-direction: column; gap: var(--fm-space-4); } .fm-field { display: flex; flex-direction: column; gap: var(--fm-space-1); } .fm-field__label { font-size: var(--fm-fs-xs); font-weight: var(--fm-fw-medium); color: var(--fm-text-2); } /* Helper line under a static-form field (sign-in family). Readable ink, not the muted tone: it carries a rule the person must meet. */ .fm-field__hint { font-size: var(--fm-fs-xs); color: var(--fm-text-2); } /* A link inside the static-form family. Without it the browser's own dark blue lands on the dark card at 1.08:1 (measured 2026-09-17 on the change-password page) - invisible, while passing in light theme by luck. */ .fm-link { color: var(--fm-primary-text); text-decoration: underline; text-underline-offset: 2px; } .fm-link:hover { text-decoration-thickness: 2px; } .fm-input { height: 44px; padding: 0 var(--fm-space-3); border-radius: var(--fm-radius-sm); border: 1px solid var(--fm-field-border); /* The SSR sign-in form is a SECOND form system - it uses no MudBlazor at all - so the field tokens have to be applied here by hand or the first screen anybody sees is the one that misses the change. It needed it most: measured 2026-09-09, .fm-input painted --fm-surface on a card that IS --fm-surface, so the fill difference was exactly 1.00:1 and the border was the only thing saying "type here". */ background: var(--fm-field-bg); color: var(--fm-text); font: inherit; font-size: var(--fm-fs-md); transition: border-color var(--fm-motion-fast) var(--fm-ease), box-shadow var(--fm-motion-fast) var(--fm-ease); } /* The placeholder has to be stated, not left to the user agent. On white the browser's default grey measured 5.2:1 and passed by luck; on --fm-field-bg it fell to 3.82:1 light / 3.58:1 dark - a regression the field fill introduced and one NOTHING would have caught, because ::placeholder is a pseudo-element with no text node and `npm run audit` only measures elements that have one. 6.1:1 light, 6.8:1 dark, and still plainly lighter than the 13.7:1 of what you type. */ .fm-input::placeholder { color: var(--fm-text-2); opacity: 1; } .fm-input:hover { border-color: var(--fm-field-border-hover); } /* After :hover, so focus wins on source order - they have the same specificity. */ .fm-input:focus { outline: none; border-color: var(--fm-primary); box-shadow: 0 0 0 3px var(--fm-focus-ring); } .fm-check { display: flex; align-items: center; gap: var(--fm-space-2); font-size: var(--fm-fs-sm); color: var(--fm-text-2); } .fm-check input { width: 16px; height: 16px; accent-color: var(--fm-primary); } .fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fm-space-2); height: 44px; padding: 0 var(--fm-space-5); border-radius: var(--fm-radius-sm); border: 1px solid transparent; font: inherit; font-size: var(--fm-fs-sm); font-weight: var(--fm-fw-semibold); cursor: pointer; transition: filter var(--fm-motion-fast) var(--fm-ease); } .fm-btn--primary { background: var(--fm-primary); color: var(--fm-primary-contrast); } .fm-btn--primary:hover { filter: brightness(1.05); } .fm-btn--block { width: 100%; } .fm-alert { padding: var(--fm-space-3) var(--fm-space-4); border-radius: var(--fm-radius-sm); font-size: var(--fm-fs-sm); border: 1px solid var(--tone, var(--fm-info)); background: var(--tone-soft, var(--fm-info-soft)); color: var(--fm-text); } .fm-validation { color: var(--fm-danger-text); font-size: var(--fm-fs-xs); } .fm-demo-logins { margin-top: var(--fm-space-6); padding: var(--fm-space-4); border-radius: var(--fm-radius-md); background: var(--fm-surface-2); border: 1px dashed var(--fm-border-strong); font-size: var(--fm-fs-xs); color: var(--fm-text-2); } .fm-demo-logins code { font-family: var(--fm-font-mono); color: var(--fm-text); } .fm-demo-logins table { border-collapse: collapse; width: 100%; margin-top: var(--fm-space-2); } .fm-demo-logins td { padding: 2px var(--fm-space-2) 2px 0; } /* ---------- Generic list rows inside cards (settings lists, simple tables without a grid) ---------- */ .fm-list { display: flex; flex-direction: column; } .fm-list-row { display: flex; align-items: center; gap: var(--fm-space-3); padding: var(--fm-space-3) var(--fm-space-5); border-bottom: 1px solid var(--fm-border); transition: background var(--fm-motion-fast) var(--fm-ease); } .fm-list-row:last-child { border-bottom: 0; } .fm-list-row--clickable { cursor: pointer; } .fm-list-row--clickable:hover { background: var(--fm-primary-soft); } .fm-list-row__title { font-weight: var(--fm-fw-medium); } .fm-switch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--fm-space-1) var(--fm-space-4); } .fm-code { display: block; padding: var(--fm-space-3); border-radius: var(--fm-radius-sm); background: var(--fm-surface-3); font-family: var(--fm-font-mono); font-size: var(--fm-fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; } /* ---------- Scrollbars ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--fm-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--fm-border-strong); border-radius: var(--fm-radius-full); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* ---------- Floor (tablet) base ---------- */ .fm-floor { font-size: var(--fm-floor-fs-sm); -webkit-user-select: none; user-select: none; touch-action: manipulation; } .fm-floor .mud-button-root, .fm-floor .mud-input-control, .fm-floor .mud-select { min-height: var(--fm-floor-target); font-size: var(--fm-floor-fs-sm); } .fm-floor .mud-input-outlined .mud-input-outlined-border { border-width: 2px; } /* ---------- Floor PIN sign-in (static SSR page; child markup lives in the Web page) ---------- */ .floor-login { min-height: 100vh; display: flex; flex-direction: column; background: var(--fm-bg); color: var(--fm-text); } .floor-login__bar { display: flex; align-items: center; gap: var(--fm-space-4); height: var(--fm-floor-bar-h, 56px); padding: 0 var(--fm-space-5); background: var(--fm-surface); border-bottom: 1px solid var(--fm-border); } .floor-login__brand { display: flex; align-items: center; gap: var(--fm-space-2); font-weight: var(--fm-fw-bold); font-size: var(--fm-fs-md); } .floor-login__company { color: var(--fm-text-2); font-size: var(--fm-fs-sm); } .floor-login__back { margin-left: auto; color: var(--fm-text-2); font-size: var(--fm-fs-sm); text-decoration: none; } .floor-login__back:hover { color: var(--fm-primary); } .floor-login__body { flex: 1 1 auto; width: 100%; max-width: 960px; margin: 0 auto; padding: var(--fm-space-6) var(--fm-space-5); display: flex; flex-direction: column; align-items: center; gap: var(--fm-space-4); } .floor-login__title { margin: 0; font-size: var(--fm-floor-fs-lg, 28px); font-weight: var(--fm-fw-bold); text-align: center; } .floor-login__subtitle { margin: 0; color: var(--fm-text-2); font-size: var(--fm-floor-fs-sm); text-align: center; } .floor-login__error { display: flex; align-items: center; gap: var(--fm-space-2); padding: var(--fm-space-3) var(--fm-space-4); border-radius: var(--fm-radius-md); background: var(--fm-danger-soft); color: var(--fm-danger); font-weight: var(--fm-fw-semibold); } .floor-login__operators { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--fm-space-4); } .floor-login__tile { display: flex; flex-direction: column; align-items: center; gap: var(--fm-space-2); min-height: 132px; padding: var(--fm-space-4); border-radius: var(--fm-radius-lg); border: 2px solid var(--fm-border); background: var(--fm-surface); color: var(--fm-text); text-decoration: none; transition: border-color var(--fm-motion-fast) var(--fm-ease), transform var(--fm-motion-fast) var(--fm-ease); } .floor-login__tile:hover, .floor-login__tile:focus-visible { border-color: var(--fm-primary); transform: translateY(-2px); outline: none; } .floor-login__avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--fm-radius-full); background: var(--fm-primary-soft); color: var(--fm-primary); font-weight: var(--fm-fw-bold); font-size: var(--fm-fs-lg); } .floor-login__tile-name { font-weight: var(--fm-fw-semibold); font-size: var(--fm-floor-fs-sm); text-align: center; } .floor-login__tile-code { color: var(--fm-text-3); font-family: var(--fm-font-mono); font-size: var(--fm-fs-xs); } .floor-login__form { display: flex; flex-direction: column; align-items: center; gap: var(--fm-space-4); width: 100%; max-width: 360px; } .floor-login__pin { width: 100%; height: 72px; text-align: center; font-size: 40px; letter-spacing: 0.4em; font-family: var(--fm-font-mono); border-radius: var(--fm-radius-lg); border: 2px solid var(--fm-border-strong); background: var(--fm-surface); color: var(--fm-text); } .floor-login__pin:focus { outline: none; border-color: var(--fm-primary); box-shadow: 0 0 0 4px var(--fm-focus-ring); } .floor-login__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fm-space-3); width: 100%; } .floor-login__key { height: 72px; border-radius: var(--fm-radius-lg); border: 2px solid var(--fm-border); background: var(--fm-surface); color: var(--fm-text); font-size: 28px; font-weight: var(--fm-fw-semibold); cursor: pointer; } .floor-login__key:active { background: var(--fm-primary-soft); border-color: var(--fm-primary); } .floor-login__key--muted { color: var(--fm-text-2); background: var(--fm-surface-2); } .floor-login__actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--fm-space-3); width: 100%; } .floor-login__btn { display: grid; place-items: center; height: 64px; border-radius: var(--fm-radius-lg); font-size: var(--fm-floor-fs-sm); font-weight: var(--fm-fw-semibold); text-decoration: none; cursor: pointer; border: 2px solid transparent; } .floor-login__btn--primary { background: var(--fm-primary); color: var(--fm-primary-contrast); } .floor-login__btn--secondary { background: var(--fm-surface); color: var(--fm-text-2); border-color: var(--fm-border); } .floor-login__hint { color: var(--fm-text-3); font-size: var(--fm-fs-sm); } .floor-login__brand-img { width: 32px; height: 32px; object-fit: contain; } /* Breadcrumbs: a group without its own page is rendered by MudBlazor as disabled; keep it readable, not faded. */ .erp-page-header__crumbs .mud-breadcrumb-item > a { color: var(--fm-text-2); font-size: var(--fm-fs-sm); } .erp-page-header__crumbs .mud-breadcrumb-item.mud-disabled > a { color: var(--fm-text-2); opacity: 1; } .erp-page-header__crumbs .mud-breadcrumb-item:last-child > a { color: var(--fm-text); font-weight: var(--fm-fw-medium); } .erp-page-header__crumbs .mud-breadcrumb-item:not(.mud-disabled):not(:last-child) > a:hover { color: var(--fm-primary); } /* ---------- Tab panels breathe below the strip: the first section heading no longer touches the active-tab underline ---------- */ .erp-tabs > .mud-tabs-panels { padding-top: var(--fm-space-5); } /* ---------- Tab count badges take real space, so a long title cannot eat them ---------- MudBlazor anchors a tab badge to a ZERO-WIDTH point after the label and lets it hang off that point (inset: -16px -16px -4px -4px), so the tab reserves no room for it at all. A short title survives only on the slack inside .mud-tab's 160px min-width; a long one ("Non-conformances") shrink-wraps to its text and .mud-tab's own overflow:hidden then clips the badge - measured at 4px on /quality/suppliers/{id}. Letting the badge flow inline makes the tab grow to include it, so it is safe at any title length and any number of digits. Beats Mud's 3-class selectors. */ .erp-tabs .mud-tab .mud-badge-root.mud-tab-badge { display: inline-flex; align-items: center; margin-left: var(--fm-space-2); } .erp-tabs .mud-tab .mud-tab-badge .mud-badge-wrapper { position: static; width: auto; height: auto; } .erp-tabs .mud-tab .mud-tab-badge .mud-badge.mud-badge-top.right { position: static; inset: auto; } /* ---------- Floating labels: with labels at 0.875rem, Mud's 0.75 shrink would land at 0.66rem; 0.857 keeps them at 0.75rem (= helper/caption) ---------- */ html .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, html .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, html .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(14px, -6px) scale(0.857); max-width: calc((100% - 14px) / 0.857); } /* ---------- Required markers are red, in fields (MudBlazor draws the * as ::after) and in hand-written labels ---------- */ .mud-input-required .mud-input-label::after, .mud-input-label-required::after, .fm-required { color: var(--fm-danger-text); } /* ---------- A detail list and a form in the same section body breathe apart (facts above, fields below) ---------- */ .erp-section__body > .erp-dl + .erp-form, .erp-section__body > .erp-form + .erp-dl, .erp-section__body > .erp-dl + .erp-dl { margin-top: var(--fm-space-5); } /* ---------- Inputs inside grid cells (checklists): one type scale with the grid, flush, no helper gap ---------- */ .erp-grid .mud-table-cell .mud-input-control { margin: 0; } .erp-grid .mud-table-cell .mud-input, .erp-grid .mud-table-cell .mud-input-slot, .erp-grid .mud-table-cell .mud-select-input, .erp-grid .mud-table-cell .mud-input-label, .erp-grid .mud-table-cell .mud-input-adornment-text, .erp-grid .mud-table-cell .mud-input-adornment { font-size: var(--fm-fs-sm); } .erp-grid .mud-table-cell .mud-input-outlined .mud-input-slot { padding-top: 9px; padding-bottom: 9px; } .erp-grid .mud-table-cell .mud-input-control-helper-container { display: none; } } /* --------------------------------------------------------------------------- Comment thread. The panel itself lives in Web (it needs the dispatcher, which the DesignSystem must not reference), but the LOOK belongs to the kit - rule 5. The body keeps the author's line breaks: a comment is prose someone typed, and collapsing their paragraphs edits what they said. --------------------------------------------------------------------------- */ .erp-comment__head { display: flex; align-items: baseline; gap: var(--fm-space-2); flex-wrap: wrap; } .erp-comment__body { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fm-text); /* A comment is PROSE, unlike everything else on these pages, so line length is the thing that decides whether it is readable. Measured on a 1536 desktop before this cap: 1,154 px = 173 characters a line, against the 45-75 that running text wants - the eye has to hunt for the start of the next line every time. The text itself was never the problem (15.3:1); its measure was. NOTE `ch` is the width of "0", which is wider than this font's average character, so 65ch measures ~75 characters - the top of the comfortable range. */ max-width: 65ch; } /* Four messages flush against one another read as one wall of text: measured 0 px between comments, separated by a hairline alone. Give each one room so the thread reads as a sequence of turns. */ .erp-comment { padding-top: var(--fm-space-4); padding-bottom: var(--fm-space-4); } /* The delete action is present on every comment an administrator can see, so in danger red it drew the eye down a column of bins instead of down the conversation. Quiet until you reach for it. */ .erp-comment .erp-comment__delete .mud-icon-root { color: var(--fm-text-3); } .erp-comment__delete:hover .mud-icon-root, .erp-comment__delete:focus-visible .mud-icon-root { color: var(--fm-danger-text); } /* A mention is the one part of a comment that DID something - it put the thread in someone's inbox - so it reads as a link would, without being one: there is no page for a person yet. */ .erp-comment__mention { color: var(--fm-primary); font-weight: 600; } .erp-comment__composer { display: grid; gap: var(--fm-space-3); padding: var(--fm-space-4); border-top: 1px solid var(--fm-border); } .erp-comment__actions { display: flex; justify-content: flex-end; } /* The @mention picker. It follows the composer in DOM order rather than floating over it, so Tab reaches it and Enter picks - no key interception, which a textarea makes awkward (Enter is a newline, arrows move the caret). */ .erp-mention { display: flex; flex-direction: column; max-width: 22rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-md); background: var(--fm-surface); box-shadow: var(--fm-shadow-2); overflow: hidden; } .erp-mention__item { display: flex; align-items: baseline; /* A