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