josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Unify UI workflows and streamline fleet management

Browse Source
This commit is contained in:
josh
2026-09-18 14:00:28 -04:00
parent 9cf0bd87f4
commit f54cac8c50
63 changed files with 1706 additions and 1286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/ui/styles/components.css
+30
View File
@@ -0,0 +1,30 @@
/* Shared layout and interaction rules. Components own their contents; parents own spacing. */
:root { color-scheme: dark; }
:where(button, input, select, textarea) { font-family: var(--font-body); font-size: var(--text-sm); }
:where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
min-width: 0; max-width: 100%; min-height: 40px; padding: 10px 12px;
color: var(--text-primary); background: var(--surface-sunken);
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
:where(input, textarea)::placeholder { color: var(--text-tertiary); opacity: 1; }
:where(button, summary) { cursor: pointer; }
:where(input[type='checkbox'], input[type='radio']) { accent-color: var(--accent-primary); }
:where(dialog) { color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); }
dialog::backdrop { background: rgb(0 0 0 / .7); backdrop-filter: blur(4px); }
:focus-visible { outline: 2px solid var(--accent-primary-hover); outline-offset: 3px; }
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ui-toolbar .search, .ui-toolbar > input[type='search'] { flex: 1 1 240px; }
.ui-toolbar select { flex: 0 1 auto; }
.ui-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); color: var(--text-secondary); font-size: var(--text-sm); }
.ui-summary strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ui-error { border: 1px solid color-mix(in srgb, var(--state-danger) 35%, transparent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--state-danger); font-size: var(--text-sm); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.ui-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.ui-sticky-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); position: sticky; bottom: 0; z-index: 5; background: var(--surface); padding: var(--space-4); border-top: 1px solid var(--border-strong); }
.ui-panel { min-width: 0; }
.ui-muted { color: var(--text-secondary); font-size: var(--text-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
.ui-toolbar .search, .ui-toolbar > input[type='search'] { flex-basis: 100%; width: 100%; }
.ui-toolbar select { flex: 1 1 130px; }
.ui-sticky-actions { padding: var(--space-3); bottom: env(safe-area-inset-bottom); }
}