/* Home design system 1.4.14 */ /* Home design system: tokens. Every colour, size and timing the components use. Apps set two attributes on : data-app="energy" | "irrigation" | "grow" which accent to use (energy orange is the default) data-mode="light" | "dark" leave it off to follow the phone or computer Everything is prefixed --ds- so it can sit beside an app's own variables (321grow has its own --accent). */ /* ---------- Shared: type, space, shape, motion ---------- */ :root { --ds-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Type scale. Big numbers and headings are thin (200–300); labels are small, bold and uppercase. */ --ds-text-2xs: 10px; --ds-text-xs: 11px; --ds-text-sm: 12.5px; --ds-text-md: 13.5px; --ds-text-base: 15px; --ds-text-lg: 17px; --ds-text-xl: 22px; --ds-text-2xl: 30px; --ds-text-3xl: 38px; --ds-text-number: 38px; --ds-weight-thin: 200; --ds-weight-light: 300; --ds-weight-regular: 400; --ds-weight-medium: 600; --ds-weight-bold: 700; --ds-tracking-label: 0.13em; --ds-table-name-weight: 600; /* the pinned name column in tables */ /* Control heights: every button, field, dropdown, date and time field, search, stepper and switch uses one of these, so anything lined up in a row matches. Touchscreens get a little more height (see below). */ --ds-control-sm: 32px; --ds-control: 40px; --ds-control-lg: 48px; /* Space: a 4px step. */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; /* Corners. The five component radii can each be set on their own (999px makes a pill). */ --ds-radius-button: 999px; /* buttons, switches, day buttons */ --ds-radius-field: 999px; /* text fields, dropdowns, date and time fields */ --ds-radius-card: 18px; /* cards, dialogs, the rail's corners, phone sheets */ --ds-radius-tile: 16px; /* tiles inside cards */ --ds-radius-panel: 12px; /* popovers, menus, toasts, tooltips, banners */ --ds-radius-sm: 8px; /* small things: options, presets, legend keys */ --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 18px; --ds-radius-pill: 999px; /* Motion. --ds-motion speeds everything up or slows it down (0 turns animation off); --ds-motion-move scales how far things travel as they animate (0 means fade only). */ --ds-motion: 1; --ds-motion-move: 1; --ds-fast: calc(160ms * var(--ds-motion)); /* hovers, presses, small state changes */ --ds-base: calc(220ms * var(--ds-motion)); /* panels opening, things sliding into place */ --ds-slow: calc(300ms * var(--ds-motion)); /* larger movements, fades */ --ds-slower: calc(800ms * var(--ds-motion)); /* bars, rings and charts filling */ --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* the default: quick start, soft landing */ --ds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ds-ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* for things leaving */ --ds-ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1); --ds-shift: calc(8px * var(--ds-motion-move)); /* how far things slide in */ /* Layers */ --ds-z-sticky: 10; --ds-z-rail: 20; --ds-z-popover: 40; --ds-z-toast: 50; } /* ---------- Dark mode (the default, and what the apps look like today) ---------- */ :root, :root[data-mode="dark"] { color-scheme: dark; --ds-page: #1f232c; --ds-surface: #262b35; /* cards */ --ds-surface-raised: #2c323e; /* tiles inside cards, hover, selected */ --ds-overlay: #14171d; /* tooltips, toasts, popovers */ --ds-border: #343b48; --ds-border-strong: #465063; --ds-track: #343b49; /* empty part of bars and rings */ --ds-grid-line: #313845; --ds-row-stripe: #292d35; /* every other table row: a neutral grey, never tinted */ --ds-row-hover: #30343d; --ds-text-primary: #f3f5f9; --ds-text-secondary: #a9b1c1; --ds-text-muted: #6f788a; --ds-shadow-pop: 0 10px 30px rgb(0 0 0 / 0.4); --ds-backdrop: rgb(10 12 16 / 0.65); --ds-inverse: #f3f5f9; /* a reversed panel: light on a dark page */ --ds-on-inverse: #1b2029; /* Named colours for charts, flags and status. */ --ds-orange: #f26b3a; --ds-blue: #2fa6f0; --ds-pink: #e84a7f; --ds-amber: #f5b642; --ds-cyan: #22c3e6; --ds-green: #3fbf7f; --ds-violet: #9b7cf0; --ds-slate: #5b6579; --ds-ink: #e6eaf2; /* a "neutral" series, light on dark */ --ds-heat-empty: #2a303b; --ds-heat-lo: #2b3a52; --ds-heat-mid: #1f80d0; --ds-heat-hi: #8fd2ff; } /* ---------- Light mode: when asked for, or when the device is light and nothing was chosen ---------- */ :root[data-mode="light"] { color-scheme: light; --ds-page: #f2f4f7; --ds-surface: #ffffff; --ds-surface-raised: #f1f3f7; --ds-overlay: #ffffff; --ds-border: #e1e5ec; --ds-border-strong: #c9d0db; --ds-track: #e6e9ef; --ds-grid-line: #eceef2; --ds-row-stripe: #f7f7f8; --ds-row-hover: #eeeef0; --ds-text-primary: #1b2029; --ds-text-secondary: #4d5666; --ds-text-muted: #7c8596; --ds-shadow-pop: 0 12px 32px rgb(27 32 41 / 0.14), 0 0 0 1px rgb(27 32 41 / 0.04); --ds-backdrop: rgb(27 32 41 / 0.4); --ds-inverse: #1f232c; --ds-on-inverse: #f3f5f9; --ds-orange: #e8602e; --ds-blue: #1a8ad6; --ds-pink: #d6336c; --ds-amber: #d9971a; --ds-cyan: #0ea5c6; --ds-green: #23935a; --ds-violet: #7c5ce0; --ds-slate: #9aa3b2; --ds-ink: #2a303b; --ds-heat-empty: #eef0f4; --ds-heat-lo: #d6e9fa; --ds-heat-mid: #3b9be6; --ds-heat-hi: #0b4f8f; } @media (prefers-color-scheme: light) { :root:not([data-mode="dark"]) { color-scheme: light; --ds-page: #f2f4f7; --ds-surface: #ffffff; --ds-surface-raised: #f1f3f7; --ds-overlay: #ffffff; --ds-border: #e1e5ec; --ds-border-strong: #c9d0db; --ds-track: #e6e9ef; --ds-grid-line: #eceef2; --ds-row-stripe: #f7f7f8; --ds-row-hover: #eeeef0; --ds-text-primary: #1b2029; --ds-text-secondary: #4d5666; --ds-text-muted: #7c8596; --ds-shadow-pop: 0 12px 32px rgb(27 32 41 / 0.14), 0 0 0 1px rgb(27 32 41 / 0.04); --ds-backdrop: rgb(27 32 41 / 0.4); --ds-inverse: #1f232c; --ds-on-inverse: #f3f5f9; --ds-orange: #e8602e; --ds-blue: #1a8ad6; --ds-pink: #d6336c; --ds-amber: #d9971a; --ds-cyan: #0ea5c6; --ds-green: #23935a; --ds-violet: #7c5ce0; --ds-slate: #9aa3b2; --ds-ink: #2a303b; --ds-heat-empty: #eef0f4; --ds-heat-lo: #d6e9fa; --ds-heat-mid: #3b9be6; --ds-heat-hi: #0b4f8f; } } /* ---------- App themes: only the accent changes ---------- --ds-accent fills: buttons, the rail, feature tiles. White text sits on it (--ds-on-accent). --ds-accent-text the accent on the page itself: text, dots, lines, bars, rings and focus. Tuned to read on that mode's background. --ds-accent-hover a filled button under the pointer. */ :root { --ds-accent: #f26b3a; --ds-accent-hover: #ff7c4c; --ds-accent-text: #f6814f; --ds-on-accent: #ffffff; } :root[data-app="irrigation"] { --ds-accent: #0f9fc4; --ds-accent-hover: #17b1d8; --ds-accent-text: #3ccbea; --ds-on-accent: #ffffff; } :root[data-app="grow"] { /* 321grow: a lime-leaning green that still carries white text (4.7:1), with brand lime as the highlight on dark pages. */ --ds-accent: #557f0e; --ds-accent-hover: #5f8c12; --ds-accent-text: #c3cf0a; --ds-on-accent: #ffffff; } /* Light mode accents: a little deeper so text and lines hold their contrast on white. */ :root[data-mode="light"] { --ds-accent: #ea5f2c; --ds-accent-hover: #d9531f; --ds-accent-text: #cf4f1c; } :root[data-mode="light"][data-app="irrigation"] { --ds-accent: #0a8fb3; --ds-accent-hover: #087fa0; --ds-accent-text: #0a7e9e; } :root[data-mode="light"][data-app="grow"] { --ds-accent: #557f0e; --ds-accent-hover: #4a7012; --ds-accent-text: #4a7512; } @media (prefers-color-scheme: light) { :root:not([data-mode="dark"]) { --ds-accent: #ea5f2c; --ds-accent-hover: #d9531f; --ds-accent-text: #cf4f1c; } :root:not([data-mode="dark"])[data-app="irrigation"] { --ds-accent: #0a8fb3; --ds-accent-hover: #087fa0; --ds-accent-text: #0a7e9e; } :root:not([data-mode="dark"])[data-app="grow"] { --ds-accent: #557f0e; --ds-accent-hover: #4a7012; --ds-accent-text: #4a7512; } } /* Derived from the accent, so they follow whichever theme and mode is on. */ :root { --ds-accent-soft: color-mix(in srgb, var(--ds-accent-text) 14%, transparent); --ds-accent-line: color-mix(in srgb, var(--ds-accent-text) 45%, transparent); --ds-focus: var(--ds-accent-text); --ds-danger: var(--ds-pink); --ds-danger-soft: color-mix(in srgb, var(--ds-pink) 10%, transparent); --ds-danger-line: color-mix(in srgb, var(--ds-pink) 50%, transparent); --ds-warning: var(--ds-amber); --ds-success: var(--ds-green); /* Solid status fills, dark enough (or light enough) for the text on them. */ --ds-fill-danger: #d12f62; --ds-on-danger: #ffffff; --ds-fill-success: #1c8048; --ds-on-success: #ffffff; --ds-fill-info: #1a76bd; --ds-on-info: #ffffff; --ds-fill-warning: #f2b234; --ds-on-warning: #2b1d00; } /* ---------- Motion setting: data-motion="full|reduced|off" on ; nothing set follows the device ---------- Reduced keeps fades and colour changes but drops movement; off stops animation altogether. */ :root[data-motion="reduced"] { --ds-motion: 0.7; --ds-motion-move: 0; } :root[data-motion="off"] { --ds-motion: 0; --ds-motion-move: 0; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion]) { --ds-motion: 0.7; --ds-motion-move: 0; } } /* Touchscreens: taller controls so they're easy to tap (44px is Apple's guide), still all matching. */ @media (pointer: coarse) { :root { --ds-control-sm: 36px; --ds-control: 44px; --ds-control-lg: 52px; } } /* Saved from the gallery's Tweak panel. Edit by tweaking and applying again, or ask Claude. */ /* Home design system: components. All classes start ds- so they never clash with an app's own. */ /* ---------- Type helpers ---------- */ .ds-display { font-size: var(--ds-text-3xl); line-height: 1.1; font-weight: var(--ds-weight-thin); letter-spacing: -0.01em; } .ds-title { font-size: var(--ds-text-xl); line-height: 1.25; font-weight: var(--ds-weight-light); letter-spacing: -0.005em; } .ds-eyebrow, .ds-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-muted); margin: 0; } .ds-label { color: var(--ds-text-secondary); } .ds-muted { color: var(--ds-text-secondary); font-size: var(--ds-text-md); margin: 4px 0 0; } .ds-footnote { color: var(--ds-text-muted); font-size: 12px; margin: 14px 0 0; } .ds-number { font-weight: var(--ds-weight-thin); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; } .ds-unit { font-size: 14px; font-weight: var(--ds-weight-light); color: var(--ds-text-secondary); margin-left: 4px; letter-spacing: 0; } .ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- App frame: accent rail on the left (a top bar on phones), content on the right ---------- */ .ds-app { display: grid; grid-template-columns: 88px minmax(0, 1fr); min-height: 100vh; } .ds-main { max-width: 1800px; width: 100%; margin: 0 auto; padding: 34px clamp(20px, 3vw, 56px) 90px; display: grid; gap: 22px; align-content: start; } .ds-main > * { min-width: 0; } .ds-rail { position: sticky; top: 0; height: 100vh; z-index: var(--ds-z-rail); background: var(--ds-accent); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 0; border-radius: 0; /* square: the rail runs the full height of the window */ } .ds-rail svg { width: 22px; height: 22px; fill: none; stroke: var(--ds-on-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ds-fast) ease; } .ds-rail a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 10px 0; position: relative; color: color-mix(in srgb, var(--ds-on-accent) 78%, transparent); text-decoration: none; font-size: 9.5px; font-weight: var(--ds-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; } .ds-rail a:hover, .ds-rail a[aria-current], .ds-rail a.active { color: var(--ds-on-accent); } .ds-rail a:hover svg { transform: scale(1.05); } .ds-rail a[aria-current]::after, .ds-rail a.active::after { content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 2px; background: var(--ds-on-accent); } .ds-rail a:focus-visible { outline: 2px solid var(--ds-on-accent); outline-offset: -4px; border-radius: var(--ds-radius-sm); } .ds-rail .ds-rail-logo { margin-bottom: 26px; } .ds-rail .ds-rail-logo svg { width: 34px; height: 34px; stroke-width: 1.5; } @media (max-width: 760px) { .ds-app { grid-template-columns: minmax(0, 1fr); } .ds-rail { position: fixed; top: 0; left: 0; right: 0; height: auto; flex-direction: row; justify-content: space-around; padding: calc(6px + env(safe-area-inset-top)) 4px 6px; border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card); transition: transform var(--ds-base) var(--ds-ease); } .ds-rail.ds-rail-away { transform: translateY(calc(-100% - 4px)); } /* ds.js moves the bar with the scroll itself (.ds-rail-follow), so no transition while it follows, and a soft one when it settles fully in or out (.ds-rail-settle). */ .ds-rail.ds-rail-follow { transition: none; will-change: transform; } .ds-rail.ds-rail-follow.ds-rail-settle { transition: transform var(--ds-base) var(--ds-ease); } .ds-rail .ds-rail-logo { display: none; } .ds-rail a { padding: 6px 0; font-size: 8.5px; } .ds-rail a[aria-current]::after, .ds-rail a.active::after { left: 30%; right: 30%; top: auto; bottom: 0; width: auto; height: 2px; } .ds-main { padding: calc(var(--ds-rail-h, 64px) + 18px) 16px 70px; gap: 16px; } } @media (prefers-reduced-motion: reduce) { .ds-rail, .ds-rail svg { transition: none; } } .ds-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } /* ---------- Cards and tiles ---------- */ .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); padding: 26px 26px 22px; } .ds-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .ds-headline { text-align: right; } .ds-headline .ds-number { font-size: 34px; } .ds-headline small { display: block; font-size: 12px; color: var(--ds-text-muted); } @media (max-width: 600px) { .ds-card { padding: 18px 16px 16px; } .ds-headline { text-align: left; width: 100%; } } .ds-tiles { display: grid; grid-template-columns: repeat(var(--ds-cols, 4), minmax(0, 1fr)); gap: 14px; } @media (max-width: 1000px) { .ds-tiles { grid-template-columns: repeat(min(var(--ds-cols, 4), 3), minmax(0, 1fr)); } } @media (max-width: 560px) { .ds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ds-tile { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-tile); padding: 16px 18px; } .ds-card .ds-tile { background: var(--ds-surface-raised); border-color: transparent; } .ds-tile .ds-label { display: flex; align-items: center; gap: 8px; } .ds-tile .ds-number { font-size: var(--ds-text-number); margin-top: 8px; } .ds-tile .ds-unit { vertical-align: top; } .ds-tile .ds-note { color: var(--ds-text-muted); font-size: var(--ds-text-sm); margin-top: 8px; } .ds-tile.ds-feature, .ds-card .ds-tile.ds-feature { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } .ds-tile.ds-feature .ds-label, .ds-tile.ds-feature .ds-unit, .ds-tile.ds-feature .ds-note { color: color-mix(in srgb, var(--ds-on-accent) 82%, transparent); } button.ds-tile { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; } button.ds-tile:hover { border-color: var(--ds-text-muted); } button.ds-tile[aria-pressed="true"], button.ds-tile[aria-selected="true"] { border-color: var(--ds-accent-text); background: var(--ds-accent-soft); } .ds-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: var(--ds-dot, var(--ds-accent-text)); } .ds-progress { height: 4px; border-radius: 2px; background: var(--ds-track); margin-top: 12px; overflow: hidden; } .ds-progress > span { display: block; height: 100%; width: var(--ds-value, 0%); background: var(--ds-bar, var(--ds-accent-text)); border-radius: 2px; transition: width var(--ds-slower) var(--ds-ease); } /* ---------- Buttons ---------- */ .ds-btn { font: inherit; font-size: var(--ds-text-md); font-weight: var(--ds-weight-medium); line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ds-radius-button); padding: 0 20px; height: var(--ds-h, var(--ds-control)); cursor: pointer; white-space: nowrap; text-decoration: none; background: none; color: var(--ds-text-primary); border: 1px solid var(--ds-border-strong); transition: background var(--ds-fast) ease, border-color var(--ds-fast) ease, color var(--ds-fast) ease; } .ds-btn:hover { border-color: var(--ds-text-secondary); } .ds-btn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; } .ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; } .ds-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ds-btn-primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } .ds-btn-primary:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); } .ds-btn-danger { color: var(--ds-danger); border-color: var(--ds-danger-line); } .ds-btn-danger:hover { border-color: var(--ds-danger); background: var(--ds-danger-soft); } .ds-btn-danger-solid { background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; } .ds-btn-danger-solid:hover { background: color-mix(in srgb, var(--ds-danger) 88%, #000); } .ds-btn-ghost { border-color: transparent; color: var(--ds-text-secondary); } .ds-btn-ghost:hover { background: var(--ds-surface-raised); border-color: transparent; color: var(--ds-text-primary); } /* Ghost and danger together: red text, no border, a soft red on hover (delete, archive, remove). */ .ds-btn-ghost.ds-btn-danger { color: var(--ds-danger); border-color: transparent; } .ds-btn-ghost.ds-btn-danger:hover { color: var(--ds-danger); background: var(--ds-danger-soft); border-color: transparent; } .ds-btn-sm { --ds-h: var(--ds-control-sm); font-size: 12.5px; padding: 0 14px; } .ds-btn-lg { --ds-h: var(--ds-control-lg); font-size: 15px; padding: 0 26px; } .ds-btn-icon { padding: 0; width: var(--ds-h, var(--ds-control)); } .ds-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* ---------- Segmented switch ---------- */ .ds-switch { display: inline-flex; align-items: stretch; height: var(--ds-h, var(--ds-control)); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-button); padding: 3px; background: var(--ds-page); gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ds-switch button { flex: none; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; font-weight: var(--ds-weight-medium); border: 0; background: none; color: var(--ds-text-muted); padding: 0 16px; border-radius: max(0px, calc(var(--ds-radius-button) - 3px)); cursor: pointer; transition: background var(--ds-fast) ease, color var(--ds-fast) ease; } .ds-switch button:hover { color: var(--ds-text-primary); } .ds-switch button[aria-pressed="true"] { background: var(--ds-surface-raised); color: var(--ds-text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); } .ds-switch button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; } :root[data-mode="light"] .ds-switch button[aria-pressed="true"] { background: var(--ds-surface); } @media (prefers-color-scheme: light) { :root:not([data-mode="dark"]) .ds-switch button[aria-pressed="true"] { background: var(--ds-surface); } } /* The gliding highlight (added by ds.js). Without it, the pressed button lights up on its own as above. */ .ds-switch { position: relative; isolation: isolate; } .ds-switch-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: max(0px, calc(var(--ds-radius-button) - 3px)); background: var(--ds-surface-raised); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.08); transition: transform var(--ds-base) var(--ds-ease), width var(--ds-base) var(--ds-ease), opacity var(--ds-fast) ease; will-change: transform, width; } .ds-switch-thumb.ds-thumb-still { transition: none; } .ds-switch.ds-has-thumb > button[aria-pressed="true"] { background: transparent; box-shadow: none; } .ds-switch > button { position: relative; transition: color var(--ds-base) var(--ds-ease); } :root[data-mode="light"] .ds-switch-thumb { background: var(--ds-surface); box-shadow: 0 1px 2px rgb(27 32 41 / 0.12), 0 0 0 1px rgb(27 32 41 / 0.04); } @media (prefers-color-scheme: light) { :root:not([data-mode="dark"]) .ds-switch-thumb { background: var(--ds-surface); box-shadow: 0 1px 2px rgb(27 32 41 / 0.12), 0 0 0 1px rgb(27 32 41 / 0.04); } } @media (max-width: 600px) { .ds-switch.ds-switch-fill { display: flex; flex-wrap: nowrap; width: 100%; } .ds-switch.ds-switch-fill button { flex: 1 1 auto; justify-content: center; font-size: 12px; padding: 0 8px; white-space: nowrap; } } /* ---------- Fields ---------- */ .ds-field { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-field); padding: 0 14px; height: var(--ds-h, var(--ds-control)); background: var(--ds-page); color: var(--ds-text-secondary); font-size: 13px; transition: border-color var(--ds-fast) ease; } .ds-field:hover { border-color: var(--ds-border-strong); } .ds-field:focus-within { border-color: var(--ds-accent-text); box-shadow: 0 0 0 3px var(--ds-accent-soft); } .ds-field input, .ds-field select { font: inherit; font-size: 14px; color: var(--ds-text-primary); background: none; border: 0; padding: 3px 0; outline: none; min-width: 0; flex: 1; } .ds-field input::placeholder { color: var(--ds-text-muted); } .ds-field input[type="number"] { width: 3.4em; flex: none; text-align: right; font-variant-numeric: tabular-nums; } /* No browser up/down arrows: they're cramped and off-brand. Use when people need to count up and down. */ .ds-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .ds-field input[type="number"]::-webkit-inner-spin-button, .ds-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ds-field svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; } .ds-field[aria-invalid="true"], .ds-field.ds-invalid { border-color: var(--ds-danger); } /* States: disabled, read-only and confirmed. */ .ds-field:has(input:disabled, select:disabled) { opacity: 0.5; cursor: not-allowed; } .ds-field:has(input:disabled, select:disabled) * { cursor: not-allowed; } .ds-field:has(input[readonly]) { background: transparent; border-style: dashed; } .ds-field.ds-valid { border-color: var(--ds-success); } .ds-hint.ds-ok { color: var(--ds-success); } /* Something fixed at either end: a unit, a prefix like $, or a small button. */ .ds-field .ds-affix { color: var(--ds-text-muted); font-size: 13px; flex: none; } .ds-field .ds-btn { --ds-h: calc(var(--ds-control) - 10px); margin-right: -10px; padding: 0 14px; font-size: 12.5px; } .ds-field-sm .ds-btn, .ds-controls-sm .ds-field .ds-btn { --ds-h: calc(var(--ds-control-sm) - 8px); } .ds-field-lg .ds-btn, .ds-controls-lg .ds-field .ds-btn { --ds-h: calc(var(--ds-control-lg) - 12px); } /* Label, control, then any hint: always the same spacing, packed to the top, so a long hint in one field never pushes its neighbours around. */ .ds-field-block { display: grid; gap: 6px; align-content: start; align-self: start; } .ds-field-block .ds-field { display: flex; } .ds-hint { font-size: 12px; color: var(--ds-text-muted); } .ds-hint.ds-error { color: var(--ds-danger); } .ds-control-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; } /* Checkbox and radio: drawn by the design system so they look the same everywhere, with a fine tick. Use .ds-checkbox on any checkbox (or put it inside .ds-check, a table settings row, or a dropdown). */ .ds-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; } input.ds-checkbox, .ds-check input[type="checkbox"], .ds-panel-row input[type="checkbox"], .ds-check input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-content: center; background: transparent; border: 1.5px solid var(--ds-border-strong); border-radius: 5px; transition: background var(--ds-fast) ease, border-color var(--ds-fast) ease; } input.ds-checkbox::before, .ds-check input[type="checkbox"]::before, .ds-panel-row input[type="checkbox"]::before { content: ""; width: 8px; height: 4.5px; border-left: 1.6px solid var(--ds-on-accent); border-bottom: 1.6px solid var(--ds-on-accent); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--ds-fast) var(--ds-ease); } input.ds-checkbox:hover, .ds-check input:hover, .ds-panel-row input[type="checkbox"]:hover { border-color: var(--ds-text-secondary); } input.ds-checkbox:checked, .ds-check input[type="checkbox"]:checked, .ds-panel-row input[type="checkbox"]:checked { background: var(--ds-accent); border-color: var(--ds-accent); } input.ds-checkbox:checked::before, .ds-check input[type="checkbox"]:checked::before, .ds-panel-row input[type="checkbox"]:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); } .ds-check input[type="radio"] { border-radius: 50%; } .ds-check input[type="radio"]:checked { border: 5px solid var(--ds-accent); } input.ds-checkbox:disabled, .ds-check input:disabled, .ds-panel-row input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; } input.ds-checkbox:focus-visible, .ds-check input:focus-visible, .ds-panel-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; } /* On/off toggle: a checkbox styled as a slider. */ .ds-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; } .ds-toggle input { appearance: none; -webkit-appearance: none; margin: 0; width: 40px; height: 24px; border-radius: 999px; background: var(--ds-track); position: relative; cursor: pointer; transition: background var(--ds-fast) ease; flex: none; } .ds-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform var(--ds-base) var(--ds-ease); } .ds-toggle input:checked { background: var(--ds-accent); } .ds-toggle input:checked::after { transform: translateX(16px); } .ds-toggle input:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; } /* ---------- Status ---------- */ /* Flag: a small outlined pill for states like "Smart", "Over limit". */ .ds-flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-flag, var(--ds-text-secondary)); border: 1px solid currentColor; border-radius: var(--ds-radius-pill); padding: 2px 9px; line-height: 1.5; white-space: nowrap; } .ds-flag-accent { --ds-flag: var(--ds-accent-text); } .ds-flag-danger { --ds-flag: var(--ds-danger); } .ds-flag-warning { --ds-flag: var(--ds-warning); } .ds-flag-success { --ds-flag: var(--ds-success); } .ds-flag-info { --ds-flag: var(--ds-blue); } /* Solid flags: filled with the flag colour (the app's accent by default), text reversed out. For key identifiers such as a seed packet number. */ .ds-flag-solid { color: var(--ds-on-accent); background: var(--ds-flag, var(--ds-accent)); border-color: var(--ds-flag, var(--ds-accent)); letter-spacing: 0.04em; } /* Small flags: for table cells (automatic inside , except solid flags, which are key identifiers and keep the regular size) and tight rows. Same smallest text size (--ds-text-2xs), less padding and spacing. */ .ds-flag-sm, .ds-table-scroll td .ds-flag:not(.ds-flag-solid) { letter-spacing: 0.08em; padding: 0 7px; line-height: 1.6; gap: 4px; } /* Live pill: a dot with a soft halo and a short line of text. */ .ds-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ds-text-sm); color: var(--ds-text-secondary); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill); padding: 7px 14px; margin: 0; font-variant-numeric: tabular-nums; } .ds-live::before, .ds-pulse::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-accent-text); box-shadow: 0 0 0 4px var(--ds-accent-soft); flex: none; } .ds-pulse { display: inline-flex; align-items: center; gap: 8px; } .ds-live.ds-blink::before, .ds-pulse::before { animation: ds-blink 2s ease-in-out infinite; } @keyframes ds-blink { 50% { opacity: 0.35; } } /* Banner: a line of news across a card or page. Links when it's an . */ .ds-banner { display: flex; align-items: center; gap: 12px; background: var(--ds-accent-soft); border: 1px solid var(--ds-accent-line); color: var(--ds-text-primary); border-radius: var(--ds-radius-panel); padding: 12px 16px; text-decoration: none; font-size: 14px; } .ds-banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-accent-text); flex: none; } a.ds-banner:hover { border-color: var(--ds-accent-text); } .ds-banner.ds-bad { background: var(--ds-danger-soft); border-color: var(--ds-danger-line); } .ds-banner.ds-bad::before { background: var(--ds-danger); } .ds-banner[hidden] { display: none; } /* Toasts: stacked bottom right, full width on a phone. */ .ds-toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: var(--ds-z-toast); width: 360px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .ds-toast-stack > * { pointer-events: auto; } @media (max-width: 600px) { .ds-toast-stack { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; } } /* Toasts are solid so they stand out: reversed for plain news, and the status colour for success, warning, info and errors. */ .ds-toast { --ds-toast-bg: var(--ds-inverse); --ds-toast-ink: var(--ds-on-inverse); display: flex; align-items: center; gap: 10px; background: var(--ds-toast-bg); color: var(--ds-toast-ink); border: 0; border-radius: var(--ds-radius-panel); padding: 12px 10px 12px 18px; font-size: 14px; font-weight: var(--ds-weight-medium); box-shadow: 0 14px 34px rgb(0 0 0 / 0.35), 0 2px 6px rgb(0 0 0 / 0.2); animation: ds-toast-in var(--ds-base) var(--ds-ease); } .ds-toast.ds-bad, .ds-toast.ds-error { --ds-toast-bg: var(--ds-fill-danger); --ds-toast-ink: var(--ds-on-danger); } .ds-toast > span { flex: 1; } .ds-toast-close { font: inherit; font-size: 20px; line-height: 1; color: inherit; opacity: 0.75; background: none; border: 0; padding: 2px 8px; border-radius: var(--ds-radius-sm); cursor: pointer; } .ds-toast-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); } .ds-toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .ds-toast[hidden] { display: none; } @keyframes ds-toast-in { from { opacity: 0; transform: translateY(var(--ds-shift)); } } /* Spinner: an arc that spins and grows, from the energy app's pull to refresh. */ .ds-spinner { width: 24px; height: 24px; display: inline-block; animation: ds-rotate 1.1s linear infinite; } .ds-spinner circle { fill: none; stroke-width: 2.5; } .ds-spinner .ds-spinner-track { stroke: var(--ds-track); } .ds-spinner .ds-spinner-arc { stroke: var(--ds-accent-text); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px; animation: ds-dash 1.4s ease-in-out infinite; } @keyframes ds-rotate { to { transform: rotate(360deg); } } @keyframes ds-dash { 0% { stroke-dasharray: 1 70; stroke-dashoffset: 0; } 50% { stroke-dasharray: 45 70; stroke-dashoffset: -12; } 100% { stroke-dasharray: 45 70; stroke-dashoffset: -68; } } /* Loading bars and empty states. */ .ds-skeleton { display: block; height: 16px; border-radius: var(--ds-radius-sm); background: linear-gradient(90deg, var(--ds-surface-raised), var(--ds-track), var(--ds-surface-raised)); background-size: 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; } @keyframes ds-shimmer { to { background-position: -200% 0; } } .ds-empty { text-align: center; padding: 36px 20px; color: var(--ds-text-secondary); } .ds-empty strong { display: block; color: var(--ds-text-primary); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-light); margin-bottom: 4px; } .ds-empty p { font-size: var(--ds-text-md); max-width: 380px; margin: 0 auto; } .ds-alert { color: var(--ds-danger); font-size: var(--ds-text-sm); margin: 0; } .ds-alert:empty { display: none; } /* ---------- Overlays ---------- */ /* Dialog: a native , opened with showModal(). */ .ds-dialog { background: var(--ds-surface); color: var(--ds-text-primary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); padding: 26px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--ds-shadow-pop); } .ds-dialog::backdrop { background: var(--ds-backdrop); } .ds-dialog[open] { animation: ds-pop var(--ds-base) var(--ds-ease); } .ds-dialog h2 { margin: 0 0 10px; font-size: var(--ds-text-xl); font-weight: var(--ds-weight-light); } .ds-dialog p { margin: 0 0 10px; line-height: 1.5; } .ds-dialog-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; } @keyframes ds-pop { from { opacity: 0; transform: translateY(calc(var(--ds-shift) * 0.75)) scale(calc(1 - 0.02 * var(--ds-motion-move))); } } /* Tooltip and popover surface. */ .ds-tooltip { background: var(--ds-overlay); color: var(--ds-text-secondary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-panel); padding: 10px 12px; font-size: var(--ds-text-sm); box-shadow: var(--ds-shadow-pop); max-width: 280px; } .ds-tooltip b, .ds-tooltip strong { color: var(--ds-text-primary); font-weight: var(--ds-weight-medium); } .ds-popover { position: fixed; inset: auto; margin: 0; background: var(--ds-overlay); color: var(--ds-text-primary); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-panel); box-shadow: var(--ds-shadow-pop); padding: 8px; } /* Disclosure: "Show as a table" and similar. */ .ds-details { margin-top: 14px; font-size: 13px; border-top: 1px solid var(--ds-border); padding-top: 12px; } .ds-details > summary { cursor: pointer; color: var(--ds-text-secondary); font-weight: var(--ds-weight-medium); list-style: none; display: inline-flex; align-items: center; gap: 8px; } .ds-details > summary::-webkit-details-marker { display: none; } .ds-details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform var(--ds-fast) ease; } .ds-details[open] > summary::before { transform: rotate(45deg); } .ds-details > summary:hover { color: var(--ds-text-primary); } /* ---------- Data viz ---------- */ /* Legend: buttons that hide and show chart series. aria-pressed="false" means hidden. */ .ds-legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 10px; padding-left: 8px; } .ds-legend-item { font: inherit; font-size: 12px; font-weight: var(--ds-weight-medium); letter-spacing: 0.04em; color: var(--ds-text-secondary); background: none; border: 0; padding: 4px 8px; margin: 0 -8px; border-radius: var(--ds-radius-sm); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .ds-legend-item:hover { background: var(--ds-surface-raised); color: var(--ds-text-primary); } .ds-legend-item:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; } .ds-legend-item[aria-pressed="false"] { color: var(--ds-text-muted); text-decoration: line-through; } .ds-legend-item[aria-pressed="false"] i { opacity: 0.25; } .ds-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--ds-key, var(--ds-accent-text)); } .ds-legend i.ds-key-line { height: 3px; border-radius: 2px; width: 16px; } .ds-legend i.ds-key-dash { height: 0; width: 16px; border-top: 2px dashed var(--ds-key, var(--ds-accent-text)); background: none; border-radius: 0; } .ds-chart { position: relative; height: clamp(260px, 30vw, 420px); } @media (max-width: 560px) { .ds-chart { height: 240px; } } .ds-chart-title { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-secondary); margin: 22px 0 10px; } /* Heat scale under a heatmap. */ .ds-scale { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ds-text-muted); } .ds-scale .ds-ramp { width: 180px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ds-heat-lo), var(--ds-heat-mid), var(--ds-heat-hi)); } /* Ring gauge: draws the SVG; these style it. */ ds-ring { display: block; width: 100%; max-width: var(--ds-ring-size, 220px); } ds-ring svg { width: 100%; height: auto; display: block; overflow: visible; } ds-ring .ds-ring-track { fill: none; stroke: var(--ds-track); } ds-ring .ds-ring-arc { fill: none; stroke: var(--ds-ring, var(--ds-accent-text)); stroke-linecap: round; transition: stroke-dasharray var(--ds-slower) var(--ds-ease); } ds-ring .ds-ring-label { font: var(--ds-weight-bold) 11px var(--ds-font); letter-spacing: 0.14em; fill: var(--ds-text-secondary); text-anchor: middle; text-transform: uppercase; } ds-ring .ds-ring-value { font: var(--ds-weight-thin) 44px var(--ds-font); fill: var(--ds-text-primary); text-anchor: middle; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } ds-ring .ds-ring-unit { font: var(--ds-weight-light) 17px var(--ds-font); fill: var(--ds-text-secondary); } ds-ring .ds-ring-note { font: var(--ds-weight-medium) 11px var(--ds-font); letter-spacing: 0.1em; fill: var(--ds-text-muted); text-anchor: middle; text-transform: uppercase; } /* ---------- Upload ---------- */ .ds-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 20px; border: 1.5px dashed var(--ds-border-strong); border-radius: var(--ds-radius-tile); cursor: pointer; transition: border-color var(--ds-fast), background var(--ds-fast); } .ds-dropzone:hover, .ds-dropzone.ds-over, .ds-dropzone:focus-within { border-color: var(--ds-accent-text); background: var(--ds-accent-soft); } .ds-dropzone svg { width: 30px; height: 30px; fill: none; stroke: var(--ds-accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ds-dropzone strong { font-size: 16px; font-weight: var(--ds-weight-light); } .ds-dropzone small { font-size: var(--ds-text-sm); color: var(--ds-text-muted); max-width: 420px; } /* ---------- Simple table (no sorting or settings): use for those ---------- */ .ds-simple-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 13.5px; } .ds-simple-table th, .ds-simple-table td { padding: 8px; text-align: right; border-bottom: 1px solid var(--ds-border); white-space: nowrap; } .ds-simple-table th:first-child, .ds-simple-table td:first-child { text-align: left; } .ds-simple-table th { color: var(--ds-text-muted); font-weight: var(--ds-weight-medium); font-size: var(--ds-text-xs); letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Menu position ---------- On .ds-app: data-nav="left" (default) or "top" for screens wider than a phone, and data-nav-phone="top" (default) or "bottom" for phones. JS can keep --ds-rail-h set to the menu's height. */ @media (min-width: 761px) { .ds-app[data-nav="top"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .ds-app[data-nav="top"] .ds-rail { height: auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 4px; padding: 10px clamp(20px, 3vw, 56px); border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card); overflow-x: auto; scrollbar-width: none; } .ds-app[data-nav="top"] .ds-rail::-webkit-scrollbar { display: none; } .ds-app[data-nav="top"] .ds-rail a { flex: none; flex-direction: row; width: auto; gap: 8px; padding: 9px clamp(8px, 1.1vw, 14px); font-size: 11px; border-radius: var(--ds-radius-button); } .ds-app[data-nav="top"] .ds-rail a svg { width: 18px; height: 18px; } .ds-app[data-nav="top"] .ds-rail a:hover { background: color-mix(in srgb, var(--ds-on-accent) 12%, transparent); } .ds-app[data-nav="top"] .ds-rail .ds-rail-logo { margin: 0 14px 0 0; padding: 4px; } .ds-app[data-nav="top"] .ds-rail .ds-rail-logo svg { width: 28px; height: 28px; } .ds-app[data-nav="top"] .ds-rail a[aria-current]::after, .ds-app[data-nav="top"] .ds-rail a.active::after { left: 14px; right: 14px; top: auto; bottom: 1px; width: auto; height: 2px; } } @media (max-width: 760px) { .ds-app[data-nav-phone="bottom"] .ds-rail { top: auto; bottom: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; } .ds-app[data-nav-phone="bottom"] .ds-rail.ds-rail-away { transform: translateY(calc(100% + 4px)); } .ds-app[data-nav-phone="bottom"] .ds-rail a[aria-current]::after, .ds-app[data-nav-phone="bottom"] .ds-rail a.active::after { top: 0; bottom: auto; } .ds-app[data-nav-phone="bottom"] .ds-main { padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: calc(var(--ds-rail-h, 64px) + 28px); } :root:has(.ds-app[data-nav-phone="bottom"]) .ds-toast-stack { bottom: calc(var(--ds-rail-h, 64px) + 12px); } } /* Phones and tablets: anything you type into is at least 16px, or iPhone Safari zooms the page when it's tapped. */ @media (max-width: 760px), (pointer: coarse) { .ds-field input, .ds-field select, .ds-field textarea, .ds-select-search input { font-size: max(16px, 1em); } } /* ---------- Motion utilities ---------- .ds-enter, .ds-enter-scale, .ds-enter-side: play once when the element appears (set --ds-delay to stagger). [data-reveal]: fades and rises into place when scrolled into view (ds.js watches for it). */ .ds-enter { animation: ds-enter var(--ds-slow) var(--ds-ease) var(--ds-delay, 0ms) both; } .ds-enter-scale { animation: ds-enter-scale var(--ds-slow) var(--ds-ease-spring) var(--ds-delay, 0ms) both; } .ds-enter-side { animation: ds-enter-side var(--ds-slow) var(--ds-ease) var(--ds-delay, 0ms) both; } @keyframes ds-enter { from { opacity: 0; transform: translateY(calc(var(--ds-shift) * 1.5)); } } @keyframes ds-enter-scale { from { opacity: 0; transform: scale(calc(1 - 0.08 * var(--ds-motion-move))); } } @keyframes ds-enter-side { from { opacity: 0; transform: translateX(calc(var(--ds-shift) * -2)); } } :root.ds-js [data-reveal] { opacity: 0; transform: translateY(calc(var(--ds-shift) * 2)); transition: opacity var(--ds-slow) var(--ds-ease), transform var(--ds-slow) var(--ds-ease); transition-delay: calc(var(--ds-i, 0) * 60ms * var(--ds-motion)); } :root.ds-js [data-reveal].ds-revealed { opacity: 1; transform: none; } /* ---------- Sizes ---------- Small, default and large for every control. Set one control's size with ds-btn-sm / ds-btn-lg, ds-field-sm / ds-field-lg or size="sm|lg" on the components; or wrap a whole row in .ds-controls-sm or .ds-controls-lg so everything in it matches. */ .ds-controls-sm, .ds-field-sm, .ds-switch-sm, [size="sm"] { --ds-h: var(--ds-control-sm); } .ds-controls-lg, .ds-field-lg, .ds-switch-lg, [size="lg"] { --ds-h: var(--ds-control-lg); } :is(.ds-controls-sm, .ds-field-sm, [size="sm"]) :is(.ds-field, .ds-btn, .ds-switch button), .ds-field-sm, .ds-switch-sm button { font-size: 12.5px; } :is(.ds-controls-lg, .ds-field-lg, [size="lg"]) :is(.ds-field, .ds-btn), .ds-field-lg { font-size: 15px; } .ds-controls-sm .ds-switch button, .ds-switch-sm button { padding: 0 12px; } /* Keep avatars out of it: they have their own sizes. */ ds-avatar[size] { --ds-h: initial; } /* ---------- Segmented switch with icons ---------- .ds-switch-icons: square icon-only options (give each button an aria-label), e.g. table / grid view. Icons in any switch take the text colour, so the chosen one is white in dark mode and dark in light mode. */ .ds-switch button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ds-switch button:has(svg) { gap: 7px; } .ds-switch-icons button { width: calc(var(--ds-h, var(--ds-control)) - 8px); padding: 0; justify-content: center; } /* ---------- Scroll edge: a sticky heading's divider shows only once content scrolls under it ---------- Put data-ds-edge on the heading (the design system's sheet header has it built in). ds.js sets data-ds-scrolled while whatever it sits over is scrolled, and the line fades in as the clipping edge. */ [data-ds-edge], .ds-sheet-head { border-bottom: 1px solid transparent; transition: border-color var(--ds-base) var(--ds-ease); } [data-ds-edge][data-ds-scrolled], .ds-sheet-head[data-ds-scrolled] { border-bottom-color: var(--ds-border); } /* Home design system: . Header sticks to the top of the page as you scroll; pinned columns stick to the left as you swipe sideways. Columns resize by dragging (or arrow keys), sort by clicking the header, and row height and columns (show, hide, reorder) live in one settings panel. */ ds-table { display: block; position: relative; font-size: var(--ds-table-text, 13.5px); --ds-table-bg: var(--ds-surface); /* set to var(--ds-page) when the table sits on the page, not in a card */ --ds-table-row: 40px; --ds-table-pad: 10px; } ds-table[on-page] { --ds-table-bg: var(--ds-page); } ds-table[data-density="compact"] { --ds-table-row: 32px; --ds-table-pad: 8px; } ds-table[data-density="comfortable"] { --ds-table-row: 52px; --ds-table-pad: 12px; } .ds-table-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; min-height: 30px; } .ds-table-bar:empty { display: none; } .ds-table-caption { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-secondary); } .ds-table-count { font-size: 12px; color: var(--ds-text-muted); font-variant-numeric: tabular-nums; margin-right: auto; } .ds-table-caption + .ds-table-count { margin-left: -2px; } /* The two tables share one set of column widths, so the sticky header always lines up with the body. */ .ds-table-head { position: sticky; top: var(--ds-table-top, 0px); z-index: 3; overflow: hidden; background: var(--ds-table-bg); transition: top var(--ds-base) var(--ds-ease); } .ds-table-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ds-border-strong) transparent; } .ds-table-scroll:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; border-radius: 4px; } .ds-table-t { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; font-variant-numeric: tabular-nums; } .ds-table-t.ds-measuring { table-layout: auto; width: auto !important; } /* Cells */ .ds-table-t td, .ds-table-t th { padding: 0 var(--ds-table-pad); height: var(--ds-table-row); text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--ds-border); background: var(--ds-table-bg); } .ds-table-t .ds-end { text-align: right; } .ds-table-t td.ds-wrap { white-space: normal; } .ds-table-t td.ds-wrap > .ds-cell { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .ds-table-t td.ds-strong { font-weight: var(--ds-weight-medium); } /* The pinned name column reads a little heavier, so each row is easy to find. */ .ds-table-t tbody td.ds-pin { font-weight: var(--ds-table-name-weight); } .ds-table-t td.ds-dim { color: var(--ds-text-secondary); } .ds-table-t tbody tr { transition: background var(--ds-fast) ease; } /* Striped rows (optional) and hover. Stripes are faint; hover is a step stronger so it still shows on a striped row. */ ds-table[data-striped] :where(.ds-table-t tbody tr:nth-child(even) > td) { background: var(--ds-row-stripe); } .ds-table-t tbody tr:hover > td { background: var(--ds-row-hover); } ds-table[clickable] .ds-table-t tbody tr { cursor: pointer; } .ds-table-t tbody tr:last-child > td { border-bottom-color: var(--ds-border); } .ds-table-t tfoot td { font-weight: var(--ds-weight-bold); border-bottom: 0; border-top: 1px solid var(--ds-border-strong); } /* Header */ .ds-table-head th { height: 36px; padding: 0; position: relative; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); border-bottom: 1px solid var(--ds-border-strong); overflow: visible; } .ds-th { display: flex; align-items: center; gap: 0; width: 100%; height: 100%; padding: 0 var(--ds-table-pad); font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; text-align: inherit; cursor: default; overflow: hidden; } .ds-th > span { overflow: hidden; text-overflow: ellipsis; } button.ds-th { cursor: pointer; } button.ds-th:hover { color: var(--ds-text-primary); } button.ds-th:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; border-radius: 6px; } .ds-end > .ds-th { justify-content: flex-end; } th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ds-text-primary); } /* The sort arrow takes no room until its column is sorted, then slides in so the label doesn't jump. */ .ds-sort-mark { flex: none; width: 0; height: 12px; overflow: hidden; display: inline-flex; justify-content: flex-end; color: var(--ds-accent-text); transition: width var(--ds-base) var(--ds-ease); } .ds-sort-mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform var(--ds-base) var(--ds-ease); } th[aria-sort="ascending"] .ds-sort-mark, th[aria-sort="descending"] .ds-sort-mark { width: 16px; } th[aria-sort="descending"] .ds-sort-mark svg { transform: rotate(180deg); } /* The real header inside the body table: read by screen readers and used for sizing, but takes no height. */ .ds-table-ghost th { height: 0 !important; padding-top: 0; padding-bottom: 0; border: 0; line-height: 0; overflow: hidden; color: transparent; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; } .ds-table-ghost .ds-ghost-label { padding-right: 18px; } /* Resize grip: an 8px strip on each header's right edge with a 1px line in it. */ .ds-col-grip { position: absolute; top: 0; bottom: 0; right: -4px; width: 9px; z-index: 3; cursor: col-resize; touch-action: none; display: flex; justify-content: center; outline: none; } .ds-col-grip::after { content: ""; width: 1px; margin: 9px 0; background: var(--ds-border-strong); opacity: 0; transition: opacity var(--ds-fast) ease, background var(--ds-fast) ease; } .ds-table-head:hover .ds-col-grip::after { opacity: 1; } .ds-col-grip:hover::after, .ds-col-grip:focus-visible::after { opacity: 1; background: var(--ds-text-secondary); width: 2px; } .ds-col-grip.ds-dragging::after { opacity: 1; background: var(--ds-accent-text); width: 2px; margin: 0; } .ds-col-grip:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus); border-radius: 3px; } @media (hover: none) { .ds-col-grip::after { opacity: 0.6; } } ds-table.ds-resizing, ds-table.ds-resizing * { cursor: col-resize !important; user-select: none; } /* Pinned columns: stick to the left; a hairline and soft edge appear once you've scrolled sideways. */ .ds-table-t .ds-pin { position: sticky; z-index: 1; } .ds-table-head .ds-pin { z-index: 4; } /* above every resize grip, so grips slide under it when scrolled sideways */ .ds-table-t .ds-pin-last { transition: box-shadow var(--ds-slow) ease; } ds-table[data-scrolled] .ds-table-t .ds-pin-last { box-shadow: inset -1px 0 0 var(--ds-border), 8px 0 12px -10px rgb(0 0 0 / 0.5); } /* Loading and empty */ .ds-table-t td.ds-table-message { white-space: normal; height: auto; border-bottom: 0; } .ds-table-loading td { padding-top: 10px; padding-bottom: 10px; } /* ---------- Settings panel: row height and columns ---------- */ .ds-table-panel { width: 300px; padding: 10px; max-height: min(520px, calc(100vh - 32px)); overflow-y: auto; } .ds-table-panel:popover-open { display: block; animation: ds-pop var(--ds-fast) var(--ds-ease); } .ds-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px 6px; } .ds-panel-title { white-space: nowrap; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-secondary); } .ds-panel-label { font-size: 12px; font-weight: var(--ds-weight-medium); color: var(--ds-text-muted); margin: 10px 6px 6px; } .ds-panel-switch { display: flex; width: 100%; flex-wrap: nowrap; margin-bottom: 6px; } .ds-panel-switch button { flex: 1; padding: 6px 8px; } .ds-panel-toggle { display: flex; margin: 10px 6px 4px; font-size: 14px; } .ds-panel-list { list-style: none; margin: 0; padding: 0; position: relative; } .ds-panel-row { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px 0 2px; border-radius: var(--ds-radius-sm); background: var(--ds-overlay); font-size: 14px; position: relative; } .ds-panel-row:hover { background: var(--ds-surface-raised); } .ds-panel-row.ds-lifted { z-index: 2; background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-pop); transition: none; } .ds-panel-row.ds-shifting { transition: transform var(--ds-base) var(--ds-ease); } .ds-panel-row label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; padding: 6px 4px; } .ds-panel-row label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-panel-row input:disabled { cursor: default; opacity: 0.5; } .ds-handle { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--ds-text-muted); border-radius: 6px; cursor: grab; touch-action: none; padding: 0; } .ds-handle:hover { color: var(--ds-text-primary); background: var(--ds-surface); } .ds-handle:active { cursor: grabbing; } .ds-handle:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; } .ds-handle svg, .ds-lock svg { width: 14px; height: 14px; fill: currentColor; } .ds-lock { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--ds-text-muted); } .ds-lock svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ds-panel-note { font-size: 12px; color: var(--ds-text-muted); padding: 8px 6px 2px; margin: 0; } /* On a phone the panel slides up from the bottom. */ @media (max-width: 640px) { .ds-table-panel { width: auto; inset: auto 0 0 0 !important; max-height: 75vh; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); border-bottom: 0; } .ds-table-panel:popover-open { animation: ds-sheet-up var(--ds-base) var(--ds-ease); } .ds-table-panel::backdrop { background: var(--ds-backdrop); } .ds-panel-row { height: 46px; } } @keyframes ds-sheet-up { from { transform: translateY(calc(100% * var(--ds-motion-move))); } } @media (prefers-reduced-motion: reduce) { .ds-sort-mark, .ds-sort-mark svg, .ds-panel-row.ds-shifting, .ds-table-head { transition: none; } .ds-table-panel:popover-open { animation: none; } } /* Home design system: date, time, date range and dropdown pickers. */ ds-date-input, ds-time-input, ds-date-range, ds-select { display: inline-block; min-width: 0; vertical-align: middle; } .ds-field-block > ds-date-input, .ds-field-block > ds-time-input, .ds-field-block > ds-date-range, .ds-field-block > ds-select { display: block; } ds-date-input { min-width: 190px; } ds-time-input { min-width: 128px; } ds-date-range { min-width: 230px; } ds-select { min-width: 190px; } /* The field-like button */ .ds-picker-trigger { font: inherit; font-size: 14px; color: var(--ds-text-primary); cursor: pointer; text-align: left; width: 100%; white-space: nowrap; outline: none; } .ds-picker-trigger > svg:first-child { color: var(--ds-text-muted); } .ds-picker-trigger:focus-visible, .ds-picker-trigger[aria-expanded="true"] { border-color: var(--ds-accent-text); box-shadow: 0 0 0 3px var(--ds-accent-soft); } .ds-picker-trigger:disabled { opacity: 0.5; cursor: default; } .ds-picker-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 3px 0; } .ds-picker-text.ds-placeholder { color: var(--ds-text-muted); } .ds-picker-chev { margin-left: auto; color: var(--ds-text-muted); transition: transform var(--ds-base) var(--ds-ease); } .ds-picker-trigger[aria-expanded="true"] .ds-picker-chev { transform: rotate(180deg); } /* The panel */ .ds-picker-pop { padding: 12px; max-width: calc(100vw - 24px); border-radius: var(--ds-radius-panel); } .ds-picker-pop:popover-open { animation: ds-pop var(--ds-fast) var(--ds-ease); } .ds-picker-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ds-border); } .ds-picker-hint { margin-right: auto; font-size: 12.5px; color: var(--ds-text-muted); } /* Calendar */ .ds-cal { width: 296px; } .ds-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .ds-cal-title { font-size: 15px; font-weight: var(--ds-weight-medium); } .ds-cal-nav, .ds-cal-nav-space { width: 34px; height: 34px; flex: none; } .ds-cal-nav { display: grid; place-items: center; border: 0; background: none; color: var(--ds-text-secondary); border-radius: min(var(--ds-radius-button), 50%); cursor: pointer; padding: 0; } .ds-cal-nav:hover { background: var(--ds-surface-raised); color: var(--ds-text-primary); } .ds-cal-nav:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; } .ds-cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ds-cal-week, .ds-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .ds-cal-week span { text-align: center; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); color: var(--ds-text-muted); padding: 4px 0 6px; } .ds-cal-cell { position: relative; height: 40px; display: grid; place-items: center; } /* The range band runs behind the day buttons. */ .ds-cal-cell.ds-in-range::before { content: ""; position: absolute; inset: 3px 0; background: var(--ds-accent-soft); } .ds-cal-cell.ds-range-start::before { left: 50%; } .ds-cal-cell.ds-range-end::before { right: 50%; } .ds-cal-cell.ds-range-start.ds-range-end::before { display: none; } .ds-cal-grid > .ds-in-range:nth-child(7n + 1):not(.ds-range-start)::before { left: 4px; border-radius: 10px 0 0 10px; } .ds-cal-grid > .ds-in-range:nth-child(7n):not(.ds-range-end)::before { right: 4px; border-radius: 0 10px 10px 0; } .ds-day { position: relative; z-index: 1; width: 36px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: min(var(--ds-radius-button), 50%); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ds-text-primary); transition: background var(--ds-fast) ease; } .ds-day:hover { background: var(--ds-surface-raised); } .ds-day.ds-outside { color: var(--ds-text-muted); } .ds-day[aria-current="date"] { font-weight: var(--ds-weight-bold); box-shadow: inset 0 0 0 1.5px var(--ds-accent-line); } .ds-day[aria-pressed="true"], .ds-in-range .ds-day[aria-pressed="true"] { background: var(--ds-accent); color: var(--ds-on-accent); font-weight: var(--ds-weight-bold); box-shadow: none; } .ds-in-range:is(.ds-range-start, .ds-range-end) .ds-day { background: var(--ds-accent); color: var(--ds-on-accent); font-weight: var(--ds-weight-bold); } .ds-day:disabled { opacity: 0.3; cursor: default; background: none; } .ds-day:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; } /* Range: quick ranges on the left, two months on the right */ .ds-range-body { display: flex; gap: 14px; } .ds-range-presets { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; border-right: 1px solid var(--ds-border); min-width: 136px; } .ds-preset { text-align: left; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 0; background: none; color: var(--ds-text-secondary); border-radius: var(--ds-radius-sm); cursor: pointer; white-space: nowrap; } .ds-preset:hover { background: var(--ds-surface-raised); color: var(--ds-text-primary); } .ds-preset[aria-pressed="true"] { background: var(--ds-accent-soft); color: var(--ds-accent-text); font-weight: var(--ds-weight-medium); } .ds-preset:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; } .ds-range-months { display: flex; gap: 22px; } /* Time: hour, minute and am/pm columns */ .ds-time-labels, .ds-time-cols { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; } .ds-time-labels span { text-align: center; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); padding-bottom: 6px; } .ds-time-col { height: 216px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; overscroll-behavior: contain; } .ds-time-col::-webkit-scrollbar { display: none; } .ds-time-col button { flex: none; height: 36px; border: 0; background: none; border-radius: var(--ds-radius-sm); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ds-text-secondary); cursor: pointer; } .ds-time-col button:hover { background: var(--ds-surface-raised); color: var(--ds-text-primary); } .ds-time-col button[aria-pressed="true"] { background: var(--ds-accent); color: var(--ds-on-accent); font-weight: var(--ds-weight-bold); } .ds-time-col button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; } /* Dropdowns */ .ds-select-search { padding-bottom: 8px; } .ds-select-search .ds-field { display: flex; --ds-h: var(--ds-control-sm); } .ds-select-search input::-webkit-search-cancel-button { display: none; } .ds-listbox { max-height: 300px; overflow-y: auto; outline: none; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; } .ds-option { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: var(--ds-radius-sm); cursor: pointer; font-size: 14px; color: var(--ds-text-primary); user-select: none; } .ds-option.ds-active { background: var(--ds-surface-raised); } .ds-option[aria-selected="true"] { font-weight: var(--ds-weight-medium); } .ds-option[aria-disabled="true"] { opacity: 0.4; cursor: default; } .ds-option-text { flex: 1; min-width: 0; } .ds-option-text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-option small { display: block; font-size: 12px; font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); } .ds-option-tick { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ds-accent-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; } .ds-option[aria-selected="true"] .ds-option-tick { visibility: visible; } .ds-option-check { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--ds-border-strong); display: grid; place-items: center; transition: background var(--ds-fast) ease, border-color var(--ds-fast) ease; } .ds-option-check::after { content: ""; width: 8px; height: 4.5px; border-left: 1.6px solid var(--ds-on-accent); border-bottom: 1.6px solid var(--ds-on-accent); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--ds-fast) var(--ds-ease); } .ds-option[aria-selected="true"] .ds-option-check { background: var(--ds-accent); border-color: var(--ds-accent); } .ds-option[aria-selected="true"] .ds-option-check::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .ds-option-group { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); padding: 10px 10px 4px; } .ds-select-empty { padding: 14px 10px; margin: 0; color: var(--ds-text-muted); font-size: 13.5px; } /* Phones: every picker opens as a sheet from the bottom. */ @media (max-width: 640px) { .ds-picker-pop { inset: auto 0 0 0 !important; width: auto !important; min-width: 0 !important; max-width: none; max-height: 85vh; overflow-y: auto; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; border-bottom: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); } .ds-picker-pop:popover-open { animation: ds-sheet-up var(--ds-base) var(--ds-ease); } .ds-picker-pop::backdrop { background: var(--ds-backdrop); } .ds-cal { width: 100%; } .ds-cal-cell { height: 46px; } .ds-day { width: 42px; height: 42px; font-size: 15px; } .ds-range-body { flex-direction: column; } .ds-range-presets { flex-direction: row; overflow-x: auto; border-right: 0; padding: 0 0 10px; border-bottom: 1px solid var(--ds-border); scrollbar-width: none; min-width: 0; } .ds-time-labels, .ds-time-cols { grid-template-columns: repeat(3, 1fr); } .ds-option { min-height: 46px; } .ds-listbox { max-height: 55vh; } } @media (prefers-reduced-motion: reduce) { .ds-picker-pop:popover-open { animation: none; } .ds-picker-chev, .ds-option-check::after { transition: none; } } /* Home design system: people, navigation, lists, sheets, menus, chips, sliders, steppers, text areas, toasts and chat. */ /* ---------- Avatars ---------- */ ds-avatar, .ds-avatar { --ds-avatar-size: 32px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--ds-avatar-size); height: var(--ds-avatar-size); border-radius: 50%; background: var(--ds-avatar-bg, var(--ds-surface-raised)); color: var(--ds-avatar-ink, var(--ds-text-primary)); font-size: calc(var(--ds-avatar-size) * 0.38); font-weight: var(--ds-weight-bold); letter-spacing: 0.02em; user-select: none; vertical-align: middle; } ds-avatar[size="sm"] { --ds-avatar-size: 24px; } ds-avatar[size="lg"] { --ds-avatar-size: 44px; } ds-avatar[size="xl"] { --ds-avatar-size: 64px; } ds-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } ds-avatar[shape="square"], ds-avatar[shape="square"] img { border-radius: 28%; } /* A status dot on the bottom right: status="online|away|busy" */ ds-avatar[status]::after { content: ""; position: absolute; right: 0; bottom: 0; width: max(8px, 26%); height: max(8px, 26%); border-radius: 50%; background: var(--ds-text-muted); box-shadow: 0 0 0 2px var(--ds-surface); } ds-avatar[status="online"]::after { background: var(--ds-green); } ds-avatar[status="away"]::after { background: var(--ds-amber); } ds-avatar[status="busy"]::after { background: var(--ds-pink); } .ds-avatar-group { display: inline-flex; align-items: center; } .ds-avatar-group > * { box-shadow: 0 0 0 2px var(--ds-surface); } .ds-avatar-group > * + * { margin-left: calc(var(--ds-avatar-size, 32px) * -0.28); } .ds-avatar-more { --ds-avatar-bg: var(--ds-track); --ds-avatar-ink: var(--ds-text-secondary); } /* ---------- Badges ---------- */ .ds-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ds-accent); color: var(--ds-on-accent); font-size: 11px; font-weight: var(--ds-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; } .ds-badge-quiet { background: var(--ds-surface-raised); color: var(--ds-text-secondary); } .ds-badge-danger { background: var(--ds-danger); color: #fff; } .ds-badge-dot { min-width: 0; width: 8px; height: 8px; padding: 0; } /* On a menu item or icon button: sits on the icon's top right corner. */ .ds-rail a .ds-badge, .ds-btn .ds-badge, .ds-has-badge .ds-badge { position: absolute; top: 4px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--ds-accent); } .ds-rail a .ds-badge { background: var(--ds-on-accent); color: var(--ds-accent); } .ds-btn .ds-badge, .ds-has-badge .ds-badge { top: -4px; left: auto; right: -4px; box-shadow: 0 0 0 2px var(--ds-surface); } .ds-btn:has(.ds-badge), .ds-has-badge { position: relative; } /* ---------- Tabs: with buttons (data-tab) and panels (data-panel) ---------- */ ds-tabs { display: block; } .ds-tablist { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--ds-border); overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; } .ds-tablist::-webkit-scrollbar { display: none; } .ds-tab { flex: none; font: inherit; font-size: 14px; font-weight: var(--ds-weight-medium); background: none; border: 0; color: var(--ds-text-muted); padding: 10px 14px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0; } .ds-tab:hover { color: var(--ds-text-primary); } .ds-tab[aria-selected="true"] { color: var(--ds-text-primary); } .ds-tab:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -3px; } .ds-tab-ink { position: absolute; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--ds-accent-text); transition: transform var(--ds-base) var(--ds-ease), width var(--ds-base) var(--ds-ease); } /* Pill style: */ ds-tabs[variant="pills"] .ds-tablist { border-bottom: 0; gap: 6px; } ds-tabs[variant="pills"] .ds-tab { border-radius: var(--ds-radius-button); padding: 7px 14px; border: 1px solid var(--ds-border); } ds-tabs[variant="pills"] .ds-tab[aria-selected="true"] { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } ds-tabs[variant="pills"] .ds-tab-ink { display: none; } /* ---------- Breadcrumbs ---------- */ .ds-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ds-text-muted); list-style: none; margin: 0; padding: 0; } .ds-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; } .ds-breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; margin-right: 2px; } .ds-breadcrumbs a { color: var(--ds-text-secondary); text-decoration: none; } .ds-breadcrumbs a:hover { color: var(--ds-accent-text); } .ds-breadcrumbs [aria-current] { color: var(--ds-text-primary); font-weight: var(--ds-weight-medium); } /* ---------- Steps (onboarding) ---------- */ .ds-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: ds-step; } .ds-steps li { flex: 1; position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--ds-text-muted); counter-increment: ds-step; } .ds-steps li::before { content: counter(ds-step); position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: var(--ds-weight-bold); background: var(--ds-surface); border: 1.5px solid var(--ds-border-strong); color: var(--ds-text-secondary); } .ds-steps li + li::after { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 1.5px; background: var(--ds-border-strong); } .ds-steps li[data-state="done"]::before { content: "✓"; background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } .ds-steps li[data-state="done"] + li::after, .ds-steps li[data-state="done"] + li[aria-current]::after { background: var(--ds-accent-text); } .ds-steps li[aria-current]::before { border-color: var(--ds-accent-text); color: var(--ds-accent-text); box-shadow: 0 0 0 4px var(--ds-accent-soft); } .ds-steps li[aria-current], .ds-steps li[data-state="done"] { color: var(--ds-text-primary); } /* ---------- List rows ---------- */ .ds-list { list-style: none; margin: 0; padding: 0; display: grid; } .ds-list-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--ds-radius-tile); color: inherit; text-decoration: none; position: relative; font: inherit; text-align: left; background: none; border: 0; width: calc(100% + 24px); } .ds-list > li + li .ds-list-row::before, .ds-list > .ds-list-row + .ds-list-row::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--ds-border); } .ds-list.ds-list-inset > li + li .ds-list-row::before, .ds-list.ds-list-inset > .ds-list-row + .ds-list-row::before { left: 70px; } :is(a, button).ds-list-row { cursor: pointer; } :is(a, button).ds-list-row:hover { background: var(--ds-surface-raised); } :is(a, button).ds-list-row:hover::before, :is(a, button).ds-list-row:hover + .ds-list-row::before { opacity: 0; } :is(a, button).ds-list-row:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; } .ds-list-media { width: 44px; height: 44px; flex: none; border-radius: calc(var(--ds-radius-tile) * 0.7); display: grid; place-items: center; overflow: hidden; background: var(--ds-media-bg, var(--ds-surface-raised)); color: var(--ds-media-ink, var(--ds-text-secondary)); } .ds-list-media img { width: 100%; height: 100%; object-fit: cover; } .ds-list-media svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ds-list-text { flex: 1; min-width: 0; display: grid; gap: 1px; } .ds-list-title { font-size: 15px; font-weight: var(--ds-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-list-sub { font-size: 13px; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-list-end { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ds-text-secondary); font-size: 13.5px; font-variant-numeric: tabular-nums; } .ds-chevron { width: 8px; height: 8px; border-right: 1.8px solid var(--ds-text-muted); border-top: 1.8px solid var(--ds-text-muted); transform: rotate(45deg); margin-right: 4px; } /* ---------- Chips ---------- */ .ds-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ds-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--ds-control-sm); padding: 0 12px; border-radius: var(--ds-radius-button); font: inherit; font-size: 13px; font-weight: var(--ds-weight-medium); background: var(--ds-surface-raised); color: var(--ds-text-primary); border: 1px solid transparent; white-space: nowrap; } .ds-chip .ds-dot { width: 8px; height: 8px; } .ds-chip-remove { width: 20px; height: 20px; margin-right: -6px; border-radius: 50%; border: 0; background: none; color: var(--ds-text-muted); cursor: pointer; display: grid; place-items: center; font-size: 16px; line-height: 1; padding: 0; } .ds-chip-remove:hover { background: var(--ds-track); color: var(--ds-text-primary); } .ds-chip-remove:focus-visible { outline: 2px solid var(--ds-focus); } /* Filter chips: buttons that toggle (aria-pressed). */ button.ds-chip { cursor: pointer; background: none; border-color: var(--ds-border-strong); color: var(--ds-text-secondary); transition: all var(--ds-fast) ease; } button.ds-chip:hover { border-color: var(--ds-text-secondary); color: var(--ds-text-primary); } button.ds-chip[aria-pressed="true"] { background: var(--ds-accent-soft); border-color: var(--ds-accent-line); color: var(--ds-accent-text); } button.ds-chip[aria-pressed="true"]::before { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); } button.ds-chip:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; } /* ---------- Slider: (ds.js keeps the filled part up to date) ---------- The thumb you see is a 15px dot, but the thumb you can grab is 28px: the rest is see-through. */ .ds-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; margin: 0; cursor: pointer; --ds-pct: 0.5; --ds-thumb-r: 7.5px; --ds-thumb-edge: rgb(0 0 0 / 0.28); --ds-thumb-halo: transparent; } .ds-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ds-accent) 0 calc(14px + (100% - 28px) * var(--ds-pct)), var(--ds-track) 0 100%); } .ds-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ds-track); } .ds-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ds-accent); } .ds-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 0; border-radius: 50%; background: radial-gradient(circle closest-side, #fff var(--ds-thumb-r), var(--ds-thumb-edge) calc(var(--ds-thumb-r) + 0.5px), var(--ds-thumb-edge) calc(var(--ds-thumb-r) + 1px), var(--ds-thumb-halo) calc(var(--ds-thumb-r) + 1.5px), var(--ds-thumb-halo) 14px, transparent 14px); } .ds-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: radial-gradient(circle closest-side, #fff var(--ds-thumb-r), var(--ds-thumb-edge) calc(var(--ds-thumb-r) + 0.5px), var(--ds-thumb-edge) calc(var(--ds-thumb-r) + 1px), var(--ds-thumb-halo) calc(var(--ds-thumb-r) + 1.5px), var(--ds-thumb-halo) 14px, transparent 14px); } .ds-slider:hover { --ds-thumb-halo: var(--ds-accent-soft); } .ds-slider:active { --ds-thumb-r: 8.5px; --ds-thumb-halo: var(--ds-accent-soft); } .ds-slider:focus-visible { outline: none; --ds-thumb-edge: var(--ds-focus); --ds-thumb-halo: var(--ds-accent-soft); } .ds-slider:disabled { opacity: 0.45; cursor: default; } .ds-slider-field { display: grid; gap: 4px; align-content: start; align-self: start; } .ds-slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ds-slider-top output { font-size: 15px; font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; } .ds-slider-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ds-text-muted); } /* ---------- Number stepper: ---------- The number and its unit sit centred between the buttons; the number slides as it counts and the pair glides to stay centred. */ ds-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-field); background: var(--ds-page); height: var(--ds-h, var(--ds-control)); padding: 3px; gap: 2px; min-width: 176px; } ds-stepper:focus-within { border-color: var(--ds-accent-text); box-shadow: 0 0 0 3px var(--ds-accent-soft); } .ds-step-btn { height: 100%; aspect-ratio: 1; flex: none; border: 0; border-radius: min(var(--ds-radius-field), 50%); background: var(--ds-surface-raised); color: var(--ds-text-primary); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); } .ds-step-btn:hover { background: var(--ds-track); } .ds-step-btn:active { transform: scale(0.92); } .ds-step-btn:disabled { opacity: 0.35; cursor: default; transform: none; } .ds-step-btn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; } .ds-step-value { flex: 1; display: flex; justify-content: center; min-width: 0; overflow: hidden; } .ds-step-group { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 6px; } .ds-step-value input { width: 2ch; border: 0; background: none; text-align: center; font: inherit; font-size: 15px; font-weight: var(--ds-weight-medium); color: var(--ds-text-primary); font-variant-numeric: tabular-nums; outline: none; padding: 0; } .ds-step-value input.ds-count-up { animation: ds-count-up var(--ds-base) var(--ds-ease); } .ds-step-value input.ds-count-down { animation: ds-count-down var(--ds-base) var(--ds-ease); } .ds-step-group span { font-size: 13px; color: var(--ds-text-muted); } @keyframes ds-count-up { from { transform: translateY(calc(var(--ds-shift) * 1.2)); opacity: 0.2; } } @keyframes ds-count-down { from { transform: translateY(calc(var(--ds-shift) * -1.2)); opacity: 0.2; } } /* ---------- Text area ---------- */ .ds-textarea { display: grid; gap: 6px; align-content: start; } .ds-textarea textarea { font: inherit; font-size: 14px; line-height: 1.5; color: var(--ds-text-primary); background: var(--ds-page); border: 1px solid var(--ds-border); border-radius: min(var(--ds-radius-field), 16px); padding: 10px 14px; min-height: 92px; resize: vertical; field-sizing: content; max-height: 320px; outline: none; transition: border-color var(--ds-fast) ease; } .ds-textarea textarea::placeholder { color: var(--ds-text-muted); } .ds-textarea textarea:hover { border-color: var(--ds-border-strong); } .ds-textarea textarea:focus { border-color: var(--ds-accent-text); box-shadow: 0 0 0 3px var(--ds-accent-soft); } .ds-count { font-size: 11.5px; color: var(--ds-text-muted); text-align: right; font-variant-numeric: tabular-nums; } .ds-count.ds-over { color: var(--ds-danger); } @media (max-width: 760px), (pointer: coarse) { .ds-textarea textarea { font-size: max(16px, 1em); } } /* ---------- Action menu: ---------- */ ds-menu { display: inline-block; } .ds-menu-pop { padding: 6px; min-width: 200px; } .ds-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; background: none; border-radius: var(--ds-radius-sm); font: inherit; font-size: 14px; color: var(--ds-text-primary); text-align: left; cursor: pointer; text-decoration: none; } .ds-menu-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ds-text-muted); } .ds-menu-item:hover, .ds-menu-item:focus-visible { background: var(--ds-surface-raised); outline: none; } .ds-menu-item.ds-danger, .ds-menu-item.ds-danger svg { color: var(--ds-danger); } .ds-menu-item kbd { margin-left: auto; font: inherit; font-size: 11.5px; color: var(--ds-text-muted); } .ds-menu-sep { height: 1px; background: var(--ds-border); margin: 5px 4px; border: 0; } .ds-menu-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); padding: 8px 10px 4px; } @media (max-width: 640px) { .ds-menu-item { min-height: 46px; font-size: 15px; } } /* ---------- Sheet: (side panel on a computer, from the bottom on a phone) ---------- */ .ds-sheet { position: fixed; margin: 0; inset: 0 0 0 auto; height: 100dvh; max-height: none; width: min(440px, 100vw); max-width: none; padding: 0; border: 0; border-left: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-text-primary); box-shadow: var(--ds-shadow-pop); border-radius: var(--ds-radius-card) 0 0 var(--ds-radius-card); display: none; flex-direction: column; } .ds-sheet[open] { display: flex; animation: ds-sheet-in var(--ds-base) var(--ds-ease); } .ds-sheet::backdrop { background: var(--ds-backdrop); } .ds-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; } .ds-sheet-head h2 { margin: 0; font-size: var(--ds-text-xl); font-weight: var(--ds-weight-light); } .ds-sheet-body { flex: 1; overflow-y: auto; padding: 18px 20px; overscroll-behavior: contain; } .ds-sheet-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ds-border); } @keyframes ds-sheet-in { from { transform: translateX(calc(var(--ds-shift) * 5)); opacity: 0; } } @media (max-width: 640px) { .ds-sheet { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 90dvh; border-left: 0; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; } .ds-sheet[open] { animation-name: ds-sheet-up; } .ds-sheet-head { padding-top: 22px; position: relative; } .ds-sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--ds-border-strong); } } /* ---------- Toasts from DS.toast(): tones and an action ---------- */ .ds-toast.ds-success { --ds-toast-bg: var(--ds-fill-success); --ds-toast-ink: var(--ds-on-success); } .ds-toast.ds-warning { --ds-toast-bg: var(--ds-fill-warning); --ds-toast-ink: var(--ds-on-warning); } .ds-toast.ds-info { --ds-toast-bg: var(--ds-fill-info); --ds-toast-ink: var(--ds-on-info); } .ds-toast-action { font: inherit; font-size: 13px; font-weight: var(--ds-weight-bold); color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); border: 0; padding: 5px 11px; border-radius: var(--ds-radius-button); cursor: pointer; white-space: nowrap; } .ds-toast-action:hover { background: color-mix(in srgb, currentColor 24%, transparent); } .ds-toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .ds-toast { position: relative; overflow: hidden; } .ds-toast-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: 0.3; transform-origin: left; animation: ds-toast-timer var(--ds-toast-time, 5s) linear forwards; } .ds-toast:hover .ds-toast-timer { animation-play-state: paused; } .ds-toast.ds-leaving { animation: ds-toast-out var(--ds-fast) var(--ds-ease-in) forwards; } @keyframes ds-toast-timer { to { transform: scaleX(0); } } @keyframes ds-toast-out { to { opacity: 0; transform: translateY(calc(var(--ds-shift) * 0.75)) scale(calc(1 - 0.02 * var(--ds-motion-move))); } } /* ---------- Chat bubbles (Pip) ---------- */ .ds-chat { display: flex; flex-direction: column; gap: 10px; } .ds-chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; } .ds-chat-row.ds-me { align-self: flex-end; flex-direction: row-reverse; } .ds-bubble { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--ds-surface-raised); font-size: 14.5px; line-height: 1.45; } .ds-me .ds-bubble { background: var(--ds-accent); color: var(--ds-on-accent); border-radius: 18px 18px 6px 18px; } .ds-chat-meta { font-size: 11.5px; color: var(--ds-text-muted); padding: 0 6px; } .ds-me + .ds-chat-meta { align-self: flex-end; } .ds-typing { display: inline-flex; gap: 4px; padding: 14px 16px; } .ds-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-text-muted); animation: ds-typing 1.2s ease-in-out infinite; } .ds-typing i:nth-child(2) { animation-delay: 0.15s; } .ds-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes ds-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(calc(var(--ds-shift) * -0.5)); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ds-typing i, .ds-toast-timer { animation: none; } .ds-tab-ink { transition: none; } } /* ---------- Drawer sides: (right is the default; phones always use the bottom unless data-phone="side") ---------- */ .ds-sheet[data-side="left"] { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--ds-border); border-radius: 0 var(--ds-radius-card) var(--ds-radius-card) 0; } .ds-sheet[data-side="left"][open] { animation-name: ds-sheet-in-left; } .ds-sheet[data-side="bottom"] { inset: auto 0 0 0; margin: 0 auto; width: min(720px, 100vw); height: auto; max-height: 85dvh; border-left: 0; border-bottom: 0; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; } .ds-sheet[data-side="bottom"][open] { animation-name: ds-sheet-up; } .ds-sheet[data-side="bottom"] .ds-sheet-head { padding-top: 22px; position: relative; } .ds-sheet[data-side="bottom"] .ds-sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--ds-border-strong); } @keyframes ds-sheet-in-left { from { transform: translateX(calc(var(--ds-shift) * -5)); opacity: 0; } } @media (max-width: 640px) { .ds-sheet[data-side] { inset: auto 0 0 0; width: 100vw; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; border-right: 0; } .ds-sheet[data-side][open] { animation-name: ds-sheet-up; } .ds-sheet[data-phone="side"] { inset: 0 0 0 auto; width: min(92vw, 440px); height: 100dvh; max-height: none; border-radius: var(--ds-radius-card) 0 0 var(--ds-radius-card); } .ds-sheet[data-phone="side"][open] { animation-name: ds-sheet-in; } } /* ---------- Filters ---------- */ ds-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ds-filters-clear { --ds-h: var(--ds-control-sm); } /* ---------- Calendar: Day, Week and Month ---------- */ ds-calendar { display: flex; flex-direction: column; min-height: 0; } .ds-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .ds-calendar-nav { display: flex; align-items: center; gap: 4px; } .ds-calendar-nav .ds-btn-icon svg { width: 18px; height: 18px; stroke-width: 2; } .ds-calendar-title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-light); margin: 0 10px 0 6px; white-space: nowrap; } .ds-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .ds-calendar-week span { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); padding: 0 10px 8px; } /* Month fills the space it's given: rows share the height, each at least 110px. */ .ds-calendar-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--ds-cal-weeks, 6), minmax(110px, 1fr)); border-top: 1px solid var(--ds-border); border-left: 1px solid var(--ds-border); border-radius: var(--ds-radius-tile); overflow: hidden; } .ds-calendar-week-grid { grid-template-rows: minmax(360px, 1fr); } .ds-calendar-day { display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer; outline: none; border-right: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); transition: background var(--ds-fast) ease; } .ds-calendar-day:hover { background: color-mix(in srgb, var(--ds-surface-raised) 60%, transparent); } .ds-calendar-day:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus); } .ds-calendar-day.ds-outside { background: color-mix(in srgb, var(--ds-page) 45%, transparent); } .ds-calendar-day.ds-outside .ds-calendar-num { color: var(--ds-text-muted); } .ds-calendar-day[aria-pressed="true"] { background: var(--ds-accent-soft); } .ds-calendar-num { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; justify-content: center; } .ds-calendar-dow { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); } .ds-calendar-day[aria-current="date"] .ds-calendar-num { background: var(--ds-accent); color: var(--ds-on-accent); font-weight: var(--ds-weight-bold); } .ds-calendar-day[aria-current="date"] .ds-calendar-dow { color: inherit; opacity: 0.85; } .ds-calendar-events { display: grid; gap: 3px; min-width: 0; } .ds-calendar-event { display: flex; align-items: baseline; gap: 5px; min-width: 0; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.35; padding: 2px 7px; border: 0; border-left: 3px solid var(--ds-ev); border-radius: 5px; background: color-mix(in srgb, var(--ds-ev) 15%, transparent); color: var(--ds-text-primary); cursor: pointer; } .ds-calendar-event:hover { background: color-mix(in srgb, var(--ds-ev) 26%, transparent); } .ds-calendar-event:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; } .ds-ev-time { flex: none; font-size: 11px; color: var(--ds-text-secondary); font-variant-numeric: tabular-nums; } .ds-ev-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-calendar-week-grid .ds-calendar-event { padding: 5px 8px; } .ds-calendar-week-grid .ds-ev-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ds-calendar-more { font-size: 11px; color: var(--ds-text-muted); padding-left: 7px; } .ds-calendar-dots { display: none; gap: 3px; justify-content: center; } .ds-calendar-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ds-ev); } /* Day: a list */ .ds-calendar-day-list { display: grid; gap: 6px; } .ds-calendar-list-head { margin: 0 0 4px; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-muted); } .ds-calendar-item { display: grid; grid-template-columns: 64px 4px 1fr; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ds-text-primary); padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-tile); background: var(--ds-surface); cursor: pointer; transition: border-color var(--ds-fast) ease; } .ds-calendar-item:hover { border-color: var(--ds-border-strong); } .ds-calendar-item:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; } .ds-item-time { font-size: 12.5px; color: var(--ds-text-secondary); font-variant-numeric: tabular-nums; } .ds-item-bar { align-self: stretch; border-radius: 2px; background: var(--ds-ev); } .ds-item-text { display: grid; gap: 2px; min-width: 0; } .ds-item-label { font-size: 15px; font-weight: var(--ds-weight-medium); } .ds-item-meta { font-size: 13px; color: var(--ds-text-muted); } .ds-calendar-empty { margin: 0; padding: 22px 0; color: var(--ds-text-muted); font-size: 14px; } .ds-calendar-phone-list { display: none; } @media (max-width: 640px) { .ds-calendar-grid { grid-template-rows: repeat(var(--ds-cal-weeks, 6), 54px); flex: none; } .ds-calendar-day { align-items: center; padding: 4px 2px; } .ds-calendar-num { align-self: center; } ds-calendar:not([data-view="week"]) .ds-calendar-events { display: none; } ds-calendar:not([data-view="week"]) .ds-calendar-dots { display: flex; } .ds-calendar-week span { padding: 0 0 6px; text-align: center; } .ds-calendar-phone-list { display: block; margin-top: 14px; } /* Week on a phone: one day per row, as a list. */ .ds-calendar-week-grid { grid-template-columns: 1fr; grid-template-rows: none; } .ds-calendar-week-grid .ds-calendar-day { flex-direction: row; align-items: flex-start; min-height: 52px; } .ds-calendar-week-grid .ds-calendar-num { min-width: 64px; } .ds-calendar-week-grid .ds-calendar-events { flex: 1; } .ds-calendar-item { grid-template-columns: 56px 4px 1fr; } } /* ---------- Photo upload ---------- */ ds-upload { display: block; } .ds-upload-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .ds-upload-list:empty { display: none; } .ds-upload-item { position: relative; display: grid; gap: 4px; } .ds-upload-item img, .ds-upload-file { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ds-radius-tile); background: var(--ds-surface-raised); } .ds-upload-file { display: grid; place-items: center; text-transform: uppercase; font-size: 12px; font-weight: var(--ds-weight-bold); color: var(--ds-text-muted); } .ds-upload-name { font-size: 11.5px; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-upload-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .ds-upload-remove:hover { background: var(--ds-danger); } .ds-upload-remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .ds-field-block > ds-stepper { justify-self: start; } /* ---------- Search: ---------- */ ds-search { display: block; position: relative; } .ds-search-field { display: flex; } .ds-search-field > svg:first-child { color: var(--ds-text-muted); } .ds-search-field input::-webkit-search-cancel-button, .ds-search-field input::-webkit-search-decoration { -webkit-appearance: none; } .ds-search-clear { width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: var(--ds-surface-raised); color: var(--ds-text-secondary); font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; } .ds-search-clear:hover { background: var(--ds-track); color: var(--ds-text-primary); } .ds-search-clear:focus-visible { outline: 2px solid var(--ds-focus); } .ds-search-kbd { font: 600 11px var(--ds-font); color: var(--ds-text-muted); border: 1px solid var(--ds-border-strong); border-radius: 5px; padding: 1px 6px; flex: none; } ds-search[has-value] .ds-search-kbd, ds-search:focus-within .ds-search-kbd { display: none; } .ds-search-busy { display: none; width: 16px; height: 16px; flex: none; } ds-search[busy] .ds-search-busy { display: inline-block; } .ds-search-pop { position: fixed; padding: 6px; border-radius: var(--ds-radius-panel); } .ds-search-pop:popover-open { animation: ds-pop var(--ds-fast) var(--ds-ease); } .ds-search-pop .ds-option-group { display: flex; justify-content: space-between; align-items: center; } .ds-search-clear-recent { font: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: var(--ds-weight-medium); color: var(--ds-accent-text); background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 4px; } .ds-search-recent { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ds-text-muted); stroke-width: 1.8; stroke-linecap: round; } .ds-search-pop mark { background: none; color: var(--ds-accent-text); font-weight: var(--ds-weight-bold); } @media (pointer: coarse) { .ds-search-kbd { display: none; } } .ds-search-clear[hidden] { display: none; } /* ---------- Live gauges: ---------- */ ds-gauge { display: block; width: 100%; max-width: var(--ds-gauge-size, 280px); --ds-gauge: var(--ds-accent-text); } ds-gauge svg { width: 100%; height: auto; display: block; overflow: visible; } .ds-gauge-track { fill: none; stroke: var(--ds-track); stroke-width: 7; } .ds-gauge-arc { fill: none; stroke: var(--ds-gauge); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray var(--ds-slower) var(--ds-ease); } .ds-gauge-knob { fill: var(--ds-border-strong); stroke: var(--ds-surface); stroke-width: 3; } .ds-gauge-disc { fill: var(--ds-surface-raised); transition: fill var(--ds-slow) ease; } .ds-gauge-disc.ds-on { fill: var(--ds-gauge); } .ds-gauge-level { transition: transform var(--ds-slower) var(--ds-ease); } .ds-gauge-wave { fill: var(--ds-gauge); animation: ds-wave calc(4s / max(var(--ds-motion), 0.25)) linear infinite; } .ds-gauge-wave.ds-back { opacity: 0.45; animation-duration: calc(6s / max(var(--ds-motion), 0.25)); } @keyframes ds-wave { to { transform: translateX(-120px); } } .ds-gauge-label { font: var(--ds-weight-bold) 11px var(--ds-font); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ds-text-primary); text-anchor: middle; } .ds-gauge-value { font: var(--ds-weight-thin) 46px var(--ds-font); fill: var(--ds-text-primary); text-anchor: middle; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ds-gauge-unit { font: var(--ds-weight-light) 18px var(--ds-font); } .ds-gauge-note { font: var(--ds-weight-medium) 11px var(--ds-font); letter-spacing: 0.1em; text-transform: uppercase; text-anchor: middle; fill: var(--ds-text-muted); } .ds-gauge-on .ds-gauge-label, .ds-gauge-on .ds-gauge-value { fill: #fff; } .ds-gauge-on .ds-gauge-note { fill: rgb(255 255 255 / 0.9); } :root[data-motion="off"] .ds-gauge-wave, :root[data-motion="reduced"] .ds-gauge-wave { animation: none; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .ds-gauge-wave { animation: none; } } .ds-gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: center; justify-items: center; } @media (max-width: 900px) { .ds-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Searchable dropdown with add: ---------- */ ds-combobox { display: block; position: relative; } .ds-combo-field { display: flex; width: 100%; padding-right: 4px; } .ds-combo-field input { flex: 1; min-width: 0; } ds-combobox:focus-within .ds-combo-field { border-color: var(--ds-accent-text); box-shadow: 0 0 0 3px var(--ds-accent-soft); } .ds-combo-toggle { width: 32px; height: 32px; flex: none; border: 0; background: none; color: var(--ds-text-muted); border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; } .ds-combo-toggle:hover { color: var(--ds-text-primary); background: var(--ds-surface-raised); } .ds-combo-toggle .ds-picker-chev { transition: transform var(--ds-fast) var(--ds-ease); } ds-combobox:has(input[aria-expanded="true"]) .ds-combo-toggle .ds-picker-chev { transform: rotate(180deg); } ds-combobox .ds-popover { overflow-y: auto; overscroll-behavior: contain; } ds-combobox .ds-listbox { max-height: none; } ds-combobox mark { background: none; color: var(--ds-accent-text); font-weight: var(--ds-weight-bold); } .ds-option-add { color: var(--ds-accent-text); font-weight: var(--ds-weight-medium); } .ds-combo-plus { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--ds-accent-soft); display: grid; place-items: center; font-weight: var(--ds-weight-bold); line-height: 1; } .ds-combo-rule { border: 0; border-top: 1px solid var(--ds-border); margin: 4px 6px; } .ds-combo-tick { width: 10px; height: 6px; flex: none; margin-right: 4px; border-left: 2px solid var(--ds-accent-text); border-bottom: 2px solid var(--ds-accent-text); transform: translateY(-2px) rotate(-45deg); } .ds-combo-empty { padding: 12px 10px; font-size: 13px; color: var(--ds-text-muted); } /* ---------- Star rating: ---------- */ ds-rating { display: inline-flex; align-items: center; gap: 10px; --ds-star: 22px; --ds-star-on: var(--ds-accent); } ds-rating[size="sm"] { --ds-star: 14px; gap: 6px; } ds-rating[size="lg"] { --ds-star: 30px; } .ds-rating-stars { display: inline-flex; gap: 2px; } ds-rating .ds-star { display: inline-grid; place-items: center; padding: 3px; margin: -3px 0; border: 0; background: none; border-radius: 6px; color: var(--ds-border-strong); line-height: 0; } ds-rating[readonly] .ds-star { padding: 0; margin: 0; } ds-rating button.ds-star { cursor: pointer; transition: transform var(--ds-fast) var(--ds-ease), color var(--ds-fast) ease; } ds-rating button.ds-star:hover { transform: scale(1.12); } ds-rating button.ds-star:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 0; } ds-rating .ds-star svg { width: var(--ds-star); height: var(--ds-star); fill: currentColor; } ds-rating .ds-star.ds-on { color: var(--ds-star-on); } /* Hover preview: what you'd set, a little lighter */ .ds-rating-stars:has(.ds-preview) .ds-star { color: var(--ds-border-strong); } .ds-rating-stars:has(.ds-preview) .ds-star.ds-preview { color: color-mix(in srgb, var(--ds-star-on) 70%, transparent); } .ds-rating-word { font-size: 13px; color: var(--ds-text-secondary); min-width: 5em; }