diff options
| -rw-r--r-- | play.css | 47 |
1 files changed, 26 insertions, 21 deletions
@@ -9,6 +9,11 @@ header.your_turn { background-color: orange; } #turn_info { background-color: gainsboro; } .role_vp { float: right; } +:root { + --box-shadow: 1px 2px 3px 1px #0004; + --drop-shadow: 1px 2px 1.5px #0004; +} + .checked::before { content: "\2714 " } .unchecked::before { content: "\2714 "; color:transparent; } @@ -244,8 +249,8 @@ body svg .sea.action { background-color: #eee; } -.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, 1px 2px 4px #0008; } -.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, 1px 2px 4px #0008; } +.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, var(--box-shadow); } +.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, var(--box-shadow); } /* MAGIC TRACKS */ @@ -300,21 +305,21 @@ body.p2 #npg_galatia { display: block } .no_place_governor { background-color: #6e6e6e; } /* :r !node tools/gencolors.js */ -.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, 1px 2px 4px #0008; } -.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, 1px 2px 4px #0008; } -.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, 1px 2px 4px #0008; } -.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, 1px 2px 4px #0008; } -.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, 1px 2px 4px #0008; } -.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, 1px 2px 4px #0008; } -.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, 1px 2px 4px #0008; } -.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, 1px 2px 4px #0008; } -.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, 1px 2px 4px #0008; } -.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, 1px 2px 4px #0008; } -.rival_emperor { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, 1px 2px 4px #0008; } -.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, 1px 2px 4px #0008; } -.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; } -.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; } -.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, 1px 2px 4px #0008; } +.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, var(--box-shadow); } +.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, var(--box-shadow); } +.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, var(--box-shadow); } +.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, var(--box-shadow); } +.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, var(--box-shadow); } +.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, var(--box-shadow); } +.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, var(--box-shadow); } +.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, var(--box-shadow); } +.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, var(--box-shadow); } +.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, var(--box-shadow); } +.rival_emperor { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, var(--box-shadow); } +.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, var(--box-shadow); } +.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, var(--box-shadow); } +.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, var(--box-shadow); } +.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, var(--box-shadow); } .red.action { box-shadow: 0 0 0 1px #680000, 0 0 0 4px white; } .blue.action { box-shadow: 0 0 0 1px #113854, 0 0 0 4px white; } @@ -432,7 +437,7 @@ body.p2 #npg_galatia { display: block } background-size: 54px 64px; background-color: transparent; box-shadow: none; - filter: drop-shadow(0px 1px 3px #0008); + filter: drop-shadow(var(--drop-shadow)); } .quaestor.pretender { @@ -535,14 +540,14 @@ body.tint .militia { background-color: #f3ddbd; background-image: url(images/militia_tint.png); border-color: #fffcdb #b8a385 #b8a385 #fffcdb; - box-shadow: 0 0 0 1px #4c3b1f, 1px 2px 4px #0008; + box-shadow: 0 0 0 1px #4c3b1f, var(--box-shadow); } body.tint .legion.reduced { background-color: #f4cccd; background-image: url(images/legion_reduced_tint.png); border-color: #fff4f5 #ba9596 #ba9596 #fff4f5; - box-shadow: 0 0 0 1px #503133, 1px 2px 4px #0008; + box-shadow: 0 0 0 1px #503133, var(--box-shadow); } /* CARDS */ @@ -560,7 +565,7 @@ body.tint .legion.reduced { background-size: 250px 350px; background-repeat: no-repeat; border-radius: 16px; - box-shadow: 0 0 0px 1px #444, 0 0 4px #000; + box-shadow: 0 0 0 1px #444, var(--box-shadow); } .card.event.event_0 { background-color: #b73c26 } |