view: Generate blocks of lines and style the blocks.
[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 }
137 #search.form-inline:focus-within #search-hints {
138 display: block;
139 }
140 #search { z-index: 3; }
141
142 footer {
143 border-color: #1A1A1A1A;
144 border-style: dashed none none none;
145 border-width: 2px;
146 width: 100%;
147 align-items: center;
148 text-align: center;
149 margin-top: 3rem;
150 padding: 1rem;
151 color: #586069;
152 background: #fafafa;
153 }
154
155 table {
156 width: 100%;
157 }
158
159 /* messages */
160 .row.event {
161 margin-bottom: 1em;
162 font-size: 1.2em;
163 }
164
165 .info .stat {
166 display: inline-grid;
167 color: #586069;
168 margin-right: 1em;
169 }
170 .info .stat .label {
171 display: block;
172 }
173
174 .conversation .avatar {
175 display: none;
176 }
177
178 .message .from .avatar {
179 width: 1.2em;
180 height: 1.2em;
181 border-radius: 3px;
182 color: #fff;
183 display: inline-flex;
184 justify-content: center;
185 align-items: center;
186 margin-right: 3px;
187 }
188
189 @media (min-width: 768px) {
190 .conversation .avatar {
191 height: 48px;
192 width: 48px;
193 border: 1px solid #ddd;
194 border-radius: 6px;
195 color: #fff;
196 display: flex;
197 justify-content: center;
198 align-items: center;
199 font-size: 32px;
200 position: absolute;
201 }
202 }
203
204 .address + .address:before {
205 content: ", ";
206 }
207
208 @media (min-width: 768px) {
209 .message {
210 margin-left: 65px;
211 }
212 }
213
214 @media (max-width: 768px) {
215 h1 {
216 font-size: 2rem;
217 }
218 }
219
220 details {
221 margin-top: .5em;
222 }
223
224 .message details {
225 border-top: 2px dotted #efefef;
226 border-bottom: 2px dotted #efefef;
227 }
228 .message details summary {
229 color: #586069;
230 padding: 1em 0;
231 }
232
233 .message .body pre {
234 background: transparent;
235 border: none;
236 }
237
238 .message .body .multipart {
239 padding-bottom: 1rem;
240 }
241
242 .message .body .multipart + .multipart {
243 padding-top: 1rem;
244 padding-bottom: 1rem;
245 border-top: 1px dashed #ddd;
246 }
247
248 .multipart.application-pgp-signature {
249 display: none;
250 }
251
252 .multipart.text-x-patch {
253 }
254
255 .multipart.scheme {
256 white-space: pre-wrap;
257 font-family: monospace;
258 }
259
260 .attachment:before {
261 background-image: url('/img/file.svg');
262 background-size: 1rem;
263 display: inline-block;
264 height: 1rem;
265 width: 1rem;
266 content: "";
267 }
268
269 .download-part {
270 float: right;
271 font-size: 0.8em;
272 font-style: italic;
273 }
274
275 @media (min-width: 768px) {
276 .message .card-header:before {
277 content: "";
278 border-color: transparent;
279 border-right-color: #ddd;
280 border-style: solid solid outset;
281 border-width: 10px;
282 height: 0;
283 width: 0;
284 margin-left: -40px;
285 top: calc(1rem - 1px);
286 position: absolute;
287 }
288 .message .card:before {
289 content: "";
290 border-color: transparent;
291 border-right-color: #f8f9fa;
292 border-style: solid solid outset;
293 border-width: 9px;
294 height: 0;
295 width: 0;
296 left: -18px;
297 top: 1rem;
298 position: absolute;
299 z-index: 10;
300 }
301 .message .from .avatar {
302 display: none;
303 }
304 }
305
306 .message .from .address {
307 font-weight: bold;
308 }
309
310 .message .details {
311 margin-top: .5em;
312 display: none;
313 }
314
315 .message span.line {
316 white-space: pre-wrap;
317 font-family: monospace;
318 display: block;
319 }
320
321 /* diff styles */
322 .message .diff span.line.diff.file {
323 color: #005cc5;
324 }
325 .message .diff span.line.diff.separator {
326 color: #005cc5;
327 }
328 .message .diff span.line.diff.addition {
329 color: #22863a;
330 background-color: #f0fff4;
331 }
332 .message .diff span.line.diff.deletion {
333 color: #b31d28;
334 background-color: #ffeef0;
335 }
336 .message .diff span.line.diff.range {
337 color: #6f42c1;
338 font-weight: bold;
339 }
340
341 /* commit styles */
342 .message span.commit {
343 font-family: monospace;
344 }
345 .message span.commit.attribution {
346 color: #005cc5;
347 }
348 .message span.commit.header {
349 color: #005cc5;
350 }
351 .message span.commit.changelog {
352 color: #005cc5;
353 }
354
355 /* quote styles */
356 .message .quote span.line {
357 color: #3868cc;
358 }
359
360 .message .snippet {
361 background-color: #fbfbfb;
362 }
363
364 .filter {
365 display: inline-block;
366 color: #fff;
367 background: #aaa;
368 text-align: center;
369 padding: 2px;
370 border-radius: 3px;
371 font-family: monospace;
372 margin: 1px;
373 }
374
375 .status-tag {
376 display: inline-block;
377 color: #fff;
378 text-align: center;
379 padding: 4px;
380 border-radius: 3px;
381 margin-right: 8px;
382 }
383
384 .status-tag.done {
385 background: #cb2431;
386 }
387 .status-tag.open {
388 background: #2cbe4e;
389 }
390
391 .error.parse {
392 font-style: italic;
393 font-size: 0.8em;
394 }
395
396 .message .body.card-body {
397 padding: .8rem;
398 }