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