/* ===================================================================== frykt components.css --------------------------------------------------------------------- Component styles for the frykt design system. Consumes the semantic tokens declared in tokens/build/tokens.css — load that FIRST, and make sure a [data-theme] attribute is set on (the tokens only resolve inside a [data-theme] scope). Class names are unprefixed (.btn, .table, .modal, …). Projects override via their own app.css but treat these as authoritative. Lifted from timesheet-review and generalized. Project-specific surfaces (match pills/picker, inline-cell-edit, combobox, KPI/summary cards, drift, auth) are intentionally NOT here — see docs/ROADMAP.md. ===================================================================== */ /* ===================================================================== RESET + BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); } :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--radius-sm); } /* Tooltips are annotation, not a help affordance — never the help cursor. */ [title] { cursor: inherit; } /* ===================================================================== LAYOUT — topnav + page shell --------------------------------------------------------------------- --topnav-height is a runtime layout variable set by the inline measurer script in components/jinja/_base.html when a topnav is present; the 60px fallback keeps content off the fixed nav before JS runs. ===================================================================== */ .topnav { display: flex; align-items: flex-end; gap: var(--space-5); padding: var(--space-3) var(--space-6) 0; border-bottom: 1px solid var(--border); background: var(--bg); flex-wrap: wrap; position: fixed; top: 0; left: 0; right: 0; z-index: 50; } body:has(> .topnav) { padding-top: var(--topnav-height, 60px); } .topnav-group { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: 0; } .topnav-group-label { flex: 0 0 100%; font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-semibold); line-height: 1.2; } .topnav-link { color: var(--text-muted); text-decoration: none; font-size: var(--fs-body); font-weight: var(--fw-medium); padding: var(--space-1) 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .topnav-link:hover { color: var(--text); text-decoration: none; } .topnav-link.active { color: var(--text); font-weight: var(--fw-semibold); border-bottom-color: var(--text); } .topnav-link-muted { color: var(--text-subtle); } .topnav-spacer { flex: 1; } .topnav-icon-link { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2); border-bottom-color: transparent; color: var(--text-muted); } .topnav-icon-link:hover { color: var(--text); } .topnav-icon-link.active { color: var(--text); border-bottom-color: var(--text); } .topnav-icon-link svg { display: block; } .page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-7); } /* ===================================================================== PAGE HEADER --------------------------------------------------------------------- Standardized header between topnav and content: title, subtitle (metadata strip), actions, then a horizontal rule. ===================================================================== */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; } .page-title { font-size: var(--fs-h1); font-weight: var(--fw-semibold); } .page-subtitle { font-size: var(--fs-body); color: var(--text-muted); margin-top: var(--space-1); } .page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .page-rule { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0 var(--space-5); } /* Subtitle as a flex strip of metadata fields. Apply alongside * .page-subtitle; children are fields and * separators. */ .subtitle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .subtitle-meta .meta-sep { color: var(--text-subtle); } .subtitle-meta strong { color: var(--text); font-weight: var(--fw-semibold); } /* Status bar — inline feedback strip. Hidden by default; add .visible. */ .status-bar { padding: var(--space-3) var(--space-6); background: var(--surface-alt); border-bottom: 1px solid var(--border); font-size: var(--fs-small); display: none; margin-bottom: var(--space-3); border-radius: var(--radius-md); } .status-bar.visible { display: block; } .status-bar.success { color: var(--success-fg); border-left: 3px solid var(--success-fg); } .status-bar.error { color: var(--danger-fg); border-left: 3px solid var(--danger-fg); background: var(--danger-bg-soft); } .status-bar.info { color: var(--link); border-left: 3px solid var(--link); } /* ===================================================================== COMPONENTS ===================================================================== */ /* --- Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--hover); text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border-strong); } .btn-danger { background: var(--bg); color: var(--danger-fg); border-color: var(--border-strong); } .btn-danger:hover { background: var(--danger-bg-soft); border-color: var(--danger-fg); } .btn-link { background: none; border: none; padding: 0; color: var(--link); font-weight: var(--fw-medium); } .btn-link:hover { text-decoration: underline; background: none; } .btn-sm { padding: 4px 10px; font-size: var(--fs-small); } /* --- Status indicator (dot + text) --------------------------------- */ .status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text); } .status::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-subtle); flex-shrink: 0; } .status-ok::before { background: var(--success-fg); } .status-warn::before { background: var(--warning-fg); } .status-bad::before { background: var(--danger-fg); } .status-muted::before { background: var(--text-subtle); } /* --- Meta tag (timestamp + state, hairline outlined) --------------- */ .meta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--fw-medium); } .meta-ok { color: var(--success-fg); border-color: var(--success-fg); } .meta-warn { color: var(--warning-fg); border-color: var(--warning-fg); } .meta-bad { color: var(--danger-fg); border-color: var(--danger-fg); } /* --- Chip (compact tag with status dot) ---------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--text-muted); background: var(--bg); white-space: nowrap; } .chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--text-subtle); flex-shrink: 0; } .chip-ok { color: var(--success-fg); border-color: var(--success-fg); } .chip-ok::before { background: var(--success-fg); } .chip-warn { color: var(--warning-fg); border-color: var(--warning-fg); } .chip-warn::before { background: var(--warning-fg); } .chip-critical { color: var(--danger-fg); border-color: var(--danger-fg); } .chip-critical::before { background: var(--danger-fg); } .chip-na { color: var(--text-subtle); border-color: var(--border); } .chip-na::before { background: var(--text-subtle); } /* --- Sync pill — outlined freshness capsule with a leading dot ------ * Render with a state modifier; flip to .syncing client-side while a * fetch is in flight. * .fresh green · .stale amber · .never red · .syncing blue · .unknown subtle */ .sync-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-muted); background: var(--bg); cursor: pointer; user-select: none; white-space: nowrap; } .sync-pill::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-subtle); } .sync-pill.fresh { color: var(--success-fg); border-color: var(--success-fg); } .sync-pill.fresh::before { background: var(--success-fg); } .sync-pill.stale { color: var(--warning-fg); border-color: var(--warning-fg); } .sync-pill.stale::before { background: var(--warning-fg); } .sync-pill.never { color: var(--danger-fg); border-color: var(--danger-fg); } .sync-pill.never::before { background: var(--danger-fg); } .sync-pill.syncing { color: var(--link); border-color: var(--link); cursor: wait; } .sync-pill.syncing::before { background: var(--link); } .sync-pill.unknown { color: var(--text-subtle); } .sync-pill.is-readonly { cursor: default; } /* --- Filter group (text-link pills) -------------------------------- */ .filter-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: baseline; margin-bottom: var(--space-4); } .filter-group { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); } /* Stack the label above the options by forcing it onto its own flex line. */ .filter-group .filter-label { flex: 0 0 100%; } .filter-group + .filter-group { margin-left: var(--space-2); } .filter-label { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-semibold); } .filter-link { background: none; border: none; padding: 2px 0; font-size: var(--fs-body); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; /* Constant weight; the active "bold" look is stamped with text-shadow so * glyph metrics don't reflow the row. */ font-weight: var(--fw-medium); text-decoration: none; transition: color 0.15s, border-color 0.15s, text-shadow 0.15s; } .filter-link:hover { color: var(--text); text-decoration: none; } .filter-link.active { color: var(--text); border-bottom-color: var(--text); text-shadow: 0.25px 0 0 currentColor; } /* --- Form controls ------------------------------------------------- */ .form-row { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); } .form-label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text); } .form-input, .search-input, input[type="text"].form-input, input[type="password"].form-input, input[type="email"].form-input, input[type="search"].form-input, select.form-input, textarea.form-input { display: block; width: 100%; padding: 8px 12px; font-size: var(--fs-body); color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: border-color 0.15s, box-shadow 0.15s; } .form-input:focus, .search-input:focus, select.form-input:focus, textarea.form-input:focus { outline: none; border-color: var(--text); } .form-help { font-size: var(--fs-small); color: var(--text-muted); } .form-error { color: var(--danger-fg); font-size: var(--fs-small); } .search-input { max-width: 320px; } /* Hint shown beside the search box only while a search term suspends active * filters (toggled via .is-visible by the table engine). */ .search-filter-hint { display: none; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--text-subtle); } .search-filter-hint.is-visible { display: inline-flex; } .search-filter-hint svg { display: block; } /* Inline status-select used in editable tables */ .status-select { padding: 4px 8px; font-size: var(--fs-small); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; } /* --- Toolbar (filter row + actions) -------------------------------- */ .toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); } .toolbar:last-of-type { margin-bottom: var(--space-4); } .toolbar-spacer { flex: 1; } .toolbar-meta { font-size: var(--fs-small); color: var(--text-muted); } .toolbar-meta strong { color: var(--text); font-weight: var(--fw-semibold); } .toolbar-actions { display: inline-flex; align-items: center; gap: var(--space-2); } /* --- Tables -------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); } .table thead th { text-align: left; font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); background: var(--bg); white-space: nowrap; } .table-sticky thead th { position: sticky; top: var(--topnav-height, 60px); z-index: 1; } .table tbody td { padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:hover { background: var(--hover); } .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--text); } /* Sort indicator: injected as by table.js. * SVG inherits currentColor; unsorted state is faded via opacity. */ .sort-indicator { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; color: currentColor; opacity: 0.4; transition: opacity 0.15s, color 0.15s; } .table th.sort-asc .sort-indicator, .table th.sort-desc .sort-indicator { opacity: 1; color: var(--text); } .table th.sortable:hover .sort-indicator { opacity: 0.85; } /* th font-size is 11px, so pin the icon to a readable absolute size. */ .sort-indicator svg { width: 14px; height: 14px; vertical-align: middle; } .col-filter-trigger svg { width: 14px; height: 14px; } .table .col-num { text-align: right; font-variant-numeric: tabular-nums; } .table .col-center { text-align: center; } .table .col-mono { font-family: var(--font-mono); font-size: var(--fs-small); } .cell-empty { color: var(--text-subtle); } /* Compact dot-only status indicator. */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); vertical-align: middle; background: var(--text-subtle); } /* Hide/show toggle (eye icon in column headers) — inline icon, no chrome. */ .hide-toggle { display: inline-flex; align-items: center; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; margin-left: 6px; vertical-align: middle; line-height: 0; } .hide-toggle:hover { color: var(--text); background: transparent; } .hide-toggle.is-off { color: var(--text-subtle); } .hide-toggle.is-off:hover { color: var(--text); } .hide-toggle svg { display: block; } /* Icon helper — use with inline 16x16 SVGs */ .icon { width: 1em; height: 1em; vertical-align: -0.15em; } /* --- Per-column filter dropdown (Excel-style) --------------------- * Don't set position:relative on .has-filter — it would clobber the * sticky pin on .table-sticky thead th, which already establishes a * containing block for the absolutely-positioned children. */ .table th.has-filter { padding-right: 32px; } .col-filter-trigger { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-subtle); cursor: pointer; border-radius: var(--radius-sm); line-height: 1; opacity: 0.7; transition: opacity 0.15s, color 0.15s, background 0.15s; } .col-filter-trigger:hover { background: var(--hover); color: var(--text); opacity: 1; } .col-filter-trigger.active { color: var(--link); opacity: 1; } .col-filter-trigger.active::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--link); } .col-filter-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 2px; min-width: 200px; max-width: 320px; max-height: 320px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); z-index: 100; padding: var(--space-2); text-align: left; text-transform: none; letter-spacing: normal; font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--text); } .col-filter-dropdown.show { display: block; } .col-filter-dropdown .col-filter-actions { display: flex; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); } .col-filter-dropdown .col-filter-actions button { font-size: var(--fs-micro); color: var(--text-muted); padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; } .col-filter-dropdown .col-filter-actions button:hover { background: var(--hover); color: var(--text); } .col-filter-dropdown label { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px; cursor: pointer; border-radius: var(--radius-sm); white-space: nowrap; } .col-filter-dropdown label:hover { background: var(--hover); } .col-filter-dropdown input[type="checkbox"] { margin: 0; cursor: pointer; } /* Value label truncates; the count stays pinned to the right edge. */ .col-filter-dropdown .col-filter-text { overflow: hidden; text-overflow: ellipsis; } .col-filter-dropdown .col-filter-count { margin-left: auto; padding-left: var(--space-2); font-size: var(--fs-micro); color: var(--text-muted); } /* --- Banner -------------------------------------------------------- */ .banner { padding: var(--space-3) var(--space-4); background: var(--surface-alt); border-left: 3px solid var(--text-subtle); color: var(--text); font-size: var(--fs-small); margin-bottom: var(--space-4); border-radius: var(--radius-sm); } .banner-info { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--link); } .banner-warn { border-left-color: var(--warning-fg); background: var(--warning-bg-soft); } .banner-error { border-left-color: var(--danger-fg); background: var(--danger-bg-soft); color: var(--danger-fg); } .banner strong { font-weight: var(--fw-semibold); } /* --- Empty state --------------------------------------------------- */ .empty { text-align: center; padding: var(--space-7) var(--space-5); color: var(--text-muted); } .empty-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text); margin-bottom: var(--space-2); } .empty-hint { font-size: var(--fs-small); color: var(--text-muted); } /* --- Modal --------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: var(--scrim); display: none; align-items: center; justify-content: center; z-index: 200; } .modal-backdrop.visible { display: flex; } .modal { background: var(--bg); border-radius: var(--radius-md); padding: var(--space-5); min-width: 360px; max-width: 480px; border: 1px solid var(--border); box-shadow: var(--shadow-modal); } .modal-header { margin-bottom: var(--space-4); } .modal-title { font-size: var(--fs-h2); font-weight: var(--fw-semibold); } .modal-body { margin-bottom: var(--space-4); } .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); } /* --- Toast --------------------------------------------------------- */ .toast { position: fixed; bottom: var(--space-5); right: var(--space-5); padding: 10px 16px; border-radius: var(--radius-md); background: var(--text); color: var(--bg); font-size: var(--fs-small); box-shadow: var(--shadow-dropdown); z-index: 1000; } .toast[hidden] { display: none; } .toast-success { background: var(--success-fg); color: var(--accent-text); } .toast-error { background: var(--danger-fg); color: var(--accent-text); } .toast-info { background: var(--text); color: var(--bg); } /* --- Misc utility -------------------------------------------------- */ .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-mono { font-family: var(--font-mono); } .text-small { font-size: var(--fs-small); } .text-micro { font-size: var(--fs-micro); } .text-right { text-align: right; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .section { margin-bottom: var(--space-6); } .section-title { font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); } .section-subtitle { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-4); } /* Stack helper for vertical spacing */ .stack > * + * { margin-top: var(--space-3); } .stack-lg > * + * { margin-top: var(--space-5); } /* ===================================================================== DETAIL PAGE LAYOUT --------------------------------------------------------------------- 2-column grid: sticky left rail (TOC) + main content column. The TOC anchors to
blocks in .detail-main; scrollspy lives in components/jinja/_detail_layout.html. Collapses to one column < 900px. ===================================================================== */ .detail-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); align-items: start; } .detail-toc { position: sticky; top: calc(var(--topnav-height, 60px) + var(--space-4)); align-self: start; font-size: var(--fs-small); border-left: 1px solid var(--border); padding-left: var(--space-3); } .detail-toc-label { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-semibold); margin-bottom: var(--space-2); } .detail-toc a { display: block; padding: 4px 0; color: var(--text-muted); border-left: 2px solid transparent; margin-left: -13px; padding-left: 11px; text-decoration: none; } .detail-toc a:hover { color: var(--text); text-decoration: none; } .detail-toc a.active { color: var(--text); border-left-color: var(--accent); font-weight: var(--fw-semibold); } .detail-main { min-width: 0; } .detail-main .section { scroll-margin-top: calc(var(--topnav-height, 60px) + var(--space-3)); } @media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } .detail-toc { position: static; border-left: 0; padding-left: 0; margin-bottom: var(--space-4); } } /* 2-column field grid for sections inside detail pages. Collapses < 700px. */ .detail-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } .detail-2col > .detail-col { display: flex; flex-direction: column; gap: var(--space-3); } .detail-2col > .detail-col > .filter-group { flex: 0 0 auto; } @media (max-width: 700px) { .detail-2col { grid-template-columns: 1fr; } }