diff options
Diffstat (limited to 'vrsite/assets/style.css.tmpl')
| -rw-r--r-- | vrsite/assets/style.css.tmpl | 321 |
1 files changed, 321 insertions, 0 deletions
diff --git a/vrsite/assets/style.css.tmpl b/vrsite/assets/style.css.tmpl new file mode 100644 index 0000000..a808203 --- /dev/null +++ b/vrsite/assets/style.css.tmpl @@ -0,0 +1,321 @@ +/* generated from zed themes "{{.DarkName}}" (dark) + "{{.LightName}}" (light) */ +:root { +{{range .DarkVars}} {{.K}}: {{.V}}; +{{end}} color-scheme: dark; + --note-bg: color-mix(in srgb, var(--note) 4%, transparent); +} +@media (prefers-color-scheme: light) { + :root:not([data-theme="dark"]) { +{{range .LightVars}} {{.K}}: {{.V}}; +{{end}} color-scheme: light; + } +} +:root[data-theme="light"] { +{{range .LightVars}} {{.K}}: {{.V}}; +{{end}} color-scheme: light; +} + +* { box-sizing: border-box; } +body { + margin: 0; + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + background: var(--bg); + color: var(--fg); + font: 15px/1.5 ui-sans-serif, system-ui, sans-serif; +} +:root[data-mode="notes"] body.with-aside, +body.with-aside { grid-template-columns: 280px minmax(0, 1fr) 380px; } +:root[data-mode="trace"] body.with-aside { grid-template-columns: 280px minmax(0, 1fr); } + +/* ── focus: trace or notes ───────────────────────────────────── + The two views compete for the same pixels — line background, gutter + color, tree markers — so the interface shows one at a time. */ +:root[data-mode="trace"] .notes-only { display: none !important; } +:root[data-mode="notes"] .trace-only { display: none !important; } +:root[data-mode="notes"] ol.code li.cov { box-shadow: none; } +:root[data-mode="notes"] ol.code li.cov::before { color: var(--ln); font-weight: 400; } +:root[data-mode="notes"] nav a.file::after, +:root[data-mode="notes"] .filetree a.file::after { display: none; } +:root[data-mode="trace"] ol.code li.noted { background: none; cursor: default; } +:root[data-mode="trace"] ol.code li.noted::before { color: var(--ln); } +:root[data-mode="trace"] nav a.file.has-notes::before, +:root[data-mode="trace"] .filetree a.file.has-notes::before { content: none; } +:root[data-mode="notes"] nav a.file { color: var(--muted); } +:root[data-mode="notes"] nav a.file.has-notes { color: var(--fg); } + +.modes { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } +.modes .mode { + background: none; border: 0; color: var(--muted); + font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; +} +.modes .mode:hover { background: var(--hover); color: var(--fg); } +.modes .mode[aria-pressed="true"] { background: var(--hover); color: var(--fg); font-weight: 600; } + +a { color: var(--accent); text-decoration: none; } +a:hover { text-decoration: underline; } +code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } +h1 { font-size: 1.1rem; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } +h2 { font-size: 0.95rem; margin: 1.4em 0 0.5em; } + +/* ── left tree ─────────────────────────────────────────────── */ +nav { + border-right: 1px solid var(--border); + background: var(--panel); + padding: 10px 8px; + position: sticky; top: 0; + height: 100vh; overflow: auto; + font-size: 13px; +} +nav > header { + font-weight: 600; margin-bottom: 10px; + display: flex; align-items: center; justify-content: space-between; gap: 8px; +} +nav > header a { color: var(--fg); } +nav .brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +nav .atrev { margin: 0 0 8px; } +.find, .filters input, .filters select, .notform input, .notform textarea, .jjform input { + background: var(--bg); color: var(--fg); + border: 1px solid var(--border); border-radius: 5px; + font: inherit; font-size: 12px; padding: 3px 6px; +} +.find { width: 100%; margin-bottom: 6px; } +.find:focus, .filters input:focus, .notform textarea:focus, .jjform input:focus { + outline: 1px solid var(--accent); border-color: var(--accent); +} +#tree.filtering a.file.hit { background: color-mix(in srgb, var(--accent) 14%, transparent); } +nav details { padding-left: 10px; } +nav summary { cursor: pointer; color: var(--muted); user-select: none; } +nav summary:hover { color: var(--fg); } +nav ul { list-style: none; margin: 0; padding-left: 10px; } +nav a.file { + display: block; position: relative; + padding: 1px 6px 3px; border-radius: 4px; + color: var(--fg); + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; +} +nav a.file:hover { background: var(--hover); text-decoration: none; } +nav a.file[aria-current] { background: var(--hover); } +nav a.file::after { + content: ""; position: absolute; left: 6px; bottom: 1px; height: 2px; + width: calc(var(--pct) - 12px); max-width: calc(100% - 12px); + background: var(--cov); border-radius: 1px; +} +nav a.file.has-notes::before { content: "◆ "; color: var(--note); font-size: 9px; vertical-align: 2px; } +nav a.file.plain { color: var(--muted); } +nav a.file.plain::after { display: none; } +#tree { margin-top: 8px; } +#tree > details { padding-left: 0; } +summary .dot { + display: inline-block; width: 7px; height: 7px; border-radius: 99px; + background: var(--cov); margin-left: 6px; +} +summary .nmark { color: var(--note); font-size: 9px; margin-left: 4px; vertical-align: 1px; } +nav details.t > summary, .filetree details.t > summary { color: var(--fg); } +nav > footer { + margin-top: 14px; border-top: 1px solid var(--border); padding-top: 8px; + display: flex; justify-content: space-between; align-items: center; gap: 8px; +} +nav > footer select { + background: var(--panel); color: var(--muted); + border: 1px solid var(--border); border-radius: 4px; + font: inherit; font-size: 11px; padding: 1px 2px; +} + +/* files.html full tree */ +.filetree { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; padding-bottom: 40vh; } +.filetree details { padding-left: 18px; } +.filetree summary { cursor: pointer; color: var(--muted); } +.filetree summary:hover { color: var(--fg); } +.filetree ul { list-style: none; margin: 0; padding-left: 18px; } +.filetree a.file { display: inline-block; position: relative; padding: 0 6px 2px; border-radius: 4px; color: var(--fg); } +.filetree a.file.plain { color: var(--muted); } +.filetree a.file:not(.plain)::after { + content: ""; position: absolute; left: 6px; bottom: 0; height: 2px; + width: calc(var(--pct) - 12px); max-width: calc(100% - 12px); + background: var(--cov); border-radius: 1px; +} +.filetree a.file.has-notes::before { content: "◆ "; color: var(--note); font-size: 9px; vertical-align: 2px; } +.stub { padding: 24px 16px; } + +/* ── main ──────────────────────────────────────────────────── */ +main { min-width: 0; } +.filehead { + position: sticky; top: 0; z-index: 2; + background: color-mix(in srgb, var(--bg) 88%, transparent); + backdrop-filter: blur(6px); + border-bottom: 1px solid var(--border); + padding: 10px 16px; +} +.meta { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; } +.meta code { color: var(--fg); } +.greps code { margin-right: 8px; } +.chip { + display: inline-block; padding: 0 8px; border-radius: 99px; + background: color-mix(in srgb, var(--cov) 22%, transparent); + border: 1px solid var(--cov); color: var(--fg); font-size: 12px; +} +main > section, .notegroup { padding: 0 16px; max-width: 1100px; } +table { border-collapse: collapse; width: 100%; font-size: 13.5px; } +th { text-align: left; color: var(--muted); font-weight: 500; } +th, td { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--border); } +data.bar { + display: inline-block; min-width: 140px; padding-left: 4px; + font-size: 12px; color: var(--muted); + background: linear-gradient(90deg, color-mix(in srgb, var(--cov) 35%, transparent) var(--pct), transparent var(--pct)); + border-radius: 3px; +} + +/* ── code view ─────────────────────────────────────────────── */ +.codewrap { overflow-x: auto; } +ol.code { + list-style: none; margin: 0; padding: 0; + font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; + counter-reset: ln; + tab-size: 4; + content-visibility: auto; + contain-intrinsic-size: auto var(--h, auto); +} +ol.code:first-of-type { padding-top: 8px; } +ol.code:last-of-type { padding-bottom: 40vh; } +ol.code li { + counter-increment: ln; + white-space: pre; + min-height: 1lh; + padding-right: 16px; +} +ol.code li::before { + content: counter(ln); + display: inline-block; width: 5ch; margin-right: 1.5ch; + text-align: right; color: var(--ln); + user-select: none; +} +ol.code li.cov { box-shadow: inset 3px 0 var(--cov); } +ol.code li.cov::before { color: var(--cov); font-weight: 700; } +ol.code li.noted { background: var(--note-bg); cursor: pointer; } +ol.code li.noted::before { color: color-mix(in srgb, var(--note) 55%, var(--ln)); } +ol.code li:target { background: color-mix(in srgb, var(--accent) 18%, transparent); } + +/* ── notes ─────────────────────────────────────────────────── */ +aside { + border-left: 1px solid var(--border); + background: var(--panel); + position: sticky; top: 0; height: 100vh; overflow: auto; + padding: 10px 12px; font-size: 13px; +} +aside summary { cursor: pointer; color: var(--muted); } +.note { + border: 1px solid var(--border); + border-left: 3px solid var(--cov); + border-radius: 6px; + padding: 8px 10px; margin: 10px 0; + background: var(--bg); +} +.note header { display: flex; gap: 8px; align-items: baseline; font-size: 12px; } +.note header a { font-family: ui-monospace, Menlo, monospace; } +.note header em { color: var(--note); font-style: normal; border: 1px solid var(--note); border-radius: 3px; padding: 0 4px; font-size: 11px; } +.note header b { margin-left: auto; color: var(--cov); font-weight: 600; } +.note p { margin: 6px 0 0; line-height: 1.45; } +.note.flash { animation: flash 1.2s ease-out; } +@keyframes flash { 0% { background: color-mix(in srgb, var(--cov) 30%, var(--bg)); } 100% { background: var(--bg); } } + +.note footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; } +.note footer code { color: var(--muted); } +.note .model { opacity: 0.85; } +.notecols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 14px; } + +/* ── live activity ─────────────────────────────────────────── */ +.activity { margin-bottom: 10px; } +.actlist { display: flex; flex-direction: column; gap: 3px; } +.act { + display: grid; grid-template-columns: auto minmax(0, 1fr) auto; + gap: 6px; align-items: baseline; font-size: 11px; color: var(--muted); + opacity: 0.55; +} +.act.on { opacity: 1; } +.act .what, .acttable .what { + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-family: ui-monospace, Menlo, monospace; +} +.acttable tr.on td { color: var(--fg); } +.acttable .pulse { color: var(--accent); font-size: 9px; margin-left: 5px; animation: pulse 2s ease-in-out infinite; } +@keyframes pulse { 50% { opacity: 0.25; } } +.acttable .dir { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + +/* ── filters / forms ───────────────────────────────────────── */ +.filters { + display: flex; flex-wrap: wrap; gap: 6px; align-items: center; + padding: 10px 0; position: sticky; top: 0; z-index: 1; + background: var(--bg); +} +.filters input[type="search"] { min-width: 15ch; flex: 1 1 18ch; } +.filters .dates { display: flex; gap: 6px; align-items: center; } +.filters .datef { font-size: 11px; color: var(--muted); display: flex; gap: 4px; align-items: center; } +.filters button, .jjform button, .notform button { + background: var(--panel); color: var(--fg); + border: 1px solid var(--border); border-radius: 5px; + font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; +} +.filters button:hover, .jjform button:hover, .notform button:hover { background: var(--hover); } +.count { margin: 0 0 8px; } +.busy { visibility: hidden; color: var(--accent); margin-right: 6px; } +.busy.htmx-request { visibility: visible; animation: pulse 1s linear infinite; } +.notespage, .jjpage { padding: 0 16px 40vh; max-width: 1100px; } +.err { + margin: 12px 16px; padding: 8px 10px; border-radius: 6px; + border: 1px solid var(--note); color: var(--note); + font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; +} + +/* ── add a note ────────────────────────────────────────────── */ +.addnote { margin: 10px 0; } +.addnote > summary { cursor: pointer; color: var(--muted); font-size: 13px; } +.notform { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; } +.notform .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } +.notform .row.end { justify-content: space-between; } +.notform input[type="number"] { width: 8ch; } +.notform textarea { resize: vertical; font-family: inherit; } +.notform .on code { color: var(--fg); } +.asidehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } +aside .meta { font-size: 11px; } + +/* selection while picking lines to comment on */ +ol.code li.sel { background: color-mix(in srgb, var(--accent) 16%, transparent); } +ol.code li.sel::before { color: var(--accent); } + +/* ── jj ────────────────────────────────────────────────────── */ +.jjform { display: flex; gap: 6px; align-items: center; padding: 10px 0; } +.jjform input[type="search"] { flex: 1; font-family: ui-monospace, Menlo, monospace; } +.jjform input[type="number"] { width: 8ch; } +.jjlog { font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; } +.jjrow { display: flex; gap: 8px; align-items: baseline; white-space: pre; } +.jjrow:hover { background: var(--hover); } +.jjrow .graph { color: var(--muted); white-space: pre; } +.jjrow .id { font-weight: 600; } +.jjrow .commit { color: var(--muted); } +.jjrow .when, .jjrow .who { color: var(--muted); } +.jjrow .refs { color: var(--note); } +.jjrow .flags { color: var(--note); font-style: italic; } +.jjrow .desc { color: var(--fg); overflow: hidden; text-overflow: ellipsis; } +.jjrow.blank { color: var(--muted); } +pre.desc { + margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; + border: 1px solid var(--border); background: var(--panel); + font: 12.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; +} +table.changed { width: auto; } +table.changed td { border: none; padding: 1px 12px 1px 0; } +table.changed .st { color: var(--muted); font-size: 11px; width: 7ch; } +table.changed .st-added { color: var(--accent); } +table.changed .st-deleted { color: var(--note); } + +/* ── agent coverage colors (bitmask -> per-scheme mixed color) */ +{{range .MaskList}}.am{{.}} { --cov: var(--am{{.}}); } +{{end}} +/* ── syntax (zed theme, colors are per-scheme vars) ────────── */ +{{range .Syntax}}.s-{{.Class}} { color: var(--s-{{.Class}}, inherit);{{if eq .Style "italic"}} font-style: italic;{{end}}{{if .Weight}} font-weight: {{.Weight}};{{end}} } +{{end}} +@media (max-width: 1100px) { + body, body.with-aside { grid-template-columns: 1fr; } + nav, aside { position: static; height: auto; border: none; border-bottom: 1px solid var(--border); } +} |