SHARE_STYLE

tcmts.share.SHARE_STYLE · #y76rb765 · term · runs anywhere

The web UI's stylesheet: one for every page, light and dark as the system is, laid out for a phone too.

export const SHARE_STYLE = `
:root { color-scheme: light dark;
  --bg:#fff; --bg2:#f6f8fa; --bg3:#eef1f4; --fg:#1f2328; --dim:#59636e; --line:#d1d9e0; --acc:#0969da; --accbg:#ddf4ff;
  --ok:#1a7f37; --okbg:#dafbe1; --warn:#9a6700; --warnbg:#fff8c5; --bad:#cf222e; --badbg:#ffebe9;
  --srv:#e8743b; --any:#8250df; --brw:#1a9e8a; --prop:#8250df; --propbg:#fbefff;
  --k:#cf222e; --s:#0a3069; --n:#0550ae; --c:#6e7781; --f:#8250df; --t:#953800;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --w: 1240px; }
@media (prefers-color-scheme: dark) { :root {
  --bg:#0e1117; --bg2:#151b23; --bg3:#1c2330; --fg:#e6edf3; --dim:#8d96a0; --line:#2a313c; --acc:#4493f8; --accbg:#121d2f;
  --ok:#3fb950; --okbg:#12261b; --warn:#d29922; --warnbg:#272115; --bad:#f85149; --badbg:#2a1517;
  --srv:#ff9f6b; --any:#c3a6ff; --brw:#6be3c4; --prop:#c3a6ff; --propbg:#221a33;
  --k:#ff7b72; --s:#a5d6ff; --n:#79c0ff; --c:#8b949e; --f:#d2a8ff; --t:#ffa657; } }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--fg); }
a { color: var(--acc); text-decoration: none; } a:hover { text-decoration: underline; }
code, .mono { font: 12.5px/1.5 var(--mono); }
.muted { color: var(--dim); } .ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
header.app { background: var(--bg2); border-bottom: 1px solid var(--line); }
header.app .wrap { max-width: var(--w); margin: 0 auto; padding: 12px 24px 0; }
.bar1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 32px; }
.crumb { font-size: 17px; color: var(--fg); } .crumb b { font-weight: 600; }
.pill { display: inline-flex; align-items: center; font-size: 12px; line-height: 18px; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; margin-left: 8px; color: var(--dim); background: var(--bg); white-space: nowrap; vertical-align: 1px; font-weight: 400; }
.bar1 .pill { margin-left: 0; }
.search { position: relative; flex: 0 1 300px; min-width: 200px; margin-left: auto; transition: flex-basis .15s; }
.search:focus-within { flex-basis: 420px; }
.searchfield { position: relative; display: flex; align-items: center; }
.search input { width: 100%; height: 32px; font: inherit; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 6px; padding: 0 40px 0 10px; text-overflow: ellipsis; }
.search input::-webkit-search-cancel-button { display: none; }
.search .kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; height: 20px; font: 11px/1 system-ui, -apple-system, sans-serif; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--dim); pointer-events: none; }
.search:focus-within .kbd { display: none; }
.results { width: max(var(--trigger-width), 480px); max-width: calc(100vw - 28px); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); max-height: 60vh; overflow-y: auto; outline: none; }
.result-list { outline: none; }
.result { display: block; padding: 7px 12px; color: var(--fg); border-top: 1px solid var(--line); overflow-wrap: anywhere; cursor: pointer; outline: none; }
.result:first-child { border-top: 0; } .result[data-focused], .result[data-hovered] { background: var(--accbg); text-decoration: none; }
.result .sig { display: block; font: 11.5px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .none { padding: 7px 12px; color: var(--dim); }
.who { font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.avatar-btn { border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; display: inline-flex; }
.avatar-btn .avatar { width: 28px; height: 28px; } .avatar-btn[data-pressed] .avatar, .avatar-btn[data-hovered] .avatar { box-shadow: inset 0 0 0 1px var(--dim); }
.tabs { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; outline: none; }
.tab { padding: 8px 12px; color: var(--fg); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; outline: none; text-decoration: none; }
.tab[data-hovered] { background: var(--bg3); border-radius: 6px 6px 0 0; }
.tab:hover, .tab:focus, .opt:hover, .result:hover, a.btn:hover { text-decoration: none; }
.tab[data-selected] { border-color: #fd8c73; font-weight: 600; }
.tab[data-focus-visible] { box-shadow: inset 0 0 0 2px var(--acc); border-radius: 6px 6px 0 0; }
.subtabs .tabs { border-bottom: 1px solid var(--line); margin: 0; }
.filters .navtabs .tabs { margin: 0; }
.tabs[data-orientation="vertical"] { flex-direction: column; margin: 0; gap: 1px; }
.tabs[data-orientation="vertical"] .tab { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border: 0; border-radius: 6px; font-size: 13px; }
.tabs[data-orientation="vertical"] .tab[data-hovered] { border-radius: 6px; } .tabs[data-orientation="vertical"] .tab[data-selected] { background: var(--accbg); color: var(--acc); }
.tabs[data-orientation="vertical"] .tab[data-focus-visible] { border-radius: 6px; } .filters .navtabs .tab { padding: 4px 10px; }
[data-focus-visible]:not(.tab):not(.result):not(.opt) { outline: 2px solid var(--acc); outline-offset: 2px; }
.menu-pop { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); min-width: max(var(--trigger-width), 180px); max-height: 50vh; overflow-y: auto; outline: none; }
.menu { padding: 4px; outline: none; }
.opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--fg); cursor: pointer; outline: none; font-size: 13px; text-decoration: none; }
.opt[data-focused], .opt[data-hovered] { background: var(--accbg); text-decoration: none; }
.opt[data-selected] { font-weight: 600; } .opt[data-selected]::after { content: "✓"; margin-left: auto; color: var(--acc); }
.menu-head { padding: 6px 10px 8px; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-end { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.select-btn { gap: 8px; min-width: 160px; justify-content: space-between; padding: 0 10px 0 12px; } .select-btn > :first-child { flex: 1; text-align: left; }
.chev { flex: none; width: 12px; height: 12px; color: var(--dim); transition: transform .15s; }
.tooltip { background: var(--fg); color: var(--bg); font: 12px var(--mono); padding: 4px 8px; border-radius: 6px; max-width: 480px; overflow-wrap: anywhere; }
.toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; outline: none; }
.toast { display: flex; gap: 12px; align-items: flex-start; background: var(--fg); color: var(--bg); padding: 10px 12px 10px 14px; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.25); min-width: 260px; max-width: 420px; outline: none; }
.toast.ok { border-left: 4px solid var(--ok); } .toast.bad { background: var(--bad); color: #fff; }
.toast-body { display: grid; gap: 2px; flex: 1; } .toast-title { font-weight: 600; font-size: 13.5px; } .toast-desc { font-size: 13px; opacity: .85; }
.toast-close { border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; padding: 0 2px; } .toast-close[data-hovered] { opacity: 1; }
.trail { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; color: var(--dim); }
.trail-item:not(:last-child)::after { content: "/"; padding: 0 6px; color: var(--dim); }
.trail .here { color: var(--fg); }
.fold-heading { margin: 0; font: inherit; }
.fold-btn { width: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 0; background: var(--bg2); padding: 9px 14px; font: inherit; color: var(--fg); text-align: left; cursor: pointer; }
.fold-btn[data-hovered] { background: var(--bg3); }
.fold .chev { transform: rotate(-90deg); } .fold[data-expanded] .chev { transform: none; }
.select-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fold[data-expanded] .fold-btn { border-bottom: 1px solid var(--line); }
.card-say { margin: 8px 14px 12px; } .card-say .fold-btn { background: none; padding: 4px 0; border: 0; } .card-say .fold-panel { padding-top: 8px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--dim); font-size: 13px; }
.check-box { width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 4px; display: grid; place-items: center; background: var(--bg); }
.check-box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.8; visibility: hidden; }
.check[data-selected] .check-box { background: var(--acc); border-color: var(--acc); } .check[data-selected] .check-box svg { visibility: visible; }
.check[data-focus-visible] .check-box { outline: 2px solid var(--acc); outline-offset: 2px; }
.count { background: var(--bg3); border-radius: 999px; padding: 0 6px; font-size: 12px; margin-left: 4px; font-weight: 400; }
.page { display: grid; gap: 24px; padding: 20px 24px 48px; max-width: var(--w); margin: 0 auto; }
.narrow { max-width: var(--w); margin: 0 auto; padding: 20px 24px 48px; }
.cols-2 { grid-template-columns: minmax(0,1fr) 280px; }
.cols-path { grid-template-columns: 260px minmax(0,1fr); }
.box { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; background: var(--bg); }
.box.viewed > :not(.boxhead) { display: none; }
.boxhead { background: var(--bg2); padding: 9px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.box > .boxhead:last-child { border-bottom: 0; }
.boxhead + :is(.drow, .nsrow, .hrow, .lrow, .person, .row) { border-top: 0; }
.boxbody { padding: 14px 18px; }
.right { margin-left: auto; }
.btn { font: inherit; font-size: 13px; height: 32px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 6px; padding: 0 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
.btn.small { height: 26px; font-size: 12px; padding: 0 10px; }
.box.loading { padding: 14px; color: var(--dim); text-align: center; font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; } .seg .btn { border-radius: 0; margin-left: -1px; } .seg .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg .btn:last-child { border-radius: 0 6px 6px 0; } .seg .btn[data-selected] { background: var(--bg3); font-weight: 600; }
.btn:hover, .btn[data-hovered] { background: var(--bg3); text-decoration: none; }
.btn[data-pressed] { background: var(--line); }
.btn.primary { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn.primary[data-hovered] { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn:disabled, .btn[data-disabled] { opacity: .5; cursor: not-allowed; } .btn[data-pending] { opacity: .7; cursor: progress; }
h1.title { font-size: 26px; font-weight: 600; margin: 0; }
.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; }
.btn.primary .chev { color: inherit; opacity: .85; margin-left: 6px; margin-right: -2px; }
.getit { width: min(520px, calc(100vw - 28px)); }
.getit-body { padding: 14px 16px; outline: none; display: grid; gap: 10px; }
.getit-title { font-size: 15px; margin: 0; } .getit p { margin: 0; font-size: 13px; }
.getit .cmd { display: flex; gap: 8px; align-items: flex-start; }
.getit pre.code { flex: 1; margin: 0; padding: 7px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
h2.title { font-size: 22px; font-weight: 600; margin: 0; }
.lede { font-size: 15px; margin: 0; }
.facts { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; color: var(--dim); font-size: 13px; margin: 8px 0 20px; }
.entry { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ecard { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--bg); }
.ecard .kind { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.ecard h3 { margin: 2px 0 4px; font-size: 16px; overflow-wrap: anywhere; } .ecard p { margin: 0 0 8px; color: var(--dim); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ecard code { overflow-wrap: anywhere; }
.page > *, .narrow > *, .cols-2 > *, .cols-path > * { min-width: 0; }
.sechead { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; } .sechead b { font-size: 16px; }
.map { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 28px; margin-bottom: 24px; }
.map > div { display: grid; grid-template-columns: minmax(80px, auto) 1fr 70px; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; font-size: 13.5px; }
.place { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg3); width: 100%; }
.place .srv, .dot.srv { background: var(--srv); } .place .any, .dot.any { background: var(--any); } .place .brw, .dot.brw { background: var(--brw); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--bg3); }
.legend { font-size: 12px; color: var(--dim); display: inline-flex; gap: 10px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 999px; padding: 1px 9px; background: var(--bg3); color: var(--dim); white-space: nowrap; }
.metas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .metas .chip { color: var(--fg); }
.metalabel { color: var(--dim); }
.chip.stability-stable { background: var(--okbg); } .chip.stability-stable .metalabel { color: var(--ok); }
.chip:is(.stability-unstable, .stability-experimental, .meta-experimental, .meta-alpha, .meta-beta, .meta-internal) { background: var(--warnbg); }
.chip:is(.stability-unstable, .stability-experimental) .metalabel { color: var(--warn); }
.nsrow { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0,1fr) 70px; gap: 4px 10px; padding: 8px 14px; border-top: 1px solid var(--line); align-items: center; }
.nsrow > a { min-width: 0; overflow-wrap: anywhere; } .nsrow .sig { font: 12px var(--mono); color: var(--dim); }
.nsrow .doc { grid-column: 1 / -1; font-size: 13px; color: var(--dim); }
.drow { display: grid; grid-template-columns: 14px minmax(140px, 240px) minmax(0,1fr); gap: 4px 10px; padding: 8px 14px; border-top: 1px solid var(--line); align-items: baseline; }
.drow:first-child { border-top: 0; } .drow > a { min-width: 0; overflow-wrap: anywhere; }
.drow.full { grid-template-columns: 14px minmax(0,1fr); } .drow.full .sig, .drow.full .doc { grid-column: 2; }
.drow .sig { font: 12px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .doc { grid-column: 3; font-size: 13px; color: var(--dim); }
.side h4 { font-size: 13px; margin: 0 0 8px; } .side .sect { margin: 0 0 22px; font-size: 13px; overflow-wrap: anywhere; }
.side .sect > div + div { margin-top: 3px; }
.side .tick { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 6px; align-items: baseline; }
.side .tick a, .side a.mono { overflow-wrap: anywhere; }
.side .hist { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: baseline; }
.side .hist + .hist { margin-top: 8px; } .side .hist .when { display: block; font-size: 12px; color: var(--dim); }
.side .person { display: flex; align-items: center; gap: 8px; }
.side pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11.5px/1.5 var(--mono); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin: 0; }
.crumbs { color: var(--dim); margin-bottom: 6px; }
.filters .trail { font-size: 17px; }
.hash { font: 12px var(--mono); color: var(--dim); }
.badge { display: inline-flex; align-items: center; font-size: 11.5px; line-height: 18px; font-weight: 600; border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.b-edit { color: var(--warn); background: var(--warnbg); } .b-new { color: var(--ok); background: var(--okbg); }
.b-prop { color: var(--prop); background: var(--propbg); } .b-rm { color: var(--bad); background: var(--badbg); }
.b-ren { color: var(--acc); background: var(--accbg); }
.state { font-size: 13px; padding: 3px 10px; }
.md { overflow-wrap: anywhere; } .md h1 { font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 4px 0 12px; }
.md h2 { font-size: 18px; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin: 22px 0 10px; } .md h3 { font-size: 15px; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; overflow-wrap: normal; }
.md td:first-child code, .md th:first-child code { white-space: nowrap; } .md td, .md th { border: 1px solid var(--line); padding: 4px 10px; vertical-align: top; }
.md img { max-width: 100%; height: auto; } .md a.figure { display: inline-block; border-bottom: 0; }
.md code { background: var(--bg3); border-radius: 4px; padding: 0 4px; } .md pre code { background: none; padding: 0; }
pre.code { margin: 0; font: 12.5px/1.65 var(--mono); padding: 12px 16px; overflow-x: auto; background: var(--bg2); border-radius: 6px; }
.box pre.code { border-radius: 0; background: var(--bg); }
.md pre.code, .box .md pre.code { margin: 0 0 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; }
.k, .x { color: var(--k); } .s { color: var(--s); } .n { color: var(--n); } .c { color: var(--c); font-style: italic; } .f { color: var(--f); } .t { color: var(--t); }
a.ref { color: inherit; border-bottom: 1px dotted var(--dim); } a.ref[href]:hover { text-decoration: none; border-bottom-color: var(--acc); }
a.ref.s { color: var(--s); } a.ref.f { color: var(--f); } a.ref.t { color: var(--t); }
.diff { font: 12.5px/1.65 var(--mono); overflow-x: auto; }
.diff .unified { min-width: max-content; } .diff .unified .row { display: flex; }
.diff .ln { flex: none; width: 5ch; padding-right: 8px; text-align: right; color: var(--dim); opacity: .7; user-select: none; -webkit-user-select: none; }
.diff .ln::before { content: attr(data-n); }
.diff .op { flex: none; width: 2ch; color: var(--dim); user-select: none; -webkit-user-select: none; }
.diff .lc { white-space: pre; padding-right: 14px; flex: 1; }
.diff .a { background: var(--okbg); } .diff .d { background: var(--badbg); } .diff .h { background: var(--accbg); color: var(--dim); }
.diff .gap, .diff .gap .lc { color: var(--dim); background: var(--bg2); }
.diff .split { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); }
.diff .split .row { display: contents; } .diff .split .lc { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 6px; }
.diff .split .none { background: var(--bg2); } .diff .split .ln.r { border-left: 1px solid var(--line); }
@media (max-width: 700px) { .diffmode { display: none; } }
.steps { display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--fg); }
.step:hover { background: var(--bg3); text-decoration: none; }
.step .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bg3); font-size: 11px; color: var(--dim); }
.step.done .n { background: var(--ok); color: #fff; } .step .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); }
.step.skip { opacity: .7; }
.ripple { display: flex; align-items: center; overflow-x: auto; padding: 14px; }
.ripple .col { display: grid; gap: 6px; } .ripple .edge { width: 26px; height: 1.5px; background: var(--line); flex: none; }
.node { border-radius: 8px; padding: 5px 10px; font: 12px var(--mono); border: 1.5px solid; white-space: nowrap; background: var(--bg); }
.node.e { border-color: var(--warn); color: var(--warn); } .node.a { border-color: var(--ok); color: var(--ok); }
.node.p { border-color: var(--prop); color: var(--prop); border-style: dashed; } .node.t { border-color: var(--acc); color: var(--acc); }
.node.r { border-color: var(--bad); color: var(--bad); }
.mergebox { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.mergebox.good { border-color: var(--ok); } .mergebox.blocked { border-color: var(--bad); }
.mergebox .big { font-size: 22px; }
.comment { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; background: var(--bg); }
.box .comment { margin: 10px 14px; }
.comment .ch { background: var(--bg2); border-bottom: 1px solid var(--line); padding: 7px 12px; font-size: 13px; border-radius: 8px 8px 0 0; }
.comment .cb { padding: 9px 12px; font-size: 13.5px; } .comment .cb p { margin: 0 0 6px; } .comment .cb p:last-child { margin: 0; }
.event { color: var(--dim); font-size: 13px; padding: 6px 0 6px 4px; }
.say textarea { width: 100%; min-height: 90px; font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: var(--bg); color: var(--fg); }
.say .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.say input, .field { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--bg); color: var(--fg); }
.avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-block; overflow: hidden; background: var(--bg3); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); vertical-align: middle; flex: none; }
.avatar svg { display: block; width: 100%; height: 100%; fill: currentColor; opacity: .55; }
.who .avatar { width: 28px; height: 28px; } .avatar.lg { width: 40px; height: 40px; }
.notice { border: 1px solid var(--line); background: var(--bg2); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.notice.bad { border-color: var(--bad); background: var(--badbg); color: var(--fg); }
.hrow { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: baseline; }
.hrow:first-child { border-top: 0; } .hrow .names { font: 12px/1.6 var(--mono); color: var(--dim); margin-top: 8px; overflow-wrap: anywhere; }
.hrow .when { font-size: 12px; color: var(--dim); white-space: nowrap; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: center; }
.lrow:first-child { border-top: 0; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filters .field { height: 32px; } .filters .searchfield.ns { flex: 0 1 300px; min-width: 200px; } .filters .searchfield.ns input { width: 100%; padding-right: 28px; }
.searchfield .clear { position: absolute; right: 6px; border: 0; background: none; color: var(--dim); font-size: 16px; cursor: pointer; padding: 0 4px; }
.searchfield[data-empty] .clear { display: none; } .searchfield input::-webkit-search-cancel-button { display: none; }
.people .person { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: center; }
.people .person:first-child { border-top: 0; } .people .person .what { color: var(--dim); font-size: 13px; margin-top: 2px; }
.people .person .stats { display: flex; gap: 16px; color: var(--dim); font-size: 13px; white-space: nowrap; }
.people .person .stats b { color: var(--fg); font-weight: 600; }
ol.howto { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
ol.howto > li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 4px 10px; }
ol.howto > li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; background: var(--bg3); color: var(--dim); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
ol.howto pre.code { grid-column: 2; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.howto .cmd { grid-column: 2; display: flex; gap: 8px; align-items: flex-start; }
.box .howto .cmd pre.code { flex: 1; margin: 0; padding: 7px 12px; background: var(--bg2); border-radius: 6px; }
dl.kv { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 8px 20px; margin: 0; font-size: 13px; }
dl.kv dt { color: var(--dim); } dl.kv dd { margin: 0; overflow-wrap: anywhere; } dl.kv dd > div + div { margin-top: 2px; }
.boxhead .sighead { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.lines { font: 12.5px/1.65 var(--mono); overflow-x: auto; padding: 8px 0; }
.lines .ln { display: flex; min-width: max-content; }
.lines .num { flex: none; width: calc(var(--nw, 3ch) + 28px); padding: 0 12px 0 16px; text-align: right; color: var(--dim); opacity: .65; user-select: none; -webkit-user-select: none; }
.lines .num::before { content: attr(data-n); } .lines .num:hover { color: var(--acc); opacity: 1; text-decoration: none; }
.lines .lc { white-space: pre; padding-right: 16px; flex: 1; }
.lines .ln.on { background: var(--warnbg); } .lines .ln.on .num { color: var(--fg); opacity: 1; }
.filters a.on { font-weight: 600; color: var(--fg); }
.empty { padding: 28px; text-align: center; color: var(--dim); }
.signin { max-width: 440px; margin: 60px auto; padding: 0 24px; }
.signin-form { display: grid; gap: 12px; margin-top: 12px; } .textfield { display: grid; gap: 6px; } .textfield label { font-weight: 600; font-size: 13px; }
.textfield input { width: 100%; height: 34px; } .field-error { color: var(--bad); font-size: 13px; }
.textfield[data-invalid] input { border-color: var(--bad); }
.dock { display: none; }
@media (max-width: 960px) {
  .cols-2, .cols-path { grid-template-columns: 1fr; }
  .page, .narrow { padding: 14px 14px 80px; } header.app .wrap { padding: 10px 14px 0; }
  .search, .search:focus-within { order: 3; flex-basis: 100%; } .bar1 > .avatar-btn, .bar1 > .who { margin-left: auto; } .results { width: var(--trigger-width); }
  .people .person { grid-template-columns: 40px minmax(0,1fr); } .people .person .stats { grid-column: 2; }
  .drow { grid-template-columns: 14px 1fr; } .drow .sig, .drow .doc { grid-column: 2; }
  .nsrow { grid-template-columns: 1fr 70px; } .nsrow .sig { grid-column: 1; }
  .hrow { grid-template-columns: 1fr; gap: 2px; } .map > div { grid-template-columns: 1fr 70px; } .map > div .muted { grid-column: 1 / -1; order: 3; }
  .path-side { order: 2; } .dock { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px 18px; background: var(--bg); border-top: 1px solid var(--line); z-index: 20; }
  .dock .btn { flex: 1; text-align: center; padding: 9px; font-size: 14px; }
}
`

used by

• tcmts.registry.App
• tcmts.share.App