From b55212891e228ffa3123f1a50112f6aca03aaf1d Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 17 Dec 2022 13:03:21 +0100 Subject: Arts of War panel instead of dialog. --- play.html | 100 +++++++++++++++++++++++++++++++++----------------------------- 1 file changed, 54 insertions(+), 46 deletions(-) (limited to 'play.html') diff --git a/play.html b/play.html index a4f1dc8..18a6111 100644 --- a/play.html +++ b/play.html @@ -43,56 +43,53 @@ header.your_turn { background-color: orange; } font-variant-numeric: tabular-nums; } +/* PANELS */ + +.panel { + user-select: none; + max-width: 1275px; + margin: 36px auto; + //box-shadow: 0px 0px 4px #0008; +} + +.panel_header { + font-weight: bold; + text-align: center; + padding: 3px 1em; +} + /* ARTS OF WAR */ #arts_of_war { - background-color: white; - border: 1px solid black; - position: fixed; - top: 80px; - left: 36px; - box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - z-index: 50; - user-select: none; + background-color: slategray; } #arts_of_war_header { - font-weight: bold; - cursor: move; - border-bottom: 1px solid black; background-color: lightsteelblue; - padding: 3px 1em; } #arts_of_war_list { - padding: 12px; - width: calc(186px * 4 + 12px * 3 + 12px); - height: 400px; - background-color: slategray; + min-height: 260px; display: flex; justify-content: center; flex-wrap: wrap; - overflow-y: scroll; + padding: 18px; gap: 12px; } /* PLAN */ #plan { - user-select: none; - max-width: 1275px; - margin: 36px auto; + background-color: #555; } #plan_header { - font-weight: bold; - text-align: center; background-color: #444; color: white; - padding: 3px 1em; } #plan_list { + min-height: 260px; display: flex; flex-wrap: wrap; justify-content: center; @@ -101,6 +98,8 @@ header.your_turn { background-color: orange; } } #plan_actions { + background-color: #444; + min-height: 130px; display: flex; flex-wrap: wrap; justify-content: center; @@ -109,15 +108,6 @@ header.your_turn { background-color: orange; } flex-wrap: wrap; } -#plan_list { - background-color: #555; -} - -#plan_actions { - //border-top: 2px dotted white; - background-color: #444; -} - body.Russians #plan_actions .teutonic { display: none } body.Teutons #plan_actions .russian { display: none } @@ -493,11 +483,15 @@ body.shift .mustered_vassals { flex-wrap: wrap; justify-content: center; align-items: center; - min-height: 350px; + min-height: 260px; max-width: 1275px; gap: 16px; } +.hand:empty { + display: none; +} + .card { background-size: 186px 260px; width: 186px; @@ -518,6 +512,9 @@ body.shift .mustered_vassals { filter: grayscale(100%) brightness(66%); } +.card.selected.teutonic { background-color: #e1e6e8; box-shadow: 0 0 0 1px #666a6c, 0 0 0 3px yellow; } +.card.selected.russian { background-color: #e1d6c1; box-shadow: 0 0 0 1px #665c4a, 0 0 0 3px yellow; } + /* MAP */ #mapwrap { @@ -806,14 +803,20 @@ body.shift .mustered_vassals { position: absolute; } -.service_marker.teutonic.lord.action, +.service_marker.teutonic.lord.action { + box-shadow: 0 0 0 1px #111, 0 0 0 3px red; +} + +.service_marker.russian.lord.action { + box-shadow: 0 0 0 1px #555, 0 0 0 3px red; +} + .service_marker.teutonic.vassal.action { - box-shadow: 0 0 0 3px red; + box-shadow: 0 0 0 1px #0f0d0d, 0 0 0 3px white; } -.service_marker.russian.lord.action, .service_marker.russian.vassal.action { - box-shadow: 0 0 0 3px red; + box-shadow: 0 0 0 1px #736e5e, 0 0 0 3px white; } .service_marker.teutonic.lord.selected, @@ -1030,11 +1033,6 @@ body.shift .mustered_vassals { - -