choice.css

   1 /* The person who associated a work with this deed has dedicated the
   2    work to the public domain by waiving all of his or her rights to
   3    the work worldwide under copyright law, including all related and
   4    neighboring rights, to the extent allowed by law.
   5
   6    You can copy, modify, distribute and perform the work, even for
   7    commercial purposes, all without asking permission.
   8
   9    See https://creativecommons.org/publicdomain/zero/1.0/ for details.
  10 */
  11
  12 /* However, we would appreciate it if you kept this link in the file,
  13    to help inform other people about what it does and how they can use
  14    it -- https://yukkurigames.com/choicecss/choicecss.html#0
  15 */
  16
  17 /* These properties are set to values required for choice.css to
  18    function. Do not override them. */
  19
  20 html, body {
  21     width: 100%;
  22     height: 100%;
  23     margin: 0;
  24     padding: 0;
  25 }
  26
  27 html, body, main {
  28     overflow: hidden;
  29 }
  30
  31 nav, main, section, header {
  32     display: block;
  33 }
  34
  35 main {
  36     position: absolute;
  37 }
  38
  39 section {
  40     position: absolute;
  41     overflow: auto;
  42     -webkit-overflow-scrolling: touch;
  43     visibility: hidden;
  44     -webkit-box-sizing: border-box;
  45     -moz-box-sizing: border-box;
  46     box-sizing: border-box;
  47     top: 50%;
  48     margin: auto;
  49     -webkit-transition: all 0.333s, -webkit-transform 0.333s;
  50     -moz-transition: all 0.333s;
  51     -o-transition: all 0.333s;
  52     transition: all 0.333s;
  53     -webkit-transition-timing-function: ease-in-out;
  54     -moz-transition-timing-function: ease-in-out;
  55     -o-transition-timing-function: ease-in-out;
  56     transition-timing-function: ease-in-out;
  57     opacity: 1;
  58     -webkit-transform: translate(0, -50%) scale(1, 1) rotate(0);
  59     -moz-transform: translate(0, -50%) scale(1, 1) rotate(0);
  60     -ms-transform: translate(0, -50%) scale(1, 1) rotate(0);
  61     -o-transform: translate(0, -50%) scale(1, 1) rotate(0);
  62     transform: translate(0, -50%) scale(1, 1) rotate(0);
  63 }
  64 /* These are three possible appearance transitions for sections.
  65    Sections receive a default transition for variety, but may also be
  66    manually specified to override the default. */
  67
  68 section:nth-child(3n), section.hpop {
  69     /* Horizontal pop-in */
  70     -webkit-transform: translate(0, -50%) scale(0, 1) rotate(0);
  71     -moz-transform: translate(0, -50%) scale(0, 1) rotate(0);
  72     -ms-transform: translate(0, -50%) scale(0, 1) rotate(0);
  73     -o-transform: translate(0, -50%) scale(0, 1) rotate(0);
  74     transform: translate(0, -50%) scale(0, 1) rotate(0);
  75 }
  76
  77 section:nth-child(3n+1), section.vpop {
  78     /* Vertical pop-in */
  79     -webkit-transform: translate(0, -50%) scale(1, 0) rotate(0);
  80     -moz-transform: translate(0, -50%) scale(1, 0) rotate(0);
  81     -ms-transform: translate(0, -50%) scale(1, 0) rotate(0);
  82     -o-transform: translate(0, -50%) scale(1, 0) rotate(0);
  83     transform: translate(0, -50%) scale(1, 0) rotate(0);
  84 }
  85
  86 section:nth-child(3n+2), section.fade {
  87     /* Fade in */
  88     opacity: 0;
  89 }
  90
  91 section:target, section:last-child {
  92     /* Delay new appearance until the previous section is finishing. */
  93     -webkit-transition-delay: 0.25s;
  94     -moz-transition-delay: 0.25s;
  95     -o-transition-delay: 0.25s;
  96     transition-delay: 0.25s;
  97
  98     /* Reset everything set in the animation styles. */
  99     opacity: 1;
 100     visibility: visible;
 101     -webkit-transform: translate(0, -50%) scale(1, 1) rotate(0);
 102     -moz-transform: translate(0, -50%) scale(1, 1) rotate(0);
 103     -ms-transform: translate(0, -50%) scale(1, 1) rotate(0);
 104     -o-transform: translate(0, -50%) scale(1, 1) rotate(0);
 105     transform: translate(0, -50%) scale(1, 1) rotate(0);
 106 }
 107
 108
 109 section:target ~ section:last-child {
 110     display: none;
 111 }
 112
 113 /* These properties may be modified within limits. */
 114
 115 main {
 116     /* This needs to be big enough for a reasonable amount of text. */
 117     padding: 0.5em;
 118     top: 0;
 119     bottom: 0;
 120     left: 0;
 121     right: 0;
 122 }
 123
 124 section {
 125     /* The left and right margins and maximum size may be modified, but
 126        must be set (and less than 100%). */
 127     left: 0.5em;
 128     right: 0.5em;
 129     max-width: 35em;
 130     max-height: 90%;
 131 }
 132
 133 @media print {
 134     html, body, main {
 135         height: auto;
 136         width: auto;
 137     }
 138
 139     main {
 140         position: static;
 141         overflow: auto;
 142     }
 143
 144     section {
 145         max-height: none;
 146         height: auto;
 147         position: static;
 148         margin-top: 1em;
 149         margin-bottom: 1em;
 150         top: auto;
 151         -webkit-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
 152         -moz-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
 153         -ms-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
 154         -o-transform: translate(0, 0) scale(1, 1) rotate(0) !important;
 155         transform: translate(0, 0) scale(1, 1) rotate(0) !important;
 156         opacity: 1 !important;
 157         visibility: visible !important;
 158     }
 159
 160     section[id]:before {
 161         display: block;
 162         content: "(Section #" attr(id) ")";
 163     }
 164
 165     section a[href^="#"]:not(.no-section):after {
 166         content: " (section " attr(href) ")";
 167     }
 168
 169     .no-print {
 170         display: none;
 171     }
 172 }
 173
 174 /* Most other properties may be modified freely. */