internal/web/static/style.css
421 lines · 12534 bytes
1/* gitbay stylesheet. One file, light and dark via prefers-color-scheme.
2 Tokens first; components use tokens only. No external requests. */
3
4:root {
5 /* palette */
6 --bg: #ffffff;
7 --fg: #1f2328;
8 --muted: #667079;
9 --faint: #eceff1; /* hairlines, row separators */
10 --line: #d7dde2; /* control borders, card edges */
11 --surface: #f6f8fa; /* cards, code, table hover */
12 --accent: #0b6c80; /* sea blue: links, active tab, primary */
13 --accent-fg: #ffffff; /* text on accent */
14 --ok: #1a7f37;
15 --warn: #9a6700;
16 --bad: #cf222e;
17 --done: #8250df; /* merged */
18 --neutral: #667079;
19 --code-bg: #f6f8fa;
20
21 /* type */
22 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
23 "Helvetica Neue", Arial, sans-serif;
24 --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
25 "Liberation Mono", monospace;
26 --fs-0: 0.8rem; /* 12.8px: chips, fine print */
27 --fs-1: 0.866rem; /* ~13px: metadata, mono in tables */
28 --fs-2: 0.933rem; /* 14px: dense table text */
29 --fs-3: 1rem; /* 15px: body */
30 --fs-4: 1.135rem; /* ~17px: h2 */
31 --fs-5: 1.335rem; /* ~20px: h1 */
32
33 /* spacing */
34 --sp-1: 0.25rem;
35 --sp-2: 0.5rem;
36 --sp-3: 0.75rem;
37 --sp-4: 1rem;
38 --sp-5: 1.5rem;
39 --sp-6: 2.5rem;
40
41 /* radii */
42 --r-sm: 4px;
43 --r-md: 6px;
44 --r-lg: 8px;
45 --r-pill: 999px;
46}
47@media (prefers-color-scheme: dark) {
48 :root {
49 --bg: #0d1117;
50 --fg: #e6edf3;
51 --muted: #8d96a0;
52 --faint: #1d242c;
53 --line: #30363d;
54 --surface: #161b22;
55 --accent: #58b7c9;
56 --accent-fg: #06272e;
57 --ok: #3fb950;
58 --warn: #d29922;
59 --bad: #f85149;
60 --done: #a371f7;
61 --neutral: #8d96a0;
62 --code-bg: #161b22;
63 }
64}
65
66* { box-sizing: border-box; }
67html { font-size: 15px; }
68body {
69 margin: 0;
70 background: var(--bg);
71 color: var(--fg);
72 font: var(--fs-3)/1.6 var(--sans);
73 min-height: 100vh;
74 display: flex;
75 flex-direction: column;
76}
77main { flex: 1; }
78
79a { color: var(--accent); text-decoration: none; }
80a:hover { text-decoration: underline; }
81
82h1 { font-size: var(--fs-5); font-weight: 600; line-height: 1.3;
83 margin: var(--sp-5) 0 var(--sp-3); letter-spacing: -0.01em; }
84h2 { font-size: var(--fs-4); font-weight: 600; line-height: 1.35;
85 margin: var(--sp-5) 0 var(--sp-3); }
86h3 { font-size: var(--fs-3); font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
87
88code, pre, .code, td.mode, td.size {
89 font-family: var(--mono);
90 font-size: var(--fs-1);
91}
92
93/* layout */
94header {
95 border-bottom: 1px solid var(--faint);
96 padding: var(--sp-3) var(--sp-5);
97}
98a.site {
99 font-weight: 650;
100 color: var(--fg);
101 letter-spacing: -0.01em;
102 display: inline-flex;
103 align-items: center;
104 gap: var(--sp-2);
105}
106a.site:hover { text-decoration: none; color: var(--accent); }
107a.site svg.mark { display: block; }
108main {
109 max-width: 64rem;
110 margin: 0 auto;
111 padding: var(--sp-3) var(--sp-5) var(--sp-6);
112}
113
114/* tables */
115table { border-collapse: collapse; width: 100%; }
116td {
117 padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
118 border-bottom: 1px solid var(--faint);
119 vertical-align: top;
120 font-size: var(--fs-2);
121}
122td:last-child { padding-right: 0; }
123td.size, td.mode { color: var(--muted); white-space: nowrap; }
124
125/* repo header */
126.repohead { margin-bottom: var(--sp-4); }
127h1.repotitle { margin: var(--sp-4) 0 var(--sp-1); font-weight: 400; }
128h1.repotitle a { color: var(--fg); }
129h1.repotitle a:last-of-type { font-weight: 650; }
130h1.repotitle a:hover { color: var(--accent); text-decoration: none; }
131h1.repotitle .sep { color: var(--muted); margin: 0 0.15em; }
132.repohead .desc { margin: 0 0 var(--sp-2); }
133
134/* repo tabs */
135nav.tabs {
136 display: flex;
137 flex-wrap: wrap;
138 gap: var(--sp-1);
139 border-bottom: 1px solid var(--faint);
140 margin-top: var(--sp-3);
141}
142nav.tabs a {
143 color: var(--muted);
144 padding: var(--sp-1) var(--sp-2);
145 border-radius: var(--r-md) var(--r-md) 0 0;
146 border-bottom: 2px solid transparent;
147 margin-bottom: -1px;
148 font-size: var(--fs-2);
149}
150nav.tabs a:hover { color: var(--fg); background: var(--surface); text-decoration: none; }
151nav.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 550; }
152
153.clone { color: var(--muted); font-size: var(--fs-2); }
154.clone code {
155 background: var(--surface);
156 border: 1px solid var(--faint);
157 padding: 0.15rem 0.5rem;
158 border-radius: var(--r-sm);
159}
160
161/* path bar on tree and blob pages */
162.pathbar {
163 display: flex;
164 flex-wrap: wrap;
165 align-items: center;
166 gap: var(--sp-2) var(--sp-3);
167 margin: var(--sp-3) 0;
168 font-size: var(--fs-2);
169}
170.pathbar .spacer { flex: 1; }
171.refchip {
172 display: inline-flex;
173 align-items: center;
174 gap: 0.3rem;
175 background: var(--surface);
176 border: 1px solid var(--faint);
177 border-radius: var(--r-md);
178 padding: 0.1rem 0.55rem;
179 font-family: var(--mono);
180 font-size: var(--fs-1);
181 color: var(--fg);
182}
183.pathbar .crumbs strong { color: var(--fg); }
184
185/* file table */
186table.tree td.name { width: 100%; }
187table.tree td.name a { color: var(--fg); }
188table.tree td.name a:hover { color: var(--accent); }
189table.tree td.size { text-align: right; }
190table.tree td.empty, table.refs td.empty, li.empty, ul.loglist li.empty { color: var(--muted); }
191
192/* refs page */
193table.refs td.name { width: 100%; }
194table.refs td.sha { color: var(--muted); }
195
196/* card header (README) */
197.cardhead {
198 font-family: var(--mono);
199 font-size: var(--fs-1);
200 color: var(--muted);
201 border-bottom: 1px solid var(--faint);
202 margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4);
203 padding: var(--sp-2) var(--sp-5);
204 background: var(--surface);
205 border-radius: var(--r-lg) var(--r-lg) 0 0;
206}
207
208/* log */
209ul.loglist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
210ul.loglist li {
211 display: flex;
212 align-items: baseline;
213 gap: var(--sp-3);
214 padding: var(--sp-2) 0;
215 border-bottom: 1px solid var(--faint);
216}
217ul.loglist .commitmain { flex: 1; min-width: 0; }
218ul.loglist p { margin: 0; }
219ul.loglist .subject a { color: var(--fg); font-weight: 550; }
220ul.loglist .subject a:hover { color: var(--accent); }
221ul.loglist .commitside {
222 display: flex;
223 align-items: baseline;
224 gap: var(--sp-2);
225 white-space: nowrap;
226}
227p.pager { margin-top: var(--sp-4); }
228
229/* commit page */
230.commithead p { margin: var(--sp-1) 0; }
231.commithead h2 { margin-bottom: var(--sp-1); }
232code.fullsha { color: var(--muted); overflow-wrap: anywhere; }
233.empty-note { color: var(--muted); }
234.crumbs { color: var(--muted); font-size: var(--fs-2); }
235.desc, td.desc { color: var(--muted); }
236.error { color: var(--bad); }
237.meta { color: var(--muted); font-size: var(--fs-1); }
238svg.icon { vertical-align: -0.125em; }
239.lede { font-size: var(--fs-3); margin: var(--sp-2) 0; }
240
241/* repo listings (index, owner pages) */
242ul.repolist { list-style: none; margin: var(--sp-2) 0; padding: 0; }
243ul.repolist li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--faint); }
244ul.repolist li.empty { color: var(--muted); }
245ul.repolist p { margin: 0; }
246ul.repolist .reponame { font-size: var(--fs-3); font-weight: 550; }
247ul.repolist .desc { margin-top: 0.1rem; }
248ul.repolist .meta { margin-top: 0.1rem; }
249
250/* member and org chips on owner pages */
251a.memberchip {
252 display: inline-block;
253 border: 1px solid var(--line);
254 border-radius: var(--r-pill);
255 padding: 0.05rem 0.6rem;
256 color: var(--fg);
257 font-size: var(--fs-1);
258 margin: 0 0.15rem 0.15rem 0;
259}
260a.memberchip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
261a.memberchip .role { color: var(--muted); }
262
263/* index toolbar */
264p.toolbar { color: var(--muted); font-size: var(--fs-2); margin-top: var(--sp-4); }
265form.inline { display: inline; }
266button.linklike {
267 background: none;
268 border: none;
269 color: var(--accent);
270 padding: 0;
271 font: inherit;
272 font-size: var(--fs-2);
273 cursor: pointer;
274}
275button.linklike:hover { text-decoration: underline; filter: none; }
276
277/* cards: README, comments */
278.readme, .code {
279 border: 1px solid var(--faint);
280 border-radius: var(--r-lg);
281 padding: var(--sp-4) var(--sp-5);
282 margin-top: var(--sp-4);
283 overflow-x: auto;
284}
285/* chroma emits inline styles for a light background; pin code blocks to
286 light colors in both schemes so unstyled tokens stay legible. */
287.code { background: #f8f8f8; color: #1a1a1a; padding: var(--sp-3) var(--sp-4); }
288.code pre { margin: 0; background: transparent !important; }
289@media (prefers-color-scheme: dark) {
290 .code { border-color: var(--line); }
291}
292
293/* rendered markdown / org / html */
294.rendered { max-width: 100%; overflow-wrap: anywhere; }
295.rendered pre {
296 background: var(--code-bg);
297 border: 1px solid var(--faint);
298 padding: var(--sp-3) var(--sp-4);
299 border-radius: var(--r-md);
300 overflow-x: auto;
301}
302.rendered code { background: var(--code-bg); padding: 0.1rem 0.35rem; border-radius: var(--r-sm); }
303.rendered pre code { background: transparent; padding: 0; }
304.rendered blockquote {
305 border-left: 3px solid var(--line);
306 margin-left: 0;
307 padding-left: var(--sp-4);
308 color: var(--muted);
309}
310.rendered img { max-width: 100%; }
311.rendered h1, .rendered h2 { border-bottom: 1px solid var(--faint); padding-bottom: var(--sp-1); }
312
313pre.message {
314 background: var(--code-bg);
315 border: 1px solid var(--faint);
316 padding: var(--sp-3) var(--sp-4);
317 border-radius: var(--r-md);
318 white-space: pre-wrap;
319 overflow-wrap: anywhere;
320}
321
322/* diffs */
323pre.diff {
324 background: var(--code-bg);
325 border: 1px solid var(--faint);
326 padding: var(--sp-3) var(--sp-4);
327 border-radius: var(--r-md);
328 overflow-x: auto;
329 line-height: 1.5;
330}
331pre.diff .add { color: var(--ok); }
332pre.diff .del { color: var(--bad); }
333pre.diff .hunk { color: var(--accent); }
334pre.diff .meta { color: var(--muted); }
335
336/* badges: signature and check states. Semantic colors stay distinct:
337 green verified/success, amber pending/stale, red bad/failure, muted
338 unsigned. */
339.badge, .chip {
340 --chip: var(--neutral);
341 display: inline-block;
342 padding: 0.05rem 0.55rem;
343 border-radius: var(--r-pill);
344 font-size: var(--fs-0);
345 font-weight: 500;
346 line-height: 1.5;
347 color: var(--chip);
348 border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
349 background: color-mix(in srgb, var(--chip) 7%, transparent);
350 white-space: nowrap;
351 vertical-align: middle;
352}
353.chip-open { --chip: var(--ok); }
354.chip-closed { --chip: var(--bad); }
355.chip-merged { --chip: var(--done); }
356.chip-neutral { --chip: var(--neutral); }
357.badge-verified { --chip: var(--ok); }
358.badge-unsigned { --chip: var(--neutral); }
359.badge-signed_unknown_key { --chip: var(--warn); }
360.badge-signed_email_mismatch { --chip: var(--bad); }
361.badge-signed_key_expired { --chip: var(--warn); }
362.badge-signed_key_revoked { --chip: var(--bad); }
363.badge-bad_signature { --chip: var(--bad); }
364.badge.check-success { --chip: var(--ok); }
365.badge.check-pending { --chip: var(--warn); }
366.badge.check-failure, .badge.check-error { --chip: var(--bad); }
367span.check-success { color: var(--ok); }
368span.check-pending { color: var(--warn); }
369span.check-failure, span.check-error { color: var(--bad); }
370
371/* review threads under diff lines */
372.thread {
373 border: 1px solid var(--faint);
374 border-left: 3px solid var(--accent);
375 border-radius: var(--r-md);
376 padding: var(--sp-2) var(--sp-4);
377 margin: var(--sp-2) 0 var(--sp-2) var(--sp-6);
378}
379.thread.resolved { border-left-color: var(--ok); opacity: 0.75; }
380.thread.stale { border-left-color: var(--warn); }
381
382/* forms */
383input, textarea, button, select { font: inherit; color: inherit; }
384input[type="text"], input:not([type]), textarea {
385 background: var(--bg);
386 border: 1px solid var(--line);
387 border-radius: var(--r-md);
388 padding: var(--sp-2) var(--sp-3);
389}
390textarea { width: 100%; resize: vertical; }
391input:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
392button {
393 background: var(--accent);
394 color: var(--accent-fg);
395 border: none;
396 border-radius: var(--r-md);
397 padding: var(--sp-1) var(--sp-3);
398 font-weight: 500;
399 cursor: pointer;
400}
401button:hover { filter: brightness(1.08); }
402
403/* footer */
404footer {
405 max-width: 64rem;
406 margin: 0 auto;
407 padding: var(--sp-4) var(--sp-5);
408 border-top: 1px solid var(--faint);
409 color: var(--muted);
410 font-size: var(--fs-1);
411}
412footer p { margin: 0; }
413footer a { color: var(--muted); text-decoration: underline; }
414footer a:hover { color: var(--accent); }
415
416/* mobile */
417@media (max-width: 40rem) {
418 header { padding: var(--sp-3) var(--sp-4); }
419 main { padding: var(--sp-2) var(--sp-4) var(--sp-6); }
420 .thread { margin-left: var(--sp-3); }
421}