1 | @charset "UTF-8";
|
---|
2 | /*
|
---|
3 | Flavor name: Default (mini-default)
|
---|
4 | Author: Angelos Chalaris (chalarangelo@gmail.com)
|
---|
5 | Maintainers: Angelos Chalaris
|
---|
6 | mini.css version: v3.0.1
|
---|
7 | */
|
---|
8 | /*
|
---|
9 | Browsers resets and base typography.
|
---|
10 | */
|
---|
11 | /* Core module CSS variable definitions */
|
---|
12 | :root {
|
---|
13 | --fore-color: #111;
|
---|
14 | --secondary-fore-color: #444;
|
---|
15 | --back-color: #f8f8f8;
|
---|
16 | --secondary-back-color: #f0f0f0;
|
---|
17 | --blockquote-color: #f57c00;
|
---|
18 | --pre-color: #1565c0;
|
---|
19 | --border-color: #aaa;
|
---|
20 | --secondary-border-color: #ddd;
|
---|
21 | --heading-ratio: 1.19;
|
---|
22 | --universal-margin: 0.5rem;
|
---|
23 | --universal-padding: 0.5rem;
|
---|
24 | --universal-border-radius: 0.125rem;
|
---|
25 | --a-link-color: #0277bd;
|
---|
26 | --a-visited-color: #01579b;
|
---|
27 | }
|
---|
28 |
|
---|
29 | html {
|
---|
30 | font-size: 16px;
|
---|
31 | }
|
---|
32 |
|
---|
33 | a, b, del, em, i, ins, q, span, strong, u {
|
---|
34 | font-size: 1em;
|
---|
35 | }
|
---|
36 |
|
---|
37 | html, * {
|
---|
38 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
|
---|
39 | line-height: 1.5;
|
---|
40 | -webkit-text-size-adjust: 100%;
|
---|
41 | }
|
---|
42 |
|
---|
43 | * {
|
---|
44 | font-size: 1rem;
|
---|
45 | }
|
---|
46 |
|
---|
47 | body {
|
---|
48 | margin: 0;
|
---|
49 | color: var(--fore-color);
|
---|
50 | background: var(--back-color);
|
---|
51 | }
|
---|
52 |
|
---|
53 | details {
|
---|
54 | display: block;
|
---|
55 | }
|
---|
56 |
|
---|
57 | summary {
|
---|
58 | display: list-item;
|
---|
59 | }
|
---|
60 |
|
---|
61 | abbr[title] {
|
---|
62 | border-bottom: none;
|
---|
63 | text-decoration: underline dotted;
|
---|
64 | }
|
---|
65 |
|
---|
66 | input {
|
---|
67 | overflow: visible;
|
---|
68 | }
|
---|
69 |
|
---|
70 | img {
|
---|
71 | max-width: 100%;
|
---|
72 | height: auto;
|
---|
73 | }
|
---|
74 |
|
---|
75 | h1, h2, h3, h4, h5, h6 {
|
---|
76 | line-height: 1.2;
|
---|
77 | margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
|
---|
78 | font-weight: 500;
|
---|
79 | }
|
---|
80 |
|
---|
81 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
---|
82 | color: var(--secondary-fore-color);
|
---|
83 | display: block;
|
---|
84 | margin-top: -0.25rem;
|
---|
85 | }
|
---|
86 |
|
---|
87 | h1 {
|
---|
88 | font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
|
---|
89 | }
|
---|
90 |
|
---|
91 | h2 {
|
---|
92 | font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
|
---|
93 | }
|
---|
94 |
|
---|
95 | h3 {
|
---|
96 | font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
|
---|
97 | }
|
---|
98 |
|
---|
99 | h4 {
|
---|
100 | font-size: calc(1rem * var(--heading-ratio));
|
---|
101 | }
|
---|
102 |
|
---|
103 | h5 {
|
---|
104 | font-size: 1rem;
|
---|
105 | }
|
---|
106 |
|
---|
107 | h6 {
|
---|
108 | font-size: calc(1rem / var(--heading-ratio));
|
---|
109 | }
|
---|
110 |
|
---|
111 | p {
|
---|
112 | margin: var(--universal-margin);
|
---|
113 | }
|
---|
114 |
|
---|
115 | ol, ul {
|
---|
116 | margin: var(--universal-margin);
|
---|
117 | padding-left: calc(2 * var(--universal-margin));
|
---|
118 | }
|
---|
119 |
|
---|
120 | b, strong {
|
---|
121 | font-weight: 700;
|
---|
122 | }
|
---|
123 |
|
---|
124 | hr {
|
---|
125 | box-sizing: content-box;
|
---|
126 | border: 0;
|
---|
127 | line-height: 1.25em;
|
---|
128 | margin: var(--universal-margin);
|
---|
129 | height: 0.0625rem;
|
---|
130 | background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
|
---|
131 | }
|
---|
132 |
|
---|
133 | blockquote {
|
---|
134 | display: block;
|
---|
135 | position: relative;
|
---|
136 | font-style: italic;
|
---|
137 | color: var(--secondary-fore-color);
|
---|
138 | margin: var(--universal-margin);
|
---|
139 | padding: calc(3 * var(--universal-padding));
|
---|
140 | border: 0.0625rem solid var(--secondary-border-color);
|
---|
141 | border-left: 0.375rem solid var(--blockquote-color);
|
---|
142 | border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
|
---|
143 | }
|
---|
144 |
|
---|
145 | blockquote:before {
|
---|
146 | position: absolute;
|
---|
147 | top: calc(0rem - var(--universal-padding));
|
---|
148 | left: 0;
|
---|
149 | font-family: sans-serif;
|
---|
150 | font-size: 3rem;
|
---|
151 | font-weight: 700;
|
---|
152 | content: "\201c";
|
---|
153 | color: var(--blockquote-color);
|
---|
154 | }
|
---|
155 |
|
---|
156 | blockquote[cite]:after {
|
---|
157 | font-style: normal;
|
---|
158 | font-size: 0.75em;
|
---|
159 | font-weight: 700;
|
---|
160 | content: "\a— " attr(cite);
|
---|
161 | white-space: pre;
|
---|
162 | }
|
---|
163 |
|
---|
164 | code, kbd, pre, samp {
|
---|
165 | font-family: Menlo, Consolas, monospace;
|
---|
166 | font-size: 0.85em;
|
---|
167 | }
|
---|
168 |
|
---|
169 | code {
|
---|
170 | background: var(--secondary-back-color);
|
---|
171 | border-radius: var(--universal-border-radius);
|
---|
172 | padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
|
---|
173 | }
|
---|
174 |
|
---|
175 | kbd {
|
---|
176 | background: var(--fore-color);
|
---|
177 | color: var(--back-color);
|
---|
178 | border-radius: var(--universal-border-radius);
|
---|
179 | padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
|
---|
180 | }
|
---|
181 |
|
---|
182 | pre {
|
---|
183 | overflow: auto;
|
---|
184 | background: var(--secondary-back-color);
|
---|
185 | padding: calc(1.5 * var(--universal-padding));
|
---|
186 | margin: var(--universal-margin);
|
---|
187 | border: 0.0625rem solid var(--secondary-border-color);
|
---|
188 | border-left: 0.25rem solid var(--pre-color);
|
---|
189 | border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
|
---|
190 | }
|
---|
191 |
|
---|
192 | sup, sub, code, kbd {
|
---|
193 | line-height: 0;
|
---|
194 | position: relative;
|
---|
195 | vertical-align: baseline;
|
---|
196 | }
|
---|
197 |
|
---|
198 | small, sup, sub, figcaption {
|
---|
199 | font-size: 0.75em;
|
---|
200 | }
|
---|
201 |
|
---|
202 | sup {
|
---|
203 | top: -0.5em;
|
---|
204 | }
|
---|
205 |
|
---|
206 | sub {
|
---|
207 | bottom: -0.25em;
|
---|
208 | }
|
---|
209 |
|
---|
210 | figure {
|
---|
211 | margin: var(--universal-margin);
|
---|
212 | }
|
---|
213 |
|
---|
214 | figcaption {
|
---|
215 | color: var(--secondary-fore-color);
|
---|
216 | }
|
---|
217 |
|
---|
218 | a {
|
---|
219 | text-decoration: none;
|
---|
220 | }
|
---|
221 |
|
---|
222 | a:link {
|
---|
223 | color: var(--a-link-color);
|
---|
224 | }
|
---|
225 |
|
---|
226 | a:visited {
|
---|
227 | color: var(--a-visited-color);
|
---|
228 | }
|
---|
229 |
|
---|
230 | a:hover, a:focus {
|
---|
231 | text-decoration: underline;
|
---|
232 | }
|
---|
233 |
|
---|
234 | /*
|
---|
235 | Definitions for the grid system, cards and containers.
|
---|
236 | */
|
---|
237 | .container {
|
---|
238 | margin: 0 auto;
|
---|
239 | padding: 0 calc(1.5 * var(--universal-padding));
|
---|
240 | }
|
---|
241 |
|
---|
242 | .row {
|
---|
243 | box-sizing: border-box;
|
---|
244 | display: flex;
|
---|
245 | flex: 0 1 auto;
|
---|
246 | flex-flow: row wrap;
|
---|
247 | }
|
---|
248 |
|
---|
249 | .col-sm,
|
---|
250 | [class^='col-sm-'],
|
---|
251 | [class^='col-sm-offset-'],
|
---|
252 | .row[class*='cols-sm-'] > * {
|
---|
253 | box-sizing: border-box;
|
---|
254 | flex: 0 0 auto;
|
---|
255 | padding: 0 calc(var(--universal-padding) / 2);
|
---|
256 | }
|
---|
257 |
|
---|
258 | .col-sm,
|
---|
259 | .row.cols-sm > * {
|
---|
260 | max-width: 100%;
|
---|
261 | flex-grow: 1;
|
---|
262 | flex-basis: 0;
|
---|
263 | }
|
---|
264 |
|
---|
265 | .col-sm-1,
|
---|
266 | .row.cols-sm-1 > * {
|
---|
267 | max-width: 8.33333%;
|
---|
268 | flex-basis: 8.33333%;
|
---|
269 | }
|
---|
270 |
|
---|
271 | .col-sm-offset-0 {
|
---|
272 | margin-left: 0;
|
---|
273 | }
|
---|
274 |
|
---|
275 | .col-sm-2,
|
---|
276 | .row.cols-sm-2 > * {
|
---|
277 | max-width: 16.66667%;
|
---|
278 | flex-basis: 16.66667%;
|
---|
279 | }
|
---|
280 |
|
---|
281 | .col-sm-offset-1 {
|
---|
282 | margin-left: 8.33333%;
|
---|
283 | }
|
---|
284 |
|
---|
285 | .col-sm-3,
|
---|
286 | .row.cols-sm-3 > * {
|
---|
287 | max-width: 25%;
|
---|
288 | flex-basis: 25%;
|
---|
289 | }
|
---|
290 |
|
---|
291 | .col-sm-offset-2 {
|
---|
292 | margin-left: 16.66667%;
|
---|
293 | }
|
---|
294 |
|
---|
295 | .col-sm-4,
|
---|
296 | .row.cols-sm-4 > * {
|
---|
297 | max-width: 33.33333%;
|
---|
298 | flex-basis: 33.33333%;
|
---|
299 | }
|
---|
300 |
|
---|
301 | .col-sm-offset-3 {
|
---|
302 | margin-left: 25%;
|
---|
303 | }
|
---|
304 |
|
---|
305 | .col-sm-5,
|
---|
306 | .row.cols-sm-5 > * {
|
---|
307 | max-width: 41.66667%;
|
---|
308 | flex-basis: 41.66667%;
|
---|
309 | }
|
---|
310 |
|
---|
311 | .col-sm-offset-4 {
|
---|
312 | margin-left: 33.33333%;
|
---|
313 | }
|
---|
314 |
|
---|
315 | .col-sm-6,
|
---|
316 | .row.cols-sm-6 > * {
|
---|
317 | max-width: 50%;
|
---|
318 | flex-basis: 50%;
|
---|
319 | }
|
---|
320 |
|
---|
321 | .col-sm-offset-5 {
|
---|
322 | margin-left: 41.66667%;
|
---|
323 | }
|
---|
324 |
|
---|
325 | .col-sm-7,
|
---|
326 | .row.cols-sm-7 > * {
|
---|
327 | max-width: 58.33333%;
|
---|
328 | flex-basis: 58.33333%;
|
---|
329 | }
|
---|
330 |
|
---|
331 | .col-sm-offset-6 {
|
---|
332 | margin-left: 50%;
|
---|
333 | }
|
---|
334 |
|
---|
335 | .col-sm-8,
|
---|
336 | .row.cols-sm-8 > * {
|
---|
337 | max-width: 66.66667%;
|
---|
338 | flex-basis: 66.66667%;
|
---|
339 | }
|
---|
340 |
|
---|
341 | .col-sm-offset-7 {
|
---|
342 | margin-left: 58.33333%;
|
---|
343 | }
|
---|
344 |
|
---|
345 | .col-sm-9,
|
---|
346 | .row.cols-sm-9 > * {
|
---|
347 | max-width: 75%;
|
---|
348 | flex-basis: 75%;
|
---|
349 | }
|
---|
350 |
|
---|
351 | .col-sm-offset-8 {
|
---|
352 | margin-left: 66.66667%;
|
---|
353 | }
|
---|
354 |
|
---|
355 | .col-sm-10,
|
---|
356 | .row.cols-sm-10 > * {
|
---|
357 | max-width: 83.33333%;
|
---|
358 | flex-basis: 83.33333%;
|
---|
359 | }
|
---|
360 |
|
---|
361 | .col-sm-offset-9 {
|
---|
362 | margin-left: 75%;
|
---|
363 | }
|
---|
364 |
|
---|
365 | .col-sm-11,
|
---|
366 | .row.cols-sm-11 > * {
|
---|
367 | max-width: 91.66667%;
|
---|
368 | flex-basis: 91.66667%;
|
---|
369 | }
|
---|
370 |
|
---|
371 | .col-sm-offset-10 {
|
---|
372 | margin-left: 83.33333%;
|
---|
373 | }
|
---|
374 |
|
---|
375 | .col-sm-12,
|
---|
376 | .row.cols-sm-12 > * {
|
---|
377 | max-width: 100%;
|
---|
378 | flex-basis: 100%;
|
---|
379 | }
|
---|
380 |
|
---|
381 | .col-sm-offset-11 {
|
---|
382 | margin-left: 91.66667%;
|
---|
383 | }
|
---|
384 |
|
---|
385 | .col-sm-normal {
|
---|
386 | order: initial;
|
---|
387 | }
|
---|
388 |
|
---|
389 | .col-sm-first {
|
---|
390 | order: -999;
|
---|
391 | }
|
---|
392 |
|
---|
393 | .col-sm-last {
|
---|
394 | order: 999;
|
---|
395 | }
|
---|
396 |
|
---|
397 | @media screen and (min-width: 768px) {
|
---|
398 | .col-md,
|
---|
399 | [class^='col-md-'],
|
---|
400 | [class^='col-md-offset-'],
|
---|
401 | .row[class*='cols-md-'] > * {
|
---|
402 | box-sizing: border-box;
|
---|
403 | flex: 0 0 auto;
|
---|
404 | padding: 0 calc(var(--universal-padding) / 2);
|
---|
405 | }
|
---|
406 | .col-md,
|
---|
407 | .row.cols-md > * {
|
---|
408 | max-width: 100%;
|
---|
409 | flex-grow: 1;
|
---|
410 | flex-basis: 0;
|
---|
411 | }
|
---|
412 | .col-md-1,
|
---|
413 | .row.cols-md-1 > * {
|
---|
414 | max-width: 8.33333%;
|
---|
415 | flex-basis: 8.33333%;
|
---|
416 | }
|
---|
417 | .col-md-offset-0 {
|
---|
418 | margin-left: 0;
|
---|
419 | }
|
---|
420 | .col-md-2,
|
---|
421 | .row.cols-md-2 > * {
|
---|
422 | max-width: 16.66667%;
|
---|
423 | flex-basis: 16.66667%;
|
---|
424 | }
|
---|
425 | .col-md-offset-1 {
|
---|
426 | margin-left: 8.33333%;
|
---|
427 | }
|
---|
428 | .col-md-3,
|
---|
429 | .row.cols-md-3 > * {
|
---|
430 | max-width: 25%;
|
---|
431 | flex-basis: 25%;
|
---|
432 | }
|
---|
433 | .col-md-offset-2 {
|
---|
434 | margin-left: 16.66667%;
|
---|
435 | }
|
---|
436 | .col-md-4,
|
---|
437 | .row.cols-md-4 > * {
|
---|
438 | max-width: 33.33333%;
|
---|
439 | flex-basis: 33.33333%;
|
---|
440 | }
|
---|
441 | .col-md-offset-3 {
|
---|
442 | margin-left: 25%;
|
---|
443 | }
|
---|
444 | .col-md-5,
|
---|
445 | .row.cols-md-5 > * {
|
---|
446 | max-width: 41.66667%;
|
---|
447 | flex-basis: 41.66667%;
|
---|
448 | }
|
---|
449 | .col-md-offset-4 {
|
---|
450 | margin-left: 33.33333%;
|
---|
451 | }
|
---|
452 | .col-md-6,
|
---|
453 | .row.cols-md-6 > * {
|
---|
454 | max-width: 50%;
|
---|
455 | flex-basis: 50%;
|
---|
456 | }
|
---|
457 | .col-md-offset-5 {
|
---|
458 | margin-left: 41.66667%;
|
---|
459 | }
|
---|
460 | .col-md-7,
|
---|
461 | .row.cols-md-7 > * {
|
---|
462 | max-width: 58.33333%;
|
---|
463 | flex-basis: 58.33333%;
|
---|
464 | }
|
---|
465 | .col-md-offset-6 {
|
---|
466 | margin-left: 50%;
|
---|
467 | }
|
---|
468 | .col-md-8,
|
---|
469 | .row.cols-md-8 > * {
|
---|
470 | max-width: 66.66667%;
|
---|
471 | flex-basis: 66.66667%;
|
---|
472 | }
|
---|
473 | .col-md-offset-7 {
|
---|
474 | margin-left: 58.33333%;
|
---|
475 | }
|
---|
476 | .col-md-9,
|
---|
477 | .row.cols-md-9 > * {
|
---|
478 | max-width: 75%;
|
---|
479 | flex-basis: 75%;
|
---|
480 | }
|
---|
481 | .col-md-offset-8 {
|
---|
482 | margin-left: 66.66667%;
|
---|
483 | }
|
---|
484 | .col-md-10,
|
---|
485 | .row.cols-md-10 > * {
|
---|
486 | max-width: 83.33333%;
|
---|
487 | flex-basis: 83.33333%;
|
---|
488 | }
|
---|
489 | .col-md-offset-9 {
|
---|
490 | margin-left: 75%;
|
---|
491 | }
|
---|
492 | .col-md-11,
|
---|
493 | .row.cols-md-11 > * {
|
---|
494 | max-width: 91.66667%;
|
---|
495 | flex-basis: 91.66667%;
|
---|
496 | }
|
---|
497 | .col-md-offset-10 {
|
---|
498 | margin-left: 83.33333%;
|
---|
499 | }
|
---|
500 | .col-md-12,
|
---|
501 | .row.cols-md-12 > * {
|
---|
502 | max-width: 100%;
|
---|
503 | flex-basis: 100%;
|
---|
504 | }
|
---|
505 | .col-md-offset-11 {
|
---|
506 | margin-left: 91.66667%;
|
---|
507 | }
|
---|
508 | .col-md-normal {
|
---|
509 | order: initial;
|
---|
510 | }
|
---|
511 | .col-md-first {
|
---|
512 | order: -999;
|
---|
513 | }
|
---|
514 | .col-md-last {
|
---|
515 | order: 999;
|
---|
516 | }
|
---|
517 | }
|
---|
518 |
|
---|
519 | @media screen and (min-width: 1280px) {
|
---|
520 | .col-lg,
|
---|
521 | [class^='col-lg-'],
|
---|
522 | [class^='col-lg-offset-'],
|
---|
523 | .row[class*='cols-lg-'] > * {
|
---|
524 | box-sizing: border-box;
|
---|
525 | flex: 0 0 auto;
|
---|
526 | padding: 0 calc(var(--universal-padding) / 2);
|
---|
527 | }
|
---|
528 | .col-lg,
|
---|
529 | .row.cols-lg > * {
|
---|
530 | max-width: 100%;
|
---|
531 | flex-grow: 1;
|
---|
532 | flex-basis: 0;
|
---|
533 | }
|
---|
534 | .col-lg-1,
|
---|
535 | .row.cols-lg-1 > * {
|
---|
536 | max-width: 8.33333%;
|
---|
537 | flex-basis: 8.33333%;
|
---|
538 | }
|
---|
539 | .col-lg-offset-0 {
|
---|
540 | margin-left: 0;
|
---|
541 | }
|
---|
542 | .col-lg-2,
|
---|
543 | .row.cols-lg-2 > * {
|
---|
544 | max-width: 16.66667%;
|
---|
545 | flex-basis: 16.66667%;
|
---|
546 | }
|
---|
547 | .col-lg-offset-1 {
|
---|
548 | margin-left: 8.33333%;
|
---|
549 | }
|
---|
550 | .col-lg-3,
|
---|
551 | .row.cols-lg-3 > * {
|
---|
552 | max-width: 25%;
|
---|
553 | flex-basis: 25%;
|
---|
554 | }
|
---|
555 | .col-lg-offset-2 {
|
---|
556 | margin-left: 16.66667%;
|
---|
557 | }
|
---|
558 | .col-lg-4,
|
---|
559 | .row.cols-lg-4 > * {
|
---|
560 | max-width: 33.33333%;
|
---|
561 | flex-basis: 33.33333%;
|
---|
562 | }
|
---|
563 | .col-lg-offset-3 {
|
---|
564 | margin-left: 25%;
|
---|
565 | }
|
---|
566 | .col-lg-5,
|
---|
567 | .row.cols-lg-5 > * {
|
---|
568 | max-width: 41.66667%;
|
---|
569 | flex-basis: 41.66667%;
|
---|
570 | }
|
---|
571 | .col-lg-offset-4 {
|
---|
572 | margin-left: 33.33333%;
|
---|
573 | }
|
---|
574 | .col-lg-6,
|
---|
575 | .row.cols-lg-6 > * {
|
---|
576 | max-width: 50%;
|
---|
577 | flex-basis: 50%;
|
---|
578 | }
|
---|
579 | .col-lg-offset-5 {
|
---|
580 | margin-left: 41.66667%;
|
---|
581 | }
|
---|
582 | .col-lg-7,
|
---|
583 | .row.cols-lg-7 > * {
|
---|
584 | max-width: 58.33333%;
|
---|
585 | flex-basis: 58.33333%;
|
---|
586 | }
|
---|
587 | .col-lg-offset-6 {
|
---|
588 | margin-left: 50%;
|
---|
589 | }
|
---|
590 | .col-lg-8,
|
---|
591 | .row.cols-lg-8 > * {
|
---|
592 | max-width: 66.66667%;
|
---|
593 | flex-basis: 66.66667%;
|
---|
594 | }
|
---|
595 | .col-lg-offset-7 {
|
---|
596 | margin-left: 58.33333%;
|
---|
597 | }
|
---|
598 | .col-lg-9,
|
---|
599 | .row.cols-lg-9 > * {
|
---|
600 | max-width: 75%;
|
---|
601 | flex-basis: 75%;
|
---|
602 | }
|
---|
603 | .col-lg-offset-8 {
|
---|
604 | margin-left: 66.66667%;
|
---|
605 | }
|
---|
606 | .col-lg-10,
|
---|
607 | .row.cols-lg-10 > * {
|
---|
608 | max-width: 83.33333%;
|
---|
609 | flex-basis: 83.33333%;
|
---|
610 | }
|
---|
611 | .col-lg-offset-9 {
|
---|
612 | margin-left: 75%;
|
---|
613 | }
|
---|
614 | .col-lg-11,
|
---|
615 | .row.cols-lg-11 > * {
|
---|
616 | max-width: 91.66667%;
|
---|
617 | flex-basis: 91.66667%;
|
---|
618 | }
|
---|
619 | .col-lg-offset-10 {
|
---|
620 | margin-left: 83.33333%;
|
---|
621 | }
|
---|
622 | .col-lg-12,
|
---|
623 | .row.cols-lg-12 > * {
|
---|
624 | max-width: 100%;
|
---|
625 | flex-basis: 100%;
|
---|
626 | }
|
---|
627 | .col-lg-offset-11 {
|
---|
628 | margin-left: 91.66667%;
|
---|
629 | }
|
---|
630 | .col-lg-normal {
|
---|
631 | order: initial;
|
---|
632 | }
|
---|
633 | .col-lg-first {
|
---|
634 | order: -999;
|
---|
635 | }
|
---|
636 | .col-lg-last {
|
---|
637 | order: 999;
|
---|
638 | }
|
---|
639 | }
|
---|
640 |
|
---|
641 | /* Card component CSS variable definitions */
|
---|
642 | :root {
|
---|
643 | --card-back-color: #f8f8f8;
|
---|
644 | --card-fore-color: #111;
|
---|
645 | --card-border-color: #ddd;
|
---|
646 | }
|
---|
647 |
|
---|
648 | .card {
|
---|
649 | display: flex;
|
---|
650 | flex-direction: column;
|
---|
651 | justify-content: space-between;
|
---|
652 | align-self: center;
|
---|
653 | position: relative;
|
---|
654 | width: 100%;
|
---|
655 | background: var(--card-back-color);
|
---|
656 | color: var(--card-fore-color);
|
---|
657 | border: 0.0625rem solid var(--card-border-color);
|
---|
658 | border-radius: var(--universal-border-radius);
|
---|
659 | margin: var(--universal-margin);
|
---|
660 | overflow: hidden;
|
---|
661 | }
|
---|
662 |
|
---|
663 | @media screen and (min-width: 320px) {
|
---|
664 | .card {
|
---|
665 | max-width: 320px;
|
---|
666 | }
|
---|
667 | }
|
---|
668 |
|
---|
669 | .card > .section {
|
---|
670 | background: var(--card-back-color);
|
---|
671 | color: var(--card-fore-color);
|
---|
672 | box-sizing: border-box;
|
---|
673 | margin: 0;
|
---|
674 | border: 0;
|
---|
675 | border-radius: 0;
|
---|
676 | border-bottom: 0.0625rem solid var(--card-border-color);
|
---|
677 | padding: var(--universal-padding);
|
---|
678 | width: 100%;
|
---|
679 | }
|
---|
680 |
|
---|
681 | .card > .section.media {
|
---|
682 | height: 200px;
|
---|
683 | padding: 0;
|
---|
684 | -o-object-fit: cover;
|
---|
685 | object-fit: cover;
|
---|
686 | }
|
---|
687 |
|
---|
688 | .card > .section:last-child {
|
---|
689 | border-bottom: 0;
|
---|
690 | }
|
---|
691 |
|
---|
692 | /*
|
---|
693 | Custom elements for card elements.
|
---|
694 | */
|
---|
695 | @media screen and (min-width: 240px) {
|
---|
696 | .card.small {
|
---|
697 | max-width: 240px;
|
---|
698 | }
|
---|
699 | }
|
---|
700 |
|
---|
701 | @media screen and (min-width: 480px) {
|
---|
702 | .card.large {
|
---|
703 | max-width: 480px;
|
---|
704 | }
|
---|
705 | }
|
---|
706 |
|
---|
707 | .card.fluid {
|
---|
708 | max-width: 100%;
|
---|
709 | width: auto;
|
---|
710 | }
|
---|
711 |
|
---|
712 | .card.warning {
|
---|
713 | --card-back-color: #ffca28;
|
---|
714 | --card-border-color: #e8b825;
|
---|
715 | }
|
---|
716 |
|
---|
717 | .card.error {
|
---|
718 | --card-back-color: #b71c1c;
|
---|
719 | --card-fore-color: #f8f8f8;
|
---|
720 | --card-border-color: #a71a1a;
|
---|
721 | }
|
---|
722 |
|
---|
723 | .card > .section.dark {
|
---|
724 | --card-back-color: #e0e0e0;
|
---|
725 | }
|
---|
726 |
|
---|
727 | .card > .section.double-padded {
|
---|
728 | padding: calc(1.5 * var(--universal-padding));
|
---|
729 | }
|
---|
730 |
|
---|
731 | /*
|
---|
732 | Definitions for forms and input elements.
|
---|
733 | */
|
---|
734 | /* Input_control module CSS variable definitions */
|
---|
735 | :root {
|
---|
736 | --form-back-color: #f0f0f0;
|
---|
737 | --form-fore-color: #111;
|
---|
738 | --form-border-color: #ddd;
|
---|
739 | --input-back-color: #f8f8f8;
|
---|
740 | --input-fore-color: #111;
|
---|
741 | --input-border-color: #ddd;
|
---|
742 | --input-focus-color: #0288d1;
|
---|
743 | --input-invalid-color: #d32f2f;
|
---|
744 | --button-back-color: #e2e2e2;
|
---|
745 | --button-hover-back-color: #dcdcdc;
|
---|
746 | --button-fore-color: #212121;
|
---|
747 | --button-border-color: transparent;
|
---|
748 | --button-hover-border-color: transparent;
|
---|
749 | --button-group-border-color: rgba(124, 124, 124, 0.54);
|
---|
750 | }
|
---|
751 |
|
---|
752 | form {
|
---|
753 | background: var(--form-back-color);
|
---|
754 | color: var(--form-fore-color);
|
---|
755 | border: 0.0625rem solid var(--form-border-color);
|
---|
756 | border-radius: var(--universal-border-radius);
|
---|
757 | margin: var(--universal-margin);
|
---|
758 | padding: calc(2 * var(--universal-padding)) var(--universal-padding);
|
---|
759 | }
|
---|
760 |
|
---|
761 | fieldset {
|
---|
762 | border: 0.0625rem solid var(--form-border-color);
|
---|
763 | border-radius: var(--universal-border-radius);
|
---|
764 | margin: calc(var(--universal-margin) / 4);
|
---|
765 | padding: var(--universal-padding);
|
---|
766 | }
|
---|
767 |
|
---|
768 | legend {
|
---|
769 | box-sizing: border-box;
|
---|
770 | display: table;
|
---|
771 | max-width: 100%;
|
---|
772 | white-space: normal;
|
---|
773 | font-weight: 700;
|
---|
774 | padding: calc(var(--universal-padding) / 2);
|
---|
775 | }
|
---|
776 |
|
---|
777 | label {
|
---|
778 | padding: calc(var(--universal-padding) / 2) var(--universal-padding);
|
---|
779 | }
|
---|
780 |
|
---|
781 | .input-group {
|
---|
782 | display: inline-block;
|
---|
783 | }
|
---|
784 |
|
---|
785 | .input-group.fluid {
|
---|
786 | display: flex;
|
---|
787 | align-items: center;
|
---|
788 | justify-content: center;
|
---|
789 | }
|
---|
790 |
|
---|
791 | .input-group.fluid > input {
|
---|
792 | max-width: 100%;
|
---|
793 | flex-grow: 1;
|
---|
794 | flex-basis: 0px;
|
---|
795 | }
|
---|
796 |
|
---|
797 | @media screen and (max-width: 767px) {
|
---|
798 | .input-group.fluid {
|
---|
799 | align-items: stretch;
|
---|
800 | flex-direction: column;
|
---|
801 | }
|
---|
802 | }
|
---|
803 |
|
---|
804 | .input-group.vertical {
|
---|
805 | display: flex;
|
---|
806 | align-items: stretch;
|
---|
807 | flex-direction: column;
|
---|
808 | }
|
---|
809 |
|
---|
810 | .input-group.vertical > input {
|
---|
811 | max-width: 100%;
|
---|
812 | flex-grow: 1;
|
---|
813 | flex-basis: 0px;
|
---|
814 | }
|
---|
815 |
|
---|
816 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
|
---|
817 | height: auto;
|
---|
818 | }
|
---|
819 |
|
---|
820 | [type="search"] {
|
---|
821 | -webkit-appearance: textfield;
|
---|
822 | outline-offset: -2px;
|
---|
823 | }
|
---|
824 |
|
---|
825 | [type="search"]::-webkit-search-cancel-button,
|
---|
826 | [type="search"]::-webkit-search-decoration {
|
---|
827 | -webkit-appearance: none;
|
---|
828 | }
|
---|
829 |
|
---|
830 | input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
---|
831 | [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
|
---|
832 | box-sizing: border-box;
|
---|
833 | background: var(--input-back-color);
|
---|
834 | color: var(--input-fore-color);
|
---|
835 | border: 0.0625rem solid var(--input-border-color);
|
---|
836 | border-radius: var(--universal-border-radius);
|
---|
837 | margin: calc(var(--universal-margin) / 2);
|
---|
838 | padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
|
---|
839 | }
|
---|
840 |
|
---|
841 | input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
|
---|
842 | border-color: var(--input-focus-color);
|
---|
843 | box-shadow: none;
|
---|
844 | }
|
---|
845 |
|
---|
846 | input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
|
---|
847 | border-color: var(--input-invalid-color);
|
---|
848 | box-shadow: none;
|
---|
849 | }
|
---|
850 |
|
---|
851 | input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
|
---|
852 | background: var(--secondary-back-color);
|
---|
853 | }
|
---|
854 |
|
---|
855 | select {
|
---|
856 | max-width: 100%;
|
---|
857 | }
|
---|
858 |
|
---|
859 | option {
|
---|
860 | overflow: hidden;
|
---|
861 | text-overflow: ellipsis;
|
---|
862 | }
|
---|
863 |
|
---|
864 | [type="checkbox"], [type="radio"] {
|
---|
865 | -webkit-appearance: none;
|
---|
866 | -moz-appearance: none;
|
---|
867 | appearance: none;
|
---|
868 | position: relative;
|
---|
869 | height: calc(1rem + var(--universal-padding) / 2);
|
---|
870 | width: calc(1rem + var(--universal-padding) / 2);
|
---|
871 | vertical-align: text-bottom;
|
---|
872 | padding: 0;
|
---|
873 | flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
|
---|
874 | flex-grow: 0 !important;
|
---|
875 | }
|
---|
876 |
|
---|
877 | [type="checkbox"]:checked:before, [type="radio"]:checked:before {
|
---|
878 | position: absolute;
|
---|
879 | }
|
---|
880 |
|
---|
881 | [type="checkbox"]:checked:before {
|
---|
882 | content: '\2713';
|
---|
883 | font-family: sans-serif;
|
---|
884 | font-size: calc(1rem + var(--universal-padding) / 2);
|
---|
885 | top: calc(0rem - var(--universal-padding));
|
---|
886 | left: calc(var(--universal-padding) / 4);
|
---|
887 | }
|
---|
888 |
|
---|
889 | [type="radio"] {
|
---|
890 | border-radius: 100%;
|
---|
891 | }
|
---|
892 |
|
---|
893 | [type="radio"]:checked:before {
|
---|
894 | border-radius: 100%;
|
---|
895 | content: '';
|
---|
896 | top: calc(0.0625rem + var(--universal-padding) / 2);
|
---|
897 | left: calc(0.0625rem + var(--universal-padding) / 2);
|
---|
898 | background: var(--input-fore-color);
|
---|
899 | width: 0.5rem;
|
---|
900 | height: 0.5rem;
|
---|
901 | }
|
---|
902 |
|
---|
903 | :placeholder-shown {
|
---|
904 | color: var(--input-fore-color);
|
---|
905 | }
|
---|
906 |
|
---|
907 | ::-ms-placeholder {
|
---|
908 | color: var(--input-fore-color);
|
---|
909 | opacity: 0.54;
|
---|
910 | }
|
---|
911 |
|
---|
912 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
---|
913 | border-style: none;
|
---|
914 | padding: 0;
|
---|
915 | }
|
---|
916 |
|
---|
917 | button, html [type="button"], [type="reset"], [type="submit"] {
|
---|
918 | -webkit-appearance: button;
|
---|
919 | }
|
---|
920 |
|
---|
921 | button {
|
---|
922 | overflow: visible;
|
---|
923 | text-transform: none;
|
---|
924 | }
|
---|
925 |
|
---|
926 | button, [type="button"], [type="submit"], [type="reset"],
|
---|
927 | a.button, label.button, .button,
|
---|
928 | a[role="button"], label[role="button"], [role="button"] {
|
---|
929 | display: inline-block;
|
---|
930 | background: var(--button-back-color);
|
---|
931 | color: var(--button-fore-color);
|
---|
932 | border: 0.0625rem solid var(--button-border-color);
|
---|
933 | border-radius: var(--universal-border-radius);
|
---|
934 | padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
|
---|
935 | margin: var(--universal-margin);
|
---|
936 | text-decoration: none;
|
---|
937 | cursor: pointer;
|
---|
938 | transition: background 0.3s;
|
---|
939 | }
|
---|
940 |
|
---|
941 | button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
|
---|
942 | a.button:hover,
|
---|
943 | a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
|
---|
944 | a[role="button"]:hover,
|
---|
945 | a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
|
---|
946 | background: var(--button-hover-back-color);
|
---|
947 | border-color: var(--button-hover-border-color);
|
---|
948 | }
|
---|
949 |
|
---|
950 | input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
|
---|
951 | cursor: not-allowed;
|
---|
952 | opacity: 0.75;
|
---|
953 | }
|
---|
954 |
|
---|
955 | .button-group {
|
---|
956 | display: flex;
|
---|
957 | border: 0.0625rem solid var(--button-group-border-color);
|
---|
958 | border-radius: var(--universal-border-radius);
|
---|
959 | margin: var(--universal-margin);
|
---|
960 | }
|
---|
961 |
|
---|
962 | .button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
|
---|
963 | .button-group > .button, .button-group > [role="button"] {
|
---|
964 | margin: 0;
|
---|
965 | max-width: 100%;
|
---|
966 | flex: 1 1 auto;
|
---|
967 | text-align: center;
|
---|
968 | border: 0;
|
---|
969 | border-radius: 0;
|
---|
970 | box-shadow: none;
|
---|
971 | }
|
---|
972 |
|
---|
973 | .button-group > :not(:first-child) {
|
---|
974 | border-left: 0.0625rem solid var(--button-group-border-color);
|
---|
975 | }
|
---|
976 |
|
---|
977 | @media screen and (max-width: 767px) {
|
---|
978 | .button-group {
|
---|
979 | flex-direction: column;
|
---|
980 | }
|
---|
981 | .button-group > :not(:first-child) {
|
---|
982 | border: 0;
|
---|
983 | border-top: 0.0625rem solid var(--button-group-border-color);
|
---|
984 | }
|
---|
985 | }
|
---|
986 |
|
---|
987 | /*
|
---|
988 | Custom elements for forms and input elements.
|
---|
989 | */
|
---|
990 | button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
|
---|
991 | --button-back-color: #1976d2;
|
---|
992 | --button-fore-color: #f8f8f8;
|
---|
993 | }
|
---|
994 |
|
---|
995 | button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
|
---|
996 | --button-hover-back-color: #1565c0;
|
---|
997 | }
|
---|
998 |
|
---|
999 | button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
|
---|
1000 | --button-back-color: #d32f2f;
|
---|
1001 | --button-fore-color: #f8f8f8;
|
---|
1002 | }
|
---|
1003 |
|
---|
1004 | button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus {
|
---|
1005 | --button-hover-back-color: #c62828;
|
---|
1006 | }
|
---|
1007 |
|
---|
1008 | button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
|
---|
1009 | --button-back-color: #308732;
|
---|
1010 | --button-fore-color: #f8f8f8;
|
---|
1011 | }
|
---|
1012 |
|
---|
1013 | button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus {
|
---|
1014 | --button-hover-back-color: #277529;
|
---|
1015 | }
|
---|
1016 |
|
---|
1017 | button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse {
|
---|
1018 | --button-back-color: #212121;
|
---|
1019 | --button-fore-color: #f8f8f8;
|
---|
1020 | }
|
---|
1021 |
|
---|
1022 | button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus {
|
---|
1023 | --button-hover-back-color: #111;
|
---|
1024 | }
|
---|
1025 |
|
---|
1026 | button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small {
|
---|
1027 | padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
|
---|
1028 | margin: var(--universal-margin);
|
---|
1029 | }
|
---|
1030 |
|
---|
1031 | button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large {
|
---|
1032 | padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
|
---|
1033 | margin: var(--universal-margin);
|
---|
1034 | }
|
---|
1035 |
|
---|
1036 | /*
|
---|
1037 | Definitions for navigation elements.
|
---|
1038 | */
|
---|
1039 | /* Navigation module CSS variable definitions */
|
---|
1040 | :root {
|
---|
1041 | --header-back-color: #f8f8f8;
|
---|
1042 | --header-hover-back-color: #f0f0f0;
|
---|
1043 | --header-fore-color: #444;
|
---|
1044 | --header-border-color: #ddd;
|
---|
1045 | --nav-back-color: #f8f8f8;
|
---|
1046 | --nav-hover-back-color: #f0f0f0;
|
---|
1047 | --nav-fore-color: #444;
|
---|
1048 | --nav-border-color: #ddd;
|
---|
1049 | --nav-link-color: #0277bd;
|
---|
1050 | --footer-fore-color: #444;
|
---|
1051 | --footer-back-color: #f8f8f8;
|
---|
1052 | --footer-border-color: #ddd;
|
---|
1053 | --footer-link-color: #0277bd;
|
---|
1054 | --drawer-back-color: #f8f8f8;
|
---|
1055 | --drawer-hover-back-color: #f0f0f0;
|
---|
1056 | --drawer-border-color: #ddd;
|
---|
1057 | --drawer-close-color: #444;
|
---|
1058 | }
|
---|
1059 |
|
---|
1060 | header {
|
---|
1061 | height: 3.1875rem;
|
---|
1062 | background: var(--header-back-color);
|
---|
1063 | color: var(--header-fore-color);
|
---|
1064 | border-bottom: 0.0625rem solid var(--header-border-color);
|
---|
1065 | padding: calc(var(--universal-padding) / 4) 0;
|
---|
1066 | white-space: nowrap;
|
---|
1067 | overflow-x: auto;
|
---|
1068 | overflow-y: hidden;
|
---|
1069 | }
|
---|
1070 |
|
---|
1071 | header.row {
|
---|
1072 | box-sizing: content-box;
|
---|
1073 | }
|
---|
1074 |
|
---|
1075 | header .logo {
|
---|
1076 | color: var(--header-fore-color);
|
---|
1077 | font-size: 1.75rem;
|
---|
1078 | padding: var(--universal-padding) calc(2 * var(--universal-padding));
|
---|
1079 | text-decoration: none;
|
---|
1080 | }
|
---|
1081 |
|
---|
1082 | header button, header [type="button"], header .button, header [role="button"] {
|
---|
1083 | box-sizing: border-box;
|
---|
1084 | position: relative;
|
---|
1085 | top: calc(0rem - var(--universal-padding) / 4);
|
---|
1086 | height: calc(3.1875rem + var(--universal-padding) / 2);
|
---|
1087 | background: var(--header-back-color);
|
---|
1088 | line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
|
---|
1089 | text-align: center;
|
---|
1090 | color: var(--header-fore-color);
|
---|
1091 | border: 0;
|
---|
1092 | border-radius: 0;
|
---|
1093 | margin: 0;
|
---|
1094 | text-transform: uppercase;
|
---|
1095 | }
|
---|
1096 |
|
---|
1097 | header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus {
|
---|
1098 | background: var(--header-hover-back-color);
|
---|
1099 | }
|
---|
1100 |
|
---|
1101 | nav {
|
---|
1102 | background: var(--nav-back-color);
|
---|
1103 | color: var(--nav-fore-color);
|
---|
1104 | border: 0.0625rem solid var(--nav-border-color);
|
---|
1105 | border-radius: var(--universal-border-radius);
|
---|
1106 | margin: var(--universal-margin);
|
---|
1107 | }
|
---|
1108 |
|
---|
1109 | nav * {
|
---|
1110 | padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
|
---|
1111 | }
|
---|
1112 |
|
---|
1113 | nav a, nav a:visited {
|
---|
1114 | display: block;
|
---|
1115 | color: var(--nav-link-color);
|
---|
1116 | border-radius: var(--universal-border-radius);
|
---|
1117 | transition: background 0.3s;
|
---|
1118 | }
|
---|
1119 |
|
---|
1120 | nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
|
---|
1121 | text-decoration: none;
|
---|
1122 | background: var(--nav-hover-back-color);
|
---|
1123 | }
|
---|
1124 |
|
---|
1125 | nav .sublink-1 {
|
---|
1126 | position: relative;
|
---|
1127 | margin-left: calc(2 * var(--universal-padding));
|
---|
1128 | }
|
---|
1129 |
|
---|
1130 | nav .sublink-1:before {
|
---|
1131 | position: absolute;
|
---|
1132 | left: calc(var(--universal-padding) - 1 * var(--universal-padding));
|
---|
1133 | top: -0.0625rem;
|
---|
1134 | content: '';
|
---|
1135 | height: 100%;
|
---|
1136 | border: 0.0625rem solid var(--nav-border-color);
|
---|
1137 | border-left: 0;
|
---|
1138 | }
|
---|
1139 |
|
---|
1140 | nav .sublink-2 {
|
---|
1141 | position: relative;
|
---|
1142 | margin-left: calc(4 * var(--universal-padding));
|
---|
1143 | }
|
---|
1144 |
|
---|
1145 | nav .sublink-2:before {
|
---|
1146 | position: absolute;
|
---|
1147 | left: calc(var(--universal-padding) - 3 * var(--universal-padding));
|
---|
1148 | top: -0.0625rem;
|
---|
1149 | content: '';
|
---|
1150 | height: 100%;
|
---|
1151 | border: 0.0625rem solid var(--nav-border-color);
|
---|
1152 | border-left: 0;
|
---|
1153 | }
|
---|
1154 |
|
---|
1155 | footer {
|
---|
1156 | background: var(--footer-back-color);
|
---|
1157 | color: var(--footer-fore-color);
|
---|
1158 | border-top: 0.0625rem solid var(--footer-border-color);
|
---|
1159 | padding: calc(2 * var(--universal-padding)) var(--universal-padding);
|
---|
1160 | font-size: 0.875rem;
|
---|
1161 | }
|
---|
1162 |
|
---|
1163 | footer a, footer a:visited {
|
---|
1164 | color: var(--footer-link-color);
|
---|
1165 | }
|
---|
1166 |
|
---|
1167 | header.sticky {
|
---|
1168 | position: -webkit-sticky;
|
---|
1169 | position: sticky;
|
---|
1170 | z-index: 1101;
|
---|
1171 | top: 0;
|
---|
1172 | }
|
---|
1173 |
|
---|
1174 | footer.sticky {
|
---|
1175 | position: -webkit-sticky;
|
---|
1176 | position: sticky;
|
---|
1177 | z-index: 1101;
|
---|
1178 | bottom: 0;
|
---|
1179 | }
|
---|
1180 |
|
---|
1181 | .drawer-toggle:before {
|
---|
1182 | display: inline-block;
|
---|
1183 | position: relative;
|
---|
1184 | vertical-align: bottom;
|
---|
1185 | content: '\00a0\2261\00a0';
|
---|
1186 | font-family: sans-serif;
|
---|
1187 | font-size: 1.5em;
|
---|
1188 | }
|
---|
1189 |
|
---|
1190 | @media screen and (min-width: 768px) {
|
---|
1191 | .drawer-toggle:not(.persistent) {
|
---|
1192 | display: none;
|
---|
1193 | }
|
---|
1194 | }
|
---|
1195 |
|
---|
1196 | [type="checkbox"].drawer {
|
---|
1197 | height: 1px;
|
---|
1198 | width: 1px;
|
---|
1199 | margin: -1px;
|
---|
1200 | overflow: hidden;
|
---|
1201 | position: absolute;
|
---|
1202 | clip: rect(0 0 0 0);
|
---|
1203 | -webkit-clip-path: inset(100%);
|
---|
1204 | clip-path: inset(100%);
|
---|
1205 | }
|
---|
1206 |
|
---|
1207 | [type="checkbox"].drawer + * {
|
---|
1208 | display: block;
|
---|
1209 | box-sizing: border-box;
|
---|
1210 | position: fixed;
|
---|
1211 | top: 0;
|
---|
1212 | width: 320px;
|
---|
1213 | height: 100vh;
|
---|
1214 | overflow-y: auto;
|
---|
1215 | background: var(--drawer-back-color);
|
---|
1216 | border: 0.0625rem solid var(--drawer-border-color);
|
---|
1217 | border-radius: 0;
|
---|
1218 | margin: 0;
|
---|
1219 | z-index: 1110;
|
---|
1220 | right: -320px;
|
---|
1221 | transition: right 0.3s;
|
---|
1222 | }
|
---|
1223 |
|
---|
1224 | [type="checkbox"].drawer + * .drawer-close {
|
---|
1225 | position: absolute;
|
---|
1226 | top: var(--universal-margin);
|
---|
1227 | right: var(--universal-margin);
|
---|
1228 | z-index: 1111;
|
---|
1229 | width: 2rem;
|
---|
1230 | height: 2rem;
|
---|
1231 | border-radius: var(--universal-border-radius);
|
---|
1232 | padding: var(--universal-padding);
|
---|
1233 | margin: 0;
|
---|
1234 | cursor: pointer;
|
---|
1235 | transition: background 0.3s;
|
---|
1236 | }
|
---|
1237 |
|
---|
1238 | [type="checkbox"].drawer + * .drawer-close:before {
|
---|
1239 | display: block;
|
---|
1240 | content: '\00D7';
|
---|
1241 | color: var(--drawer-close-color);
|
---|
1242 | position: relative;
|
---|
1243 | font-family: sans-serif;
|
---|
1244 | font-size: 2rem;
|
---|
1245 | line-height: 1;
|
---|
1246 | text-align: center;
|
---|
1247 | }
|
---|
1248 |
|
---|
1249 | [type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
|
---|
1250 | background: var(--drawer-hover-back-color);
|
---|
1251 | }
|
---|
1252 |
|
---|
1253 | @media screen and (max-width: 320px) {
|
---|
1254 | [type="checkbox"].drawer + * {
|
---|
1255 | width: 100%;
|
---|
1256 | }
|
---|
1257 | }
|
---|
1258 |
|
---|
1259 | [type="checkbox"].drawer:checked + * {
|
---|
1260 | right: 0;
|
---|
1261 | }
|
---|
1262 |
|
---|
1263 | @media screen and (min-width: 768px) {
|
---|
1264 | [type="checkbox"].drawer:not(.persistent) + * {
|
---|
1265 | position: static;
|
---|
1266 | height: 100%;
|
---|
1267 | z-index: 1100;
|
---|
1268 | }
|
---|
1269 | [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
|
---|
1270 | display: none;
|
---|
1271 | }
|
---|
1272 | }
|
---|
1273 |
|
---|
1274 | /*
|
---|
1275 | Definitions for the responsive table component.
|
---|
1276 | */
|
---|
1277 | /* Table module CSS variable definitions. */
|
---|
1278 | :root {
|
---|
1279 | --table-border-color: #aaa;
|
---|
1280 | --table-border-separator-color: #666;
|
---|
1281 | --table-head-back-color: #e6e6e6;
|
---|
1282 | --table-head-fore-color: #111;
|
---|
1283 | --table-body-back-color: #f8f8f8;
|
---|
1284 | --table-body-fore-color: #111;
|
---|
1285 | --table-body-alt-back-color: #eee;
|
---|
1286 | }
|
---|
1287 |
|
---|
1288 | table {
|
---|
1289 | border-collapse: separate;
|
---|
1290 | border-spacing: 0;
|
---|
1291 | margin: 0;
|
---|
1292 | display: flex;
|
---|
1293 | flex: 0 1 auto;
|
---|
1294 | flex-flow: row wrap;
|
---|
1295 | padding: var(--universal-padding);
|
---|
1296 | padding-top: 0;
|
---|
1297 | }
|
---|
1298 |
|
---|
1299 | table caption {
|
---|
1300 | font-size: 1.5rem;
|
---|
1301 | margin: calc(2 * var(--universal-margin)) 0;
|
---|
1302 | max-width: 100%;
|
---|
1303 | flex: 0 0 100%;
|
---|
1304 | }
|
---|
1305 |
|
---|
1306 | table thead, table tbody {
|
---|
1307 | display: flex;
|
---|
1308 | flex-flow: row wrap;
|
---|
1309 | border: 0.0625rem solid var(--table-border-color);
|
---|
1310 | }
|
---|
1311 |
|
---|
1312 | table thead {
|
---|
1313 | z-index: 999;
|
---|
1314 | border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
|
---|
1315 | border-bottom: 0.0625rem solid var(--table-border-separator-color);
|
---|
1316 | }
|
---|
1317 |
|
---|
1318 | table tbody {
|
---|
1319 | border-top: 0;
|
---|
1320 | margin-top: calc(0 - var(--universal-margin));
|
---|
1321 | border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
---|
1322 | }
|
---|
1323 |
|
---|
1324 | table tr {
|
---|
1325 | display: flex;
|
---|
1326 | padding: 0;
|
---|
1327 | }
|
---|
1328 |
|
---|
1329 | table th, table td {
|
---|
1330 | padding: calc(2 * var(--universal-padding));
|
---|
1331 | }
|
---|
1332 |
|
---|
1333 | table th {
|
---|
1334 | text-align: left;
|
---|
1335 | background: var(--table-head-back-color);
|
---|
1336 | color: var(--table-head-fore-color);
|
---|
1337 | }
|
---|
1338 |
|
---|
1339 | table td {
|
---|
1340 | background: var(--table-body-back-color);
|
---|
1341 | color: var(--table-body-fore-color);
|
---|
1342 | border-top: 0.0625rem solid var(--table-border-color);
|
---|
1343 | }
|
---|
1344 |
|
---|
1345 | table:not(.horizontal) {
|
---|
1346 | overflow: auto;
|
---|
1347 | max-height: 400px;
|
---|
1348 | }
|
---|
1349 |
|
---|
1350 | table:not(.horizontal) thead, table:not(.horizontal) tbody {
|
---|
1351 | max-width: 100%;
|
---|
1352 | flex: 0 0 100%;
|
---|
1353 | }
|
---|
1354 |
|
---|
1355 | table:not(.horizontal) tr {
|
---|
1356 | flex-flow: row wrap;
|
---|
1357 | flex: 0 0 100%;
|
---|
1358 | }
|
---|
1359 |
|
---|
1360 | table:not(.horizontal) th, table:not(.horizontal) td {
|
---|
1361 | flex: 1 0 0%;
|
---|
1362 | overflow: hidden;
|
---|
1363 | text-overflow: ellipsis;
|
---|
1364 | }
|
---|
1365 |
|
---|
1366 | table:not(.horizontal) thead {
|
---|
1367 | position: sticky;
|
---|
1368 | top: 0;
|
---|
1369 | }
|
---|
1370 |
|
---|
1371 | table:not(.horizontal) tbody tr:first-child td {
|
---|
1372 | border-top: 0;
|
---|
1373 | }
|
---|
1374 |
|
---|
1375 | table.horizontal {
|
---|
1376 | border: 0;
|
---|
1377 | }
|
---|
1378 |
|
---|
1379 | table.horizontal thead, table.horizontal tbody {
|
---|
1380 | border: 0;
|
---|
1381 | flex: .2 0 0;
|
---|
1382 | flex-flow: row nowrap;
|
---|
1383 | }
|
---|
1384 |
|
---|
1385 | table.horizontal tbody {
|
---|
1386 | overflow: auto;
|
---|
1387 | justify-content: space-between;
|
---|
1388 | flex: .8 0 0;
|
---|
1389 | margin-left: 0;
|
---|
1390 | padding-bottom: calc(var(--universal-padding) / 4);
|
---|
1391 | }
|
---|
1392 |
|
---|
1393 | table.horizontal tr {
|
---|
1394 | flex-direction: column;
|
---|
1395 | flex: 1 0 auto;
|
---|
1396 | }
|
---|
1397 |
|
---|
1398 | table.horizontal th, table.horizontal td {
|
---|
1399 | width: auto;
|
---|
1400 | border: 0;
|
---|
1401 | border-bottom: 0.0625rem solid var(--table-border-color);
|
---|
1402 | }
|
---|
1403 |
|
---|
1404 | table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
|
---|
1405 | border-top: 0;
|
---|
1406 | }
|
---|
1407 |
|
---|
1408 | table.horizontal th {
|
---|
1409 | text-align: right;
|
---|
1410 | border-left: 0.0625rem solid var(--table-border-color);
|
---|
1411 | border-right: 0.0625rem solid var(--table-border-separator-color);
|
---|
1412 | }
|
---|
1413 |
|
---|
1414 | table.horizontal thead tr:first-child {
|
---|
1415 | padding-left: 0;
|
---|
1416 | }
|
---|
1417 |
|
---|
1418 | table.horizontal th:first-child, table.horizontal td:first-child {
|
---|
1419 | border-top: 0.0625rem solid var(--table-border-color);
|
---|
1420 | }
|
---|
1421 |
|
---|
1422 | table.horizontal tbody tr:last-child td {
|
---|
1423 | border-right: 0.0625rem solid var(--table-border-color);
|
---|
1424 | }
|
---|
1425 |
|
---|
1426 | table.horizontal tbody tr:last-child td:first-child {
|
---|
1427 | border-top-right-radius: 0.25rem;
|
---|
1428 | }
|
---|
1429 |
|
---|
1430 | table.horizontal tbody tr:last-child td:last-child {
|
---|
1431 | border-bottom-right-radius: 0.25rem;
|
---|
1432 | }
|
---|
1433 |
|
---|
1434 | table.horizontal thead tr:first-child th:first-child {
|
---|
1435 | border-top-left-radius: 0.25rem;
|
---|
1436 | }
|
---|
1437 |
|
---|
1438 | table.horizontal thead tr:first-child th:last-child {
|
---|
1439 | border-bottom-left-radius: 0.25rem;
|
---|
1440 | }
|
---|
1441 |
|
---|
1442 | @media screen and (max-width: 767px) {
|
---|
1443 | table, table.horizontal {
|
---|
1444 | border-collapse: collapse;
|
---|
1445 | border: 0;
|
---|
1446 | width: 100%;
|
---|
1447 | display: table;
|
---|
1448 | }
|
---|
1449 | table thead, table th, table.horizontal thead, table.horizontal th {
|
---|
1450 | border: 0;
|
---|
1451 | height: 1px;
|
---|
1452 | width: 1px;
|
---|
1453 | margin: -1px;
|
---|
1454 | overflow: hidden;
|
---|
1455 | padding: 0;
|
---|
1456 | position: absolute;
|
---|
1457 | clip: rect(0 0 0 0);
|
---|
1458 | -webkit-clip-path: inset(100%);
|
---|
1459 | clip-path: inset(100%);
|
---|
1460 | }
|
---|
1461 | table tbody, table.horizontal tbody {
|
---|
1462 | border: 0;
|
---|
1463 | display: table-row-group;
|
---|
1464 | }
|
---|
1465 | table tr, table.horizontal tr {
|
---|
1466 | display: block;
|
---|
1467 | border: 0.0625rem solid var(--table-border-color);
|
---|
1468 | border-radius: var(--universal-border-radius);
|
---|
1469 | background: #fafafa;
|
---|
1470 | padding: var(--universal-padding);
|
---|
1471 | margin: var(--universal-margin);
|
---|
1472 | margin-bottom: calc(2 * var(--universal-margin));
|
---|
1473 | }
|
---|
1474 | table th, table td, table.horizontal th, table.horizontal td {
|
---|
1475 | width: auto;
|
---|
1476 | }
|
---|
1477 | table td, table.horizontal td {
|
---|
1478 | display: block;
|
---|
1479 | border: 0;
|
---|
1480 | text-align: right;
|
---|
1481 | }
|
---|
1482 | table td:before, table.horizontal td:before {
|
---|
1483 | content: attr(data-label);
|
---|
1484 | float: left;
|
---|
1485 | font-weight: 600;
|
---|
1486 | }
|
---|
1487 | table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child {
|
---|
1488 | border-top: 0;
|
---|
1489 | }
|
---|
1490 | table tbody tr:last-child td, table.horizontal tbody tr:last-child td {
|
---|
1491 | border-right: 0;
|
---|
1492 | }
|
---|
1493 | }
|
---|
1494 |
|
---|
1495 | :root {
|
---|
1496 | --table-body-alt-back-color: #eee;
|
---|
1497 | }
|
---|
1498 |
|
---|
1499 | table.striped tr:nth-of-type(2n) > td {
|
---|
1500 | background: var(--table-body-alt-back-color);
|
---|
1501 | }
|
---|
1502 |
|
---|
1503 | @media screen and (max-width: 768px) {
|
---|
1504 | table.striped tr:nth-of-type(2n) {
|
---|
1505 | background: var(--table-body-alt-back-color);
|
---|
1506 | }
|
---|
1507 | }
|
---|
1508 |
|
---|
1509 | :root {
|
---|
1510 | --table-body-hover-back-color: #90caf9;
|
---|
1511 | }
|
---|
1512 |
|
---|
1513 | table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
|
---|
1514 | background: var(--table-body-hover-back-color);
|
---|
1515 | }
|
---|
1516 |
|
---|
1517 | @media screen and (max-width: 768px) {
|
---|
1518 | table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
|
---|
1519 | background: var(--table-body-hover-back-color);
|
---|
1520 | }
|
---|
1521 | }
|
---|
1522 |
|
---|
1523 | /*
|
---|
1524 | Definitions for contextual background elements, toasts and tooltips.
|
---|
1525 | */
|
---|
1526 | /* Contextual module CSS variable definitions */
|
---|
1527 | :root {
|
---|
1528 | --mark-back-color: #0277bd;
|
---|
1529 | --mark-fore-color: #fafafa;
|
---|
1530 | }
|
---|
1531 |
|
---|
1532 | mark {
|
---|
1533 | background: var(--mark-back-color);
|
---|
1534 | color: var(--mark-fore-color);
|
---|
1535 | font-size: 0.95em;
|
---|
1536 | line-height: 1em;
|
---|
1537 | border-radius: var(--universal-border-radius);
|
---|
1538 | padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
|
---|
1539 | }
|
---|
1540 |
|
---|
1541 | mark.inline-block {
|
---|
1542 | display: inline-block;
|
---|
1543 | font-size: 1em;
|
---|
1544 | line-height: 1.5;
|
---|
1545 | padding: calc(var(--universal-padding) / 2) var(--universal-padding);
|
---|
1546 | }
|
---|
1547 |
|
---|
1548 | :root {
|
---|
1549 | --toast-back-color: #424242;
|
---|
1550 | --toast-fore-color: #fafafa;
|
---|
1551 | }
|
---|
1552 |
|
---|
1553 | .toast {
|
---|
1554 | position: fixed;
|
---|
1555 | bottom: calc(var(--universal-margin) * 3);
|
---|
1556 | left: 50%;
|
---|
1557 | transform: translate(-50%, -50%);
|
---|
1558 | z-index: 1111;
|
---|
1559 | color: var(--toast-fore-color);
|
---|
1560 | background: var(--toast-back-color);
|
---|
1561 | border-radius: calc(var(--universal-border-radius) * 16);
|
---|
1562 | padding: var(--universal-padding) calc(var(--universal-padding) * 3);
|
---|
1563 | }
|
---|
1564 |
|
---|
1565 | :root {
|
---|
1566 | --tooltip-back-color: #212121;
|
---|
1567 | --tooltip-fore-color: #fafafa;
|
---|
1568 | }
|
---|
1569 |
|
---|
1570 | .tooltip {
|
---|
1571 | position: relative;
|
---|
1572 | display: inline-block;
|
---|
1573 | }
|
---|
1574 |
|
---|
1575 | .tooltip:before, .tooltip:after {
|
---|
1576 | position: absolute;
|
---|
1577 | opacity: 0;
|
---|
1578 | clip: rect(0 0 0 0);
|
---|
1579 | -webkit-clip-path: inset(100%);
|
---|
1580 | clip-path: inset(100%);
|
---|
1581 | transition: all 0.3s;
|
---|
1582 | z-index: 1010;
|
---|
1583 | left: 50%;
|
---|
1584 | }
|
---|
1585 |
|
---|
1586 | .tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
|
---|
1587 | bottom: 75%;
|
---|
1588 | }
|
---|
1589 |
|
---|
1590 | .tooltip.bottom:before, .tooltip.bottom:after {
|
---|
1591 | top: 75%;
|
---|
1592 | }
|
---|
1593 |
|
---|
1594 | .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
|
---|
1595 | opacity: 1;
|
---|
1596 | clip: auto;
|
---|
1597 | -webkit-clip-path: inset(0%);
|
---|
1598 | clip-path: inset(0%);
|
---|
1599 | }
|
---|
1600 |
|
---|
1601 | .tooltip:before {
|
---|
1602 | content: '';
|
---|
1603 | background: transparent;
|
---|
1604 | border: var(--universal-margin) solid transparent;
|
---|
1605 | left: calc(50% - var(--universal-margin));
|
---|
1606 | }
|
---|
1607 |
|
---|
1608 | .tooltip:not(.bottom):before {
|
---|
1609 | border-top-color: #212121;
|
---|
1610 | }
|
---|
1611 |
|
---|
1612 | .tooltip.bottom:before {
|
---|
1613 | border-bottom-color: #212121;
|
---|
1614 | }
|
---|
1615 |
|
---|
1616 | .tooltip:after {
|
---|
1617 | content: attr(aria-label);
|
---|
1618 | color: var(--tooltip-fore-color);
|
---|
1619 | background: var(--tooltip-back-color);
|
---|
1620 | border-radius: var(--universal-border-radius);
|
---|
1621 | padding: var(--universal-padding);
|
---|
1622 | white-space: nowrap;
|
---|
1623 | transform: translateX(-50%);
|
---|
1624 | }
|
---|
1625 |
|
---|
1626 | .tooltip:not(.bottom):after {
|
---|
1627 | margin-bottom: calc(2 * var(--universal-margin));
|
---|
1628 | }
|
---|
1629 |
|
---|
1630 | .tooltip.bottom:after {
|
---|
1631 | margin-top: calc(2 * var(--universal-margin));
|
---|
1632 | }
|
---|
1633 |
|
---|
1634 | :root {
|
---|
1635 | --modal-overlay-color: rgba(0, 0, 0, 0.45);
|
---|
1636 | --modal-close-color: #444;
|
---|
1637 | --modal-close-hover-color: #f0f0f0;
|
---|
1638 | }
|
---|
1639 |
|
---|
1640 | [type="checkbox"].modal {
|
---|
1641 | height: 1px;
|
---|
1642 | width: 1px;
|
---|
1643 | margin: -1px;
|
---|
1644 | overflow: hidden;
|
---|
1645 | position: absolute;
|
---|
1646 | clip: rect(0 0 0 0);
|
---|
1647 | -webkit-clip-path: inset(100%);
|
---|
1648 | clip-path: inset(100%);
|
---|
1649 | }
|
---|
1650 |
|
---|
1651 | [type="checkbox"].modal + div {
|
---|
1652 | position: fixed;
|
---|
1653 | top: 0;
|
---|
1654 | left: 0;
|
---|
1655 | display: none;
|
---|
1656 | width: 100vw;
|
---|
1657 | height: 100vh;
|
---|
1658 | background: var(--modal-overlay-color);
|
---|
1659 | }
|
---|
1660 |
|
---|
1661 | [type="checkbox"].modal + div .card {
|
---|
1662 | margin: 0 auto;
|
---|
1663 | max-height: 50vh;
|
---|
1664 | overflow: auto;
|
---|
1665 | }
|
---|
1666 |
|
---|
1667 | [type="checkbox"].modal + div .card .modal-close {
|
---|
1668 | position: absolute;
|
---|
1669 | top: 0;
|
---|
1670 | right: 0;
|
---|
1671 | width: 1.75rem;
|
---|
1672 | height: 1.75rem;
|
---|
1673 | border-radius: var(--universal-border-radius);
|
---|
1674 | padding: var(--universal-padding);
|
---|
1675 | margin: 0;
|
---|
1676 | cursor: pointer;
|
---|
1677 | transition: background 0.3s;
|
---|
1678 | }
|
---|
1679 |
|
---|
1680 | [type="checkbox"].modal + div .card .modal-close:before {
|
---|
1681 | display: block;
|
---|
1682 | content: '\00D7';
|
---|
1683 | color: var(--modal-close-color);
|
---|
1684 | position: relative;
|
---|
1685 | font-family: sans-serif;
|
---|
1686 | font-size: 1.75rem;
|
---|
1687 | line-height: 1;
|
---|
1688 | text-align: center;
|
---|
1689 | }
|
---|
1690 |
|
---|
1691 | [type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus {
|
---|
1692 | background: var(--modal-close-hover-color);
|
---|
1693 | }
|
---|
1694 |
|
---|
1695 | [type="checkbox"].modal:checked + div {
|
---|
1696 | display: flex;
|
---|
1697 | flex: 0 1 auto;
|
---|
1698 | z-index: 1200;
|
---|
1699 | }
|
---|
1700 |
|
---|
1701 | [type="checkbox"].modal:checked + div .card .modal-close {
|
---|
1702 | z-index: 1211;
|
---|
1703 | }
|
---|
1704 |
|
---|
1705 | :root {
|
---|
1706 | --collapse-label-back-color: #e8e8e8;
|
---|
1707 | --collapse-label-fore-color: #212121;
|
---|
1708 | --collapse-label-hover-back-color: #f0f0f0;
|
---|
1709 | --collapse-selected-label-back-color: #ececec;
|
---|
1710 | --collapse-border-color: #ddd;
|
---|
1711 | --collapse-content-back-color: #fafafa;
|
---|
1712 | --collapse-selected-label-border-color: #0277bd;
|
---|
1713 | }
|
---|
1714 |
|
---|
1715 | .collapse {
|
---|
1716 | width: calc(100% - 2 * var(--universal-margin));
|
---|
1717 | opacity: 1;
|
---|
1718 | display: flex;
|
---|
1719 | flex-direction: column;
|
---|
1720 | margin: var(--universal-margin);
|
---|
1721 | border-radius: var(--universal-border-radius);
|
---|
1722 | }
|
---|
1723 |
|
---|
1724 | .collapse > [type="radio"], .collapse > [type="checkbox"] {
|
---|
1725 | height: 1px;
|
---|
1726 | width: 1px;
|
---|
1727 | margin: -1px;
|
---|
1728 | overflow: hidden;
|
---|
1729 | position: absolute;
|
---|
1730 | clip: rect(0 0 0 0);
|
---|
1731 | -webkit-clip-path: inset(100%);
|
---|
1732 | clip-path: inset(100%);
|
---|
1733 | }
|
---|
1734 |
|
---|
1735 | .collapse > label {
|
---|
1736 | flex-grow: 1;
|
---|
1737 | display: inline-block;
|
---|
1738 | height: 1.5rem;
|
---|
1739 | cursor: pointer;
|
---|
1740 | transition: background 0.3s;
|
---|
1741 | color: var(--collapse-label-fore-color);
|
---|
1742 | background: var(--collapse-label-back-color);
|
---|
1743 | border: 0.0625rem solid var(--collapse-border-color);
|
---|
1744 | padding: calc(1.5 * var(--universal-padding));
|
---|
1745 | }
|
---|
1746 |
|
---|
1747 | .collapse > label:hover, .collapse > label:focus {
|
---|
1748 | background: var(--collapse-label-hover-back-color);
|
---|
1749 | }
|
---|
1750 |
|
---|
1751 | .collapse > label + div {
|
---|
1752 | flex-basis: auto;
|
---|
1753 | height: 1px;
|
---|
1754 | width: 1px;
|
---|
1755 | margin: -1px;
|
---|
1756 | overflow: hidden;
|
---|
1757 | position: absolute;
|
---|
1758 | clip: rect(0 0 0 0);
|
---|
1759 | -webkit-clip-path: inset(100%);
|
---|
1760 | clip-path: inset(100%);
|
---|
1761 | transition: max-height 0.3s;
|
---|
1762 | max-height: 1px;
|
---|
1763 | }
|
---|
1764 |
|
---|
1765 | .collapse > :checked + label {
|
---|
1766 | background: var(--collapse-selected-label-back-color);
|
---|
1767 | border-bottom-color: var(--collapse-selected-label-border-color);
|
---|
1768 | }
|
---|
1769 |
|
---|
1770 | .collapse > :checked + label + div {
|
---|
1771 | box-sizing: border-box;
|
---|
1772 | position: relative;
|
---|
1773 | width: 100%;
|
---|
1774 | height: auto;
|
---|
1775 | overflow: auto;
|
---|
1776 | margin: 0;
|
---|
1777 | background: var(--collapse-content-back-color);
|
---|
1778 | border: 0.0625rem solid var(--collapse-border-color);
|
---|
1779 | border-top: 0;
|
---|
1780 | padding: var(--universal-padding);
|
---|
1781 | clip: auto;
|
---|
1782 | -webkit-clip-path: inset(0%);
|
---|
1783 | clip-path: inset(0%);
|
---|
1784 | max-height: 400px;
|
---|
1785 | }
|
---|
1786 |
|
---|
1787 | .collapse > label:not(:first-of-type) {
|
---|
1788 | border-top: 0;
|
---|
1789 | }
|
---|
1790 |
|
---|
1791 | .collapse > label:first-of-type {
|
---|
1792 | border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
|
---|
1793 | }
|
---|
1794 |
|
---|
1795 | .collapse > label:last-of-type:not(:first-of-type) {
|
---|
1796 | border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
---|
1797 | }
|
---|
1798 |
|
---|
1799 | .collapse > label:last-of-type:first-of-type {
|
---|
1800 | border-radius: var(--universal-border-radius);
|
---|
1801 | }
|
---|
1802 |
|
---|
1803 | .collapse > :checked:last-of-type:not(:first-of-type) + label {
|
---|
1804 | border-radius: 0;
|
---|
1805 | }
|
---|
1806 |
|
---|
1807 | .collapse > :checked:last-of-type + label + div {
|
---|
1808 | border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
|
---|
1809 | }
|
---|
1810 |
|
---|
1811 | /*
|
---|
1812 | Custom elements for contextual background elements, toasts and tooltips.
|
---|
1813 | */
|
---|
1814 | mark.secondary {
|
---|
1815 | --mark-back-color: #d32f2f;
|
---|
1816 | }
|
---|
1817 |
|
---|
1818 | mark.tertiary {
|
---|
1819 | --mark-back-color: #308732;
|
---|
1820 | }
|
---|
1821 |
|
---|
1822 | mark.tag {
|
---|
1823 | padding: calc(var(--universal-padding)/2) var(--universal-padding);
|
---|
1824 | border-radius: 1em;
|
---|
1825 | }
|
---|
1826 |
|
---|
1827 | /*
|
---|
1828 | Definitions for progress elements and spinners.
|
---|
1829 | */
|
---|
1830 | /* Progess module CSS variable definitions */
|
---|
1831 | :root {
|
---|
1832 | --progress-back-color: #ddd;
|
---|
1833 | --progress-fore-color: #555;
|
---|
1834 | }
|
---|
1835 |
|
---|
1836 | progress {
|
---|
1837 | display: block;
|
---|
1838 | vertical-align: baseline;
|
---|
1839 | -webkit-appearance: none;
|
---|
1840 | -moz-appearance: none;
|
---|
1841 | appearance: none;
|
---|
1842 | height: 0.75rem;
|
---|
1843 | width: calc(100% - 2 * var(--universal-margin));
|
---|
1844 | margin: var(--universal-margin);
|
---|
1845 | border: 0;
|
---|
1846 | border-radius: calc(2 * var(--universal-border-radius));
|
---|
1847 | background: var(--progress-back-color);
|
---|
1848 | color: var(--progress-fore-color);
|
---|
1849 | }
|
---|
1850 |
|
---|
1851 | progress::-webkit-progress-value {
|
---|
1852 | background: var(--progress-fore-color);
|
---|
1853 | border-top-left-radius: calc(2 * var(--universal-border-radius));
|
---|
1854 | border-bottom-left-radius: calc(2 * var(--universal-border-radius));
|
---|
1855 | }
|
---|
1856 |
|
---|
1857 | progress::-webkit-progress-bar {
|
---|
1858 | background: var(--progress-back-color);
|
---|
1859 | }
|
---|
1860 |
|
---|
1861 | progress::-moz-progress-bar {
|
---|
1862 | background: var(--progress-fore-color);
|
---|
1863 | border-top-left-radius: calc(2 * var(--universal-border-radius));
|
---|
1864 | border-bottom-left-radius: calc(2 * var(--universal-border-radius));
|
---|
1865 | }
|
---|
1866 |
|
---|
1867 | progress[value="1000"]::-webkit-progress-value {
|
---|
1868 | border-radius: calc(2 * var(--universal-border-radius));
|
---|
1869 | }
|
---|
1870 |
|
---|
1871 | progress[value="1000"]::-moz-progress-bar {
|
---|
1872 | border-radius: calc(2 * var(--universal-border-radius));
|
---|
1873 | }
|
---|
1874 |
|
---|
1875 | progress.inline {
|
---|
1876 | display: inline-block;
|
---|
1877 | vertical-align: middle;
|
---|
1878 | width: 60%;
|
---|
1879 | }
|
---|
1880 |
|
---|
1881 | :root {
|
---|
1882 | --spinner-back-color: #ddd;
|
---|
1883 | --spinner-fore-color: #555;
|
---|
1884 | }
|
---|
1885 |
|
---|
1886 | @keyframes spinner-donut-anim {
|
---|
1887 | 0% {
|
---|
1888 | transform: rotate(0deg);
|
---|
1889 | }
|
---|
1890 | 100% {
|
---|
1891 | transform: rotate(360deg);
|
---|
1892 | }
|
---|
1893 | }
|
---|
1894 |
|
---|
1895 | .spinner {
|
---|
1896 | display: inline-block;
|
---|
1897 | margin: var(--universal-margin);
|
---|
1898 | border: 0.25rem solid var(--spinner-back-color);
|
---|
1899 | border-left: 0.25rem solid var(--spinner-fore-color);
|
---|
1900 | border-radius: 50%;
|
---|
1901 | width: 1.25rem;
|
---|
1902 | height: 1.25rem;
|
---|
1903 | animation: spinner-donut-anim 1.2s linear infinite;
|
---|
1904 | }
|
---|
1905 |
|
---|
1906 | /*
|
---|
1907 | Custom elements for progress bars and spinners.
|
---|
1908 | */
|
---|
1909 | progress.primary {
|
---|
1910 | --progress-fore-color: #1976d2;
|
---|
1911 | }
|
---|
1912 |
|
---|
1913 | progress.secondary {
|
---|
1914 | --progress-fore-color: #d32f2f;
|
---|
1915 | }
|
---|
1916 |
|
---|
1917 | progress.tertiary {
|
---|
1918 | --progress-fore-color: #308732;
|
---|
1919 | }
|
---|
1920 |
|
---|
1921 | .spinner.primary {
|
---|
1922 | --spinner-fore-color: #1976d2;
|
---|
1923 | }
|
---|
1924 |
|
---|
1925 | .spinner.secondary {
|
---|
1926 | --spinner-fore-color: #d32f2f;
|
---|
1927 | }
|
---|
1928 |
|
---|
1929 | .spinner.tertiary {
|
---|
1930 | --spinner-fore-color: #308732;
|
---|
1931 | }
|
---|
1932 |
|
---|
1933 | /*
|
---|
1934 | Definitions for icons - powered by Feather (https://feathericons.com/).
|
---|
1935 | */
|
---|
1936 | span[class^='icon-'] {
|
---|
1937 | display: inline-block;
|
---|
1938 | height: 1em;
|
---|
1939 | width: 1em;
|
---|
1940 | vertical-align: -0.125em;
|
---|
1941 | background-size: contain;
|
---|
1942 | margin: 0 calc(var(--universal-margin) / 4);
|
---|
1943 | }
|
---|
1944 |
|
---|
1945 | span[class^='icon-'].secondary {
|
---|
1946 | -webkit-filter: invert(25%);
|
---|
1947 | filter: invert(25%);
|
---|
1948 | }
|
---|
1949 |
|
---|
1950 | span[class^='icon-'].inverse {
|
---|
1951 | -webkit-filter: invert(100%);
|
---|
1952 | filter: invert(100%);
|
---|
1953 | }
|
---|
1954 |
|
---|
1955 | span.icon-alert {
|
---|
1956 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
---|
1957 | }
|
---|
1958 |
|
---|
1959 | span.icon-bookmark {
|
---|
1960 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
|
---|
1961 | }
|
---|
1962 |
|
---|
1963 | span.icon-calendar {
|
---|
1964 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
---|
1965 | }
|
---|
1966 |
|
---|
1967 | span.icon-credit {
|
---|
1968 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
---|
1969 | }
|
---|
1970 |
|
---|
1971 | span.icon-edit {
|
---|
1972 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E");
|
---|
1973 | }
|
---|
1974 |
|
---|
1975 | span.icon-link {
|
---|
1976 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
---|
1977 | }
|
---|
1978 |
|
---|
1979 | span.icon-help {
|
---|
1980 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
|
---|
1981 | }
|
---|
1982 |
|
---|
1983 | span.icon-home {
|
---|
1984 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
|
---|
1985 | }
|
---|
1986 |
|
---|
1987 | span.icon-info {
|
---|
1988 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
|
---|
1989 | }
|
---|
1990 |
|
---|
1991 | span.icon-lock {
|
---|
1992 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
|
---|
1993 | }
|
---|
1994 |
|
---|
1995 | span.icon-mail {
|
---|
1996 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
|
---|
1997 | }
|
---|
1998 |
|
---|
1999 | span.icon-location {
|
---|
2000 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
|
---|
2001 | }
|
---|
2002 |
|
---|
2003 | span.icon-phone {
|
---|
2004 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
|
---|
2005 | }
|
---|
2006 |
|
---|
2007 | span.icon-rss {
|
---|
2008 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
|
---|
2009 | }
|
---|
2010 |
|
---|
2011 | span.icon-search {
|
---|
2012 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
---|
2013 | }
|
---|
2014 |
|
---|
2015 | span.icon-settings {
|
---|
2016 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
|
---|
2017 | }
|
---|
2018 |
|
---|
2019 | span.icon-share {
|
---|
2020 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
|
---|
2021 | }
|
---|
2022 |
|
---|
2023 | span.icon-cart {
|
---|
2024 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
|
---|
2025 | }
|
---|
2026 |
|
---|
2027 | span.icon-upload {
|
---|
2028 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
|
---|
2029 | }
|
---|
2030 |
|
---|
2031 | span.icon-user {
|
---|
2032 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
---|
2033 | }
|
---|
2034 |
|
---|
2035 | /*
|
---|
2036 | Definitions for utilities and helper classes.
|
---|
2037 | */
|
---|
2038 | /* Utility module CSS variable definitions */
|
---|
2039 | :root {
|
---|
2040 | --generic-border-color: rgba(0, 0, 0, 0.3);
|
---|
2041 | --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
|
---|
2042 | }
|
---|
2043 |
|
---|
2044 | .hidden {
|
---|
2045 | display: none !important;
|
---|
2046 | }
|
---|
2047 |
|
---|
2048 | .visually-hidden {
|
---|
2049 | position: absolute !important;
|
---|
2050 | width: 1px !important;
|
---|
2051 | height: 1px !important;
|
---|
2052 | margin: -1px !important;
|
---|
2053 | border: 0 !important;
|
---|
2054 | padding: 0 !important;
|
---|
2055 | clip: rect(0 0 0 0) !important;
|
---|
2056 | -webkit-clip-path: inset(100%) !important;
|
---|
2057 | clip-path: inset(100%) !important;
|
---|
2058 | overflow: hidden !important;
|
---|
2059 | }
|
---|
2060 |
|
---|
2061 | .bordered {
|
---|
2062 | border: 0.0625rem solid var(--generic-border-color) !important;
|
---|
2063 | }
|
---|
2064 |
|
---|
2065 | .rounded {
|
---|
2066 | border-radius: var(--universal-border-radius) !important;
|
---|
2067 | }
|
---|
2068 |
|
---|
2069 | .circular {
|
---|
2070 | border-radius: 50% !important;
|
---|
2071 | }
|
---|
2072 |
|
---|
2073 | .shadowed {
|
---|
2074 | box-shadow: var(--generic-box-shadow) !important;
|
---|
2075 | }
|
---|
2076 |
|
---|
2077 | .responsive-margin {
|
---|
2078 | margin: calc(var(--universal-margin) / 4) !important;
|
---|
2079 | }
|
---|
2080 |
|
---|
2081 | @media screen and (min-width: 768px) {
|
---|
2082 | .responsive-margin {
|
---|
2083 | margin: calc(var(--universal-margin) / 2) !important;
|
---|
2084 | }
|
---|
2085 | }
|
---|
2086 |
|
---|
2087 | @media screen and (min-width: 1280px) {
|
---|
2088 | .responsive-margin {
|
---|
2089 | margin: var(--universal-margin) !important;
|
---|
2090 | }
|
---|
2091 | }
|
---|
2092 |
|
---|
2093 | .responsive-padding {
|
---|
2094 | padding: calc(var(--universal-padding) / 4) !important;
|
---|
2095 | }
|
---|
2096 |
|
---|
2097 | @media screen and (min-width: 768px) {
|
---|
2098 | .responsive-padding {
|
---|
2099 | padding: calc(var(--universal-padding) / 2) !important;
|
---|
2100 | }
|
---|
2101 | }
|
---|
2102 |
|
---|
2103 | @media screen and (min-width: 1280px) {
|
---|
2104 | .responsive-padding {
|
---|
2105 | padding: var(--universal-padding) !important;
|
---|
2106 | }
|
---|
2107 | }
|
---|
2108 |
|
---|
2109 | @media screen and (max-width: 767px) {
|
---|
2110 | .hidden-sm {
|
---|
2111 | display: none !important;
|
---|
2112 | }
|
---|
2113 | }
|
---|
2114 |
|
---|
2115 | @media screen and (min-width: 768px) and (max-width: 1279px) {
|
---|
2116 | .hidden-md {
|
---|
2117 | display: none !important;
|
---|
2118 | }
|
---|
2119 | }
|
---|
2120 |
|
---|
2121 | @media screen and (min-width: 1280px) {
|
---|
2122 | .hidden-lg {
|
---|
2123 | display: none !important;
|
---|
2124 | }
|
---|
2125 | }
|
---|
2126 |
|
---|
2127 | @media screen and (max-width: 767px) {
|
---|
2128 | .visually-hidden-sm {
|
---|
2129 | position: absolute !important;
|
---|
2130 | width: 1px !important;
|
---|
2131 | height: 1px !important;
|
---|
2132 | margin: -1px !important;
|
---|
2133 | border: 0 !important;
|
---|
2134 | padding: 0 !important;
|
---|
2135 | clip: rect(0 0 0 0) !important;
|
---|
2136 | -webkit-clip-path: inset(100%) !important;
|
---|
2137 | clip-path: inset(100%) !important;
|
---|
2138 | overflow: hidden !important;
|
---|
2139 | }
|
---|
2140 | }
|
---|
2141 |
|
---|
2142 | @media screen and (min-width: 768px) and (max-width: 1279px) {
|
---|
2143 | .visually-hidden-md {
|
---|
2144 | position: absolute !important;
|
---|
2145 | width: 1px !important;
|
---|
2146 | height: 1px !important;
|
---|
2147 | margin: -1px !important;
|
---|
2148 | border: 0 !important;
|
---|
2149 | padding: 0 !important;
|
---|
2150 | clip: rect(0 0 0 0) !important;
|
---|
2151 | -webkit-clip-path: inset(100%) !important;
|
---|
2152 | clip-path: inset(100%) !important;
|
---|
2153 | overflow: hidden !important;
|
---|
2154 | }
|
---|
2155 | }
|
---|
2156 |
|
---|
2157 | @media screen and (min-width: 1280px) {
|
---|
2158 | .visually-hidden-lg {
|
---|
2159 | position: absolute !important;
|
---|
2160 | width: 1px !important;
|
---|
2161 | height: 1px !important;
|
---|
2162 | margin: -1px !important;
|
---|
2163 | border: 0 !important;
|
---|
2164 | padding: 0 !important;
|
---|
2165 | clip: rect(0 0 0 0) !important;
|
---|
2166 | -webkit-clip-path: inset(100%) !important;
|
---|
2167 | clip-path: inset(100%) !important;
|
---|
2168 | overflow: hidden !important;
|
---|
2169 | }
|
---|
2170 | }
|
---|