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