feat: rework first run as a setup checklist and split settings into tabs
This commit is contained in:
randogoth
parent
6f82a84b69
commit
1710d7b144
5 changed files with 604 additions and 232 deletions
343
web/style.css
343
web/style.css
|
|
@ -6,34 +6,43 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--bg: light-dark(#f6f8fc, #16181c);
|
||||
--surface: light-dark(#ffffff, #202124);
|
||||
--fg: light-dark(#202124, #e8eaed);
|
||||
--muted: light-dark(#5f6368, #9aa0a6);
|
||||
--border: light-dark(#dadce0, #3c4043);
|
||||
--divider: light-dark(#ebedf0, #2c2e33);
|
||||
/* light #1a73e8 fell to 3.93:1 against --accent-soft, which is the compose
|
||||
pill and the active folder; both sides here clear AA on every surface. */
|
||||
--accent: light-dark(#0b57d0, #a8c7fa);
|
||||
--accent-soft: light-dark(#e8f0fe, #22364f);
|
||||
--on-accent: light-dark(#ffffff, #062e6f);
|
||||
--hover: light-dark(#f1f3f4, #2a2c31);
|
||||
--bg: light-dark(#f4f6fa, #121316);
|
||||
--surface: light-dark(#ffffff, #1c1e22);
|
||||
/* A second surface for rails and inset cards, so nesting reads without a
|
||||
second border everywhere. */
|
||||
--raised: light-dark(#fafbfd, #23262b);
|
||||
--fg: light-dark(#1b1c1f, #e6e8ec);
|
||||
--muted: light-dark(#5e6572, #9ba1ad);
|
||||
--border: light-dark(#e1e4ea, #333740);
|
||||
--divider: light-dark(#eef0f4, #262930);
|
||||
/* Both sides clear AA on --surface, --bg and --accent-soft alike, which is
|
||||
what the compose pill, the active folder, the tab rail and the setup
|
||||
checklist all need. */
|
||||
--accent: light-dark(#3a55c8, #9db1ff);
|
||||
--accent-soft: light-dark(#eceffd, #242a3e);
|
||||
--on-accent: light-dark(#ffffff, #0e1430);
|
||||
--hover: light-dark(#f1f3f7, #262a31);
|
||||
--warn: light-dark(#c5221f, #f28b82);
|
||||
--on-warn: light-dark(#ffffff, #3c0d0a);
|
||||
--ok-bg: light-dark(#e6f4ea, #1d3826);
|
||||
--ok-fg: light-dark(#137333, #81c995);
|
||||
--alert-bg: light-dark(#feefc3, #3d3520);
|
||||
--alert-fg: light-dark(#7a4f01, #fdd663);
|
||||
--toast-bg: light-dark(#202124, #e8eaed);
|
||||
--toast-fg: light-dark(#e8eaed, #202124);
|
||||
--backdrop: light-dark(rgba(32, 33, 36, 0.3), rgba(0, 0, 0, 0.6));
|
||||
--shadow-near: light-dark(rgba(60, 64, 67, 0.2), rgba(0, 0, 0, 0.55));
|
||||
--shadow-far: light-dark(rgba(60, 64, 67, 0.08), rgba(0, 0, 0, 0.35));
|
||||
--toast-bg: light-dark(#1b1c1f, #e6e8ec);
|
||||
--toast-fg: light-dark(#e6e8ec, #1b1c1f);
|
||||
--backdrop: light-dark(rgba(27, 28, 31, 0.34), rgba(0, 0, 0, 0.62));
|
||||
--shadow-near: light-dark(rgba(23, 26, 38, 0.10), rgba(0, 0, 0, 0.50));
|
||||
--shadow-far: light-dark(rgba(23, 26, 38, 0.08), rgba(0, 0, 0, 0.34));
|
||||
|
||||
--ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
--radius: 8px;
|
||||
--shadow: 0 1px 3px var(--shadow-near), 0 4px 8px 3px var(--shadow-far);
|
||||
/* Cards and dialogs take --radius; anything hit-sized takes --radius-sm, so
|
||||
a small button never wears a curve it is too short to carry. */
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--radius-pill: 999px;
|
||||
--shadow: 0 1px 2px var(--shadow-near), 0 6px 18px -8px var(--shadow-far);
|
||||
--shadow-lg: 0 2px 6px var(--shadow-near), 0 24px 56px -16px var(--shadow-far);
|
||||
}
|
||||
|
||||
/* The toggle pins a side; without the attribute the system decides. */
|
||||
|
|
@ -49,7 +58,7 @@ body {
|
|||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh; /* mobile browser chrome eats the last row of 100vh */
|
||||
font: 14px/1.5 var(--ui);
|
||||
font: 14px/1.55 var(--ui);
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
|
@ -57,12 +66,13 @@ body {
|
|||
button {
|
||||
font: inherit;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--accent);
|
||||
padding: 6px 14px;
|
||||
padding: 7px 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
button:hover { background: var(--hover); }
|
||||
button:disabled { color: var(--muted); cursor: default; }
|
||||
|
|
@ -85,9 +95,9 @@ button:disabled:hover { background: none; }
|
|||
|
||||
input, textarea {
|
||||
font: inherit;
|
||||
padding: 6px 10px;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
|
@ -97,16 +107,25 @@ input, textarea {
|
|||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
|
||||
|
||||
details > summary {
|
||||
width: fit-content;
|
||||
padding: 2px 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
details > summary:hover { color: var(--accent); }
|
||||
|
||||
/* --- top bar --------------------------------------------------------------- */
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 16px;
|
||||
padding: 11px 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.brand { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
|
||||
.brand { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
|
||||
.search {
|
||||
flex: 1;
|
||||
min-width: 0; /* an input's intrinsic size is its flex floor otherwise, and it overflows narrow bars */
|
||||
|
|
@ -114,8 +133,8 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: va
|
|||
margin: 0 auto;
|
||||
background: var(--hover);
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 9px 16px;
|
||||
}
|
||||
.search:focus { background: var(--surface); outline: 2px solid var(--accent); }
|
||||
.top-actions { display: flex; align-items: center; gap: 4px; }
|
||||
|
|
@ -159,7 +178,7 @@ main { flex: 1; min-height: 0; display: flex; background: var(--bg); }
|
|||
gap: 14px;
|
||||
margin: 2px 0 18px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 20px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-weight: 500;
|
||||
|
|
@ -312,58 +331,149 @@ main { flex: 1; min-height: 0; display: flex; background: var(--bg); }
|
|||
|
||||
/* --- setup -------------------------------------------------------------------- */
|
||||
|
||||
/* One card at a time: "create" and "restore" are the same question asked two
|
||||
ways, and showing both at once was most of what made first run look busy. */
|
||||
.setup {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
background: var(--bg);
|
||||
padding: 16px;
|
||||
padding: 24px 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.setup h2 { margin: 0; font-weight: 400; }
|
||||
.setup p { color: var(--muted); max-width: 480px; }
|
||||
.setup .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
|
||||
.setup .row.restore-row { align-items: flex-end; }
|
||||
.setup label {
|
||||
.setup-card {
|
||||
width: min(440px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 150px;
|
||||
gap: 14px;
|
||||
padding: 28px 28px 18px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.setup-card h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: center;
|
||||
}
|
||||
.setup-card .lead { margin: 0; color: var(--muted); text-align: center; }
|
||||
.setup-card .stack { display: flex; flex-direction: column; gap: 14px; }
|
||||
.setup-card label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
text-align: left;
|
||||
}
|
||||
.setup label input { font-family: var(--mono); font-size: 13px; }
|
||||
.setup-card label input { font-family: var(--mono); font-size: 13px; }
|
||||
#restore-extra label { margin-top: 10px; }
|
||||
.hint.centered { text-align: center; }
|
||||
|
||||
.large { padding: 11px 20px; font-size: 15px; }
|
||||
/* The quieter sibling of a card's one real action, not a second one. */
|
||||
.link {
|
||||
align-self: center;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.link:hover { color: var(--accent); background: none; }
|
||||
|
||||
/* --- setup checklist ------------------------------------------------------------ */
|
||||
|
||||
/* Over the mailbox the missing steps are holding up, rather than inside the
|
||||
dialog the user would have to already know to open. */
|
||||
.setup-banner {
|
||||
flex: none;
|
||||
margin: 10px 10px 0;
|
||||
padding: 12px 14px 10px;
|
||||
background: var(--accent-soft);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.setup-banner-head { display: flex; align-items: center; gap: 10px; }
|
||||
.setup-banner-head h2 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent);
|
||||
}
|
||||
.setup-banner-count { font-size: 12px; color: var(--accent); }
|
||||
.setup-banner .icon-only { padding: 4px; color: var(--accent); }
|
||||
.setup-banner .icon-only:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
||||
|
||||
.setup-steps { list-style: none; margin: 6px 0 0; padding: 0; }
|
||||
.setup-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
|
||||
.setup-step + .setup-step { border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
|
||||
.setup-mark {
|
||||
flex: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 1px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 50%;
|
||||
color: var(--ok-fg);
|
||||
}
|
||||
.setup-step.done .setup-mark { background: var(--ok-bg); border-color: var(--ok-bg); }
|
||||
.setup-mark .icon { width: 13px; height: 13px; stroke-width: 3; }
|
||||
.setup-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.setup-step-title { font-size: 13px; font-weight: 500; }
|
||||
/* A finished step keeps its place in the order but stops explaining itself. */
|
||||
.setup-step.done .setup-step-title { color: var(--muted); font-weight: 400; }
|
||||
.setup-step.done .hint { display: none; }
|
||||
.setup-step-action {
|
||||
flex: none;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.setup-step-action:hover { background: var(--surface); }
|
||||
|
||||
/* --- dialogs --------------------------------------------------------------------- */
|
||||
|
||||
dialog {
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 20px 24px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 0;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
min-width: min(460px, calc(100vw - 32px));
|
||||
max-width: min(640px, calc(100vw - 32px));
|
||||
max-height: calc(100dvh - 48px);
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
dialog::backdrop { background: var(--backdrop); }
|
||||
#compose form { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
.dialog-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 13px 12px 13px 22px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.dialog-head h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.dialog-head .icon-only { color: var(--muted); }
|
||||
.dialog-head .icon-only:hover { color: var(--fg); }
|
||||
|
||||
#compose form { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; }
|
||||
#compose input, #compose textarea { width: 100%; }
|
||||
#compose textarea { font-family: inherit; resize: vertical; }
|
||||
#compose footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding-top: 4px; flex-wrap: wrap; }
|
||||
#compose .anon { font-size: 13px; color: var(--muted); margin-right: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||||
|
||||
/* A checkbox with a multi-line label, e.g. settings' "leave mail on server" —
|
||||
the checkbox sits at the label's cap height rather than centered against
|
||||
the full wrapped block, which is what made it look adrift. */
|
||||
#settings label.check-row { flex-direction: row; align-items: flex-start; gap: 10px; flex: none; }
|
||||
#settings label.check-row input { flex: none; margin: 3px 0 0; }
|
||||
.check-row .check-title { display: block; color: var(--fg); font-size: 14px; }
|
||||
.check-row .hint { display: block; margin: 2px 0 0; }
|
||||
/* Without this every action read exactly like "cancel" and "close". */
|
||||
.filled { background: var(--accent); color: var(--on-accent); font-weight: 500; padding: 8px 20px; }
|
||||
.filled:hover { background: var(--accent); box-shadow: var(--shadow); }
|
||||
|
|
@ -372,73 +482,102 @@ dialog::backdrop { background: var(--backdrop); }
|
|||
.danger { background: var(--warn); color: var(--on-warn); font-weight: 500; padding: 8px 20px; }
|
||||
.danger:hover { background: var(--warn); box-shadow: var(--shadow); }
|
||||
.error { color: var(--warn); font-size: 13px; }
|
||||
/* A secondary action standing on its own under a paragraph: the border is what
|
||||
stops its padding from reading as a stray indent. */
|
||||
.outline { border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-weight: 500; }
|
||||
.outline:hover { background: var(--hover); box-shadow: var(--shadow); }
|
||||
|
||||
#settings section { margin-bottom: 26px; }
|
||||
#settings h3 {
|
||||
/* --- settings -------------------------------------------------------------------- */
|
||||
|
||||
/* Tabs, because the account, the server, a mailbox preference, the backup file
|
||||
and the irreversible operations have nothing to say to each other — reading
|
||||
all five in one scroll was the overwhelming part. Scoped to [open]: a bare
|
||||
`display: flex` would override the UA's `display: none` on a closed dialog. */
|
||||
#settings { max-width: min(760px, calc(100vw - 32px)); }
|
||||
#settings[open] { display: flex; flex-direction: column; }
|
||||
.settings-body { flex: 1; min-height: min(440px, 58dvh); display: flex; align-items: stretch; }
|
||||
|
||||
.settings-tabs {
|
||||
flex: none;
|
||||
width: 148px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 6px;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 12px 8px;
|
||||
background: var(--raised);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.settings-tabs button {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
}
|
||||
.settings-tabs button:hover { background: var(--hover); }
|
||||
.settings-tabs button.active { background: var(--accent-soft); color: var(--accent); }
|
||||
|
||||
.settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 24px; }
|
||||
#settings h3 {
|
||||
margin: 24px 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
}
|
||||
/* The numbers say what order these have to happen in — registering against an
|
||||
unpinned server is refused, so the server section cannot come second. */
|
||||
#settings .step {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
#settings .step.done { background: var(--ok-bg); color: var(--ok-fg); }
|
||||
#settings form { display: flex; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; align-items: flex-end; }
|
||||
#settings h3:first-child { margin-top: 0; }
|
||||
#settings .danger-head { color: var(--warn); }
|
||||
#settings form { display: flex; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; align-items: flex-end; }
|
||||
#settings label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
min-width: 170px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
#settings label input { font-family: var(--mono); font-size: 13px; }
|
||||
#settings footer { display: flex; justify-content: flex-end; }
|
||||
#settings details { margin: 12px 0 2px; }
|
||||
|
||||
/* Unregistered this is the panel's whole point, so it is a card rather than a
|
||||
footnote; registered, the same block collapses to one line. */
|
||||
#account-claim {
|
||||
margin: 18px 0 4px;
|
||||
padding: 12px 14px;
|
||||
background: var(--raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
#account-claim > summary { font-size: 13px; font-weight: 600; color: var(--accent); }
|
||||
#account-claim form + .hint { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
|
||||
|
||||
/* A checkbox with a multi-line label, e.g. "leave mail on server" — the box
|
||||
sits at the label's cap height rather than centered against the full wrapped
|
||||
block, which is what made it look adrift. */
|
||||
#settings label.check-row { flex-direction: row; align-items: flex-start; gap: 10px; flex: none; }
|
||||
#settings label.check-row input { flex: none; margin: 3px 0 0; }
|
||||
.check-row .check-title { display: block; color: var(--fg); font-size: 14px; }
|
||||
.check-row .hint { display: block; margin: 2px 0 0; }
|
||||
|
||||
.hint { font-size: 12px; color: var(--muted); margin: 4px 0; }
|
||||
|
||||
/* label / value rows, in place of the monospace `key: value` dump */
|
||||
.field { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; }
|
||||
.field { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
|
||||
.field-label { flex: none; width: 96px; font-size: 12px; color: var(--muted); }
|
||||
.field-value { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }
|
||||
.field-value.empty { font-family: inherit; font-style: italic; color: var(--muted); }
|
||||
|
||||
.seed-card { border: 1px solid var(--warn); border-radius: var(--radius); padding: 12px 14px; margin: 14px 0 10px; }
|
||||
.seed-card h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--warn);
|
||||
}
|
||||
.seed-card { border: 1px solid var(--warn); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 12px; }
|
||||
.seed-card .row { display: flex; align-items: center; gap: 8px; }
|
||||
.backup-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
|
||||
.seed-card .seed { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }
|
||||
.seed-card p { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
|
||||
.backup-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
|
||||
|
||||
#settings details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
|
||||
#settings summary { font-size: 12px; color: var(--muted); cursor: pointer; }
|
||||
#settings details .hint { margin: 8px 0; }
|
||||
|
||||
.kv { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
|
||||
.kv li { display: flex; gap: 10px; padding: 3px 0; align-items: baseline; }
|
||||
.kv { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
|
||||
.kv li { display: flex; gap: 10px; padding: 5px 0; align-items: baseline; }
|
||||
.kv li + li { border-top: 1px solid var(--divider); }
|
||||
.kv .key { font-family: var(--mono); word-break: break-all; color: var(--muted); flex: 1; }
|
||||
|
||||
.copy { font-size: 12px; padding: 4px 10px; }
|
||||
|
|
@ -498,4 +637,24 @@ dialog::backdrop { background: var(--backdrop); }
|
|||
.item .who { width: auto; flex: 0 1 110px; }
|
||||
.view { padding: 16px; }
|
||||
.toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
|
||||
.setup-card { padding: 22px 18px 14px; }
|
||||
.setup-banner { margin: 8px 8px 0; }
|
||||
/* The tab rail turns into a scrollable strip rather than eating half the
|
||||
width of a phone-sized dialog. */
|
||||
.settings-body { flex-direction: column; min-height: 0; }
|
||||
.settings-tabs {
|
||||
width: auto;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
padding: 8px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.settings-tabs button { width: auto; }
|
||||
.settings-panels { padding: 16px 16px 20px; }
|
||||
.dialog-head { padding: 12px 8px 12px 16px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
button { transition: none; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue