| | 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 | .input-group.vertical { |
| | 798 | display: flex; |
| | 799 | align-items: stretch; |
| | 800 | flex-direction: column; |
| | 801 | } |
| | 802 | |
| | 803 | .input-group.vertical > input { |
| | 804 | max-width: 100%; |
| | 805 | flex-grow: 1; |
| | 806 | flex-basis: 0px; |
| | 807 | } |
| | 808 | |
| | 809 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { |
| | 810 | height: auto; |
| | 811 | } |
| | 812 | |
| | 813 | [type="search"] { |
| | 814 | -webkit-appearance: textfield; |
| | 815 | outline-offset: -2px; |
| | 816 | } |
| | 817 | |
| | 818 | [type="search"]::-webkit-search-cancel-button, |
| | 819 | [type="search"]::-webkit-search-decoration { |
| | 820 | -webkit-appearance: none; |
| | 821 | } |
| | 822 | |
| | 823 | input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], |
| | 824 | [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { |
| | 825 | box-sizing: border-box; |
| | 826 | background: var(--input-back-color); |
| | 827 | color: var(--input-fore-color); |
| | 828 | border: 0.0625rem solid var(--input-border-color); |
| | 829 | border-radius: var(--universal-border-radius); |
| | 830 | margin: calc(var(--universal-margin) / 2); |
| | 831 | padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); |
| | 832 | } |
| | 833 | |
| | 834 | 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 { |
| | 835 | border-color: var(--input-focus-color); |
| | 836 | box-shadow: none; |
| | 837 | } |
| | 838 | |
| | 839 | 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 { |
| | 840 | border-color: var(--input-invalid-color); |
| | 841 | box-shadow: none; |
| | 842 | } |
| | 843 | |
| | 844 | input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { |
| | 845 | background: var(--secondary-back-color); |
| | 846 | } |
| | 847 | |
| | 848 | select { |
| | 849 | max-width: 100%; |
| | 850 | } |
| | 851 | |
| | 852 | option { |
| | 853 | overflow: hidden; |
| | 854 | text-overflow: ellipsis; |
| | 855 | } |
| | 856 | |
| | 857 | [type="checkbox"], [type="radio"] { |
| | 858 | -webkit-appearance: none; |
| | 859 | -moz-appearance: none; |
| | 860 | appearance: none; |
| | 861 | position: relative; |
| | 862 | height: calc(1rem + var(--universal-padding) / 2); |
| | 863 | width: calc(1rem + var(--universal-padding) / 2); |
| | 864 | vertical-align: text-bottom; |
| | 865 | padding: 0; |
| | 866 | flex-basis: calc(1rem + var(--universal-padding) / 2) !important; |
| | 867 | flex-grow: 0 !important; |
| | 868 | } |
| | 869 | |
| | 870 | [type="checkbox"]:checked:before, [type="radio"]:checked:before { |
| | 871 | position: absolute; |
| | 872 | } |
| | 873 | |
| | 874 | [type="checkbox"]:checked:before { |
| | 875 | content: '\2713'; |
| | 876 | font-family: sans-serif; |
| | 877 | font-size: calc(1rem + var(--universal-padding) / 2); |
| | 878 | top: calc(0rem - var(--universal-padding)); |
| | 879 | left: calc(var(--universal-padding) / 4); |
| | 880 | } |
| | 881 | |
| | 882 | [type="radio"] { |
| | 883 | border-radius: 100%; |
| | 884 | } |
| | 885 | |
| | 886 | [type="radio"]:checked:before { |
| | 887 | border-radius: 100%; |
| | 888 | content: ''; |
| | 889 | top: calc(0.0625rem + var(--universal-padding) / 2); |
| | 890 | left: calc(0.0625rem + var(--universal-padding) / 2); |
| | 891 | background: var(--input-fore-color); |
| | 892 | width: 0.5rem; |
| | 893 | height: 0.5rem; |
| | 894 | } |
| | 895 | |
| | 896 | :placeholder-shown { |
| | 897 | color: var(--input-fore-color); |
| | 898 | } |
| | 899 | |
| | 900 | ::-ms-placeholder { |
| | 901 | color: var(--input-fore-color); |
| | 902 | opacity: 0.54; |
| | 903 | } |
| | 904 | |
| | 905 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { |
| | 906 | border-style: none; |
| | 907 | padding: 0; |
| | 908 | } |
| | 909 | |
| | 910 | button, html [type="button"], [type="reset"], [type="submit"] { |
| | 911 | -webkit-appearance: button; |
| | 912 | } |
| | 913 | |
| | 914 | button { |
| | 915 | overflow: visible; |
| | 916 | text-transform: none; |
| | 917 | } |
| | 918 | |
| | 919 | button, [type="button"], [type="submit"], [type="reset"], |
| | 920 | a.button, label.button, .button, |
| | 921 | a[role="button"], label[role="button"], [role="button"] { |
| | 922 | display: inline-block; |
| | 923 | background: var(--button-back-color); |
| | 924 | color: var(--button-fore-color); |
| | 925 | border: 0.0625rem solid var(--button-border-color); |
| | 926 | border-radius: var(--universal-border-radius); |
| | 927 | padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); |
| | 928 | margin: var(--universal-margin); |
| | 929 | text-decoration: none; |
| | 930 | cursor: pointer; |
| | 931 | transition: background 0.3s; |
| | 932 | } |
| | 933 | |
| | 934 | button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, |
| | 935 | a.button:hover, |
| | 936 | a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, |
| | 937 | a[role="button"]:hover, |
| | 938 | a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { |
| | 939 | background: var(--button-hover-back-color); |
| | 940 | border-color: var(--button-hover-border-color); |
| | 941 | } |
| | 942 | |
| | 943 | 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] { |
| | 944 | cursor: not-allowed; |
| | 945 | opacity: 0.75; |
| | 946 | } |
| | 947 | |
| | 948 | .button-group { |
| | 949 | display: flex; |
| | 950 | border: 0.0625rem solid var(--button-group-border-color); |
| | 951 | border-radius: var(--universal-border-radius); |
| | 952 | margin: var(--universal-margin); |
| | 953 | } |
| | 954 | |
| | 955 | .button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], |
| | 956 | .button-group > .button, .button-group > [role="button"] { |
| | 957 | margin: 0; |
| | 958 | max-width: 100%; |
| | 959 | flex: 1 1 auto; |
| | 960 | text-align: center; |
| | 961 | border: 0; |
| | 962 | border-radius: 0; |
| | 963 | box-shadow: none; |
| | 964 | } |
| | 965 | |
| | 966 | .button-group > :not(:first-child) { |
| | 967 | border-left: 0.0625rem solid var(--button-group-border-color); |
| | 968 | } |
| | 969 | |
| | 970 | /* |
| | 971 | Custom elements for forms and input elements. |
| | 972 | */ |
| | 973 | button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary { |
| | 974 | --button-back-color: #1976d2; |
| | 975 | --button-fore-color: #f8f8f8; |
| | 976 | } |
| | 977 | |
| | 978 | 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 { |
| | 979 | --button-hover-back-color: #1565c0; |
| | 980 | } |
| | 981 | |
| | 982 | button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary { |
| | 983 | --button-back-color: #d32f2f; |
| | 984 | --button-fore-color: #f8f8f8; |
| | 985 | } |
| | 986 | |
| | 987 | 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 { |
| | 988 | --button-hover-back-color: #c62828; |
| | 989 | } |
| | 990 | |
| | 991 | button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { |
| | 992 | --button-back-color: #308732; |
| | 993 | --button-fore-color: #f8f8f8; |
| | 994 | } |
| | 995 | |
| | 996 | 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 { |
| | 997 | --button-hover-back-color: #277529; |
| | 998 | } |
| | 999 | |
| | 1000 | button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse { |
| | 1001 | --button-back-color: #212121; |
| | 1002 | --button-fore-color: #f8f8f8; |
| | 1003 | } |
| | 1004 | |
| | 1005 | 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 { |
| | 1006 | --button-hover-back-color: #111; |
| | 1007 | } |
| | 1008 | |
| | 1009 | button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small { |
| | 1010 | padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding)); |
| | 1011 | margin: var(--universal-margin); |
| | 1012 | } |
| | 1013 | |
| | 1014 | button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large { |
| | 1015 | padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)); |
| | 1016 | margin: var(--universal-margin); |
| | 1017 | } |
| | 1018 | |
| | 1019 | /* |
| | 1020 | Definitions for navigation elements. |
| | 1021 | */ |
| | 1022 | /* Navigation module CSS variable definitions */ |
| | 1023 | :root { |
| | 1024 | --header-back-color: #f8f8f8; |
| | 1025 | --header-hover-back-color: #f0f0f0; |
| | 1026 | --header-fore-color: #444; |
| | 1027 | --header-border-color: #ddd; |
| | 1028 | --nav-back-color: #f8f8f8; |
| | 1029 | --nav-hover-back-color: #f0f0f0; |
| | 1030 | --nav-fore-color: #444; |
| | 1031 | --nav-border-color: #ddd; |
| | 1032 | --nav-link-color: #0277bd; |
| | 1033 | --footer-fore-color: #444; |
| | 1034 | --footer-back-color: #f8f8f8; |
| | 1035 | --footer-border-color: #ddd; |
| | 1036 | --footer-link-color: #0277bd; |
| | 1037 | --drawer-back-color: #f8f8f8; |
| | 1038 | --drawer-hover-back-color: #f0f0f0; |
| | 1039 | --drawer-border-color: #ddd; |
| | 1040 | --drawer-close-color: #444; |
| | 1041 | } |
| | 1042 | |
| | 1043 | header { |
| | 1044 | height: 3.1875rem; |
| | 1045 | background: var(--header-back-color); |
| | 1046 | color: var(--header-fore-color); |
| | 1047 | border-bottom: 0.0625rem solid var(--header-border-color); |
| | 1048 | padding: calc(var(--universal-padding) / 4) 0; |
| | 1049 | white-space: nowrap; |
| | 1050 | overflow-x: auto; |
| | 1051 | overflow-y: hidden; |
| | 1052 | } |
| | 1053 | |
| | 1054 | header.row { |
| | 1055 | box-sizing: content-box; |
| | 1056 | } |
| | 1057 | |
| | 1058 | header .logo { |
| | 1059 | color: var(--header-fore-color); |
| | 1060 | font-size: 1.75rem; |
| | 1061 | padding: var(--universal-padding) calc(2 * var(--universal-padding)); |
| | 1062 | text-decoration: none; |
| | 1063 | } |
| | 1064 | |
| | 1065 | header button, header [type="button"], header .button, header [role="button"] { |
| | 1066 | box-sizing: border-box; |
| | 1067 | position: relative; |
| | 1068 | top: calc(0rem - var(--universal-padding) / 4); |
| | 1069 | height: calc(3.1875rem + var(--universal-padding) / 2); |
| | 1070 | background: var(--header-back-color); |
| | 1071 | line-height: calc(3.1875rem - var(--universal-padding) * 1.5); |
| | 1072 | text-align: center; |
| | 1073 | color: var(--header-fore-color); |
| | 1074 | border: 0; |
| | 1075 | border-radius: 0; |
| | 1076 | margin: 0; |
| | 1077 | text-transform: uppercase; |
| | 1078 | } |
| | 1079 | |
| | 1080 | 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 { |
| | 1081 | background: var(--header-hover-back-color); |
| | 1082 | } |
| | 1083 | |
| | 1084 | nav { |
| | 1085 | background: var(--nav-back-color); |
| | 1086 | color: var(--nav-fore-color); |
| | 1087 | border: 0.0625rem solid var(--nav-border-color); |
| | 1088 | border-radius: var(--universal-border-radius); |
| | 1089 | margin: var(--universal-margin); |
| | 1090 | } |
| | 1091 | |
| | 1092 | nav * { |
| | 1093 | padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); |
| | 1094 | } |
| | 1095 | |
| | 1096 | nav a, nav a:visited { |
| | 1097 | display: block; |
| | 1098 | color: var(--nav-link-color); |
| | 1099 | border-radius: var(--universal-border-radius); |
| | 1100 | transition: background 0.3s; |
| | 1101 | } |
| | 1102 | |
| | 1103 | nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { |
| | 1104 | text-decoration: none; |
| | 1105 | background: var(--nav-hover-back-color); |
| | 1106 | } |
| | 1107 | |
| | 1108 | nav .sublink-1 { |
| | 1109 | position: relative; |
| | 1110 | margin-left: calc(2 * var(--universal-padding)); |
| | 1111 | } |
| | 1112 | |
| | 1113 | nav .sublink-1:before { |
| | 1114 | position: absolute; |
| | 1115 | left: calc(var(--universal-padding) - 1 * var(--universal-padding)); |
| | 1116 | top: -0.0625rem; |
| | 1117 | content: ''; |
| | 1118 | height: 100%; |
| | 1119 | border: 0.0625rem solid var(--nav-border-color); |
| | 1120 | border-left: 0; |
| | 1121 | } |
| | 1122 | |
| | 1123 | nav .sublink-2 { |
| | 1124 | position: relative; |
| | 1125 | margin-left: calc(4 * var(--universal-padding)); |
| | 1126 | } |
| | 1127 | |
| | 1128 | nav .sublink-2:before { |
| | 1129 | position: absolute; |
| | 1130 | left: calc(var(--universal-padding) - 3 * var(--universal-padding)); |
| | 1131 | top: -0.0625rem; |
| | 1132 | content: ''; |
| | 1133 | height: 100%; |
| | 1134 | border: 0.0625rem solid var(--nav-border-color); |
| | 1135 | border-left: 0; |
| | 1136 | } |
| | 1137 | |
| | 1138 | footer { |
| | 1139 | background: var(--footer-back-color); |
| | 1140 | color: var(--footer-fore-color); |
| | 1141 | border-top: 0.0625rem solid var(--footer-border-color); |
| | 1142 | padding: calc(2 * var(--universal-padding)) var(--universal-padding); |
| | 1143 | font-size: 0.875rem; |
| | 1144 | } |
| | 1145 | |
| | 1146 | footer a, footer a:visited { |
| | 1147 | color: var(--footer-link-color); |
| | 1148 | } |
| | 1149 | |
| | 1150 | header.sticky { |
| | 1151 | position: -webkit-sticky; |
| | 1152 | position: sticky; |
| | 1153 | z-index: 1101; |
| | 1154 | top: 0; |
| | 1155 | } |
| | 1156 | |
| | 1157 | footer.sticky { |
| | 1158 | position: -webkit-sticky; |
| | 1159 | position: sticky; |
| | 1160 | z-index: 1101; |
| | 1161 | bottom: 0; |
| | 1162 | } |
| | 1163 | |
| | 1164 | .drawer-toggle:before { |
| | 1165 | display: inline-block; |
| | 1166 | position: relative; |
| | 1167 | vertical-align: bottom; |
| | 1168 | content: '\00a0\2261\00a0'; |
| | 1169 | font-family: sans-serif; |
| | 1170 | font-size: 1.5em; |
| | 1171 | } |
| | 1172 | |
| | 1173 | @media screen and (min-width: 768px) { |
| | 1174 | .drawer-toggle:not(.persistent) { |
| | 1175 | display: none; |
| | 1176 | } |
| | 1177 | } |
| | 1178 | |
| | 1179 | [type="checkbox"].drawer { |
| | 1180 | height: 1px; |
| | 1181 | width: 1px; |
| | 1182 | margin: -1px; |
| | 1183 | overflow: hidden; |
| | 1184 | position: absolute; |
| | 1185 | clip: rect(0 0 0 0); |
| | 1186 | -webkit-clip-path: inset(100%); |
| | 1187 | clip-path: inset(100%); |
| | 1188 | } |
| | 1189 | |
| | 1190 | [type="checkbox"].drawer + * { |
| | 1191 | display: block; |
| | 1192 | box-sizing: border-box; |
| | 1193 | position: fixed; |
| | 1194 | top: 0; |
| | 1195 | width: 320px; |
| | 1196 | height: 100vh; |
| | 1197 | overflow-y: auto; |
| | 1198 | background: var(--drawer-back-color); |
| | 1199 | border: 0.0625rem solid var(--drawer-border-color); |
| | 1200 | border-radius: 0; |
| | 1201 | margin: 0; |
| | 1202 | z-index: 1110; |
| | 1203 | right: -320px; |
| | 1204 | transition: right 0.3s; |
| | 1205 | } |
| | 1206 | |
| | 1207 | [type="checkbox"].drawer + * .drawer-close { |
| | 1208 | position: absolute; |
| | 1209 | top: var(--universal-margin); |
| | 1210 | right: var(--universal-margin); |
| | 1211 | z-index: 1111; |
| | 1212 | width: 2rem; |
| | 1213 | height: 2rem; |
| | 1214 | border-radius: var(--universal-border-radius); |
| | 1215 | padding: var(--universal-padding); |
| | 1216 | margin: 0; |
| | 1217 | cursor: pointer; |
| | 1218 | transition: background 0.3s; |
| | 1219 | } |
| | 1220 | |
| | 1221 | [type="checkbox"].drawer + * .drawer-close:before { |
| | 1222 | display: block; |
| | 1223 | content: '\00D7'; |
| | 1224 | color: var(--drawer-close-color); |
| | 1225 | position: relative; |
| | 1226 | font-family: sans-serif; |
| | 1227 | font-size: 2rem; |
| | 1228 | line-height: 1; |
| | 1229 | text-align: center; |
| | 1230 | } |
| | 1231 | |
| | 1232 | [type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus { |
| | 1233 | background: var(--drawer-hover-back-color); |
| | 1234 | } |
| | 1235 | |
| | 1236 | @media screen and (max-width: 320px) { |
| | 1237 | [type="checkbox"].drawer + * { |
| | 1238 | width: 100%; |
| | 1239 | } |
| | 1240 | } |
| | 1241 | |
| | 1242 | [type="checkbox"].drawer:checked + * { |
| | 1243 | right: 0; |
| | 1244 | } |
| | 1245 | |
| | 1246 | @media screen and (min-width: 768px) { |
| | 1247 | [type="checkbox"].drawer:not(.persistent) + * { |
| | 1248 | position: static; |
| | 1249 | height: 100%; |
| | 1250 | z-index: 1100; |
| | 1251 | } |
| | 1252 | [type="checkbox"].drawer:not(.persistent) + * .drawer-close { |
| | 1253 | display: none; |
| | 1254 | } |
| | 1255 | } |
| | 1256 | |
| | 1257 | /* |
| | 1258 | Definitions for the responsive table component. |
| | 1259 | */ |
| | 1260 | /* Table module CSS variable definitions. */ |
| | 1261 | :root { |
| | 1262 | --table-border-color: #aaa; |
| | 1263 | --table-border-separator-color: #666; |
| | 1264 | --table-head-back-color: #e6e6e6; |
| | 1265 | --table-head-fore-color: #111; |
| | 1266 | --table-body-back-color: #f8f8f8; |
| | 1267 | --table-body-fore-color: #111; |
| | 1268 | --table-body-alt-back-color: #eee; |
| | 1269 | } |
| | 1270 | |
| | 1271 | table { |
| | 1272 | border-collapse: separate; |
| | 1273 | border-spacing: 0; |
| | 1274 | margin: 0; |
| | 1275 | display: flex; |
| | 1276 | flex: 0 1 auto; |
| | 1277 | flex-flow: row wrap; |
| | 1278 | padding: var(--universal-padding); |
| | 1279 | padding-top: 0; |
| | 1280 | } |
| | 1281 | |
| | 1282 | table caption { |
| | 1283 | font-size: 1.5rem; |
| | 1284 | margin: calc(2 * var(--universal-margin)) 0; |
| | 1285 | max-width: 100%; |
| | 1286 | flex: 0 0 100%; |
| | 1287 | } |
| | 1288 | |
| | 1289 | table thead, table tbody { |
| | 1290 | display: flex; |
| | 1291 | flex-flow: row wrap; |
| | 1292 | border: 0.0625rem solid var(--table-border-color); |
| | 1293 | } |
| | 1294 | |
| | 1295 | table thead { |
| | 1296 | z-index: 999; |
| | 1297 | border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; |
| | 1298 | border-bottom: 0.0625rem solid var(--table-border-separator-color); |
| | 1299 | } |
| | 1300 | |
| | 1301 | table tbody { |
| | 1302 | border-top: 0; |
| | 1303 | margin-top: calc(0 - var(--universal-margin)); |
| | 1304 | border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); |
| | 1305 | } |
| | 1306 | |
| | 1307 | table tr { |
| | 1308 | display: flex; |
| | 1309 | padding: 0; |
| | 1310 | } |
| | 1311 | |
| | 1312 | table th, table td { |
| | 1313 | padding: calc(2 * var(--universal-padding)); |
| | 1314 | } |
| | 1315 | |
| | 1316 | table th { |
| | 1317 | text-align: left; |
| | 1318 | background: var(--table-head-back-color); |
| | 1319 | color: var(--table-head-fore-color); |
| | 1320 | } |
| | 1321 | |
| | 1322 | table td { |
| | 1323 | background: var(--table-body-back-color); |
| | 1324 | color: var(--table-body-fore-color); |
| | 1325 | border-top: 0.0625rem solid var(--table-border-color); |
| | 1326 | } |
| | 1327 | |
| | 1328 | table:not(.horizontal) { |
| | 1329 | overflow: auto; |
| | 1330 | max-height: 400px; |
| | 1331 | } |
| | 1332 | |
| | 1333 | table:not(.horizontal) thead, table:not(.horizontal) tbody { |
| | 1334 | max-width: 100%; |
| | 1335 | flex: 0 0 100%; |
| | 1336 | } |
| | 1337 | |
| | 1338 | table:not(.horizontal) tr { |
| | 1339 | flex-flow: row wrap; |
| | 1340 | flex: 0 0 100%; |
| | 1341 | } |
| | 1342 | |
| | 1343 | table:not(.horizontal) th, table:not(.horizontal) td { |
| | 1344 | flex: 1 0 0%; |
| | 1345 | overflow: hidden; |
| | 1346 | text-overflow: ellipsis; |
| | 1347 | } |
| | 1348 | |
| | 1349 | table:not(.horizontal) thead { |
| | 1350 | position: sticky; |
| | 1351 | top: 0; |
| | 1352 | } |
| | 1353 | |
| | 1354 | table:not(.horizontal) tbody tr:first-child td { |
| | 1355 | border-top: 0; |
| | 1356 | } |
| | 1357 | |
| | 1358 | table.horizontal { |
| | 1359 | border: 0; |
| | 1360 | } |
| | 1361 | |
| | 1362 | table.horizontal thead, table.horizontal tbody { |
| | 1363 | border: 0; |
| | 1364 | flex: .2 0 0; |
| | 1365 | flex-flow: row nowrap; |
| | 1366 | } |
| | 1367 | |
| | 1368 | table.horizontal tbody { |
| | 1369 | overflow: auto; |
| | 1370 | justify-content: space-between; |
| | 1371 | flex: .8 0 0; |
| | 1372 | margin-left: 0; |
| | 1373 | padding-bottom: calc(var(--universal-padding) / 4); |
| | 1374 | } |
| | 1375 | |
| | 1376 | table.horizontal tr { |
| | 1377 | flex-direction: column; |
| | 1378 | flex: 1 0 auto; |
| | 1379 | } |
| | 1380 | |
| | 1381 | table.horizontal th, table.horizontal td { |
| | 1382 | width: auto; |
| | 1383 | border: 0; |
| | 1384 | border-bottom: 0.0625rem solid var(--table-border-color); |
| | 1385 | } |
| | 1386 | |
| | 1387 | table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { |
| | 1388 | border-top: 0; |
| | 1389 | } |
| | 1390 | |
| | 1391 | table.horizontal th { |
| | 1392 | text-align: right; |
| | 1393 | border-left: 0.0625rem solid var(--table-border-color); |
| | 1394 | border-right: 0.0625rem solid var(--table-border-separator-color); |
| | 1395 | } |
| | 1396 | |
| | 1397 | table.horizontal thead tr:first-child { |
| | 1398 | padding-left: 0; |
| | 1399 | } |
| | 1400 | |
| | 1401 | table.horizontal th:first-child, table.horizontal td:first-child { |
| | 1402 | border-top: 0.0625rem solid var(--table-border-color); |
| | 1403 | } |
| | 1404 | |
| | 1405 | table.horizontal tbody tr:last-child td { |
| | 1406 | border-right: 0.0625rem solid var(--table-border-color); |
| | 1407 | } |
| | 1408 | |
| | 1409 | table.horizontal tbody tr:last-child td:first-child { |
| | 1410 | border-top-right-radius: 0.25rem; |
| | 1411 | } |
| | 1412 | |
| | 1413 | table.horizontal tbody tr:last-child td:last-child { |
| | 1414 | border-bottom-right-radius: 0.25rem; |
| | 1415 | } |
| | 1416 | |
| | 1417 | table.horizontal thead tr:first-child th:first-child { |
| | 1418 | border-top-left-radius: 0.25rem; |
| | 1419 | } |
| | 1420 | |
| | 1421 | table.horizontal thead tr:first-child th:last-child { |
| | 1422 | border-bottom-left-radius: 0.25rem; |
| | 1423 | } |
| | 1424 | |
| | 1425 | :root { |
| | 1426 | --table-body-alt-back-color: #eee; |
| | 1427 | } |
| | 1428 | |
| | 1429 | table.striped tr:nth-of-type(2n) > td { |
| | 1430 | background: var(--table-body-alt-back-color); |
| | 1431 | } |
| | 1432 | |
| | 1433 | :root { |
| | 1434 | --table-body-hover-back-color: #90caf9; |
| | 1435 | } |
| | 1436 | |
| | 1437 | table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { |
| | 1438 | background: var(--table-body-hover-back-color); |
| | 1439 | } |
| | 1440 | |
| | 1441 | /* |
| | 1442 | Definitions for contextual background elements, toasts and tooltips. |
| | 1443 | */ |
| | 1444 | /* Contextual module CSS variable definitions */ |
| | 1445 | :root { |
| | 1446 | --mark-back-color: #0277bd; |
| | 1447 | --mark-fore-color: #fafafa; |
| | 1448 | } |
| | 1449 | |
| | 1450 | mark { |
| | 1451 | background: var(--mark-back-color); |
| | 1452 | color: var(--mark-fore-color); |
| | 1453 | font-size: 0.95em; |
| | 1454 | line-height: 1em; |
| | 1455 | border-radius: var(--universal-border-radius); |
| | 1456 | padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); |
| | 1457 | } |
| | 1458 | |
| | 1459 | mark.inline-block { |
| | 1460 | display: inline-block; |
| | 1461 | font-size: 1em; |
| | 1462 | line-height: 1.5; |
| | 1463 | padding: calc(var(--universal-padding) / 2) var(--universal-padding); |
| | 1464 | } |
| | 1465 | |
| | 1466 | :root { |
| | 1467 | --toast-back-color: #424242; |
| | 1468 | --toast-fore-color: #fafafa; |
| | 1469 | } |
| | 1470 | |
| | 1471 | .toast { |
| | 1472 | position: fixed; |
| | 1473 | bottom: calc(var(--universal-margin) * 3); |
| | 1474 | left: 50%; |
| | 1475 | transform: translate(-50%, -50%); |
| | 1476 | z-index: 1111; |
| | 1477 | color: var(--toast-fore-color); |
| | 1478 | background: var(--toast-back-color); |
| | 1479 | border-radius: calc(var(--universal-border-radius) * 16); |
| | 1480 | padding: var(--universal-padding) calc(var(--universal-padding) * 3); |
| | 1481 | } |
| | 1482 | |
| | 1483 | :root { |
| | 1484 | --tooltip-back-color: #212121; |
| | 1485 | --tooltip-fore-color: #fafafa; |
| | 1486 | } |
| | 1487 | |
| | 1488 | .tooltip { |
| | 1489 | position: relative; |
| | 1490 | display: inline-block; |
| | 1491 | } |
| | 1492 | |
| | 1493 | .tooltip:before, .tooltip:after { |
| | 1494 | position: absolute; |
| | 1495 | opacity: 0; |
| | 1496 | clip: rect(0 0 0 0); |
| | 1497 | -webkit-clip-path: inset(100%); |
| | 1498 | clip-path: inset(100%); |
| | 1499 | transition: all 0.3s; |
| | 1500 | z-index: 1010; |
| | 1501 | left: 50%; |
| | 1502 | } |
| | 1503 | |
| | 1504 | .tooltip:not(.bottom):before, .tooltip:not(.bottom):after { |
| | 1505 | bottom: 75%; |
| | 1506 | } |
| | 1507 | |
| | 1508 | .tooltip.bottom:before, .tooltip.bottom:after { |
| | 1509 | top: 75%; |
| | 1510 | } |
| | 1511 | |
| | 1512 | .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { |
| | 1513 | opacity: 1; |
| | 1514 | clip: auto; |
| | 1515 | -webkit-clip-path: inset(0%); |
| | 1516 | clip-path: inset(0%); |
| | 1517 | } |
| | 1518 | |
| | 1519 | .tooltip:before { |
| | 1520 | content: ''; |
| | 1521 | background: transparent; |
| | 1522 | border: var(--universal-margin) solid transparent; |
| | 1523 | left: calc(50% - var(--universal-margin)); |
| | 1524 | } |
| | 1525 | |
| | 1526 | .tooltip:not(.bottom):before { |
| | 1527 | border-top-color: #212121; |
| | 1528 | } |
| | 1529 | |
| | 1530 | .tooltip.bottom:before { |
| | 1531 | border-bottom-color: #212121; |
| | 1532 | } |
| | 1533 | |
| | 1534 | .tooltip:after { |
| | 1535 | content: attr(aria-label); |
| | 1536 | color: var(--tooltip-fore-color); |
| | 1537 | background: var(--tooltip-back-color); |
| | 1538 | border-radius: var(--universal-border-radius); |
| | 1539 | padding: var(--universal-padding); |
| | 1540 | white-space: nowrap; |
| | 1541 | transform: translateX(-50%); |
| | 1542 | } |
| | 1543 | |
| | 1544 | .tooltip:not(.bottom):after { |
| | 1545 | margin-bottom: calc(2 * var(--universal-margin)); |
| | 1546 | } |
| | 1547 | |
| | 1548 | .tooltip.bottom:after { |
| | 1549 | margin-top: calc(2 * var(--universal-margin)); |
| | 1550 | } |
| | 1551 | |
| | 1552 | :root { |
| | 1553 | --modal-overlay-color: rgba(0, 0, 0, 0.45); |
| | 1554 | --modal-close-color: #444; |
| | 1555 | --modal-close-hover-color: #f0f0f0; |
| | 1556 | } |
| | 1557 | |
| | 1558 | [type="checkbox"].modal { |
| | 1559 | height: 1px; |
| | 1560 | width: 1px; |
| | 1561 | margin: -1px; |
| | 1562 | overflow: hidden; |
| | 1563 | position: absolute; |
| | 1564 | clip: rect(0 0 0 0); |
| | 1565 | -webkit-clip-path: inset(100%); |
| | 1566 | clip-path: inset(100%); |
| | 1567 | } |
| | 1568 | |
| | 1569 | [type="checkbox"].modal + div { |
| | 1570 | position: fixed; |
| | 1571 | top: 0; |
| | 1572 | left: 0; |
| | 1573 | display: none; |
| | 1574 | width: 100vw; |
| | 1575 | height: 100vh; |
| | 1576 | background: var(--modal-overlay-color); |
| | 1577 | } |
| | 1578 | |
| | 1579 | [type="checkbox"].modal + div .card { |
| | 1580 | margin: 0 auto; |
| | 1581 | max-height: 50vh; |
| | 1582 | overflow: auto; |
| | 1583 | } |
| | 1584 | |
| | 1585 | [type="checkbox"].modal + div .card .modal-close { |
| | 1586 | position: absolute; |
| | 1587 | top: 0; |
| | 1588 | right: 0; |
| | 1589 | width: 1.75rem; |
| | 1590 | height: 1.75rem; |
| | 1591 | border-radius: var(--universal-border-radius); |
| | 1592 | padding: var(--universal-padding); |
| | 1593 | margin: 0; |
| | 1594 | cursor: pointer; |
| | 1595 | transition: background 0.3s; |
| | 1596 | } |
| | 1597 | |
| | 1598 | [type="checkbox"].modal + div .card .modal-close:before { |
| | 1599 | display: block; |
| | 1600 | content: '\00D7'; |
| | 1601 | color: var(--modal-close-color); |
| | 1602 | position: relative; |
| | 1603 | font-family: sans-serif; |
| | 1604 | font-size: 1.75rem; |
| | 1605 | line-height: 1; |
| | 1606 | text-align: center; |
| | 1607 | } |
| | 1608 | |
| | 1609 | [type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus { |
| | 1610 | background: var(--modal-close-hover-color); |
| | 1611 | } |
| | 1612 | |
| | 1613 | [type="checkbox"].modal:checked + div { |
| | 1614 | display: flex; |
| | 1615 | flex: 0 1 auto; |
| | 1616 | z-index: 1200; |
| | 1617 | } |
| | 1618 | |
| | 1619 | [type="checkbox"].modal:checked + div .card .modal-close { |
| | 1620 | z-index: 1211; |
| | 1621 | } |
| | 1622 | |
| | 1623 | :root { |
| | 1624 | --collapse-label-back-color: #e8e8e8; |
| | 1625 | --collapse-label-fore-color: #212121; |
| | 1626 | --collapse-label-hover-back-color: #f0f0f0; |
| | 1627 | --collapse-selected-label-back-color: #ececec; |
| | 1628 | --collapse-border-color: #ddd; |
| | 1629 | --collapse-content-back-color: #fafafa; |
| | 1630 | --collapse-selected-label-border-color: #0277bd; |
| | 1631 | } |
| | 1632 | |
| | 1633 | .collapse { |
| | 1634 | width: calc(100% - 2 * var(--universal-margin)); |
| | 1635 | opacity: 1; |
| | 1636 | display: flex; |
| | 1637 | flex-direction: column; |
| | 1638 | margin: var(--universal-margin); |
| | 1639 | border-radius: var(--universal-border-radius); |
| | 1640 | } |
| | 1641 | |
| | 1642 | .collapse > [type="radio"], .collapse > [type="checkbox"] { |
| | 1643 | height: 1px; |
| | 1644 | width: 1px; |
| | 1645 | margin: -1px; |
| | 1646 | overflow: hidden; |
| | 1647 | position: absolute; |
| | 1648 | clip: rect(0 0 0 0); |
| | 1649 | -webkit-clip-path: inset(100%); |
| | 1650 | clip-path: inset(100%); |
| | 1651 | } |
| | 1652 | |
| | 1653 | .collapse > label { |
| | 1654 | flex-grow: 1; |
| | 1655 | display: inline-block; |
| | 1656 | height: 1.5rem; |
| | 1657 | cursor: pointer; |
| | 1658 | transition: background 0.3s; |
| | 1659 | color: var(--collapse-label-fore-color); |
| | 1660 | background: var(--collapse-label-back-color); |
| | 1661 | border: 0.0625rem solid var(--collapse-border-color); |
| | 1662 | padding: calc(1.5 * var(--universal-padding)); |
| | 1663 | } |
| | 1664 | |
| | 1665 | .collapse > label:hover, .collapse > label:focus { |
| | 1666 | background: var(--collapse-label-hover-back-color); |
| | 1667 | } |
| | 1668 | |
| | 1669 | .collapse > label + div { |
| | 1670 | flex-basis: auto; |
| | 1671 | height: 1px; |
| | 1672 | width: 1px; |
| | 1673 | margin: -1px; |
| | 1674 | overflow: hidden; |
| | 1675 | position: absolute; |
| | 1676 | clip: rect(0 0 0 0); |
| | 1677 | -webkit-clip-path: inset(100%); |
| | 1678 | clip-path: inset(100%); |
| | 1679 | transition: max-height 0.3s; |
| | 1680 | max-height: 1px; |
| | 1681 | } |
| | 1682 | |
| | 1683 | .collapse > :checked + label { |
| | 1684 | background: var(--collapse-selected-label-back-color); |
| | 1685 | border-bottom-color: var(--collapse-selected-label-border-color); |
| | 1686 | } |
| | 1687 | |
| | 1688 | .collapse > :checked + label + div { |
| | 1689 | box-sizing: border-box; |
| | 1690 | position: relative; |
| | 1691 | width: 100%; |
| | 1692 | height: auto; |
| | 1693 | overflow: auto; |
| | 1694 | margin: 0; |
| | 1695 | background: var(--collapse-content-back-color); |
| | 1696 | border: 0.0625rem solid var(--collapse-border-color); |
| | 1697 | border-top: 0; |
| | 1698 | padding: var(--universal-padding); |
| | 1699 | clip: auto; |
| | 1700 | -webkit-clip-path: inset(0%); |
| | 1701 | clip-path: inset(0%); |
| | 1702 | max-height: 400px; |
| | 1703 | } |
| | 1704 | |
| | 1705 | .collapse > label:not(:first-of-type) { |
| | 1706 | border-top: 0; |
| | 1707 | } |
| | 1708 | |
| | 1709 | .collapse > label:first-of-type { |
| | 1710 | border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; |
| | 1711 | } |
| | 1712 | |
| | 1713 | .collapse > label:last-of-type:not(:first-of-type) { |
| | 1714 | border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); |
| | 1715 | } |
| | 1716 | |
| | 1717 | .collapse > label:last-of-type:first-of-type { |
| | 1718 | border-radius: var(--universal-border-radius); |
| | 1719 | } |
| | 1720 | |
| | 1721 | .collapse > :checked:last-of-type:not(:first-of-type) + label { |
| | 1722 | border-radius: 0; |
| | 1723 | } |
| | 1724 | |
| | 1725 | .collapse > :checked:last-of-type + label + div { |
| | 1726 | border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); |
| | 1727 | } |
| | 1728 | |
| | 1729 | /* |
| | 1730 | Custom elements for contextual background elements, toasts and tooltips. |
| | 1731 | */ |
| | 1732 | mark.secondary { |
| | 1733 | --mark-back-color: #d32f2f; |
| | 1734 | } |
| | 1735 | |
| | 1736 | mark.tertiary { |
| | 1737 | --mark-back-color: #308732; |
| | 1738 | } |
| | 1739 | |
| | 1740 | mark.tag { |
| | 1741 | padding: calc(var(--universal-padding)/2) var(--universal-padding); |
| | 1742 | border-radius: 1em; |
| | 1743 | } |
| | 1744 | |
| | 1745 | /* |
| | 1746 | Definitions for progress elements and spinners. |
| | 1747 | */ |
| | 1748 | /* Progess module CSS variable definitions */ |
| | 1749 | :root { |
| | 1750 | --progress-back-color: #ddd; |
| | 1751 | --progress-fore-color: #555; |
| | 1752 | } |
| | 1753 | |
| | 1754 | progress { |
| | 1755 | display: block; |
| | 1756 | vertical-align: baseline; |
| | 1757 | -webkit-appearance: none; |
| | 1758 | -moz-appearance: none; |
| | 1759 | appearance: none; |
| | 1760 | height: 0.75rem; |
| | 1761 | width: calc(100% - 2 * var(--universal-margin)); |
| | 1762 | margin: var(--universal-margin); |
| | 1763 | border: 0; |
| | 1764 | border-radius: calc(2 * var(--universal-border-radius)); |
| | 1765 | background: var(--progress-back-color); |
| | 1766 | color: var(--progress-fore-color); |
| | 1767 | } |
| | 1768 | |
| | 1769 | progress::-webkit-progress-value { |
| | 1770 | background: var(--progress-fore-color); |
| | 1771 | border-top-left-radius: calc(2 * var(--universal-border-radius)); |
| | 1772 | border-bottom-left-radius: calc(2 * var(--universal-border-radius)); |
| | 1773 | } |
| | 1774 | |
| | 1775 | progress::-webkit-progress-bar { |
| | 1776 | background: var(--progress-back-color); |
| | 1777 | } |
| | 1778 | |
| | 1779 | progress::-moz-progress-bar { |
| | 1780 | background: var(--progress-fore-color); |
| | 1781 | border-top-left-radius: calc(2 * var(--universal-border-radius)); |
| | 1782 | border-bottom-left-radius: calc(2 * var(--universal-border-radius)); |
| | 1783 | } |
| | 1784 | |
| | 1785 | progress[value="1000"]::-webkit-progress-value { |
| | 1786 | border-radius: calc(2 * var(--universal-border-radius)); |
| | 1787 | } |
| | 1788 | |
| | 1789 | progress[value="1000"]::-moz-progress-bar { |
| | 1790 | border-radius: calc(2 * var(--universal-border-radius)); |
| | 1791 | } |
| | 1792 | |
| | 1793 | progress.inline { |
| | 1794 | display: inline-block; |
| | 1795 | vertical-align: middle; |
| | 1796 | width: 60%; |
| | 1797 | } |
| | 1798 | |
| | 1799 | :root { |
| | 1800 | --spinner-back-color: #ddd; |
| | 1801 | --spinner-fore-color: #555; |
| | 1802 | } |
| | 1803 | |
| | 1804 | @keyframes spinner-donut-anim { |
| | 1805 | 0% { |
| | 1806 | transform: rotate(0deg); |
| | 1807 | } |
| | 1808 | 100% { |
| | 1809 | transform: rotate(360deg); |
| | 1810 | } |
| | 1811 | } |
| | 1812 | |
| | 1813 | .spinner { |
| | 1814 | display: inline-block; |
| | 1815 | margin: var(--universal-margin); |
| | 1816 | border: 0.25rem solid var(--spinner-back-color); |
| | 1817 | border-left: 0.25rem solid var(--spinner-fore-color); |
| | 1818 | border-radius: 50%; |
| | 1819 | width: 1.25rem; |
| | 1820 | height: 1.25rem; |
| | 1821 | animation: spinner-donut-anim 1.2s linear infinite; |
| | 1822 | } |
| | 1823 | |
| | 1824 | /* |
| | 1825 | Custom elements for progress bars and spinners. |
| | 1826 | */ |
| | 1827 | progress.primary { |
| | 1828 | --progress-fore-color: #1976d2; |
| | 1829 | } |
| | 1830 | |
| | 1831 | progress.secondary { |
| | 1832 | --progress-fore-color: #d32f2f; |
| | 1833 | } |
| | 1834 | |
| | 1835 | progress.tertiary { |
| | 1836 | --progress-fore-color: #308732; |
| | 1837 | } |
| | 1838 | |
| | 1839 | .spinner.primary { |
| | 1840 | --spinner-fore-color: #1976d2; |
| | 1841 | } |
| | 1842 | |
| | 1843 | .spinner.secondary { |
| | 1844 | --spinner-fore-color: #d32f2f; |
| | 1845 | } |
| | 1846 | |
| | 1847 | .spinner.tertiary { |
| | 1848 | --spinner-fore-color: #308732; |
| | 1849 | } |
| | 1850 | |
| | 1851 | /* |
| | 1852 | Definitions for icons - powered by Feather (https://feathericons.com/). |
| | 1853 | */ |
| | 1854 | span[class^='icon-'] { |
| | 1855 | display: inline-block; |
| | 1856 | height: 1em; |
| | 1857 | width: 1em; |
| | 1858 | vertical-align: -0.125em; |
| | 1859 | background-size: contain; |
| | 1860 | margin: 0 calc(var(--universal-margin) / 4); |
| | 1861 | } |
| | 1862 | |
| | 1863 | span[class^='icon-'].secondary { |
| | 1864 | -webkit-filter: invert(25%); |
| | 1865 | filter: invert(25%); |
| | 1866 | } |
| | 1867 | |
| | 1868 | span[class^='icon-'].inverse { |
| | 1869 | -webkit-filter: invert(100%); |
| | 1870 | filter: invert(100%); |
| | 1871 | } |
| | 1872 | |
| | 1873 | span.icon-alert { |
| | 1874 | 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"); |
| | 1875 | } |
| | 1876 | |
| | 1877 | span.icon-bookmark { |
| | 1878 | 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"); |
| | 1879 | } |
| | 1880 | |
| | 1881 | span.icon-calendar { |
| | 1882 | 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"); |
| | 1883 | } |
| | 1884 | |
| | 1885 | span.icon-credit { |
| | 1886 | 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"); |
| | 1887 | } |
| | 1888 | |
| | 1889 | span.icon-edit { |
| | 1890 | 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"); |
| | 1891 | } |
| | 1892 | |
| | 1893 | span.icon-link { |
| | 1894 | 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"); |
| | 1895 | } |
| | 1896 | |
| | 1897 | span.icon-help { |
| | 1898 | 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"); |
| | 1899 | } |
| | 1900 | |
| | 1901 | span.icon-home { |
| | 1902 | 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"); |
| | 1903 | } |
| | 1904 | |
| | 1905 | span.icon-info { |
| | 1906 | 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"); |
| | 1907 | } |
| | 1908 | |
| | 1909 | span.icon-lock { |
| | 1910 | 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"); |
| | 1911 | } |
| | 1912 | |
| | 1913 | span.icon-mail { |
| | 1914 | 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"); |
| | 1915 | } |
| | 1916 | |
| | 1917 | span.icon-location { |
| | 1918 | 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"); |
| | 1919 | } |
| | 1920 | |
| | 1921 | span.icon-phone { |
| | 1922 | 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"); |
| | 1923 | } |
| | 1924 | |
| | 1925 | span.icon-rss { |
| | 1926 | 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"); |
| | 1927 | } |
| | 1928 | |
| | 1929 | span.icon-search { |
| | 1930 | 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"); |
| | 1931 | } |
| | 1932 | |
| | 1933 | span.icon-settings { |
| | 1934 | 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"); |
| | 1935 | } |
| | 1936 | |
| | 1937 | span.icon-share { |
| | 1938 | 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"); |
| | 1939 | } |
| | 1940 | |
| | 1941 | span.icon-cart { |
| | 1942 | 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"); |
| | 1943 | } |
| | 1944 | |
| | 1945 | span.icon-upload { |
| | 1946 | 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"); |
| | 1947 | } |
| | 1948 | |
| | 1949 | span.icon-user { |
| | 1950 | 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"); |
| | 1951 | } |
| | 1952 | |
| | 1953 | /* |
| | 1954 | Definitions for utilities and helper classes. |
| | 1955 | */ |
| | 1956 | /* Utility module CSS variable definitions */ |
| | 1957 | :root { |
| | 1958 | --generic-border-color: rgba(0, 0, 0, 0.3); |
| | 1959 | --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); |
| | 1960 | } |
| | 1961 | |
| | 1962 | .hidden { |
| | 1963 | display: none !important; |
| | 1964 | } |
| | 1965 | |
| | 1966 | .visually-hidden { |
| | 1967 | position: absolute !important; |
| | 1968 | width: 1px !important; |
| | 1969 | height: 1px !important; |
| | 1970 | margin: -1px !important; |
| | 1971 | border: 0 !important; |
| | 1972 | padding: 0 !important; |
| | 1973 | clip: rect(0 0 0 0) !important; |
| | 1974 | -webkit-clip-path: inset(100%) !important; |
| | 1975 | clip-path: inset(100%) !important; |
| | 1976 | overflow: hidden !important; |
| | 1977 | } |
| | 1978 | |
| | 1979 | .bordered { |
| | 1980 | border: 0.0625rem solid var(--generic-border-color) !important; |
| | 1981 | } |
| | 1982 | |
| | 1983 | .rounded { |
| | 1984 | border-radius: var(--universal-border-radius) !important; |
| | 1985 | } |
| | 1986 | |
| | 1987 | .circular { |
| | 1988 | border-radius: 50% !important; |
| | 1989 | } |
| | 1990 | |
| | 1991 | .shadowed { |
| | 1992 | box-shadow: var(--generic-box-shadow) !important; |
| | 1993 | } |
| | 1994 | |
| | 1995 | .responsive-margin { |
| | 1996 | margin: calc(var(--universal-margin) / 4) !important; |
| | 1997 | } |
| | 1998 | |
| | 1999 | @media screen and (min-width: 768px) { |
| | 2000 | .responsive-margin { |
| | 2001 | margin: calc(var(--universal-margin) / 2) !important; |
| | 2002 | } |
| | 2003 | } |
| | 2004 | |
| | 2005 | @media screen and (min-width: 1280px) { |
| | 2006 | .responsive-margin { |
| | 2007 | margin: var(--universal-margin) !important; |
| | 2008 | } |
| | 2009 | } |
| | 2010 | |
| | 2011 | .responsive-padding { |
| | 2012 | padding: calc(var(--universal-padding) / 4) !important; |
| | 2013 | } |
| | 2014 | |
| | 2015 | @media screen and (min-width: 768px) { |
| | 2016 | .responsive-padding { |
| | 2017 | padding: calc(var(--universal-padding) / 2) !important; |
| | 2018 | } |
| | 2019 | } |
| | 2020 | |
| | 2021 | @media screen and (min-width: 1280px) { |
| | 2022 | .responsive-padding { |
| | 2023 | padding: var(--universal-padding) !important; |
| | 2024 | } |
| | 2025 | } |
| | 2026 | |
| | 2027 | @media screen and (max-width: 767px) { |
| | 2028 | .hidden-sm { |
| | 2029 | display: none !important; |
| | 2030 | } |
| | 2031 | } |
| | 2032 | |
| | 2033 | @media screen and (min-width: 768px) and (max-width: 1279px) { |
| | 2034 | .hidden-md { |
| | 2035 | display: none !important; |
| | 2036 | } |
| | 2037 | } |
| | 2038 | |
| | 2039 | @media screen and (min-width: 1280px) { |
| | 2040 | .hidden-lg { |
| | 2041 | display: none !important; |
| | 2042 | } |
| | 2043 | } |
| | 2044 | |
| | 2045 | @media screen and (max-width: 767px) { |
| | 2046 | .visually-hidden-sm { |
| | 2047 | position: absolute !important; |
| | 2048 | width: 1px !important; |
| | 2049 | height: 1px !important; |
| | 2050 | margin: -1px !important; |
| | 2051 | border: 0 !important; |
| | 2052 | padding: 0 !important; |
| | 2053 | clip: rect(0 0 0 0) !important; |
| | 2054 | -webkit-clip-path: inset(100%) !important; |
| | 2055 | clip-path: inset(100%) !important; |
| | 2056 | overflow: hidden !important; |
| | 2057 | } |
| | 2058 | } |
| | 2059 | |
| | 2060 | @media screen and (min-width: 768px) and (max-width: 1279px) { |
| | 2061 | .visually-hidden-md { |
| | 2062 | position: absolute !important; |
| | 2063 | width: 1px !important; |
| | 2064 | height: 1px !important; |
| | 2065 | margin: -1px !important; |
| | 2066 | border: 0 !important; |
| | 2067 | padding: 0 !important; |
| | 2068 | clip: rect(0 0 0 0) !important; |
| | 2069 | -webkit-clip-path: inset(100%) !important; |
| | 2070 | clip-path: inset(100%) !important; |
| | 2071 | overflow: hidden !important; |
| | 2072 | } |
| | 2073 | } |
| | 2074 | |
| | 2075 | @media screen and (min-width: 1280px) { |
| | 2076 | .visually-hidden-lg { |
| | 2077 | position: absolute !important; |
| | 2078 | width: 1px !important; |
| | 2079 | height: 1px !important; |
| | 2080 | margin: -1px !important; |
| | 2081 | border: 0 !important; |
| | 2082 | padding: 0 !important; |
| | 2083 | clip: rect(0 0 0 0) !important; |
| | 2084 | -webkit-clip-path: inset(100%) !important; |
| | 2085 | clip-path: inset(100%) !important; |
| | 2086 | overflow: hidden !important; |
| | 2087 | } |
| | 2088 | } |
projects / vchess.git / blame_incremental