css: Draw multipart separator also when following an attachment.
[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 .attachment + .multipart,
277 .message .body .multipart + .multipart {
278 padding-top: 1rem;
279 padding-bottom: 1rem;
280 border-top: 1px dashed #ddd;
281 }
282
283 .multipart.application-pgp-signature {
284 display: none;
285 }
286
287 .multipart.text-x-patch {
288 }
289
290 .multipart.scheme {
291 white-space: pre-wrap;
292 font-family: monospace;
293 }
294
295 .attachment:before {
296 background-image: url('/img/file.svg');
297 background-size: 1rem;
298 display: inline-block;
299 height: 1rem;
300 width: 1rem;
301 content: "";
302 margin-right: 0.2em;
303 }
304
305 .download-message,
306 .download-part {
307 float: right;
308 font-size: 0.8em;
309 font-style: italic;
310 }
311
312 @media (min-width: 768px) {
313 .message .card-header:before {
314 content: "";
315 border-color: transparent;
316 border-right-color: #ddd;
317 border-style: solid solid outset;
318 border-width: 10px;
319 height: 0;
320 width: 0;
321 margin-left: -40px;
322 top: calc(1rem - 1px);
323 position: absolute;
324 }
325 .message .card:before {
326 content: "";
327 border-color: transparent;
328 border-right-color: #f8f9fa;
329 border-style: solid solid outset;
330 border-width: 9px;
331 height: 0;
332 width: 0;
333 left: -18px;
334 top: 1rem;
335 position: absolute;
336 z-index: 10;
337 }
338 .message .from .avatar {
339 display: none;
340 }
341 }
342
343 .message .from {
344 display: inline-block;
345 }
346
347 .message .from .address {
348 font-weight: bold;
349 }
350
351 .message .details {
352 margin-top: .5em;
353 display: none;
354 }
355
356 .message span.line {
357 white-space: pre-wrap;
358 font-family: monospace;
359 display: block;
360 }
361
362 /* diff styles */
363 .message .diff span.line.diff.file {
364 color: #005cc5;
365 }
366 .message .diff span.line.diff.separator {
367 color: #005cc5;
368 }
369 .message .diff span.line.diff.addition {
370 color: #22863a;
371 background-color: #f0fff4;
372 }
373 .message .diff span.line.diff.deletion {
374 color: #b31d28;
375 background-color: #ffeef0;
376 }
377 .message .diff span.line.diff.range {
378 color: #6f42c1;
379 font-weight: bold;
380 }
381
382 /* commit styles */
383 .message span.commit {
384 font-family: monospace;
385 }
386 .message span.commit.attribution {
387 color: #005cc5;
388 }
389 .message span.commit.header {
390 color: #005cc5;
391 }
392 .message span.commit.changelog {
393 color: #005cc5;
394 }
395
396 /* quote styles */
397 .message .quote span.line {
398 color: #3868cc;
399 }
400
401 .message .snippet {
402 background-color: #fbfbfb;
403 }
404
405 .filter {
406 display: inline-block;
407 color: #fff;
408 background: #aaa;
409 text-align: center;
410 padding: 2px;
411 border-radius: 3px;
412 font-family: monospace;
413 margin: 1px;
414 }
415
416 .status-tag {
417 display: inline-block;
418 color: #fff;
419 text-align: center;
420 padding: 4px;
421 border-radius: 3px;
422 margin-right: 8px;
423 }
424
425 .status-tag.done {
426 background: #cb2431;
427 }
428 .status-tag.open {
429 background: #2cbe4e;
430 }
431
432 .error.parse {
433 font-style: italic;
434 font-size: 0.8em;
435 }
436
437 .message .body.card-body {
438 padding: .8rem;
439 }
440
441
442
443 /* Syntax highlighting code, by David Thompson, borrowed
444 from:
445 https://git.dthompson.us/blog.git/blob_plain/refs/heads/haunt-migration:/css/dthompson.css
446 David Thompson gives permission for this to be GPLv3+ and CC BY-SA 4.0
447
448 Modified significantly since.
449 */
450
451
452 .syntax-special, .syntax-element {
453 color: #856;
454 font-weight: bold;
455 }
456
457 .syntax-symbol {
458 color: #423;
459 }
460
461 .syntax-string {
462 color: #484;
463 }
464
465 .syntax-keyword, .syntax-attribute {
466 color: #921;
467 }
468
469 .syntax-comment {
470 color: #666;
471 }
472
473 .syntax-open, .syntax-close {
474 color: #688;
475 }