ui setup bonuses and medaillons

1 files changed, 77 insertions, 1 deletions

diff --git a/land-and-freedom.css b/land-and-freedom.css
index e4c95a9..00fbfd0 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -44,6 +44,7 @@ main {
   flex-direction: column;
   align-items: center;
   padding: 4px;
+  border-radius: 20px;
 }
 
 .front .value {
@@ -55,6 +56,7 @@ main {
 .front[data-front-id=m] {
   width: 104px;
   height: 114px;
+  border-radius: 23px;
 }
 
 .card {
@@ -340,6 +342,7 @@ main {
 }
 
 .card.action:hover,
+.card.selected,
 .front.action:hover,
 .standee.action:hover {
   box-shadow: 0 0 0 3px yellow;
@@ -365,11 +368,84 @@ main {
   background-image: url("images/standees/standee_4.png");
 }
 
+.bonus {
+  box-sizing: border-box;
+  position: absolute;
+  width: 54px;
+  height: 54px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.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");
+}
+
+.medaillon {
+  box-sizing: border-box;
+  position: absolute;
+  width: 47px;
+  height: 47px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  box-shadow: 0 0 0 1px #333;
+  border-radius: 10px;
+}
+
+.medaillon[data-medaillon-id="0"] {
+  background-image: url("images/medaillons/medaillon_0.png");
+}
+
+.medaillon[data-medaillon-id="1"] {
+  background-image: url("images/medaillons/medaillon_1.png");
+}
+
+.medaillon[data-medaillon-id="2"] {
+  background-image: url("images/medaillons/medaillon_2.png");
+}
+
+.medaillon[data-medaillon-id="3"] {
+  background-image: url("images/medaillons/medaillon_3.png");
+}
+
+.medaillon[data-medaillon-id="4"] {
+  background-image: url("images/medaillons/medaillon_4.png");
+}
+
+.medaillon[data-medaillon-id="5"] {
+  background-image: url("images/medaillons/medaillon_5.png");
+}
+
+.medaillon[data-medaillon-id="6"] {
+  background-image: url("images/medaillons/medaillon_6.png");
+}
+
+.medaillon[data-medaillon-id="7"] {
+  background-image: url("images/medaillons/medaillon_7.png");
+}
+
+.medaillon[data-medaillon-id="8"] {
+  background-image: url("images/medaillons/medaillon_8.png");
+}
+
 #log {
   background-color: floralwhite;
 }
 
-#log .h1, #log .h2 {
+#log .h1,
+#log .h2 {
   font-size: 10px;
   padding-top: 2px;
   padding-bottom: 2px;