use medallions

1 files changed, 46 insertions, 21 deletions

diff --git a/land-and-freedom.css b/land-and-freedom.css
index 5fff93b..afa3a6f 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -43,6 +43,20 @@ main {
   grid-row: 2;
 }
 
+.role_medallions {
+  grid-row: 3;
+  grid-column: 1/3;
+  padding: 3px 4px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 4px;
+}
+
+.role_info {
+  grid-row: 4;
+  grid-column: 1/3;
+}
+
 #role_Anarchist {
   background-color: rgb(93, 89, 106);
 }
@@ -646,17 +660,25 @@ main {
   z-index: 1;
 }
 
+.blank_marker.action,
 .bonus.action,
 .card.action,
 .front.action,
+.medallion.action,
 .standee.action {
   box-shadow: 0 0 0 3px white;
 }
 
+.blank_marker.action {
+  z-index: 2;
+}
+
+.blank_marker.action:hover,
 .bonus.action:hover,
 .card.action:hover,
 .card.selected,
 .front.action:hover,
+.medallion.action:hover,
 .standee.action:hover {
   box-shadow: 0 0 0 3px yellow;
 }
@@ -707,9 +729,7 @@ main {
   background-image: url("images/bonus/bonus_1_on.png");
 }
 
-.medaillon {
-  box-sizing: border-box;
-  position: absolute;
+.medallion {
   width: 47px;
   height: 47px;
   background-size: cover;
@@ -718,40 +738,45 @@ main {
   border-radius: 10px;
 }
 
-.medaillon[data-medaillon-id="0"] {
-  background-image: url("images/medaillons/medaillon_0.png");
+#medallions .medallion {
+  box-sizing: border-box;
+  position: absolute;
+}
+
+.medallion[data-medallion-id="0"] {
+  background-image: url("images/medallions/medallion_0.png");
 }
 
-.medaillon[data-medaillon-id="1"] {
-  background-image: url("images/medaillons/medaillon_1.png");
+.medallion[data-medallion-id="1"] {
+  background-image: url("images/medallions/medallion_1.png");
 }
 
-.medaillon[data-medaillon-id="2"] {
-  background-image: url("images/medaillons/medaillon_2.png");
+.medallion[data-medallion-id="2"] {
+  background-image: url("images/medallions/medallion_2.png");
 }
 
-.medaillon[data-medaillon-id="3"] {
-  background-image: url("images/medaillons/medaillon_3.png");
+.medallion[data-medallion-id="3"] {
+  background-image: url("images/medallions/medallion_3.png");
 }
 
-.medaillon[data-medaillon-id="4"] {
-  background-image: url("images/medaillons/medaillon_4.png");
+.medallion[data-medallion-id="4"] {
+  background-image: url("images/medallions/medallion_4.png");
 }
 
-.medaillon[data-medaillon-id="5"] {
-  background-image: url("images/medaillons/medaillon_5.png");
+.medallion[data-medallion-id="5"] {
+  background-image: url("images/medallions/medallion_5.png");
 }
 
-.medaillon[data-medaillon-id="6"] {
-  background-image: url("images/medaillons/medaillon_6.png");
+.medallion[data-medallion-id="6"] {
+  background-image: url("images/medallions/medallion_6.png");
 }
 
-.medaillon[data-medaillon-id="7"] {
-  background-image: url("images/medaillons/medaillon_7.png");
+.medallion[data-medallion-id="7"] {
+  background-image: url("images/medallions/medallion_7.png");
 }
 
-.medaillon[data-medaillon-id="8"] {
-  background-image: url("images/medaillons/medaillon_8.png");
+.medallion[data-medallion-id="8"] {
+  background-image: url("images/medallions/medallion_8.png");
 }
 
 #log {