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