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 table.tall td {
 105     padding-top: 0.125em;
 106     padding-bottom: 0.125em;
 107 }
 108
 109 thead {
 110     font-size: 0.8em;
 111     font-variant: small-caps;
 112     vertical-align: bottom;
 113     text-align: left;
 114 }
 115
 116 th {
 117     font-weight: bold;
 118 }
 119
 120 tbody, tfoot {
 121     vertical-align: top;
 122     text-align: left;
 123 }
 124
 125
 126 tbody tr:nth-last-child(odd) {
 127     background-color: hsl(270, 30%, 85%);
 128 }
 129
 130 #fate th:first-child, #fate td:first-child {
 131     text-align: center;
 132     width: 2em;
 133 }
 134
 135 #abilities td {
 136     text-align: justify;
 137     -webkit-hyphens: auto;
 138     -moz-hyphens: auto;
 139     -ms-hyphens: auto;
 140     hyphens: auto;
 141 }
 142
 143 #abilities td:first-child {
 144     white-space: nowrap;
 145 }
 146
 147
 148 th, td {
 149     padding: 0 0.5rem;
 150 }
 151
 152 h1:before {
 153     content: '\25cf';
 154     color: #dae9bc;
 155     text-shadow: -0.08333em -0.08333em 0.25em #aec38b,
 156                  0.08333em -0.08333em 0.25em #aec38b,
 157                  0.08333em 0.08333em 0 #534f53,
 158                  -0.08333em 0.08333em 0 #534f53,
 159                  0 0.1667em 0 #414045;
 160     -webkit-text-stroke: 0;
 161     display: inline-block;
 162     width: 1em;
 163     margin-top: -0.1em;
 164     vertical-align: top;
 165     margin-left: -1em;
 166 }
 167
 168 h1 {
 169     padding-left: 1em;
 170     margin-top: 1em;
 171     margin-bottom: 0.5em;
 172     font-family: Oranienbaum, Cardo, serif;
 173     color: hsl(270, 25%, 75%);
 174     font-size: 2em;
 175     text-shadow: none;
 176     border-bottom: solid hsl(270, 25%, 50%) 0.0625em;
 177     line-height: 0.8em;
 178     font-weight: normal;
 179     text-shadow: -1px 0 black, 1px 0 black,
 180                  0 1px black, 0 -1px black,
 181                  -0.707px -0.707px black, 0.707px 0.707px black,
 182                  -0.707px 0.707px black, 0.707px -0.707px black;
 183 }
 184
 185 h1:first-child {
 186     margin-top: 0;
 187 }
 188
 189 h2:before {
 190     content: '\25fc';
 191     color: #00a1eb;
 192     font-size: 1.5em;
 193     width: 0.55em;
 194     display: inline-block;
 195 }
 196
 197 h2 {
 198     height: 1.15em;
 199     font-size: 1.25em;
 200     font-family: Oranienbaum, Cardo, serif;
 201     text-align: left;
 202     letter-spacing: -1px;
 203     z-index: 1;
 204     border-bottom: solid hsl(270, 30%, 85%) 0.25em;
 205     padding-right: 1em;
 206     white-space: nowrap;
 207     margin-bottom: 0.5em;
 208     font-weight: bold;
 209 }
 210
 211 a:link, a:visited, a:active {
 212     color: hsl(270, 25%, 50%);
 213     font-weight: bold;
 214     text-decoration: none;
 215 }
 216
 217 .fate-name { font-weight: bold; }
 218 .fate-effect { font-style: italic; font-size: 0.95em; }
 219 .fate-action { font-size: 0.95em; }
 220
 221 input[type=checkbox] {
 222     margin-right: 0.5em;
 223 }
 224
 225 .button {
 226     font-size: 1.1em;
 227     font-weight: bold;
 228     color: black !important;
 229     background-color: hsl(270, 30%, 85%);
 230     margin: 0.0625em 0;
 231     padding: 0.375em 0.5em;
 232     display: inline-block;
 233     border-radius: 0 0.5em 0 0.5em;
 234     transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s;
 235     -webkit-transition: box-shadow 0.167s, border-color 0.167s, opacity 0.333s;
 236     box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
 237     border: solid hsl(270, 30%, 85%) 1px;
 238     min-width: 6em;
 239 }
 240
 241 .button.small {
 242     min-width: 1.25em;
 243 }
 244
 245 .button:hover, .button:focus {
 246     box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
 247     border-color: hsl(270, 25%, 50%);
 248 }
 249
 250 .button:active {
 251     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 252 }
 253
 254 main > div, main > noscript {
 255     text-align: center;
 256     margin-bottom: 1rem;
 257     display: block;
 258 }
 259
 260 ul.cards li {
 261     padding: 0.25em 0;
 262     display: inline-block;
 263     width: 8em;
 264 }
 265
 266 select {
 267     -webkit-appearance: none;
 268     -moz-appearance: none;
 269     appearance: none;
 270     font-family: Cardo, serif;
 271     font-size: 1.1em;
 272     margin-top: 0.5em;
 273     width: 60%;
 274     margin-left: 20%;
 275     padding: 0 0.5em;
 276     border: solid hsl(270, 30%, 85%) 1px;
 277     border-radius: 0 0.5em 0 0.5em;
 278     background-color: hsl(270, 30%, 85%);
 279     box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
 280     transition: box-shadow 0.167s, border-color 0.167s;
 281     -webkit-transition: box-shadow 0.167s, border-color 0.167s;
 282     text-align:-webkit-center !important;
 283     font-weight: bold;
 284 }
 285
 286 select:hover, select:focus {
 287     box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
 288     border-color: hsl(270, 25%, 50%);
 289     outline: none;
 290 }
 291
 292 select:active {
 293     box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
 294     outline: none;
 295 }
 296
 297 option {
 298     -webkit-appearance: none;
 299     -moz-appearance: none;
 300     appearance: none;
 301     font-family: Cardo, serif;
 302     background-color: white;
 303     text-align: center;
 304     font-weight: normal;
 305 }
 306
 307 p, li {
 308     text-align: justify;
 309     -webkit-hyphens: auto;
 310     -moz-hyphens: auto;
 311     -ms-hyphens: auto;
 312     hyphens: auto;
 313 }
 314
 315 p {
 316     margin-bottom: 0.5em;
 317 }
 318
 319 blockquote {
 320     text-align: justify;
 321     font-style: italic;
 322     margin-left: 1em;
 323     margin-right: 1em;
 324     margin-bottom: 0.5em;
 325     font-size: 0.95em;
 326 }
 327
 328 @keyframes row-content-in {
 329     0% { max-height: 0; opacity: 0; }
 330     50% { max-height: 10em; }
 331     100% { opacity: 1; }
 332 }
 333 @-webkit-keyframes row-content-in {
 334     0% { max-height: 0; opacity: 0; }
 335     50% { max-height: 10em; }
 336     100% { opacity: 1; }
 337 }
 338
 339 table {
 340     width: 100%;
 341 }
 342
 343 #fate tbody tr div {
 344     max-height: 10em;
 345     animation: row-content-in 0.6667s;
 346     -webkit-animation: row-content-in 0.6667s;
 347 }
 348
 349 #fate tbody ~ tfoot {
 350     transition: opacity 0.3333s, visibility 0s 0.3333s;
 351     -webkit-transition: opacity 0.3333s, visibility 0s 0.3333s;
 352     opacity: 0;
 353     visibility: hidden;
 354 }
 355
 356 #fate tbody:empty ~ tfoot {
 357     opacity: 1;
 358     visibility: visible;
 359 }
 360
 361 .button.big {
 362     display: inline-block;
 363     width: 35%;
 364     padding-top: 1em;
 365     padding-bottom: 1em;
 366     margin: 0.5em 0.5em;
 367 }
 368
 369 .card1 {
 370     width: 2.5em;
 371     background-color: white;
 372     display: inline-block;
 373     margin: 0.2em 0.375em;
 374     border: solid 1px black;
 375 }
 376
 377 .card2 {
 378     width: 2.5em;
 379     background-color: black;
 380     display: inline-block;
 381     margin: 0.2em 0.375em;
 382     border: solid 1px black;
 383     color: white;
 384 }
 385
 386 .card {
 387     display: block;
 388
 389     position: relative;
 390     width: 20em;
 391     height: 27.1875em;
 392     font-size: 88.275%;
 393 /*    width: 64mm;
 394     height: 87mm;
 395     font-size: 9pt;*/
 396     margin: auto;
 397     margin: 0.5em auto;
 398     z-index: 1;
 399 }
 400
 401
 402 .card:after {
 403     content: '';
 404     display: block;
 405     position:absolute;
 406     width:100%;
 407     height:100%;
 408     left:0;
 409     top:0;
 410     background-image: url(card.png);
 411     background-size: cover;
 412     z-index: -1;
 413 }
 414
 415 .card .art {
 416     position: absolute;
 417     z-index: -1;
 418     left: 9.5%;
 419     right: 9.5%;
 420     width: 81%;
 421     height: auto;
 422     top: 7.1%;
 423 }
 424
 425 .card.adventurer .name, .card.adventurer .type {
 426     background-color: #4ba12f;
 427 }
 428
 429 .card.object .name, .card.object .type {
 430     background-color: #cdab4c;
 431 }
 432
 433 .card .name {
 434     position: absolute;
 435     color: white;
 436     text-align: center;
 437     width: 77%;
 438     border: solid white 0.1em;
 439     border-radius: 0.4em;
 440     line-height: 1.6em;
 441     height: 5.5%;
 442     font-size: 0.85em;
 443     font-weight: bold;
 444     left: 11.5%;
 445     right: 11.5%;
 446     top: 3.5%;
 447     box-sizing: border-box;
 448     text-shadow: 0 0 0.5em black;
 449 }
 450
 451 .card .type {
 452     color: black;
 453     letter-spacing: 0.05em;
 454     font-weight: bold;
 455     text-shadow: -0.0707em -0.0707em rgba(255, 255, 255, 0.7),
 456                  0.0707em -0.0707em rgba(255, 255, 255, 0.7),
 457                  -0.0707em 0.0707em rgba(255, 255, 255, 0.7),
 458                  0.0707em 0.0707em rgba(255, 255, 255, 0.7),
 459                  0.1em 0 rgba(255, 255, 255, 0.7),
 460                  -0.1em 0 rgba(255, 255, 255, 0.7),
 461                  0 0.1em rgba(255, 255, 255, 0.7),
 462                  0 -0.1em rgba(255, 255, 255, 0.7);
 463     text-align: left;
 464     margin: auto;
 465     position: absolute;
 466     height: 2.55%;
 467     width: 84%;
 468     left: 8%;
 469     top: 52.3333%;
 470     box-sizing: border-box;
 471     padding-left: 0.6667em;
 472     font-size: 0.575em;
 473     line-height: 1.25em;
 474     box-shadow: inset 0 0 0.25em black;
 475 }
 476
 477 .card .gender {
 478     position: absolute;
 479     height: 9%;
 480     top: 47.5%;
 481     right: 8.5%;
 482 }
 483
 484 .card .gender img {
 485     float: right;
 486     height: 100%;
 487 }
 488
 489 .card .abilities {
 490     text-align: left;
 491     position: absolute;
 492     top: 57%;
 493     bottom: 8%;
 494     left: 10%;
 495     right: 10%;
 496     font-size: 0.8em;
 497     line-height: 1.05em;
 498     padding-left: 1em;
 499 }
 500
 501 .card .cost span {
 502     position: relative;
 503     content: ' ';
 504     width: 1.5em;
 505     height: 1.5em;
 506     border-radius: 1.5em;
 507     border: solid black 0.75em;
 508     display: inline-block;
 509     box-sizing: border-box;
 510     margin: 0.5em 0.05em;
 511     box-shadow: 0 0 0.05em 0.05em black;
 512 }
 513
 514 .card .cost span:before {
 515     position: absolute;
 516     text-align: center;
 517     left: -0.75em;
 518     top: -0.75em;
 519     color: black;
 520     line-height: 1.333em;
 521     opacity: 0.5;
 522     width: 1.5em;
 523     height: 1.5em;
 524 }
 525
 526
 527 .card .cost .r:before { content: 'r'; }
 528 .card .cost .g:before { content: 'g'; }
 529
 530 .card .cost .r {
 531     background-color: #e4573c;
 532     border-color: #e4573c;
 533 }
 534 .card .cost .g {
 535     background-color: #abbc45;
 536     border-color: #abbc45;
 537 }
 538
 539 .card .abilities .skill:before {
 540     content: "Skill: ";
 541     font-weight: bold;
 542     margin-left: -1em;
 543 }
 544
 545 .card .abilities .temporary:before {
 546     content: "Temporary power: ";
 547     font-weight: bold;
 548     margin-left: -1em;
 549 }
 550
 551 .card .abilities .ultimate:before {
 552     content: "Ultimate power: ";
 553     font-weight: bold;
 554     margin-left: -1em;
 555 }
 556
 557 .card .effect {
 558     text-align: center;
 559     position: absolute;
 560     top: 59%;
 561     bottom: 8%;
 562     left: 15%;
 563     width: 70%;
 564     font-size: 0.8em;
 565     line-height: 1.05em;
 566 }
 567
 568 .card .flavor {
 569     position: absolute;
 570     bottom: 9%;
 571     width: 80%;
 572     left: 10%;
 573     font-style: italic;
 574     color: black;
 575     font-size: 0.6em;
 576 }
 577
 578 .card .code {
 579     position: absolute;
 580     color: white;
 581     bottom: 3.5%;
 582     right: 12%;
 583     font-size: 0.65em;
 584     text-shadow: -0.0433em -0.0433em black,
 585                  0.0433em -0.0433em black,
 586                  -0.0433em 0.0433em black,
 587                  0.0433em 0.0433em black,
 588                  0.06667em 0 black,
 589                  -0.06667em 0 black,
 590                  0 0.06667em black,
 591                  0 -0.06667em black;
 592 }
 593
 594 #statusbar {
 595     display: none;
 596     position: fixed;
 597     left: 0;
 598     top: 0;
 599     right: 0;
 600     height: 20px;
 601     background-color: black;
 602 }
 603
 604 body.standalone #statusbar {
 605     display: block;
 606 }
 607
 608 h1, h2, [onclick], label {
 609     -webkit-user-select: none;
 610     -moz-user-select: none;
 611     user-select: none;
 612     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 613     cursor: default;
 614 }
 615
 616 [onclick], select, label {
 617     cursor: pointer;
 618 }
 619
 620 td:target {
 621     font-weight: bold;
 622 }
 623
 624 @media print {
 625
 626     @page {
 627         size: 3.5in 7in;
 628         margin: 0.5em;
 629     }
 630     .no-print {
 631         display: none !important;
 632     }
 633
 634     body, html {
 635         background-color: white;
 636         font-size: 10pt;
 637     }
 638
 639     main {
 640         max-width: 3.5in;
 641     }
 642 }
 643
 644 @media screen and (-webkit-min-device-pixel-ratio:0) {
 645     h1 {
 646         text-shadow: none;
 647         -webkit-text-stroke: 1px black;
 648         latter-spacing: -1px;
 649     }
 650
 651     .broken-on-webkit {
 652         display: none !important;
 653     }
 654
 655 }