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: inherit;
 602         box-sizing: border-box;
 603         border-collapse: collapse;
 604         margin: .5rem;
 605 }
 606
 607 #dashboard .subgrid:only-child,
 608 #dashboard .subgrid:last-child,
 609 #dashboard .subgrid:last-of-type {
 610         margin-bottom: 0;
 611 }
 612
 613 #dashboard .cell {
 614         border-color: inherit;
 615         border-style: inherit;
 616         border-width: .1rem;
 617         border-radius: inherit;
 618         flex-grow: inherit;
 619         box-sizing: inherit;
 620         border-collapse: inherit;
 621 }
 622
 623 #dashboard .subgrid .cell {
 624         border-radius: 0;
 625         border-width: 0 .1rem .1rem 0;
 626 }
 627 #dashboard .subgrid .cell:only-child,
 628 #dashboard .subgrid .cell:last-child,
 629 #dashboard .subgrid .cell:last-of-type {
 630         border-radius: inherit;
 631 }
 632
 633 #dashboard .fourth {
 634         min-height: 5rem;
 635         width: calc(100% / 4 - (3/4*.1rem));
 636 }
 637
 638 #dashboard .seventh {
 639         min-height: 5rem;
 640         width: calc(100% / 7 - (6/7*.1rem));
 641 }
 642
 643 #dashboard .third {
 644         min-height: 5rem;
 645         width: calc(100% / 3 - (2/3*.1rem));
 646 }
 647
 648 #dashboard .session {
 649         border: .1rem solid #00c3f9;
 650         border-radius: .2rem;
 651         white-space: nowrap;
 652         display: flex;
 653         flex-direction: row;
 654         justify-content: space-between;
 655         padding: .1rem;
 656 }
 657
 658 #dashboard .session a {
 659         overflow-x: hidden;
 660         text-overflow: ellipsis;
 661 }
 662
 663 #dashboard .session a:first-letter {
 664         color: #066;
 665 }
 666
 667 #dashboard .disabled {
 668         /*color: #acc;
 669         background-color: #bee;*/
 670         filter: grayscale(33%);
 671 }
 672
 673 #dashboard .current {
 674         background-color: #cff;
 675 }
 676
 677 #dashboard .current h3 {
 678         text-decoration: underline solid #00c3f9;
 679 }
 680
 681 #dashboard .next {
 682         background-color: #eff;
 683 }
 684
 685 #dashboard .pending {
 686         background-color: #ccc;
 687 }
 688
 689 #dashboard .granted {
 690         background-color: #cff;
 691         /*background-color: #33b679;
 692         border-color: #33b679;*/
 693 }
 694
 695 #dashboard .disputed {
 696         background-color: #fcc;
 697 }
 698
 699 #dashboard .orphaned {
 700         background-color: #fc9;
 701 }
 702
 703 #dashboard .highlight {
 704         border-color: #3333c3;
 705         background-color: #c3c3f9;
 706         color: #3333c3;
 707 }
 708
 709 /* Weather
 710  * TODO: drop
 711 >24°C
 712 #dashboard .cleary a::before {
 713         content: "☀";
 714 }
 715
 716 >17°C
 717 #dashboard .sunny a::before {
 718         content: "⛅";
 719 }
 720
 721 >10°C
 722 #dashboard .cloudy a::before {
 723         content: "☁";
 724 }
 725
 726 <=10°C
 727 #dashboard .winty a::before {
 728         content: "❄️";
 729 }
 730
 731 >0mm
 732 #dashboard .rainy a::before {
 733         content: "🌂";
 734 }
 735
 736 >2mm
 737 #dashboard .stormy a::before {
 738         content: "☔";
 739 }*/
 740
 741 /* Regulation */
 742 #regulation {
 743 }
 744
 745 #regulation dl {
 746         /*display: flex;
 747         flex-direction: row;
 748         justify-content: space-around;
 749         padding-bottom: .5rem;*/
 750         padding: .25rem;
 751         margin-bottom: .5rem;
 752 }
 753
 754 #regulation dt {
 755         font-size: .9rem;
 756         font-weight: bold;
 757         padding-bottom: .2rem;
 758 }
 759
 760 #regulation dd {
 761         font-size: .9rem;
 762         margin-left: 1.5rem;
 763 }
 764
 765 #regulation dd:before {
 766 }
 767
 768 #regulation dl:only-child,
 769 #regulation dl:last-child,
 770 #regulation dl:last-of-type,
 771 #regulation dt:only-child,
 772 #regulation dt:last-child,
 773 #regulation dt:last-of-type,
 774 #regulation dd:only-child,
 775 #regulation dd:last-child,
 776 #regulation dd:last-of-type {
 777         margin-bottom: 0;
 778 }
 779
 780 /* Footer */
 781 #footer {
 782         border: .1rem solid #00c3f9;
 783         border-radius: .5rem;
 784         margin: .5rem;
 785         margin-top: 0;
 786         padding: .5rem;
 787         text-align: center;
 788         font-size: .8rem;
 789         display: flex;
 790         justify-content: space-between;
 791         background-color: #cff;
 792 }
 793
 794 #footer details {
 795         font-weight: bold;
 796 }
 797
 798 #footer summary::after {
 799         display: none;
 800 }
 801
 802 #footer summary::-webkit-details-marker {
 803         display: none;
 804 }
 805
 806 #footer ul {
 807         list-style: none inside none;
 808         margin: 0;
 809 }
 810
 811 /* viewport responsive hack */
 812 @media ( max-width: 900px ) {
 813         .panel {
 814                 place-content: center;
 815                 flex-flow: column wrap;
 816         }
 817
 818         .form {
 819                 flex-direction: row;
 820         }
 821
 822         form label {
 823                 width: 6rem;
 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         }
 834
 835         form button {
 836                 width: 6rem;
 837         }
 838
 839         .col label,
 840         .col input,
 841         .col option,
 842         .col optgroup,
 843         .col select,
 844         .col textarea {
 845                 width: 12rem;
 846         }
 847
 848         .col button {
 849                 width: 12rem;
 850                 box-sizing: fit-content;
 851         }
 852
 853         #dashboard .seventh:nth-child(7n+1),
 854         #dashboard .seventh:nth-child(7n+2),
 855         #dashboard .seventh:nth-child(7n+3),
 856         #dashboard .seventh:nth-child(7n+4) {
 857                 width: calc(100% / 4 - (3/4*.1rem));
 858         }
 859
 860         #dashboard .seventh:nth-child(7n+5),
 861         #dashboard .seventh:nth-child(7n+6),
 862         #dashboard .seventh:nth-child(7n+7) {
 863                 width: calc(100% / 3 - (2/3*.1rem));
 864         }
 865 }
 866
 867 @media ( max-width: 600px ) {
 868         form label {
 869                 margin: 0 auto;
 870         }
 871
 872         form input,
 873         form option,
 874         form optgroup,
 875         form select,
 876         form textarea,
 877         form section section {
 878                 width: 14rem;
 879                 margin: 0 auto;
 880         }
 881
 882         #header {
 883                 flex-direction: column;
 884         }
 885
 886         #dashboard .seventh:nth-child(n) {
 887                 width: calc(100% / 2 - .1rem);
 888         }
 889
 890         #dashboard .seventh:nth-child(7n) {
 891                 width: calc(100%);
 892         }
 893 }
 894
 895 @media ( max-width: 450px ) {
 896         form .row,
 897         .grid,
 898         .form {
 899                 flex-direction: column;
 900         }
 901
 902         #dashboard .seventh:nth-child(n) {
 903                 width: calc(100%);
 904         }
 905 }