6debf02c9c581219d51b575f1aacf7c75f09a1c7
[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: 30%;
187 background: white;
188 border: 1px solid #ddd;
189 border-radius: 6px;
190 padding: .5em;
191 z-index: 1;
192 }
193
194 @media (min-width: 1200px) {
195 #sidebar {
196 display: block;
197 }
198 }
199
200 .conversation .avatar {
201 display: none;
202 }
203
204 #sidebar .avatar,
205 .message .from .avatar {
206 width: 1.2em;
207 height: 1.2em;
208 border-radius: 3px;
209 color: #fff;
210 display: inline-flex;
211 justify-content: center;
212 align-items: center;
213 margin-right: 3px;
214 }
215
216 @media (min-width: 768px) {
217 .conversation .avatar {
218 height: 48px;
219 width: 48px;
220 border: 1px solid #ddd;
221 border-radius: 6px;
222 color: #fff;
223 display: flex;
224 justify-content: center;
225 align-items: center;
226 font-size: 32px;
227 position: absolute;
228 }
229 }
230
231 .address + .address:before {
232 content: ", ";
233 }
234
235 @media (min-width: 768px) {
236 .message {
237 margin-left: 65px;
238 }
239 }
240
241 @media (max-width: 768px) {
242 h1 {
243 font-size: 2rem;
244 }
245 }
246
247 details {
248 margin-top: .5em;
249 }
250
251 .message details {
252 border-top: 2px dotted #efefef;
253 border-bottom: 2px dotted #efefef;
254 }
255 .message details summary {
256 color: #586069;
257 padding: 1em 0;
258 }
259
260 .message .body pre {
261 background: transparent;
262 border: none;
263 }
264
265 .message .body .multipart {
266 padding-bottom: 1rem;
267 }
268
269 .message .body .multipart + .multipart {
270 padding-top: 1rem;
271 padding-bottom: 1rem;
272 border-top: 1px dashed #ddd;
273 }
274
275 .multipart.application-pgp-signature {
276 display: none;
277 }
278
279 .multipart.text-x-patch {
280 }
281
282 .multipart.scheme {
283 white-space: pre-wrap;
284 font-family: monospace;
285 }
286
287 .attachment:before {
288 background-image: url('/img/file.svg');
289 background-size: 1rem;
290 display: inline-block;
291 height: 1rem;
292 width: 1rem;
293 content: "";
294 margin-right: 0.2em;
295 }
296
297 .download-part {
298 float: right;
299 font-size: 0.8em;
300 font-style: italic;
301 }
302
303 @media (min-width: 768px) {
304 .message .card-header:before {
305 content: "";
306 border-color: transparent;
307 border-right-color: #ddd;
308 border-style: solid solid outset;
309 border-width: 10px;
310 height: 0;
311 width: 0;
312 margin-left: -40px;
313 top: calc(1rem - 1px);
314 position: absolute;
315 }
316 .message .card:before {
317 content: "";
318 border-color: transparent;
319 border-right-color: #f8f9fa;
320 border-style: solid solid outset;
321 border-width: 9px;
322 height: 0;
323 width: 0;
324 left: -18px;
325 top: 1rem;
326 position: absolute;
327 z-index: 10;
328 }
329 .message .from .avatar {
330 display: none;
331 }
332 }
333
334 .message .from .address {
335 font-weight: bold;
336 }
337
338 .message .details {
339 margin-top: .5em;
340 display: none;
341 }
342
343 .message span.line {
344 white-space: pre-wrap;
345 font-family: monospace;
346 display: block;
347 }
348
349 /* diff styles */
350 .message .diff span.line.diff.file {
351 color: #005cc5;
352 }
353 .message .diff span.line.diff.separator {
354 color: #005cc5;
355 }
356 .message .diff span.line.diff.addition {
357 color: #22863a;
358 background-color: #f0fff4;
359 }
360 .message .diff span.line.diff.deletion {
361 color: #b31d28;
362 background-color: #ffeef0;
363 }
364 .message .diff span.line.diff.range {
365 color: #6f42c1;
366 font-weight: bold;
367 }
368
369 /* commit styles */
370 .message span.commit {
371 font-family: monospace;
372 }
373 .message span.commit.attribution {
374 color: #005cc5;
375 }
376 .message span.commit.header {
377 color: #005cc5;
378 }
379 .message span.commit.changelog {
380 color: #005cc5;
381 }
382
383 /* quote styles */
384 .message .quote span.line {
385 color: #3868cc;
386 }
387
388 .message .snippet {
389 background-color: #fbfbfb;
390 }
391
392 .filter {
393 display: inline-block;
394 color: #fff;
395 background: #aaa;
396 text-align: center;
397 padding: 2px;
398 border-radius: 3px;
399 font-family: monospace;
400 margin: 1px;
401 }
402
403 .status-tag {
404 display: inline-block;
405 color: #fff;
406 text-align: center;
407 padding: 4px;
408 border-radius: 3px;
409 margin-right: 8px;
410 }
411
412 .status-tag.done {
413 background: #cb2431;
414 }
415 .status-tag.open {
416 background: #2cbe4e;
417 }
418
419 .error.parse {
420 font-style: italic;
421 font-size: 0.8em;
422 }
423
424 .message .body.card-body {
425 padding: .8rem;
426 }
427
428
429
430 /* Syntax highlighting code, by David Thompson, borrowed
431 from:
432 https://git.dthompson.us/blog.git/blob_plain/refs/heads/haunt-migration:/css/dthompson.css
433 David Thompson gives permission for this to be GPLv3+ and CC BY-SA 4.0
434
435 Modified significantly since.
436 */
437
438
439 .syntax-special, .syntax-element {
440 color: #856;
441 font-weight: bold;
442 }
443
444 .syntax-symbol {
445 color: #423;
446 }
447
448 .syntax-string {
449 color: #484;
450 }
451
452 .syntax-keyword, .syntax-attribute {
453 color: #921;
454 }
455
456 .syntax-comment {
457 color: #666;
458 }
459
460 .syntax-open, .syntax-close {
461 color: #688;
462 }