kami
311c5cb1cd
- Rewrote ui.css with design tokens, card/btn/badge/dot components - All pages wrapped in <main class=page> with max-width container - Replaced inline <style> blocks with ui.css classes - passkey page now uses shared nav.site template - PWA voice page unified under shared nav.site (no more separate tab nav) - Inline lang toggle moved from nav to voice page body
136 lines
6.2 KiB
CSS
136 lines
6.2 KiB
CSS
/* maven design system — dark, restrained, #00aaff accent.
|
|
Every server-rendered page uses this single stylesheet.
|
|
Pages carry NO inline <style> beyond true one-offs. */
|
|
|
|
/* ── Design Tokens ── */
|
|
:root{
|
|
--bg:#111;--panel:#1a1a2e;--line:#222;--border:#333;
|
|
--fg:#ddd;--soft:#aaa;--muted:#888;--dim:#555;
|
|
--accent:#00aaff;--ok:#00ff88;--warn:#ffaa00;--err:#ff4444;
|
|
|
|
--surface-page:var(--bg);
|
|
--surface-card:var(--panel);
|
|
--surface-raised:#222;
|
|
--surface-input:#181818;
|
|
--surface-hover:rgba(255,255,255,.04);
|
|
|
|
--fs-xs:.7rem;--fs-sm:.8rem;--fs-base:14px;
|
|
--fs-lg:1.25rem;--fs-xl:1.5rem;
|
|
--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;
|
|
--space-lg:1.25rem;--space-xl:2rem;
|
|
--radius-sm:3px;--radius-md:6px;--radius-lg:10px;
|
|
--shadow-sm:0 1px 3px rgba(0,0,0,.3);
|
|
--shadow-md:0 2px 8px rgba(0,0,0,.4);
|
|
--transition:150ms ease;
|
|
}
|
|
|
|
/* ── Reset / Base ── */
|
|
*{box-sizing:border-box}
|
|
body{background:var(--surface-page);color:var(--fg);font:var(--fs-base)/1.6 system-ui,sans-serif;
|
|
margin:0;padding:1rem;-webkit-text-size-adjust:100%;min-height:100vh}
|
|
|
|
/* ── Typography ── */
|
|
h1,h2,h3{font-weight:400;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
|
|
h1{font-size:var(--fs-lg);margin:0 0 var(--space-lg)}
|
|
h2{font-size:.95rem;margin:var(--space-lg) 0 var(--space-sm)}
|
|
h3{font-size:.85rem;margin:var(--space-md) 0 var(--space-xs)}
|
|
h1 small,h2 small,h3 small{color:var(--dim);letter-spacing:0;text-transform:none}
|
|
a{color:var(--accent);text-decoration:none}
|
|
a:hover{text-decoration:underline}
|
|
|
|
/* ── Page Layout ── */
|
|
.page{max-width:80rem;margin:0 auto;padding:0 .5rem var(--space-xl)}
|
|
|
|
/* ── Nav (shared site nav) ── */
|
|
nav.site{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;
|
|
border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:var(--space-lg)}
|
|
nav.site a{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;
|
|
color:var(--dim);transition:color var(--transition)}
|
|
nav.site a:hover{color:var(--fg);text-decoration:none}
|
|
nav.site a.active{color:var(--accent)}
|
|
|
|
/* ── Cards ── */
|
|
.card{background:var(--surface-card);border-radius:var(--radius-md);
|
|
padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-lg);
|
|
box-shadow:var(--shadow-sm)}
|
|
.card-title{font-size:.95rem;margin:0 0 var(--space-sm);color:var(--muted);
|
|
display:flex;align-items:center;gap:var(--space-sm)}
|
|
.card-sub{font-size:var(--fs-sm);color:var(--dim);margin:0 0 var(--space-sm)}
|
|
|
|
/* ── Tables ── */
|
|
.scroll{overflow-x:auto;margin-bottom:var(--space-sm)}
|
|
table{width:100%;border-collapse:collapse}
|
|
th,td{padding:.4rem .6rem;text-align:left;vertical-align:top;
|
|
border-bottom:1px solid var(--line)}
|
|
th{color:var(--dim);font-size:var(--fs-xs);text-transform:uppercase;
|
|
letter-spacing:.05em;white-space:nowrap;font-weight:500}
|
|
td{color:var(--soft)}
|
|
tr:hover td{background:var(--surface-hover)}
|
|
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
|
|
code,.key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ok)}
|
|
|
|
/* ── Status / Semantic Colors ── */
|
|
.pending,.away,.gray{color:var(--muted)}
|
|
.acted,.pres,.green{color:var(--ok)}
|
|
.snoozed{color:var(--warn)}
|
|
.ignored,.red{color:var(--err)}
|
|
.updated,.muted{color:var(--dim);font-size:var(--fs-sm)}
|
|
.empty{color:var(--dim);padding:var(--space-xl);text-align:center}
|
|
.voided{opacity:.45;text-decoration:line-through}
|
|
.void-badge{color:var(--dim);font-size:var(--fs-sm);margin-right:.3rem}
|
|
|
|
/* ── Badges ── */
|
|
.badge{font-size:var(--fs-xs);color:var(--dim);background:var(--surface-raised);
|
|
padding:.15rem .4rem;border-radius:var(--radius-sm);white-space:nowrap}
|
|
.badge-accent{color:var(--accent);background:rgba(0,170,255,.12)}
|
|
.badge-ok{color:var(--ok);background:rgba(0,255,136,.1)}
|
|
.badge-warn{color:var(--warn);background:rgba(255,170,0,.12)}
|
|
.badge-err{color:var(--err);background:rgba(255,68,68,.12)}
|
|
|
|
/* ── Status Dot ── */
|
|
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
|
|
.dot-ok{background:var(--ok);box-shadow:0 0 5px var(--ok)}
|
|
.dot-warn{background:var(--warn);box-shadow:0 0 5px var(--warn)}
|
|
.dot-err{background:var(--err);box-shadow:0 0 5px var(--err)}
|
|
.dot-dim{background:var(--dim)}
|
|
|
|
/* ── Buttons ── */
|
|
.btn{font:inherit;font-size:var(--fs-sm);background:var(--surface-card);color:var(--fg);
|
|
border:1px solid var(--border);border-radius:var(--radius-sm);padding:.35rem .7rem;
|
|
cursor:pointer;transition:border-color var(--transition),background var(--transition);
|
|
display:inline-flex;align-items:center;gap:.3rem}
|
|
.btn:hover{border-color:var(--accent);background:var(--surface-hover)}
|
|
.btn:disabled{opacity:.4;cursor:not-allowed}
|
|
.btn-primary{background:var(--accent);color:#111;border-color:var(--accent);font-weight:500}
|
|
.btn-primary:hover{background:#0099ee;border-color:#0099ee}
|
|
.btn-danger{border-color:var(--err);color:var(--err)}
|
|
.btn-danger:hover{border-color:var(--err);background:rgba(255,68,68,.1)}
|
|
|
|
/* ── Form Elements ── */
|
|
input[type=text],input[type=url]{font:inherit;font-size:var(--fs-sm);
|
|
background:var(--surface-input);color:var(--fg);
|
|
border:1px solid var(--border);border-radius:var(--radius-sm);
|
|
padding:.35rem .5rem;max-width:100%;transition:border-color var(--transition)}
|
|
input[type=text]:focus,input[type=url]:focus{border-color:var(--accent);outline:none}
|
|
input[type=checkbox]{accent-color:var(--accent);width:1rem;height:1rem;vertical-align:middle}
|
|
label{color:var(--soft);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
|
|
|
|
/* ── Messages / Feedback ── */
|
|
.msg{margin:.6rem 0;padding:.5rem .7rem;border-radius:var(--radius-sm);
|
|
border:1px solid var(--line);font-size:var(--fs-sm)}
|
|
.msg-ok{border-color:var(--ok);color:var(--ok)}
|
|
.msg-err{border-color:var(--err);color:var(--err)}
|
|
#msg{white-space:pre-wrap}
|
|
|
|
/* ── Collapsible Details ── */
|
|
details{color:var(--soft);font-size:var(--fs-sm)}
|
|
summary{cursor:pointer;color:var(--dim);transition:color var(--transition)}
|
|
summary:hover{color:var(--fg)}
|
|
details[open]{margin-top:var(--space-xs)}
|
|
|
|
/* ── Utilities ── */
|
|
.val{word-break:break-all;max-width:20rem}
|
|
.text-max{max-width:22rem}
|
|
.input-wide{width:20rem}
|
|
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
|