diff options
Diffstat (limited to 'play.css')
| -rw-r--r-- | play.css | 98 |
1 files changed, 77 insertions, 21 deletions
@@ -136,8 +136,8 @@ body.Lancaster #plan_actions .york { display: none } .attacker .def .asset, .defender .att .moved_fought, .attacker .def .moved_fought, -.defender .att .feed_x2, -.attacker .def .feed_x2 +.defender .att .feed, +.attacker .def .feed { transform: rotate(180deg) } @@ -238,12 +238,12 @@ body.Lancaster #plan_actions .york { display: none } display: none; } -.mat .moved_fought, .mat .feed_x2 { +.mat .moved_fought, .mat .feed { position: absolute; z-index: 5; } -.mat .feed_x2 { left: 8px; top: 164px; } +.mat .feed { right: 8px; top: 135px; } .mat .moved_fought.one { right: 72px; top: 12px; } .mat .moved_fought.two { right: 66px; top: 6px; } @@ -254,7 +254,7 @@ body.shift #capabilities2 { z-index: 200; } -.mat .forces, .mat .routed, .mat .assets, .mat .card { +.mat .forces, .mat .routed, .mat .assets { position: absolute; display: flex; flex-wrap: wrap; @@ -264,7 +264,10 @@ body.shift #capabilities2 { align-items: center; gap: 4px 6px; z-index: 5; - //background-color: #f004; +} + +.mat .lord.card { + position: absolute; } .mat .forces { @@ -371,6 +374,9 @@ body.shift #capabilities2 { /* CARDS */ +.card.york { background-color: hsl(204,79%,96%); } +.card.lancaster { background-color: hsl(40,96%,91%); } + .hand { margin: 24px auto; display: flex; @@ -388,7 +394,7 @@ body.shift #capabilities2 { height: 260px; border-radius: 6px; transition: 100ms; - box-shadow: 1px 1px 4px #0008; + box-shadow: 0 0 0 1px #333, 1px 1px 4px #0008; } .card_info { @@ -403,11 +409,8 @@ body.shift #capabilities2 { filter: brightness(80%); } -.card.action.york { background-color: #e1e6e8; box-shadow: 0 0 0 1px #666a6c, 0 0 0 4px white; } -.card.action.lancaster { background-color: #e1d6c1; box-shadow: 0 0 0 1px #665c4a, 0 0 0 4px white; } - -.card.selected.york { background-color: #e1e6e8; box-shadow: 0 0 0 1px #666a6c, 0 0 0 4px yellow; } -.card.selected.lancaster { background-color: #e1d6c1; box-shadow: 0 0 0 1px #665c4a, 0 0 0 4px yellow; } +.card.action { box-shadow: 0 0 0 1px #333, 0 0 0 4px white; } +.card.selected { box-shadow: 0 0 0 1px #333, 0 0 0 4px yellow; } /* MAP */ @@ -455,11 +458,6 @@ body.shift #capabilities2 { .locale.exile { border-radius: 0 0 50% 50% } .locale.action { border-color: white; box-shadow: 0 0 4px white; } -.locale.action.laden { border-color: white; box-shadow: 0 0 0 3px indianred; background-color: #cd5c5c66 } - -.locale.supply_path { border-color: indianred; background-color: #cd5c5c66; } -.locale.supply_source { border-color: seagreen; background-color: #2e8b5766; } -.locale.supply_source.action { border-color: white; background-color: #2e8b5766; box-shadow: 0 0 0 3px seagreen; } .locale.tip { background-color: #ff08; @@ -545,8 +543,8 @@ body.shift #capabilities2 { /* IMAGES */ -.marker.turn.levy { background-image: url(images/levy.png) } -.marker.turn.campaign { background-image: url(images/campaign.png) } +.marker.levy { background-image: url(images/levy.png) } +.marker.campaign { background-image: url(images/campaign.png) } .marker.battle { background-image: url(images/battle.png) } .marker.towns.york { background-image: url(images/towns_york.png) } .marker.cities.york { background-image: url(images/cities_york.png) } @@ -557,8 +555,8 @@ body.shift #capabilities2 { .marker.fortresses.lancaster { background-image: url(images/fortresses_lancaster.png) } .marker.ip.lancaster { background-image: url(images/ip_lancaster.png) } .marker.moved_fought { background-image: url(images/moved_fought.png) } -.marker.feed_x2 { background-image: url(images/feed_x2.png) } -.marker.feed_x3 { background-image: url(images/feed_x3.png) } +.marker.feed.x2 { background-image: url(images/feed_x2.png) } +.marker.feed.x3 { background-image: url(images/feed_x3.png) } .marker.fled { background-image: url(images/fled.png) } .marker.exile { background-image: url(images/exile.png) } .marker.exile_lancaster { background-image: url(images/exile_lancaster.png) } @@ -838,3 +836,61 @@ body.shift #capabilities2 { .card.aow.c71 { background-image: url(cards.1x/aow_lancaster_35.png) } .card.aow.c72 { background-image: url(cards.1x/aow_lancaster_36.png) } .card.aow.c73 { background-image: url(cards.1x/aow_lancaster_37.png) } + +/* BACKGROUND AND BORDER COLORS */ + +.mat .background { background-color: hsl(37,28%,56%); border-color: hsl(37,28%,66%) hsl(37,28%,46%) hsl(37,28%,46%) hsl(37,28%,66%); box-shadow: 0 0 0 1px hsl(37,28%,19%), 0px 1px 4px #0008; } +.marker.battle { background-color: hsl(34,16%,49%); border-color: hsl(34,16%,59%) hsl(34,16%,39%) hsl(34,16%,39%) hsl(34,16%,59%); box-shadow: 0 0 0 1px hsl(34,16%,16%), 0px 1px 4px #0008; } +.marker.campaign { background-color: hsl(198,33%,38%); border-color: hsl(198,33%,48%) hsl(198,33%,28%) hsl(198,33%,28%) hsl(198,33%,48%); box-shadow: 0 0 0 1px hsl(198,33%,12%), 0px 1px 4px #0008; } +.marker.levy { background-color: hsl(33,35%,44%); border-color: hsl(33,35%,54%) hsl(33,35%,34%) hsl(33,35%,34%) hsl(33,35%,54%); box-shadow: 0 0 0 1px hsl(33,35%,14%), 0px 1px 4px #0008; } +.asset.cart.x1 { background-color: hsl(36,52%,70%); border-color: hsl(36,52%,80%) hsl(36,52%,60%) hsl(36,52%,60%) hsl(36,52%,80%); box-shadow: 0 0 0 1px hsl(36,52%,23%), 0px 1px 4px #0008; } +.asset.cart.x2 { background-color: hsl(34,51%,64%); border-color: hsl(34,51%,74%) hsl(34,51%,54%) hsl(34,51%,54%) hsl(34,51%,74%); box-shadow: 0 0 0 1px hsl(34,51%,21%), 0px 1px 4px #0008; } +.asset.cart.x3 { background-color: hsl(34,47%,56%); border-color: hsl(34,47%,66%) hsl(34,47%,46%) hsl(34,47%,46%) hsl(34,47%,66%); box-shadow: 0 0 0 1px hsl(34,47%,19%), 0px 1px 4px #0008; } +.asset.cart.x4 { background-color: hsl(26,32%,50%); border-color: hsl(26,32%,60%) hsl(26,32%,40%) hsl(26,32%,40%) hsl(26,32%,60%); box-shadow: 0 0 0 1px hsl(26,32%,16%), 0px 1px 4px #0008; } +.asset.coin.x1 { background-color: hsl(160,3%,83%); border-color: hsl(160,3%,93%) hsl(160,3%,73%) hsl(160,3%,73%) hsl(160,3%,93%); box-shadow: 0 0 0 1px hsl(160,3%,27%), 0px 1px 4px #0008; } +.asset.coin.x2 { background-color: hsl(120,1%,74%); border-color: hsl(120,1%,84%) hsl(120,1%,64%) hsl(120,1%,64%) hsl(120,1%,84%); box-shadow: 0 0 0 1px hsl(120,1%,24%), 0px 1px 4px #0008; } +.asset.coin.x3 { background-color: hsl(300,1%,65%); border-color: hsl(300,1%,75%) hsl(300,1%,55%) hsl(300,1%,55%) hsl(300,1%,75%); box-shadow: 0 0 0 1px hsl(300,1%,21%), 0px 1px 4px #0008; } +.asset.coin.x4 { background-color: hsl(0,0%,56%); border-color: hsl(0,0%,66%) hsl(0,0%,46%) hsl(0,0%,46%) hsl(0,0%,66%); box-shadow: 0 0 0 1px hsl(0,0%,19%), 0px 1px 4px #0008; } +.asset.prov.x1 { background-color: hsl(44,100%,79%); border-color: hsl(44,100%,89%) hsl(44,100%,69%) hsl(44,100%,69%) hsl(44,100%,89%); box-shadow: 0 0 0 1px hsl(44,100%,26%), 0px 1px 4px #0008; } +.asset.prov.x2 { background-color: hsl(42,100%,75%); border-color: hsl(42,100%,85%) hsl(42,100%,65%) hsl(42,100%,65%) hsl(42,100%,85%); box-shadow: 0 0 0 1px hsl(42,100%,25%), 0px 1px 4px #0008; } +.asset.prov.x3 { background-color: hsl(40,100%,70%); border-color: hsl(40,100%,80%) hsl(40,100%,60%) hsl(40,100%,60%) hsl(40,100%,80%); box-shadow: 0 0 0 1px hsl(40,100%,23%), 0px 1px 4px #0008; } +.asset.prov.x4 { background-color: hsl(39,82%,63%); border-color: hsl(39,82%,73%) hsl(39,82%,53%) hsl(39,82%,53%) hsl(39,82%,73%); box-shadow: 0 0 0 1px hsl(39,82%,21%), 0px 1px 4px #0008; } +.asset.ship.x1 { background-color: hsl(209,61%,74%); border-color: hsl(209,61%,84%) hsl(209,61%,64%) hsl(209,61%,64%) hsl(209,61%,84%); box-shadow: 0 0 0 1px hsl(209,61%,24%), 0px 1px 4px #0008; } +.asset.ship.x2 { background-color: hsl(205,52%,60%); border-color: hsl(205,52%,70%) hsl(205,52%,50%) hsl(205,52%,50%) hsl(205,52%,70%); box-shadow: 0 0 0 1px hsl(205,52%,20%), 0px 1px 4px #0008; } +.unit.retinue { background-color: hsl(0,0%,67%); border-color: hsl(0,0%,77%) hsl(0,0%,57%) hsl(0,0%,57%) hsl(0,0%,77%); box-shadow: 0 0 0 1px hsl(0,0%,22%), 0px 1px 4px #0008; } +.marker.cities.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); box-shadow: 0 0 0 1px hsl(0,0%,32%), 0px 1px 4px #0008; } +.marker.fortresses.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); box-shadow: 0 0 0 1px hsl(0,0%,32%), 0px 1px 4px #0008; } +.marker.ip.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); box-shadow: 0 0 0 1px hsl(0,0%,32%), 0px 1px 4px #0008; } +.marker.towns.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); box-shadow: 0 0 0 1px hsl(0,0%,32%), 0px 1px 4px #0008; } +.marker.cities.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); box-shadow: 0 0 0 1px hsl(359,85%,17%), 0px 1px 4px #0008; } +.marker.fortresses.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); box-shadow: 0 0 0 1px hsl(359,85%,17%), 0px 1px 4px #0008; } +.marker.ip.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); box-shadow: 0 0 0 1px hsl(359,85%,17%), 0px 1px 4px #0008; } +.marker.towns.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); box-shadow: 0 0 0 1px hsl(359,85%,17%), 0px 1px 4px #0008; } +.marker.depleted { background-color: hsl(204,6%,85%); border-color: hsl(204,6%,95%) hsl(204,6%,75%) hsl(204,6%,75%) hsl(204,6%,95%); box-shadow: 0 0 0 1px hsl(204,6%,28%), 0px 1px 4px #0008; } +.marker.end { background-color: hsl(33,35%,44%); border-color: hsl(33,35%,54%) hsl(33,35%,34%) hsl(33,35%,34%) hsl(33,35%,54%); box-shadow: 0 0 0 1px hsl(33,35%,14%), 0px 1px 4px #0008; } +.marker.exhausted { background-color: hsl(283,4%,31%); border-color: hsl(283,4%,41%) hsl(283,4%,21%) hsl(283,4%,21%) hsl(283,4%,41%); box-shadow: 0 0 0 1px hsl(283,4%,10%), 0px 1px 4px #0008; } +.marker.exile { background-color: hsl(86,41%,39%); border-color: hsl(86,41%,49%) hsl(86,41%,29%) hsl(86,41%,29%) hsl(86,41%,49%); box-shadow: 0 0 0 1px hsl(86,41%,13%), 0px 1px 4px #0008; } +.marker.exile.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.exile.york { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); box-shadow: 0 0 0 1px hsl(217,53%,29%), 0px 1px 4px #0008; } +.marker.feed.x2 { background-color: hsl(204,100%,37%); border-color: hsl(204,100%,47%) hsl(204,100%,27%) hsl(204,100%,27%) hsl(204,100%,47%); box-shadow: 0 0 0 1px hsl(204,100%,12%), 0px 1px 4px #0008; } +.marker.feed.x3 { background-color: hsl(200,100%,29%); border-color: hsl(200,100%,39%) hsl(200,100%,19%) hsl(200,100%,19%) hsl(200,100%,39%); box-shadow: 0 0 0 1px hsl(200,100%,9%), 0px 1px 4px #0008; } +.marker.fled { background-color: hsl(347,47%,4%); border-color: hsl(347,47%,14%) hsl(347,47%,0%) hsl(347,47%,0%) hsl(347,47%,14%); box-shadow: 0 0 0 1px hsl(347,47%,1%), 0px 1px 4px #0008; } +.marker.hits.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.hits.york { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); box-shadow: 0 0 0 1px hsl(217,53%,29%), 0px 1px 4px #0008; } +.marker.rose.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.rose.york { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); box-shadow: 0 0 0 1px hsl(217,53%,29%), 0px 1px 4px #0008; } +.marker.source { background-color: hsl(41,30%,71%); border-color: hsl(41,30%,81%) hsl(41,30%,61%) hsl(41,30%,61%) hsl(41,30%,81%); box-shadow: 0 0 0 1px hsl(41,30%,23%), 0px 1px 4px #0008; } +.marker.valour { background-color: hsl(288,29%,51%); border-color: hsl(288,29%,61%) hsl(288,29%,41%) hsl(288,29%,41%) hsl(288,29%,61%); box-shadow: 0 0 0 1px hsl(288,29%,17%), 0px 1px 4px #0008; } +.marker.victory_check { background-color: hsl(51,97%,53%); border-color: hsl(51,97%,63%) hsl(51,97%,43%) hsl(51,97%,43%) hsl(51,97%,63%); box-shadow: 0 0 0 1px hsl(51,97%,18%), 0px 1px 4px #0008; } +.marker.moved_fought { background-color: hsl(204,100%,37%); border-color: hsl(204,100%,47%) hsl(204,100%,27%) hsl(204,100%,27%) hsl(204,100%,47%); box-shadow: 0 0 0 1px hsl(204,100%,12%), 0px 1px 4px #0008; } +.marker.number.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.number.york { background-color: hsl(0,0%,100%); border-color: hsl(0,0%,100%) hsl(0,0%,90%) hsl(0,0%,90%) hsl(0,0%,100%); box-shadow: 0 0 0 1px hsl(0,0%,33%), 0px 1px 4px #0008; } +.marker.seat.lancaster { background-color: hsl(358,76%,50%); border-color: hsl(358,76%,60%) hsl(358,76%,40%) hsl(358,76%,40%) hsl(358,76%,60%); box-shadow: 0 0 0 1px hsl(358,76%,17%), 0px 1px 4px #0008; } +.marker.seat.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); box-shadow: 0 0 0 1px hsl(0,0%,32%), 0px 1px 4px #0008; } +.marker.vassal { background-color: hsl(58,34%,73%); border-color: hsl(58,34%,83%) hsl(58,34%,63%) hsl(58,34%,63%) hsl(58,34%,83%); box-shadow: 0 0 0 1px hsl(58,34%,24%), 0px 1px 4px #0008; } +.marker.vassal.back { background-color: hsl(57,48%,75%); border-color: hsl(57,48%,85%) hsl(57,48%,65%) hsl(57,48%,65%) hsl(57,48%,85%); box-shadow: 0 0 0 1px hsl(57,48%,25%), 0px 1px 4px #0008; } +.marker.vassal.vassal_hastings { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); box-shadow: 0 0 0 1px hsl(217,53%,29%), 0px 1px 4px #0008; } +.marker.vassal.vassal_clifford { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.vassal.vassal_edward { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.vassal.vassal_thomas_stanley { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } +.marker.vassal.vassal_trollope { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); box-shadow: 0 0 0 1px hsl(358,83%,30%), 0px 1px 4px #0008; } |