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: 0;
 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 }
 599
 600 .calendar .pseudonym {
 601         grid-column: span 3;
 602 }
 603
 604 .seven {
 605         grid-template-columns: repeat(7, 1fr);
 606 }
 607
 608 .four {
 609         grid-template-columns: repeat(4, 1fr);
 610 }
 611
 612 .three {
 613         grid-template-columns: repeat(3, 1fr);
 614 }
 615
 616 .two {
 617         grid-template-columns: repeat(2, 1fr);
 618 }
 619
 620 .location h3 {
 621         border-style: none;
 622         flex: 1 1 auto;
 623         white-space: nowrap;
 624         overflow: hidden;
 625         text-overflow: ellipsis;
 626 }
 627
 628 .location p {
 629         margin: 0 .5rem .5rem;
 630 }
 631
 632 .location .grid article,
 633 .location .grid section {
 634         min-height: auto;
 635 }
 636
 637 .location form {
 638         margin: .5rem auto;
 639 }
 640
 641 .location form .row {
 642         flex-direction: column;
 643 }
 644
 645 .location form div {
 646         margin-left: auto;
 647         margin-right: auto;
 648 }
 649
 650 .location label {
 651         width: 20rem;
 652         padding-right: 0;
 653         text-align: center;
 654 }
 655
 656 .location input,
 657 .location textarea {
 658         width: 20rem;
 659         margin: 0 .1rem;
 660 }
 661
 662 .form {
 663         margin: 0;
 664         display: flex;
 665         flex-direction: column;
 666         gap: .5rem;
 667 }
 668
 669 .form h2 {
 670         font-size: 1.17rem;
 671         padding: .4rem;
 672 }
 673
 674 .form a {
 675         white-space: nowrap;
 676 }
 677
 678 .form section {
 679         margin: 0;
 680         border: .05rem solid #00c3f9;
 681         border-radius: .2rem;
 682         width: 100%;
 683 }
 684
 685 .form form {
 686         gap: .5rem;
 687 }
 688
 689 /* Footer */
 690 #footer {
 691         border: .1rem solid #00c3f9;
 692         border-radius: .5rem;
 693         margin: .5rem;
 694         margin-top: 0;
 695         padding: .5rem;
 696         text-align: center;
 697         font-size: .8rem;
 698         display: flex;
 699         justify-content: space-between;
 700         background-color: #cff;
 701 }
 702
 703 #footer summary::after {
 704         display: none;
 705 }
 706
 707 #footer summary::-webkit-details-marker {
 708         display: none;
 709 }
 710
 711 #footer ul {
 712         list-style: none inside none;
 713         margin: 0;
 714 }
 715
 716 /* viewport responsive hack */
 717 @media ( max-width: 1400px ) {
 718         .location label,
 719         .location input,
 720         .location textarea {
 721                 width: 12rem;
 722         }
 723 }
 724
 725 @media ( max-width: 900px ) {
 726         .panel {
 727                 flex-flow: column wrap;
 728         }
 729
 730         .form {
 731                 flex-direction: row;
 732         }
 733
 734         form label {
 735                 width: 6rem;
 736                 line-height: 2rem;
 737         }
 738
 739         form input,
 740         form option,
 741         form optgroup,
 742         form select,
 743         form textarea,
 744         form section section {
 745                 width: 20rem;
 746                 line-height: 2rem;
 747         }
 748
 749         form button {
 750                 width: 6rem;
 751                 line-height: 2rem;
 752         }
 753
 754         .col label,
 755         .col input,
 756         .col option,
 757         .col optgroup,
 758         .col select,
 759         .col textarea {
 760                 width: 12rem;
 761         }
 762
 763         .col button {
 764                 width: 12rem;
 765         }
 766
 767         .seven {
 768                 grid-template-columns: repeat(4, 1fr);
 769         }
 770
 771         .calendar .sunday {
 772                 grid-column: span 2;
 773         }
 774
 775         /*.grid section:nth-child(7n) {
 776                 grid-column: span 2;
 777         }*/
 778
 779         .four {
 780                 grid-template-columns: repeat(3, 1fr);
 781         }
 782
 783         /*#dashboard .seventh:nth-child(7n+1),
 784         #dashboard .seventh:nth-child(7n+2),
 785         #dashboard .seventh:nth-child(7n+3),
 786         #dashboard .seventh:nth-child(7n+4) {
 787                 width: calc(100% / 4 - (3/4*.1rem));
 788         }
 789
 790         #dashboard .seventh:nth-child(7n+5),
 791         #dashboard .seventh:nth-child(7n+6),
 792         #dashboard .seventh:nth-child(7n+7) {
 793                 width: calc(100% / 3 - (2/3*.1rem));
 794         }*/
 795 }
 796
 797 @media ( max-width: 600px ) {
 798         form label {
 799                 margin: 0 auto;
 800         }
 801
 802         form input,
 803         form option,
 804         form optgroup,
 805         form select,
 806         form textarea,
 807         form section section {
 808                 width: 14rem;
 809                 margin: 0 auto;
 810         }
 811
 812         #header {
 813                 flex-direction: column;
 814         }
 815
 816         .seven {
 817                 grid-template-columns: repeat(2, 1fr);
 818         }
 819
 820         /*.grid section:nth-child(7n) {
 821                 grid-column: span 2;
 822                 margin-bottom: .5rem;
 823         }
 824
 825         .grid section:only-child,
 826         .grid section:last-child,
 827         .grid section:last-of-type {
 828                 margin-bottom: 0;
 829         }*/
 830
 831         .calendar .sunday {
 832                 margin-bottom: .5rem;
 833         }
 834
 835         .calendar .sunday:only-child,
 836         .calendar .sunday:last-child {
 837                 margin-bottom: 0;
 838         }
 839
 840         .four,
 841         .three {
 842                 grid-template-columns: repeat(2, 1fr);
 843         }
 844
 845         /*#dashboard .seventh:nth-child(n) {
 846                 width: calc(100% / 2 - .1rem);
 847         }
 848
 849         #dashboard .seventh:nth-child(7n) {
 850                 width: calc(100%);
 851         }*/
 852 }
 853
 854 @media ( max-width: 450px ) {
 855         form .row,
 856         .grid,
 857         .form,
 858         #footer {
 859                 flex-direction: column;
 860         }
 861
 862         .seven {
 863                 grid-template-columns: repeat(1, 1fr);
 864         }
 865
 866         /*.grid section:nth-child(n) {
 867                 grid-column: auto;
 868         }*/
 869         .calendar .sunday {
 870                 grid-column: auto;
 871         }
 872
 873         .four,
 874         .three {
 875                 grid-template-columns: repeat(1, 1fr);
 876         }
 877 }
 878
 879 @media ( max-width: 260px ) {
 880         .col label,
 881         .col input,
 882         .col option,
 883         .col optgroup,
 884         .col select,
 885         .col textarea {
 886                 width: 10rem;
 887         }
 888
 889         .col button {
 890                 width: 10rem;
 891         }
 892 }