aboutsummaryrefslogtreecommitdiff
path: root/www/cgit.css
diff options
context:
space:
mode:
Diffstat (limited to 'www/cgit.css')
-rw-r--r--www/cgit.css463
1 files changed, 463 insertions, 0 deletions
diff --git a/www/cgit.css b/www/cgit.css
new file mode 100644
index 0000000..4baa89d
--- /dev/null
+++ b/www/cgit.css
@@ -0,0 +1,463 @@
1/* 1. Import color scheme, highlighting and markdown styles */
2@import url("static/colors.css");
3@import url("static/hl.css");
4@import url("static/md.css");
5
6/* 2. Global Reset & Body */
7* {
8 box-sizing: border-box;
9}
10
11body {
12 font-family: sans-serif;
13 font-size: 14px;
14 line-height: 1.5;
15 color: var(--color-on-background);
16 background: var(--color-background);
17 margin: 0;
18 padding: 0;
19
20 -webkit-text-size-adjust: 100%;
21 -moz-text-size-adjust: 100%;
22 text-size-adjust: 100%;
23}
24
25a {
26 color: var(--color-primary);
27 text-decoration: none;
28 transition: opacity 0.2s;
29}
30
31a:hover {
32 text-decoration: underline;
33 opacity: 0.8;
34}
35
36div#cgit {
37 padding: 0;
38 margin: 0 auto;
39 max-width: 1200px;
40 background: var(--color-background);
41 min-height: 100vh;
42 display: flex;
43 flex-direction: column;
44}
45
46/* 3. Header Area */
47div#cgit table#header {
48 width: 100%;
49 margin-bottom: 0;
50 background-color: var(--color-surface-container);
51 color: var(--color-on-surface);
52 padding: 1rem;
53 /* Transform table to flex for responsiveness */
54 display: flex;
55 flex-wrap: wrap;
56 align-items: center;
57 border-bottom: 1px solid var(--color-outline-variant);
58}
59
60/* Fix for table structure within header */
61div#cgit table#header tbody,
62div#cgit table#header tr {
63 display: contents;
64}
65
66div#cgit table#header td.logo {
67 display: block;
68 padding-right: 1rem;
69}
70
71div#cgit table#header td.main {
72 font-size: 1.5rem;
73 font-weight: bold;
74 color: var(--color-on-surface);
75 display: block;
76 flex-grow: 1;
77}
78
79div#cgit table#header td.main a {
80 color: var(--color-on-surface);
81}
82
83div#cgit table#header td.form {
84 display: block;
85 text-align: right;
86 margin-top: 0.5rem;
87}
88
89div#cgit table#header td.sub {
90 display: block;
91 width: 100%;
92 padding-top: 0.25rem;
93 color: var(--color-outline);
94 font-size: 0.9rem;
95 border-top: none; /* Removing legacy border */
96}
97
98/* Input Elements */
99select,
100input,
101textarea {
102 background-color: var(--color-surface-container-high);
103 color: var(--color-on-surface);
104 border: 1px solid var(--color-outline);
105 border-radius: 4px;
106 padding: 4px 8px;
107 font-family: inherit;
108}
109
110input[type="submit"] {
111 background-color: var(--color-primary);
112 color: var(--color-on-primary);
113 border: none;
114 cursor: pointer;
115 font-weight: 500;
116 padding: 5px 12px;
117}
118
119input[type="submit"]:hover {
120 background-color: var(--color-primary-fixed-dim);
121}
122
123/* 4. Tabs Navigation */
124div#cgit table.tabs {
125 border-bottom: 1px solid var(--color-outline-variant);
126 border-collapse: collapse;
127 margin: 0;
128 width: 100%;
129 background-color: var(--color-surface);
130 display: flex; /* Modern layout */
131 flex-wrap: wrap;
132 padding: 0 1rem;
133}
134
135div#cgit table.tabs tbody,
136div#cgit table.tabs tr {
137 display: contents;
138}
139
140div#cgit table.tabs td {
141 display: block;
142 padding: 0;
143}
144
145div#cgit table.tabs td a {
146 display: inline-block;
147 padding: 0.75rem 1rem;
148 color: var(--color-on-surface-variant);
149 font-weight: 500;
150 border-bottom: 2px solid transparent;
151}
152
153div#cgit table.tabs td a.active {
154 color: var(--color-primary);
155 border-bottom: 2px solid var(--color-primary);
156 background-color: var(--color-surface-container-low);
157}
158
159div#cgit table.tabs td a:hover {
160 background-color: var(--color-surface-container-high);
161 text-decoration: none;
162}
163
164div#cgit table.tabs td.form {
165 flex-grow: 1;
166 text-align: right;
167 padding: 0.5rem 0;
168 display: flex;
169 justify-content: flex-end;
170 align-items: center;
171}
172
173div#cgit a.button {
174 display: inline-block;
175 padding: 3px 6px;
176 margin: 0 4px;
177 background-color: var(--color-secondary-container);
178 color: var(--color-on-secondary-container);
179 border-radius: 5px;
180 font-size: 0.85rem;
181 font-weight: 500;
182 text-decoration: none;
183 transition:
184 background-color 0.2s,
185 color 0.2s,
186 box-shadow 0.2s;
187}
188
189div#cgit a.button:hover {
190 background-color: var(--color-primary);
191 color: var(--color-on-primary);
192 text-decoration: none;
193 opacity: 1;
194 box-shadow: 0 2px 4px var(--color-shadow);
195}
196
197/* 5. Content Area */
198div#cgit div.content {
199 padding: 1.5rem;
200 flex-grow: 1;
201}
202
203div#cgit div.path {
204 margin: 0;
205 padding: 0.5rem 1.5rem;
206 background-color: var(--color-surface-container-low);
207 color: var(--color-on-surface);
208 border-bottom: 1px solid var(--color-outline-variant);
209 font-family: monospace;
210}
211
212/* 6. Lists and Tables */
213div#cgit table.list {
214 width: 100%;
215 border: none;
216 border-collapse: collapse;
217 margin-bottom: 1rem;
218 font-size: 0.95rem;
219}
220
221div#cgit table.list tr {
222 background: var(--color-surface);
223 border-bottom: 1px solid var(--color-surface-container-high);
224}
225
226div#cgit table.list tr:nth-child(even) {
227 background: var(--color-surface-container-lowest);
228}
229
230div#cgit table.list tr:hover {
231 background: var(--color-surface-container-high);
232}
233
234div#cgit table.list th {
235 text-align: left;
236 font-weight: 600;
237 color: var(--color-primary);
238 padding: 0.75rem 0.5rem;
239 border-bottom: 2px solid var(--color-outline-variant);
240}
241
242div#cgit table.list td {
243 padding: 0.75rem 0.5rem;
244 vertical-align: middle;
245}
246
247/* Commit Graph columns */
248div#cgit table.list td.commitgraph {
249 font-family: monospace;
250 white-space: pre;
251 color: var(--color-on-surface);
252}
253
254/* 7. Diffs and Code */
255div#cgit table.blob,
256div#cgit table.diff,
257div#cgit table.ssdiff {
258 width: 100%;
259 border: 1px solid var(--color-outline-variant);
260 border-radius: 4px;
261 overflow: hidden;
262 margin-top: 1rem;
263 background: var(--color-surface-container-lowest);
264}
265
266div#cgit table.blob td.linenumbers,
267div#cgit table.ssdiff td.lineno {
268 border-right: 1px solid var(--color-outline-variant);
269 background: var(--color-surface-container-high);
270 text-align: right;
271 padding: 0 0.5em;
272}
273
274div#cgit table.blob td.linenumbers a,
275div#cgit table.ssdiff td.lineno a {
276 display: inline-block;
277 width: 100%;
278 text-decoration: none;
279 color: var(--color-outline);
280 padding: 0;
281}
282
283div#cgit table.blob pre,
284div#cgit table.diff td,
285div#cgit table.ssdiff td {
286 font-family: monospace;
287 font-size: 0.9em;
288 padding: 0 0.5em;
289 margin: 0;
290 color: var(--color-on-surface);
291}
292
293/* Diff coloring */
294div#cgit table.diff td div.add,
295div#cgit table.ssdiff td.add {
296 background-color: var(--diff-add-bg);
297 color: var(--diff-add-fg);
298}
299
300div#cgit table.diff td div.del,
301div#cgit table.ssdiff td.del {
302 background-color: var(--diff-del-bg);
303 color: var(--diff-del-fg);
304}
305
306div#cgit table.diff td div.hunk,
307div#cgit table.ssdiff td.hunk {
308 background-color: var(--color-surface-variant);
309 color: var(--color-on-surface-variant);
310 padding: 0.25em 0.5em;
311}
312
313/* 8. Decorations (Tags, Branches) */
314div#cgit a.branch-deco,
315div#cgit a.tag-deco,
316div#cgit a.tag-annotated-deco,
317div#cgit a.remote-deco,
318div#cgit a.deco {
319 display: inline-block;
320 padding: 2px 6px;
321 border-radius: 4px;
322 font-size: 0.8em;
323 margin-left: 0.5em;
324 border: none;
325}
326
327div#cgit a.branch-deco {
328 background-color: var(--color-primary-container);
329 color: var(--color-on-primary-container);
330}
331
332div#cgit a.tag-deco {
333 background-color: var(--color-tertiary-container);
334 color: var(--color-on-tertiary-container);
335}
336
337div#cgit a.tag-annotated-deco {
338 background-color: var(--color-tertiary-fixed);
339 color: var(--color-on-tertiary-fixed);
340}
341
342div#cgit a.remote-deco {
343 background-color: var(--color-secondary-container);
344 color: var(--color-on-secondary-container);
345}
346
347div#cgit a.deco {
348 background-color: var(--color-secondary-fixed);
349 color: var(--color-on-secondary-fixed);
350}
351
352/* 9. Commit Info Table */
353div#cgit table.commit-info {
354 background-color: var(--color-surface-container);
355 border: 1px solid var(--color-outline-variant);
356 border-radius: 8px;
357 padding: 1rem;
358 width: 100%;
359 margin-top: 1rem;
360 border-collapse: separate;
361 border-spacing: 0 0.5rem;
362}
363
364div#cgit table.commit-info th {
365 text-align: left;
366 padding: 0 1rem;
367 color: var(--color-secondary);
368}
369
370div#cgit table.commit-info td {
371 padding: 0 1rem;
372}
373
374div#cgit div.commit-subject {
375 font-size: 1.2rem;
376 font-weight: bold;
377 color: var(--color-primary);
378 margin: 1.5rem 0 0.5rem 0;
379}
380
381div#cgit div.commit-msg {
382 white-space: pre-wrap;
383 font-family: monospace;
384 padding: 1rem;
385 background: var(--color-surface-container-low);
386 border-radius: 4px;
387 color: var(--color-on-surface);
388}
389
390/* 10. Footer */
391div#cgit div.footer {
392 margin-top: auto;
393 padding: 2rem 1rem;
394 text-align: center;
395 font-size: 0.85rem;
396 color: var(--color-outline);
397 border-top: 1px solid var(--color-outline-variant);
398}
399
400div#cgit div.error {
401 color: var(--color-error);
402 background: var(--color-error-container);
403 padding: 1rem;
404 border-radius: 4px;
405 margin: 1rem 0;
406}
407
408/* 11. Responsive Adjustments */
409@media only screen and (max-width: 768px) {
410 div#cgit table#header {
411 flex-direction: column;
412 align-items: flex-start;
413 }
414
415 div#cgit table#header td.logo,
416 div#cgit table#header td.main,
417 div#cgit table#header td.form {
418 width: 100%;
419 text-align: left;
420 margin-bottom: 0.5rem;
421 }
422
423 div#cgit table.tabs {
424 flex-direction: column;
425 padding: 0;
426 }
427
428 div#cgit table.tabs td a {
429 width: 100%;
430 border-bottom: 1px solid var(--color-outline-variant);
431 }
432
433 div#cgit table.tabs td.form {
434 width: 100%;
435 justify-content: flex-start;
436 padding: 1rem;
437 }
438
439 div#cgit div.content {
440 padding: 1rem 0.5rem;
441 overflow-x: auto; /* Enable horizontal scroll for content */
442 }
443
444 /* Force tables to scroll on small screens */
445 div#cgit table.list,
446 div#cgit table.blob,
447 div#cgit table.diff {
448 white-space: nowrap;
449 }
450
451 /* Allow wrapping in logs on mobile to prevent extreme width */
452 div#cgit table.list td.logmsg {
453 white-space: normal;
454 min-width: 200px;
455 }
456}
457
458/* Container override for highlighted code to handle font sizing */
459div#cgit table.blob pre {
460 font-family: monospace;
461 font-size: 0.95em;
462 line-height: 1.4;
463}
generated by cgit v1.2.3 (git 2.46.0) at 2026-01-11 20:46:27 +0000