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