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;
242 .button:hover, .button:focus {
243 box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
244 border-color: hsl
(270, 25%, 50%);
248 box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
252 .standalone header .button {
253 box-shadow: 0 0 0.5em 0.0625em #aaa;
256 .standalone header .button:active {
257 box-shadow: 0 0 0 0 #aaa;
260 main
> div
, main
> noscript
{
268 display: inline-block
;
273 -webkit-appearance: none
;
274 -moz-appearance: none
;
276 font-family: Cardo
, serif
;
282 border: solid hsl
(270, 30%, 85%) 1px;
283 border-radius: 0 0.5em 0 0.5em;
284 background-color: hsl
(270, 30%, 85%);
285 box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
286 transition: box-shadow
0.167s, border-color
0.167s;
287 -webkit-transition: box-shadow
0.167s, border-color
0.167s;
292 select:hover
, select:focus
{
293 box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
294 border-color: hsl
(270, 25%, 50%);
299 box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
304 -webkit-appearance: none
;
305 -moz-appearance: none
;
307 font-family: Cardo
, serif
;
308 background-color: white
;
315 font-family: inherit
;
319 optgroup
+ optgroup
{
325 -webkit-hyphens: auto
;
332 margin-bottom: 0.5em;
340 margin-bottom: 0.5em;
344 @keyframes row-content-in
{
345 0% { max-height: 0; opacity: 0; }
346 50% { max-height: 10em; }
349 @-webkit-keyframes row-content-in
{
350 0% { max-height: 0; opacity: 0; }
351 50% { max-height: 10em; }
361 animation: row-content-in
0.6667s;
362 -webkit-animation: row-content-in
0.6667s;
365 #fate tbody
~ tfoot
{
366 transition: opacity
0.3333s, visibility
0s 0.3333s;
367 -webkit-transition: opacity
0.3333s, visibility
0s 0.3333s;
372 #fate tbody:empty
~ tfoot
{
378 display: inline-block
;
387 background-color: white
;
388 display: inline-block
;
389 margin: 0.2em 0.375em;
390 border: solid
1px black
;
395 background-color: black
;
396 display: inline-block
;
397 margin: 0.2em 0.375em;
398 border: solid
1px black
;
420 background-image: url
(card.png);
421 background-size: cover
;
435 .card.adventurer .name, .card.adventurer .type {
436 background-color: #4ba12f;
439 .card.object .name, .card.object .type {
440 background-color: #cdab4c;
448 border: solid white
0.1em;
449 border-radius: 0.6em;
456 box-sizing: border-box
;
457 text-shadow: -1px -1px rgba
(0, 0, 0, 0.75),
458 1px -1px rgba
(0, 0, 0, 0.75),
459 -1px 1px rgba
(0, 0, 0, 0.75),
460 1px 1px rgba
(0, 0, 0, 0.75),
469 letter-spacing: 0.05em;
471 text-shadow: -0.707px -0.707px rgba
(255, 255, 255, 0.75),
472 0.707px -0.707px rgba
(255, 255, 255, 0.75),
473 -0.707px 0.707px rgba
(255, 255, 255, 0.75),
474 0.707px 0.707px rgba
(255, 255, 255, 0.75),
486 box-sizing: border-box
;
487 padding-left: 0.6667em;
490 box-shadow: inset
0 0 0.25em black
;
522 border-radius: 1.5em;
523 display: inline-block
;
524 box-sizing: border-box
;
525 margin: 0.5em 0.05em;
526 box-shadow: 0 0 0.05em 0.05em black
;
527 background-image: url
(sword.png);
528 background-size: 0.2778em 1.3em;
529 background-position: center
;
530 background-repeat: no-repeat
;
534 .card .cost span:before, .card .cost span:after {
536 line-height: 1.333em;
540 transform-origin: 50% 65%;
541 background-image: url
(sword.png);
542 background-size: 0.2778em 1.3em;
543 background-position: center
;
544 background-repeat: no-repeat
;
547 .card .cost .r:before {
548 transform: rotate
(30deg);
549 -webkit-transform: rotate
(30deg);
554 /* :( would prefer with no extra elements... */
555 transform: rotate
(60deg);
559 transform-origin: 50% 65%;
564 .card .cost .r:after {
565 transform: rotate
(-30deg);
566 -webkit-transform: rotate
(-30deg);
571 transform: rotate
(-15deg);
572 background-color: #e4573c;
575 background-color: #abbc45;
578 .card .abilities .skill:before {
584 .card .abilities .temporary:before {
585 content: "Temporary power: ";
590 .card .abilities .ultimate:before {
591 content: "Ultimate power: ";
607 .card .flavor:before { content: "«"; }
608 .card .flavor:after { content: "»"; }
625 text-shadow: -0.0433em -0.0433em black
,
626 0.0433em -0.0433em black
,
627 -0.0433em 0.0433em black
,
628 0.0433em 0.0433em black
,
641 .card.dungeon:after {
642 background-image: url
(dungeon.jpg);
645 .card.final .name, .card.final .type {
646 background-color: #832b22;
649 .card.dungeon .name {
656 .card.dungeon .type {
663 text-shadow: -0.707px -0.707px rgba
(0, 0, 0, 0.75),
664 0.707px -0.707px rgba
(0, 0, 0, 0.75),
665 -0.707px 0.707px rgba
(0, 0, 0, 0.75),
666 0.707px 0.707px rgba
(0, 0, 0, 0.75),
673 .card.dungeon .power img {
675 vertical-align: bottom
;
677 .card.dungeon .power {
686 text-shadow: -0.707px -0.707px rgba
(0, 0, 0, 0.75),
687 0.707px -0.707px rgba
(0, 0, 0, 0.75),
688 -0.707px 0.707px rgba
(0, 0, 0, 0.75),
689 0.707px 0.707px rgba
(0, 0, 0, 0.75),
696 .card.dungeon .effect {
698 text-shadow: -0.707px -0.707px rgba
(255, 255, 255, 0.75),
699 0.707px -0.707px rgba
(255, 255, 255, 0.75),
700 -0.707px 0.707px rgba
(255, 255, 255, 0.75),
701 0.707px 0.707px rgba
(255, 255, 255, 0.75),
714 .card.dungeon .code {
725 background-color: white
;
727 box-sizing: border-box
;
731 body
.standalone
header:empty
{
736 body
.standalone header
{
739 background-color: black
;
742 h1
, h2
, [onclick
], label
{
743 -webkit-user-select: none
;
744 -moz-user-select: none
;
746 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
750 [onclick
], select
, label
{
754 @media (max-width: 639px) {
755 html
{ font-size: 14px; }
768 display: none
!important
;
772 background-color: white
;
784 page-break-inside: avoid
;
788 @media all and
(-webkit-min-device-pixel-ratio:0) {
791 -webkit-text-stroke: 0.02em black
;
795 display: none
!important
;