20-shell.css RawHistoryFolder
1@layer base {
2 body { grid-template-rows: auto 1fr auto; }
3}
4
5@layer components {
6 /* neferbar: black bars; one accent block (top left) with a 4-cell stepped fade.
7 The fade is four hard-edged 1ch cells (not a blend): it is the bar's own glyph-grid look. */
8 .bar {
9 display: flex; align-items: stretch; column-gap: 1ch;
10 height: var(--bar-h); line-height: var(--bar-h);
11 background: var(--bar); color: var(--bar-ink);
12 white-space: nowrap; overflow: hidden;
13 position: sticky; z-index: 20;
14 & a { text-decoration: none; }
15 & a:hover { text-decoration: underline; }
16 & :focus-visible { outline-color: var(--accent); outline-offset: -2px; }
17 & .blk { background: var(--accent); color: var(--on-accent); font-weight: bold; padding: 0 1ch; }
18 & .fade {
19 flex: none; width: 4ch; margin-left: -1ch;
20 background: linear-gradient(to right,
21 var(--fade-1) 0 25%, var(--fade-2) 25% 50%, var(--fade-3) 50% 75%, var(--fade-4) 75%);
22 }
23 }
24
25 .top {
26 top: 0;
27 & .crumbs ol { display: flex; }
28 & .crumbs li + li::before { content: "/"; color: var(--bar-dim); padding: 0 .5ch; }
29 & .crumbs [aria-current] { color: #fff; font-weight: bold; }
30 & .secs { margin-left: 2ch; overflow: hidden; }
31 & .secs ul { display: flex; }
32 & .secs li + li::before { content: "/"; color: var(--bar-dim); }
33 & .secs a { display: inline-block; padding: 0 1ch; color: var(--bar-dim); }
34 & .secs a:hover { color: var(--bar-ink); }
35 & .secs a::first-letter { text-decoration: underline; }
36 & .secs a[aria-current] { color: #fff; font-weight: bold; }
37 & .secs a[aria-current]::before { content: "▸ "; }
38 & .ref { flex: none; margin-left: auto; padding-right: 1ch; color: #fff; font-weight: bold; }
39 & .ref .sha { font-weight: normal; color: var(--bar-dim); }
40 & .ref:hover { text-decoration: underline; }
41 }
42
43 .status {
44 bottom: 0; font-size: var(--fs-s);
45 padding: 0 1ch;
46 & > span, & .st-cmd { color: var(--bar-dim); }
47 & .mode { color: #fff; font-weight: bold; }
48 & .st-ctx { color: var(--bar-ink); }
49 & .st-cmd { flex: none; }
50 & .st-cmd .hi, & .st-cmd:hover { color: #fff; font-weight: bold; }
51 & .st-sel { color: var(--bar-ink); }
52 & .st-flash:empty { display: none; }
53 & .st-flash { color: #fff; font-weight: bold; }
54 & .st-hints { margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
55 & .st-live::before { content: "○ "; }
56 & .st-live[data-state="live"] { color: var(--bar-ink); }
57 & .st-live[data-state="live"]::before { content: "● "; }
58 & .st-pos { min-width: 7ch; text-align: right; color: var(--bar-ink); }
59 }
60
61 /* work area: content + context rail.
62 Tables and code take the free width and the rail is fixed; on prose pages the text
63 is capped at the reading measure and the rail takes the rest, so no column is idle. */
64 .work { min-width: 0; }
65 .rail { padding: 0 var(--pad) var(--lh); min-width: 0; }
66 @media (min-width: 1100px) {
67 /* app shell: the bars stay put, the content and the rail scroll on their own, so each
68 column has its scrollbar at its own edge (the README's sits next to the README) */
69 body { height: 100dvh; overflow: hidden; }
70 .work { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
71 .work.has-rail { grid-template-columns: minmax(0, 1fr) var(--rail); }
72 .work.has-rail.read { grid-template-columns: minmax(0, calc(var(--measure) + 2 * var(--pad))) minmax(var(--rail), 1fr); }
73 main, .rail { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
74 main:focus { outline: none; }
75 .rail { border-left: 1px solid var(--rule); }
76 :root { --stick: 0px; }
77 }
78 .rail-d > summary { display: none; }
79 @media (max-width: 1099.98px) {
80 /* the rail folds into one line above the content */
81 .work.has-rail { display: flex; flex-direction: column; }
82 .rail { order: -1; border-bottom: 1px solid var(--rule); padding-bottom: 0; }
83 .rail-d > summary {
84 display: block; list-style: none; color: var(--ink-dim);
85 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
86 }
87 .rail-d > summary::-webkit-details-marker { display: none; }
88 .rail-d > summary::before { content: "▸ "; color: var(--ink); }
89 .rail-d[open] > summary::before { content: "▾ "; }
90 .rail-d[open] { padding-bottom: var(--lh); }
91 }
92 @media (max-width: 700px) {
93 /* the sections drop to a second bar row instead of being cut off */
94 .top { flex-wrap: wrap; height: auto; }
95 .top .secs { order: 10; flex-basis: 100%; margin: 0; border-top: 1px solid #202020; }
96 .top .crumbs { flex: 1; min-width: 0; overflow: hidden; }
97 .status .st-hints, .status .st-ctx { display: none; }
98 .list .c-who, .list .c-desc, .list .c-sub, .list .c-ref, .list .c-size, .list .c-lang { display: none; }
99 }
100
101 /* rail blocks: a dim title rule, then key/value rows on the character grid */
102 .rail section { margin-top: var(--lh); }
103 .rail h2 {
104 display: flex; gap: 1ch; color: var(--ink-dim); font-weight: normal;
105 &::after { content: ""; flex: 1; align-self: center; border-top: 1px solid var(--rule); }
106 }
107 .kv {
108 display: grid; grid-template-columns: 11ch minmax(0, 1fr); column-gap: 1ch;
109 & dt { color: var(--ink-mute); }
110 & dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
111 }
112 .outline {
113 & a { display: block; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
114 & a:hover { text-decoration: underline; }
115 & .l1 { font-weight: bold; }
116 & .l3 { padding-left: 2ch; }
117 & .l4, & .l5, & .l6 { padding-left: 4ch; }
118 & a[aria-current]::before { content: "▸"; margin-left: -1ch; }
119 }
120 .rail .clone { border: 0; padding: 0; margin-top: 0; }
121 .rail .clone-line { flex-wrap: wrap; }
122}