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