1@layer components {
2 /* buttons: one shape for links and buttons that act */
3 .btn {
4 display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap;
5 height: 32px; padding: 0 var(--s3);
6 font: 600 var(--fs-s) / 1 var(--font); color: var(--ink); text-decoration: none;
7 background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-s);
8 cursor: pointer;
9 &:hover { background: var(--bg-strong); color: var(--ink-hi); text-decoration: none; }
10 & kbd { margin-right: -4px; }
11 &.primary { background: var(--ink-hi); color: var(--on-ink); border-color: var(--ink-hi); }
12 &.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
13 &.danger:hover { color: var(--red); border-color: var(--red); }
14 &.icon { width: 32px; justify-content: center; padding: 0; }
15 &[aria-disabled="true"] { opacity: .45; pointer-events: none; }
16 &[aria-current="true"], &[aria-pressed="true"] { background: var(--bg-strong); color: var(--ink-hi); border-color: var(--ink-mute); }
17 }
18 /* icons: SVG files used as masks, so they take the colour of the text */
19 .ico { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; mask: var(--i) center / contain no-repeat; }
20 .i-branch { --i: url(icons/branch.svg); }
21 .i-search { --i: url(icons/search.svg); }
22 .i-file { --i: url(icons/file.svg); }
23 .i-tag { --i: url(icons/tag.svg); }
24 .i-user { --i: url(icons/user.svg); }
25 .i-key { --i: url(icons/key.svg); }
26 .i-log-in { --i: url(icons/log-in.svg); }
27 .i-log-out { --i: url(icons/log-out.svg); }
28
29 .pill {
30 display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s2); margin-left: var(--s1);
31 font: 600 var(--fs-xs) / 1 var(--mono); color: var(--ink-dim); vertical-align: 1px;
32 background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 999px; white-space: nowrap;
33 &.tag::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border: 1.5px solid currentColor; border-radius: 1px; transform: rotate(45deg); }
34 &.new { color: var(--teal); border-color: currentColor; }
35 }
36 .count {
37 display: inline-block; min-width: 22px; padding: 0 7px; margin-left: var(--s1);
38 font: 600 var(--fs-xs) / 20px var(--font); text-align: center; color: var(--ink-dim);
39 background: var(--bg-raised); border-radius: 999px; vertical-align: 1px;
40 }
41
42 /* header: identity, path and actions on top, the repository tabs below.
43 --hdr-h is its height, the offset of the sticky bars of the diffs. */
44 body { --hdr-h: 57px; }
45 body:has(.hdr .tabs) { --hdr-h: 101px; }
46 .hdr {
47 position: sticky; top: 0; z-index: 20;
48 background: var(--bg-surface); border-bottom: 1px solid var(--border);
49 }
50 .hdr-top {
51 display: flex; align-items: center; gap: var(--s4);
52 max-width: var(--page); margin: 0 auto; height: 56px; padding: 0 var(--pad);
53 }
54 .brand {
55 display: flex; align-items: center; flex: none; text-decoration: none;
56 &:hover { text-decoration: none; }
57 }
58 /* the hermit by his fire: a grey picture in its own rounded square */
59 .brand-mark { width: 32px; height: 32px; flex: none; background: url(icons/brand.svg) center / contain no-repeat; }
60 .crumbs {
61 min-width: 0; flex: 1 1 auto; overflow: hidden;
62 & ol { display: flex; align-items: center; min-width: 0; font-family: var(--mono); font-size: var(--fs); }
63 & li { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
64 & li:last-child { overflow: hidden; }
65 & li::before { content: "/"; padding: 0 var(--s2); color: var(--border-strong); }
66 & a, & span { overflow: hidden; text-overflow: ellipsis; color: var(--ink-dim); text-decoration: none; }
67 & a:hover { color: var(--ink-hi); text-decoration: underline; }
68 & [aria-current] { color: var(--ink-hi); font-weight: 700; }
69 }
70 .hdr-acts { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex: none; }
71 .ref {
72 font-family: var(--mono); max-width: 28ch;
73 & .ref-name { overflow: hidden; text-overflow: ellipsis; }
74 & .sha { font-weight: 400; color: var(--ink-mute); }
75 }
76 .search {
77 min-width: 220px; justify-content: flex-start; color: var(--ink-mute); font-weight: 400;
78 background: var(--bg-inset);
79 & .search-label { flex: 1; }
80 }
81 .owner {
82 display: flex; align-items: center; gap: var(--s2);
83 & .owner-badge {
84 display: inline-flex; align-items: center; gap: 6px; max-width: 20ch; padding: 0 var(--s1);
85 font: 600 var(--fs-s) / 1 var(--mono); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
86 }
87 }
88
89 .tabs {
90 max-width: var(--page); margin: 0 auto; padding: 0 var(--pad);
91 overflow-x: auto; scrollbar-width: none;
92 & ul { display: flex; gap: var(--s1); }
93 & a {
94 position: relative; display: flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s3);
95 color: var(--ink-dim); text-decoration: none; white-space: nowrap; font-weight: 600;
96 }
97 & a::after { content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: -1px; height: 2px; border-radius: 2px; }
98 & a:hover { color: var(--ink-hi); }
99 & a:hover::after { background: var(--border-strong); }
100 & a[aria-current] { color: var(--ink-hi); }
101 & a[aria-current]::after { background: var(--ink-hi); }
102 & kbd { opacity: .55; }
103 & a:hover kbd, & a:focus-visible kbd, & a[aria-current] kbd { opacity: 1; }
104 }
105
106 /* work area: content and rail, centred, the page scrolls */
107 .work {
108 flex: 1; width: 100%; max-width: var(--page); margin: 0 auto;
109 padding: var(--s5) var(--pad) var(--s7);
110 display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start;
111 /* .work grows to fill the page (flex: 1): without this, the rows share the
112 spare height and a short content pushes the rail down */
113 align-content: start;
114 }
115 .work.has-rail { grid-template-columns: minmax(0, 1fr) var(--rail); }
116 .rail { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
117 .work-lede { grid-column: 1 / -1; margin-bottom: calc(-1 * var(--s2)); }
118 main > * + * { margin-top: var(--s4); }
119
120 /* blocks: a surface with a header; rail sections are blocks too */
121 .card, .rail section {
122 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
123 min-width: 0;
124 }
125 .card-h, .rail h2 {
126 display: flex; align-items: center; gap: var(--s2);
127 padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
128 font-size: var(--fs); line-height: 20px;
129 & a { margin-left: auto; font: 600 var(--fs-s) / 1 var(--font); color: var(--ink-dim); text-decoration: none; }
130 & a:hover { color: var(--ink-hi); text-decoration: underline; }
131 }
132 .rail section > :not(h2) { margin: var(--s3) var(--s4); }
133 .rail section > .list { margin: var(--s2) 0; }
134 .rail section > p + p { margin-top: calc(-1 * var(--s2)); }
135
136 /* newest tag in the summary rail */
137 .latest-tag {
138 display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-size: var(--fs-s);
139 & .tag-name { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--fs) / 20px var(--mono); color: var(--ink-hi); text-decoration: none; }
140 & .tag-name:hover { text-decoration: underline; }
141 & time { margin-left: auto; }
142 & .tag-sub { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
143 }
144
145 .kv {
146 display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s1);
147 font-size: var(--fs-s);
148 & dt { color: var(--ink-mute); }
149 & dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
150 }
151 .outline {
152 font-size: var(--fs-s);
153 & a { display: block; padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; color: var(--ink-dim); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
154 & a:hover { background: var(--bg-raised); color: var(--ink-hi); }
155 & .l1 { font-weight: 700; color: var(--ink); }
156 & .l3 { padding-left: var(--s5); }
157 & .l4, & .l5, & .l6 { padding-left: var(--s6); }
158 }
159
160 /* footer: version and source (AGPL §13) */
161 .foot {
162 display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
163 width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--s4) var(--pad) var(--s5);
164 font-size: var(--fs-s); color: var(--ink-mute);
165 &::before { content: ""; flex-basis: 100%; height: 1px; margin-bottom: var(--s2); background: var(--border); }
166 & a { color: var(--ink-dim); }
167 & .foot-keys { margin-left: auto; color: var(--ink-dim); }
168 & .foot-keys:hover { color: var(--ink-hi); }
169 }
170
171 /* hint: bottom right, only while it has something to say */
172 .hint {
173 position: fixed; right: var(--s4); bottom: var(--s4); z-index: 25;
174 display: flex; gap: var(--s3); align-items: center;
175 padding: var(--s2) var(--s3); font: 600 var(--fs-s) / 18px var(--mono); color: var(--ink-hi);
176 background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow);
177 pointer-events: none;
178 & > :empty { display: none; }
179 & .hint-live { color: var(--red); }
180 }
181 /* empty, the badge is out of sight but stays a status region (display: none
182 would drop it from the accessibility tree and its next message would not be
183 announced) */
184 .hint:not(:has(> :not(:empty))) {
185 width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none;
186 }
187
188 @media (max-width: 1080px) {
189 /* the rail goes under the content, in two columns while there is room */
190 .work.has-rail { grid-template-columns: minmax(0, 1fr); }
191 .rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
192 .search { min-width: 0; }
193 .search .search-label, .search kbd { display: none; }
194 .search { width: 32px; padding: 0; justify-content: center; }
195 }
196 @media (max-width: 720px) {
197 :root { --pad: var(--s4); }
198 .hdr-top { gap: var(--s3); height: 52px; }
199 .crumbs li:not(:last-child) { display: none; }
200 .ref .sha, .owner .owner-badge { display: none; }
201 .ref { max-width: 16ch; }
202 .work { padding-top: var(--s4); }
203 .rail { grid-template-columns: minmax(0, 1fr); }
204 .tabs kbd { display: none; }
205 .list .c-who, .list .c-desc, .list .c-sub, .list .c-ref, .list .c-size, .list .c-lang { display: none; }
206 }
207}