summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css138
1 files changed, 61 insertions, 77 deletions
diff --git a/style.css b/style.css
index 1aa7a87..fa11114 100644
--- a/style.css
+++ b/style.css
@@ -85,7 +85,7 @@ h1 svg {
85 transition: transform 0.5s; 85 transition: transform 0.5s;
86} 86}
87 87
88#wrapper.step1 h1 svg { 88#wrapper.step-1 h1 svg {
89 transform: scale(1.35) translate(0px, 4px) rotate(360deg); 89 transform: scale(1.35) translate(0px, 4px) rotate(360deg);
90} 90}
91 91
@@ -227,7 +227,7 @@ label:first-line {
227/* Global element definitions done. 227/* Global element definitions done.
228 Now for basic color scheme */ 228 Now for basic color scheme */
229#unsicher { background-color: #840020; } 229#unsicher { background-color: #840020; }
230.footer { background-color: #F1F2E3; } 230#footer { background-color: #F1F2E3; }
231.block-step1 { background-color: #F1F2E3; } 231.block-step1 { background-color: #F1F2E3; }
232.block-step2 { background-color: #047E7C; } 232.block-step2 { background-color: #047E7C; }
233.block-step3 { background-color: #0C6D74; } 233.block-step3 { background-color: #0C6D74; }
@@ -254,7 +254,7 @@ label:first-line {
254 background-color: black; 254 background-color: black;
255} 255}
256 256
257.footer { 257#footer {
258 color: #8E99A0; 258 color: #8E99A0;
259} 259}
260 260
@@ -266,7 +266,7 @@ label:first-line {
266} 266}
267 267
268/* Footer shadow is inverted an marks end of stacked cards */ 268/* Footer shadow is inverted an marks end of stacked cards */
269.footer { 269#footer {
270 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5); 270 box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5);
271} 271}
272 272
@@ -325,9 +325,9 @@ dd {
325 global state (as set with a class on the wrapper element) 325 global state (as set with a class on the wrapper element)
326*/ 326*/
327.juice, 327.juice,
328.block-moreinfo,
328#unsicher, 329#unsicher,
329.moreinfo, 330#wrapper.step-0 h2 {
330#wrapper.stepcancel h2 {
331 overflow: hidden; 331 overflow: hidden;
332 max-height: 0px; 332 max-height: 0px;
333 transition: max-height, height; 333 transition: max-height, height;
@@ -336,46 +336,50 @@ dd {
336 transition-delay: 0s; 336 transition-delay: 0s;
337} 337}
338 338
339.show-lessinfo, 339.hide-moreinfo,
340.show-moreinfo { 340.show-moreinfo {
341 display: inline-block; 341 display: inline-block;
342 border-bottom: dotted 1px rgba(0,0,0,0.25); 342 border-bottom: dotted 1px rgba(0,0,0,0.25);
343 margin-bottom: 1em;; 343 margin-bottom: 1em;
344 cursor: pointer; 344 cursor: pointer;
345} 345}
346 346
347.show-lessinfo { display: none; } 347.hide-moreinfo { display: none; }
348#step1hook.moreinfoshown .show-lessinfo { display: inline-block; } 348#wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; }
349#step1hook.moreinfoshown .show-moreinfo { display: none; } 349#wrapper.moreinfo-shown .show-moreinfo { display: none; }
350 350
351/* These are the heights of the expanded sections, only shown if the 351/* These are the heights of the expanded sections, only shown if the
352 wrapper has the appropriate class */ 352 wrapper has the appropriate class */
353 353
354#wrapper.step1 .block-step1 .juice { max-height: 450px; } 354#wrapper.step-1 .block-step1 .juice { max-height: 450px; }
355#wrapper.step2 .block-step2 .juice { max-height: 950px; } 355#wrapper.step-2 .block-step2 .juice { max-height: 950px; }
356#wrapper.step3 .block-step3 .juice { max-height: 950px; } 356#wrapper.step-3 .block-step3 .juice { max-height: 950px; }
357#wrapper.step4 .block-step4 .juice { max-height: 1050px; } 357#wrapper.step-4 .block-step4 .juice { max-height: 1050px; }
358#wrapper.step5 .block-step5 .juice { max-height: 1200px; } 358#wrapper.step-5 .block-step5 .juice { max-height: 1200px; }
359#wrapper.step6 .block-step6 .juice { max-height: 850px; } 359#wrapper.step-6 .block-step6 .juice { max-height: 850px; }
360#wrapper.step7 .block-step7 .juice { max-height: 650px; } 360#wrapper.step-7 .block-step7 .juice { max-height: 650px; }
361#step1hook.moreinfoshown .moreinfo { max-height: 3500px; } 361#wrapper.moreinfo-shown .block-moreinfo { max-height: 3500px; }
362#wrapper.step1 .block-step1 #step1hook.moreinfoshown.juice { max-height: 3800px;} 362#wrapper.step-1.moreinfo-shown .block-step1 .juice { max-height: 3800px;}
363 363
364/* The unsicher section does not have a headline initially visible, 364/* The unsicher section does not have a headline initially visible,
365 so the sections padding must be hidden and everything must be unhidden together */ 365 so the sections padding must be hidden and everything must be unhidden together */
366#unsicher { 366#unsicher {
367 padding: 0; 367 padding: 0;
368} 368}
369#wrapper.stepcancel .block-stepcancel .juice, 369#wrapper.step-0 .block-step0 .juice,
370#wrapper.stepcancel #unsicher { 370#wrapper.step-0 #unsicher {
371 max-height: 450px; 371 max-height: 450px;
372} 372}
373 373
374/* If the user did not yet confirm that he's sure, disallow expanding blocks */ 374/* If the user did not yet confirm that he's sure, disallow expanding blocks */
375#wrapper.not-confirmed .block-header { 375.block-header { pointer-events: none; }
376 pointer-events: none; 376#wrapper.stepdone-0 #head1 { pointer-events: auto; }
377} 377#wrapper.stepdone-1 #head2 { pointer-events: auto; }
378 378#wrapper.stepdone-2 #head3 { pointer-events: auto; }
379#wrapper.stepdone-3 #head4 { pointer-events: auto; }
380#wrapper.stepdone-4 #head5 { pointer-events: auto; }
381#wrapper.stepdone-5 #head6 { pointer-events: auto; }
382#wrapper.stepdone-6 #head7 { pointer-events: auto; }
379 383
380/* Our navigational buttons have a consistent height defined by its wrapper box */ 384/* Our navigational buttons have a consistent height defined by its wrapper box */
381.two-buttons, 385.two-buttons,
@@ -448,26 +452,6 @@ dd {
448 452
449/* Style things that depend on the progress. 453/* Style things that depend on the progress.
450 Example: circles turn squares when a step is finished */ 454 Example: circles turn squares when a step is finished */
451#wrapper.step3 .block-step2 .circle_num.undone,
452#wrapper.step4 .block-step2 .circle_num.undone,
453#wrapper.step5 .block-step2 .circle_num.undone,
454#wrapper.step6 .block-step2 .circle_num.undone,
455#wrapper.step7 .block-step2 .circle_num.undone,
456#wrapper.step4 .block-step3 .circle_num.undone,
457#wrapper.step5 .block-step3 .circle_num.undone,
458#wrapper.step6 .block-step3 .circle_num.undone,
459#wrapper.step7 .block-step3 .circle_num.undone,
460#wrapper.step5 .block-step4 .circle_num.undone,
461#wrapper.step6 .block-step4 .circle_num.undone,
462#wrapper.step7 .block-step4 .circle_num.undone,
463#wrapper.step6 .block-step5 .circle_num.undone,
464#wrapper.step7 .block-step5 .circle_num.undone,
465#wrapper.step7 .block-step6 .circle_num.undone {
466 transform: rotate3d(45, 45, 1, 90deg);
467 transition: transform 0.5s, visibility 0.5s;
468 visibility: hidden;
469}
470
471.circle_num.done { 455.circle_num.done {
472 position: relative; 456 position: relative;
473 margin-right: -68px; 457 margin-right: -68px;
@@ -479,21 +463,21 @@ dd {
479 color: white; 463 color: white;
480} 464}
481 465
482#wrapper.step3 .block-step2 .circle_num.done, 466#wrapper.stepdone-2 .block-step2 .circle_num.undone,
483#wrapper.step4 .block-step2 .circle_num.done, 467#wrapper.stepdone-3 .block-step3 .circle_num.undone,
484#wrapper.step5 .block-step2 .circle_num.done, 468#wrapper.stepdone-4 .block-step4 .circle_num.undone,
485#wrapper.step6 .block-step2 .circle_num.done, 469#wrapper.stepdone-5 .block-step5 .circle_num.undone,
486#wrapper.step7 .block-step2 .circle_num.done, 470#wrapper.stepdone-6 .block-step6 .circle_num.undone {
487#wrapper.step4 .block-step3 .circle_num.done, 471 transform: rotate3d(45, 45, 1, 90deg);
488#wrapper.step5 .block-step3 .circle_num.done, 472 transition: transform 0.5s, visibility 0.5s;
489#wrapper.step6 .block-step3 .circle_num.done, 473 visibility: hidden;
490#wrapper.step7 .block-step3 .circle_num.done, 474}
491#wrapper.step5 .block-step4 .circle_num.done, 475
492#wrapper.step6 .block-step4 .circle_num.done, 476#wrapper.stepdone-2 .block-step2 .circle_num.done,
493#wrapper.step7 .block-step4 .circle_num.done, 477#wrapper.stepdone-3 .block-step3 .circle_num.done,
494#wrapper.step6 .block-step5 .circle_num.done, 478#wrapper.stepdone-4 .block-step4 .circle_num.done,
495#wrapper.step7 .block-step5 .circle_num.done, 479#wrapper.stepdone-5 .block-step5 .circle_num.done,
496#wrapper.step7 .block-step6 .circle_num.done { 480#wrapper.stepdone-6 .block-step6 .circle_num.done {
497 visibility: visible; 481 visibility: visible;
498 transform: rotate3d(0,0,0,0deg); 482 transform: rotate3d(0,0,0,0deg);
499 transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; 483 transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
@@ -528,11 +512,11 @@ select.zeit {
528 margin: 0 auto -300px; 512 margin: 0 auto -300px;
529} 513}
530 514
531.footer, .push { 515#footer, .push {
532 height: 300px; 516 height: 300px;
533} 517}
534 518
535.footer { 519#footer {
536 width: 100%; 520 width: 100%;
537 min-width: 540px; 521 min-width: 540px;
538 margin: 0; 522 margin: 0;
@@ -546,20 +530,20 @@ select.zeit {
546} 530}
547 531
548/* Footer links have a softer color than in block 1 */ 532/* Footer links have a softer color than in block 1 */
549.footer a:link, 533#footer a:link,
550.footer a:visited { 534#footer a:visited {
551 color: #8E99A0; 535 color: #8E99A0;
552} 536}
553 537
554.footer .partner a:link, 538#footer .partner a:link,
555.footer .implementor a:link, 539#footer .implementor a:link,
556.footer .partner a:visited, 540#footer .partner a:visited,
557.footer .implementor a:visited, 541#footer .implementor a:visited,
558.footer .imprint span { 542#footer .show-impressum span {
559 border-bottom: dotted 1px rgba(0,0,0,0.25); 543 border-bottom: dotted 1px rgba(0,0,0,0.25);
560} 544}
561 545
562.footer .imprint { 546#footer .show-impressum {
563 cursor: pointer; 547 cursor: pointer;
564 margin-bottom: 1em; 548 margin-bottom: 1em;
565} 549}
@@ -587,7 +571,7 @@ select.zeit {
587 transition: transform 1s; 571 transition: transform 1s;
588} 572}
589 573
590.footer.show-imprint .partner > img { 574#footer.impressum-shown .partner > img {
591 transform: rotate(720deg); 575 transform: rotate(720deg);
592} 576}
593 577
@@ -606,7 +590,7 @@ select.zeit {
606 width: 200%; 590 width: 200%;
607} 591}
608 592
609.impressum { 593.block-impressum {
610 float: right; 594 float: right;
611 width: 50%; 595 width: 50%;
612 height: 260px; 596 height: 260px;
@@ -616,16 +600,16 @@ select.zeit {
616 left: 0%; 600 left: 0%;
617} 601}
618 602
619.impressum p { 603.block-impressum p {
620 margin: 0 0 .1em 0; 604 margin: 0 0 .1em 0;
621} 605}
622 606
623.footer.show-imprint .impressum { 607#footer.impressum-shown .block-impressum {
624 left: -50%; 608 left: -50%;
625 top: 0; 609 top: 0;
626} 610}
627 611
628.credits { 612.block-credits {
629 width: 50%; 613 width: 50%;
630 float: left; 614 float: left;
631 position: relative; 615 position: relative;
@@ -633,7 +617,7 @@ select.zeit {
633 transition: left 1s; 617 transition: left 1s;
634} 618}
635 619
636.footer.show-imprint .credits { 620#footer.impressum-shown .block-credits {
637 left: -50%; 621 left: -50%;
638} 622}
639 623