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