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