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