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 }
  68
  69 body {
  70         display: flex;
  71         flex-flow: column wrap;
  72         color: #066;
  73 }
  74
  75 /* Header */
  76 #header {
  77         border: .1rem solid #00c3f9;
  78         border-top: 0;
  79         border-radius: 0 0 .5rem .5rem;
  80         margin: .5rem;
  81         margin-top: 0;
  82         padding: .5rem;
  83         left: 0;
  84         right: 0;
  85         display: flex;
  86         justify-content: space-between;
  87         min-width: 180px;
  88 }
  89
  90 #header h1 {
  91         order: 0;
  92         padding: 0;
  93         margin: 0;
  94         vertical-align: middle;
  95         white-space: nowrap;
  96 }
  97
  98 #header h1 a {
  99         display: flex;
 100 }
 101
 102 /*#header h2 {
 103         order: 1;
 104         font-size: 1.5rem;
 105         margin: 0;
 106         white-space: nowrap;
 107 }
 108
 109 #header h2:before {
 110         content: ">\00a0";
 111 }*/
 112
 113 #header nav {
 114         order: 3;
 115         margin-left: auto;
 116         display: flex;
 117         flex-direction: row;
 118         flex-wrap: wrap;
 119         align-items: center;
 120         justify-content: flex-end;
 121 }
 122
 123 #header nav h2 {
 124         display: none;
 125 }
 126
 127 #header nav a {
 128         text-align: center;
 129         border-radius: .25rem;
 130         padding: .375rem .5rem .25rem .5rem;
 131         margin: 0 0 .1rem .5rem;
 132         border: .1rem solid #00c3f9;
 133         font-weight: bold;
 134         background-color: #cff;
 135 }
 136
 137 /* Message */
 138 .notice::before,
 139 .notice::after,
 140 .warning::before,
 141 .warning::after,
 142 .error::before,
 143 .error::after {
 144         content: "⚠";
 145         line-height: 100%;
 146         margin: auto 0;
 147         padding: 0 .25rem;
 148 }
 149
 150 .notice,
 151 .warning,
 152 .error {
 153         display: flex;
 154         flex-direction: row;
 155         justify-content: space-between;
 156         border: .05rem solid #c33333;
 157         background-color: #f9c3c3;
 158         color: #c33333;
 159         font-size: .9rem;
 160         padding: .2rem;
 161         border-radius: .2rem;
 162         text-align: center;
 163 }
 164
 165 .notice::before,
 166 .notice::after {
 167         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 168          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 169         content: "ℹ";
 170         /*content: "⌘";*/
 171 }
 172
 173 .notice {
 174         border-color: #3333c3;
 175         background-color: #c3c3f9;
 176         color: #3333c3;
 177 }
 178
 179 .warning::before,
 180 .warning::after {
 181         /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
 182          * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
 183         content: "?";
 184         /*content: "⌘";*/
 185 }
 186
 187 .warning {
 188         border-color: #c39333;
 189         background-color: #f9c333;
 190         color: #936333;
 191 }
 192
 193 .flash {
 194         margin: 0 .5rem .5rem;
 195 }
 196
 197 p.notice,
 198 p.warning,
 199 p.error {
 200         margin-bottom: .5rem;
 201 }
 202
 203 pre.trace {
 204         border: .05rem solid #00c3f9;
 205         border-radius: .2rem;
 206         padding: .5rem;
 207         margin-bottom: 1rem;
 208         font-size: .7rem;
 209 }
 210
 211
 212 /*ul#error::before,
 213 ul#error::after,
 214 ul.error::before,
 215 ul.error::after,
 216 ul#notice::before,
 217 ul#notice::after {
 218         content: "⚠";
 219         padding: .1rem .5rem 0 .5rem;
 220         position: absolute;
 221 }
 222
 223 ul#error::before,
 224 ul#error::after {
 225         padding-top: .2rem;
 226 }
 227
 228 ul#notice::before,
 229 ul#notice::after {
 230         content: "ℹ";
 231         padding-top: .3rem;
 232 }
 233
 234 ul#notice::after,
 235 ul#error::after {
 236         margin-left: 37.8rem;
 237 }
 238
 239 ul.error::after {
 240         margin-left: 34rem;
 241 }
 242
 243 ul#notice,
 244 ul#error,
 245 ul.error {
 246         display: flex;
 247         flex-direction: column;
 248         justify-content: center;
 249         box-sizing: border-box;
 250         text-align: center;
 251         border: .05rem solid #c33333;
 252         background-color: #f9c3c3;
 253         color: #c33333;
 254         font-size: .9rem;
 255         padding: .2rem;
 256         border-radius: .2rem;
 257         width: 40rem;
 258         margin: 0 auto .5rem auto;
 259 }
 260
 261 ul.error {
 262         width: 36rem;
 263         margin: .2rem 0 0 0;
 264 }
 265
 266 ul#notice {
 267         border: .05rem solid #3333c3;
 268         background-color: #c3c3f9;
 269         color: #3333c3;
 270 }
 271
 272 ul.error {
 273         margin-top: .2rem;
 274 }*/
 275
 276 /* Content */
 277 #form,
 278 #content,
 279 #regulation,
 280 #dashboard {
 281         border: .1rem solid #00c3f9;
 282         border-radius: .5rem;
 283         margin: .5rem;
 284         margin-top: 0;
 285         overflow: hidden;
 286         padding: .5rem;
 287         display: flex;
 288         flex-direction: column;
 289 }
 290
 291 /* Section */
 292 section {
 293         display: flex;
 294         flex-direction: column;
 295         border: .05rem solid #00c3f9;
 296         border-radius: .2rem;
 297         padding: .5rem;
 298         margin-bottom: 1rem;
 299         overflow: hidden;
 300 }
 301
 302 section:only-child,
 303 section:last-child,
 304 section:last-of-type {
 305         margin-bottom: .5rem;
 306 }
 307
 308 section h2 {
 309         background-color: #cff;
 310         border-bottom: .1rem solid #00c3f9;
 311         margin: -.5rem;
 312         margin-bottom: .5rem;
 313         padding: .5rem;
 314         padding-bottom: .5rem;
 315 }
 316
 317 section h3 {
 318         background-color: #cff;
 319         border-bottom: .1rem solid #00c3f9;
 320         margin: -.5rem;
 321         margin-bottom: .5rem;
 322         padding: .4rem;
 323 }
 324
 325 section h4 {
 326         background-color: #cff;
 327         border-bottom: .1rem solid #00c3f9;
 328         margin: -.5rem;
 329         margin-bottom: .5rem;
 330         padding: .3rem;
 331 }
 332
 333 section section {
 334         padding: .5rem;
 335         padding-bottom: .5rem;
 336         margin-bottom: .5rem;
 337 }
 338
 339 section section:only-child,
 340 section section:last-child,
 341 section section:last-of-type {
 342         margin-bottom: 0;
 343 }
 344
 345 /* Form */
 346 /*#form div {
 347         margin-bottom: .5rem;
 348 }
 349
 350 #form div:only-child,
 351 #form div:last-child,
 352 #form div:last-of-type {
 353         margin-bottom: 0;
 354 }
 355
 356 form {
 357         display: flex;
 358         flex-direction: column;
 359         / *border: .05rem solid #00c3f9;
 360         border-radius: .2rem;* /
 361         padding: .5rem;
 362 }
 363
 364 form section {
 365         margin-bottom: 1rem;
 366 }
 367
 368 form section:only-child,
 369 form section:last-child,
 370 form section:last-of-type {
 371         margin-bottom: .5rem;
 372 }
 373 */
 374
 375 form section,
 376 form section:only-child,
 377 form section:last-child,
 378 form section:last-of-type {
 379         border: none;
 380         margin-bottom: .5rem;
 381 }
 382
 383 form section section,
 384 form section section:only-child,
 385 form section section:last-child,
 386 form section section:last-of-type {
 387         width: 50%;
 388         padding: 0;
 389         margin-bottom: 0;
 390 }
 391
 392 form div {
 393         display: flex;
 394         flex-direction: row;
 395         justify-content: center;
 396         margin-bottom: .5rem;
 397 }
 398
 399 form div:only-child,
 400 form div:last-child,
 401 form div:last-of-type {
 402         margin-bottom: 0;
 403 }
 404
 405 form header div.error {
 406         width: calc(50% + 10rem);
 407         margin: 0 auto;
 408 }
 409
 410 form section div.error {
 411         margin-top: .25rem;
 412 }
 413
 414
 415 /*form section div.error {
 416         margin: 0 1rem;
 417 }*/
 418
 419
 420 label {
 421         min-width: 10rem;
 422         font-size: .85rem;
 423         padding: .2rem 1rem .2rem 0;
 424         text-align: right;
 425         white-space: nowrap;
 426 }
 427
 428 button,
 429 input,
 430 select,
 431 option,
 432 optgroup,
 433 textarea {
 434         box-sizing: border-box;
 435         width: 100%;
 436         padding: .1rem;
 437         border: .05rem solid #00c3f9;
 438         border-radius: .2rem;
 439         font-size: .8rem;
 440         color: #066;
 441 }
 442
 443 button.submit {
 444         width: 25%;
 445         min-width: 8rem;
 446         margin: 0 auto;
 447         padding: .2rem .1rem;
 448 }
 449
 450 /* Vertical form */
 451 form.col {
 452         margin-left: .5rem;
 453         width: 10rem;
 454 }
 455
 456 form.col div {
 457         flex-direction: column;
 458 }
 459
 460 form.col div.error {
 461         flex-direction: row;
 462 }
 463
 464 form.col label {
 465         text-align: center;
 466         padding-top: 0;
 467 }
 468
 469 form.col section {
 470         padding: 0;
 471 }
 472
 473 form.col section section {
 474         width: auto;
 475 }
 476
 477 form.col div.date {
 478         flex-direction: row;
 479         justify-content: space-between;
 480 }
 481
 482 /* Dashboard */
 483 #dashboard .panel {
 484         display: flex;
 485         flex-direction: row;
 486         flex-wrap: wrap;
 487         place-content: space-between;
 488 }
 489
 490 #dashboard .grid {
 491         display: table;
 492         border: .05rem solid #00c3f9;
 493         flex-grow: 1;
 494         border-radius: .2rem; /* marche pas sur chrome */
 495         table-layout: fixed;
 496         width: calc(100% - 12rem);
 497         border-collapse: collapse;
 498 }
 499
 500 #dashboard .cell {
 501         display: table-cell;
 502         text-align: left;
 503         border: .05rem solid #00c3f9;
 504         font-size: initial;
 505         height: 8rem;
 506 }
 507
 508 #dashboard dl.cell {
 509         height: 3rem;
 510 }
 511
 512 #dashboard .cell h3 {
 513         font-size: 1rem;
 514         padding: .25rem;
 515         margin: 0;
 516 }
 517
 518 #dashboard .cell dd {
 519         text-align: center;
 520 }
 521
 522 #dashboard .seventh {
 523         width: calc(100% / 7);
 524 }
 525
 526 #dashboard .disabled {
 527         color: #acc;
 528         background-color: #bee;
 529 }
 530
 531 #dashboard .current {
 532         background-color: #cff;
 533 }
 534
 535 #dashboard .next {
 536         background-color: #eff;
 537 }
 538
 539 #dashboard .session {
 540         border-radius: .2rem;
 541         border: .1rem solid #00c3f9;
 542         font-size: .8rem;
 543         padding: .2rem;
 544         margin: 0 .1rem .1rem .1rem;
 545         overflow-x: hidden;
 546         white-space: nowrap;
 547         text-overflow: ellipsis;
 548 }
 549
 550 #dashboard .pending {
 551         background-color: #ccc;
 552 }
 553
 554 #dashboard .granted {
 555         background-color: #cff;
 556         /*background-color: #33b679;
 557         border-color: #33b679;*/
 558 }
 559
 560 #dashboard .disputed {
 561         background-color: #fcc;
 562 }
 563
 564 #dashboard .orphaned {
 565         background-color: #fc9;
 566 }
 567
 568
 569 /* Regulation */
 570 #regulation {
 571 }
 572
 573
 574 /*#regulation div {
 575         display: flex;
 576         flex-direction: row;
 577         justify-content: space-around;
 578         margin-bottom: .5rem;
 579 }
 580
 581 #regulation div:only-child,
 582 #regulation div:last-child,
 583 #regulation div:last-of-type {
 584         margin-bottom: 0;
 585 }*/
 586 /*
 587  * XXX: TODO:
 588  * see https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl
 589  * see https://www.w3.org/Style/Examples/007/fonts.fr.html
 590  * 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
 591  * see https://fonts.google.com/?query=droi
 592  * see https://fonts.google.com/specimen/Inconsolata
 593  * see https://fonts.google.com/specimen/Tangerine%20light,light+italic+regular+semi-bold+bold+extra-bold
 594  * see https://fonts.google.com/?selection.family=Roboto:100i
 595  * see https://developers.google.com/fonts/docs/getting_started
 596  */
 597
 598 #regulation dl {
 599         /*display: flex;
 600         flex-direction: row;
 601         justify-content: space-around;
 602         padding-bottom: .5rem;*/
 603         padding: .25rem;
 604         margin-bottom: .5rem;
 605 }
 606
 607 #regulation dt {
 608         font-size: .9rem;
 609         font-weight: bold;
 610         padding-bottom: .2rem;
 611 }
 612
 613 #regulation dd {
 614         font-size: .9rem;
 615         margin-left: 1.5rem;
 616 }
 617
 618 #regulation dd:before {
 619 }
 620
 621 #regulation dl:only-child,
 622 #regulation dl:last-child,
 623 #regulation dl:last-of-type,
 624 #regulation dt:only-child,
 625 #regulation dt:last-child,
 626 #regulation dt:last-of-type,
 627 #regulation dd:only-child,
 628 #regulation dd:last-child,
 629 #regulation dd:last-of-type {
 630         margin-bottom: 0;
 631 }
 632
 633 /* Footer */
 634 #footer {
 635         border: .1rem solid #00c3f9;
 636         border-radius: .5rem;
 637         margin: .5rem;
 638         margin-top: 0;
 639         padding: .5rem;
 640         text-align: center;
 641         font-size: .8rem;
 642         display: flex;
 643         justify-content: space-between;
 644         background-color: #cff;
 645 }
 646
 647 #footer details {
 648         font-weight: bold;
 649 }
 650
 651 #footer summary::after {
 652         display: none;
 653 }
 654
 655 #footer summary::-webkit-details-marker {
 656         display: none;
 657 }
 658
 659 /* viewport responsive hack */
 660 @media ( max-width: 650px ) {
 661         #header {
 662                 flex-wrap: wrap;
 663         }
 664
 665         #dashboard .panel {
 666                 place-content: center;
 667                 flex-direction: column;
 668         }
 669
 670         #dashboard .grid {
 671                 width: 100%;
 672         }
 673
 674         #dashboard div.grid {
 675                 display: grid;
 676         }
 677
 678         .form_col {
 679                 margin: .5rem auto 0 auto;
 680         }
 681 }