css: Shrink h1 font size on smaller screens.
[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 @media (max-width: 768px) {
204 h1 {
205 font-size: 2rem;
206 }
207 }
208
209 details {
210 margin-top: .5em;
211 }
212
213 .message .body pre {
214 background: transparent;
215 border: none;
216 }
217
218 .message .body .multipart {
219 padding-bottom: 1rem;
220 }
221
222 .message .body .multipart + .multipart {
223 padding-top: 1rem;
224 padding-bottom: 1rem;
225 border-top: 1px dashed #ddd;
226 }
227
228 .multipart.application-pgp-signature {
229 display: none;
230 }
231
232 .multipart.text-x-patch {
233 }
234
235 .multipart.scheme {
236 white-space: pre-wrap;
237 font-family: monospace;
238 }
239
240 .attachment:before {
241 background-image: url('/img/file.svg');
242 background-size: 1rem;
243 display: inline-block;
244 height: 1rem;
245 width: 1rem;
246 content: "";
247 }
248
249 .download-part {
250 float: right;
251 font-size: 0.8em;
252 font-style: italic;
253 }
254
255 @media (min-width: 768px) {
256 .message .card-header:before {
257 content: "";
258 border-color: transparent;
259 border-right-color: #ddd;
260 border-style: solid solid outset;
261 border-width: 10px;
262 height: 0;
263 width: 0;
264 margin-left: -40px;
265 top: calc(1rem - 1px);
266 position: absolute;
267 }
268 .message .card:before {
269 content: "";
270 border-color: transparent;
271 border-right-color: #f8f9fa;
272 border-style: solid solid outset;
273 border-width: 9px;
274 height: 0;
275 width: 0;
276 left: -18px;
277 top: 1rem;
278 position: absolute;
279 z-index: 10;
280 }
281 .message .from .avatar {
282 display: none;
283 }
284 }
285
286 .message .from .address {
287 font-weight: bold;
288 }
289
290 .message .details {
291 margin-top: .5em;
292 display: none;
293 }
294
295 .message span.line {
296 white-space: pre-wrap;
297 font-family: monospace;
298 }
299
300 /* diff styles */
301 .message span.line.diff.file {
302 color: #005cc5;
303 }
304 .message span.line.diff.separator {
305 color: #005cc5;
306 }
307 .message span.line.diff.addition {
308 color: #22863a;
309 background-color: #f0fff4;
310 }
311 .message span.line.diff.deletion {
312 color: #b31d28;
313 background-color: #ffeef0;
314 }
315 .message span.line.diff.range {
316 color: #6f42c1;
317 font-weight: bold;
318 }
319
320 /* commit styles */
321 .message span.commit {
322 font-family: monospace;
323 }
324 .message span.commit.attribution {
325 color: #005cc5;
326 }
327 .message span.commit.header {
328 color: #005cc5;
329 }
330 .message span.commit.changelog {
331 color: #005cc5;
332 }
333
334 /* quote styles */
335 .message span.line.quote {
336 color: #3868cc;
337 }
338
339 .message span.line.cut-here {
340 color: #888;
341 }
342
343 .filter {
344 display: inline-block;
345 color: #fff;
346 background: #aaa;
347 text-align: center;
348 padding: 2px;
349 border-radius: 3px;
350 font-family: monospace;
351 margin: 1px;
352 }
353
354 .status-tag {
355 display: inline-block;
356 color: #fff;
357 text-align: center;
358 padding: 4px;
359 border-radius: 3px;
360 margin-right: 8px;
361 }
362
363 .status-tag.done {
364 background: #cb2431;
365 }
366 .status-tag.open {
367 background: #2cbe4e;
368 }
369
370 .error.parse {
371 font-style: italic;
372 font-size: 0.8em;
373 }
374
375 .message .body.card-body {
376 padding: .8rem;
377 }