summaryrefslogtreecommitdiff
path: root/play.css
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-04-27 22:15:13 +0200
committerTor Andersson <tor@ccxvii.net>2023-07-07 18:39:23 +0200
commit18de9c65450661610d29f151e6ef31ab05905ac3 (patch)
tree1c029c5a21122d441e616b204a961431a6f6b319 /play.css
parent390c2cda3e78be50b20d227348cce355e599db35 (diff)
downloadtime-of-crisis-18de9c65450661610d29f151e6ef31ab05905ac3.tar.gz
UI and piece layout.
Diffstat (limited to 'play.css')
-rw-r--r--play.css168
1 files changed, 125 insertions, 43 deletions
diff --git a/play.css b/play.css
index b2f7a25..b78fbb3 100644
--- a/play.css
+++ b/play.css
@@ -3,12 +3,16 @@ main { background-color: dimgray; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_Red .role_name { background-color: salmon; }
-#role_Blue .role_name { background-color: #a0caec; }
-#role_Yellow .role_name { background-color: #ffe175; }
-#role_Green .role_name { background-color: #80b563; }
+#role_Blue .role_name { background-color: skyblue; }
+#role_Yellow .role_name { background-color: khaki; }
+#role_Green .role_name { background-color: darkseagreen; }
#turn_info { background-color: gainsboro; }
.role_vp { float: right; }
+.action {
+ cursor: pointer;
+}
+
#mapwrap {
width: 2550px;
height: 1650px;
@@ -34,23 +38,47 @@ header.your_turn { background-color: orange; }
right: 93px;
}
-#crisis_table.p2 {
+body.p2 #crisis_table {
display: block;
background-image: url(overlay_2p_75.jpg);
}
-#crisis_table.p3 {
+
+body.p3 #crisis_table {
display: block;
background-image: url(overlay_3p_75.jpg);
}
-#pieces div {
+svg {
position: absolute;
}
-#pieces .no_place_governor {
- margin-top: 6px;
- margin-left: 6px;
- border-radius: 0;
+svg .region, svg .sea {
+ fill: transparent;
+ stroke: transparent;
+ stroke-width: 3px;
+}
+
+svg .region.action {
+ fill: gold;
+ fill-opacity: 0.2;
+ stroke: yellow;
+ stroke-opacity: 0.8;
+ stroke-width: 3px;
+}
+
+svg .sea.action {
+ fill: blue;
+ fill-opacity: 0.2;
+ stroke: blue;
+ stroke-opacity: 0.8;
+ stroke-width: 3px;
+}
+
+#pieces div {
+ position: absolute;
+ transition-property: top, left, transform;
+ transition-duration: 200ms;
+ transition-timing-function: ease;
}
.dice {
@@ -83,6 +111,49 @@ header.your_turn { background-color: orange; }
.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; }
+/* MAGIC TRACKS */
+
+.governor.s1 { transform: translateX(52px) }
+.governor.s2 { transform: translateX(104px) }
+.governor.s3 { transform: translateX(156px) }
+.governor.s4 { transform: translateX(208px) }
+.governor.s5 { transform: translate(26px, 52px) }
+.governor.s6 { transform: translate(78px, 52px) }
+.governor.s7 { transform: translate(129px, 52px) }
+.governor.s8 { transform: translate(181px, 52px) }
+
+.capital {
+ width: 60px;
+ height: 60px;
+}
+
+.capital.action {
+ border: 6px solid white;
+ box-shadow: 0px 0px 8px white;
+}
+
+body.p3 #Hispania_NPG { display: block }
+body.p3 #Africa_NPG { display: block }
+body.p3 #Aegyptus_NPG { display: block }
+
+body.p2 #Britannia_NPG { display: block }
+body.p2 #Hispania_NPG { display: block }
+body.p2 #Africa_NPG { display: block }
+body.p2 #Aegyptus_NPG { display: block }
+body.p2 #Syria_NPG { display: block }
+body.p2 #Galatia_NPG { display: block }
+
+body.p3 #Hispania_Governor { display: none }
+body.p3 #Africa_Governor { display: none }
+body.p3 #Aegyptus_Governor { display: none }
+
+body.p2 #Britannia_Governor { display: none }
+body.p2 #Hispania_Governor { display: none }
+body.p2 #Africa_Governor { display: none }
+body.p2 #Aegyptus_Governor { display: none }
+body.p2 #Syria_Governor { display: none }
+body.p2 #Galatia_Governor { display: none }
+
/* COUNTERS */
.amphitheater, .basilica, .limes { background-color: #efebea; }
@@ -98,6 +169,7 @@ header.your_turn { background-color: orange; }
.rival { background-color: #b8b996; }
.militia, .legion { background-color: #ffffff; }
.neutral { background-color: #e3dedc; }
+.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; }
@@ -116,39 +188,39 @@ header.your_turn { background-color: orange; }
.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; }
-#legion_1 { background-position: 0px 0px }
-#legion_2 { background-position: -55px 0px }
-#legion_3 { background-position: -110px 0px }
-#legion_4 { background-position: -165px 0px }
-#legion_5 { background-position: -220px 0px }
-#legion_6 { background-position: -275px 0px }
-#legion_7 { background-position: -330px 0px }
-#legion_8 { background-position: -385px 0px }
-#legion_9 { background-position: -440px 0px }
-#legion_10 { background-position: 0px -55px }
-#legion_11 { background-position: -55px -55px }
-#legion_12 { background-position: -110px -55px }
-#legion_13 { background-position: -165px -55px }
-#legion_14 { background-position: -220px -55px }
-#legion_15 { background-position: -275px -55px }
-#legion_16 { background-position: -330px -55px }
-#legion_17 { background-position: -385px -55px }
-#legion_18 { background-position: -440px -55px }
-#legion_19 { background-position: 0px -110px }
-#legion_20 { background-position: -55px -110px }
-#legion_21 { background-position: -110px -110px }
-#legion_22 { background-position: -165px -110px }
-#legion_23 { background-position: -220px -110px }
-#legion_24 { background-position: -275px -110px }
-#legion_25 { background-position: -330px -110px }
-#legion_26 { background-position: -385px -110px }
-#legion_27 { background-position: -440px -110px }
-#legion_28 { background-position: 0px -165px }
-#legion_29 { background-position: -55px -165px }
-#legion_30 { background-position: -110px -165px }
-#legion_31 { background-position: -165px -165px }
-#legion_32 { background-position: -220px -165px }
-#legion_33 { background-position: -275px -165px }
+#legion_0 { background-position: 0px 0px }
+#legion_1 { background-position: -55px 0px }
+#legion_2 { background-position: -110px 0px }
+#legion_3 { background-position: -165px 0px }
+#legion_4 { background-position: -220px 0px }
+#legion_5 { background-position: -275px 0px }
+#legion_6 { background-position: -330px 0px }
+#legion_7 { background-position: -385px 0px }
+#legion_8 { background-position: -440px 0px }
+#legion_9 { background-position: 0px -55px }
+#legion_10 { background-position: -55px -55px }
+#legion_11 { background-position: -110px -55px }
+#legion_12 { background-position: -165px -55px }
+#legion_13 { background-position: -220px -55px }
+#legion_14 { background-position: -275px -55px }
+#legion_15 { background-position: -330px -55px }
+#legion_16 { background-position: -385px -55px }
+#legion_17 { background-position: -440px -55px }
+#legion_18 { background-position: 0px -110px }
+#legion_19 { background-position: -55px -110px }
+#legion_20 { background-position: -110px -110px }
+#legion_21 { background-position: -165px -110px }
+#legion_22 { background-position: -220px -110px }
+#legion_23 { background-position: -275px -110px }
+#legion_24 { background-position: -330px -110px }
+#legion_25 { background-position: -385px -110px }
+#legion_26 { background-position: -440px -110px }
+#legion_27 { background-position: 0px -165px }
+#legion_28 { background-position: -55px -165px }
+#legion_29 { background-position: -110px -165px }
+#legion_30 { background-position: -165px -165px }
+#legion_31 { background-position: -220px -165px }
+#legion_32 { background-position: -275px -165px }
.amphitheater, .basilica, .limes {
width: 92px;
@@ -165,11 +237,21 @@ header.your_turn { background-color: orange; }
width: 55px;
height: 55px;
background-size: 55px 55px;
+ background-repeat: no-repeat;
border-radius: 8px;
border-width: 2px;
border-style: solid;
}
+.no_place_governor {
+ display: none;
+ margin: 4px 0 0 4px;
+ width: 58px;
+ height: 58px;
+ background-position: center;
+ border-radius: 0;
+}
+
.governor, .legacy, .legacy_40 {
width: 50px;
height: 50px;