e0c73827636dfd9c7254b5fc810086fe66818b09
[software/mumi.git] / assets / css / screen.css
1 html, body {
2 background-color: #fff;
3 width: 100%;
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7 }
8
9 body {
10 padding-top: 3em;
11 }
12
13 h1 {
14 clear: both;
15 margin-top: 1.3rem;
16 margin-bottom: 0.5rem;
17 }
18
19 .title {
20 clear: both;
21 font-size: 16px;
22 margin-bottom: 1rem;
23 border-bottom: 1px dashed #ddd;
24 padding: 0px;
25 padding-bottom: 1rem;
26 color: #586069;
27 }
28
29 .comment-box {
30 margin-top: 1rem;
31 margin-bottom: 2rem;
32 border-top: 1px dashed #ddd;
33 padding-top: 1rem;
34 }
35
36 h2 {
37 border-bottom: 1px solid #eee;
38 padding-bottom: 5px;
39 }
40
41 ul.merged li, ul.blockedby li, ul.blocks li {
42 display: inline-block;
43 }
44 ul.merged li + li:before,
45 ul.blockedby li + li:before,
46 ul.blocks li + li:before {
47 content: ", ";
48 }
49
50 p + p {
51 text-indent: 0.5rem;
52 margin-top: 1.0rem;
53 }
54
55 .card-body form {
56 padding-bottom: 1em;
57 }
58
59 tr.heading th {
60 background-color: #f8f9fa;
61 font-weight: bold;
62 }
63
64 tr td:nth-child(1),
65 tr td:nth-child(4) {
66 width: 4rem;
67 }
68
69 tr td:nth-child(3){
70 width: 19rem;
71 }
72
73 tr.serious svg {
74 fill: #ff5a2a;
75 margin-right: .5em;
76 height: 1.2em;
77 vertical-align: text-bottom;
78 }
79 tr.important svg {
80 fill: #000;
81 margin-right: .5em;
82 height: 1.2em;
83 vertical-align: text-bottom;
84 }
85
86 #header {
87 background: #333333;
88 border-color: #1A1A1A1A;
89 border-style: none none solid none;
90 border-width: thin;
91 width: 100%;
92 margin-bottom: 1rem;
93 padding: .5em;
94 color: #fff;
95 border-radius: 0;
96 }
97 #header .navbar-brand {
98 padding: 0;
99 }
100
101 @media (min-width: 576px) {
102 #search input:focus {
103 width: 400px;
104 }
105 #search #search-hints {
106 width: 400px;
107 }
108 }
109
110 @media (min-width: 768px) {
111 #search input:focus {
112 width: 500px;
113 }
114 #search.form-inline #search-hints {
115 width: 500px;
116 }
117 }
118
119 #search #search-hints {
120 display: none;
121 position: absolute;
122 background: white;
123 top: 2.5rem;
124 border: 1px solid #ced4da;
125 border-top: none;
126 box-shadow: 3px 3px 10px #ddd;
127 padding: 1em;
128 z-index: 2;
129 }
130 #search.form-inline:focus-within #search-hints {
131 display: block;
132 }
133 #search { z-index: 3; }
134
135 footer {
136 border-color: #1A1A1A1A;
137 border-style: dashed none none none;
138 border-width: 2px;
139 width: 100%;
140 align-items: center;
141 text-align: center;
142 margin-top: 3rem;
143 padding: 1rem;
144 color: #586069;
145 background: #fafafa;
146 }
147
148 table {
149 width: 100%;
150 }
151
152 /* messages */
153 .row.event {
154 margin-bottom: 1em;
155 font-size: 1.2em;
156 }
157
158 .info .stat {
159 display: inline-grid;
160 color: #586069;
161 margin-right: 1em;
162 }
163 .info .stat .label {
164 display: block;
165 }
166
167 .conversation .avatar {
168 display: none;
169 }
170
171 .message .from .avatar {
172 width: 1.2em;
173 height: 1.2em;
174 border-radius: 3px;
175 color: #fff;
176 display: inline-flex;
177 justify-content: center;
178 align-items: center;
179 margin-right: 3px;
180 }
181
182 @media (min-width: 768px) {
183 .conversation .avatar {
184 height: 48px;
185 width: 48px;
186 border: 1px solid #ddd;
187 border-radius: 6px;
188 color: #fff;
189 display: flex;
190 justify-content: center;
191 align-items: center;
192 font-size: 32px;
193 position: absolute;
194 }
195 }
196
197 .address + .address:before {
198 content: ", ";
199 }
200
201 @media (min-width: 768px) {
202 .message {
203 margin-left: 65px;
204 }
205 }
206
207 @media (max-width: 768px) {
208 h1 {
209 font-size: 2rem;
210 }
211 }
212
213 details {
214 margin-top: .5em;
215 }
216
217 .message .body pre {
218 background: transparent;
219 border: none;
220 }
221
222 .message .body .multipart {
223 padding-bottom: 1rem;
224 }
225
226 .message .body .multipart + .multipart {
227 padding-top: 1rem;
228 padding-bottom: 1rem;
229 border-top: 1px dashed #ddd;
230 }
231
232 .multipart.application-pgp-signature {
233 display: none;
234 }
235
236 .multipart.text-x-patch {
237 }
238
239 .multipart.scheme {
240 white-space: pre-wrap;
241 font-family: monospace;
242 }
243
244 .attachment:before {
245 background-image: url('/img/file.svg');
246 background-size: 1rem;
247 display: inline-block;
248 height: 1rem;
249 width: 1rem;
250 content: "";
251 }
252
253 .download-part {
254 float: right;
255 font-size: 0.8em;
256 font-style: italic;
257 }
258
259 @media (min-width: 768px) {
260 .message .card-header:before {
261 content: "";
262 border-color: transparent;
263 border-right-color: #ddd;
264 border-style: solid solid outset;
265 border-width: 10px;
266 height: 0;
267 width: 0;
268 margin-left: -40px;
269 top: calc(1rem - 1px);
270 position: absolute;
271 }
272 .message .card:before {
273 content: "";
274 border-color: transparent;
275 border-right-color: #f8f9fa;
276 border-style: solid solid outset;
277 border-width: 9px;
278 height: 0;
279 width: 0;
280 left: -18px;
281 top: 1rem;
282 position: absolute;
283 z-index: 10;
284 }
285 .message .from .avatar {
286 display: none;
287 }
288 }
289
290 .message .from .address {
291 font-weight: bold;
292 }
293
294 .message .details {
295 margin-top: .5em;
296 display: none;
297 }
298
299 .message span.line {
300 white-space: pre-wrap;
301 font-family: monospace;
302 }
303
304 /* diff styles */
305 .message span.line.diff.file {
306 color: #005cc5;
307 }
308 .message span.line.diff.separator {
309 color: #005cc5;
310 }
311 .message span.line.diff.addition {
312 color: #22863a;
313 background-color: #f0fff4;
314 }
315 .message span.line.diff.deletion {
316 color: #b31d28;
317 background-color: #ffeef0;
318 }
319 .message span.line.diff.range {
320 color: #6f42c1;
321 font-weight: bold;
322 }
323
324 /* commit styles */
325 .message span.commit {
326 font-family: monospace;
327 }
328 .message span.commit.attribution {
329 color: #005cc5;
330 }
331 .message span.commit.header {
332 color: #005cc5;
333 }
334 .message span.commit.changelog {
335 color: #005cc5;
336 }
337
338 /* quote styles */
339 .message span.line.quote {
340 color: #3868cc;
341 }
342
343 .message span.line.cut-here {
344 color: #888;
345 }
346
347 .filter {
348 display: inline-block;
349 color: #fff;
350 background: #aaa;
351 text-align: center;
352 padding: 2px;
353 border-radius: 3px;
354 font-family: monospace;
355 margin: 1px;
356 }
357
358 .status-tag {
359 display: inline-block;
360 color: #fff;
361 text-align: center;
362 padding: 4px;
363 border-radius: 3px;
364 margin-right: 8px;
365 }
366
367 .status-tag.done {
368 background: #cb2431;
369 }
370 .status-tag.open {
371 background: #2cbe4e;
372 }
373
374 .error.parse {
375 font-style: italic;
376 font-size: 0.8em;
377 }
378
379 .message .body.card-body {
380 padding: .8rem;
381 }