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
;
69 @media (max-width: 639px) {
70 html
{ font-size: 14px; }
74 background-color: black
;
77 box-sizing: border-box
;
85 background-color: white
;
91 box-sizing: border-box
;
94 body
.standalone main
{
99 border-collapse: collapse
;
105 padding-top: 0.125em;
106 padding-bottom: 0.125em;
111 font-variant: small-caps
;
112 vertical-align: bottom
;
126 tbody
tr:nth-last-child
(odd
) {
127 background-color: hsl
(270, 30%, 85%);
130 #fate th:first-child
, #fate
td:first-child
{
137 -webkit-hyphens: auto
;
143 #abilities td:first-child
{
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
;
171 margin-bottom: 0.5em;
172 font-family: Oranienbaum
, Cardo
, serif
;
173 color: hsl
(270, 25%, 75%);
176 border-bottom: solid hsl
(270, 25%, 50%) 0.0625em;
179 letter-spacing: -0.02em;
180 text-shadow: -1px 0 black
, 1px 0 black
,
181 0 1px black
, 0 -1px black
,
182 -0.707px -0.707px black
, 0.707px 0.707px black
,
183 -0.707px 0.707px black
, 0.707px -0.707px black
;
195 display: inline-block
;
201 font-family: Oranienbaum
, Cardo
, serif
;
203 letter-spacing: -1px;
205 border-bottom: solid hsl
(270, 30%, 85%) 0.25em;
208 margin-bottom: 0.5em;
212 a:link
, a:visited
, a:active
{
213 color: hsl
(270, 25%, 50%);
215 text-decoration: none
;
218 .fate-name { font-weight: bold
; }
219 .fate-effect { font-style: italic
; font-size: 0.95em; }
220 .fate-action { font-size: 0.95em; }
222 input
[type
=checkbox
] {
229 color: black
!important
;
230 background-color: hsl
(270, 30%, 85%);
232 padding: 0.375em 0.5em;
233 display: inline-block
;
234 border-radius: 0 0.5em 0 0.5em;
235 transition: box-shadow
0.167s, border-color
0.167s, opacity
0.333s;
236 -webkit-transition: box-shadow
0.167s, border-color
0.167s, opacity
0.333s;
237 box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
238 border: solid hsl
(270, 30%, 85%) 1px;
246 .button:hover, .button:focus {
247 box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
248 border-color: hsl
(270, 25%, 50%);
252 box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
255 main
> div
, main
> noscript
{
263 display: inline-block
;
268 -webkit-appearance: none
;
269 -moz-appearance: none
;
271 font-family: Cardo
, serif
;
277 border: solid hsl
(270, 30%, 85%) 1px;
278 border-radius: 0 0.5em 0 0.5em;
279 background-color: hsl
(270, 30%, 85%);
280 box-shadow: 0.125em 0.125em 0.25em 0.0625em #aaa;
281 transition: box-shadow
0.167s, border-color
0.167s;
282 -webkit-transition: box-shadow
0.167s, border-color
0.167s;
287 select:hover
, select:focus
{
288 box-shadow: 0.125em 0.125em 0.25em 0.0625em #888;
289 border-color: hsl
(270, 25%, 50%);
294 box-shadow: 0.0625em 0.0625em 0.0625em 0.0625em #888;
299 -webkit-appearance: none
;
300 -moz-appearance: none
;
302 font-family: Cardo
, serif
;
303 background-color: white
;
310 font-family: inherit
;
314 optgroup
+ optgroup
{
320 -webkit-hyphens: auto
;
327 margin-bottom: 0.5em;
335 margin-bottom: 0.5em;
339 @keyframes row-content-in
{
340 0% { max-height: 0; opacity: 0; }
341 50% { max-height: 10em; }
344 @-webkit-keyframes row-content-in
{
345 0% { max-height: 0; opacity: 0; }
346 50% { max-height: 10em; }
356 animation: row-content-in
0.6667s;
357 -webkit-animation: row-content-in
0.6667s;
360 #fate tbody
~ tfoot
{
361 transition: opacity
0.3333s, visibility
0s 0.3333s;
362 -webkit-transition: opacity
0.3333s, visibility
0s 0.3333s;
367 #fate tbody:empty
~ tfoot
{
373 display: inline-block
;
382 background-color: white
;
383 display: inline-block
;
384 margin: 0.2em 0.375em;
385 border: solid
1px black
;
390 background-color: black
;
391 display: inline-block
;
392 margin: 0.2em 0.375em;
393 border: solid
1px black
;
415 background-image: url
(card.png);
416 background-size: cover
;
430 .card.adventurer .name, .card.adventurer .type {
431 background-color: #4ba12f;
434 .card.object .name, .card.object .type {
435 background-color: #cdab4c;
443 border: solid white
0.1em;
444 border-radius: 0.6em;
451 box-sizing: border-box
;
452 text-shadow: -1px -1px rgba
(0, 0, 0, 0.75),
453 1px -1px rgba
(0, 0, 0, 0.75),
454 -1px 1px rgba
(0, 0, 0, 0.75),
455 1px 1px rgba
(0, 0, 0, 0.75),
464 letter-spacing: 0.05em;
466 text-shadow: -0.707px -0.707px rgba
(255, 255, 255, 0.75),
467 0.707px -0.707px rgba
(255, 255, 255, 0.75),
468 -0.707px 0.707px rgba
(255, 255, 255, 0.75),
469 0.707px 0.707px rgba
(255, 255, 255, 0.75),
481 box-sizing: border-box
;
482 padding-left: 0.6667em;
485 box-shadow: inset
0 0 0.25em black
;
517 border-radius: 1.5em;
518 display: inline-block
;
519 box-sizing: border-box
;
520 margin: 0.5em 0.05em;
521 box-shadow: 0 0 0.05em 0.05em black
;
522 background-image: url
(sword.png);
523 background-size: 0.2778em 1.3em;
524 background-position: center
;
525 background-repeat: no-repeat
;
529 .card .cost span:before, .card .cost span:after {
531 line-height: 1.333em;
535 transform-origin: 50% 65%;
536 background-image: url
(sword.png);
537 background-size: 0.2778em 1.3em;
538 background-position: center
;
539 background-repeat: no-repeat
;
542 .card .cost .r:before {
543 transform: rotate
(30deg);
544 -webkit-transform: rotate
(30deg);
549 /* :( would prefer with no extra elements... */
550 transform: rotate
(60deg);
554 transform-origin: 50% 65%;
559 .card .cost .r:after {
560 transform: rotate
(-30deg);
561 -webkit-transform: rotate
(-30deg);
566 transform: rotate
(-15deg);
567 background-color: #e4573c;
570 background-color: #abbc45;
573 .card .abilities .skill:before {
579 .card .abilities .temporary:before {
580 content: "Temporary power: ";
585 .card .abilities .ultimate:before {
586 content: "Ultimate power: ";
602 .card .flavor:before { content: "«"; }
603 .card .flavor:after { content: "»"; }
620 text-shadow: -0.0433em -0.0433em black
,
621 0.0433em -0.0433em black
,
622 -0.0433em 0.0433em black
,
623 0.0433em 0.0433em black
,
636 .card.dungeon:after {
637 background-image: url
(dungeon.jpg);
640 .card.final .name, .card.final .type {
641 background-color: #832b22;
644 .card.dungeon .name {
651 .card.dungeon .type {
658 text-shadow: -0.707px -0.707px rgba
(0, 0, 0, 0.75),
659 0.707px -0.707px rgba
(0, 0, 0, 0.75),
660 -0.707px 0.707px rgba
(0, 0, 0, 0.75),
661 0.707px 0.707px rgba
(0, 0, 0, 0.75),
668 .card.dungeon .power img {
670 vertical-align: bottom
;
672 .card.dungeon .power {
681 text-shadow: -0.707px -0.707px rgba
(0, 0, 0, 0.75),
682 0.707px -0.707px rgba
(0, 0, 0, 0.75),
683 -0.707px 0.707px rgba
(0, 0, 0, 0.75),
684 0.707px 0.707px rgba
(0, 0, 0, 0.75),
691 .card.dungeon .effect {
693 text-shadow: -0.707px -0.707px rgba
(255, 255, 255, 0.75),
694 0.707px -0.707px rgba
(255, 255, 255, 0.75),
695 -0.707px 0.707px rgba
(255, 255, 255, 0.75),
696 0.707px 0.707px rgba
(255, 255, 255, 0.75),
709 .card.dungeon .code {
721 background-color: black
;
724 body
.standalone #statusbar
{
728 h1
, h2
, [onclick
], label
{
729 -webkit-user-select: none
;
730 -moz-user-select: none
;
732 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
736 [onclick
], select
, label
{
747 display: none
!important
;
751 background-color: white
;
763 page-break-inside: avoid
;
767 @media all and
(-webkit-min-device-pixel-ratio:0) {
770 -webkit-text-stroke: 0.02em black
;
774 display: none
!important
;