or depending on style.rowLink): clickable * rows get a subtle accent backdrop on :hover and :focus, replacing * the imperative onMouseEnter/Leave/Focus/Blur background mutation * the pre-migration JSX used * - Per-field span: state-driven text-align + per-field color via * --m-renderer-color * - Load-more button: dashed accent border + accent fg, muted state * when exhausted (:disabled in CSS) * * The hover/focus declarative selectors keep the accent-tint at the * same 7%/9% color-mix the pre-migration hex-suffix trick produced * (${accent}12 ≈ 7%, ${accent}18 ≈ 9%). */ .manifold-renderer-list-header { border-bottom: 1px solid var(--mt-border); padding-bottom: var(--m-renderer-list-header-pb, 2px); margin-bottom: var(--m-renderer-list-header-mb, 2px); color: var(--mt-muted); } /* "no items", "No recent detections match your filter." — a sentence, so it asks for Body (#140). It sits INSIDE the list grid, which is set in the readings face to keep the columns aligned, so without this it inherited a table's typeface for a line of prose. It is the only child when it shows, so nothing needs to line up with it. Found by probing the deployed page rather than by reading the JSX: the element has no font of its own, so no grep for a font role would have turned it up. */ .manifold-renderer-list-empty { color: var(--mt-muted); padding: 4px 0; font-family: var(--m-font-sans); } .manifold-renderer-list-row { padding-top: var(--m-renderer-list-row-pt, 0); border-radius: var(--m-renderer-list-row-radius, 0); color: inherit; } .manifold-renderer-list-row[data-clickable="true"]:hover { background: color-mix(in srgb, var(--mt-accent) 7%, transparent); } .manifold-renderer-list-row[data-clickable="true"]:focus-visible { background: color-mix(in srgb, var(--mt-accent) 9%, transparent); } /* Phase 19 Plan 05d — ListRenderer load-more button. dashed-accent ring * for the active state; muted hairline when exhausted (publisher / paged * source has no older events). :disabled is the natively-correct hook — * the button element's `disabled` attribute is what the pre-migration * JSX was already setting. */ .manifold-renderer-list-loadmore { /* Phase 91.1: grid-column + justify-self make the button full-width in the * parent grid context; align-self:flex-start keeps it left in flex contexts. * Grid properties are ignored when the parent is not a grid container. */ grid-column: 1 / -1; justify-self: start; align-self: flex-start; margin-top: 4px; padding: 3px 10px; background: transparent; color: var(--mt-accent); border: 1px dashed color-mix(in srgb, var(--mt-accent) 40%, transparent); border-radius: var(--m-radius-sm, 4px); cursor: pointer; } .manifold-renderer-list-loadmore:disabled { color: var(--mt-muted); border-color: var(--mt-border); cursor: default; } /* Phase 112 Plan 03 — maximize button on list/table cards (D-06). * * The button sits inside the .manifold-renderer-list-grid (a CSS grid * container). position:absolute takes it out of flow and anchors it to the * nearest positioned ancestor — which must be .manifold-renderer-list-grid * itself. The position:relative rule below provides that anchor. * * grid-column:unset keeps the grid column template from sizing the button * (absolutely-positioned grid children are still "in" the grid for sizing * purposes without this). z-index:2 floats it above row content. * * Reveal mechanic: opacity:0 by default → opacity:1 on [data-hover="true"]. * data-hover is set by JSX via onPointerEnter/onPointerLeave (fires for * both mouse and touch — D-06: touch-reachable, not stranded behind :hover). * It is also kept true while the modal is open (maximizeOpen) so the user * can see what triggered the panel. * * All values use existing theme tokens — no hardcoded brand colors. */ .manifold-renderer-list-grid { position: relative; } .manifold-renderer-list-maximize { position: absolute; top: 4px; right: 8px; background: transparent; color: var(--mt-accent); border: 1px solid color-mix(in srgb, var(--mt-accent) 30%, transparent); border-radius: var(--m-radius-sm, 4px); cursor: pointer; padding: 2px 6px; opacity: 0; transition: opacity 180ms; /* Keep out of the CSS grid flow (absolute children still participate in * column sizing without this — grid-column:unset removes that effect): */ grid-column: unset; z-index: 2; } .manifold-renderer-list-maximize[data-hover="true"] { opacity: 1; } /* Phase 167 (VIEW-01) — the unified top-left explode button. Byte-for-byte * mirror of .manifold-renderer-list-maximize above, EXCEPT right:8px * becomes left:8px (opposite corner — D-02, keeps clear of the chart's * built-in top-right range control and the view-as adopt button, both * top-right). Do not reuse or restyle .manifold-renderer-list-maximize * itself; this is a separate, single, card-wrapper-level control. */ .manifold-card-explode { position: absolute; top: 4px; left: 8px; background: transparent; color: var(--mt-accent); border: 1px solid color-mix(in srgb, var(--mt-accent) 30%, transparent); border-radius: var(--m-radius-sm, 4px); cursor: pointer; padding: 2px 6px; opacity: 0; transition: opacity 180ms; grid-column: unset; /* Above the whole card layer stack (surface < wm < content < frame border). At the old value the button tied with .cb-card-layer--content and lost on DOM order, so the content layer swallowed real clicks (2026-07-08 fix). */ z-index: 4; } .manifold-card-explode[data-hover="true"] { opacity: 1; } /* EXPLODE-03 (Phase 190 Plan 03) — the 8 non-default corner overrides for * the explode button's chosen data-explode-pos (see sanitizeExplodeIconPos * in card-builder.jsx — the only 9 values that can ever reach this * selector). The base rule above IS the 'top-left' position and stays the * default (no attribute needed for it — an unset/old card renders exactly * as before). Each override clears the base rule's opposite edges (setting * them to auto) before pinning its own edge(s), and applies a translate for * the middle/center positions so the button's visual box stays centered on * that edge/spot the same way the alignment idiom's ALIGN_MAP corners do. */ .manifold-card-explode[data-explode-pos="top-center"] { left: 50%; right: auto; transform: translateX(-50%); } .manifold-card-explode[data-explode-pos="top-right"] { left: auto; right: 8px; } .manifold-card-explode[data-explode-pos="middle-left"] { top: 50%; transform: translateY(-50%); } .manifold-card-explode[data-explode-pos="middle-center"] { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); } .manifold-card-explode[data-explode-pos="middle-right"] { top: 50%; left: auto; right: 8px; transform: translateY(-50%); } .manifold-card-explode[data-explode-pos="bottom-left"] { top: auto; bottom: 4px; } .manifold-card-explode[data-explode-pos="bottom-center"] { top: auto; bottom: 4px; left: 50%; right: auto; transform: translateX(-50%); } .manifold-card-explode[data-explode-pos="bottom-right"] { top: auto; bottom: 4px; left: auto; right: 8px; } /* Phase 91 Plan 04 — sortable list-header affordance. * Applied to individual header span elements when style.sortable is on. * cursor:pointer signals clickability; hover tint via color-mix accent * (same 7% tint used by clickable rows above). The sort arrow itself uses * .manifold-renderer-list-sort-indicator below. */ .manifold-renderer-list-header-sortable { cursor: pointer; user-select: none; } .manifold-renderer-list-header-sortable:hover { color: color-mix(in srgb, var(--mt-accent) 70%, var(--mt-muted)); } /* Sort direction indicator — arrow glyph (▲/▼/▾) shown in the active * sort column (accent) or all sortable columns when not yet sorted (muted). * Color driven by --m-renderer-color set per-instance in JSX (same * pattern as .manifold-renderer-action-sort on TableActionResultRenderer). */ .manifold-renderer-list-sort-indicator { color: var(--m-renderer-color, var(--mt-muted)); font-size: 9px; margin-left: 3px; flex-shrink: 0; } /* Phase 91.1 — CSS subgrid parent container for list/table cards. * The scroll-body

gains this class + a data-gridlines attribute * (none/vertical/horizontal/both) that drives the rules below. * Scoped under .manifold-renderer-list-grid so these rules don't leak * to other renderers. Color is var(--mt-border) — same token the old * inline separators borderTop used, so existing cards with separators:true * (effectiveGridlines='horizontal') are pixel-identical post-upgrade. */ /* Full-width grid items: load-more button + envelope rows always span all * tracks. load-more keeps its left-aligned appearance via justify-self:start * (align-self:flex-start was a flex-only prop; this is the grid equivalent). */ .manifold-renderer-list-grid .manifold-renderer-list-loadmore { grid-column: 1 / -1; justify-self: start; } .manifold-renderer-list-grid .manifold-renderer-action-row[data-envelope] { grid-column: 1 / -1; } /* Horizontal gridlines — border-top on data rows that follow another data row. * Adjacent-sibling selector skips the first row (no border above the first * item), matching the old separators && idx > 0 behavior exactly (D-06). */ .manifold-renderer-list-grid[data-gridlines="horizontal"] .manifold-renderer-list-row + .manifold-renderer-list-row, .manifold-renderer-list-grid[data-gridlines="both"] .manifold-renderer-list-row + .manifold-renderer-list-row { border-top: 1px solid var(--mt-border); } /* Vertical gridlines — right border on every cell except the last in each * row + header. padding-right keeps text from touching the line. */ .manifold-renderer-list-grid[data-gridlines="vertical"] .manifold-renderer-list-row > span:not(:last-child), .manifold-renderer-list-grid[data-gridlines="both"] .manifold-renderer-list-row > span:not(:last-child), .manifold-renderer-list-grid[data-gridlines="vertical"] .manifold-renderer-list-header > span:not(:last-child), .manifold-renderer-list-grid[data-gridlines="both"] .manifold-renderer-list-header > span:not(:last-child) { border-right: 1px solid var(--mt-border); padding-right: 6px; } /* FRIG-02 Task 4 — scrollable detection-list body. * Applied alongside .manifold-renderer-list-grid (same element) so the row * grid remains a CSS grid container — adding a wrapper div would break the * grid-column:1/-1 spans used by header rows, load-more buttons, and * envelope rows. max-height:100% lets the card's flex layout bound the * height; overflow-y:auto adds the scrollbar only when rows exceed that * bound. Named cb-list-scroll to match the cb-frigate-* class convention. */ .cb-list-scroll { max-height: 100%; overflow-y: auto; } /* Phase 96 Plan 04 (POLISH-05) — themed scrollbar on the list/table card * scroll container. The JSX sets overflow:auto on .manifold-renderer-list-grid * so the OS-default scrollbar shows when rows overflow. Style it with theme * tokens so it follows theme switches — never hardcoded colors. * * WebKit/Chromium: ::-webkit-scrollbar family (width, track, thumb, hover). * Firefox/non-WebKit: scrollbar-width:thin + scrollbar-color shorthand. * * Token choices — matches the card surface and reads cleanly across themes: * track → --mt-bg-elev (subtle, just slightly lighter than card bg) * thumb → --mt-border-strong (visible but not loud; same token as grid dividers) * hover → --mt-dim (warmer, shows interactivity without jarring contrast) * Literal fallbacks match the default-theme values; themes override via token. */ .manifold-renderer-list-grid { scrollbar-width: thin; scrollbar-color: var(--mt-border-strong, #353c47) var(--mt-bg-elev, #1d2128); } .manifold-renderer-list-grid::-webkit-scrollbar { width: 4px; height: 4px; } .manifold-renderer-list-grid::-webkit-scrollbar-track { background: var(--mt-bg-elev, #1d2128); } .manifold-renderer-list-grid::-webkit-scrollbar-thumb { background: var(--mt-border-strong, #353c47); border-radius: 2px; } .manifold-renderer-list-grid::-webkit-scrollbar-thumb:hover { background: var(--mt-dim, #8b8985); } /* Phase 91 Plan 04 — inline progress bar cell (format: 'progress'). * Track is a relative container; fill is absolutely-positioned so it * doesn't push text. The percentage label sits above the fill (z-index:1) * and is centered. Only the dynamic `width: X%` is set inline by JSX; * all aesthetic constants live here. */ .manifold-progress-bar-cell { position: relative; width: 100%; height: 1.1em; background: color-mix(in srgb, var(--mt-accent) 12%, transparent); border-radius: 2px; overflow: hidden; flex-shrink: 0; } .manifold-progress-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: color-mix(in srgb, var(--mt-accent) 55%, transparent); border-radius: 2px; transition: width 0.3s ease; } .manifold-progress-bar-label { position: relative; z-index: 1; display: block; text-align: center; font-size: 0.9em; color: var(--mt-fg); white-space: nowrap; overflow: hidden; } /* Phase 19 Plan 05d — dynamic text-align escape hatch. Drives * text-align: var(--m-text-align) * from a per-element custom property so field-driven alignment (e.g. * `field.align: 'right'` per ListRenderer column) survives without an * inline textAlign key. */ .manifold-text-align-dyn { text-align: var(--m-text-align, left); } /* Phase 19 Plan 05e — BundledIcon SVG color. The pre-migration JSX wrote * `style={{color: color || 'currentColor'}}` on the outer tag — the actual image element. Pre-migration: * { maxWidth:'100%', maxHeight:'min(70vh, 480px)', objectFit:'contain' } * All static. */ .manifold-renderer-action-image-img { max-width: 100%; max-height: min(70vh, 480px); object-fit: contain; } /* Action-text body — the pre-wrap text block. Pre-migration: * { whiteSpace:'pre-wrap', * fontSize:'var(--mt-text-md-size, 12px)', * lineHeight:1.5, * color:'var(--m-text, var(--mt-fg))', * padding:'var(--m-pad-md, 10px)', * fontFamily: , * maxHeight: overflow ? '60vh' : 'none', * overflow: overflow ? 'auto' : 'visible', * width:'100%' } * font-family is state-driven (monospace flag); maxHeight + overflow * are state-driven (lineCount > 80). The class bundles the static keys * and the JSX composes either `.manifold-renderer-font-mono` or * `.manifold-renderer-font-sans` on top, plus a `data-overflow="true"` * attr-selector variant for the scroll-clip path. */ .manifold-renderer-action-text { white-space: pre-wrap; font-size: var(--mt-text-md-size, 12px); line-height: 1.5; color: var(--mt-fg); padding: var(--m-pad-md, 10px); width: 100%; max-height: none; overflow: visible; } .manifold-renderer-action-text[data-overflow="true"] { max-height: 60vh; overflow: auto; } /* Action-text empty placeholder. Pre-migration: * { color:'var(--m-text-muted, var(--mt-muted))', * fontStyle:'italic', * padding:'var(--m-pad-md, 10px)', * fontSize:'var(--mt-text-md-size, 12px)' } */ .manifold-renderer-action-text-empty { color: var(--mt-muted); font-style: italic; padding: var(--m-pad-md, 10px); font-size: var(--mt-text-md-size, 12px); } /* Action-list / action-table empty placeholder. Used by both the list * and table action-result renderers when their items[] is empty. * Center-aligned muted text in a generous padding bucket. */ .manifold-renderer-action-list-empty { color: var(--mt-muted); padding: var(--m-pad-lg, 12px); text-align: center; font-size: var(--mt-text-sm-size, 11px); } /* Phase 19 Plan 05d — LogStreamRenderer load-more button. Shape diverges * from ListRenderer's dashed-accent button: LogStream's variant is a * borderless transparent accent-text affordance, more like a textual * "+ Load more" link than a chunky chip. Padding is symmetrical-vertical * only ('4px 0'). */ .manifold-renderer-logstream-loadmore { background: transparent; border: none; color: var(--mt-accent); padding: 4px 0; text-align: left; cursor: pointer; } /* Phase 19 Plan 05f — service-family escape-hatch classes (helpers + 4 * renderers). Authoring rules same as 19-05a..e: * - Aesthetic values route through `--mt-*` tokens (theme-skinnable) or * `--m-renderer-*` custom properties set inline (state-driven values * that the audit script no longer flags as FORBIDDEN). * - Per-class differentiation that the runtime computes (status color, * per-detection-class bbox color, per-service brand color) flows * through `--m-renderer-color` / `--m-renderer-brand` etc.; the class * consumes the prop once for foreground and once for `color-mix(...)` * tinted background + border (replaces the pre-migration `${c}15` / * `${c}66` hex-suffix tricks, which only happened to work because both * sides were 6-digit hex resolved at runtime). * --------------------------------------------------------------------- */ /* ServiceMethodButton — three chrome modes (default pill / minimal text / * invisible overlay), all routing the state-driven status color through * `--m-renderer-color`. `data-pending="true"` flips cursor to `wait`; * `data-gated="true"` greys the button to communicate "this verb is * locked for your role" (preserves the pre-migration `opacity:0.55 + * cursor:not-allowed` semantic — losing it would make a sensitive verb * look identical to an active one, a real safety regression per * feedback_no_shell_via_browser). */ .manifold-renderer-svc-btn { font-family: var(--m-font-mono); font-size: var(--m-renderer-value-size); font-weight: var(--mt-weight-semibold); color: var(--m-renderer-color); background: color-mix(in srgb, var(--m-renderer-color) 8%, transparent); border: 1px solid color-mix(in srgb, var(--m-renderer-color) 40%, transparent); border-radius: 5px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .manifold-renderer-svc-btn-minimal { font-family: var(--m-font-mono); font-size: var(--m-renderer-value-size); font-weight: var(--mt-weight-semibold); color: var(--m-renderer-color); background: transparent; border: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.15s; } .manifold-renderer-svc-btn-invisible { position: absolute; inset: 0; background: transparent; border: none; padding: 0; display: block; cursor: pointer; } .manifold-renderer-svc-btn[data-pending="true"], .manifold-renderer-svc-btn-minimal[data-pending="true"], .manifold-renderer-svc-btn-invisible[data-pending="true"] { cursor: wait; } .manifold-renderer-svc-btn[data-gated="true"], .manifold-renderer-svc-btn-minimal[data-gated="true"], .manifold-renderer-svc-btn[data-gated="true"]:disabled, .manifold-renderer-svc-btn-minimal[data-gated="true"]:disabled { cursor: not-allowed; opacity: 0.55; } /* ServiceNavigateLink — three chrome modes mirror the button helper's * shape but as anchors (text-decoration:none, line-height:1). * Sensitive-vs-routine accent flows through --m-renderer-color (set * inline; sensitive uses t.warn, routine uses t.accent or style.color * override). Same color-mix tint pattern for the pill background + * border. */ .manifold-renderer-svc-nav { font-family: var(--m-font-mono); font-size: var(--m-renderer-value-size); font-weight: var(--mt-weight-semibold); text-decoration: none; color: var(--m-renderer-color); background: color-mix(in srgb, var(--m-renderer-color) 8%, transparent); border: 1px solid color-mix(in srgb, var(--m-renderer-color) 25%, transparent); border-radius: 5px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .manifold-renderer-svc-nav-minimal { font-family: var(--m-font-mono); font-size: var(--m-renderer-value-size); font-weight: var(--mt-weight-semibold); text-decoration: none; color: var(--m-renderer-color); display: inline-flex; align-items: center; gap: 6px; line-height: 1; cursor: pointer; } .manifold-renderer-svc-nav-invisible { position: absolute; inset: 0; display: block; background: transparent; text-decoration: none; cursor: pointer; } /* ServiceNavigateLink inner spans: trailing `↗` (subdued, opacity 0.85) * and label text with optional ellipsis trio. The label-trunc variant * pairs with .manifold-renderer-truncate (already shipped 19-05e); the * non-truncating variant is the default. */ .manifold-renderer-svc-nav-arrow { font-size: var(--m-renderer-arrow-size); opacity: 0.85; } /* ServiceAuthorityIcon — compact owner-only authority indicator inside * ServicePlacardRenderer's action cluster. Tiny padlock glyph (🔒 or * 🔓) that doubles as state indicator + toggle button. * * SAFETY-CRITICAL VISUAL DIFFERENTIATION (per feedback_no_shell_via_browser): * - data-overridden="true" -> opacity:1 + accent-tinted drop-shadow * halo. Signals "owner has actively pinned this gate to a non-default * value." Visible chrome reads as a deliberate choice. * - data-overridden absent -> opacity:0.55 + no halo. Reads as * "catalog default; click to override." Losing the visual gap would * erase the at-a-glance signal of which services have an explicit * owner override active — a real safety regression. * * Click-pending state (data-pending) flips cursor to `wait` without * disturbing the overridden halo. The locked emoji vs unlocked emoji * (🔒 vs 🔓) is text content in the JSX; the CSS only carries the * differentiated chrome around it. */ .manifold-renderer-svc-authority-icon { background: transparent; border: none; padding: 0 4px; margin-left: 2px; cursor: pointer; font-size: 11px; line-height: 1; opacity: 0.55; filter: none; transition: opacity 180ms, filter 180ms; } .manifold-renderer-svc-authority-icon[data-overridden="true"] { opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mt-accent) 40%, transparent)); } .manifold-renderer-svc-authority-icon[data-pending="true"] { cursor: wait; } .manifold-renderer-svc-authority-icon:disabled { cursor: wait; } /* ServiceAuthorityToggle — owner-only meta-control rendered beneath a * ServiceActionsRenderer cluster. One-line monospace strip: * "authority: admin ·overridden [ delegate to admins ]" * * Visual semantics (same safety-critical posture as ServiceAuthorityIcon): * - The "·overridden" marker (accent color, ml 4px) is the at-a-glance * signal that the owner has pinned this service's gate. It paints * only when overridden is true; absence means "catalog default." * - The flip button color flows through --m-renderer-color (warn by * default, live on success flash, error on failure flash) + a * color-mix 40% tint on the border, replacing the pre-migration * `${color}66` hex-suffix trick. */ .manifold-renderer-svc-authority-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-family: var(--m-font-mono); font-size: 10px; color: var(--mt-dim); opacity: 0.78; } .manifold-renderer-svc-authority-current { color: var(--mt-muted); font-weight: var(--mt-weight-semibold); } .manifold-renderer-svc-authority-overridden-marker { color: var(--mt-accent); margin-left: 4px; } .manifold-renderer-svc-authority-flip-btn { font-family: inherit; font-size: inherit; color: var(--m-renderer-color, var(--mt-warn)); background: transparent; border: 1px solid color-mix(in srgb, var(--m-renderer-color, var(--mt-warn)) 40%, transparent); border-radius: 3px; padding: 1px 6px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .manifold-renderer-svc-authority-flip-btn[data-pending="true"] { cursor: wait; } .manifold-renderer-svc-authority-flip-btn:disabled { cursor: wait; } /* EmptyCardBody — shared "no data yet" shell for Donut / StackedBarsTime * / Distribution renderers and any future renderer that wants the same * empty-state chrome. Two classes: * .manifold-renderer-empty-card-body — outer flex column, center * align, padding 10px 12px by default (suppressed by data-nopad="true" * so renderers passing noPad get edge-to-edge layout). * .manifold-renderer-empty-card-msg — the small muted mono message * (font-size 11px) describing why the card is empty. Composes * with .manifold-renderer-font-mono (shipped 19-05e) for the * JetBrains Mono fallback chain — no need to coin a new family. */ .manifold-renderer-empty-card-body { width: 100%; height: 100%; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .manifold-renderer-empty-card-body[data-nopad="true"] { padding: 0; } .manifold-renderer-empty-card-msg { color: var(--mt-muted); font-size: 11px; } /* ServicePlacardRenderer — rack-placard row: brand stripe + glowing * status LED on the left, brand icon, name+desc+group stack, optional * critical badge, launch arrow, action button cluster. Designed for * use inside a service-repeat card where each repeat-iteration produces * one placard. Karl 2026-05-09. * * State-driven values that flow through custom properties: * --m-brand — service brand color (svc.brand || t.accent). * Consumed by .placard outer wrap for the * left-edge gradient wash, .placard-stripe for * the colored bar, .placard-icon's BundledIcon * tint, and .placard-group-chip for the chip * outline / fill / text. * --m-renderer-color — LED status color (resolved from stateValue * via _serviceStateColor). Halo + border use * color-mix tints of this prop. * data-hover="true" — set on every element whose chrome shifts on * hover (gradient brightness, stripe halo, * launch arrow color/position, actions cluster * opacity, critical badge opacity). * data-state="ok|warn|fault" — drives the LED's animation + halo * (ok: pulsing accent halo; warn: pulsing * warn halo; fault: static dim halo; other: * no halo or animation). See keyframes * manifold-led-pulse / -warn already shipped. * data-fault="true" — on the icon box, applies grayscale(1) * opacity(0.35) so a failed service icon reads * as visually disabled. * * Why per-state attr instead of N classes: the JSX already computes * isOk / isWarn / isFault as booleans; a single data-state attribute * carrying one of {ok, warn, fault, other} keeps the JSX wiring trivial * and the CSS rules adjacent in this block. */ .manifold-renderer-svc-placard { position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 14px; padding-left: 22px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--m-brand) 10%, transparent) 0%, transparent 38%), linear-gradient(155deg, var(--mt-bg), var(--mt-muted)); background-blend-mode: normal; border-top: 1px solid var(--mt-border); border-bottom: 1px solid var(--mt-border); border-right: 1px solid var(--mt-border); cursor: default; transition: background 180ms ease-out; isolation: isolate; } .manifold-renderer-svc-placard[data-hover="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--m-brand) 20%, transparent) 0%, transparent 38%), linear-gradient(155deg, var(--mt-bg), var(--mt-muted)); } .manifold-renderer-svc-placard-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--m-brand); transition: box-shadow 200ms ease-out; } .manifold-renderer-svc-placard-stripe[data-hover="true"] { box-shadow: 2px 0 18px 0 color-mix(in srgb, var(--m-brand) 47%, transparent), 2px 0 6px 0 color-mix(in srgb, var(--m-brand) 67%, transparent); } .manifold-renderer-svc-placard-led { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--m-renderer-color); border: 1.5px solid var(--mt-bg); z-index: 2; } .manifold-renderer-svc-placard-led[data-state="ok"] { box-shadow: 0 0 8px var(--m-renderer-color); animation: manifold-led-pulse 2.5s ease-in-out infinite; } .manifold-renderer-svc-placard-led[data-state="warn"] { animation: manifold-led-pulse-warn 1.2s ease-in-out infinite; } .manifold-renderer-svc-placard-led[data-state="fault"] { box-shadow: 0 0 6px var(--m-renderer-color); } .manifold-renderer-svc-placard-icon-box { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; filter: none; transition: filter 180ms; } .manifold-renderer-svc-placard-icon-box[data-fault="true"] { filter: grayscale(1) opacity(0.35); } .manifold-renderer-svc-placard-icon-img { display: block; max-width: 100%; max-height: 100%; } .manifold-renderer-svc-placard-text-stack { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .manifold-renderer-svc-placard-name { font-family: var(--m-font-sans); font-weight: var(--mt-weight-semibold); font-size: calc(15px * var(--m-renderer-text-scale, 1)); letter-spacing: -0.01em; color: var(--mt-fg); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manifold-renderer-svc-placard-desc { font-family: var(--m-font-mono); font-size: calc(11px * var(--m-renderer-text-scale, 1)); color: var(--mt-dim); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manifold-renderer-svc-placard-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .manifold-renderer-svc-placard-group-chip { font-family: var(--m-font-mono); font-size: calc(9px * var(--m-renderer-text-scale, 1)); font-weight: var(--mt-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-brand); background: color-mix(in srgb, var(--m-brand) 12%, transparent); padding: 1px 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--m-brand) 33%, transparent); } .manifold-renderer-svc-placard-critical { font-family: var(--m-font-mono); font-size: calc(9px * var(--m-renderer-text-scale, 1)); font-weight: var(--mt-weight-bold); letter-spacing: 0.06em; color: var(--mt-warn); opacity: 0.7; transition: opacity 180ms; } .manifold-renderer-svc-placard-critical[data-hover="true"] { opacity: 1; } .manifold-renderer-svc-placard-launch { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--mt-dim); font-size: calc(16px * var(--m-renderer-text-scale, 1)); line-height: 1; text-decoration: none; transition: color 200ms, transform 200ms; transform: translate(0, 0); } .manifold-renderer-svc-placard-launch[data-hover="true"] { color: var(--m-brand); transform: translate(2px, -2px); } .manifold-renderer-svc-placard-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; opacity: 0.78; transition: opacity 180ms; } .manifold-renderer-svc-placard-actions[data-hover="true"] { opacity: 1; } /* ── Phase 84: Services Tab — status pill ────────────────────────────────── * Shared pill atom used by both Services-tab rows (Phase 84) and * internal-daemon rows (Phase 86). All colours reference existing --m-* * / --mt-* tokens — no net-new token added. Semi-transparent fills are * computed via color-mix() at render time, not stored as new tokens. * * Five modifier classes, one per real API state from /admin/services/status: * running — green fill + dot halo (--m-success) * degraded — amber fill + dot halo (--m-warning) * failed — red fill + dot halo (--m-error) * stopped — muted surface fill, grey dot (--mt-bg-elev / --m-text-faint) * unknown — transparent + dashed border, hollow dot (--mt-border) * * Security: the cls value that feeds the -- suffix comes from the * SVC_PILL_STATES lookup table (JSX), never raw-interpolated from the API * payload — so an injected state string can only resolve to one of these * five known modifier classes or fall back to --unknown. */ .manifold-svc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--m-font-weight-semibold); line-height: 1; padding: 4px 9px 4px 7px; border-radius: var(--m-radius-full); border: 1px solid transparent; white-space: nowrap; letter-spacing: .01em; font-family: var(--m-font-sans); } .manifold-svc-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } /* running — green-tinted fill, green dot with soft halo */ .manifold-svc-pill--running { color: #a7d39c; background: color-mix(in srgb, var(--m-success) 14%, transparent); border-color: color-mix(in srgb, var(--m-success) 30%, transparent); } .manifold-svc-pill--running .manifold-svc-pill__dot { background: var(--m-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-success) 18%, transparent); } /* degraded — amber-tinted fill, amber dot with halo */ .manifold-svc-pill--degraded { color: #e3b483; background: color-mix(in srgb, var(--m-warning) 14%, transparent); border-color: color-mix(in srgb, var(--m-warning) 32%, transparent); } .manifold-svc-pill--degraded .manifold-svc-pill__dot { background: var(--m-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-warning) 16%, transparent); } /* failed — red-tinted fill (slightly stronger), red dot with halo */ .manifold-svc-pill--failed { color: #d98e87; background: color-mix(in srgb, var(--m-error) 16%, transparent); border-color: color-mix(in srgb, var(--m-error) 34%, transparent); } .manifold-svc-pill--failed .manifold-svc-pill__dot { background: var(--m-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-error) 18%, transparent); } /* stopped — muted surface fill, grey dot, no halo */ .manifold-svc-pill--stopped { color: var(--m-text-faint); background: var(--mt-bg-elev); border-color: var(--mt-border-strong); } .manifold-svc-pill--stopped .manifold-svc-pill__dot { background: var(--m-text-faint); } /* unknown — transparent bg, dashed border, hollow dot */ .manifold-svc-pill--unknown { color: var(--m-text-faint); background: transparent; border-color: var(--mt-border); border-style: dashed; } .manifold-svc-pill--unknown .manifold-svc-pill__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--m-text-faint); } /* Phase 90: stale state — dimmed + slow pulse layered on top of running colors. The pill holds the last-known state word (label='Running'); dim + clock mark conveys aging without crying wolf (D-04 / SVCC-04). Animation stops the instant the daemon resolves to a definitive state. */ .manifold-svc-pill--stale { opacity: 0.55; animation: manifold-led-pulse-stale 2.5s ease-in-out infinite; } .manifold-svc-pill--stale .manifold-svc-pill__dot { background: var(--m-success); /* holds running color */ box-shadow: none; /* no halo — dim signals aging */ } @keyframes manifold-led-pulse-stale { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.30; } } /* Clock mark placed next to last-seen text so stale rows are scannable */ .manifold-svc-daemon-row__stale-mark { color: var(--m-text-faint); font-size: 10px; margin-left: 4px; } /* ── end Phase 84: status pill ─────────────────────────────────────────── */ /* ── Phase 84: Services Tab — row + header ───────────────────────────────── * ServiceStatusRow (.manifold-svc-row*) and HealthSummaryHeader * (.manifold-svc-header*) CSS. All colours from --m-* / --mt-* tokens — * no net-new token added, no tag added (appended to the already- * loaded theme.css to avoid the index.html/dist-index.html.tmpl parity trap). * * Uniform row height (SVCS-01 "every card the same height in a real grid") * is enforced by a fixed min-height on .manifold-svc-row. When the row is * used inside a CSS grid the grid's auto-rows can override this; the fixed * value is the floor so empty/minimal rows never collapse shorter. */ /* ── Row outer wrapper ── */ .manifold-svc-row { display: flex; align-items: center; gap: var(--m-pad-sm); /* 8px between columns */ min-height: 48px; /* uniform height floor — SVCS-01 */ padding: 6px var(--m-pad-sm); /* 6px top/bottom, 8px sides */ border-radius: var(--m-radius-md); transition: background 140ms; } .manifold-svc-row:hover { background: color-mix(in srgb, var(--m-brand) 6%, transparent); } /* ── Brand chip (32px icon box, tinted by --m-brand) ── */ .manifold-svc-row__icon { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--m-radius-md); background: color-mix(in srgb, var(--m-brand, var(--mt-accent)) 14%, transparent); overflow: hidden; } .manifold-svc-row__icon-img { width: 32px; height: 32px; object-fit: contain; display: block; } /* ── Text stack: name + description subtitle ── */ .manifold-svc-row__text { flex: 1 1 0; min-width: 0; /* allow text to shrink+ellipsis */ display: flex; flex-direction: column; gap: 2px; } .manifold-svc-row__name { font-size: 13px; font-weight: var(--m-font-weight-semibold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .manifold-svc-row__sub { font-size: 10.5px; color: var(--m-text-faint); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Mono meta line: "up — · v— · Xm ago" (right-aligned, faint) ── */ .manifold-svc-row__meta { flex: none; font-family: var(--m-font-mono); font-size: 10.5px; color: var(--m-text-faint); white-space: nowrap; margin-left: auto; /* push toward the right before the pill */ } /* ── Actions placeholder: Phase 85 injects Open↗ + kebab here ── */ .manifold-svc-row__actions { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; /* collapses to zero when empty */ } /* ── Health-summary header ── */ .manifold-svc-header { display: flex; align-items: center; gap: var(--m-pad-md); /* 14px between count / legend / bar */ padding: var(--m-pad-sm) 0 var(--m-pad-sm); flex-wrap: wrap; } /* Headline: "18 services" — the large leading count */ .manifold-svc-header__count { font-size: 15px; font-weight: var(--m-font-weight-semibold); white-space: nowrap; } .manifold-svc-header__count span { font-weight: var(--m-font-weight-regular); color: var(--m-text-faint); } /* Legend: colored swatch dot + "N label" per present state */ .manifold-svc-header__legend { display: flex; align-items: center; gap: var(--m-pad-sm); flex-wrap: wrap; } .manifold-svc-header__legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--m-text-faint); white-space: nowrap; } .manifold-svc-header__legend span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--svc-dot-color, var(--m-text-faint)); } /* Proportional health bar: clipped flex row of fixed-height segments */ .manifold-svc-header__bar { flex: 1 1 120px; /* grows to fill remaining header space */ min-width: 80px; height: 4px; display: flex; overflow: hidden; border-radius: var(--m-radius-sm); background: var(--mt-bg-elev); /* track color behind segments */ } .manifold-svc-header__bar i { display: block; height: 4px; flex: none; /* width set inline as a percentage */ background: var(--svc-dot-color, var(--m-text-faint)); } /* ── end Phase 84: row + header ────────────────────────────────────────── */ /* ── Phase 84 Plan 04: Services Tab — category groups ───────────────────── * CategoryGroup (.manifold-svc-group*) and the ServicesTabRenderer wrapper. * All colours from --m-* / --mt-* tokens — no hardcoded hex. * No tag added — CSS appended to already-loaded theme.css * (avoids dist-index.html.tmpl parity trap, feedback_manifold_dist_template_parity). * ────────────────────────────────────────────────────────────────────────── */ /* Tab-level wrapper — owns the vertical rhythm between header and groups. */ .manifold-svc-tab { display: flex; flex-direction: column; gap: var(--mt-space-lg); padding: var(--mt-space-md) var(--mt-space-lg); overflow-y: auto; height: 100%; box-sizing: border-box; } /* Category group container — top margin handled by parent gap above. */ .manifold-svc-group { display: flex; flex-direction: column; } /* Clickable group header row. */ .manifold-svc-group__head { display: flex; align-items: center; gap: var(--mt-space-sm); padding: 0 2px var(--mt-space-sm); cursor: pointer; user-select: none; outline: none; /* focus ring via :focus-visible below */ } .manifold-svc-group__head:focus-visible { outline: 2px solid var(--mt-accent); border-radius: var(--m-radius-sm); } /* Chevron rotates 90° when the group is collapsed. */ .manifold-svc-group__chev { color: var(--m-text-faint); font-size: 9px; line-height: 1; transition: transform var(--m-t-fast, 120ms ease); display: inline-block; } .manifold-svc-group__chev--collapsed { transform: rotate(-90deg); } /* Category display name — uppercase, display font, muted. */ .manifold-svc-group__name { font-family: var(--m-font-display); font-weight: var(--mt-weight-semibold); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--m-text-muted); white-space: nowrap; } /* Service count in monospace, faint. */ .manifold-svc-group__count { font-family: var(--m-font-mono); font-size: 10px; color: var(--m-text-faint); white-space: nowrap; } /* Flex-grow spacer rule between count and dots. */ .manifold-svc-group__line { flex: 1 1 0; height: 1px; background: var(--m-border); align-self: center; } /* Worst-first status dot run. Each dot is a 6px circle; color set inline. */ .manifold-svc-group__dots { display: inline-flex; align-items: center; gap: 4px; flex: none; } .manifold-svc-group__dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--svc-dot-color, var(--m-text-faint)); } /* Rows container — no extra padding; ServiceStatusRow provides its own. */ .manifold-svc-group__rows { display: flex; flex-direction: column; } /* ── end Phase 84 Plan 04: category groups ──────────────────────────────── */ /* ── Phase 85: intent actions + kebab ───────────────────────────────────── * * 1. .manifold-button.warning — amber confirm-button variant. * Mirrors .manifold-button.danger (line ~1407) with var(--m-warning) * instead of var(--m-error). Selected when tone:'warning' is passed to * window.ManifoldConfirm.confirm() (D-03 / UI-SPEC §96: amber, never red, * for disruptive-but-reversible service verbs). * * 2. .manifold-svc-row__open — "Open ↗" primary action anchor. * * 3. .manifold-svc-row__kebab-btn — ⋮ button that opens the dropdown. * * 4. .manifold-svc-kebab-menu + __item + __item--disabled — dropdown panel * and its items. z-index: 200 matches the existing modal z-index * convention. No hardcoded hex — all values use --m-* / --mt-* tokens. * * No /