Jamie BruntonandClaude Opus 5
14d92e14ee
Stopping the bot previously halted conversation syncing too. On the
multi-account path the run-flag check sat above both the reply-sync and
response-check branches, so a stop left only MediaSyncService's coarse
30-minute chat refresh. The legacy single-account path did the opposite
and kept syncing while stopped — one boolean meaning two things.
Replace the boolean with an explicit three-way mode:
running — discover, screen, send, automate replies
scan — refresh chats, detect replies, check responses; send nothing
and discover nothing; actionable replies surface as backlog
stopped — everything halts, including background media sync
scan differs from browser.dryRun, which still discovers and pays for AI
screening before suppressing the send.
The mode persists in runtime_state.bot_mode; a migration backfills it
from bot_running, and rows written by an older build still read
correctly. Both loops now gate on the mode, the account runtime loop
reconciles background media sync on transitions only, and the dashboard
and agent API expose all three states.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
294 lines
23 KiB
CSS
294 lines
23 KiB
CSS
:root {
|
|
color: #e9f1ec;
|
|
background: #09110e;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
--surface: #101a16;
|
|
--surface-raised: #17231e;
|
|
--border: #2a3a33;
|
|
--muted: #9aaca3;
|
|
--accent: #75d69d;
|
|
--accent-dark: #153c28;
|
|
--danger: #ff8a84;
|
|
--warning: #f3c76b;
|
|
--success-text: #aaf0c4;
|
|
--success-bg: #163a26;
|
|
--success-border: #28593d;
|
|
--warning-text: #ffe1a0;
|
|
--warning-bg: #2a2111;
|
|
--warning-border: #59451e;
|
|
--danger-text: #ffd1ce;
|
|
--danger-bg: #461b18;
|
|
--danger-border: #80352f;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-width: 320px; min-height: 100vh; }
|
|
button, input { font: inherit; }
|
|
button { cursor: pointer; }
|
|
button:disabled { cursor: not-allowed; opacity: .6; }
|
|
button[aria-busy="true"]:disabled { cursor: wait; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
a { color: inherit; }
|
|
.reddit-username-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .16em; }
|
|
.reddit-username-link:hover { color: #aaf0c4; }
|
|
|
|
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: white; color: black; padding: .75rem 1rem; border-radius: .5rem; }
|
|
.skip-link:focus { top: 1rem; }
|
|
.app-shell { min-height: 100vh; }
|
|
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 17.5rem; padding: 1.5rem 1rem; visibility: hidden; background: #0c1511; border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 180ms ease, visibility 180ms; }
|
|
.sidebar.is-open { visibility: visible; transform: translateX(0); }
|
|
.brand { display: flex; align-items: center; gap: .75rem; padding: 0 .5rem 1.75rem; }
|
|
.brand-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; color: #07130c; background: var(--accent); font-weight: 900; }
|
|
.brand div { display: grid; gap: .1rem; }
|
|
.brand span:last-child, .brand div span { color: var(--muted); font-size: .75rem; }
|
|
nav { display: grid; gap: .35rem; }
|
|
.nav-group { display: grid; gap: .2rem; }
|
|
.nav-group + .nav-group { margin-top: 1rem; }
|
|
.nav-group-label { padding: 0 .75rem .3rem; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
|
|
.nav-link { display: grid; gap: .2rem; padding: .8rem .75rem; color: var(--muted); text-decoration: none; border-radius: .75rem; border: 1px solid transparent; }
|
|
.nav-link span { color: #dfe9e3; font-weight: 650; }
|
|
.nav-link small { font-size: .72rem; line-height: 1.3; }
|
|
.nav-link:hover { background: var(--surface); }
|
|
.nav-link.is-active { background: var(--accent-dark); border-color: #28593d; }
|
|
.nav-link.is-active span { color: #b8f1cd; }
|
|
.navigation-backdrop { position: fixed; inset: 0; z-index: 20; width: 100%; border: 0; background: rgba(0, 0, 0, .6); }
|
|
.workspace { min-height: 100vh; }
|
|
.mobile-header { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0 1rem; background: rgba(9, 17, 14, .92); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); font-weight: 700; }
|
|
.mobile-header-actions { display: flex; gap: .55rem; }
|
|
.icon-button { width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: .6rem; color: white; background: var(--surface); font-size: 1.25rem; }
|
|
main { min-height: calc(100vh - 4rem); }
|
|
.page { width: min(78rem, 100%); margin: 0 auto; padding: 1.5rem 1rem 4rem; }
|
|
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
|
|
h1, h2, p { margin-top: 0; }
|
|
h1 { margin-bottom: .4rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.045em; }
|
|
h2 { margin-bottom: 0; font-size: 1.1rem; }
|
|
.page-header p { max-width: 42rem; margin-bottom: 0; color: var(--muted); }
|
|
.eyebrow { display: block; margin-bottom: .45rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
|
|
.header-actions, .dialog-actions { display: flex; gap: .75rem; }
|
|
.button { min-height: 2.6rem; padding: .55rem .9rem; border-radius: .65rem; border: 1px solid transparent; color: white; font-weight: 700; }
|
|
.button.primary { color: #06140b; background: var(--accent); }
|
|
.button.secondary { border-color: var(--border); background: var(--surface-raised); }
|
|
.button.danger { color: #2d0907; background: var(--danger); }
|
|
.status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 1rem; background: linear-gradient(110deg, #13221b, #0f1915); border: 1px solid var(--border); border-radius: .9rem; }
|
|
.status-strip > div { display: flex; align-items: center; gap: .75rem; }
|
|
.status-strip > div div { display: grid; }
|
|
.status-strip small { color: var(--muted); }
|
|
.status-dot { width: .7rem; height: .7rem; border-radius: 50%; }
|
|
.status-dot.running { background: var(--accent); box-shadow: 0 0 0 .35rem rgba(117, 214, 157, .12); }
|
|
.status-dot.scanning { background: var(--warning-text); box-shadow: 0 0 0 .35rem rgba(255, 200, 87, .12); }
|
|
.status-dot.stopped { background: var(--danger); box-shadow: 0 0 0 .35rem rgba(255, 138, 132, .1); }
|
|
.pill { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
|
|
.pill.neutral { color: #d4dfda; background: #2b3832; }
|
|
.pill.success { color: var(--success-text); background: var(--success-bg); }
|
|
.pill.warning { color: var(--warning-text); background: #42351b; }
|
|
.pill.danger { color: var(--danger-text); background: var(--danger-bg); }
|
|
.status-note { margin-left: auto; color: var(--muted); font-size: .85rem; }
|
|
.cooldown-banner { display: grid; gap: .25rem; padding: .9rem 1rem; margin-bottom: 1rem; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: .8rem; }
|
|
.cooldown-banner span { font-size: .85rem; }
|
|
.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
|
|
.metric-card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; }
|
|
.metric-card { display: grid; gap: .3rem; padding: 1rem; }
|
|
.metric-card > span, .metric-card small { color: var(--muted); }
|
|
.metric-card strong { font-size: 1.75rem; letter-spacing: -.04em; }
|
|
.account-status-panel { margin-bottom: .75rem; }
|
|
.account-status-grid { display: grid; gap: .75rem; }
|
|
.account-status-card { display: grid; gap: .75rem; padding: .9rem; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .75rem; }
|
|
.account-status-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
|
|
.account-status-card > p { margin: 0; color: var(--muted); font-size: .85rem; }
|
|
.account-status-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .9rem; margin: 0; }
|
|
.account-status-details div { display: grid; gap: .1rem; }
|
|
.account-status-details dt { color: var(--muted); font-size: .72rem; }
|
|
.account-status-details dd { margin: 0; font-weight: 700; text-transform: capitalize; }
|
|
.account-status-note { color: var(--muted); }
|
|
.account-status-warning { display: grid; gap: .25rem; padding: .65rem; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: .55rem; }
|
|
.account-status-warning span { font-size: .8rem; }
|
|
.account-status-warning code { width: fit-content; padding: .15rem .3rem; color: inherit; background: rgba(0, 0, 0, .25); border-radius: .25rem; }
|
|
.account-status-warning.is-error { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-border); }
|
|
.overview-grid { display: grid; gap: .75rem; }
|
|
.panel { padding: 1rem; }
|
|
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
|
|
.definition-list { display: grid; gap: .75rem; margin: 0; }
|
|
.definition-list > div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
|
|
.definition-list dt { color: var(--muted); }
|
|
.definition-list dd { margin: 0; text-align: right; font-weight: 700; }
|
|
.empty-state { display: grid; place-items: center; gap: .4rem; min-height: 10rem; text-align: center; color: var(--muted); }
|
|
.empty-state strong { color: #e9f1ec; }
|
|
.activity-list { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
|
|
.activity-list li { display: flex; align-items: flex-start; gap: .75rem; }
|
|
.activity-list li div { display: grid; gap: .15rem; }
|
|
.activity-list small { color: var(--muted); }
|
|
.origin-post-trigger { padding: 0; color: inherit; background: transparent; border: 0; font: inherit; font-weight: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; cursor: pointer; }
|
|
.origin-post-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
|
dialog.origin-post-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: auto; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .5); }
|
|
dialog.origin-post-dialog::backdrop { background: rgba(0, 0, 0, .82); }
|
|
.origin-post-dialog img { display: block; width: 100%; max-height: 28rem; object-fit: contain; background: #050907; }
|
|
.origin-post-dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: .65rem .8rem; color: var(--muted); border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
.origin-post-dialog-heading button { width: 2.25rem; height: 2.25rem; padding: 0; color: inherit; background: transparent; border: 0; font-size: 1.6rem; cursor: pointer; }
|
|
.origin-post-dialog-copy { display: grid; gap: .7rem; padding: 1rem; }
|
|
.origin-post-dialog-copy h2 { margin: 0; font-size: 1.25rem; }
|
|
.origin-post-dialog-copy small { color: var(--muted); }
|
|
.origin-post-dialog-copy a { justify-self: start; text-decoration: none; }
|
|
.origin-post-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; }
|
|
.origin-post-image { position: relative; width: 5rem; height: 5rem; overflow: hidden; background: #050907; border-radius: .45rem; }
|
|
.origin-post-image-preview-trigger { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; background: transparent; border: 0; border-radius: inherit; cursor: zoom-in; }
|
|
.origin-post-image-preview-trigger:disabled { cursor: default; }
|
|
.origin-post-image-preview-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
|
.origin-post-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 160ms ease, transform 160ms ease; }
|
|
.origin-post-image img.is-blurred { filter: blur(18px) brightness(.55); transform: scale(1.12); }
|
|
.origin-post-image .origin-post-image-reveal { position: absolute; right: .2rem; bottom: .2rem; min-height: auto; padding: .2rem .3rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: .3rem; color: white; background: rgba(0, 0, 0, .76); font-size: .58rem; font-weight: 800; }
|
|
.origin-post-image-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
|
dialog.origin-image-preview { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 1rem; background: transparent; }
|
|
dialog.origin-image-preview::backdrop { background: rgba(0, 0, 0, .92); }
|
|
.origin-image-preview-content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
|
|
.origin-image-preview-content img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
|
|
.origin-image-preview-content button { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; color: white; background: rgba(0, 0, 0, .7); font-size: 2rem; line-height: 1; cursor: pointer; }
|
|
.origin-image-preview-content button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
|
.origin-post-copy { display: grid; gap: .2rem; min-width: 0; color: inherit; text-decoration: none; }
|
|
.origin-post-card small, .origin-post-card span { color: var(--muted); font-size: .75rem; }
|
|
.origin-post-card strong { overflow-wrap: anywhere; }
|
|
.activity-marker { flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .3rem; border-radius: 50%; background: var(--muted); }
|
|
.activity-marker.sent, .activity-marker.response { background: var(--accent); }
|
|
.activity-marker.error { background: var(--danger); }
|
|
.page-state { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: 60vh; color: var(--muted); }
|
|
.error-state strong, .error-panel strong { color: var(--danger); }
|
|
.error-panel, .panel-loading { display: grid; place-items: center; align-content: center; gap: .75rem; min-height: 14rem; text-align: center; color: var(--muted); }
|
|
.spinner { width: 1.4rem; height: 1.4rem; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
dialog.modal { color: inherit; border: 0; background: transparent; }
|
|
dialog.modal::backdrop { background: rgba(0, 0, 0, .72); }
|
|
body:has(dialog.modal[open]) { overflow: hidden; }
|
|
dialog.dialog-card { width: min(28rem, calc(100% - 2rem)); padding: 1.4rem; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .4); }
|
|
.dialog-card p { color: var(--muted); }
|
|
.dialog-error { padding: .65rem .8rem; color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: .55rem; }
|
|
.dialog-actions { justify-content: flex-end; margin-top: 1.5rem; }
|
|
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 110; display: flex; align-items: baseline; gap: .6rem; max-width: 25rem; padding: .8rem 1rem; border-radius: .7rem; }
|
|
.toast.error { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); }
|
|
.toast button { min-height: auto; padding: 0; color: inherit; background: transparent; border: 0; font-weight: 800; text-decoration: underline; }
|
|
|
|
.account-owner-badge {
|
|
align-self: flex-start;
|
|
align-items: center;
|
|
background: color-mix(in srgb, var(--accent, #ff6534) 12%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--accent, #ff6534) 35%, transparent);
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
font-size: .75rem;
|
|
gap: .35rem;
|
|
padding: .2rem .55rem;
|
|
width: fit-content;
|
|
}
|
|
|
|
.account-owner-badge.is-unassigned {
|
|
background: color-mix(in srgb, #d99a24 12%, transparent);
|
|
border-color: color-mix(in srgb, #d99a24 40%, transparent);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Forms
|
|
Shared field primitives (components/form-fields.tsx). Every editable surface
|
|
uses these so labels, hints and error placement stay identical everywhere.
|
|
--------------------------------------------------------------------------- */
|
|
.field { display: grid; gap: .35rem; min-width: 0; }
|
|
.field-label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
|
|
.field-hint { color: var(--muted); font-size: .78rem; }
|
|
.field-error { color: var(--danger); font-size: .78rem; font-weight: 700; }
|
|
.field-input { position: relative; display: flex; align-items: center; }
|
|
.field input, .field select, .field textarea, .field-input input {
|
|
width: 100%; min-height: 2.7rem; padding: .55rem .7rem; color: #e9f1ec;
|
|
background: var(--surface-raised); border: 1px solid var(--border); border-radius: .6rem;
|
|
}
|
|
.field textarea { resize: vertical; line-height: 1.5; }
|
|
.field textarea.is-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
|
|
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.field [aria-invalid="true"] { border-color: var(--danger); }
|
|
.field-prefix, .field-suffix { position: absolute; color: var(--muted); font-size: .82rem; font-weight: 700; pointer-events: none; }
|
|
.field-prefix { left: .7rem; }
|
|
.field-suffix { right: .7rem; }
|
|
.field-input.has-prefix input { padding-left: 2rem; }
|
|
.field-input.has-suffix input { padding-right: 3.6rem; }
|
|
.field-row { display: grid; gap: .9rem; }
|
|
.field-group { display: grid; gap: .9rem; padding: 1rem; margin: 0; border: 1px solid var(--border); border-radius: .75rem; }
|
|
.field-group legend { padding: 0 .4rem; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
|
|
.switch-field { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .75rem; cursor: pointer; }
|
|
.switch-field input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--accent); }
|
|
.switch-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.switch-field.is-critical { border-color: var(--warning-border); background: var(--warning-bg); }
|
|
.switch-field.is-critical .switch-copy strong { color: var(--warning-text); }
|
|
.switch-copy { display: grid; gap: .2rem; }
|
|
.switch-copy small { color: var(--muted); }
|
|
.switch-list { display: grid; gap: .5rem; }
|
|
|
|
.radio-cards { display: grid; gap: .5rem; padding: 1rem; margin: 0; border: 1px solid var(--border); border-radius: .75rem; }
|
|
.radio-cards legend { padding: 0 .4rem; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
.radio-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: .7rem; }
|
|
.radio-card.is-selected { border-color: var(--accent); background: var(--accent-dark); }
|
|
.radio-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.radio-card > label { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem; cursor: pointer; }
|
|
/* Scoped to the option's own radio: a bare `.radio-card input` also matches
|
|
the number inputs nested in .radio-detail and shrinks them to 1.1rem. */
|
|
.radio-card > label > input[type="radio"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--accent); }
|
|
.radio-copy { display: grid; gap: .25rem; }
|
|
.radio-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
|
|
.radio-copy small { color: var(--muted); line-height: 1.45; }
|
|
.radio-detail { padding: 0 .85rem .85rem 3.05rem; }
|
|
|
|
.inline-switch { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; color: var(--muted); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; font-weight: 750; cursor: pointer; }
|
|
.inline-switch input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
|
|
.inline-switch:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Cards that own their own save
|
|
--------------------------------------------------------------------------- */
|
|
.settings-card { display: grid; gap: 1rem; padding: 0; overflow: hidden; }
|
|
.settings-card-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem 0; }
|
|
.settings-card-heading h2 { margin-bottom: .35rem; }
|
|
.settings-card-heading p { max-width: 44rem; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
|
|
.settings-card-body { display: grid; gap: .9rem; padding: 0 1.1rem; }
|
|
.settings-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; background: var(--surface-raised); border-top: 1px solid var(--border); }
|
|
.settings-card-status { display: grid; gap: .15rem; color: var(--muted); font-size: .82rem; }
|
|
.save-success { color: var(--accent); }
|
|
.save-warning { color: var(--warning); }
|
|
.save-error { color: var(--danger); }
|
|
|
|
.state-banner { display: grid; gap: .25rem; padding: .85rem 1rem; margin: 0; border: 1px solid var(--border); border-radius: .7rem; }
|
|
.state-banner span { font-size: .85rem; opacity: .9; }
|
|
.state-banner.is-safe { color: var(--success-text); background: var(--success-bg); border-color: var(--success-border); }
|
|
.state-banner.is-live, .state-banner.is-error { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-border); }
|
|
.state-banner.is-warning { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-border); }
|
|
.state-banner .button { justify-self: start; margin-top: .35rem; }
|
|
|
|
.numbered-steps { display: grid; gap: .5rem; padding-left: 1.3rem; margin: 0; color: var(--muted); line-height: 1.5; }
|
|
.numbered-steps strong { color: #e9f1ec; }
|
|
|
|
/* In-page section jump list, for pages built from stacked cards. */
|
|
.section-rail { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
|
|
.section-rail a { padding: .4rem .8rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; font-weight: 750; text-decoration: none; }
|
|
.section-rail a:hover { color: #e9f1ec; border-color: #3b5147; }
|
|
.section-rail a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* Wide modal used as an editing surface rather than a confirmation. */
|
|
dialog.drawer-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(46rem, calc(100% - 2rem)); max-height: calc(100vh - 3rem); padding: 0; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .5); }
|
|
.drawer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .25rem; }
|
|
.drawer-heading h2 { margin: 0; font-size: 1.35rem; }
|
|
.drawer-body { display: grid; gap: .9rem; padding: .85rem 1.1rem; overflow-y: auto; }
|
|
.drawer-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; background: var(--surface-raised); border-top: 1px solid var(--border); }
|
|
|
|
@media (min-width: 42rem) {
|
|
.field-row { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
.sidebar { visibility: visible; transform: none; }
|
|
.workspace { margin-left: 17.5rem; }
|
|
.mobile-header { display: none; }
|
|
main { min-height: 100vh; }
|
|
.page { padding: 3rem 2rem 5rem; }
|
|
.navigation-backdrop { display: none; }
|
|
.metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.account-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.overview-grid { grid-template-columns: minmax(18rem, .8fr) minmax(22rem, 1.2fr); }
|
|
}
|