Openhub
Sign in Sign up
samjeston / openhub Public
9aa3c45
Switch branches/tags
Branches
main
Sam Jeston Working vertical 9aa3c45 · History
865 lines· 45.7 KB ·CSS
Raw
1/* Openhub stylesheet. Colours are tokens so the dark theme only redefines variables. */
2
3:root {
4 --bg: #ffffff;
5 --bg-subtle: #f6f8fa;
6 --bg-muted: #eef1f4;
7 --bg-hover: #f3f4f6;
8 --border: #d1d9e0;
9 --border-muted: #e4e8ec;
10 --text: #1f2328;
11 --text-muted: #59636e;
12 --text-subtle: #818b98;
13 --accent: #2563eb;
14 --accent-hover: #1d4ed8;
15 --accent-subtle: #eef4ff;
16 --accent-border: #bcd0fb;
17 --focus: rgba(37, 99, 235, 0.35);
18 --success: #1a7f37;
19 --success-emphasis: #1f883d;
20 --success-emphasis-hover: #1c7a37;
21 --success-subtle: #dafbe1;
22 --success-border: rgba(26, 127, 55, 0.35);
23 --danger: #cf222e;
24 --danger-emphasis: #d1242f;
25 --danger-subtle: #ffebe9;
26 --danger-border: rgba(207, 34, 46, 0.35);
27 --merged: #8250df;
28 --merged-subtle: #fbefff;
29 --attention-subtle: #fff8c5;
30 --attention-border: #e6d58c;
31 --header-bg: #0f172a;
32 --header-text: #e2e8f0;
33 --header-muted: #94a3b8;
34 --btn-bg: #f6f8fa;
35 --btn-hover: #eef1f4;
36 --btn-border: #d1d9e0;
37 --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
38 --shadow-md: 0 8px 24px rgba(66, 74, 83, 0.12), 0 1px 3px rgba(31, 35, 40, 0.08);
39 --diff-add-bg: #e6ffec;
40 --diff-add-num: #ccffd8;
41 --diff-del-bg: #ffebe9;
42 --diff-del-num: #ffd7d5;
43 --diff-hunk-bg: #eef4ff;
44 --line-highlight: #fff8c5;
45 --folder: #54aeff;
46 --tok-comment: #6e7781;
47 --tok-string: #0a3069;
48 --tok-number: #0550ae;
49 --tok-constant: #0550ae;
50 --tok-keyword: #cf222e;
51 --tok-function: #8250df;
52 --tok-type: #953800;
53 --tok-tag: #116329;
54 --tok-attr: #0550ae;
55 --tok-meta: #6639ba;
56 --radius: 6px;
57 --radius-lg: 10px;
58 --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
59 --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
60 color-scheme: light;
61}
62
63@media (prefers-color-scheme: dark) {
64 :root {
65 --bg: #0d1117;
66 --bg-subtle: #151b23;
67 --bg-muted: #212830;
68 --bg-hover: #1b2129;
69 --border: #3d444d;
70 --border-muted: #2a313a;
71 --text: #e6edf3;
72 --text-muted: #9198a1;
73 --text-subtle: #6e7681;
74 --accent: #4493f8;
75 --accent-hover: #6cabff;
76 --accent-subtle: rgba(56, 139, 253, 0.12);
77 --accent-border: rgba(56, 139, 253, 0.4);
78 --focus: rgba(68, 147, 248, 0.45);
79 --success: #3fb950;
80 --success-emphasis: #238636;
81 --success-emphasis-hover: #2ea043;
82 --success-subtle: rgba(46, 160, 67, 0.15);
83 --success-border: rgba(46, 160, 67, 0.4);
84 --danger: #f85149;
85 --danger-emphasis: #da3633;
86 --danger-subtle: rgba(248, 81, 73, 0.12);
87 --danger-border: rgba(248, 81, 73, 0.4);
88 --merged: #ab7df8;
89 --merged-subtle: rgba(171, 125, 248, 0.15);
90 --attention-subtle: rgba(187, 128, 9, 0.15);
91 --attention-border: rgba(187, 128, 9, 0.4);
92 --header-bg: #010409;
93 --header-text: #e6edf3;
94 --header-muted: #9198a1;
95 --btn-bg: #212830;
96 --btn-hover: #262c36;
97 --btn-border: #3d444d;
98 --shadow-sm: none;
99 --shadow-md: 0 8px 24px rgba(1, 4, 9, 0.75), 0 0 0 1px #3d444d;
100 --diff-add-bg: rgba(46, 160, 67, 0.15);
101 --diff-add-num: rgba(63, 185, 80, 0.3);
102 --diff-del-bg: rgba(248, 81, 73, 0.1);
103 --diff-del-num: rgba(248, 81, 73, 0.3);
104 --diff-hunk-bg: rgba(56, 139, 253, 0.1);
105 --line-highlight: rgba(187, 128, 9, 0.2);
106 --folder: #4493f8;
107 --tok-comment: #9198a1;
108 --tok-string: #a5d6ff;
109 --tok-number: #79c0ff;
110 --tok-constant: #79c0ff;
111 --tok-keyword: #ff7b72;
112 --tok-function: #d2a8ff;
113 --tok-type: #ffa657;
114 --tok-tag: #7ee787;
115 --tok-attr: #79c0ff;
116 --tok-meta: #d2a8ff;
117 color-scheme: dark;
118 }
119}
120
121/* ---------- Base ---------- */
122
123*, *::before, *::after { box-sizing: border-box; }
124
125html { -webkit-text-size-adjust: 100%; }
126
127body {
128 margin: 0;
129 background: var(--bg);
130 color: var(--text);
131 font-family: var(--font);
132 font-size: 14px;
133 line-height: 1.5;
134 min-height: 100vh;
135 display: flex;
136 flex-direction: column;
137}
138
139a { color: var(--accent); text-decoration: none; }
140a:hover { text-decoration: underline; }
141
142h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
143h1 { font-size: 24px; }
144h2 { font-size: 20px; }
145h3 { font-size: 16px; }
146p { margin: 0 0 12px; }
147
148code, pre, kbd, .text-mono { font-family: var(--mono); }
149code { font-size: 85%; padding: .2em .4em; background: var(--bg-muted); border-radius: 4px; }
150
151button { font: inherit; }
152
153.icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: text-bottom; }
154
155.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
156
157.page { flex: 1; padding: 24px 0 48px; }
158
159.text-muted { color: var(--text-muted); }
160.text-small { font-size: 12px; }
161.text-success { color: var(--success); }
162.text-danger { color: var(--danger); }
163.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
164.dot { color: var(--text-subtle); margin: 0 4px; }
165.push-right { margin-left: auto; }
166[hidden] { display: none !important; }
167
168/* ---------- Header & footer ---------- */
169
170.site-header { background: var(--header-bg); color: var(--header-text); }
171.site-header-inner {
172 max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 60px;
173 display: flex; align-items: center; gap: 20px;
174}
175.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
176.brand:hover { text-decoration: none; color: #fff; }
177.brand-mark { width: 30px; height: 30px; color: #93b4ff; }
178.site-nav { display: flex; gap: 4px; }
179.site-nav a { color: var(--header-text); padding: 6px 10px; border-radius: var(--radius); font-weight: 500; }
180.site-nav a:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
181.site-header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
182.header-link { color: var(--header-text); font-weight: 500; }
183.header-link:hover { color: #fff; }
184.header-button {
185 display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
186 color: var(--header-text); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius); font-weight: 500;
187}
188.header-button:hover { border-color: rgba(255, 255, 255, 0.45); text-decoration: none; color: #fff; }
189.header-avatar { display: inline-flex; align-items: center; gap: 4px; color: var(--header-muted); cursor: pointer; }
190.header-avatar:hover { color: #fff; }
191.header-avatar .icon { width: 14px; height: 14px; }
192
193.site-footer { border-top: 1px solid var(--border-muted); padding: 24px 0 32px; color: var(--text-muted); font-size: 12px; }
194.site-footer .container { display: flex; align-items: center; flex-wrap: wrap; }
195.site-footer a { color: var(--text-muted); }
196
197/* ---------- Buttons ---------- */
198
199.btn {
200 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
201 padding: 5px 14px; min-height: 32px;
202 font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap;
203 color: var(--text); background: var(--btn-bg); border: 1px solid var(--btn-border);
204 border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer; user-select: none;
205 transition: background-color .12s, border-color .12s;
206}
207.btn:hover { background: var(--btn-hover); text-decoration: none; }
208.btn:focus-visible, .input:focus-visible, summary:focus-visible, .clone-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
209.btn.selected { background: var(--bg-muted); border-color: var(--border); font-weight: 600; }
210.btn.disabled, .btn:disabled { color: var(--text-subtle); cursor: default; pointer-events: none; opacity: .7; }
211.btn-sm { padding: 3px 10px; min-height: 28px; font-size: 12px; }
212.btn-lg { padding: 9px 20px; font-size: 16px; }
213.btn-block { display: flex; width: 100%; }
214.btn-icon { padding-left: 7px; padding-right: 7px; }
215.btn-mono { font-family: var(--mono); font-weight: 500; }
216.btn-primary { color: #fff; background: var(--accent); border-color: rgba(0, 0, 0, .12); }
217.btn-primary:hover { background: var(--accent-hover); }
218.btn-success { color: #fff; background: var(--success-emphasis); border-color: rgba(0, 0, 0, .12); }
219.btn-success:hover { background: var(--success-emphasis-hover); }
220.btn-danger { color: var(--danger); }
221.btn-danger:hover { color: #fff; background: var(--danger-emphasis); border-color: var(--danger-emphasis); }
222.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-muted); }
223.btn-ghost:hover { background: var(--bg-muted); color: var(--text); }
224.btn-group { display: inline-flex; }
225.btn-group > .btn { border-radius: 0; }
226.btn-group > .btn + .btn { margin-left: -1px; }
227.btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
228.btn-group > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
229
230/* ---------- Forms ---------- */
231
232.input {
233 display: block; width: 100%; padding: 5px 12px; min-height: 32px;
234 font: inherit; font-size: 14px; line-height: 20px; color: var(--text);
235 background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
236 box-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2);
237}
238.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
239.input::placeholder { color: var(--text-subtle); }
240.input:disabled { background: var(--bg-subtle); color: var(--text-muted); }
241.input-sm { padding: 3px 8px; min-height: 28px; font-size: 13px; }
242.input-mono { font-family: var(--mono); font-size: 13px; }
243textarea.input { resize: vertical; min-height: 80px; }
244select.input { width: auto; padding-right: 28px; }
245.input-static { display: flex; align-items: center; gap: 6px; background: var(--bg-subtle); font-weight: 500; }
246
247.form { display: flex; flex-direction: column; gap: 16px; }
248.field { display: flex; flex-direction: column; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
249.field-label { font-weight: 600; font-size: 14px; }
250.field-hint { font-size: 12px; color: var(--text-muted); }
251.field-row { display: flex; align-items: flex-end; gap: 8px; }
252.field-row-sep { font-size: 20px; color: var(--text-muted); padding-bottom: 2px; }
253.field-grow { flex: 1; }
254.form-actions { display: flex; gap: 8px; align-items: center; }
255.form-actions-end { justify-content: flex-end; }
256.inline-form { display: flex; gap: 8px; margin-top: 12px; }
257.inline-form .input { max-width: 320px; }
258
259.input-group { display: flex; }
260.input-group .input { border-radius: var(--radius) 0 0 var(--radius); min-width: 0; }
261.input-group .btn { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; box-shadow: none; }
262.input-group-label {
263 display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 600;
264 background: var(--bg-subtle); border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
265}
266.input-group-label + .input { border-radius: 0; }
267
268.radio-cards { gap: 8px; }
269.radio-card, .checkbox {
270 display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
271 border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
272}
273.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
274.radio-card input, .checkbox input { margin: 3px 0 0; accent-color: var(--accent); }
275.radio-card .icon { margin-top: 2px; color: var(--text-muted); }
276.radio-card > span, .checkbox > span { display: flex; flex-direction: column; gap: 2px; }
277.radio-card .text-muted, .checkbox .text-muted { font-size: 12px; }
278.checkbox { border-style: dashed; }
279
280/* ---------- Boxes, labels, counters ---------- */
281
282.box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
283.box + .box { margin-top: 16px; }
284.box-header {
285 padding: 12px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border);
286 border-radius: var(--radius) var(--radius) 0 0;
287}
288.box-body { padding: 16px; }
289.box-footer { padding: 12px 16px; background: var(--bg-subtle); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
290.box-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-muted); }
291.box-row:first-child { border-top: 0; }
292.box-row:hover { background: var(--bg-subtle); }
293
294.label {
295 display: inline-flex; align-items: center; padding: 0 7px; height: 20px;
296 font-size: 12px; font-weight: 500; line-height: 18px; color: var(--text-muted);
297 border: 1px solid var(--border); border-radius: 2em; white-space: nowrap; vertical-align: middle;
298}
299.label-added { color: var(--success); border-color: currentColor; }
300.label-deleted { color: var(--danger); border-color: currentColor; }
301.label-renamed, .label-copied { color: var(--merged); border-color: currentColor; }
302
303.counter {
304 display: inline-block; min-width: 20px; padding: 0 6px; font-size: 12px; font-weight: 500; line-height: 18px;
305 text-align: center; color: var(--text); background: var(--bg-muted); border-radius: 2em;
306}
307
308.branch-label {
309 display: inline-block; padding: 0 6px; font-family: var(--mono); font-size: 12px; line-height: 20px;
310 color: var(--accent); background: var(--accent-subtle); border-radius: var(--radius); max-width: 100%;
311 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
312}
313
314.avatar {
315 display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
316 border-radius: 50%; color: #fff; font-weight: 600; line-height: 1; vertical-align: middle;
317 background: hsl(var(--hue) 52% 46%); user-select: none;
318}
319
320.flash {
321 display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
322 border: 1px solid var(--accent-border); background: var(--accent-subtle); border-radius: var(--radius);
323}
324.flash .icon { margin-top: 2px; color: var(--accent); }
325.flash-success { border-color: var(--success-border); background: var(--success-subtle); }
326.flash-success .icon { color: var(--success); }
327.flash-error { border-color: var(--danger-border); background: var(--danger-subtle); }
328.flash-error .icon { color: var(--danger); }
329
330.banner {
331 display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
332 padding: 10px 16px; margin-bottom: 16px; background: var(--attention-subtle);
333 border: 1px solid var(--attention-border); border-radius: var(--radius);
334}
335.banner .icon { color: var(--text-muted); }
336
337.blankslate { padding: 48px 24px; text-align: center; color: var(--text-muted); }
338.blankslate > .icon { width: 28px; height: 28px; margin-bottom: 12px; color: var(--text-subtle); }
339.blankslate h3 { color: var(--text); margin-bottom: 6px; font-size: 18px; }
340.blankslate p { max-width: 520px; margin: 0 auto 12px; }
341.blankslate-sm { padding: 28px 16px; }
342.blankslate-sm h3 { font-size: 16px; }
343.blankslate-page { padding: 96px 24px; }
344.blankslate-page h1 { color: var(--text); margin-bottom: 8px; }
345.blankslate-code { font-size: 64px; font-weight: 700; color: var(--border); line-height: 1; margin-bottom: 16px; letter-spacing: -0.04em; }
346.blankslate-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
347
348.command {
349 margin: 8px 0 16px; padding: 12px 16px; font-size: 12px; line-height: 1.6;
350 background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: var(--radius);
351 overflow-x: auto; white-space: pre;
352}
353.command-sm { padding: 8px 10px; font-size: 11px; margin: 0; }
354
355.hint { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
356
357/* ---------- Dropdowns ---------- */
358
359.dropdown { position: relative; display: inline-block; }
360.dropdown > summary { list-style: none; }
361.dropdown > summary::-webkit-details-marker { display: none; }
362.dropdown-menu {
363 position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px;
364 padding: 6px 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
365 box-shadow: var(--shadow-md); color: var(--text);
366}
367.dropdown-right .dropdown-menu { left: auto; right: 0; }
368.dropdown-wide { width: 320px; }
369.dropdown-header { padding: 6px 14px 8px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border-muted); margin-bottom: 6px; }
370.dropdown-header strong { color: var(--text); }
371.dropdown-section { padding: 8px 14px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
372.dropdown-item {
373 display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 14px;
374 color: var(--text); background: none; border: 0; text-align: left; cursor: pointer; font-size: 14px;
375}
376.dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
377.dropdown-item .icon { color: var(--text-muted); }
378.dropdown-item.selected { font-weight: 600; }
379.dropdown-divider { height: 1px; margin: 6px 0; background: var(--border-muted); }
380.dropdown-filter { padding: 0 10px 6px; }
381.dropdown-scroll { max-height: 320px; overflow-y: auto; }
382.icon-spacer { display: inline-block; width: 16px; flex-shrink: 0; }
383
384/* ---------- Page headings ---------- */
385
386.page-header { margin-bottom: 24px; }
387.page-header h1 { margin-bottom: 4px; }
388.page-subheader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
389.page-subheader h2 { font-size: 20px; }
390.page-subheader-stacked { flex-direction: column; align-items: flex-start; gap: 4px; }
391.page-subheader-stacked p { margin: 0; }
392.section { margin-top: 32px; }
393.section:first-child { margin-top: 0; }
394.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
395.section-header h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
396.section-header a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
397.narrow { max-width: 680px; margin: 0 auto; }
398.narrow-wide { max-width: 860px; }
399
400/* ---------- Landing & lists ---------- */
401
402.hero { padding: 56px 0 40px; max-width: 720px; }
403.hero h1 { font-size: 44px; letter-spacing: -0.03em; margin-bottom: 16px; }
404.hero-lead { font-size: 18px; color: var(--text-muted); margin-bottom: 24px; }
405.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
406
407.repo-list { list-style: none; margin: 0; padding: 0; }
408.repo-item { padding: 16px; border-top: 1px solid var(--border-muted); }
409.repo-item:first-child { border-top: 0; }
410.repo-item h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
411.repo-item h3 a { font-weight: 600; }
412.repo-item h3 .text-muted { font-weight: 400; }
413.repo-item-desc { margin: 6px 0 0; color: var(--text-muted); }
414.repo-item-meta { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
415
416.issue-row { align-items: flex-start; }
417.issue-icon { padding-top: 2px; }
418.issue-main { flex: 1; min-width: 0; }
419.issue-title { color: var(--text); font-weight: 600; font-size: 15px; margin-right: 6px; }
420.issue-title:hover { color: var(--accent); }
421.issue-meta { margin-top: 4px; font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
422.issue-comments { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 12px; }
423.branch-pair { display: inline-flex; align-items: center; gap: 4px; }
424.state-color-open { color: var(--success); }
425.state-color-closed { color: var(--danger); }
426.state-color-merged { color: var(--merged); }
427
428/* ---------- Dashboard & profile ---------- */
429
430.layout-dashboard { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
431.sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
432.sidebar-header h2 { font-size: 14px; }
433.sidebar-repos { list-style: none; padding: 0; margin: 0; }
434.sidebar-repos a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; color: var(--text); border-radius: var(--radius); }
435.sidebar-repos a:hover { background: var(--bg-hover); text-decoration: none; }
436.sidebar-repos .icon { color: var(--text-muted); }
437.welcome-box { margin-bottom: 32px; background: linear-gradient(135deg, var(--accent-subtle), var(--bg) 60%); }
438.welcome-box h2 { margin-bottom: 4px; }
439.steps { margin: 12px 0 0; padding-left: 20px; }
440.steps li { margin: 6px 0; }
441
442.layout-profile { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
443.profile-card .avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; max-width: 260px; font-size: 96px !important; margin-bottom: 16px; }
444.profile-name { font-size: 24px; }
445.profile-login { font-size: 20px; font-weight: 300; color: var(--text-muted); }
446.profile-bio { margin: 12px 0; }
447.profile-card .btn-block { margin: 16px 0; }
448.profile-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--text-muted); font-size: 13px; }
449
450/* ---------- Auth ---------- */
451
452.auth-page .container { display: flex; justify-content: center; }
453.auth-card { width: 100%; max-width: 380px; padding-top: 32px; }
454.auth-card h1 { font-size: 24px; font-weight: 400; text-align: center; margin-bottom: 20px; letter-spacing: -0.01em; }
455.auth-card .box-body { background: var(--bg-subtle); }
456.auth-alt { margin-top: 16px; padding: 16px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); }
457
458/* ---------- Settings ---------- */
459
460.settings-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
461.settings-header h1 { font-size: 20px; }
462.layout-settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
463.side-nav { display: flex; flex-direction: column; gap: 2px; }
464.side-nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--text); border-radius: var(--radius); position: relative; }
465.side-nav-item .icon { color: var(--text-muted); }
466.side-nav-item:hover { background: var(--bg-hover); text-decoration: none; }
467.side-nav-item.selected { background: var(--bg-muted); font-weight: 600; }
468.side-nav-item.selected::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--accent); }
469.settings-main { max-width: 760px; }
470.settings-section { margin-bottom: 40px; }
471.settings-title { font-size: 20px; font-weight: 400; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border-muted); }
472.key-row { align-items: flex-start; }
473.key-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 8px; color: var(--text-muted); }
474.key-icon .icon { width: 28px; height: 28px; }
475.key-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
476.key-fingerprint { display: block; padding: 0; background: none; color: var(--text-muted); font-size: 12px; word-break: break-all; }
477.help-box p { margin-bottom: 4px; }
478.help-box p + .input-group { margin-top: 4px; }
479.collaborator-row { gap: 10px; }
480.danger-zone { border-color: var(--danger); }
481.danger-zone h3 { margin-bottom: 4px; font-size: 15px; }
482
483/* ---------- Repository header ---------- */
484
485.repo-page { padding-top: 24px; }
486.repo-header { background: var(--bg-subtle); border-bottom: 1px solid var(--border); padding-top: 20px; }
487.repo-title { display: flex; align-items: center; gap: 6px; font-size: 20px; flex-wrap: wrap; margin-bottom: 16px; }
488.repo-icon { display: inline-flex; color: var(--text-muted); }
489.repo-owner { font-weight: 400; }
490.repo-sep { color: var(--text-muted); }
491.repo-name { font-weight: 600; }
492.repo-title .label { margin-left: 4px; }
493.repo-description { font-size: 16px; color: var(--text-muted); }
494
495.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 0; }
496.tabs::-webkit-scrollbar { display: none; }
497.tab {
498 display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 10px;
499 color: var(--text); white-space: nowrap; border-bottom: 2px solid transparent; position: relative;
500}
501.tab .icon { color: var(--text-muted); }
502.tab:hover { text-decoration: none; }
503.tab:hover::after { content: ""; position: absolute; inset: 4px 0 6px; background: var(--bg-hover); border-radius: var(--radius); z-index: -1; }
504.tab.selected { font-weight: 600; border-bottom-color: var(--accent); }
505.tab.selected .icon { color: var(--text); }
506.tabs-sub { border-bottom: 1px solid var(--border); margin-bottom: 24px; align-items: center; }
507.tabs-extra { margin-left: auto; font-family: var(--mono); font-size: 12px; padding-left: 12px; white-space: nowrap; }
508
509/* ---------- Code browser ---------- */
510
511.layout-repo { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 24px; }
512.layout-full { display: block; }
513.code-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
514.toolbar-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; }
515.toolbar-link strong { color: var(--text); }
516.toolbar-link:hover { color: var(--accent); text-decoration: none; }
517.toolbar-link:hover strong { color: var(--accent); }
518.toolbar-spacer { flex: 1; }
519.toolbar-text { color: var(--text-muted); }
520
521.ref-selector .ref-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
522.ref-selector summary .icon:first-child { color: var(--text-muted); }
523
524.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 16px; min-width: 0; word-break: break-all; }
525.crumb-sep { color: var(--text-muted); margin: 0 4px; }
526
527.latest-commit { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
528.latest-author { white-space: nowrap; }
529.latest-message { color: var(--text-muted); flex: 1; }
530.latest-message:hover { color: var(--accent); }
531.latest-meta { display: inline-flex; align-items: center; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
532.history-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 13px; white-space: nowrap; margin-left: 8px; }
533.history-link .icon { color: var(--text-muted); }
534.latest-commit-box { margin-bottom: 16px; }
535.latest-commit-box .box-header { border-bottom: 0; border-radius: var(--radius); }
536
537.files { width: 100%; border-collapse: collapse; table-layout: fixed; }
538.files td { padding: 8px 16px; border-top: 1px solid var(--border-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
539.files tr:first-child td { border-top: 0; }
540.files tr:hover td { background: var(--bg-subtle); }
541.file-icon { width: 44px; padding-right: 0 !important; color: var(--text-muted); }
542.file-icon.is-dir { color: var(--folder); }
543.file-icon.is-dir .icon { fill: currentColor; fill-opacity: .25; }
544.file-name { width: 32%; }
545.file-name a { color: var(--text); }
546.file-name a:hover { color: var(--accent); }
547.file-message a { color: var(--text-muted); }
548.file-message a:hover { color: var(--accent); }
549.file-age { width: 130px; text-align: right; color: var(--text-muted); }
550
551.readme { margin-top: 24px; }
552.readme-header { display: flex; align-items: center; gap: 8px; background: var(--bg); position: sticky; top: 0; z-index: 2; }
553.readme-header .icon { color: var(--text-muted); }
554.readme .markdown-body { padding: 24px 32px 32px; }
555.readme-plain { margin: 0; padding: 16px; white-space: pre-wrap; font-size: 13px; }
556
557.repo-sidebar h2 { font-size: 16px; margin-bottom: 12px; }
558.about-description { font-size: 15px; }
559.about-list { list-style: none; padding: 0; margin: 0 0 16px; }
560.about-list li { margin: 8px 0; }
561.about-list a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
562.about-list a:hover { color: var(--accent); text-decoration: none; }
563.repo-sidebar > a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
564
565.clone-dropdown .dropdown-menu { padding: 0 0 6px; }
566.clone-dropdown .dropdown-divider { margin-top: 0; }
567.clone-panel { padding: 12px 16px 14px; }
568.clone-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border-muted); margin: 0 -16px 12px; padding: 0 16px; }
569.clone-tab { padding: 4px 0 8px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; font-weight: 600; font-size: 13px; }
570.clone-tab.selected { color: var(--text); border-bottom-color: var(--accent); }
571
572.quick-setup .box-header { display: flex; flex-direction: column; gap: 2px; }
573.quick-setup .box-header h2 { font-size: 16px; }
574.quick-setup h3 { font-size: 14px; margin: 24px 0 8px; }
575
576/* ---------- File view ---------- */
577
578.blob-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; }
579.blob-info { display: flex; align-items: center; color: var(--text-muted); font-size: 12px; font-family: var(--mono); }
580.blob-actions { display: flex; align-items: center; gap: 8px; }
581.blob-box .markdown-body { padding: 24px 32px 32px; }
582.blob-image { padding: 24px; text-align: center; background-image: conic-gradient(var(--bg-subtle) 25%, var(--bg) 0 50%, var(--bg-subtle) 0 75%, var(--bg) 0); background-size: 16px 16px; }
583.blob-image img { max-width: 100%; }
584.blob-note { padding: 40px 16px; text-align: center; color: var(--text-muted); }
585
586.code-scroll, .diff-scroll { overflow-x: auto; }
587.code-view, .diff-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; line-height: 20px; tab-size: 4; }
588.code-view td, .diff-table td { padding: 0 10px; vertical-align: top; }
589.code-view .num, .diff-table .num {
590 width: 1%; min-width: 50px; text-align: right; color: var(--text-subtle); user-select: none; white-space: nowrap;
591}
592.code-view .num a { color: inherit; display: block; }
593.code-view .num a:hover { color: var(--text); text-decoration: none; }
594.code-view .code, .diff-table .code { white-space: pre; color: var(--text); }
595.code-view tr:first-child td { padding-top: 8px; }
596.code-view tr:last-child td { padding-bottom: 8px; }
597.code-view tr.highlighted td { background: var(--line-highlight); }
598
599/* ---------- Commits ---------- */
600
601.commit-group { margin-bottom: 24px; }
602.commit-group-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; }
603.commit-row { justify-content: space-between; }
604.commit-main { min-width: 0; flex: 1; }
605.commit-title { color: var(--text); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
606.commit-title:hover { color: var(--accent); }
607.commit-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
608.commit-meta strong { color: var(--text); font-weight: 600; }
609.commit-actions { display: flex; align-items: center; gap: 4px; }
610.commit-row-compact { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
611.commit-row-compact .commit-title { flex: 1; font-weight: 400; }
612.commit-row-author { white-space: nowrap; }
613.pagination { display: flex; justify-content: center; gap: 0; margin-top: 16px; }
614.pagination .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
615.pagination .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
616
617.commit-header { margin-bottom: 24px; }
618.commit-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
619.commit-summary { font-size: 20px; word-break: break-word; }
620.commit-body { margin: 12px 0 0; white-space: pre-wrap; font-size: 13px; color: var(--text-muted); }
621.commit-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
622.commit-author { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-muted); }
623.commit-author strong { color: var(--text); }
624.commit-ids { display: flex; gap: 16px; color: var(--text-muted); flex-wrap: wrap; align-items: center; }
625.commit-ids > span { display: inline-flex; align-items: center; gap: 4px; }
626.commit-ids .text-mono { color: var(--text); font-size: 12px; }
627
628/* ---------- Diffs ---------- */
629
630.diff-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
631.diff-mini-stat { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
632.diff-file { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
633.diff-file-header {
634 display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; position: sticky; top: 0; z-index: 3;
635 background: var(--bg-subtle); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
636}
637.diff-file.collapsed .diff-file-header { border-bottom: 0; border-radius: var(--radius); }
638.diff-file.collapsed .diff-body { display: none; }
639.diff-file.collapsed .diff-toggle .icon { transform: rotate(-90deg); }
640.diff-toggle { display: inline-flex; padding: 4px; background: none; border: 0; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; }
641.diff-toggle:hover { background: var(--bg-muted); color: var(--text); }
642.diff-counts { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
643.diff-blocks { display: inline-flex; gap: 1px; }
644.block { width: 8px; height: 8px; border-radius: 1px; background: var(--border); }
645.block-add { background: var(--success-emphasis); }
646.block-del { background: var(--danger-emphasis); }
647.diff-path { font-family: var(--mono); font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
648.diff-body { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
649.diff-note { padding: 24px 16px; text-align: center; color: var(--text-muted); }
650.diff-table .num { min-width: 44px; }
651.diff-table .num + .num { border-right: 1px solid var(--border-muted); }
652.diff-line.add td { background: var(--diff-add-bg); }
653.diff-line.add .num { background: var(--diff-add-num); }
654.diff-line.del td { background: var(--diff-del-bg); }
655.diff-line.del .num { background: var(--diff-del-num); }
656.diff-line .marker { display: inline-block; width: 14px; margin-left: -4px; color: var(--text-muted); user-select: none; }
657.diff-hunk td { background: var(--diff-hunk-bg); color: var(--text-muted); padding-top: 4px; padding-bottom: 4px; }
658.diff-hunk .code { color: var(--text-muted); }
659
660/* ---------- Branches & tags ---------- */
661
662.branch-row { gap: 16px; }
663.branch-main { flex: 1; min-width: 0; }
664.branch-name { font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 2px 6px; background: var(--accent-subtle); border-radius: var(--radius); margin-right: 6px; }
665.branch-meta { margin-top: 6px; color: var(--text-muted); font-size: 12px; }
666.branch-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; width: 200px; flex-shrink: 0; }
667.branch-header { background: var(--bg-subtle); border-radius: var(--radius) var(--radius) 0 0; font-size: 12px; font-weight: 600; color: var(--text-muted); padding-top: 8px; padding-bottom: 8px; }
668.branch-header:hover { background: var(--bg-subtle); }
669.branch-actions form { margin: 0; }
670.ahead-behind { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; width: 90px; font-size: 12px; color: var(--text-muted); }
671.ab-behind { text-align: right; padding-right: 6px; }
672.ab-ahead { padding-left: 6px; }
673.ab-divider { height: 16px; background: var(--border); }
674.tag-row { align-items: flex-start; }
675.tag-main { flex: 1; min-width: 0; }
676.tag-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--text); }
677.tag-message { margin: 4px 0; color: var(--text-muted); white-space: pre-wrap; }
678
679/* ---------- Compare & pull requests ---------- */
680
681.compare-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px; background: var(--bg-subtle); }
682.compare-icon { color: var(--text-muted); display: inline-flex; }
683.compare-select { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
684.compare-select select { max-width: 220px; }
685.compare-arrow { color: var(--text-muted); }
686.merge-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
687.compare-commits { margin-bottom: 24px; }
688.compare-summary { display: flex; gap: 32px; justify-content: center; padding: 12px; margin: 16px 0; color: var(--text-muted); background: var(--bg-subtle); }
689.compare-summary span { display: inline-flex; align-items: center; gap: 6px; }
690.compare-summary strong { color: var(--text); }
691.new-pull { margin-bottom: 16px; }
692.new-pull-body { display: flex; gap: 16px; padding: 16px; }
693.new-pull-fields { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
694.new-pull-fields .form-actions { justify-content: flex-end; }
695
696.pull-header { margin-bottom: 16px; }
697.pull-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
698.pull-title { font-size: 28px; font-weight: 400; word-break: break-word; letter-spacing: -0.01em; }
699.pull-title .text-muted { font-weight: 300; }
700.edit-pull { margin-top: 12px; }
701.pull-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--text-muted); flex-wrap: wrap; }
702.pull-meta strong { color: var(--text); }
703.state {
704 display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 2em;
705 font-weight: 500; color: #fff; white-space: nowrap;
706}
707.state-open { background: var(--success-emphasis); }
708.state-closed { background: var(--danger-emphasis); }
709.state-merged { background: var(--merged); }
710
711.layout-pull { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 32px; }
712.timeline { position: relative; z-index: 0; display: flex; flex-direction: column; gap: 0; }
713.timeline-comment { display: flex; gap: 16px; position: relative; padding-bottom: 20px; }
714.timeline-comment:not(.comment-form-row)::before {
715 content: ""; position: absolute; left: 76px; top: 0; bottom: 0; width: 2px; background: var(--border-muted); z-index: -1;
716}
717.timeline-avatar { flex-shrink: 0; width: 40px; }
718.comment { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); position: relative; }
719.comment::before {
720 content: ""; position: absolute; top: 12px; left: -8px; width: 14px; height: 14px; background: var(--bg-subtle);
721 border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg);
722}
723.comment-header {
724 display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-subtle);
725 border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; position: relative;
726}
727.comment-role { margin-left: auto; }
728.comment-body { padding: 16px; }
729.comment-form-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
730.timeline-event { display: flex; align-items: center; gap: 12px; padding: 0 0 20px 60px; color: var(--text-muted); position: relative; }
731.timeline-event::before { content: ""; position: absolute; left: 76px; top: 0; bottom: 0; width: 2px; background: var(--border-muted); z-index: -1; }
732.timeline-event strong { color: var(--text); }
733.event-badge {
734 display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
735 border-radius: 50%; background: var(--bg-muted); color: var(--text-muted); border: 2px solid var(--bg);
736}
737.badge-merged { background: var(--merged); color: #fff; }
738.badge-closed { background: var(--danger-emphasis); color: #fff; }
739.badge-open { background: var(--success-emphasis); color: #fff; }
740
741.merge-section { padding-top: 4px; }
742.merge-avatar {
743 width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
744 color: #fff; background: var(--text-subtle);
745}
746.merge-avatar.state-open { background: var(--success-emphasis); }
747.merge-avatar.state-merged { background: var(--merged); }
748.merge-avatar.state-closed { background: var(--danger-emphasis); }
749.merge-avatar .icon { width: 20px; height: 20px; }
750.merge-box { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg); }
751.merge-box-ready { border-color: var(--success-emphasis); }
752.merge-box-merged { border-color: var(--merged); }
753.merge-status { display: flex; align-items: center; gap: 12px; }
754.merge-status > div { flex: 1; }
755.merge-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; flex-shrink: 0; }
756.status-success { background: var(--success-emphasis); }
757.status-danger { background: var(--danger-emphasis); }
758.status-neutral { background: var(--text-subtle); }
759.merge-form { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-muted); flex-wrap: wrap; }
760.merge-note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border-muted); }
761.merge-instructions { margin-bottom: 0; }
762.reopen-form { display: flex; justify-content: flex-end; margin-top: -8px; }
763
764.pull-sidebar { font-size: 13px; }
765.sidebar-item { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-muted); }
766.sidebar-item h3 { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
767.sidebar-item p { margin: 0; }
768
769/* ---------- Markdown ---------- */
770
771.markdown-body { font-size: 15px; line-height: 1.6; word-wrap: break-word; }
772.markdown-body > *:first-child { margin-top: 0 !important; }
773.markdown-body > *:last-child { margin-bottom: 0 !important; }
774.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body table, .markdown-body details { margin: 0 0 16px; }
775.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 24px 0 16px; font-weight: 600; line-height: 1.25; }
776.markdown-body h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border-muted); }
777.markdown-body h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border-muted); }
778.markdown-body h3 { font-size: 1.25em; }
779.markdown-body h4 { font-size: 1em; }
780.markdown-body ul, .markdown-body ol { padding-left: 2em; }
781.markdown-body li + li { margin-top: .25em; }
782.markdown-body li > ul, .markdown-body li > ol { margin: .25em 0 0; }
783.markdown-body blockquote { padding: 0 1em; color: var(--text-muted); border-left: .25em solid var(--border); }
784.markdown-body code { font-size: 85%; }
785.markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background: var(--bg-subtle); border-radius: var(--radius); }
786.markdown-body pre code { padding: 0; background: none; font-size: 100%; white-space: pre; }
787.markdown-body table { border-collapse: collapse; display: block; width: max-content; max-width: 100%; overflow: auto; }
788.markdown-body th, .markdown-body td { padding: 6px 13px; border: 1px solid var(--border); }
789.markdown-body th { font-weight: 600; background: var(--bg-subtle); }
790.markdown-body tr:nth-child(2n) td { background: var(--bg-subtle); }
791.markdown-body img { max-width: 100%; box-sizing: content-box; }
792.markdown-body hr { height: 4px; margin: 24px 0; background: var(--border-muted); border: 0; border-radius: 2px; }
793.markdown-body input[type="checkbox"] { margin: 0 .35em 0 -1.4em; vertical-align: middle; }
794.markdown-body li:has(> input[type="checkbox"]) { list-style: none; }
795.markdown-body a { text-decoration: underline; text-underline-offset: .2em; }
796
797/* ---------- Syntax tokens ---------- */
798
799.tok-c { color: var(--tok-comment); font-style: italic; }
800.tok-s, .tok-sr { color: var(--tok-string); }
801.tok-e { color: var(--tok-string); font-weight: 600; }
802.tok-n { color: var(--tok-number); }
803.tok-kc { color: var(--tok-constant); }
804.tok-k, .tok-o { color: var(--tok-keyword); }
805.tok-f { color: var(--tok-function); }
806.tok-t, .tok-v { color: var(--tok-type); }
807.tok-tag { color: var(--tok-tag); }
808.tok-attr { color: var(--tok-attr); }
809.tok-h { color: var(--tok-constant); font-weight: 600; }
810.tok-m { color: var(--tok-meta); }
811.tok-b { font-weight: 600; }
812.tok-i { font-style: italic; }
813.tok-ins { color: var(--success); }
814.tok-del { color: var(--danger); }
815.tok-link { color: var(--accent); text-decoration: underline; }
816
817/* ---------- Responsive ---------- */
818
819@media (max-width: 1012px) {
820 .layout-repo, .layout-pull { grid-template-columns: minmax(0, 1fr); }
821 .repo-sidebar { order: -1; padding-bottom: 16px; border-bottom: 1px solid var(--border-muted); }
822 .repo-sidebar .about-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
823 .repo-sidebar .about-list li { margin: 0; }
824 .pull-sidebar { display: none; }
825}
826
827@media (max-width: 768px) {
828 .container, .site-header-inner { padding-left: 16px; padding-right: 16px; }
829 .site-header-inner { gap: 12px; }
830 .hide-sm { display: none; }
831 .header-button { padding: 5px 8px; }
832 .layout-dashboard, .layout-profile, .layout-settings { grid-template-columns: minmax(0, 1fr); gap: 24px; }
833 .profile-card { display: grid; grid-template-columns: 72px 1fr; gap: 0 16px; align-items: center; }
834 .profile-card .avatar { width: 72px !important; height: 72px !important; font-size: 32px !important; margin: 0; grid-row: span 2; }
835 .profile-card .profile-bio, .profile-card .btn-block, .profile-card .profile-meta { grid-column: 1 / -1; }
836 .side-nav { flex-direction: row; overflow-x: auto; }
837 .side-nav-item.selected::before { display: none; }
838 .hero h1 { font-size: 32px; }
839 .file-message { display: none; }
840 .files td { padding: 8px 10px; }
841 .file-icon { width: 36px; }
842 .file-name { width: auto; }
843 .file-age { width: 120px; }
844 .branch-actions { width: auto; }
845 .latest-message, .latest-meta .dot, .latest-meta time { display: none; }
846 .latest-author { flex: 1; }
847 .readme .markdown-body, .blob-box .markdown-body { padding: 16px; }
848 .timeline-comment:not(.comment-form-row)::before, .timeline-event::before { left: 20px; }
849 .timeline-avatar { display: none; }
850 .timeline-comment:not(.comment-form-row)::before { display: none; }
851 .comment::before { display: none; }
852 .timeline-event { padding-left: 4px; }
853 .merge-section .timeline-avatar { display: none; }
854 .branch-row { flex-wrap: wrap; }
855 .ahead-behind { display: none; }
856 .commit-header-top { flex-direction: column; }
857 .new-pull-body > .avatar { display: none; }
858 .pull-title { font-size: 22px; }
859 .dropdown-wide { width: min(320px, calc(100vw - 32px)); }
860 .compare-select select { max-width: 160px; }
861 .inline-form { flex-direction: column; }
862 .inline-form .input { max-width: none; }
863 .field-row { flex-direction: column; align-items: stretch; }
864 .field-row-sep { display: none; }
865}