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     -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  52     -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
  53     -webkit-tap-highlight-color: transparent !important;
  54     padding: 0;
  55     margin: 0;
  56     text-decoration: none;
  57     cursor: default;
  58     border-color: inherit;
  59     color: inherit;
  60     text-align: center;
  61     font-weight: normal;
  62     box-sizing: border-box;
  63     outline: none !important;
  64 }
  65
  66 [href], [onclick] {
  67     cursor: pointer;
  68 }
  69
  70 body {
  71     -webkit-touch-callout: none;
  72     background-color: inherit;
  73     border-width: 0px;
  74     border-radius: 16px;
  75     position: absolute;
  76     left: -20px;
  77     right: -20px;
  78     top: -20px;
  79     bottom: -20px;
  80     font-size: 6vmin;
  81 }
  82
  83 #overlay {
  84     position: fixed;
  85     left: -50%;
  86     right: -50%;
  87     top: -50%;
  88     bottom: -50%;
  89     background-color: black;
  90     opacity: 0;
  91     transition: opacity 0.5s;
  92     -webkit-transition: opacity 0.5s;
  93     z-index: 3;
  94     pointer-events: none;
  95 }
  96
  97 .dialog {
  98     font-size: 8vmin;
  99     position: absolute;
 100     bottom: 10%;
 101     left: 16.6667%;
 102     right: 16.6667%;
 103     border-style: solid;
 104     border-width: 3px;
 105     border-radius: 9px;
 106     background-color: inherit;
 107     padding-bottom: 3vh;
 108     transform: translateX(150%);
 109     -webkit-transform: translateX(150%);
 110     transition: transform 0.5s;
 111     -webkit-transition: -webkit-transform 0.5s;
 112     z-index: 4;
 113 }
 114
 115 .dialog.open {
 116     transform: translateX(0);
 117     -webkit-transform: translateX(0);
 118 }
 119
 120 .dialog.open ~ #overlay {
 121     opacity: 0.5;
 122     pointer-events: auto;
 123 }
 124
 125 .dialog p {
 126     font-size: 5vmin;
 127 }
 128
 129 .dialog h1 {
 130     font-size: 7vmin;
 131 }
 132
 133 .change {
 134     border: none;
 135     font-size: 6vh;
 136     height: 7vh;
 137     line-height: 7vh;
 138     margin: 0;
 139     padding: 0;
 140     position: absolute;
 141     top: 4px;
 142     right: 4px;
 143     width: 7vh;
 144 }
 145
 146 .mark:after {
 147     content: "?";
 148 }
 149
 150 .back {
 151     border: none;
 152     top: 4px;
 153     font-size: 6vh;
 154     height: 7vh;
 155     left: 4px;
 156     line-height: 7vh;
 157     margin: 0;
 158     padding: 0;
 159     position: absolute;
 160     width: 7vh;
 161     font-family: Sans, sans-serif;
 162 }
 163
 164 .back:after {
 165     content: "⬅";
 166 }
 167
 168 .background.mark {
 169     opacity: 0.1;
 170     position: absolute;
 171     font-size: 60vmin;
 172     line-height: 100vh;
 173     display: block;
 174     top: 0;
 175     bottom: 0;
 176     width: 100%;
 177     left: 0;
 178     right: 0;
 179     pointer-events: none;
 180 }
 181
 182 .statusbar {
 183     top: -4px;
 184 }
 185
 186 .spinner {
 187     position: absolute;
 188     z-index: 2;
 189     opacity: 0;
 190     color: white;
 191     left: 40vw;
 192     right: 40vw;
 193     height: 1em;
 194     width: 20vw;
 195     top: 2vh;
 196     transform: rotateZ(0deg);
 197     transition: transform 1.5s, opacity 0.5s 6.5s;
 198     -webkit-transform: rotateZ(0deg);
 199     -webkit-transition: -webkit-transform 1.5s, opacity 0.5s 6.5s;
 200     font-size: 20vw;
 201     line-height: 1em;
 202     pointer-events: none;
 203 }
 204
 205 .spinner:after {
 206     display: inline-block;
 207     content: "↓";
 208     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 209 }
 210
 211 @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 @-webkit-keyframes roll {
 221       0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 222       2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 223       5% { opacity: 1; width: 1em; }
 224      90% { opacity: 1; width: 1em; }
 225      95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 226     100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 227 }
 228
 229 .die {
 230     display: inline-block;
 231     opacity: 1;
 232     transform: rotateY(0);
 233     -webkit-transform: rotateY(0);
 234     transition: transform 1.5s linear;
 235     -webkit-transition: -webkit-transform 1.5s linear;
 236     font-family: Sans;
 237     width: 1em;
 238     height: 1em;
 239     line-height: 1em;
 240     vertical-align: middle;
 241 }
 242
 243 .rolling {
 244     animation: roll 7.5s forwards;
 245     -webkit-animation: roll 7.5s forwards;
 246 }
 247
 248 .die:after {
 249     width: 1.35em;
 250     height: 1.35em;
 251     line-height: 1.35em;
 252     border-width: 1px;
 253     border-style: solid;
 254     border-color: black;
 255     background-color: rgba(255, 255, 255, 0.85);
 256     color: black;
 257     border-radius: 0.25em;
 258     display: block;
 259     content: attr(data-roll);
 260     font-size: 0.75em;
 261 }
 262
 263 a {
 264     display: inline-block;
 265     line-height: 1em;
 266     border-radius: 0.5em;
 267 }
 268
 269 .button {
 270     border-style: solid;
 271     border-width: 1px;
 272     border-radius: 1em;
 273     margin: 0.5em auto;
 274     font-size: 5vmin;
 275     width: 90%;
 276     display: block;
 277     border-radius: 1em;
 278     border-style: solid;
 279     border-width: 1px;
 280     line-height: 1.5em;
 281 }
 282