main.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 @import url('themes.css');
  13
  14 @font-face {
  15     font-family: 'C';
  16     font-style: normal;
  17     font-weight: 400;
  18     src: url('Celestia-Redux.woff') format('woff');
  19 }
  20
  21 @font-face {
  22     font-family: 'Sans';
  23     font-style: normal;
  24     font-weight: 400;
  25     src: url('FiraSans-Regular.woff') format('woff');
  26 }
  27
  28 @font-face {
  29     font-family: 'Emoji';
  30     font-style: normal;
  31     font-weight: 400;
  32     src: url('AndroidEmoji.woff') format('woff');
  33 }
  34
  35 html {
  36     font-family: 'C', 'Sans', 'Emoji', sans-serif;
  37     overflow: hidden;
  38     border-style: solid;
  39     border-width: 24px;
  40     position: fixed;
  41     top: 0;
  42     bottom: 0;
  43     left: 0;
  44     right: 0;
  45 }
  46
  47 *, *:after, *:before {
  48     -webkit-user-select: none;
  49     -moz-user-select: none;
  50     user-select: none;
  51     padding: 0;
  52     margin: 0;
  53     text-decoration: none;
  54     cursor: default;
  55     border-color: inherit;
  56     color: inherit;
  57     text-align: center;
  58     font-weight: normal;
  59     box-sizing: border-box;
  60 }
  61
  62 [href], [onclick] {
  63     cursor: pointer;
  64 }
  65
  66 body {
  67     -webkit-touch-callout: none;
  68     background-color: inherit;
  69     border-width: 0px;
  70     border-radius: 16px;
  71     position: absolute;
  72     left: -20px;
  73     right: -20px;
  74     top: -20px;
  75     bottom: -20px;
  76     font-size: 6vmin;
  77 }
  78
  79 #overlay {
  80     position: absolute;
  81     left: -50%;
  82     right: -50%;
  83     top: -50%;
  84     bottom: -50%;
  85     background-color: black;
  86     opacity: 0;
  87     -webkit-animation: fadein 0.5s forwards;
  88     animation: fadein 0.5s forwards;
  89 }
  90
  91 @keyframes fadein { to { opacity: 0.5; } }
  92 @-webkit-keyframes fadein { to { opacity: 0.5; } }
  93
  94 .dialog {
  95     font-size: 8vmin;
  96     position: absolute;
  97     bottom: 10%;
  98     width: 66.6667%;
  99     margin-left: -6px;
 100     border-style: solid;
 101     border-width: 3px;
 102     border-radius: 9px;
 103     background-color: inherit;
 104     padding-bottom: 3vh;
 105     transform: translateX(160%);
 106     -webkit-transform: translateX(160%);
 107     transition: transform 0.5s;
 108     -webkit-transition: -webkit-transform 0.5s;
 109 }
 110
 111 #overlay + .dialog {
 112     transform: translateX(25%);
 113     -webkit-transform: translateX(25%);
 114 }
 115
 116 .dialog p {
 117     font-size: 5vmin;
 118 }
 119
 120 .dialog h1 {
 121     font-size: 7vmin;
 122 }
 123
 124 .change {
 125     border: none;
 126     font-size: 6vh;
 127     height: 7vh;
 128     line-height: 7vh;
 129     margin: 0;
 130     padding: 0;
 131     position: absolute;
 132     top: 4px;
 133     right: 4px;
 134     width: 7vh;
 135 }
 136
 137 .mark:after {
 138     content: "?";
 139 }
 140
 141 .back {
 142     border: none;
 143     top: 4px;
 144     font-size: 6vh;
 145     height: 7vh;
 146     left: 4px;
 147     line-height: 7vh;
 148     margin: 0;
 149     padding: 0;
 150     position: absolute;
 151     width: 7vh;
 152     font-family: Sans, sans-serif;
 153 }
 154
 155 .back:after {
 156     content: "⬅";
 157 }
 158
 159 .background.mark {
 160     opacity: 0.1;
 161     position: absolute;
 162     font-size: 60vmin;
 163     line-height: 100vh;
 164     display: block;
 165     top: 0;
 166     bottom: 0;
 167     width: 100%;
 168     left: 0;
 169     right: 0;
 170     pointer-events: none;
 171 }
 172
 173 .statusbar {
 174     top: -4px;
 175 }
 176
 177 .spinner {
 178     position: absolute;
 179     z-index: 2;
 180     opacity: 0;
 181     color: white;
 182     left: 40vw;
 183     right: 40vw;
 184     height: 1em;
 185     width: 20vw;
 186     top: 2vh;
 187     transform: rotateZ(0deg);
 188     transition: transform 1.5s, opacity 0.5s 6.5s;
 189     -webkit-transform: rotateZ(0deg);
 190     -webkit-transition: -webkit-transform 1.5s, opacity 0.5s 6.5s;
 191     font-size: 20vw;
 192     line-height: 1em;
 193     pointer-events: none;
 194 }
 195
 196 .spinner:after {
 197     display: inline-block;
 198     content: "↓";
 199     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 200 }
 201
 202 @keyframes roll {
 203       0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 204       2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 205       5% { opacity: 1; width: 1em; }
 206      90% { opacity: 1; width: 1em; }
 207      95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 208     100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 209 }
 210
 211 @-webkit-keyframes roll {
 212       0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 213       2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 214       5% { opacity: 1; width: 1em; }
 215      90% { opacity: 1; width: 1em; }
 216      95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 217     100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 218 }
 219
 220 .die {
 221     display: inline-block;
 222     opacity: 1;
 223     transform: rotateY(0);
 224     -webkit-transform: rotateY(0);
 225     transition: transform 1.5s linear;
 226     -webkit-transition: -webkit-transform 1.5s linear;
 227     font-family: Sans;
 228     width: 1em;
 229     height: 1em;
 230     line-height: 1em;
 231     vertical-align: middle;
 232 }
 233
 234 .rolling {
 235     animation: roll 7.5s forwards;
 236     -webkit-animation: roll 7.5s forwards;
 237 }
 238
 239 .die:after {
 240     width: 1.35em;
 241     height: 1.35em;
 242     line-height: 1.35em;
 243     border-width: 1px;
 244     border-style: solid;
 245     border-color: black;
 246     background-color: rgba(255, 255, 255, 0.85);
 247     color: black;
 248     border-radius: 0.25em;
 249     display: block;
 250     content: attr(data-roll);
 251     font-size: 0.75em;
 252 }
 253
 254 a {
 255     display: inline-block;
 256     min-width: 1em;
 257     line-height: 1em;
 258     border-radius: 0.5em;
 259 }
 260
 261 .button {
 262     border-style: solid;
 263     border-width: 1px;
 264     border-radius: 1em;
 265     margin: 0.5em auto;
 266     font-size: 5vmin;
 267     width: 90%;
 268     display: block;
 269     border-radius: 1em;
 270     border-style: solid;
 271     border-width: 1px;
 272     line-height: 1.5em;
 273 }
 274