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