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