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: absolute;
  85     left: -50%;
  86     right: -50%;
  87     top: -50%;
  88     bottom: -50%;
  89     background-color: black;
  90     opacity: 0;
  91     -webkit-animation: fadein 0.5s forwards;
  92     animation: fadein 0.5s forwards;
  93 }
  94
  95 @keyframes fadein { to { opacity: 0.5; } }
  96 @-webkit-keyframes fadein { to { opacity: 0.5; } }
  97
  98 .dialog {
  99     font-size: 8vmin;
 100     position: absolute;
 101     bottom: 10%;
 102     width: 66.6667%;
 103     margin-left: -6px;
 104     border-style: solid;
 105     border-width: 3px;
 106     border-radius: 9px;
 107     background-color: inherit;
 108     padding-bottom: 3vh;
 109     transform: translateX(160%);
 110     -webkit-transform: translateX(160%);
 111     transition: transform 0.5s;
 112     -webkit-transition: -webkit-transform 0.5s;
 113 }
 114
 115 #overlay + .dialog {
 116     transform: translateX(25%);
 117     -webkit-transform: translateX(25%);
 118 }
 119
 120 .dialog p {
 121     font-size: 5vmin;
 122 }
 123
 124 .dialog h1 {
 125     font-size: 7vmin;
 126 }
 127
 128 .change {
 129     border: none;
 130     font-size: 6vh;
 131     height: 7vh;
 132     line-height: 7vh;
 133     margin: 0;
 134     padding: 0;
 135     position: absolute;
 136     top: 4px;
 137     right: 4px;
 138     width: 7vh;
 139 }
 140
 141 .mark:after {
 142     content: "?";
 143 }
 144
 145 .back {
 146     border: none;
 147     top: 4px;
 148     font-size: 6vh;
 149     height: 7vh;
 150     left: 4px;
 151     line-height: 7vh;
 152     margin: 0;
 153     padding: 0;
 154     position: absolute;
 155     width: 7vh;
 156     font-family: Sans, sans-serif;
 157 }
 158
 159 .back:after {
 160     content: "⬅";
 161 }
 162
 163 .background.mark {
 164     opacity: 0.1;
 165     position: absolute;
 166     font-size: 60vmin;
 167     line-height: 100vh;
 168     display: block;
 169     top: 0;
 170     bottom: 0;
 171     width: 100%;
 172     left: 0;
 173     right: 0;
 174     pointer-events: none;
 175 }
 176
 177 .statusbar {
 178     top: -4px;
 179 }
 180
 181 .spinner {
 182     position: absolute;
 183     z-index: 2;
 184     opacity: 0;
 185     color: white;
 186     left: 40vw;
 187     right: 40vw;
 188     height: 1em;
 189     width: 20vw;
 190     top: 2vh;
 191     transform: rotateZ(0deg);
 192     transition: transform 1.5s, opacity 0.5s 6.5s;
 193     -webkit-transform: rotateZ(0deg);
 194     -webkit-transition: -webkit-transform 1.5s, opacity 0.5s 6.5s;
 195     font-size: 20vw;
 196     line-height: 1em;
 197     pointer-events: none;
 198 }
 199
 200 .spinner:after {
 201     display: inline-block;
 202     content: "↓";
 203     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 204 }
 205
 206 @keyframes roll {
 207       0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 208       2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 209       5% { opacity: 1; width: 1em; }
 210      90% { opacity: 1; width: 1em; }
 211      95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 212     100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 213 }
 214
 215 @-webkit-keyframes roll {
 216       0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 217       2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 218       5% { opacity: 1; width: 1em; }
 219      90% { opacity: 1; width: 1em; }
 220      95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; }
 221     100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; }
 222 }
 223
 224 .die {
 225     display: inline-block;
 226     opacity: 1;
 227     transform: rotateY(0);
 228     -webkit-transform: rotateY(0);
 229     transition: transform 1.5s linear;
 230     -webkit-transition: -webkit-transform 1.5s linear;
 231     font-family: Sans;
 232     width: 1em;
 233     height: 1em;
 234     line-height: 1em;
 235     vertical-align: middle;
 236 }
 237
 238 .rolling {
 239     animation: roll 7.5s forwards;
 240     -webkit-animation: roll 7.5s forwards;
 241 }
 242
 243 .die:after {
 244     width: 1.35em;
 245     height: 1.35em;
 246     line-height: 1.35em;
 247     border-width: 1px;
 248     border-style: solid;
 249     border-color: black;
 250     background-color: rgba(255, 255, 255, 0.85);
 251     color: black;
 252     border-radius: 0.25em;
 253     display: block;
 254     content: attr(data-roll);
 255     font-size: 0.75em;
 256 }
 257
 258 a {
 259     display: inline-block;
 260     min-width: 1em;
 261     line-height: 1em;
 262     border-radius: 0.5em;
 263 }
 264
 265 .button {
 266     border-style: solid;
 267     border-width: 1px;
 268     border-radius: 1em;
 269     margin: 0.5em auto;
 270     font-size: 5vmin;
 271     width: 90%;
 272     display: block;
 273     border-radius: 1em;
 274     border-style: solid;
 275     border-width: 1px;
 276     line-height: 1.5em;
 277 }
 278