heroik.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 @font-face {
  13     font-family: Oranienbaum;
  14     font-style: normal;
  15     font-weight: 400;
  16     src: url('Oranienbaum-Regular.woff') format('woff');
  17 }
  18
  19 @font-face {
  20     font-family: Cardo;
  21     font-style: normal;
  22     font-weight: 400;
  23     src: url('Cardo-Regular.woff') format('woff');
  24 }
  25
  26 @font-face {
  27     font-family: Cardo;
  28     font-style: normal;
  29     font-weight: 700;
  30     src: url('Cardo-Bold.woff') format('woff');
  31 }
  32
  33 @font-face {
  34     font-family: Cardo;
  35     font-style: italic;
  36     font-weight: 400;
  37     src: url('Cardo-Italic.woff') format('woff');
  38 }
  39
  40 * {
  41     margin: 0;
  42     padding: 0;
  43 }
  44
  45 #change {
  46     position: relative;
  47     top: 1em;
  48 }
  49
  50 ul {
  51     margin-left: 1em;
  52     margin-bottom: 1em;
  53 }
  54
  55 ul.cards {
  56     list-style-type: none;
  57     display: inline-block;
  58     margin: auto;
  59 }
  60
  61 html {
  62     font-family: Cardo, serif;
  63     font-size: 20px;
  64     background-color: black;
  65     min-height: 100%;
  66     height: 100%;
  67 }
  68
  69 @media (max-width: 639px) {
  70     html { font-size: 14px; }
  71 }
  72
  73 body {
  74     background-color: black;
  75     min-height: 100%;
  76     height: 100%;
  77     box-sizing: border-box;
  78 }
  79
  80 body.standalone {
  81     padding-top: 20px;
  82 }
  83
  84 main {
  85     background-color: white;
  86     max-width: 25.2em;
  87     margin: 0 auto;
  88     padding: 1em;
  89     display: block;
  90     min-height: 100%;
  91     box-sizing: border-box;
  92 }
  93
  94 body.standalone main {
  95     padding-top: 0.5em;
  96 }
  97
  98 table {
  99     border-collapse: collapse;
 100     margin: auto;
 101     max-width: 25em;
 102 }
 103
 104 thead {
 105     font-size: 0.8em;
 106     font-variant: small-caps;
 107     vertical-align: bottom;
 108     text-align: left;
 109 }
 110
 111 th {
 112     font-weight: bold;
 113 }
 114
 115 tbody, tfoot {
 116     vertical-align: top;
 117     text-align: left;
 118 }
 119
 120
 121 tbody tr:nth-last-child(odd) {
 122     background-color: hsl(270, 30%, 85%);
 123 }
 124
 125 #fate th:first-child, #fate td:first-child {
 126     text-align: center;
 127     width: 2em;
 128 }
 129
 130 #abilities td {
 131     text-align: justify;
 132     -webkit-hyphens: auto;
 133     -moz-hyphens: auto;
 134     -ms-hyphens: auto;
 135     hyphens: auto;
 136 }
 137
 138 #abilities td:first-child {
 139     white-space: nowrap;
 140 }
 141
 142
 143 th, td {
 144     padding: 0 0.5rem;
 145 }
 146
 147 h1:before {
 148     content: '\25cf';
 149     color: #dae9bc;
 150     text-shadow: -0.08333em -0.08333em 0.25em #aec38b,
 151                  0.08333em -0.08333em 0.25em #aec38b,
 152                  0.08333em 0.08333em 0 #534f53,
 153                  -0.08333em 0.08333em 0 #534f53,
 154                  0 0.1667em 0 #414045;
 155     -webkit-text-stroke: 0;
 156     display: inline-block;
 157     width: 1em;
 158     margin-top: -0.1em;
 159     vertical-align: top;
 160     margin-left: -1em;
 161 }
 162
 163 h1 {
 164     padding-left: 1em;
 165     margin-top: 1em;
 166     margin-bottom: 0.5em;
 167     font-family: Oranienbaum, Cardo, serif;
 168     color: hsl(270, 25%, 75%);
 169     font-size: 2em;
 170     text-shadow: none;
 171     border-bottom: solid hsl(270, 25%, 50%) 0.0625em;
 172     line-height: 0.8em;
 173     font-weight: normal;
 174     text-shadow: -1px 0 black, 1px 0 black,
 175                  0 1px black, 0 -1px black,
 176                  -0.707px -0.707px black, 0.707px 0.707px black,
 177                  -0.707px 0.707px black, 0.707px -0.707px black;
 178 }
 179
 180 h1:first-child {
 181     margin-top: 0;
 182 }
 183
 184 h2:before {
 185     content: '\25fc';
 186     color: #00a1eb;
 187     font-size: 1.5em;
 188     width: 0.55em;
 189     display: inline-block;
 190 }
 191
 192 h2 {
 193     height: 1.15em;
 194     font-size: 1.25em;
 195     font-family: Oranienbaum, Cardo, serif;
 196     text-align: left;
 197     letter-spacing: -1px;
 198     z-index: 1;
 199     border-bottom: solid hsl(270, 30%, 85%) 0.25em;
 200     padding-right: 1em;
 201     white-space: nowrap;
 202     margin-bottom: 0.5em;
 203     font-weight: bold;
 204 }
 205
 206 a:link, a:visited, a:active {
 207     color: hsl(270, 25%, 50%);
 208     font-weight: bold;
 209     text-decoration: none;
 210 }
 211
 212 .fate-name { font-weight: bold; }
 213 .fate-effect { font-style: italic; font-size: 0.95em; }
 214 .fate-action { font-size: 0.95em; }
 215
 216 input[type=checkbox] {
 217     margin-right: 0.5em;
 218 }
 219
 220 .button {
 221     font-size: 1.1em;
 222     font-weight: bold;
 223     color: black !important;
 224     background-color: hsl(270, 30%, 85%);
 225     margin: 0.0625em 0;
 226     padding: 0.375em 0.5em;
 227     display: inline-block;
 228     border-radius: 0 0.5em 0 0.5em;
 229     transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s;
 230     -webkit-transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s;
 231     box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
 232     border: solid hsl(270, 30%, 85%) 1px;
 233     min-width: 6em;
 234 }
 235
 236 .button.small {
 237     min-width: 1.25em;
 238 }
 239
 240 .button:hover, .button:focus {
 241     box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
 242     border-color: hsl(270, 25%, 50%);
 243 }
 244
 245 .button:active {
 246     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 247 }
 248
 249 main > div {
 250     text-align: center;
 251     margin-bottom: 1rem;
 252 }
 253
 254 ul.cards li {
 255     padding: 0.25em 0;
 256     display: inline-block;
 257     width: 8em;
 258 }
 259
 260 select {
 261     -webkit-appearance: none;
 262     -moz-appearance: none;
 263     appearance: none;
 264     font-family: Cardo, serif;
 265     font-size: 1.1em;
 266     margin-top: 0.5em;
 267     width: 60%;
 268     margin-left: 20%;
 269     padding: 0 0.5em;
 270     border: solid hsl(270, 30%, 85%) 1px;
 271     border-radius: 0 0.5em 0 0.5em;
 272     background-color: hsl(270, 30%, 85%);
 273     box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
 274     transition: box-shadow 0.167s, border-color 0.167s;
 275     -webkit-transition: box-shadow 0.167s, border-color 0.167s;
 276     text-align:-webkit-center !important;
 277     font-weight: bold;
 278 }
 279
 280 select:hover, select:focus {
 281     box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
 282     border-color: hsl(270, 25%, 50%);
 283     outline: none;
 284 }
 285
 286 select:active {
 287     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 288     outline: none;
 289 }
 290
 291 option {
 292     -webkit-appearance: none;
 293     -moz-appearance: none;
 294     appearance: none;
 295     font-family: Cardo, serif;
 296     background-color: white;
 297     text-align: center;
 298     font-weight: normal;
 299 }
 300
 301 p, li {
 302     text-align: justify;
 303     -webkit-hyphens: auto;
 304     -moz-hyphens: auto;
 305     -ms-hyphens: auto;
 306     hyphens: auto;
 307 }
 308
 309 p {
 310     margin-bottom: 0.5em;
 311 }
 312
 313 blockquote {
 314     text-align: justify;
 315     font-style: italic;
 316     margin-left: 1em;
 317     margin-right: 1em;
 318     margin-bottom: 0.5em;
 319     font-size: 0.95em;
 320 }
 321
 322 @keyframes row-content-in {
 323     0% { max-height: 0; opacity: 0; }
 324     50% { max-height: 10em; }
 325     100% { opacity: 1; }
 326 }
 327 @-webkit-keyframes row-content-in {
 328     0% { max-height: 0; opacity: 0; }
 329     50% { max-height: 10em; }
 330     100% { opacity: 1; }
 331 }
 332
 333 table {
 334     width: 100%;
 335 }
 336
 337 #fate tbody tr div {
 338     max-height: 10em;
 339     animation: row-content-in 0.6667s;
 340     -webkit-animation: row-content-in 0.6667s;
 341 }
 342
 343 #fate tbody ~ tfoot {
 344     transition: opacity 0.3333s, visibility 0s 0.3333s;
 345     -webkit-transition: opacity 0.3333s, visibility 0s 0.3333s;
 346     opacity: 0;
 347     visibility: hidden;
 348 }
 349
 350 #fate tbody:empty ~ tfoot {
 351     opacity: 1;
 352     visibility: visible;
 353 }
 354
 355 .button.big {
 356     display: block;
 357     width: 80%;
 358     margin: 1em auto;
 359 }
 360
 361 .card1 {
 362     width: 2.5em;
 363     background-color: white;
 364     display: inline-block;
 365     margin: 0.2em 0.375em;
 366     border: solid 1px black;
 367 }
 368
 369 .card2 {
 370     width: 2.5em;
 371     background-color: black;
 372     display: inline-block;
 373     margin: 0.2em 0.375em;
 374     border: solid 1px black;
 375     color: white;
 376 }
 377
 378 #statusbar {
 379     display: none;
 380     position: fixed;
 381     left: 0;
 382     top: 0;
 383     right: 0;
 384     height: 20px;
 385     background-color: black;
 386 }
 387
 388 body.standalone #statusbar {
 389     display: block;
 390 }
 391
 392 h1, h2, [onclick], label {
 393     -webkit-user-select: none;
 394     -moz-user-select: none;
 395     user-select: none;
 396     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 397     cursor: default;
 398 }
 399
 400 [onclick], select, label {
 401     cursor: pointer;
 402 }
 403
 404 td:target {
 405     font-weight: bold;
 406 }
 407
 408 @media print {
 409
 410     @page {
 411         size: 3.5in 7in;
 412         margin: 0.5em;
 413     }
 414     .no-print {
 415         display: none !important;
 416     }
 417
 418     body, html {
 419         background-color: white;
 420         font-size: 10pt;
 421     }
 422
 423     main {
 424         max-width: 3.5in;
 425     }
 426 }
 427
 428 @media screen and (-webkit-min-device-pixel-ratio:0) {
 429     h1 {
 430         text-shadow: none;
 431         -webkit-text-stroke: 1px black;
 432         latter-spacing: -1px;
 433     }
 434
 435     .broken-on-webkit {
 436         display: none !important;
 437     }
 438
 439 }