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