Raphaël G. Git Repositories - airbundle/blob - Resources/public/css/screen.css

   1 /* Reset link */
   2 a {
   3         text-decoration: none;
   4         color: #066;
   5 }
   6
   7 a:hover {
   8         text-decoration: underline solid #00c3f9;
   9 }
  10
  11 h1::first-letter,
  12 h2::first-letter,
  13 h3::first-letter,
  14 h4::first-letter,
  15 h5::first-letter,
  16 h6::first-letter,
  17 a::first-letter {
  18         color: #00c3f9;
  19 }
  20
  21 /* Font styling */
  22 html, body, dd, li, p, td {
  23         /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
  24         font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
  25         font-display: swap;
  26 }
  27
  28 button, code, input, option, optgroup, pre, select, textarea {
  29         font-family: 'Droid Sans Mono', monospace;
  30         font-display: swap;
  31 }
  32
  33 dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
  34         font-family: 'Droid Serif', serif;
  35         font-display: swap;
  36 }
  37
  38 /* Default styling */
  39 h1 {
  40         font-size: 2rem;
  41 }
  42
  43 h2 {
  44         font-size: 1.5rem;
  45         margin: 0 0 .5rem;
  46         padding: .5rem;
  47 }
  48
  49 h3 {
  50         font-size: 1.17rem;
  51         margin: 0 0 .5rem;
  52         padding: .4rem;
  53 }
  54
  55 h4 {
  56         font-size: 1rem;
  57         margin: 0 0 .5rem;
  58         padding: .3rem;
  59 }
  60
  61 h5 {
  62         font-size: .85rem;
  63         margin: 0 0 .5rem;
  64         padding: .2rem;
  65 }
  66
  67 h6 {
  68         font-size: .67rem;
  69         margin: 0 0 .5rem;
  70         padding: .1rem;
  71 }
  72
  73 nav strong {
  74         display: block;
  75         font-size: 1.17rem;
  76         margin: 0 0 .5rem;
  77         padding: .4rem;
  78 }
  79
  80 h2, h3, h4, h5, nav strong {
  81         background-color: #cff;
  82         border-bottom: .1rem solid #00c3f9;
  83 }
  84
  85 strong {
  86         font-weight: bold;
  87 }
  88
  89 p {
  90         margin: 0 .5rem .3rem;
  91         font-size: .9rem;
  92 }
  93
  94 body {
  95         display: flex;
  96         flex-flow: column wrap;
  97         color: #066;
  98 }
  99
 100 nav,
 101 section {
 102         margin: 0 .5rem .5rem;
 103         border: .1rem solid #00c3f9;
 104         border-radius: .3rem;
 105 }
 106
 107 ul {
 108         display: grid;
 109         margin: 0 .5rem .3rem;
 110         font-size: .9rem;
 111         list-style: ' - ' inside none;
 112         gap: .3rem;
 113 }
 114
 115 nav ul {
 116         list-style: none inside none;
 117         margin-bottom: .5rem;
 118         gap: .5rem;
 119 }
 120
 121 nav ul ul {
 122         margin-top: .5rem;
 123         margin-bottom: 0;
 124 }
 125
 126 /* Form */
 127 label {
 128         font-size: .8rem;
 129         white-space: nowrap;
 130 }
 131
 132 button,
 133 input,
 134 select,
 135 option,
 136 optgroup,
 137 textarea {
 138         border: .05rem solid #00c3f9;
 139         border-radius: .2rem;
 140         font-size: .75rem;
 141         color: #066;
 142         background-color: transparent;
 143         box-sizing: border-box;
 144 }
 145
 146 form {
 147         display: flex;
 148         flex-direction: column;
 149         flex-wrap: wrap;
 150         margin: 0 .5rem .5rem;
 151         text-align: center;
 152 }
 153
 154 form .row {
 155         flex-direction: row;
 156 }
 157
 158 form div {
 159         display: flex;
 160         align-content: space-around;
 161         justify-content: center;
 162         flex-direction: column;
 163         margin-bottom: .5rem;
 164 }
 165
 166 form div:only-child,
 167 form div:last-child,
 168 form div:last-of-type {
 169         margin-bottom: 0;
 170 }
 171
 172 /*form section div {
 173         display: flex;
 174         flex-direction: row;
 175         align-content: space-around;
 176         justify-content: center;
 177 }
 178
 179 form section section {
 180         display: flex;
 181         flex-direction: column;
 182 }*/
 183
 184 form label {
 185         width: 12rem;
 186         /*padding: .2rem 1rem .2rem 0;*/
 187         padding-right: 1rem;
 188         text-align: right;
 189 }
 190
 191 form input,
 192 form option,
 193 form optgroup,
 194 form select,
 195 form textarea,
 196 form section section {
 197         width: 24rem;
 198         padding: .1rem;
 199 }
 200
 201 form select {
 202         padding: 0 .1rem .1rem .1rem;
 203 }
 204
 205 form button {
 206         width: 10rem;
 207         /*margin: .5rem auto 0 auto;*/
 208         margin: 0 auto;
 209         padding: 0 .1rem .2rem .1rem;
 210 }
 211
 212 form .message {
 213         margin: .25rem 0 0 0;
 214 }
 215
 216 /* Vertical form */
 217 .col label {
 218         width: 8rem;
 219         padding-right: 0;
 220         padding-bottom: .2rem;
 221         text-align: center;
 222 }
 223
 224 .col input,
 225 .col option,
 226 .col optgroup,
 227 .col select,
 228 .col textarea {
 229         width: 8rem;
 230 }
 231
 232 .col button {
 233         width: 8rem;
 234 }
 235
 236 /*.col section {
 237         width: auto;
 238 }*/
 239
 240 .col .row {
 241         flex-direction: column;
 242 }
 243
 244 .col div.date {
 245         flex-direction: row;
 246         justify-content: space-between;
 247 }
 248
 249 /* Header */
 250 #header {
 251         border: .1rem solid #00c3f9;
 252         border-top: 0;
 253         border-radius: 0 0 .5rem .5rem;
 254         margin: 0 .5rem .5rem;
 255         display: flex;
 256         flex-direction: row;
 257         flex-wrap: nowrap;
 258         justify-content: space-between;
 259         line-height: 32px;
 260         font-size: 32px;
 261         padding: .5rem;
 262         gap: .5rem;
 263 }
 264
 265 #header h1 {
 266         padding: 0;
 267         margin: 0;
 268         white-space: nowrap;
 269         width: 171px;
 270         height: 32px;
 271 }
 272
 273 #header h2 {
 274         display: none;
 275 }
 276
 277 #header nav {
 278         display: flex;
 279         flex: 1 1 auto;
 280         border-style: none;
 281         margin: 0;
 282 }
 283
 284 #header ul {
 285         display: flex;
 286         flex: 1 1 auto;
 287         flex-direction: row;
 288         flex-wrap: wrap;
 289         margin: 0;
 290         gap: .5rem;
 291 }
 292
 293 #header li {
 294         display: flex;
 295         flex: 1 1 auto;
 296         border-radius: .2rem;
 297         border: .1rem solid #00c3f9;
 298         background-color: #cff;
 299         justify-content: center;
 300 }
 301
 302 #header ul a {
 303         text-align: center;
 304         font-weight: bold;
 305 }
 306
 307 /* Message */
 308 .message {
 309         margin: 0 .5rem .5rem;
 310         display: flex;
 311         flex-direction: row;
 312         justify-content: space-between;
 313         font-size: .9rem;
 314         padding: .2rem;
 315         border-radius: .2rem;
 316         text-align: center;
 317         border: .05rem solid transparent;
 318 }
 319
 320 .message::before,
 321 .message::after {
 322         margin: auto 0;
 323         padding: 0 .25rem;
 324 }
 325
 326 .message ul {
 327         margin: 0;
 328         list-style: none inside none;
 329         gap: .1rem;
 330 }
 331
 332 .mortal,
 333 .mortal button,
 334 .mortal select {
 335         border-color: #c33333;
 336         background-color: #f9c3c3;
 337         color: #c33333;
 338 }
 339
 340 .dangerous,
 341 .mortal {
 342         border-radius: .2rem;
 343         padding: .5rem 0;
 344 }
 345
 346 .error {
 347         border-color: #c33333;
 348         background-color: #f9c3c3;
 349         color: #c33333;
 350 }
 351
 352 .error::before,
 353 .error::after {
 354         /*XXX: display /!\ symbol */
 355         content: "⚠";
 356 }
 357
 358 .notice {
 359         border-color: #3333c3;
 360         background-color: #c3c3f9;
 361         color: #3333c3;
 362 }
 363
 364 .notice::before,
 365 .notice::after {
 366         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 367          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 368         /*XXX: display i symbol */
 369         content: "ℹ";
 370         /*XXX: display # symbol */
 371         /*content: "⌘";*/
 372 }
 373
 374 .dangerous,
 375 .dangerous button,
 376 .dangerous select {
 377         border-color: #c39333;
 378         background-color: #f9c333;
 379         color: #936333;
 380 }
 381
 382 .warning {
 383         border-color: #c39333;
 384         background-color: #f9c333;
 385         color: #936333;
 386 }
 387
 388 .warning::before,
 389 .warning::after {
 390         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 391          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 392         content: "?";
 393         /*XXX: display # symbol */
 394         /*content: "⌘";*/
 395 }
 396
 397 /* Dashboard */
 398 #dashboard,
 399 #form,
 400 #recover,
 401 #regulation {
 402         border: .1rem solid #00c3f9;
 403         border-radius: .5rem;
 404         margin: .5rem;
 405         margin-top: 0;
 406         display: flex;
 407         flex-direction: column;
 408 }
 409
 410 .panel {
 411         display: flex;
 412         flex-direction: row;
 413         margin: 0 .5rem .5rem;
 414         gap: .5rem;
 415 }
 416
 417 .grid {
 418         display: flex;
 419         flex-flow: row wrap;
 420         border-style: solid;
 421         border-color: #00c3f9;
 422         border-radius: .2rem;
 423         flex: 1 1 auto;
 424         box-sizing: border-box;
 425         border-collapse: collapse;
 426         gap: .1rem;
 427 }
 428
 429 .grid section {
 430         margin: 0;
 431 }
 432
 433 .grid h3 {
 434         margin: 0;
 435 }
 436
 437 .grid ul {
 438         display: block;
 439         margin: .1rem;
 440         font-size: .8rem;
 441         list-style: none inside none;
 442 }
 443
 444 .grid p {
 445         margin: 0 0 .3rem;
 446 }
 447
 448 .grid p:only-child,
 449 .grid p:last-child,
 450 .grid p:last-of-type {
 451         margin: 0;
 452 }
 453
 454 .form {
 455         margin: 0;
 456         display: flex;
 457         flex-direction: column;
 458         gap: .5rem;
 459 }
 460
 461 .form h2 {
 462         font-size: 1.17rem;
 463         padding: .4rem;
 464 }
 465
 466 .form a {
 467         white-space: nowrap;
 468 }
 469
 470 .form section {
 471         margin: 0;
 472         border: .05rem solid #00c3f9;
 473         border-radius: .2rem;
 474 }
 475
 476 .form form {
 477         gap: .5rem;
 478 }
 479
 480 #location section {
 481         display: flex;
 482         flex: 1 1 auto;
 483         flex-direction: column;
 484 }
 485
 486 #location h3 {
 487         margin: 0;
 488         border-style: none;
 489         flex: 1 1 auto;
 490 }
 491
 492 #location form {
 493         margin-top: .5rem;
 494 }
 495
 496 #location form label {
 497         width: 4.5rem;
 498 }
 499
 500 /*#dashboard .panel {
 501         display: flex;
 502         flex-direction: row;
 503         flex-wrap: nowrap;
 504         place-content: space-between;
 505         border: 0;
 506         margin: 0;
 507         padding: 0 .5rem .5rem .5rem;
 508 }
 509
 510 #dashboard .panel:only-child,
 511 #dashboard .panel:first-child,
 512 #dashboard .panel:first-of-type {
 513         padding-top: .5rem;
 514 }
 515
 516
 517 #dashboard .panel:only-child,
 518 #dashboard .panel:last-child,
 519 #dashboard .panel:last-of-type {
 520         padding-bottom: .5rem;
 521 }*/
 522
 523 #dashboard .candidate section,
 524 #dashboard .location section {
 525         flex-direction: column;
 526         flex-grow: 1;
 527         border: .1rem solid #00c3f9;
 528         border-radius: .3rem;
 529         padding: 0;
 530 }
 531
 532 #dashboard .location h4 {
 533         border-width: 0;
 534 }
 535
 536 /*#dashboard .grid {
 537         display: flex;
 538         flex-flow: row wrap;
 539         border-style: solid;
 540         border-color: #00c3f9;
 541         border-radius: .2rem;
 542         flex-grow: 1;
 543         box-sizing: border-box;
 544         border-collapse: collapse;
 545         gap: .1rem;
 546 }*/
 547
 548         /*margin: 0;
 549 #dashboard .grid:only-child,
 550 #dashboard .grid:last-child,
 551 #dashboard .grid:last-of-type {
 552         margin-bottom: 0;
 553 }*/
 554
 555 /*#dashboard .candidate .grid,
 556 #dashboard .location .grid {
 557         padding: .5rem;
 558 }*/
 559
 560 #dashboard .dlgrid {
 561         display: flex;
 562         flex-flow: row wrap;
 563         gap: .5rem;
 564 }
 565
 566 #dashboard dl {
 567         /*margin: .5rem;
 568         padding: .25rem;
 569         border: .1rem solid #00c3f9;
 570         border-radius: .2rem;
 571         flex-grow: 1;
 572         box-sizing: border-box;
 573         border-collapse: collapse;*/
 574         margin: 0 .5rem .5rem .5rem;
 575 }
 576
 577 #dashboard dl:first-child,
 578 #dashboard dl:only-child,
 579 #dashboard dl:first-of-type {
 580         margin-top: .5rem;
 581 }
 582
 583 #dashboard dt {
 584         font-size: .9rem;
 585         font-weight: bold;
 586 }
 587
 588 #dashboard dd {
 589         font-size: .9rem;
 590         margin-left: 1rem;
 591 }
 592
 593 #dashboard .subgrid {
 594         display: flex;
 595         flex-flow: row wrap;
 596         border-style: solid;
 597         border-color: #00c3f9;
 598         border-width: .1rem 0 0 .1rem;
 599         border-radius: .2rem;
 600         flex-grow: 1;
 601         box-sizing: border-box;
 602         border-collapse: collapse;
 603         margin: .5rem;
 604 }
 605
 606 #dashboard .subgrid:only-child,
 607 #dashboard .subgrid:last-child,
 608 #dashboard .subgrid:last-of-type {
 609         margin-bottom: 0;
 610 }
 611
 612 #dashboard .cell {
 613         border-color: inherit;
 614         border-style: inherit;
 615         border-width: .1rem;
 616         border-radius: inherit;
 617         flex-grow: inherit;
 618         box-sizing: inherit;
 619         border-collapse: inherit;
 620 }
 621
 622 #dashboard .subgrid .cell {
 623         border-radius: 0;
 624         border-width: 0 .1rem .1rem 0;
 625 }
 626 #dashboard .subgrid .cell:only-child,
 627 #dashboard .subgrid .cell:last-child,
 628 #dashboard .subgrid .cell:last-of-type {
 629         border-radius: inherit;
 630 }
 631
 632 #dashboard .fourth {
 633         min-height: 5rem;
 634         width: calc(100% / 4 - (3/4*.1rem));
 635 }
 636
 637 #dashboard .seventh {
 638         min-height: 5rem;
 639         width: calc(100% / 7 - (6/7*.1rem));
 640 }
 641
 642 #dashboard .third {
 643         min-height: 5rem;
 644         width: calc(100% / 3 - (2/3*.1rem));
 645 }
 646
 647 #dashboard .session {
 648         border: .1rem solid #00c3f9;
 649         border-radius: .2rem;
 650         white-space: nowrap;
 651         display: flex;
 652         flex-direction: row;
 653         justify-content: space-between;
 654         padding: .1rem;
 655 }
 656
 657 #dashboard .session a {
 658         overflow-x: hidden;
 659         text-overflow: ellipsis;
 660 }
 661
 662 #dashboard .session a:first-letter {
 663         color: #066;
 664 }
 665
 666 #dashboard .disabled {
 667         /*color: #acc;
 668         background-color: #bee;*/
 669         filter: grayscale(33%);
 670 }
 671
 672 #dashboard .current {
 673         background-color: #cff;
 674 }
 675
 676 #dashboard .current h3 {
 677         text-decoration: underline solid #00c3f9;
 678 }
 679
 680 #dashboard .next {
 681         background-color: #eff;
 682 }
 683
 684 #dashboard .pending {
 685         background-color: #ccc;
 686 }
 687
 688 #dashboard .granted {
 689         background-color: #cff;
 690         /*background-color: #33b679;
 691         border-color: #33b679;*/
 692 }
 693
 694 #dashboard .disputed {
 695         background-color: #fcc;
 696 }
 697
 698 #dashboard .orphaned {
 699         background-color: #fc9;
 700 }
 701
 702 #dashboard .highlight {
 703         border-color: #3333c3;
 704         background-color: #c3c3f9;
 705         color: #3333c3;
 706 }
 707
 708 /* Weather
 709  * TODO: drop
 710 >24°C
 711 #dashboard .cleary a::before {
 712         content: "☀";
 713 }
 714
 715 >17°C
 716 #dashboard .sunny a::before {
 717         content: "⛅";
 718 }
 719
 720 >10°C
 721 #dashboard .cloudy a::before {
 722         content: "☁";
 723 }
 724
 725 <=10°C
 726 #dashboard .winty a::before {
 727         content: "❄️";
 728 }
 729
 730 >0mm
 731 #dashboard .rainy a::before {
 732         content: "🌂";
 733 }
 734
 735 >2mm
 736 #dashboard .stormy a::before {
 737         content: "☔";
 738 }*/
 739
 740 /* Regulation */
 741 #regulation {
 742 }
 743
 744 #regulation dl {
 745         /*display: flex;
 746         flex-direction: row;
 747         justify-content: space-around;
 748         padding-bottom: .5rem;*/
 749         padding: .25rem;
 750         margin-bottom: .5rem;
 751 }
 752
 753 #regulation dt {
 754         font-size: .9rem;
 755         font-weight: bold;
 756         padding-bottom: .2rem;
 757 }
 758
 759 #regulation dd {
 760         font-size: .9rem;
 761         margin-left: 1.5rem;
 762 }
 763
 764 #regulation dd:before {
 765 }
 766
 767 #regulation dl:only-child,
 768 #regulation dl:last-child,
 769 #regulation dl:last-of-type,
 770 #regulation dt:only-child,
 771 #regulation dt:last-child,
 772 #regulation dt:last-of-type,
 773 #regulation dd:only-child,
 774 #regulation dd:last-child,
 775 #regulation dd:last-of-type {
 776         margin-bottom: 0;
 777 }
 778
 779 /* Footer */
 780 #footer {
 781         border: .1rem solid #00c3f9;
 782         border-radius: .5rem;
 783         margin: .5rem;
 784         margin-top: 0;
 785         padding: .5rem;
 786         text-align: center;
 787         font-size: .8rem;
 788         display: flex;
 789         justify-content: space-between;
 790         background-color: #cff;
 791 }
 792
 793 #footer details {
 794         font-weight: bold;
 795 }
 796
 797 #footer summary::after {
 798         display: none;
 799 }
 800
 801 #footer summary::-webkit-details-marker {
 802         display: none;
 803 }
 804
 805 #footer ul {
 806         list-style: none inside none;
 807         margin: 0;
 808 }
 809
 810 /* viewport responsive hack */
 811 @media ( max-width: 900px ) {
 812         .panel {
 813                 place-content: center;
 814                 flex-flow: column wrap;
 815         }
 816
 817         .form {
 818                 flex-direction: row;
 819         }
 820
 821         form label {
 822                 width: 6rem;
 823                 line-height: 2rem;
 824         }
 825
 826         form input,
 827         form option,
 828         form optgroup,
 829         form select,
 830         form textarea,
 831         form section section {
 832                 width: 20rem;
 833                 line-height: 2rem;
 834         }
 835
 836         form button {
 837                 width: 6rem;
 838                 line-height: 2rem;
 839         }
 840
 841         .col label,
 842         .col input,
 843         .col option,
 844         .col optgroup,
 845         .col select,
 846         .col textarea {
 847                 width: 12rem;
 848         }
 849
 850         .col button {
 851                 width: 12rem;
 852         }
 853
 854         #dashboard .seventh:nth-child(7n+1),
 855         #dashboard .seventh:nth-child(7n+2),
 856         #dashboard .seventh:nth-child(7n+3),
 857         #dashboard .seventh:nth-child(7n+4) {
 858                 width: calc(100% / 4 - (3/4*.1rem));
 859         }
 860
 861         #dashboard .seventh:nth-child(7n+5),
 862         #dashboard .seventh:nth-child(7n+6),
 863         #dashboard .seventh:nth-child(7n+7) {
 864                 width: calc(100% / 3 - (2/3*.1rem));
 865         }
 866 }
 867
 868 @media ( max-width: 600px ) {
 869         form label {
 870                 margin: 0 auto;
 871         }
 872
 873         form input,
 874         form option,
 875         form optgroup,
 876         form select,
 877         form textarea,
 878         form section section {
 879                 width: 14rem;
 880                 margin: 0 auto;
 881         }
 882
 883         #header {
 884                 flex-direction: column;
 885         }
 886
 887         #dashboard .seventh:nth-child(n) {
 888                 width: calc(100% / 2 - .1rem);
 889         }
 890
 891         #dashboard .seventh:nth-child(7n) {
 892                 width: calc(100%);
 893         }
 894 }
 895
 896 @media ( max-width: 450px ) {
 897         form .row,
 898         .grid,
 899         .form {
 900                 flex-direction: column;
 901         }
 902
 903         #dashboard .seventh:nth-child(n) {
 904                 width: calc(100%);
 905         }
 906 }