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