/* ========================================================================== Car Garage Website with Job Cards — application stylesheet -------------------------------------------------------------------------- Hand written, shipped as a static file. There is no build step: no Vite, no npm, no Tailwind. A buyer uploads this folder and it works. Layout : sidebar + topbar shell, collapses to a drawer under 900px Theme : light by default, dark through [data-theme="dark"] on Everything is driven by the custom properties in :root, so re-skinning a product for a niche is a matter of changing the tokens below. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- U+20C2 RUFIYAA SIGN -------------------------------------------------------------------------- The sign was encoded in Unicode 18.0, which is weeks old at the time of writing. Every font installed on the machine this was built on was read and its cmap searched: 341 fonts, none of them carry it. A buyer's VISITOR will have no better a font than that, so a product that wants to print the sign has to bring the glyph with it. That is what this 1 KB file is. `unicode-range` is what makes putting Rufiyaa first in every font stack free: the browser downloads this face only when the page actually contains U+20C2, and every other character in the document falls straight through to the real body font. Nothing else on the page changes. The outlines come from artwork supplied by Devcity, traced to curves and built into a font by tools/rufiyaa/build_rufiyaa_font.py, which is checked in beside the artwork so the font can be rebuilt rather than trusted. A buyer who would rather print plain letters sets the currency symbol to `Rf` in Settings, and none of this is used. ------------------------------------------------------------------------ */ @font-face { font-family: Rufiyaa; src: url("../fonts/rufiyaa.woff2?v=1.0.0") format("woff2"), url("../fonts/rufiyaa.woff?v=1.0.0") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+20C2; } /* -------------------------------------------------------------------------- ROBOTO, the type this product is set in -------------------------------------------------------------------------- One file, every weight. This is the VARIABLE face, so 100 to 900 comes out of 43 KB rather than out of five static files, and a heading can sit at 780 without shipping a seventh weight to get there. Self hosted rather than pulled from Google, for three reasons that all matter to a product somebody else installs: a buyer's site should not announce every visitor to a third party, a font that arrives over someone else's network is a font that fails on the day it does not, and a fetch to fonts.googleapis.com is a fetch a privacy notice has to declare. Licensed Apache 2.0, which permits bundling and redistribution — the whole point here, because every buyer receives their own copy and serves it to their own visitors. The licence text ships beside it in `public/fonts/roboto-LICENSE.txt` and must stay there. Split latin and latin-ext the way Google splits it: an ordinary English or Dhivehi page downloads 43 KB and never asks for the second file. --------- */ @font-face { font-family: Roboto; src: url("../fonts/roboto.woff2?v=1.0.0") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Roboto; src: url("../fonts/roboto-ext.woff2?v=1.0.0") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Rufiyaa first, scoped to U+20C2 by the @font-face above, so it costs nothing for every other character. See that block. */ --font-sans: Rufiyaa, Thaana, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef2ff; --accent-ink: #ffffff; --ink: #111827; --ink-2: #374151; --ink-3: #6b7280; --ink-4: #9ca3af; --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f3f4f6; --line: #e5e7eb; --line-2: #d1d5db; --ok: #047857; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb; --bad: #b91c1c; --bad-soft: #fef2f2; --info: #1d4ed8; --info-soft: #eff6ff; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06); --sidebar-w: 248px; --topbar-h: 60px; --sidebar-bg: #0f172a; --sidebar-ink: #c7d0e0; --sidebar-ink-strong: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.07); --sidebar-active: rgba(99, 102, 241, 0.22); --sidebar-line: rgba(255, 255, 255, 0.08); color-scheme: light; } html[data-theme="dark"] { --accent: #818cf8; --accent-hover: #a5b4fc; --accent-soft: #1e1b3a; --accent-ink: #0b1020; --ink: #f3f4f6; --ink-2: #d7dbe2; --ink-3: #9aa3b2; --ink-4: #7c8593; --bg: #0b1020; --surface: #121a2e; --surface-2: #17203a; --surface-3: #1d2745; --line: #24304f; --line-2: #33415f; --ok: #34d399; --ok-soft: #0c2a22; --warn: #fbbf24; --warn-soft: #2c2210; --bad: #f87171; --bad-soft: #2d1416; --info: #93b4fd; --info-soft: #14224a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.55); --sidebar-bg: #080d1a; --sidebar-ink: #a8b2c4; color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.18rem; } h3 { font-size: 1.02rem; } p { margin: 0 0 .85rem; } small { font-size: .82rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; } code, kbd, pre { font-family: var(--font-mono); font-size: .86em; } [hidden] { display: none !important; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .muted { color: var(--ink-3); } .small { font-size: .84rem; } .strong { font-weight: 600; } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; } .mono { font-family: var(--font-mono); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. App shell -------------------------------------------------------------------------- */ .shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-ink); display: flex; flex-direction: column; z-index: 60; transition: transform .18s ease; } .sidebar__brand { display: flex; align-items: center; gap: .6rem; height: var(--topbar-h); padding: 0 1rem; border-bottom: 1px solid var(--sidebar-line); color: var(--sidebar-ink-strong); font-weight: 650; letter-spacing: -0.01em; flex: 0 0 auto; } .sidebar__brand:hover { text-decoration: none; } .sidebar__logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 700; font-size: .82rem; overflow: hidden; flex: 0 0 auto; } .sidebar__logo img { width: 100%; height: 100%; object-fit: cover; } .sidebar__name { font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: .85rem .6rem 1.5rem; } .nav-heading { padding: .9rem .65rem .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); } .nav-link { display: flex; align-items: center; gap: .6rem; padding: .52rem .65rem; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--sidebar-ink); font-weight: 500; font-size: .92rem; } .nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-ink-strong); text-decoration: none; } .nav-link.is-active { background: var(--sidebar-active); color: var(--sidebar-ink-strong); font-weight: 600; } .nav-link svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; } .nav-link__badge { margin-left: auto; font-size: .72rem; font-weight: 600; background: rgba(255, 255, 255, .14); padding: 1px 7px; border-radius: 999px; } .sidebar__foot { padding: .7rem 1rem; border-top: 1px solid var(--sidebar-line); font-size: .76rem; color: var(--ink-4); flex: 0 0 auto; } .main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line); } /* The title shrinks; the user menu does not, or a long business name ellipsises the person's own name down to three letters. */ .topbar__title { font-weight: 600; font-size: .98rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__spacer { margin-left: auto; } .topbar .menu, .topbar .icon-btn { flex: 0 0 auto; } .icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--radius-sm); cursor: pointer; } .icon-btn:hover { background: var(--surface-3); color: var(--ink); } .icon-btn svg { width: 17px; height: 17px; } .burger { display: none; } .content { flex: 1 1 auto; padding: 1.35rem 1.25rem 3rem; max-width: 1400px; width: 100%; } /* -------------------------------------------------------------------------- 4. Breadcrumbs and page header -------------------------------------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; color: var(--ink-3); margin-bottom: .55rem; } .crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--accent); } .crumbs__sep { color: var(--ink-4); } .crumbs__current { color: var(--ink-2); font-weight: 500; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .85rem; margin-bottom: 1.15rem; } .page-head__text { min-width: 0; } .page-head h1 { margin-bottom: .15rem; } .page-head__sub { color: var(--ink-3); font-size: .9rem; margin: 0; } .page-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; } /* -------------------------------------------------------------------------- 5. Cards, grids, stats -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card + .card { margin-top: 1.1rem; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); } .card__head h2, .card__head h3 { margin: 0; font-size: .98rem; } .card__body { padding: 1.1rem; } .card__body--flush { padding: 0; } .card__foot { padding: .8rem 1.1rem; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); } .grid { display: grid; gap: 1.1rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* auto-fill, not auto-fit, for the tile rows: with auto-fit a single stat tile stretches the whole width of the page and reads as a broken card. */ .grid--3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } @media (max-width: 900px) { .grid--sidebar { grid-template-columns: 1fr; } } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.05rem; box-shadow: var(--shadow-sm); display: block; } a.stat:hover { border-color: var(--line-2); box-shadow: var(--shadow); text-decoration: none; } .stat__label { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .stat__value { font-size: 1.62rem; font-weight: 680; letter-spacing: -0.02em; color: var(--ink); margin-top: .3rem; } .stat__hint { font-size: .8rem; color: var(--ink-3); margin-top: .15rem; } .stat__icon { float: right; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .stat__icon svg { width: 17px; height: 17px; } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .49rem .9rem; font: inherit; font-size: .89rem; font-weight: 550; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, opacity .12s ease; } .btn:hover { background: var(--surface-3); text-decoration: none; } .btn svg { width: 15px; height: 15px; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn--danger:hover { opacity: .9; } .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--surface-3); color: var(--ink); } .btn--sm { padding: .3rem .6rem; font-size: .82rem; } .btn--block { width: 100%; } .btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* -------------------------------------------------------------------------- 7. Forms -------------------------------------------------------------------------- */ .form-grid { display: grid; gap: 1.05rem; grid-template-columns: repeat(12, minmax(0, 1fr)); } .field { grid-column: span 12; min-width: 0; } .field--half { grid-column: span 6; } .field--third { grid-column: span 4; } .field--quarter { grid-column: span 3; } @media (max-width: 760px) { .field--half, .field--third, .field--quarter { grid-column: span 12; } } .label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; } .label__req { color: var(--bad); margin-left: .15rem; } .input, .select, .textarea { width: 100%; padding: .52rem .7rem; font: inherit; font-size: .91rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease; } .textarea { min-height: 96px; resize: vertical; } .select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.3 7.3a1 1 0 011.4 0L10 10.6l3.3-3.3a1 1 0 111.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 18px; padding-right: 2rem; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .input::placeholder, .textarea::placeholder { color: var(--ink-4); } .input[disabled], .select[disabled], .textarea[disabled] { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; } /* A colour input is not a text box. The shared .input padding collapses the swatch to a hairline, so the two brand colour fields on the settings screen showed a thin grey line and nothing else. Found by screenshotting that screen and looking at it. */ .input[type="color"] { height: 42px; padding: 4px; cursor: pointer; box-shadow: none; } .input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; } .input-group { display: flex; } .input-group .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group__addon { display: inline-flex; align-items: center; padding: 0 .65rem; background: var(--surface-3); border: 1px solid var(--line-2); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--ink-3); font-size: .88rem; white-space: nowrap; } .help { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .28rem; } .error { display: block; font-size: .8rem; color: var(--bad); margin-top: .28rem; font-weight: 500; } .has-error .input, .has-error .select, .has-error .textarea { border-color: var(--bad); } .check { display: flex; align-items: flex-start; gap: .55rem; } .check input[type="checkbox"], .check input[type="radio"] { width: 16px; height: 16px; margin-top: .18rem; accent-color: var(--accent); } .check__text { font-size: .9rem; color: var(--ink-2); } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; } .file-drop { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: .85rem; background: var(--surface-2); display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .file-drop input[type="file"] { font-size: .86rem; color: var(--ink-2); } .file-preview { width: 58px; height: 58px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; } .file-preview img { width: 100%; height: 100%; object-fit: contain; } .file-preview svg { width: 22px; height: 22px; color: var(--ink-4); } .form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .form-actions .spacer { margin-left: auto; } /* -------------------------------------------------------------------------- 8. Tables -------------------------------------------------------------------------- */ .table-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); } .table-toolbar form { display: flex; gap: .5rem; flex: 1 1 260px; max-width: 420px; } .table-toolbar .input { box-shadow: none; } .table-toolbar__right { margin-left: auto; display: flex; gap: .5rem; align-items: center; } .table-wrap { overflow-x: auto; } /* The min-width is what makes the overflow above do anything. A table at width:100% with no floor does not overflow its wrapper, it SQUEEZES: on a 400px phone the first column came out about 55px wide and every service name was printed one word per line, with the status column still clipped off the right hand edge. With a floor the table keeps its shape and the wrapper scrolls, which is the behaviour the overflow rule was written for. Above about 640px the percentage wins and nothing changes. */ .table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9rem; } .table th, .table td { padding: .66rem .85rem; text-align: left; vertical-align: middle; } .table thead th { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .table tbody tr + tr td { border-top: 1px solid var(--line); } .table tbody tr:hover td { background: var(--surface-2); } .table td.right, .table th.right { text-align: right; } .table .col-actions { width: 1%; white-space: nowrap; text-align: right; } .table__sort { display: inline-flex; align-items: center; gap: .25rem; color: inherit; } .table__sort:hover { color: var(--accent); text-decoration: none; } .table__sort svg { width: 12px; height: 12px; opacity: .55; } .table__sort.is-sorted svg { opacity: 1; color: var(--accent); } .table--compact th, .table--compact td { padding: .45rem .7rem; } .row-actions { display: inline-flex; gap: .3rem; justify-content: flex-end; } .pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); } .pager { display: flex; gap: .25rem; flex-wrap: wrap; } .pager a, .pager span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: .85rem; } .pager a:hover { background: var(--surface-3); text-decoration: none; } .pager .is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .pager .is-disabled { opacity: .45; } /* -------------------------------------------------------------------------- 9. Detail (show) layout -------------------------------------------------------------------------- */ /* The label column is a share of the card, not a fixed width: 190px of a narrow sidebar card leaves the values squeezed against the right edge. */ .detail { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); } .detail > dt, .detail > dd { padding: .6rem .2rem; margin: 0; border-top: 1px solid var(--line); } .detail > dt { color: var(--ink-3); font-size: .85rem; font-weight: 600; } .detail > dd { color: var(--ink); font-size: .92rem; word-break: break-word; } .detail > dt:first-of-type, .detail > dd:nth-of-type(1) { border-top: 0; } @media (max-width: 620px) { .detail { grid-template-columns: 1fr; } .detail > dd { border-top: 0; padding-top: 0; } } /* -------------------------------------------------------------------------- 10. Badges, alerts, empty states -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--surface-3); color: var(--ink-2); border: 1px solid transparent; } .badge--ok { background: var(--ok-soft); color: var(--ok); } .badge--warn { background: var(--warn-soft); color: var(--warn); } .badge--bad { background: var(--bad-soft); color: var(--bad); } .badge--info { background: var(--info-soft); color: var(--info); } .badge--accent { background: var(--accent-soft); color: var(--accent); } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .alert { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); font-size: .89rem; margin-bottom: 1rem; } .alert svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .12rem; } .alert__body { min-width: 0; } .alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); } .alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); } .alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); } .alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); } .alert__close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1; opacity: .7; } .alert__close:hover { opacity: 1; } .empty { padding: 2.6rem 1.25rem; text-align: center; color: var(--ink-3); } .empty__icon { width: 46px; height: 46px; margin: 0 auto .8rem; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-4); } .empty__icon svg { width: 22px; height: 22px; } .empty h3 { color: var(--ink); margin-bottom: .25rem; } .empty p { margin-bottom: 1rem; } /* -------------------------------------------------------------------------- 11. Menus, modals -------------------------------------------------------------------------- */ .menu { position: relative; } .menu__trigger { display: inline-flex; align-items: center; gap: .5rem; padding: .28rem .45rem; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); font: inherit; } .menu__trigger:hover { background: var(--surface-3); } .menu__trigger .small { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .menu__panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .35rem; } .menu__panel--left { right: auto; left: 0; } .menu__head { padding: .5rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; } .menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .6rem; border: 0; background: none; font: inherit; font-size: .89rem; color: var(--ink-2); border-radius: var(--radius-sm); cursor: pointer; text-align: left; } .menu__item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .menu__item--danger { color: var(--bad); } .menu__item svg { width: 15px; height: 15px; opacity: .8; } .menu__sep { height: 1px; background: var(--line); margin: .3rem 0; } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 700; } .avatar--lg { width: 44px; height: 44px; font-size: 1rem; } .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 1.25rem; } .modal { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.25rem; } .modal h3 { margin-bottom: .35rem; } .modal__actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; } /* -------------------------------------------------------------------------- 12. Auth screens -------------------------------------------------------------------------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1000px 520px at 15% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(800px 420px at 95% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--bg); } .auth__box { width: 100%; max-width: 408px; } .auth__brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.1rem; font-weight: 680; font-size: 1.08rem; } .auth__brand .sidebar__logo { width: 34px; height: 34px; } .auth__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.6rem; } .auth__card h1 { font-size: 1.24rem; } .auth__sub { color: var(--ink-3); font-size: .89rem; margin-bottom: 1.25rem; } .auth__foot { text-align: center; margin-top: 1.1rem; font-size: .83rem; color: var(--ink-3); } /* -------------------------------------------------------------------------- 13. Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.is-open { transform: translateX(0); } .main { margin-left: 0; } .burger { display: inline-grid; } .content { padding: 1.1rem .9rem 2.5rem; } .scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 55; } } @media (max-width: 620px) { body { font-size: 14px; } .topbar { padding: 0 .85rem; } .topbar__title { display: none; } .page-head { flex-direction: column; align-items: stretch; } .page-head__actions .btn { flex: 1 1 auto; } .card__body { padding: .95rem; } .table th, .table td { padding: .55rem .6rem; } .form-actions .btn { flex: 1 1 auto; } } @media print { .sidebar, .topbar, .page-head__actions, .table-toolbar, .pagination-bar { display: none !important; } .main { margin-left: 0; } .card { border: 0; box-shadow: none; } body { background: #fff; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }