christianandClaude Fable 5.1
0eee778a92
A draft started before someone else's Apply used to carry that older config and would have put the newer changes back. Now every read of the draft replays only the draft's own changes onto the live settings (base config from history), so the review lists exactly what you changed. Values read in words (windows as days and hours), long ones fold open with was/now, commands are no longer red, and warnings the live config already had are not repeated. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
140 lines
16 KiB
CSS
140 lines
16 KiB
CSS
/* One top bar with icon navigation; the screen below; one column on a phone. Short labels, hints on hover. */
|
|
:root {
|
|
--bg: #f4f6f3; --surface: #ffffff; --fg: #1d2420; --muted: #5d6963; --line: #d5dcd6; --accent: #0f6b3a; --accent-soft: #e1f0e7;
|
|
--deck: #1b1f1d; --ok: #007a2e; --problem: #d8322b; --warn: #e3a000; --unknown: #8b96a0; --none: #c3c9c3; --hand: #2b6cb0; --purple: #6a1b9a;
|
|
--font: -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, Menlo, monospace;
|
|
}
|
|
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
|
|
--bg: #14181a; --surface: #1d2326; --fg: #e6ebe6; --muted: #9aa69e; --line: #333c3f; --accent: #5fcf8a; --accent-soft: #1f3a2b;
|
|
--deck: #0c0e0d; --ok: #3fbf6f; --problem: #ff6a5e; --warn: #f0b84a; --unknown: #8b96a0; --none: #4c5553; --hand: #7fb3ef; color-scheme: dark } }
|
|
:root[data-theme="dark"] {
|
|
--bg: #14181a; --surface: #1d2326; --fg: #e6ebe6; --muted: #9aa69e; --line: #333c3f; --accent: #5fcf8a; --accent-soft: #1f3a2b;
|
|
--deck: #0c0e0d; --ok: #3fbf6f; --problem: #ff6a5e; --warn: #f0b84a; --unknown: #8b96a0; --none: #4c5553; --hand: #7fb3ef; color-scheme: dark }
|
|
* { box-sizing: border-box; }
|
|
[hidden] { display: none !important; }
|
|
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.4 var(--font); }
|
|
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
/* top bar */
|
|
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
|
|
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--fg); text-decoration: none; }
|
|
.brand b { letter-spacing: .06em; } .brand .muted { font-size: .9rem; }
|
|
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--unknown); display: inline-block; }
|
|
.dot.ok { background: var(--ok); } .dot.bad { background: var(--purple); }
|
|
.nav { display: flex; gap: 2px; margin-left: 6px; }
|
|
.nav a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .72rem; }
|
|
.nav a svg { width: 22px; height: 22px; }
|
|
.nav a.active, .nav a:hover { background: var(--accent-soft); color: var(--accent); }
|
|
#search { flex: 1; min-width: 80px; max-width: 320px; margin-left: auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
|
|
.topright { display: flex; gap: 6px; align-items: center; }
|
|
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 8px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
|
|
button:hover { border-color: var(--accent); } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|
button.icon { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; font-weight: 700; }
|
|
button.toggle { font-weight: 600; } button.toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|
button.danger { border-color: var(--problem); color: var(--problem); } button.primary.danger { background: var(--problem); color: #fff; }
|
|
button.small { padding: 3px 9px; font-size: .85rem; }
|
|
button[disabled] { opacity: .45; cursor: not-allowed; }
|
|
.badge { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap; }
|
|
.badge.warn { background: var(--warn); color: #1d2420; }
|
|
.legend { padding: 6px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; }
|
|
.legend i, .light { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--unknown); }
|
|
.l-ok, .light.ok { background: var(--ok); } .l-problem, .light.problem { background: var(--problem); } .l-unknown, .light.unknown { background: var(--unknown); }
|
|
.l-none, .light.not_needed { background: var(--none); } .l-hand, .light.hand { background: var(--hand); } .light.warn { background: var(--warn); } .l-purple { background: var(--purple); }
|
|
|
|
/* hints: a small circle; the text appears on hover or focus, never in the flow */
|
|
.hint { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; font-style: italic; font-family: Georgia, serif; margin-left: 5px; vertical-align: 1px; cursor: help; position: relative; }
|
|
[data-hint] { position: relative; }
|
|
[data-hint]:hover::after, [data-hint]:focus-visible::after { content: attr(data-hint); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 20; background: #1d2420; color: #fff; padding: 6px 9px; border-radius: 6px; font: .8rem/1.35 var(--font); font-style: normal; white-space: normal; width: max-content; max-width: 280px; box-shadow: 0 6px 18px rgba(0,0,0,.3); pointer-events: none; text-align: left; }
|
|
.hintleft[data-hint]:hover::after { left: auto; right: 0; transform: none; }
|
|
|
|
/* layout */
|
|
main { padding: 14px 18px 48px; max-width: 1240px; margin: 0 auto; min-width: 0; }
|
|
h1 { font-size: 1.35rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } h2 { font-size: 1.05rem; margin: 18px 0 8px; } h3 { font-size: .95rem; margin: 10px 0 6px; }
|
|
.muted { color: var(--muted); } .small { font-size: .86rem; } .mono { font-family: var(--mono); font-size: .86em; }
|
|
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 10px 0; min-width: 0; }
|
|
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
|
|
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
|
.cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; } .cols > * { min-width: 0; }
|
|
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr); } }
|
|
table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { text-align: left; vertical-align: middle; padding: 5px 8px; border-bottom: 1px solid var(--line); }
|
|
th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } tr.click { cursor: pointer; } tr.click:hover { background: var(--accent-soft); } tr.sel { background: var(--accent-soft); }
|
|
.tablewrap { overflow-x: auto; }
|
|
.word { font-weight: 700; } .word.OK { color: var(--ok); } .word.Problem { color: var(--problem); } .word.Not { color: var(--muted); }
|
|
.problems { list-style: none; padding: 0; margin: 0; } .problems li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
|
|
.problems .lvl { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
|
|
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); font-size: .82rem; font-family: var(--mono); }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .85rem; }
|
|
.chip.ok { border-color: var(--ok); } .chip.bad { border-color: var(--problem); color: var(--problem); }
|
|
.deck { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; background: var(--deck); padding: 8px; border-radius: 12px; max-width: 640px; width: 100%; }
|
|
.key { aspect-ratio: 1; min-width: 0; overflow: hidden; border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3px; font: 600 clamp(.5rem, .85vw, .68rem)/1.1 var(--font); white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; border: 2px solid transparent; }
|
|
.key.sel { border-color: #fff; } .key.empty { background: #2b2f2d; cursor: default; opacity: .5; } .key.nav { background: #37474f; color: #fff; cursor: default; }
|
|
.key[draggable="true"] { cursor: grab; } .key.empty[data-drop] { outline: 1px dashed #555; opacity: .7; } .key.empty.over { outline: 2px solid var(--accent); opacity: 1; }
|
|
@keyframes blink { 0%, 49% { background: var(--b1); color: var(--f1); } 50%, 100% { background: var(--b2); color: var(--f2); } }
|
|
.key.blink { animation: blink 1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .key.blink { animation: none; } }
|
|
.tray.over { outline: 2px solid var(--accent); border-radius: 8px; } .tray button[draggable="true"] { cursor: grab; }
|
|
.tabs { display: flex; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; align-items: center; } .tabs button.on { background: var(--accent-soft); border-color: var(--accent); }
|
|
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; align-items: baseline; margin: 0; } .kv dt { color: var(--muted); font-size: .85rem; } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
|
|
details { margin: 6px 0; } summary { cursor: pointer; color: var(--muted); }
|
|
pre.log { background: var(--deck); color: #d6dbe4; padding: 10px 12px; border-radius: 10px; font: .8rem/1.5 var(--mono); overflow: auto; max-height: 70vh; white-space: pre-wrap; }
|
|
|
|
/* fields: a short label with a hint, the input beside it on wide screens */
|
|
.field { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 5px 0; }
|
|
.field .fl { color: var(--muted); font-size: .85rem; } .field.block { grid-template-columns: 1fr; }
|
|
.field input:not([type=checkbox]), .field select, .field textarea, .dialog input, .dialog select { width: 100%; max-width: 520px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; }
|
|
.field input[type=checkbox] { justify-self: start; width: 18px; height: 18px; }
|
|
textarea.mono { font-family: var(--mono); font-size: .84rem; }
|
|
.field input[disabled], .field select[disabled], .field textarea[disabled] { opacity: .7; border-style: dashed; }
|
|
input.hhmm { width: 5.5em; } input.pagenum { width: 4.5em; padding: 3px 5px; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
|
|
label.inline { display: inline-flex; align-items: center; gap: 5px; margin: 2px 8px 2px 0; font-size: .9rem; white-space: nowrap; }
|
|
label.btn, a.btn { display: inline-block; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 8px; padding: 6px 12px; text-decoration: none; }
|
|
.help { color: var(--muted); font-size: .84rem; }
|
|
@media (max-width: 760px) { .field { grid-template-columns: 1fr; gap: 2px; } }
|
|
|
|
/* settings page: sections down the left, one section at a time */
|
|
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; }
|
|
.subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 64px; align-self: start; }
|
|
.subnav a { padding: 6px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; font-size: .92rem; display: flex; justify-content: space-between; }
|
|
.subnav a.active, .subnav a:hover { background: var(--accent-soft); color: var(--accent); }
|
|
.subnav .sep { border-top: 1px solid var(--line); margin: 6px 8px; }
|
|
#subsel { display: none; }
|
|
@media (max-width: 760px) { .settings { grid-template-columns: 1fr; } .subnav { display: none; } #subsel { display: block; width: 100%; margin-bottom: 8px; padding: 7px; font: inherit; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); } }
|
|
|
|
/* the weekly calendar: paint when the panel may act by itself */
|
|
.cal { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 1px; user-select: none; max-width: 560px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
|
|
.cal .h { background: var(--surface); font-size: .72rem; color: var(--muted); text-align: center; padding: 3px 0; }
|
|
.cal .t { background: var(--surface); font-size: .66rem; color: var(--muted); text-align: right; padding-right: 4px; line-height: 9px; height: 9px; }
|
|
.cal .c { background: var(--surface); height: 9px; cursor: crosshair; } .cal .c.on { background: var(--accent); }
|
|
.cal .c.hour { border-top: 1px solid var(--line); }
|
|
.cal.ro .c { cursor: default; }
|
|
.calwrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
|
|
|
|
.searchresults { position: absolute; right: 16px; left: auto; top: 50px; z-index: 6; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 50vh; overflow: auto; min-width: 280px; }
|
|
.searchresults a { display: block; padding: 7px 12px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); } .searchresults a:hover { background: var(--accent-soft); }
|
|
.dialog { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9; padding: 16px; }
|
|
.dialog .box { background: var(--surface); border-radius: 12px; padding: 18px; max-width: 520px; width: 100%; max-height: 92vh; overflow: auto; }
|
|
.dialog input, .dialog select { margin: 6px 0; } .dialog h3 { margin: 0 0 6px; } .dialog table td { padding: 5px 6px; }
|
|
.notice { padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); margin: 8px 0; } .notice.grey { background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
|
|
.notice.problem { background: #fdecea; color: #7a1d16; border: 1px solid var(--problem); }
|
|
ol.checks li { margin: 8px 0; } .checkbox { padding: 6px 10px; margin: 4px 0; border-left: 3px solid var(--line); }
|
|
ul.changes { padding-left: 18px; } ul.changes li { margin: 4px 0; } ul.changes summary { cursor: pointer; color: var(--fg); } ul.changes .mono { overflow-wrap: anywhere; }
|
|
ol.steps { padding-left: 18px; } ol.steps li { margin: 3px 0; }
|
|
details.script textarea { width: 100%; font-size: .8rem; }
|
|
@media (max-width: 760px) {
|
|
.top { flex-wrap: wrap; gap: 6px; } .nav { order: 3; width: 100%; justify-content: space-between; margin: 0; } .nav a { padding: 4px 4px; } #search { max-width: none; margin-left: 0; }
|
|
main { padding: 12px 14px 40px; } .brand .muted { display: none; }
|
|
}
|
|
/* the key editor: a narrow column that never overflows; checks fold */
|
|
.field > * { min-width: 0; } .field input, .field select, .field textarea { max-width: 100%; }
|
|
.keycols { grid-template-columns: minmax(0, 620px) minmax(300px, 1fr); }
|
|
.keycard .field { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr); }
|
|
.chk { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 6px 0; background: var(--bg); }
|
|
.chk > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
|
|
.chk > summary::-webkit-details-marker { display: none; } .chk > summary::before { content: "▸"; color: var(--muted); font-size: .8rem; } .chk[open] > summary::before { content: "▾"; }
|
|
.chk > summary .muted { overflow: hidden; text-overflow: ellipsis; }
|
|
.chkbody { margin-top: 6px; } .chkbody .field { grid-template-columns: 1fr; gap: 2px; margin: 4px 0; }
|
|
.fold { margin: 4px 0; } .fold > summary { color: var(--fg); }
|
|
.checks { margin-top: 8px; }
|
|
.chkgroup { margin: 10px 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
.chk { margin: 3px 0; }
|