summaryrefslogtreecommitdiff
path: root/play2.css
diff options
context:
space:
mode:
Diffstat (limited to 'play2.css')
-rw-r--r--play2.css137
1 files changed, 98 insertions, 39 deletions
diff --git a/play2.css b/play2.css
index bebfc07..bd161e6 100644
--- a/play2.css
+++ b/play2.css
@@ -19,6 +19,104 @@ main {
#map { background-image: url(images/map150.jpg); }
}
+#map > .token {
+ position: absolute;
+}
+
+.track {
+ position: absolute;
+ background-color: #fff4;
+ border: 3px solid lime;
+ width: 52px;
+ height: 54px;
+}
+
+.front {
+ position: absolute;
+ background-color: #fff4;
+ border: 6px solid lime;
+ border-radius: 34px;
+
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+
+.token {
+ background-color: #fff4;
+ border: 3px solid black;
+ width: 45px;
+ height: 45px;
+ box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
+}
+
+.token.round { width: 58px; height: 58px; }
+.token.square { width: 45px; height: 45px; }
+.token.standee { width: 44px; height: 54px; }
+.token.medallion { width: 53px; height: 53px; }
+
+.token.blank {
+ width: 45px;
+ height: 45px;
+ background-color: red;
+ border-radius: 50%;
+}
+
+.token.round, .token.blank {
+ background-color: red;
+ border-radius: 50%;
+ border-color: pink darkred darkred pink;
+}
+
+.token.round.off {
+ background-color: gray;
+ border-color: silver gray gray silver;
+}
+
+.token.standee {
+ background-color: white;
+ border-radius: 10px;
+ border-color: #ddd #888 #888 #ddd;
+}
+
+.standee_0 { background-image: url(images/tokens75/standee_0.png); }
+.standee_1 { background-image: url(images/tokens75/standee_1.png); }
+.standee_2 { background-image: url(images/tokens75/standee_2.png); }
+.standee_3 { background-image: url(images/tokens75/standee_3.png); }
+.standee_4 { background-image: url(images/tokens75/standee_4.png); }
+
+.medallion_0 { background-image: url(images/tokens75/medallion_0.png); }
+.medallion_1 { background-image: url(images/tokens75/medallion_1.png); }
+.medallion_2 { background-image: url(images/tokens75/medallion_2.png); }
+.medallion_3 { background-image: url(images/tokens75/medallion_3.png); }
+.medallion_4 { background-image: url(images/tokens75/medallion_4.png); }
+.medallion_5 { background-image: url(images/tokens75/medallion_5.png); }
+.medallion_6 { background-image: url(images/tokens75/medallion_6.png); }
+.medallion_7 { background-image: url(images/tokens75/medallion_7.png); }
+.medallion_8 { background-image: url(images/tokens75/medallion_8.png); }
+.medallion_9 { background-image: url(images/tokens75/medallion_9.png); }
+
+.bonus_morale.off { background-image: url(images/tokens75/bonus_morale_off.png); }
+.bonus_morale.on { background-image: url(images/tokens75/bonus_morale_on.png); }
+.bonus_teamwork.off { background-image: url(images/tokens75/bonus_teamwork_off.png); }
+.bonus_teamwork.on { background-image: url(images/tokens75/bonus_teamwork_on.png); }
+
+.token.medallion {
+ background-color: tan;
+ border-radius: 10px;
+ border-color: wheat brown brown wheat;
+}
+
+.medallion_container {
+ position: absolute;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ width: 70px;
+ height: 70px;
+}
+
/* PANELS */
.panel {
@@ -72,45 +170,6 @@ main {
background-image: url("images/initiative_counter_clockwise.png");
}
-.standee[data-standee-id="0"] {
- background-image: url("images/standees/standee_0.png");
-}
-
-.standee[data-standee-id="1"] {
- background-image: url("images/standees/standee_1.png");
-}
-
-.standee[data-standee-id="2"] {
- background-image: url("images/standees/standee_2.png");
-}
-
-.standee[data-standee-id="3"] {
- background-image: url("images/standees/standee_3.png");
-}
-
-.standee[data-standee-id="4"] {
- background-image: url("images/standees/standee_4.png");
-}
-
-.bonus[data-bonus-id="0"][data-bonus-on="0"] {
- background-image: url("images/bonus/bonus_0_off.png");
-}
-
-.bonus[data-bonus-id="0"][data-bonus-on="1"] {
- background-image: url("images/bonus/bonus_0_on.png");
-}
-
-.bonus[data-bonus-id="1"][data-bonus-on="0"] {
- background-image: url("images/bonus/bonus_1_off.png");
-}
-
-.bonus[data-bonus-id="1"][data-bonus-on="1"] {
- background-image: url("images/bonus/bonus_1_on.png");
-}
-
-.medallion[data-medallion-id="0"] {
- background-image: url("images/medallions/medallion_0.png");
-}
.medallion[data-medallion-id="1"] {
background-image: url("images/medallions/medallion_1.png");