diff options
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 79 |
1 files changed, 53 insertions, 26 deletions
@@ -285,6 +285,11 @@ label { | |||
285 | font-weight: normal; | 285 | font-weight: normal; |
286 | } | 286 | } |
287 | 287 | ||
288 | .circle_num.undone { | ||
289 | transform: rotate3d(0, 0, 0, 0deg); | ||
290 | transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; | ||
291 | } | ||
292 | |||
288 | /* step1 has a h1 and the circle needs more finetuning to fit headline */ | 293 | /* step1 has a h1 and the circle needs more finetuning to fit headline */ |
289 | .block-step1 .circle_num { | 294 | .block-step1 .circle_num { |
290 | margin: 4px 28px 0 0; | 295 | margin: 4px 28px 0 0; |
@@ -302,7 +307,7 @@ label { | |||
302 | border-bottom: dotted 1px rgba(0,0,0,0.25); | 307 | border-bottom: dotted 1px rgba(0,0,0,0.25); |
303 | } | 308 | } |
304 | 309 | ||
305 | /* Our intra-step animations rely on the section's max-height being | 310 | /* Our inter-step animations rely on the section's max-height being |
306 | transitioned from 0 to the original height. | 311 | transitioned from 0 to the original height. |
307 | Initially hide all sections and only unhide them depending on the | 312 | Initially hide all sections and only unhide them depending on the |
308 | global state (as set with a class on the wrapper element) | 313 | global state (as set with a class on the wrapper element) |
@@ -415,23 +420,53 @@ label { | |||
415 | 420 | ||
416 | /* Style things that depend on the progress. | 421 | /* Style things that depend on the progress. |
417 | Example: circles turn squares when a step is finished */ | 422 | Example: circles turn squares when a step is finished */ |
418 | #wrapper.step3 .block-step2 .circle_num, | 423 | #wrapper.step3 .block-step2 .circle_num.undone, |
419 | #wrapper.step4 .block-step2 .circle_num, | 424 | #wrapper.step4 .block-step2 .circle_num.undone, |
420 | #wrapper.step5 .block-step2 .circle_num, | 425 | #wrapper.step5 .block-step2 .circle_num.undone, |
421 | #wrapper.step6 .block-step2 .circle_num, | 426 | #wrapper.step6 .block-step2 .circle_num.undone, |
422 | #wrapper.step7 .block-step2 .circle_num, | 427 | #wrapper.step7 .block-step2 .circle_num.undone, |
423 | #wrapper.step4 .block-step3 .circle_num, | 428 | #wrapper.step4 .block-step3 .circle_num.undone, |
424 | #wrapper.step5 .block-step3 .circle_num, | 429 | #wrapper.step5 .block-step3 .circle_num.undone, |
425 | #wrapper.step6 .block-step3 .circle_num, | 430 | #wrapper.step6 .block-step3 .circle_num.undone, |
426 | #wrapper.step7 .block-step3 .circle_num, | 431 | #wrapper.step7 .block-step3 .circle_num.undone, |
427 | #wrapper.step5 .block-step4 .circle_num, | 432 | #wrapper.step5 .block-step4 .circle_num.undone, |
428 | #wrapper.step6 .block-step4 .circle_num, | 433 | #wrapper.step6 .block-step4 .circle_num.undone, |
429 | #wrapper.step7 .block-step4 .circle_num, | 434 | #wrapper.step7 .block-step4 .circle_num.undone, |
430 | #wrapper.step6 .block-step5 .circle_num, | 435 | #wrapper.step6 .block-step5 .circle_num.undone, |
431 | #wrapper.step7 .block-step5 .circle_num, | 436 | #wrapper.step7 .block-step5 .circle_num.undone, |
432 | #wrapper.step7 .block-step6 .circle_num { | 437 | #wrapper.step7 .block-step6 .circle_num.undone { |
433 | border-radius: 1px !important; | 438 | transform: rotate3d(45, 45, 1, 90deg); |
434 | transition: border-radius, 2s; | 439 | transition: transform 0.5s, visibility 0.5s; |
440 | visibility: hidden; | ||
441 | } | ||
442 | |||
443 | .circle_num.done { | ||
444 | position: relative; | ||
445 | margin-right: -68px; | ||
446 | left: -68px; | ||
447 | visibility: hidden; | ||
448 | transition: transform 0.5s, visibility 0.5s; | ||
449 | transform: rotate3d(45, 45, 1, 90deg); | ||
450 | } | ||
451 | |||
452 | #wrapper.step3 .block-step2 .circle_num.done, | ||
453 | #wrapper.step4 .block-step2 .circle_num.done, | ||
454 | #wrapper.step5 .block-step2 .circle_num.done, | ||
455 | #wrapper.step6 .block-step2 .circle_num.done, | ||
456 | #wrapper.step7 .block-step2 .circle_num.done, | ||
457 | #wrapper.step4 .block-step3 .circle_num.done, | ||
458 | #wrapper.step5 .block-step3 .circle_num.done, | ||
459 | #wrapper.step6 .block-step3 .circle_num.done, | ||
460 | #wrapper.step7 .block-step3 .circle_num.done, | ||
461 | #wrapper.step5 .block-step4 .circle_num.done, | ||
462 | #wrapper.step6 .block-step4 .circle_num.done, | ||
463 | #wrapper.step7 .block-step4 .circle_num.done, | ||
464 | #wrapper.step6 .block-step5 .circle_num.done, | ||
465 | #wrapper.step7 .block-step5 .circle_num.done, | ||
466 | #wrapper.step7 .block-step6 .circle_num.done { | ||
467 | visibility: visible; | ||
468 | transform: rotate3d(0,0,0,0deg); | ||
469 | transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; | ||
435 | } | 470 | } |
436 | 471 | ||
437 | /* Make shift date selector */ | 472 | /* Make shift date selector */ |
@@ -535,14 +570,6 @@ select.zeit { | |||
535 | margin-bottom: 0.3em; | 570 | margin-bottom: 0.3em; |
536 | } | 571 | } |
537 | 572 | ||
538 | .credits hr { | ||
539 | height: 1px; | ||
540 | width: 90px; | ||
541 | margin-bottom: 1em; | ||
542 | border: 0; | ||
543 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); | ||
544 | } | ||
545 | |||
546 | /* ******** Horizontal footer slide magic ******** */ | 573 | /* ******** Horizontal footer slide magic ******** */ |
547 | 574 | ||
548 | .scrollcontainer { | 575 | .scrollcontainer { |