df8aec39117ee831b7e273dd23a5b1e0dc960a78
[software/mumi.git] / assets / css / screen.css
1 html {
2 scroll-padding-top: 70px; /* height of sticky header */
3 }
4
5 html, body {
6 background-color: #fff;
7 width: 100%;
8 padding: 0px;
9 margin: 0px;
10 }
11
12 body {
13 height: auto;
14 }
15
16 h1 {
17 clear: both;
18 margin-top: 1.3rem;
19 margin-bottom: 0.5rem;
20 }
21
22 .title {
23 clear: both;
24 font-size: 16px;
25 margin-bottom: 1rem;
26 border-bottom: 1px dashed #ddd;
27 padding: 0px;
28 padding-bottom: 1rem;
29 color: #586069;
30 }
31
32 .comment-box {
33 margin-top: 1rem;
34 margin-bottom: 2rem;
35 border-top: 1px dashed #ddd;
36 padding-top: 1rem;
37 }
38
39 h2 {
40 border-bottom: 1px solid #eee;
41 padding-bottom: 5px;
42 }
43
44 ul.merged li, ul.blockedby li, ul.blocks li {
45 display: inline-block;
46 }
47 ul.merged li + li:before,
48 ul.blockedby li + li:before,
49 ul.blocks li + li:before {
50 content: ", ";
51 }
52
53 p + p {
54 text-indent: 0.5rem;
55 margin-top: 1.0rem;
56 }
57
58 .card-body form {
59 padding-bottom: 1em;
60 }
61
62 tr.heading th {
63 background-color: #f8f9fa;
64 font-weight: bold;
65 }
66
67 tr td:nth-child(1),
68 tr td:nth-child(4) {
69 width: 4rem;
70 }
71
72 tr td:nth-child(3){
73 width: 19rem;
74 }
75
76 tr.serious svg {
77 fill: #ff5a2a;
78 margin-right: .5em;
79 height: 1.2em;
80 vertical-align: text-bottom;
81 }
82 tr.important svg {
83 fill: #000;
84 margin-right: .5em;
85 height: 1.2em;
86 vertical-align: text-bottom;
87 }
88
89 nav {
90 background: #333333;
91 border-color: #1A1A1A1A;
92 border-style: none none solid none;
93 border-width: thin;
94 width: 100%;
95 margin-bottom: 1rem;
96 padding: .5em;
97 color: #fff;
98 border-radius: 0;
99 }
100
101 nav span.navbar-text {
102 display: flex;
103 flex-grow: 1;
104 }
105
106 @media (max-width: 576px) {
107 nav span.navbar-text {
108 display: none;
109 }
110 }
111
112 @media (min-width: 576px) {
113 #search input:focus {
114 width: 400px;
115 }
116 #search #search-hints {
117 width: 400px;
118 }
119 }
120
121 @media (min-width: 768px) {
122 #search input:focus {
123 width: 500px;
124 }
125 #search.form-inline #search-hints {
126 width: 500px;
127 }
128 }
129
130 #search #search-hints {
131 display: none;
132 position: absolute;
133 background: white;
134 top: 2.5rem;
135 border: 1px solid #ced4da;
136 border-top: none;
137 box-shadow: 3px 3px 10px #ddd;
138 padding: 1em;
139 z-index: 2;
140 color: #212529;
141 }
142 #search.form-inline:focus-within #search-hints {
143 display: block;
144 }
145 #search { z-index: 3; }
146
147 footer {
148 border-color: #1A1A1A1A;
149 border-style: dashed none none none;
150 border-width: 2px;
151 width: 100%;
152 align-items: center;
153 text-align: center;
154 margin-top: 3rem;
155 padding: 1rem;
156 color: #586069;
157 background: #fafafa;
158 }
159
160 table {
161 width: 100%;
162 }
163
164 /* messages */
165 .row.event {
166 margin-bottom: 1em;
167 font-size: 1.2em;
168 }
169
170 .info .stat {
171 display: inline-grid;
172 color: #586069;
173 margin-right: 1em;
174 }
175 .info .stat .label {
176 display: block;
177 }
178
179 a.message-anchor {
180 display: block;
181 position: relative;
182 visibility: hidden;
183 }
184
185 #sidebar {
186 display: none;
187 position: fixed;
188 right: 10px;
189 top: 100px;
190 background: white;
191 border: 1px solid #ddd;
192 border-radius: 6px;
193 padding: .5em;
194 padding-right: 1.5em;
195 z-index: 1;
196 max-height: 500px;
197 overflow-y: auto;
198 }
199
200 @media (min-width: 1200px) {
201 #sidebar {
202 display: block;
203 }
204 }
205
206 #sidebar li {
207 width: max-content;
208 }
209
210 .conversation .avatar {
211 display: none;
212 }
213
214 #sidebar .avatar,
215 .message .from .avatar {
216 width: 1.2em;
217 height: 1.2em;
218 border-radius: 3px;
219 color: #fff;
220 display: inline-flex;
221 justify-content: center;
222 align-items: center;
223 margin-right: 3px;
224 }
225
226 @media (min-width: 768px) {
227 .conversation .avatar {
228 height: 48px;
229 width: 48px;
230 border: 1px solid #ddd;
231 border-radius: 6px;
232 color: #fff;
233 display: flex;
234 justify-content: center;
235 align-items: center;
236 font-size: 32px;
237 position: absolute;
238 }
239 }
240
241 .address + .address:before {
242 content: ", ";
243 }
244
245 @media (min-width: 768px) {
246 .message {
247 margin-left: 65px;
248 }
249 }
250
251 @media (max-width: 768px) {
252 h1 {
253 font-size: 2rem;
254 }
255 }
256
257 details {
258 margin-top: .5em;
259 }
260
261 .message details {
262 border-top: 2px dotted #efefef;
263 border-bottom: 2px dotted #efefef;
264 }
265 .message details summary {
266 color: #586069;
267 padding: 1em 0;
268 }
269
270 .message .body pre {
271 background: transparent;
272 border: none;
273 }
274
275 .message .body .multipart {
276 padding-bottom: 1rem;
277 }
278
279 .message .body .attachment + .multipart,
280 .message .body .multipart + .multipart {
281 padding-top: 1rem;
282 padding-bottom: 1rem;
283 border-top: 1px dashed #ddd;
284 }
285
286 .multipart.application-pgp-signature {
287 display: none;
288 }
289
290 .multipart.text-x-patch {
291 }
292
293 .multipart.scheme {
294 white-space: pre-wrap;
295 font-family: monospace;
296 }
297
298 .attachment:before {
299 background-image: url('/img/file.svg');
300 background-size: 1rem;
301 display: inline-block;
302 height: 1rem;
303 width: 1rem;
304 content: "";
305 margin-right: 0.2em;
306 }
307
308 .download-message,
309 .download-part {
310 float: right;
311 font-size: 0.8em;
312 font-style: italic;
313 }
314
315 @media (min-width: 768px) {
316 .message .card-header:before {
317 content: "";
318 border-color: transparent;
319 border-right-color: #ddd;
320 border-style: solid solid outset;
321 border-width: 10px;
322 height: 0;
323 width: 0;
324 margin-left: -40px;
325 top: calc(1rem - 1px);
326 position: absolute;
327 }
328 .message .card:before {
329 content: "";
330 border-color: transparent;
331 border-right-color: #f8f9fa;
332 border-style: solid solid outset;
333 border-width: 9px;
334 height: 0;
335 width: 0;
336 left: -18px;
337 top: 1rem;
338 position: absolute;
339 z-index: 10;
340 }
341 .message .from .avatar {
342 display: none;
343 }
344 }
345
346 .message .from {
347 display: inline-block;
348 }
349
350 .message .from .address {
351 font-weight: bold;
352 }
353
354 .message .details {
355 margin-top: .5em;
356 display: none;
357 }
358
359 .message div.line {
360 white-space: pre-wrap;
361 font-family: monospace;
362 display: block;
363 }
364
365 /* diff styles */
366 .message .diff div.line.diff.file {
367 color: #005cc5;
368 }
369 .message .diff div.line.diff.separator {
370 color: #005cc5;
371 }
372 .message .diff div.line.diff.addition {
373 color: #22863a;
374 background-color: #f0fff4;
375 }
376 .message .diff div.line.diff.deletion {
377 color: #b31d28;
378 background-color: #ffeef0;
379 }
380 .message .diff div.line.diff.range {
381 color: #6f42c1;
382 font-weight: bold;
383 }
384
385 /* commit styles */
386 .message span.commit {
387 font-family: monospace;
388 }
389 .message span.commit.attribution {
390 color: #005cc5;
391 }
392 .message span.commit.header {
393 color: #005cc5;
394 }
395 .message span.commit.changelog {
396 color: #005cc5;
397 }
398
399 /* quote styles */
400 .message .quote div.line {
401 color: #3868cc;
402 }
403
404 .message .snippet {
405 background-color: #fbfbfb;
406 }
407
408 .filter {
409 display: inline-block;
410 color: #fff;
411 background: #aaa;
412 text-align: center;
413 padding: 2px;
414 border-radius: 3px;
415 font-family: monospace;
416 margin: 1px;
417 }
418
419 .status-tag {
420 display: inline-block;
421 color: #fff;
422 text-align: center;
423 padding: 4px;
424 border-radius: 3px;
425 margin-right: 8px;
426 }
427
428 .status-tag.done {
429 background: #cb2431;
430 }
431 .status-tag.open {
432 background: #2cbe4e;
433 }
434
435 .error.parse {
436 font-style: italic;
437 font-size: 0.8em;
438 }
439
440 .message .body.card-body {
441 padding: .8rem;
442 }
443
444
445
446 /* Syntax highlighting code, by David Thompson, borrowed
447 from:
448 https://git.dthompson.us/blog.git/blob_plain/refs/heads/haunt-migration:/css/dthompson.css
449 David Thompson gives permission for this to be GPLv3+ and CC BY-SA 4.0
450
451 Modified significantly since.
452 */
453
454
455 .syntax-special, .syntax-element {
456 color: #856;
457 font-weight: bold;
458 }
459
460 .syntax-symbol {
461 color: #423;
462 }
463
464 .syntax-string {
465 color: #484;
466 }
467
468 .syntax-keyword, .syntax-attribute {
469 color: #921;
470 }
471
472 .syntax-comment {
473 color: #666;
474 }
475
476 .syntax-open, .syntax-close {
477 color: #688;
478 }