VeillaxandClaude Sonnet 5.5
c08a8b8718
A second notebook whose pages are encrypted with a key made from a passphrase plus the server key. It is unlocked into memory only (15 minutes idle, Lock, or sign-out), is not in search, lists or downloads of the ordinary notebook, and limits wrong guesses. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
350 lines
28 KiB
CSS
350 lines
28 KiB
CSS
/* tokens:begin Design tokens, the Lightwell design language (docs/design.md). This is the only place raw colors and sizes are defined. */
|
|
:root {
|
|
--accent:#1f5c5c; --accent-contrast:#ffffff;
|
|
--bg:#f6f5f3; --surface:#ffffff; --surface-2:#efede9; --border:#e0ddd7; --border-strong:#c4c0b8;
|
|
--text:#1d1c1a; --text-muted:#5f5b54; --text-faint:#7a766e;
|
|
--accent-text:var(--accent);
|
|
--accent-soft:color-mix(in srgb, var(--accent) 9%, var(--surface));
|
|
--accent-hover:color-mix(in srgb, var(--accent) 88%, #000000);
|
|
--focus:color-mix(in srgb, var(--accent) 70%, #ffffff);
|
|
--success:#1c6b3a; --success-bg:#e3f1e8; --warning:#85560a; --warning-bg:#f9eed6; --danger:#a3271e; --danger-bg:#f9e6e3; --neutral-bg:#eceae6;
|
|
--overlay:rgb(20 19 17 / 0.55); --shadow:0 8px 24px rgb(20 19 17 / 0.14);
|
|
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
|
|
--radius:6px; --radius-lg:10px; --border-w:1px;
|
|
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
|
|
--text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:18px; --text-xl:22px; --text-2xl:28px; --leading:1.5;
|
|
--sidebar-w:272px; --content-max:1120px; --touch:44px; --control-h:38px;
|
|
--z-sticky:20; --z-overlay:100; --z-toast:200; --ease:140ms ease;
|
|
color-scheme:light;
|
|
}
|
|
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
|
|
--bg:#131312; --surface:#1b1b19; --surface-2:#252523; --border:#33322e; --border-strong:#4a4943;
|
|
--text:#ecebe7; --text-muted:#adaaa2; --text-faint:#8f8c84;
|
|
--accent-text:color-mix(in srgb, var(--accent) 45%, #ffffff);
|
|
--accent-soft:color-mix(in srgb, var(--accent) 22%, var(--surface));
|
|
--accent-hover:color-mix(in srgb, var(--accent) 85%, #ffffff);
|
|
--success:#86d3a0; --success-bg:#17301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18; --neutral-bg:#2b2a27;
|
|
--overlay:rgb(0 0 0 / 0.65); --shadow:0 8px 24px rgb(0 0 0 / 0.5); color-scheme:dark;
|
|
} }
|
|
:root[data-theme="dark"] {
|
|
--bg:#131312; --surface:#1b1b19; --surface-2:#252523; --border:#33322e; --border-strong:#4a4943;
|
|
--text:#ecebe7; --text-muted:#adaaa2; --text-faint:#8f8c84;
|
|
--accent-text:color-mix(in srgb, var(--accent) 45%, #ffffff);
|
|
--accent-soft:color-mix(in srgb, var(--accent) 22%, var(--surface));
|
|
--accent-hover:color-mix(in srgb, var(--accent) 85%, #ffffff);
|
|
--success:#86d3a0; --success-bg:#17301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18; --neutral-bg:#2b2a27;
|
|
--overlay:rgb(0 0 0 / 0.65); --shadow:0 8px 24px rgb(0 0 0 / 0.5); color-scheme:dark;
|
|
}
|
|
/* tokens:end */
|
|
|
|
*, *::before, *::after { box-sizing:border-box; }
|
|
html, body { height:100%; }
|
|
html { -webkit-text-size-adjust:100%; }
|
|
body { margin:0; background:var(--bg); color:var(--text); font:var(--text-base)/var(--leading) var(--font); -webkit-font-smoothing:antialiased; }
|
|
h1, h2, h3, h4 { margin:0; line-height:1.25; font-weight:600; letter-spacing:-.01em; }
|
|
h1 { font-size:var(--text-2xl); } h2 { font-size:var(--text-xl); } h3 { font-size:var(--text-lg); }
|
|
p { margin:0 0 var(--s3); }
|
|
a { color:var(--accent-text); text-underline-offset:2px; }
|
|
a:hover { text-decoration-thickness:2px; }
|
|
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius); }
|
|
[hidden] { display:none !important; }
|
|
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
|
|
.skip { position:absolute; left:var(--s3); top:-100px; z-index:var(--z-toast); background:var(--surface); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); }
|
|
.skip:focus { top:var(--s3); }
|
|
.dim { color:var(--text-muted); } .err { color:var(--danger); } .small { font-size:var(--text-sm); }
|
|
.num { font-variant-numeric:tabular-nums; }
|
|
.clip { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; max-width:340px; }
|
|
code, .mono { font-family:var(--font-mono); font-size:var(--text-sm); }
|
|
.icon { width:18px; height:18px; flex:none; stroke-width:1.75; }
|
|
.inline-icon { display:inline-flex; }
|
|
|
|
/* shell */
|
|
.shell { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; }
|
|
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5) var(--s3); background:var(--surface); border-right:var(--border-w) solid var(--border); overflow-y:auto; }
|
|
.sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
|
|
.sidebar button.sidebar-close { display:none; }
|
|
.brand { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-lg); font-weight:700; letter-spacing:-.02em; padding:0 var(--s3); color:var(--text); text-decoration:none; }
|
|
.brand .icon { color:var(--accent-text); }
|
|
.navsec { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:var(--s4) var(--s3) var(--s1); }
|
|
.nav { display:flex; flex-direction:column; gap:2px; }
|
|
.navitem { display:flex; align-items:center; gap:var(--s3); width:100%; min-height:36px; padding:var(--s2) var(--s3); border-radius:var(--radius); color:var(--text-muted); text-decoration:none; font:inherit; font-weight:500; background:none; border:0; cursor:pointer; text-align:left; }
|
|
.navitem:hover { background:var(--surface-2); color:var(--text); }
|
|
.navitem.on { background:var(--accent-soft); color:var(--accent-text); }
|
|
.navitem .label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.grow { flex:1 1 auto; min-width:0; }
|
|
.userbox { border-top:var(--border-w) solid var(--border); padding-top:var(--s3); }
|
|
.userbox .who { padding:var(--s1) var(--s3) var(--s2); font-size:var(--text-sm); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.content { min-width:0; }
|
|
main { max-width:var(--content-max); margin:0 auto; padding:var(--s6) var(--s5) var(--s8); }
|
|
main:focus { outline:none; }
|
|
.topbar, .backdrop { display:none; }
|
|
.page-h { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap; }
|
|
.page-h h1 { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
|
|
.page-h p { margin:var(--s1) 0 0; color:var(--text-muted); max-width:70ch; }
|
|
.page-h .btn { white-space:nowrap; }
|
|
.back { display:inline-block; margin-bottom:var(--s3); font-size:var(--text-sm); }
|
|
|
|
/* cards, layout */
|
|
.card { background:var(--surface); border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); margin-bottom:var(--s4); overflow-x:auto; }
|
|
.card.flush { padding:0; overflow:hidden; }
|
|
.card > h2 { font-size:var(--text-lg); margin:0 0 var(--s3); }
|
|
.card-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
|
|
.card-h h2 { font-size:var(--text-lg); margin:0; }
|
|
.meta { color:var(--text-muted); font-size:var(--text-sm); }
|
|
.stack { display:flex; flex-direction:column; gap:var(--s4); }
|
|
.scroll { overflow-x:auto; }
|
|
.actions { display:flex; gap:var(--s2); flex-wrap:wrap; }
|
|
td.actions-cell { text-align:right; white-space:nowrap; }
|
|
td.actions-cell button + button { margin-left:var(--s2); }
|
|
.form-actions { justify-content:flex-end; margin-top:var(--s2); }
|
|
.toolbar { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
|
|
.toolbar .push { margin-left:auto; }
|
|
.center { max-width:440px; margin:var(--s8) auto; padding:0 var(--s4); }
|
|
.center .brand { justify-content:center; font-size:var(--text-xl); padding-bottom:var(--s4); }
|
|
|
|
/* forms */
|
|
label { display:flex; flex-direction:column; gap:var(--s1); font-size:var(--text-sm); font-weight:600; color:var(--text); }
|
|
label.chk { flex-direction:row; align-items:flex-start; gap:var(--s2); font-size:var(--text-base); font-weight:400; }
|
|
input, select, textarea { background:var(--surface); color:var(--text); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); min-height:var(--control-h); font:inherit; font-weight:400; min-width:0; width:100%; }
|
|
textarea { min-height:96px; resize:vertical; font-family:var(--font-mono); font-size:var(--text-sm); }
|
|
input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; margin-top:3px; accent-color:var(--accent); }
|
|
input:focus, select:focus, textarea:focus { outline:2px solid var(--focus); outline-offset:0; border-color:var(--accent); }
|
|
input:disabled, select:disabled { opacity:.6; }
|
|
input[aria-invalid="true"] { border-color:var(--danger); }
|
|
.sub { color:var(--text-muted); font-size:var(--text-sm); font-weight:400; }
|
|
fieldset { border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); margin:0; min-width:0; }
|
|
legend { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:0 var(--s2); }
|
|
.pillrow { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
|
|
|
|
/* buttons: btn is the primary action, ghost the default, danger and quiet the others */
|
|
button.btn, button.ghost { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s4); border-radius:var(--radius); font:inherit; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background var(--ease), border-color var(--ease); }
|
|
button.btn { background:var(--accent); color:var(--accent-contrast); border:var(--border-w) solid var(--accent); }
|
|
button.btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
|
|
button.ghost { background:var(--surface); border:var(--border-w) solid var(--border-strong); color:var(--text); }
|
|
button.ghost:hover { background:var(--surface-2); }
|
|
button.quiet { background:transparent; border-color:transparent; }
|
|
button.danger { color:var(--danger); border-color:var(--danger); }
|
|
button.danger:hover { background:var(--danger-bg); }
|
|
button.btn-icon { width:var(--control-h); padding:0; }
|
|
td button.ghost, .actions button.ghost { min-height:30px; padding:0 var(--s3); font-size:var(--text-sm); }
|
|
button:disabled { opacity:.55; cursor:not-allowed; }
|
|
|
|
/* tables */
|
|
table { width:100%; border-collapse:collapse; }
|
|
th { text-align:left; font-size:var(--text-sm); color:var(--text-muted); font-weight:600; padding:var(--s3) var(--s4); border-bottom:var(--border-w) solid var(--border); white-space:nowrap; background:var(--surface); }
|
|
td { padding:var(--s3) var(--s4); border-bottom:var(--border-w) solid var(--border); vertical-align:middle; }
|
|
tbody tr:hover td { background:var(--surface-2); }
|
|
tr:last-child td { border-bottom:0; }
|
|
td.wrap { overflow-wrap:anywhere; min-width:150px; max-width:320px; }
|
|
|
|
/* badges: status always carries a text label, never color alone */
|
|
.badge { display:inline-flex; align-items:center; gap:var(--s1); padding:2px var(--s2); border-radius:999px; font-size:var(--text-xs); font-weight:600; background:var(--neutral-bg); color:var(--text-muted); white-space:nowrap; }
|
|
.badge-success { background:var(--success-bg); color:var(--success); }
|
|
.badge-warning { background:var(--warning-bg); color:var(--warning); }
|
|
.badge-danger { background:var(--danger-bg); color:var(--danger); }
|
|
.badge-accent { background:var(--accent-soft); color:var(--accent-text); }
|
|
.tag { display:inline-block; padding:1px var(--s2); border:var(--border-w) solid var(--border); border-radius:var(--radius); font-size:var(--text-xs); color:var(--text-muted); }
|
|
|
|
/* the event and chat feed */
|
|
|
|
/* empty state, notice, loading */
|
|
.empty { text-align:center; padding:var(--s7) var(--s5); color:var(--text-muted); border:var(--border-w) dashed var(--border-strong); border-radius:var(--radius-lg); margin:var(--s3); }
|
|
.empty h3 { color:var(--text); margin-bottom:var(--s1); }
|
|
.empty p { margin:0 auto var(--s3); max-width:56ch; }
|
|
.empty .icon { width:28px; height:28px; margin:0 auto var(--s3); color:var(--text-faint); display:block; }
|
|
.card > .empty { margin:0; }
|
|
.notice { padding:var(--s3) var(--s4); border-radius:var(--radius); border:var(--border-w) solid var(--border); background:var(--surface-2); font-size:var(--text-sm); margin-bottom:var(--s4); display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
|
|
.notice-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
|
|
.notice-danger { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
|
|
.skeleton { background:linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:var(--radius); height:16px; margin-bottom:14px; }
|
|
.w60 { width:60%; } .w75 { width:75%; } .w90 { width:90%; } .w100 { width:100%; }
|
|
@keyframes shimmer { to { background-position:-200% 0; } }
|
|
|
|
/* dialogs, tabs, toasts */
|
|
.shade { position:fixed; inset:0; background:var(--overlay); display:grid; grid-template-columns:minmax(0,1fr); place-items:start center; padding:var(--s7) var(--s4); overflow:auto; z-index:var(--z-overlay); }
|
|
.modal { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:var(--s5); width:min(480px,100%); }
|
|
.modal.wide { width:min(640px,100%); }
|
|
.modal h2 { margin:0 0 var(--s3); font-size:var(--text-lg); }
|
|
.toasts { position:fixed; right:var(--s4); bottom:var(--s4); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--s2); max-width:min(360px, calc(100vw - 32px)); }
|
|
.toast { background:var(--text); color:var(--bg); padding:var(--s3) var(--s4); border-radius:var(--radius); box-shadow:var(--shadow); font-size:var(--text-sm); overflow-wrap:anywhere; }
|
|
.toast-error { background:var(--danger); color:var(--accent-contrast); }
|
|
|
|
@media (prefers-reduced-motion: reduce) { .skeleton { animation:none; } * { transition:none !important; } html { scroll-behavior:auto; } }
|
|
@media (pointer: coarse) {
|
|
button.btn, button.ghost, .navitem, input, select, .tabs2 a { min-height:var(--touch); }
|
|
td button.ghost, .actions button.ghost { min-height:36px; }
|
|
input, select, textarea { font-size:16px; }
|
|
}
|
|
@media (max-width:860px) {
|
|
.shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
|
|
.sidebar { display:none; }
|
|
.sidebar.open { display:flex; position:fixed; inset:0 auto 0 0; width:min(280px,85vw); height:100dvh; z-index:var(--z-overlay); box-shadow:var(--shadow); }
|
|
.sidebar button.sidebar-close { display:inline-flex; }
|
|
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:var(--s2) var(--s4); background:var(--surface); border-bottom:var(--border-w) solid var(--border); position:sticky; top:0; z-index:var(--z-sticky); }
|
|
.backdrop.open { display:block; position:fixed; inset:0; background:var(--overlay); z-index:calc(var(--z-overlay) - 1); }
|
|
main { padding:var(--s5) var(--s4) var(--s7); }
|
|
.ev { grid-template-columns:4.5rem minmax(0,1fr); } .ev .badge { display:none; }
|
|
}
|
|
@media (max-width:640px) {
|
|
.modal { padding:var(--s4); }
|
|
.shade { padding:var(--s4) var(--s3); }
|
|
.toasts { left:var(--s3); right:var(--s3); bottom:var(--s3); max-width:none; }
|
|
.page-h > .btn { width:100%; }
|
|
}
|
|
.icon-16 { width:16px; height:16px; } .icon-22 { width:22px; height:22px; }
|
|
|
|
/* notes */
|
|
textarea.write { width:100%; min-height:84px; font-family:var(--font); font-size:var(--text-base); line-height:1.6; resize:none; border:0; padding:0; background:transparent; }
|
|
textarea.write:focus { outline:none; border:0; }
|
|
textarea.write.big { min-height:50vh; resize:vertical; }
|
|
.composer, .note { padding:var(--s4) var(--s5); }
|
|
.composer:focus-within, .note.editing { border-color:var(--accent); }
|
|
.note { background:var(--surface); border:var(--border-w) solid var(--border); border-radius:var(--radius-lg); margin-bottom:var(--s3); overflow:visible; }
|
|
.note.pinned { border-left:3px solid var(--accent); }
|
|
.note-body { overflow-wrap:anywhere; }
|
|
.note-body.clamp { max-height:15em; overflow:hidden; -webkit-mask-image:linear-gradient(black 70%, transparent); mask-image:linear-gradient(black 70%, transparent); }
|
|
.note-foot { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3); flex-wrap:wrap; font-size:var(--text-sm); color:var(--text-muted); }
|
|
.note-foot a, .note-foot time { color:var(--text-muted); }
|
|
.notes .empty { margin:0; }
|
|
.day-h { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); text-transform:none; margin:var(--s5) 0 var(--s2); letter-spacing:0; }
|
|
.day-h a { color:inherit; }
|
|
.day:first-child .day-h { margin-top:var(--s2); }
|
|
.more { text-align:center; margin:var(--s4) 0; }
|
|
button.small-btn { min-height:28px; padding:0 var(--s2); font-size:var(--text-sm); }
|
|
.navitem .count { font-size:var(--text-xs); color:var(--text-faint); font-variant-numeric:tabular-nums; }
|
|
.chip { display:inline-block; padding:0 var(--s2); border-radius:999px; background:var(--accent-soft); color:var(--accent-text); text-decoration:none; font-size:var(--text-sm); font-weight:500; }
|
|
.chip:hover { text-decoration:underline; }
|
|
.toast { display:flex; gap:var(--s3); align-items:center; justify-content:space-between; }
|
|
.toast-act { background:transparent; border:0; color:inherit; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; padding:0; }
|
|
.toolbar .push { margin-left:auto; }
|
|
.toolbar input[type=search] { max-width:360px; }
|
|
|
|
/* rendered markdown */
|
|
.md > *:first-child { margin-top:0; } .md > *:last-child { margin-bottom:0; }
|
|
.md p { margin:0 0 var(--s3); }
|
|
.md .md-h { margin:var(--s4) 0 var(--s2); font-size:var(--text-lg); }
|
|
.md h4.md-h { font-size:var(--text-base); } .md h5.md-h { font-size:var(--text-base); color:var(--text-muted); }
|
|
.md ul, .md ol { margin:0 0 var(--s3); padding-left:var(--s5); }
|
|
.md li.task { list-style:none; margin-left:calc(var(--s5) * -1); display:flex; gap:var(--s2); align-items:flex-start; }
|
|
.md li.task input { margin-top:5px; }
|
|
.md li .done { color:var(--text-muted); text-decoration:line-through; }
|
|
.md li.ind-1 { margin-left:var(--s4); } .md li.ind-2 { margin-left:var(--s6); } .md li.ind-3 { margin-left:var(--s7); }
|
|
.md li.task.ind-1 { margin-left:calc(var(--s5) * -1 + var(--s4)); } .md li.task.ind-2 { margin-left:calc(var(--s5) * -1 + var(--s6)); } .md li.task.ind-3 { margin-left:calc(var(--s5) * -1 + var(--s7)); }
|
|
.md blockquote { margin:0 0 var(--s3); padding:var(--s1) var(--s4); border-left:3px solid var(--border-strong); color:var(--text-muted); }
|
|
.md pre { margin:0 0 var(--s3); padding:var(--s3); background:var(--bg); border:var(--border-w) solid var(--border); border-radius:var(--radius); overflow-x:auto; }
|
|
.md code { background:var(--surface-2); padding:1px 4px; border-radius:4px; } .md pre code { background:none; padding:0; }
|
|
.md hr { border:0; border-top:var(--border-w) solid var(--border); margin:var(--s4) 0; }
|
|
|
|
/* sign in */
|
|
.btn-link { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s4); border-radius:var(--radius); font:inherit; font-weight:500; text-decoration:none; white-space:nowrap; background:var(--surface); border:var(--border-w) solid var(--border-strong); color:var(--text); }
|
|
.btn-link:hover { background:var(--surface-2); text-decoration:none; }
|
|
.btn-link.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
|
|
.btn-link.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
|
|
.btn-link.wide { display:flex; width:100%; min-height:var(--touch); margin-top:var(--s4); }
|
|
.login-h { font-size:var(--text-xl); text-align:center; margin-bottom:var(--s2); }
|
|
.center-text { text-align:center; }
|
|
kbd { font:inherit; font-family:var(--font-mono); font-size:var(--text-xs); padding:1px 6px; border:var(--border-w) solid var(--border-strong); border-radius:4px; background:var(--surface-2); color:var(--text-muted); white-space:nowrap; }
|
|
|
|
/* sidebar: search, pages tree */
|
|
.navitem.find { border:var(--border-w) solid var(--border); margin-bottom:var(--s2); }
|
|
.navitem.find kbd { margin-left:auto; }
|
|
.navsec-row { display:flex; align-items:center; justify-content:space-between; padding-right:var(--s1); }
|
|
button.tiny { width:26px; min-height:26px; height:26px; }
|
|
.treerow { display:flex; align-items:center; gap:2px; }
|
|
.treerow.d1 { padding-left:var(--s4); } .treerow.d2 { padding-left:var(--s5); } .treerow.d3 { padding-left:calc(var(--s5) + var(--s3)); }
|
|
.treerow.d4 { padding-left:var(--s6); } .treerow.d5 { padding-left:calc(var(--s6) + var(--s3)); } .treerow.d6 { padding-left:calc(var(--s6) + var(--s4)); }
|
|
.tree-link { flex:1 1 auto; min-width:0; min-height:32px; padding:var(--s1) var(--s2); }
|
|
.twist, .twist-gap { width:24px; height:24px; flex:none; }
|
|
.twist { display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:var(--text-faint); cursor:pointer; border-radius:var(--radius); padding:0; }
|
|
.twist:hover { background:var(--surface-2); color:var(--text); }
|
|
.twist .icon { transition:transform var(--ease); }
|
|
.twist.open .icon { transform:rotate(90deg); }
|
|
.sub-add { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border:0; background:none; border-radius:var(--radius); color:var(--text-faint); cursor:pointer; opacity:0; padding:0; }
|
|
.treerow:hover .sub-add, .sub-add:focus-visible { opacity:1; }
|
|
.sub-add:hover { background:var(--surface-2); color:var(--text); }
|
|
.navhint { margin:0; padding:var(--s1) var(--s3); font-size:var(--text-sm); color:var(--text-muted); }
|
|
@media (pointer: coarse) { .sub-add { opacity:1; } .navitem.find kbd { display:none; } }
|
|
|
|
/* a page */
|
|
.page { max-width:780px; margin:0 auto; }
|
|
.page-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
|
|
.crumbs { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-sm); flex-wrap:wrap; min-width:0; }
|
|
.crumbs a { color:var(--text-muted); }
|
|
.crumbs .sep { color:var(--text-faint); }
|
|
.page-actions { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; flex:1 1 auto; justify-content:flex-end; }
|
|
.page-actions .sub { min-width:4.5em; }
|
|
.daynav { margin-bottom:var(--s4); }
|
|
.seg { display:inline-flex; border:var(--border-w) solid var(--border-strong); border-radius:var(--radius); overflow:hidden; }
|
|
.seg-b { min-height:30px; padding:0 var(--s3); font:inherit; font-size:var(--text-sm); font-weight:500; background:var(--surface); color:var(--text-muted); border:0; cursor:pointer; }
|
|
.seg-b + .seg-b { border-left:var(--border-w) solid var(--border-strong); }
|
|
.seg-b.on { background:var(--accent-soft); color:var(--accent-text); }
|
|
.title-wrap { margin-bottom:var(--s2); }
|
|
.title-input { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em; line-height:1.25; border:0; padding:0; background:transparent; min-height:0; width:100%; }
|
|
.title-input:focus { outline:none; border:0; }
|
|
.title-input::placeholder { color:var(--text-faint); }
|
|
.day-title { font-size:var(--text-2xl); letter-spacing:-.02em; margin-bottom:var(--s2); }
|
|
.editor-wrap { position:relative; margin-top:var(--s3); }
|
|
.page textarea.write.big { min-height:45vh; line-height:1.7; font-family:var(--font); font-size:var(--text-base); resize:none; overflow:hidden; }
|
|
.view { min-height:45vh; cursor:text; overflow-wrap:anywhere; }
|
|
.md-big { font-size:var(--text-base); line-height:1.7; }
|
|
.md-big h3.md-h { font-size:var(--text-xl); margin-top:var(--s5); } .md-big h4.md-h { font-size:var(--text-lg); margin-top:var(--s4); }
|
|
.tagrow { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
|
|
.tagrow:empty { display:none; }
|
|
.aside { margin-top:var(--s6); display:flex; flex-direction:column; gap:var(--s5); }
|
|
.aside:empty { display:none; }
|
|
.aside-sec h2 { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s2); }
|
|
.linklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
|
|
.linklist a { display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s1) 0; }
|
|
.page-meta { margin-top:var(--s6); }
|
|
.wikilink { text-decoration:none; border-bottom:var(--border-w) solid var(--accent-text); }
|
|
.wikilink:hover { background:var(--accent-soft); }
|
|
.wikilink.missing { color:var(--text-muted); border-bottom-style:dashed; border-bottom-color:var(--text-faint); }
|
|
.popup { position:absolute; z-index:var(--z-sticky); min-width:240px; max-width:320px; max-height:260px; overflow-y:auto; padding:var(--s1); background:var(--surface); border:var(--border-w) solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
|
|
.popup-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--radius); cursor:pointer; }
|
|
.popup-row.on, .popup-row:hover { background:var(--accent-soft); }
|
|
.popup-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.popup-hint { color:var(--text-faint); font-size:var(--text-xs); font-family:var(--font-mono); white-space:nowrap; }
|
|
.mirror { position:absolute; left:-9999px; top:0; visibility:hidden; white-space:pre-wrap; overflow-wrap:break-word; box-sizing:content-box; }
|
|
.notice .btn-link { min-height:30px; }
|
|
|
|
/* quick find and the move picker */
|
|
.shade-top { align-items:start; padding-top:12vh; }
|
|
.finder-input { font-size:var(--text-lg); min-height:44px; margin-bottom:var(--s2); }
|
|
.finder-list { display:flex; flex-direction:column; gap:2px; max-height:50vh; overflow-y:auto; }
|
|
.finder-row { display:flex; align-items:center; gap:var(--s3); width:100%; padding:var(--s2) var(--s3); border:0; border-radius:var(--radius); background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
|
|
.finder-row.on, .finder-row:hover { background:var(--accent-soft); }
|
|
.finder-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.finder-sub { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
|
|
.pad { padding:var(--s3); margin:0; }
|
|
|
|
/* note cards and settings */
|
|
.note.openable { cursor:pointer; }
|
|
.note-title { font-size:var(--text-lg); margin-bottom:var(--s2); }
|
|
.note-title a { color:inherit; text-decoration:none; }
|
|
.note-title a:hover { text-decoration:underline; }
|
|
.keys { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
|
|
@media (max-width:640px) { .page-actions { justify-content:flex-start; } .shade-top { padding-top:var(--s4); } }
|
|
|
|
/* live preview: lines render, the line being edited shows its markdown */
|
|
.live { position:relative; line-height:1.7; font-size:var(--text-base); }
|
|
.live-line { min-height:1.7em; cursor:text; overflow-wrap:anywhere; }
|
|
.live .md p, .live .md ul, .live .md ol, .live .md pre, .live .md blockquote { margin:0; }
|
|
.live .md hr { margin:var(--s2) 0; }
|
|
.live .md .md-h { margin:var(--s2) 0 0; }
|
|
.live .md h3.md-h { font-size:var(--text-xl); } .live .md h4.md-h { font-size:var(--text-lg); }
|
|
textarea.live-edit { display:block; width:100%; min-height:1.7em; margin:0 0 0 calc(-1 * (var(--s2) + 2px)); padding:0 0 0 var(--s2); border:0; border-left:2px solid var(--accent); border-radius:0; background:var(--accent-soft); font-family:var(--font); font-size:var(--text-base); line-height:1.7; resize:none; overflow:hidden; }
|
|
textarea.live-edit:focus { outline:none; border-color:var(--accent); }
|
|
.live-tail { min-height:30vh; cursor:text; }
|
|
|
|
/* the vault */
|
|
.vault-gate { display:flex; justify-content:center; padding-top:var(--s6); }
|
|
.vault-gate .card { width:100%; max-width:420px; display:flex; flex-direction:column; gap:var(--s3); }
|
|
.vault-icon { align-self:center; color:var(--accent); }
|
|
.vault-form { display:flex; flex-direction:column; gap:var(--s3); }
|
|
.vault-list { list-style:none; margin:0; padding:var(--s1); }
|
|
.vault-row { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--radius); flex-wrap:wrap; }
|
|
.vault-row:hover { background:var(--accent-soft); }
|
|
.vault-name { display:flex; align-items:center; gap:var(--s2); flex:1; min-width:0; color:var(--text); text-decoration:none; }
|
|
.clip1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|