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 #form,
 284 #content,
 285 #regulation,
 286 #location,
 287 #session {
 288         border: .1rem solid #00c3f9;
 289         border-radius: .5rem;
 290         margin: .5rem;
 291         margin-top: 0;
 292         overflow: hidden;
 293         padding: .5rem;
 294         display: flex;
 295         flex-direction: column;
 296 }
 297
 298 /* Section */
 299 section {
 300         display: flex;
 301         flex-direction: column;
 302         border: .05rem solid #00c3f9;
 303         border-radius: .2rem;
 304         padding: .5rem;
 305         margin-bottom: 1rem;
 306         overflow: hidden;
 307 }
 308
 309 section:only-child,
 310 section:last-child,
 311 section:last-of-type {
 312         margin-bottom: .5rem;
 313 }
 314
 315 section h2 {
 316         background-color: #cff;
 317         border-bottom: .1rem solid #00c3f9;
 318         margin: -.5rem;
 319         margin-bottom: .5rem;
 320         padding: .5rem;
 321         padding-bottom: .5rem;
 322 }
 323
 324 section h3 {
 325         background-color: #cff;
 326         border-bottom: .1rem solid #00c3f9;
 327         margin: -.5rem;
 328         margin-bottom: .5rem;
 329         padding: .4rem;
 330 }
 331
 332 section h4 {
 333         background-color: #cff;
 334         border-bottom: .1rem solid #00c3f9;
 335         margin: -.5rem;
 336         margin-bottom: .5rem;
 337         padding: .3rem;
 338 }
 339
 340 section section {
 341         padding: .5rem;
 342         padding-bottom: .5rem;
 343         margin-bottom: .5rem;
 344 }
 345
 346 section section:only-child,
 347 section section:last-child,
 348 section section:last-of-type {
 349         margin-bottom: 0;
 350 }
 351
 352 /* Form */
 353 /*#form div {
 354         margin-bottom: .5rem;
 355 }
 356
 357 #form div:only-child,
 358 #form div:last-child,
 359 #form div:last-of-type {
 360         margin-bottom: 0;
 361 }
 362
 363 form {
 364         display: flex;
 365         flex-direction: column;
 366         / *border: .05rem solid #00c3f9;
 367         border-radius: .2rem;* /
 368         padding: .5rem;
 369 }
 370
 371 form section {
 372         margin-bottom: 1rem;
 373 }
 374
 375 form section:only-child,
 376 form section:last-child,
 377 form section:last-of-type {
 378         margin-bottom: .5rem;
 379 }
 380 */
 381
 382 form section,
 383 form section:only-child,
 384 form section:last-child,
 385 form section:last-of-type {
 386         border: none;
 387         margin-bottom: .5rem;
 388 }
 389
 390 form section section,
 391 form section section:only-child,
 392 form section section:last-child,
 393 form section section:last-of-type {
 394         width: 50%;
 395         padding: 0;
 396         margin-bottom: 0;
 397 }
 398
 399 form div {
 400         display: flex;
 401         flex-direction: row;
 402         justify-content: center;
 403         margin-bottom: .5rem;
 404 }
 405
 406 form div:only-child,
 407 form div:last-child,
 408 form div:last-of-type {
 409         margin-bottom: 0;
 410 }
 411
 412 form header div.error {
 413         width: calc(50% + 10rem);
 414         margin: 0 auto;
 415 }
 416
 417 form section div.error {
 418         margin-top: .25rem;
 419 }
 420
 421
 422 /*form section div.error {
 423         margin: 0 1rem;
 424 }*/
 425
 426
 427 label {
 428         min-width: 10rem;
 429         font-size: .85rem;
 430         padding: .2rem 1rem .2rem 0;
 431         text-align: right;
 432         white-space: nowrap;
 433 }
 434
 435 button,
 436 input,
 437 select,
 438 option,
 439 optgroup,
 440 textarea {
 441         box-sizing: border-box;
 442         width: 100%;
 443         padding: .1rem;
 444         border: .05rem solid #00c3f9;
 445         border-radius: .2rem;
 446         font-size: .8rem;
 447         color: #066;
 448         background-color: transparent;
 449 }
 450
 451 button.submit {
 452         width: 25%;
 453         min-width: 8rem;
 454         margin: 0 auto;
 455         padding: .2rem .1rem;
 456 }
 457
 458 /* Vertical form */
 459 form.col {
 460 }
 461
 462 form.col div {
 463         flex-direction: column;
 464 }
 465
 466 form.col div.error {
 467         flex-direction: row;
 468 }
 469
 470 form.col label {
 471         text-align: center;
 472         padding-right: 0;
 473 }
 474
 475 form.col section {
 476         padding: 0;
 477 }
 478
 479 form.col section section {
 480         width: auto;
 481 }
 482
 483 form.col div.date {
 484         flex-direction: row;
 485         justify-content: space-between;
 486 }
 487
 488 /* Dashboard */
 489 #dashboard .panel {
 490         display: flex;
 491         flex-direction: row;
 492         flex-wrap: wrap;
 493         place-content: space-between;
 494         border: 0;
 495         margin: 0;
 496         padding: 0;
 497 }
 498
 499 #dashboard .grid {
 500         display: table;
 501         border: .05rem solid #00c3f9;
 502         flex-grow: 1;
 503         border-radius: .2rem; /* marche pas sur chrome */
 504         table-layout: fixed;
 505         /*width: calc(100% - 12rem);
 506         border-collapse: collapse;*/
 507 }
 508
 509 #dashboard .cell {
 510         display: table-cell;
 511         text-align: left;
 512         border: .05rem solid #00c3f9;
 513         font-size: initial;
 514         height: 8rem;
 515 }
 516
 517 #dashboard dl.cell {
 518         height: 3rem;
 519 }
 520
 521 #dashboard .cell h3 {
 522         font-size: 1rem;
 523         padding: .25rem;
 524         margin: 0;
 525 }
 526
 527 #dashboard .cell dd {
 528         text-align: center;
 529 }
 530
 531 #location .seventh {
 532         width: calc(100% / 7);
 533 }
 534
 535 #location .disabled {
 536         color: #acc;
 537         background-color: #bee;
 538 }
 539
 540 #location .current {
 541         background-color: #cff;
 542 }
 543
 544 #location .next {
 545         background-color: #eff;
 546 }
 547
 548 #location .session {
 549         border-radius: .2rem;
 550         border: .1rem solid #00c3f9;
 551         font-size: .8rem;
 552         padding: .2rem;
 553         margin: 0 .1rem .1rem .1rem;
 554         overflow-x: hidden;
 555         white-space: nowrap;
 556         text-overflow: ellipsis;
 557 }
 558
 559 #location .pending {
 560         background-color: #ccc;
 561 }
 562
 563 #location .granted {
 564         background-color: #cff;
 565         /*background-color: #33b679;
 566         border-color: #33b679;*/
 567 }
 568
 569 #location .disputed {
 570         background-color: #fcc;
 571 }
 572
 573 #location .orphaned {
 574         background-color: #fc9;
 575 }
 576
 577 /* Session */
 578 #session {
 579 }
 580
 581 #session h2 a::after {
 582         content: " >";
 583 }
 584
 585 #session h2 a:last-child::after {
 586         content: none;
 587 }
 588
 589 #location .panel,
 590 #session .panel {
 591         display: flex;
 592         flex-direction: row;
 593         flex-wrap: nowrap;
 594         place-content: space-between;
 595         border: 0;
 596         margin: 0;
 597         padding: 0;
 598 }
 599
 600 #location .grid,
 601 #session .grid {
 602         display: table;
 603         line-height: normal;
 604         padding: 0;
 605         flex-grow: 1;
 606         table-layout: fixed;
 607         border: 0 none;
 608         /*width: calc(100% - 12rem);
 609         border-collapse: collapse;*/
 610 }
 611
 612 #location .grid {
 613         width: calc(100% - 12rem);
 614         border-collapse: collapse;
 615 }
 616
 617 #session .row {
 618         display: flex;
 619         flex-wrap: wrap;
 620         margin-bottom: .5rem;
 621         border: .1rem solid #00c3f9;
 622         border-radius: .2rem;
 623 }
 624
 625 #location .cell,
 626 #session .cell {
 627         display: table-cell;
 628         text-align: left;
 629         padding: .5rem;
 630         flex-grow: 1;
 631         border: 0;
 632 }
 633
 634 #location .cell {
 635         border: .05rem solid #00c3f9;
 636         Height: 6rem;
 637 }
 638
 639 #session .sub {
 640         display: flex;
 641         flex-direction: column;
 642         line-height: normal;
 643         margin-bottom: .5rem;
 644         margin-top: .5rem;
 645         padding: .5rem;
 646         border: .1rem solid #00c3f9;
 647         border-radius: .2rem;
 648 }
 649
 650 #session .grid dd dd {
 651         text-indent: .5rem;
 652 }
 653
 654 #location .form,
 655 #session .form {
 656         border: .1rem solid #00c3f9;
 657         border-radius: .2rem;
 658         padding: .5rem;
 659         margin-left: .5rem;
 660         width: 10rem;
 661 }
 662
 663 #location .form label,
 664 #location .form input,
 665 #location .form button,
 666 #session .form label,
 667 #session .form input,
 668 #session .form button {
 669         text-align: center;
 670         min-width: 6rem;
 671 }
 672
 673 /* Regulation */
 674 #regulation {
 675 }
 676
 677
 678 /*#regulation div {
 679         display: flex;
 680         flex-direction: row;
 681         justify-content: space-around;
 682         margin-bottom: .5rem;
 683 }
 684
 685 #regulation div:only-child,
 686 #regulation div:last-child,
 687 #regulation div:last-of-type {
 688         margin-bottom: 0;
 689 }*/
 690 /*
 691  * XXX: TODO:
 692  * see https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl
 693  * see https://www.w3.org/Style/Examples/007/fonts.fr.html
 694  * 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
 695  * see https://fonts.google.com/?query=droi
 696  * see https://fonts.google.com/specimen/Inconsolata
 697  * see https://fonts.google.com/specimen/Tangerine%20light,light+italic+regular+semi-bold+bold+extra-bold
 698  * see https://fonts.google.com/?selection.family=Roboto:100i
 699  * see https://developers.google.com/fonts/docs/getting_started
 700  */
 701
 702 #regulation dl {
 703         /*display: flex;
 704         flex-direction: row;
 705         justify-content: space-around;
 706         padding-bottom: .5rem;*/
 707         padding: .25rem;
 708         margin-bottom: .5rem;
 709 }
 710
 711 #regulation dt {
 712         font-size: .9rem;
 713         font-weight: bold;
 714         padding-bottom: .2rem;
 715 }
 716
 717 #regulation dd {
 718         font-size: .9rem;
 719         margin-left: 1.5rem;
 720 }
 721
 722 #regulation dd:before {
 723 }
 724
 725 #regulation dl:only-child,
 726 #regulation dl:last-child,
 727 #regulation dl:last-of-type,
 728 #regulation dt:only-child,
 729 #regulation dt:last-child,
 730 #regulation dt:last-of-type,
 731 #regulation dd:only-child,
 732 #regulation dd:last-child,
 733 #regulation dd:last-of-type {
 734         margin-bottom: 0;
 735 }
 736
 737 /* Footer */
 738 #footer {
 739         border: .1rem solid #00c3f9;
 740         Border-radius: .5rem;
 741         margin: .5rem;
 742         margin-top: 0;
 743         padding: .5rem;
 744         text-align: center;
 745         font-size: .8rem;
 746         display: flex;
 747         justify-content: space-between;
 748         background-color: #cff;
 749 }
 750
 751 #footer details {
 752         font-weight: bold;
 753 }
 754
 755 #footer summary::after {
 756         display: none;
 757 }
 758
 759 #footer summary::-webkit-details-marker {
 760         display: none;
 761 }
 762
 763 /* viewport responsive hack */
 764 @media ( max-width: 850px ) {
 765         #header {
 766                 flex-wrap: wrap;
 767         }
 768
 769         #location .panel,
 770         #session .panel {
 771                 place-content: center;
 772                 flex-direction: column;
 773                 flex-wrap: wrap;
 774         }
 775
 776         #location .grid,
 777         #location .form,
 778         #session .grid,
 779         #session .form {
 780                 width: auto;
 781         }
 782
 783         #location .form,
 784         #session .form {
 785                 margin: .5rem auto 0 auto;
 786         }
 787 }