/* ========================================================================== Dissolvex HRMS — design system -------------------------------------------------------------------------- Self-hosted. No CDN, no web fonts, no external requests of any kind. Two ideas carry the whole interface: 1. Neutrals do the work. The primary action colour is graphite (inverted in dark), not a brand hue — so dense payroll and attendance tables stay readable and colour keeps its meaning. 2. The tenant's brand colour is an ACCENT, not a paint bucket. It marks the active page, links, focus, and data. --brand-raw is injected per tenant on ; the dark variant is derived from it with color-mix so any customer hex stays legible on a dark ground. ========================================================================== */ :root { color-scheme: light; /* Injected per tenant; this is only the fallback. */ --brand-raw: #3E63DD; --brand: var(--brand-raw); --brand-soft: color-mix(in srgb, var(--brand-raw) 10%, transparent); --brand-line: color-mix(in srgb, var(--brand-raw) 32%, transparent); --bg: #FAFAFB; --surface: #FFFFFF; --surface-2: #F4F5F7; --surface-3: #EBEDF1; --border: #E3E5EA; --border-strong: #D0D4DB; --border-soft: #EDEFF3; --ink: #14161A; --ink-soft: #565C68; /* Secondary text carries real content (dates, totals, hints), so it is held at WCAG AA against --surface rather than being decoratively pale. */ --ink-faint: #6F7683; /* Primary action: near-black on light, near-white on dark. */ --action: #191C21; --action-hover: #2A2E36; --action-ink: #FFFFFF; --ok: #1B6E45; --ok-bg: #E4F2EA; --ok-line: #BEDDCC; --warn: #8A5A0B; --warn-bg: #FAF0DC; --warn-line: #EBD7AB; --bad: #A93226; --bad-bg: #FAE7E4; --bad-line: #EFC7C1; --info: #1F5A96; --info-bg: #E4EEF8; --info-line: #C2D8ED; --muted-bg: #EDEFF3; --muted-line: #DDE0E6; /* Categorical series. Ordered so neighbours stay distinguishable, and held dark enough to carry white text and to survive being printed in greyscale. */ --series-1: #3E63DD; --series-2: #1B8A6B; --series-3: #C2691E; --series-4: #8A4FBF; --series-5: #1F7A9E; --series-6: #B03A5B; --series-7: #6B7A2E; --series-8: #5A6472; --r-sm: 4px; --r: 6px; --r-lg: 9px; --shadow-pop: 0 10px 32px -8px rgba(15, 20, 28, .22), 0 2px 6px rgba(15, 20, 28, .06); /* Resting elevation. A card should sit on the page, not be drawn onto it — one hairline plus a shadow this soft reads as a surface where a 1px box reads as a wireframe. */ --shadow-card: 0 1px 2px rgba(15, 20, 28, .04), 0 1px 3px -1px rgba(15, 20, 28, .05); --rail-w: 68px; --panel-w: 196px; --utility-h: 44px; --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; } /* Dark tokens, defined once and applied in two situations: the OS asks for dark and the user has not overridden it, or the user explicitly chose dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --brand: color-mix(in srgb, var(--brand-raw) 62%, #E9EFFF); --brand-soft: color-mix(in srgb, var(--brand-raw) 22%, transparent); --brand-line: color-mix(in srgb, var(--brand-raw) 45%, transparent); --bg: #0C0E11; --surface: #14171C; --surface-2: #1A1E24; --surface-3: #222730; --border: #262B33; --border-strong: #363D48; --border-soft: #1E232B; --ink: #E7EAEF; --ink-soft: #9BA3B1; --ink-faint: #8A92A0; --action: #E7EAEF; --action-hover: #FFFFFF; /* Lifted and desaturated for a dark ground, where the light-mode values read as muddy against #14171C. */ --series-1: #7B96F0; --series-2: #4FC49C; --series-3: #E9A05C; --series-4: #B98AE0; --series-5: #5FB6D6; --series-6: #E0788F; --series-7: #A8B85F; --series-8: #98A2B3; --action-ink: #14161A; --ok: #63C48D; --ok-bg: #12251A; --ok-line: #1F4A34; --warn: #D8A85A; --warn-bg: #241D10; --warn-line: #4A3B1C; --bad: #E08579; --bad-bg: #261412; --bad-line: #4E2822; --info: #6FA8DC; --info-bg: #10202E; --info-line: #1F3D57; --muted-bg: #1E232A; --muted-line: #2C323B; --shadow-pop: 0 12px 34px -8px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35); --shadow-card: 0 1px 2px rgba(0, 0, 0, .3); } } :root[data-theme="dark"] { color-scheme: dark; --brand: color-mix(in srgb, var(--brand-raw) 62%, #E9EFFF); --brand-soft: color-mix(in srgb, var(--brand-raw) 22%, transparent); --brand-line: color-mix(in srgb, var(--brand-raw) 45%, transparent); --bg: #0C0E11; --surface: #14171C; --surface-2: #1A1E24; --surface-3: #222730; --border: #262B33; --border-strong: #363D48; --border-soft: #1E232B; --ink: #E7EAEF; --ink-soft: #9BA3B1; --ink-faint: #8A92A0; --action: #E7EAEF; --action-hover: #FFFFFF; /* Lifted and desaturated for a dark ground, where the light-mode values read as muddy against #14171C. */ --series-1: #7B96F0; --series-2: #4FC49C; --series-3: #E9A05C; --series-4: #B98AE0; --series-5: #5FB6D6; --series-6: #E0788F; --series-7: #A8B85F; --series-8: #98A2B3; --action-ink: #14161A; --ok: #63C48D; --ok-bg: #12251A; --ok-line: #1F4A34; --warn: #D8A85A; --warn-bg: #241D10; --warn-line: #4A3B1C; --bad: #E08579; --bad-bg: #261412; --bad-line: #4E2822; --info: #6FA8DC; --info-bg: #10202E; --info-line: #1F3D57; --muted-bg: #1E232A; --muted-line: #2C323B; --shadow-pop: 0 12px 34px -8px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35); --shadow-card: 0 1px 2px rgba(0, 0, 0, .3); } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: .875rem; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.014em; color: var(--ink); } h1 { font-size: 1.375rem; line-height: 1.25; } h2 { font-size: 1rem; line-height: 1.35; } h3 { font-size: .875rem; } p { margin: 0 0 .625rem; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .icon { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .icon-sm { width: 14px; height: 14px; } .icon-lg { width: 20px; height: 20px; } /* ========================================================================== Shell ========================================================================== */ .shell { display: flex; min-height: 100vh; } /* The content column. min-width:0 is load-bearing: without it a flex child refuses to shrink below the width of its widest content, so one wide table pushes the whole page into horizontal scroll. */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- Navigation: a rail of sections that never scrolls, and a panel for the one you are in. Forty links in a single scrolling column tells nobody where they are; nine sections and a short list does. -------------------------------------------------------------------------- */ .rail { width: var(--rail-w); flex: 0 0 var(--rail-w); background: var(--surface-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: .5rem .375rem; } .rail-brand { width: 34px; height: 34px; margin: .125rem auto .625rem; border-radius: var(--r); background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .02em; overflow: hidden; flex: 0 0 auto; } .rail-brand:hover { text-decoration: none; } .rail-brand img { width: 100%; height: 100%; object-fit: cover; } .rail-sections { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-height: 0; } .rail-foot { margin-top: auto; padding-top: .375rem; border-top: 1px solid var(--border); } .rail-item { display: flex; flex-direction: column; align-items: center; gap: .1875rem; padding: .4375rem .125rem .375rem; border-radius: var(--r-sm); color: var(--ink-faint); text-align: center; line-height: 1.1; position: relative; } .rail-item span { font-size: .5625rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-item .icon { width: 18px; height: 18px; } .rail-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .rail-item.is-current { color: var(--brand); background: var(--brand-soft); } .rail-item.is-current::before { content: ""; position: absolute; left: calc(-.375rem - 1px); top: 50%; transform: translateY(-50%); width: 2px; height: 22px; background: var(--brand); border-radius: 0 2px 2px 0; } /* The section panel ------------------------------------------------------- */ .panel { width: var(--panel-w); flex: 0 0 var(--panel-w); background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; padding-bottom: 1rem; } .panel::-webkit-scrollbar { width: 8px; } .panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } .panel-head { height: var(--utility-h); display: flex; align-items: center; padding: 0 .875rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; } .panel-org { min-width: 0; line-height: 1.2; } .panel-org-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: .8125rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-org-kind { display: block; font-size: .625rem; color: var(--ink-faint); } .panel-section { font-size: .625rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-faint); padding: .875rem .875rem .3125rem; } .panel-links { padding: 0 .5rem; display: flex; flex-direction: column; gap: 1px; } .panel-links a { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: var(--r-sm); color: var(--ink-soft); font-size: .8125rem; line-height: 1.35; } .panel-links a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .panel-links a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .panel-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-count { font-size: .625rem; font-weight: 600; background: var(--muted-bg); color: var(--ink-soft); padding: .0625rem .3125rem; border-radius: 20px; min-width: 17px; text-align: center; } .panel-links a.active .nav-count { background: var(--brand); color: #fff; } /* ========================================================================== Content ========================================================================== */ .content { padding: 1.25rem; flex: 1; } .content-narrow { max-width: 46rem; } .grid { display: grid; gap: .875rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); } .stack { display: flex; flex-direction: column; gap: .875rem; } .row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: .625rem; flex-wrap: wrap; } .spacer { flex: 1; } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: .625rem; padding: .6875rem .875rem; border-bottom: 1px solid var(--border); } .card-head h2 { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; } .card-head h3 { font-size: .8125rem; } .card-body { padding: .875rem; } .card-foot { padding: .625rem .875rem; border-top: 1px solid var(--border); background: var(--surface-2); font-size: .75rem; color: var(--ink-soft); } /* ========================================================================== Stats ========================================================================== */ .stat { padding: .875rem; } .stat-label { font-size: .625rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-faint); } .stat-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; margin-top: .25rem; color: var(--ink); } .stat-note { font-size: .75rem; color: var(--ink-faint); margin-top: .1875rem; } /* ========================================================================== Tables — ledger-like: hairline rows, no zebra, tabular figures ========================================================================== */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .8125rem; } table.data th { text-align: left; font-size: .625rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-faint); padding: .5rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; } table.data td { padding: .5625rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: var(--surface-2); } table.data td.num, table.data th.num { text-align: right; } /* Key/value tables inside cards read better without the sticky header chrome. */ .card-body table.data th { background: transparent; position: static; text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 500; color: var(--ink-faint); width: 40%; } .empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); font-size: .8125rem; } .empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .25rem; font-size: .875rem; } /* ========================================================================== Pills ========================================================================== */ .pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 600; line-height: 1.4; padding: .0625rem .375rem; border-radius: var(--r-sm); border: 1px solid transparent; white-space: nowrap; } .pill-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .pill-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .pill-bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); } .pill-info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); } .pill-muted { background: var(--muted-bg); color: var(--ink-soft); border-color: var(--muted-line); } /* ========================================================================== Buttons — graphite primary, quiet secondary ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .375rem .6875rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: .8125rem; font-weight: 500; font-family: inherit; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn-primary { background: var(--action); border-color: var(--action); color: var(--action-ink); font-weight: 600; } .btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); } .btn-danger { color: var(--bad); border-color: var(--bad-line); background: var(--surface); } .btn-danger:hover { background: var(--bad-bg); } .btn-ghost { border-color: transparent; background: transparent; color: var(--ink-soft); } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } .btn-sm { padding: .1875rem .4375rem; font-size: .75rem; } .btn-block { width: 100%; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ========================================================================== Forms ========================================================================== */ /* A 12-column grid so each field can take the width its content deserves. Spans are chosen by core/templatetags/form_extras.py from the widget type — dates and numbers stay narrow, prose runs full width, checkboxes get a row. */ .form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .875rem 1rem; max-width: 40rem; } .form-grid.is-wide { max-width: 58rem; } .field { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; } /* Two even columns by default, three when the form is wide. Mixing 4- and 6-column spans wrapped raggedly and left orphan fields stranded on their own row; even columns always pair up. Individual controls are capped below so a date still looks like a date inside its cell. */ .field.is-narrow, .field.is-mid { grid-column: span 6; } .form-grid.is-wide .field.is-narrow, .form-grid.is-wide .field.is-mid { grid-column: span 4; } .field.is-full { grid-column: span 12; } .field.is-check { grid-column: span 12; } .field-wide { grid-column: 1 / -1; } /* Short, known-length values should not stretch to fill their column. */ .field input[type="date"], .field input[type="time"], .field input[type="datetime-local"], .field input[type="number"] { max-width: 13rem; } .field label { font-size: .75rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .005em; } .field .req { color: var(--bad); margin-left: .125rem; font-weight: 700; } .field .help { font-size: .6875rem; color: var(--ink-faint); line-height: 1.45; } .field .error { font-size: .6875rem; color: var(--bad); font-weight: 500; } .form-input, .form-select { width: 100%; min-height: 2.25rem; padding: .4375rem .625rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: .8125rem; font-family: inherit; line-height: 1.45; transition: border-color .12s ease, box-shadow .12s ease; } .form-input::placeholder { color: var(--ink-faint); } .form-input:hover, .form-select:hover { border-color: var(--ink-faint); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .field.has-error .form-input, .field.has-error .form-select { border-color: var(--bad); } /* Native select chevrons are inconsistent across platforms; this one is drawn inline so it matches the rest of the UI and needs no network request. */ .form-select { appearance: none; -webkit-appearance: none; padding-right: 1.875rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.5l5-4.75' fill='none' stroke='%23808894' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .625rem center; background-size: 11px 8px; } select[multiple].form-select { background-image: none; padding-right: .625rem; } textarea.form-input { resize: vertical; min-height: 5.5rem; line-height: 1.55; } input[type="color"].form-input { padding: .1875rem; height: 2.25rem; cursor: pointer; max-width: 5rem; } /* The date picker glyph is near-invisible on a dark ground. */ :root[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(.75); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input::-webkit-calendar-picker-indicator { filter: invert(.75); } } input[type="file"].form-input { padding: .3125rem .5rem; cursor: pointer; } /* Checkboxes read as a decision, not as a field with a stray box next to it. */ .form-check { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; flex: 0 0 auto; margin: 0; } .check-row { display: flex; align-items: flex-start; gap: .5625rem; padding: .5625rem .6875rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); cursor: pointer; } .check-row:hover { border-color: var(--border-strong); } .check-row:has(:checked) { border-color: var(--brand-line); background: var(--brand-soft); } .check-text { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; } .check-title { font-size: .8125rem; font-weight: 500; color: var(--ink); line-height: 1.35; } ul.checkbox-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .375rem; } ul.checkbox-list li { display: flex; align-items: center; gap: .4375rem; font-size: .8125rem; } /* Actions sit on a tinted footer rather than floating under a hairline. */ .form-actions { display: flex; gap: .5rem; align-items: center; padding: .75rem .875rem; margin: .875rem -.875rem -.875rem; border-top: 1px solid var(--border); background: var(--surface-2); } .form-actions .spacer { flex: 1; } /* Inline QR. The generated SVG carries its own mm dimensions, so they are overridden here and the shapes are recoloured to follow the theme — a black QR on a dark surface is unscannable. */ .qr { flex: 0 0 auto; width: 140px; height: 140px; padding: .5rem; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--r-sm); } .qr svg { width: 100%; height: 100%; display: block; } .qr svg path { fill: #14161A; } @media (max-width: 720px) { .form-grid { grid-template-columns: repeat(4, 1fr); } .field.is-narrow, .field.is-mid, .field.is-full, .field.is-check { grid-column: span 4; } } .filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .875rem; } .filters .form-input, .filters .form-select { width: auto; min-width: 9rem; } /* ========================================================================== Messages ========================================================================== */ .messages { display: flex; flex-direction: column; gap: .4375rem; margin-bottom: .875rem; } .msg { padding: .5625rem .75rem; border-radius: var(--r-sm); font-size: .8125rem; border: 1px solid transparent; display: flex; gap: .5rem; align-items: flex-start; } .msg-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .msg-error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); } .msg-warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .msg-info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); } /* ========================================================================== Data viz ========================================================================== */ .bar-track { height: 5px; background: var(--muted-bg); border-radius: 20px; overflow: hidden; } .bar-fill { height: 100%; background: var(--brand); border-radius: 20px; } .bar-fill.is-warn { background: var(--warn); } .bar-fill.is-bad { background: var(--bad); } .chart { display: flex; align-items: flex-end; gap: .375rem; height: 6.5rem; padding-top: .375rem; } /* The column must be full height or the bar's percentage height has nothing to resolve against and every bar collapses to its min-height. */ .chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; } .chart-bar { width: 100%; max-width: 2.5rem; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 3px; } .chart-label { font-size: .625rem; color: var(--ink-faint); } .chart-value { font-size: .6875rem; font-weight: 600; color: var(--ink-soft); } /* ========================================================================== Lists, meta, misc ========================================================================== */ .list-plain { list-style: none; margin: 0; padding: 0; } .list-plain li { padding: .5rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; } .list-plain li:first-child { padding-top: 0; } .list-plain li:last-child { border-bottom: 0; padding-bottom: 0; } .meta { font-size: .75rem; color: var(--ink-faint); } .mono { font-family: var(--mono); font-size: .78em; letter-spacing: -.01em; } .strong { font-weight: 600; color: var(--ink); } .tiny { font-size: .6875rem; } .muted { color: var(--ink-faint); } .nowrap { white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } .person { display: flex; align-items: center; gap: .4375rem; min-width: 0; } .person-name { font-weight: 500; color: var(--ink); } a.person-name:hover { color: var(--brand); } .tabs { display: flex; gap: .125rem; border-bottom: 1px solid var(--border); margin-bottom: .875rem; flex-wrap: wrap; } .tabs a { padding: .4375rem .625rem; font-size: .8125rem; font-weight: 500; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: .3125rem; } .tabs a:hover { color: var(--ink); text-decoration: none; } .tabs a.active { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; } .board { display: grid; grid-template-columns: repeat(5, minmax(10rem, 1fr)); gap: .5rem; overflow-x: auto; } .board-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: .5rem; min-width: 10rem; } .board-col h4 { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .075em; color: var(--ink-faint); margin-bottom: .4375rem; } .board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .4375rem .5rem; margin-bottom: .3125rem; font-size: .75rem; } .board-card a { color: var(--ink); font-weight: 500; } /* ========================================================================== Notification bell + theme menu ========================================================================== */ .pop-wrap { position: relative; } .bell-dot { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 20px; background: var(--bad); color: #fff; font-size: .5625rem; font-weight: 700; display: grid; place-items: center; border: 1.5px solid var(--surface); } .pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 12rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop); z-index: 60; overflow: hidden; } .pop-wide { width: 20rem; } /* Opened by click, never by hover. These menus contain actions that change state — the appearance menu writes a preference. On hover, simply moving the pointer across the appearance button on the way to the bell drops the menu open underneath the cursor, and the click meant for the bell lands on a theme option instead. */ .pop-wrap.is-open .pop, .pop-wrap:focus-within .pop { display: block; } .pop-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .625rem; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: .75rem; } .pop-item { display: flex; gap: .4375rem; align-items: flex-start; padding: .5rem .625rem; border-bottom: 1px solid var(--border); color: var(--ink); font-size: .8125rem; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; cursor: pointer; } .pop-item:last-child { border-bottom: 0; } .pop-item:hover { background: var(--surface-2); text-decoration: none; } .pop-item.is-unread { background: var(--brand-soft); } .pop-item.is-current { color: var(--brand); font-weight: 600; } .pop-item .icon { color: var(--ink-faint); margin-top: 1px; } .pop-item.is-current .icon { color: var(--brand); } .pop-item-body { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; flex: 1; } /* ========================================================================== Timeline ========================================================================== */ .timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; position: relative; } .timeline::before { content: ""; position: absolute; left: 3px; top: .4rem; bottom: .4rem; width: 1px; background: var(--border-strong); } .timeline li { position: relative; padding: 0 0 .875rem .5rem; } .timeline li::before { content: ""; position: absolute; left: -1rem; top: .4rem; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--surface); } .timeline li:last-child { padding-bottom: 0; } /* ========================================================================== Formset rows ========================================================================== */ .line-rows { display: flex; flex-direction: column; gap: .625rem; } .line-row { border: 1px solid var(--border); border-radius: var(--r); padding: .6875rem; background: var(--surface-2); } /* ========================================================================== Auth screen ========================================================================== */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--bg); } .auth-inner { width: 100%; max-width: 21rem; } .auth-head { text-align: center; margin-bottom: 1.25rem; } .auth-head .brand-mark { width: 38px; height: 38px; margin: 0 auto .625rem; font-size: .875rem; } .auth-head h1 { font-size: 1.25rem; } /* ========================================================================== Payslip ========================================================================== */ .payslip-table { width: 100%; border-collapse: collapse; font-size: .8125rem; } .payslip-table th { text-align: left; font-size: .625rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-faint); padding: .375rem .5rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .payslip-table td { padding: .375rem .5rem; border-bottom: 1px solid var(--border); } .payslip-table td.num, .payslip-table th.num { text-align: right; } .payslip-total td { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: 0; color: var(--ink); } /* ========================================================================== Responsive & print ========================================================================== */ /* Below this the rail stays — it is only 68px and it is how you move between sections — but the section panel slides over the content on demand. */ @media (max-width: 1000px) { /* Narrow: the panel is an overlay that starts away and is summoned. The only class that means anything here is `panel-open`; `panel-hidden` is a wide-screen concept and app.js strips it at this width, so the two can never interact. */ .panel { position: fixed; left: var(--rail-w); top: 0; z-index: 50; transform: translateX(calc(-100% - var(--rail-w))); transition: transform .18s ease; box-shadow: var(--shadow-pop); } .shell.panel-open .panel { transform: translateX(0); } .board { grid-template-columns: repeat(5, 12rem); } .content { padding: 1rem; } .page-head-title h1 { font-size: 1.1875rem; } } /* On a phone the rail goes horizontal along the bottom, where a thumb is. */ @media (max-width: 640px) { .shell { flex-direction: column; } .rail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-top: 1px solid var(--border); padding: .25rem .375rem; z-index: 60; } .rail-brand, .rail-foot { display: none; } .rail-sections { flex-direction: row; gap: .125rem; } .rail-item { flex: 0 0 auto; min-width: 4rem; } .rail-item.is-current::before { display: none; } .panel { left: 0; transform: translateX(-100%); } .shell.panel-open .panel { transform: translateX(0); } .content { padding-bottom: 4.5rem; } .figure { flex-basis: 50%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* A printed payslip or report is the record, so everything that only helps you move around the app comes off the page. These names track the shell; the navigation was renamed once and printing quietly kept the old rail. */ @media print { .rail, .panel, .utilitybar, .filterbar, .routebar, .page-head-actions, .form-actions, .no-print, .impersonation-bar, .bootscreen { display: none !important; } body { background: #fff; color: #000; } .shell { display: block; } .main { display: block; } .content { padding: 0; } .card, .figures { border: 0; box-shadow: none; break-inside: avoid; } .table-wrap { overflow: visible; max-height: none; } table.data th { position: static; } a[href]::after { content: ""; } } /* ========================================================================== Impersonation banner ========================================================================== */ .impersonation-bar { background: var(--warn-bg); color: var(--warn); padding: .4375rem 1.25rem; font-size: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--warn-line); flex: 0 0 auto; } /* ========================================================================== Appraisals, timesheets, projects ========================================================================== */ /* Rating scale — a row of radio buttons that read as one segmented control. */ .rate-chip { position: relative; cursor: pointer; } .rate-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .rate-chip span { display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .8125rem; color: var(--ink-soft); transition: background .12s, border-color .12s, color .12s; } .rate-chip:hover span { border-color: var(--action); color: var(--ink); } .rate-chip input:checked + span { background: var(--action); border-color: var(--action); color: var(--action-ink); } .rate-chip input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; } /* Key result areas inside the template form. */ .grid-kra { grid-template-columns: 1fr 7rem 5rem auto; align-items: end; gap: .625rem; } .sub-row { padding: .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); } .stack-sm { display: flex; flex-direction: column; gap: .625rem; } /* Weekly timesheet. */ .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; } .week-day { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); padding: .5rem; min-height: 7rem; } .week-day.has-time { background: var(--surface); border-color: var(--border-strong); } .week-day-head { display: flex; flex-direction: column; gap: .125rem; padding-bottom: .375rem; margin-bottom: .375rem; border-bottom: 1px solid var(--border); } .week-day .list-plain li { padding: .375rem 0; font-size: .75rem; } /* Read-only people chips. */ .chip-row { display: flex; flex-wrap: wrap; gap: .375rem; } .chip { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem .1875rem .1875rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); font-size: .75rem; } .avatar-xs { width: 20px; height: 20px; font-size: .5rem; } .btn-xs { padding: .0625rem .3125rem; font-size: .6875rem; } .stat-value.accent { color: var(--brand); } .stat-value.danger { color: var(--bad); } @media (max-width: 1100px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-kra { grid-template-columns: 1fr 6rem; } } @media (max-width: 640px) { .week-grid { grid-template-columns: 1fr; } .grid-kra { grid-template-columns: 1fr; } } /* Permission matrix ------------------------------------------------------- */ .perm-grid td { vertical-align: middle; } .perm-grid tbody tr:hover { background: var(--surface-2); } .check-bare { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } .check-bare input { width: 16px; height: 16px; cursor: pointer; } /* Salary package table ---------------------------------------------------- */ .row-section td { font-size: .625rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-faint); background: var(--surface-2); } .row-total td { border-top: 1px solid var(--border-strong); } /* ========================================================================== Filter bar — one control per thing you might search by ========================================================================== */ .filterbar { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: .625rem .75rem; margin-bottom: .875rem; } /* Folded away until asked for. The browser's own disclosure, so it works with scripting off and keeps the keyboard behaviour already built in. */ .filterbox-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; cursor: pointer; list-style: none; } .filterbox-head::-webkit-details-marker { display: none; } .filterbox-head::marker { content: ""; } .filterbox-btn { display: inline-flex; align-items: center; gap: .4375rem; padding: .375rem .625rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: border-color .12s, background .12s; } .filterbox-head:hover .filterbox-btn { background: var(--surface-2); } /* The summary is the control, so the ring belongs on what looks like one. */ .filterbox-head:focus-visible { outline: none; } .filterbox-head:focus-visible .filterbox-btn { outline: 2px solid var(--brand); outline-offset: 2px; } .filterbox-btn .icon { width: .9375rem; height: .9375rem; } .filterbox-caret { opacity: .55; transition: transform .15s ease; } .filterbox[open] .filterbox-caret { transform: rotate(180deg); } .filter-count { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: 999px; background: var(--action); color: var(--action-ink); font-size: .6875rem; font-variant-numeric: tabular-nums; } /* What you could search by, without having to open it to find out. */ .filterbox-hint { font-size: .75rem; color: var(--ink-faint); min-width: 0; } .filterbar-fields { display: flex; flex-wrap: wrap; gap: .625rem .75rem; align-items: flex-end; } /* Only the folding bar gets the divider, which separates the fields from the summary above them. */ .filterbox .filterbar-fields { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-soft); } .filterbar .field { margin: 0; } .filterbar .field > label { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .25rem; } .filterbar .form-input, .filterbar .form-select { width: 100%; } .filter-narrow { flex: 0 1 9rem; min-width: 8rem; } .filter-normal { flex: 1 1 13rem; min-width: 11rem; max-width: 20rem; } .filter-wide { flex: 1 1 19rem; min-width: 16rem; } .filterbar .range { display: flex; align-items: center; gap: .375rem; } .filterbar .range .form-input { min-width: 0; } .range-sep { font-size: .75rem; color: var(--ink-faint); flex: 0 0 auto; } .filter-actions { display: flex; gap: .375rem; flex: 0 0 auto; align-self: flex-end; } .filterbar .field.has-error .form-input, .filterbar .field.has-error .form-select { border-color: var(--bad); } /* What is currently narrowing the list, each removable on its own. */ .filterbar-active { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .625rem; padding-top: .625rem; border-top: 1px solid var(--border-soft); } .chip-clear { text-decoration: none; color: var(--ink); gap: .3125rem; transition: border-color .12s, background .12s; } .chip-clear:hover { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); } .chip-clear .meta { font-size: .6875rem; } .filterbar-clear { font-size: .75rem; color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--border-strong); margin-left: .25rem; } .filterbar-clear:hover { color: var(--bad); border-bottom-color: var(--bad-line); } @media (max-width: 720px) { .filter-narrow, .filter-normal, .filter-wide { flex: 1 1 100%; max-width: none; } .filter-actions { flex: 1 1 100%; } .filter-actions .btn { flex: 1; } } /* What an access role actually grants ------------------------------------- */ .role-preview { margin-top: .5rem; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); } .role-preview-open { border-color: var(--warn-line); background: var(--warn-bg); } .role-preview-open .stat-label, .role-preview-open .help { color: var(--warn); } .role-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4375rem; } .role-preview .help { margin: .4375rem 0 0; } /* ========================================================================== Data surfaces ========================================================================== A list is the page, not a widget sitting on it. Cards that hold a table get treated as a surface rather than a box, and the clipping is removed, since an ancestor with overflow:hidden silently disables position:sticky. The header sticks to the top of the wrapper, not to the utility bar. A sticky element resolves against its nearest scrolling ancestor, and overflow-x:auto makes the wrapper exactly that — so an offset here does not hold the header below the utility bar, it just pushes it down that far and leaves a gap above every table. The wrapper is given a height instead, which makes it a scroller in its own right: long lists scroll inside the card with the header pinned, and short ones never reach the height, so they are untouched. -------------------------------------------------------------------------- */ .card:has(> .table-wrap) { overflow: visible; } .card:has(> .table-wrap) > .table-wrap { border-radius: 0 0 var(--r) var(--r); overflow: auto; /* Leaves room for the pager beneath, so paging controls never sit just below the fold on a short screen. */ max-height: calc(100vh - var(--utility-h) - 15rem); } .card:has(> .table-wrap) > .card-head + .table-wrap { border-radius: 0 0 var(--r) var(--r); } .card:has(> .table-wrap) table.data th { top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--border); } /* Breathing room at the edges so the first column lines up with the header above it rather than hugging the border. */ table.data th:first-child, table.data td:first-child { padding-left: .875rem; } table.data th:last-child, table.data td:last-child { padding-right: .875rem; } /* Rows are read in bulk all day, so they are tighter than a marketing table and the hover is a whole-row cue rather than a per-cell one. */ table.data tbody tr { transition: background .08s; } table.data tbody tr:hover { background: var(--surface-2); } /* A quiet header for lists that do not need a title bar at all. */ .card-head.is-quiet { border-bottom: 0; padding-bottom: .375rem; } /* ========================================================================== Detail layout — the record, and the facts about it beside it ========================================================================== */ .detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; align-items: start; } .detail-main { min-width: 0; display: flex; flex-direction: column; gap: .875rem; } .detail-rail { display: flex; flex-direction: column; gap: .875rem; position: sticky; top: calc(var(--utility-h) + 1rem); } /* Key/value pairs in the rail, without a table's chrome. */ .facts { display: flex; flex-direction: column; } .fact { display: flex; justify-content: space-between; gap: .75rem; padding: .4375rem 0; border-bottom: 1px solid var(--border-soft); font-size: .8125rem; } .fact:last-child { border-bottom: 0; } .fact-label { color: var(--ink-faint); flex: 0 0 auto; } .fact-value { text-align: right; min-width: 0; } @media (max-width: 1080px) { .detail { grid-template-columns: minmax(0, 1fr); } .detail-rail { position: static; } } /* ========================================================================== The utility strip and the page header ========================================================================== The strip carries only what is global — breadcrumb, appearance, notifications, account. A page's own title is not global, so it lives in the content column where it can sit beside the figures and actions it describes. -------------------------------------------------------------------------- */ .icon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; position: relative; padding: 0; font-family: inherit; flex: 0 0 auto; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); text-decoration: none; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--ink-soft); display: grid; place-items: center; font-size: .625rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--border); overflow: hidden; flex: 0 0 auto; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-lg { width: 52px; height: 52px; font-size: 1rem; } .avatar-xs { width: 20px; height: 20px; font-size: .5rem; } .utilitybar { display: flex; align-items: center; gap: .5rem; height: var(--utility-h); min-height: var(--utility-h); padding: 0 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20; flex: 0 0 auto; } .utilitybar-crumb { flex: 1 1 auto; min-width: 0; font-size: .6875rem; color: var(--ink-faint); } .utilitybar-crumb .crumb a { color: var(--ink-faint); } .utilitybar-crumb .crumb a:hover { color: var(--ink-soft); } .utilitybar-actions { display: flex; align-items: center; gap: .375rem; flex: 0 0 auto; } .utilitybar-actions > .pop-wrap { flex: 0 0 auto; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: .875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } .page-head-title { min-width: 0; flex: 1 1 16rem; } .page-head-title h1 { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; } .page-sub { margin-top: .1875rem; font-size: .8125rem; color: var(--ink-faint); max-width: 48rem; } .page-head-actions { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; flex: 0 0 auto; } /* A row of figures under the header — the numbers a page is about, stated once in a single frame rather than each wrapped in its own bordered box. */ .figures { display: flex; flex-wrap: wrap; margin: 0 0 1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; } .figure { flex: 1 1 9rem; min-width: 0; padding: .6875rem .875rem; border-right: 1px solid var(--border); } .figure:last-child { border-right: 0; } .figure-label { font-size: .625rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-faint); } .figure-value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; margin-top: .125rem; } .figure-value.accent { color: var(--brand); } .figure-value.warn { color: var(--warn); } .figure-value.danger { color: var(--bad); } .figure-note { font-size: .6875rem; color: var(--ink-faint); margin-top: .125rem; } /* ========================================================================== Charts ========================================================================== Every chart is inline SVG built from numbers worked out on the server, so it is in the HTML: it prints, it survives JavaScript being off, and its figures are readable as text in the legend beside it. -------------------------------------------------------------------------- */ .chart-donut { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: .25rem 0; } .donut { flex: 0 0 auto; transform: rotate(-90deg); } .donut-track { stroke: var(--surface-3); } .donut-seg { transition: stroke-width .12s; transform-origin: center; } .donut-seg:hover { stroke-width: calc(var(--thickness) + 2px); } .donut-total { transform: rotate(90deg); transform-origin: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; fill: var(--ink); letter-spacing: -.02em; } .legend { list-style: none; margin: 0; padding: 0; flex: 1 1 11rem; min-width: 0; } .legend li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .8125rem; border-bottom: 1px solid var(--border-soft); } .legend li:last-child { border-bottom: 0; } .legend-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; } .legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend-value { font-variant-numeric: tabular-nums; font-weight: 600; } .legend-share { color: var(--ink-faint); font-size: .75rem; min-width: 3rem; text-align: right; } .legend-inline { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .625rem; } .legend-inline li { border-bottom: 0; padding: 0; } /* Ranked bars ------------------------------------------------------------- */ .rankbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .rankbars li { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; } .rankbar-label { flex: 0 0 7.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rankbar-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 20px; overflow: hidden; } .rankbar-fill { display: block; height: 100%; border-radius: 20px; transform-origin: left; animation: grow-x .5s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(var(--i, 0) * 55ms); } .rankbar-value { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.5rem; text-align: right; } /* One bar in parts -------------------------------------------------------- */ .stackbar { display: flex; height: 12px; border-radius: 20px; overflow: hidden; background: var(--surface-3); gap: 2px; } .stackbar-seg { display: block; height: 100%; animation: grow-x .5s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(var(--i, 0) * 70ms); transform-origin: left; } .stackbar-seg:first-child { border-radius: 20px 0 0 20px; } .stackbar-seg:last-child { border-radius: 0 20px 20px 0; } /* Trend line -------------------------------------------------------------- */ .spark { width: 100%; height: 40px; overflow: visible; } .spark-line { fill: none; stroke: var(--series-1); stroke-width: 1.75; vector-effect: non-scaling-stroke; } .spark-area { fill: var(--series-1); opacity: .1; } .spark-tip { fill: var(--series-1); } .spark-up .spark-line, .spark-up .spark-tip { stroke: var(--ok); fill: var(--ok); } .spark-up .spark-area { fill: var(--ok); } .spark-up .spark-line { fill: none; } .spark-down .spark-line, .spark-down .spark-tip { stroke: var(--bad); fill: var(--bad); } .spark-down .spark-area { fill: var(--bad); } .spark-down .spark-line { fill: none; } @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .rankbar-fill, .stackbar-seg { animation: none; } } /* ========================================================================== Waiting ========================================================================== Three different waits, three different answers. A page change gets a thread at the top of the window. A table that has not arrived gets a shimmer in the shape of the table, so the layout does not jump when it does. The first paint of the whole app gets the mark drawing itself. -------------------------------------------------------------------------- */ /* 1. Navigation — a thread across the top, brand coloured. */ .routebar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, #FFFFFF) 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 60%, transparent); opacity: 0; transition: width .2s ease, opacity .2s ease; pointer-events: none; } .routebar.is-running { opacity: 1; } .routebar.is-done { width: 100% !important; opacity: 0; transition: width .12s ease, opacity .3s ease .1s; } /* 2. Content that has not arrived — the shape of what is coming. */ .skeleton { background: linear-gradient( 90deg, var(--surface-2) 0%, var(--surface-3) 42%, var(--surface-2) 84% ); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); color: transparent; user-select: none; } .skeleton-line { height: .75rem; margin: .3125rem 0; } .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; } .skeleton-block { height: 7rem; } .skeleton-circle { border-radius: 50%; width: 28px; height: 28px; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* 3. First paint — the monogram drawing itself, then lifting away. */ .bootscreen { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; gap: 1rem; background: var(--bg); animation: boot-out .35s ease .15s forwards; } .bootmark { width: 46px; height: 46px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; letter-spacing: .02em; position: relative; animation: boot-mark .5s cubic-bezier(.34,1.4,.64,1) backwards; } /* A ring that sweeps once around the mark while the page settles. */ .bootmark::after { content: ""; position: absolute; inset: -6px; border-radius: 14px; border: 2px solid transparent; border-top-color: var(--brand); animation: boot-spin .7s linear infinite; } .bootword { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); animation: boot-word .5s ease .12s backwards; } @keyframes boot-mark { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } } @keyframes boot-word { from { opacity: 0; } to { opacity: 1; } } @keyframes boot-spin { to { transform: rotate(360deg); } } @keyframes boot-out { to { opacity: 0; visibility: hidden; } } /* A button that is doing something says so, without changing size. */ .btn.is-busy { position: relative; color: transparent !important; pointer-events: none; } .btn.is-busy::after { content: ""; position: absolute; width: 13px; height: 13px; top: 50%; left: 50%; margin: -6.5px 0 0 -6.5px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--action-ink); animation: boot-spin .6s linear infinite; } .btn:not(.btn-primary).is-busy::after { color: var(--ink-soft); } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .bootmark, .bootword, .bootscreen { animation: none; } .bootmark::after { animation: none; border-top-color: transparent; } .routebar { transition: none; } } /* A change against a previous period, stated with its direction. */ .delta { font-weight: 600; font-variant-numeric: tabular-nums; } .delta-up { color: var(--ok); } .delta-down { color: var(--bad); } .delta-level { color: var(--ink-faint); } /* Surfaces rest on the page rather than being outlined onto it. */ .card, .figures, .filterbar { box-shadow: var(--shadow-card); } .card { border-color: var(--border-soft); } .card > .card-head { border-bottom-color: var(--border-soft); } /* ========================================================================== Collapsing the section panel ========================================================================== One control, two jobs, decided by how much room there is: on a wide screen it folds the panel away to give a wide table another 196px, and on a narrow one it slides the panel over the content. This sits after .icon-btn deliberately — the button carries both classes, and the later rule of equal specificity is the one that applies. -------------------------------------------------------------------------- */ .menu-toggle { display: grid; } /* Wide: the panel is part of the layout and folding it away gives a wide table another 196px. Scoped to this width on purpose — a media query adds no specificity, so an unscoped `display: none` here would also win inside the narrow block and leave the overlay permanently hidden. */ @media (min-width: 1001px) { .shell.panel-hidden .panel { display: none; } } @media (min-width: 1001px) { html.panel-was-hidden .panel { display: none; } } /* ========================================================================== The permission grid ========================================================================== A wide table of checkboxes is easy to lose your place in, so the whole cell is the target, the checkbox is sized up from the browser default, and the row a pointer is on is highlighted across its full width. -------------------------------------------------------------------------- */ /* A checkbox with no surrounding card — used where the row and column already say what it means, and a label beside it would only repeat them. */ .check-bare { display: grid; place-items: center; width: 100%; min-height: 2rem; margin: 0; cursor: pointer; border-radius: var(--r-sm); } .check-bare:hover { background: var(--surface-2); } .check-bare input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); cursor: pointer; } .check-bare input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Edit is disabled until View is on — say so rather than just ignoring clicks. */ .check-bare input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .35; } .check-bare:has(input:disabled) { cursor: not-allowed; } .check-bare:has(input:disabled):hover { background: transparent; } .perm-grid td { vertical-align: middle; } .perm-grid tbody tr:hover { background: var(--surface-2); } .perm-grid tbody tr:has(input:checked) td:first-child { box-shadow: inset 2px 0 0 var(--brand); } /* A value the person is meant to take away, with the means to take it. */ .copy-row { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .875rem; padding: .4375rem .5rem .4375rem .625rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); } .copy-row code { flex: 1; min-width: 0; font-size: .8125rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .copy-row code::-webkit-scrollbar { display: none; } .copy-row .btn { flex: 0 0 auto; } .copy-row .btn.is-done { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); } /* Numbered instructions that read as steps rather than a paragraph. */ .steps { margin: 0; padding-left: 1.15rem; display: grid; gap: .3125rem; font-size: .8125rem; color: var(--ink-soft); } .steps strong { color: var(--ink); } /* ========================================================================== Pager ========================================================================== Sits under a table rather than inside it, and only when there is more than one page — a list that fits needs no navigation. -------------------------------------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .625rem; margin-top: .75rem; } .pager-count { font-size: .75rem; color: var(--ink-faint); margin: 0; } .pager-count strong { color: var(--ink); font-variant-numeric: tabular-nums; } .pager-links { display: flex; align-items: center; gap: .1875rem; flex-wrap: wrap; } .pager-step, .pager-page { display: inline-grid; place-items: center; min-width: 1.875rem; height: 1.875rem; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); font-size: .8125rem; text-decoration: none; font-variant-numeric: tabular-nums; transition: border-color .12s, background .12s, color .12s; } .pager-step:hover, .pager-page:hover { background: var(--surface-2); color: var(--ink); } .pager-page.is-current { background: var(--action); border-color: var(--action); color: var(--action-ink); font-weight: 600; } .pager-step.is-off { opacity: .4; } .pager-gap { padding: 0 .25rem; color: var(--ink-faint); font-size: .8125rem; } @media (max-width: 560px) { .pager { justify-content: center; } .pager-count { width: 100%; text-align: center; } }