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.
6 You can copy, modify, distribute and perform the work, even for
7 commercial purposes, all without asking permission.
9 See https://creativecommons.org/publicdomain/zero/1.0/ for details.
13 font-family: Oranienbaum
;
16 src: url
('Oranienbaum-Regular.woff') format
('woff');
23 src: url
('Cardo-Regular.woff') format
('woff');
30 src: url
('Cardo-Bold.woff') format
('woff');
37 src: url
('Cardo-Italic.woff') format
('woff');
56 list-style-type: none
;
57 display: inline-block
;
62 font-family: Cardo
, serif
;
64 background-color: black
;
70 background-color: black
;
73 box-sizing: border-box
;
77 background-color: white
;
83 box-sizing: border-box
;
86 body
.standalone header
+ main
{
90 body
.standalone
header:empty
+ main
{
95 border-collapse: collapse
;
101 padding-top: 0.125em;
102 padding-bottom: 0.125em;
107 font-variant: small-caps
;
108 vertical-align: bottom
;
122 tbody
tr:nth-last-child
(odd
) {
123 background-color: hsl
(270, 30%, 85%);
126 #fate th:first-child
, #fate
td:first-child
{
133 -webkit-hyphens: auto
;
139 #abilities td:first-child
{
151 text-shadow: -0.08333em -0.08333em 0.25em #aec38b,
152 0.08333em -0.08333em 0.25em #aec38b,
153 0.08333em 0.08333em 0 #534f53,
154 -0.08333em 0.08333em 0 #534f53,
155 0 0.1667em 0 #414045;
156 -webkit-text-stroke: 0;
157 display: inline-block
;
167 margin-bottom: 0.5em;
168 font-family: Oranienbaum
, Cardo
, serif
;
169 color: hsl
(270, 25%, 75%);
172 border-bottom: solid hsl
(270, 25%, 50%) 0.0625em;
175 letter-spacing: -0.02em;
176 text-shadow: -1px 0 black
, 1px 0 black
,
177 0 1px black
, 0 -1px black
,
178 -0.707px -0.707px black
, 0.707px 0.707px black
,
179 -0.707px 0.707px black
, 0.707px -0.707px black
;
191 display: inline-block
;
197 font-family: Oranienbaum
, Cardo
, serif
;
199 letter-spacing: -1px;
201 border-bottom: solid hsl
(270, 30%, 85%) 0.25em;
204 margin-bottom: 0.5em;
208 a:link
, a:visited
, a:active
{
209 color: hsl
(270, 25%, 50%);
211 text-decoration: none
;
214 .fate-name { font-weight: bold
; }
215 .fate-effect { font-style: italic
; font-size: 0.95em; }
216 .fate-action { font-size: 0.95em; }
218 input
[type
=checkbox
] {
225 color: black
!important
;
226 background-color: hsl
(270, 30%, 85%);
228 padding: 0.375em 0.5em;
229 display: inline-block
;
230 border-radius: 0 0.5em 0 0.5em;
231 transition: box-shadow
0.167s, border-color
0.167s, opacity
0.333s;
232 -webkit-transition: box-shadow
0.167s, border-color
0.167s, opacity
0.333s;
233 box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
234 border: solid hsl
(270, 30%, 85%) 1px;
244 .button:hover, .button:focus {
245 box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
246 border-color: hsl
(270, 25%, 50%);
250 box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
254 .standalone header .button {
255 box-shadow: 0 0 0.5em 0.0625em #aaa;
258 .standalone header .button:active {
259 box-shadow: 0 0 0 0 #aaa;
262 main
> div
, main
> noscript
{
270 display: inline-block
;
275 -webkit-appearance: none
;
276 -moz-appearance: none
;
278 font-family: Cardo
, serif
;
284 border: solid hsl
(270, 30%, 85%) 1px;
285 border-radius: 0 0.5em 0 0.5em;
286 background-color: hsl
(270, 30%, 85%);
287 box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
288 transition: box-shadow
0.167s, border-color
0.167s;
289 -webkit-transition: box-shadow
0.167s, border-color
0.167s;
294 select:hover
, select:focus
{
295 box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
296 border-color: hsl
(270, 25%, 50%);
301 box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
306 -webkit-appearance: none
;
307 -moz-appearance: none
;
309 font-family: Cardo
, serif
;
310 background-color: white
;
317 font-family: inherit
;
321 optgroup
+ optgroup
{
327 -webkit-hyphens: auto
;
334 margin-bottom: 0.5em;
342 margin-bottom: 0.5em;
346 @keyframes row-content-in
{
347 0% { max-height: 0; opacity: 0; }
348 50% { max-height: 10em; }
351 @-webkit-keyframes row-content-in
{
352 0% { max-height: 0; opacity: 0; }
353 50% { max-height: 10em; }
363 animation: row-content-in
0.6667s;
364 -webkit-animation: row-content-in
0.6667s;
367 #fate tbody
~ tfoot
{
368 transition: opacity
0.3333s, visibility
0s 0.3333s;
369 -webkit-transition: opacity
0.3333s, visibility
0s 0.3333s;
374 #fate tbody:empty
~ tfoot
{
380 display: inline-block
;
389 background-color: white
;
390 display: inline-block
;
391 margin: 0.2em 0.375em;
392 border: solid
1px black
;
397 background-color: black
;
398 display: inline-block
;
399 margin: 0.2em 0.375em;
400 border: solid
1px black
;
422 background-image: url
(card.png);
423 background-size: cover
;
437 .card.adventurer .name, .card.adventurer .type {
438 background-color: #4ba12f;
441 .card.object .name, .card.object .type {
442 background-color: #cdab4c;
450 border: solid white
0.1em;
451 border-radius: 0.6em;
458 box-sizing: border-box
;
459 text-shadow: -1px -1px rgba
(0, 0, 0, 0.75),
460 1px -1px rgba
(0, 0, 0, 0.75),
461 -1px 1px rgba
(0, 0, 0, 0.75),
462 1px 1px rgba
(0, 0, 0, 0.75),
471 letter-spacing: 0.05em;
473 text-shadow: -0.707px -0.707px rgba
(255, 255, 255, 0.75),
474 0.707px -0.707px rgba
(255, 255, 255, 0.75),
475 -0.707px 0.707px rgba
(255, 255, 255, 0.75),
476 0.707px 0.707px rgba
(255, 255, 255, 0.75),
488 box-sizing: border-box
;
489 padding-left: 0.6667em;
492 box-shadow: inset
0 0 0.25em black
;
524 border-radius: 1.5em;
525 display: inline-block
;
526 box-sizing: border-box
;
527 margin: 0.5em 0.05em;
528 box-shadow: 0 0 0.05em 0.05em black
;
529 background-image: url
(sword.png);
530 background-size: 0.2778em 1.3em;
531 background-position: center
;
532 background-repeat: no-repeat
;
536 .card .cost span:before, .card .cost span:after {
538 line-height: 1.333em;
542 transform-origin: 50% 65%;
543 background-image: url
(sword.png);
544 background-size: 0.2778em 1.3em;
545 background-position: center
;
546 background-repeat: no-repeat
;
549 .card .cost .r:before {
550 transform: rotate
(30deg);
551 -webkit-transform: rotate
(30deg);
556 /* :( would prefer with no extra elements... */
557 transform: rotate
(60deg);
561 transform-origin: 50% 65%;
566 .card .cost .r:after {
567 transform: rotate
(-30deg);
568 -webkit-transform: rotate
(-30deg);
573 transform: rotate
(-15deg);
574 background-color: #e4573c;
577 background-color: #abbc45;
580 .card .abilities .skill:before {
586 .card .abilities .temporary:before {
587 content: "Temporary power: ";
592 .card .abilities .ultimate:before {
593 content: "Ultimate power: ";
609 .card .flavor:before { content: "«"; }
610 .card .flavor:after { content: "»"; }
627 text-shadow: -0.0433em -0.0433em black
,
628 0.0433em -0.0433em black
,
629 -0.0433em 0.0433em black
,
630 0.0433em 0.0433em black
,
643 .card.dungeon:after {
644 background-image: url
(dungeon.jpg);
647 .card.final .name, .card.final .type {
648 background-color: #832b22;
651 .card.dungeon .name {
658 .card.dungeon .type {
665 text-shadow: -0.707px -0.707px rgba
(0, 0, 0, 0.75),
666 0.707px -0.707px rgba
(0, 0, 0, 0.75),
667 -0.707px 0.707px rgba
(0, 0, 0, 0.75),
668 0.707px 0.707px rgba
(0, 0, 0, 0.75),
675 .card.dungeon .power img {
677 vertical-align: bottom
;
679 .card.dungeon .power {
688 text-shadow: -0.707px -0.707px rgba
(0, 0, 0, 0.75),
689 0.707px -0.707px rgba
(0, 0, 0, 0.75),
690 -0.707px 0.707px rgba
(0, 0, 0, 0.75),
691 0.707px 0.707px rgba
(0, 0, 0, 0.75),
698 .card.dungeon .effect {
700 text-shadow: -0.707px -0.707px rgba
(255, 255, 255, 0.75),
701 0.707px -0.707px rgba
(255, 255, 255, 0.75),
702 -0.707px 0.707px rgba
(255, 255, 255, 0.75),
703 0.707px 0.707px rgba
(255, 255, 255, 0.75),
716 .card.dungeon .code {
727 background-color: white
;
729 box-sizing: border-box
;
733 body
.standalone
header:empty
{
738 body
.standalone header
{
741 background-color: black
;
744 h1
, h2
, [onclick
], label
{
745 -webkit-user-select: none
;
746 -moz-user-select: none
;
748 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
752 [onclick
], select
, label
{
756 @media (max-width: 639px) {
757 html
{ font-size: 14px; }
770 display: none
!important
;
774 background-color: white
;
786 page-break-inside: avoid
;
790 @media all and
(-webkit-min-device-pixel-ratio:0) {
793 -webkit-text-stroke: 0.02em black
;
797 display: none
!important
;