@everymatrix/casino-game-thumbnail 0.0.258 → 0.0.261

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-thumbnail",
-  "version": "0.0.258",
+  "version": "0.0.261",
   "main": "dist/casino-game-thumbnail.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "29d9cee256c6fbdf17d95ed82bc3ebcc62241704"
+  "gitHead": "a93c0ae8104c039af7d54949a0889c11bca83acb"
 }

package/src/CasinoGameThumbnail.svelte

@@ -662,13 +662,6 @@
 
 
 <style lang="scss">
-  //This function does a multiplication
-  // in order to work with px the
-  // same way as working with em
-  @function ttp($value) {
-    $multiplicator: 16px;
-    @return $value * $multiplicator;
-  }
 
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -721,19 +714,19 @@
 
         &Name {
           color: white;
-          margin-bottom: ttp(.6);
+          margin-bottom: 10px;
           text-align: center;
-          font-size: ttp(1.1);
+          font-size: 18px;
         }
 
         &Btn {
           appearance: none;
-          padding: ttp(.4);
+          padding: 6px;
           background: var(--emfe-w-color-primary, #D0046C);
           color: var(--emfe-w-color-primary-50, #FBECF4);
-          font-size: ttp(1);
+          font-size: 16px;
           border: 2px solid var(--emfe-w-color-primary-600, #99034F);
-          border-radius: ttp(.3);
+          border-radius: 5px;
           cursor: pointer;
           transition: border 150ms ease-in-out;
 
@@ -746,10 +739,10 @@
       .GameInfoVendor {
         display: block;
         position: absolute;
-        bottom: ttp(.5);
-        right: ttp(.5);
+        bottom: 8px;
+        right: 8px;
         color: white;
-        font-size: ttp(.9);
+        font-size: 14px;
         font-weight: normal;
       }
     }
@@ -771,17 +764,17 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      top: ttp(.5);
-      left: ttp(.5);
+      top: 8px;
+      left: 8px;
       z-index: 0;
       &Label {
-        font-size: ttp(.7);
-        padding: ttp(.2);
+        font-size: 11px;
+        padding: 3px;
         background-color: var(--emfe-w-color-primary, #D0046C);
         color: var(--emfe-w-color-primary-50, #FBECF4);
         font-weight: bold;
         text-transform: uppercase;
-        border-radius: ttp(.3);
+        border-radius: 5px;
       }
     }
   }
@@ -852,7 +845,7 @@
         bottom: 0;
         left: 0;
       }
-    
+
     &.GameInnerContainerUnavailable {
       &::after {
         content: '';
@@ -880,7 +873,7 @@
       color: var(--emfe-w-color-white, #FFFFFF);
       fill: var(--emfe-w-color-white, #FFFFFF);
       opacity: 1;
-      border-radius: ttp(.25);
+      border-radius: 4px;
     }
 
     .ListGame.GameContainerFullyDimmed:before {
@@ -898,22 +891,22 @@
       color: var(--emfe-w-color-white, #FFFFFF);
       fill: var(--emfe-w-color-white, #FFFFFF);
       opacity: 1;
-      border-radius: ttp(.25);
+      border-radius: 4px;
     }
 
     .LiveProps {
       display: flex;
       flex-direction: column;
       position: absolute;
-      bottom: ttp(.5);
-      left: ttp(-.5);
+      bottom: 8px;
+      left: -8px;
       right: 0;
       width: 100%;
       padding: 0;
       background: linear-gradient(to top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.99) 100%);
       color: var(--emfe-w-color-white, #FFFFFF);
       opacity: 1;
-      font-size: ttp(.875);
+      font-size: 14px;
     }
 
     .ListGame:hover .LiveProps,
@@ -924,27 +917,27 @@
     // Pulsating animations
     @keyframes red-pulse {
       0% {
-        box-shadow: 0 0 ttp(.125) 0 rgba(red, 0.75);
+        box-shadow: 0 0 2px 0 rgba(red, 0.75);
       }
 
       15% {
-        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(red, 0.75);
+        box-shadow: 0 0 10px 2px rgba(red, 0.75);
       }
 
       30% {
-        box-shadow: 0 0 ttp(.125) 0 rgba(red, 0.75);
+        box-shadow: 0 0 2px 0 rgba(red, 0.75);
       }
 
       50% {
-        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(red, 0.75);
+        box-shadow: 0 0 10px 2px rgba(red, 0.75);
       }
 
       65% {
-        box-shadow: 0 0 ttp(.125) 0 rgba(red, 0.75);
+        box-shadow: 0 0 2px 0 rgba(red, 0.75);
       }
 
       80% {
-        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(red, 0.75);
+        box-shadow: 0 0 10px 2px rgba(red, 0.75);
       }
 
       100% {
@@ -954,27 +947,27 @@
 
     @keyframes green-pulse {
       0% {
-        box-shadow: 0 0 ttp(.125) 0 rgba(#56A80A, 0.75);
+        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
       }
 
       15% {
-        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(#56A80A, 0.75);
+        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
       }
 
       30% {
-        box-shadow: 0 0 ttp(.125) 0 rgba(#56A80A, 0.75);
+        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
       }
 
       50% {
-        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(#56A80A, 0.75);
+        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
       }
 
       65% {
-        box-shadow: 0 0 ttp(.125) 0 rgba(#56A80A, 0.75);
+        box-shadow: 0 0 2px 0 rgba(#56A80A, 0.75);
       }
 
       80% {
-        box-shadow: 0 0 ttp(.625) ttp(.125) rgba(#56A80A, 0.75);
+        box-shadow: 0 0 10px 2px rgba(#56A80A, 0.75);
       }
 
       100% {
@@ -1097,14 +1090,14 @@
     .LiveIcons {
       position: relative;
       display: flex;
-      padding: 0 ttp(1);
+      padding: 0 16px;
       // flex-wrap: wrap;
       box-sizing: border-box;
       flex-direction: row;
       align-items: center;
       justify-content: flex-start;
       min-height: auto;
-      margin-bottom: ttp(.3125);
+      margin-bottom: 5px;
       @media (min-width: 1100px) {
         min-height: auto;
       }
@@ -1119,22 +1112,22 @@
 
       &.Black, &.Red, &.Green {
         color: var(--emfe-w-color-white, #FFFFFF);
-        border: ttp(.0625) solid var(--emfe-w-color-white, #FFFFFF);
+        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
       }
 
       .LatestResult {
-        min-width: ttp(.75);
-        padding: ttp(.1);
-        margin: 0 ttp(.0625);
-        margin-right: ttp(.4);
-        font-size: ttp(.875);
+        min-width: 12px;
+        padding: 2px;
+        margin: 0 1px;
+        margin-right: 6px;
+        font-size: 14px;
         text-align: center;
         @media (min-width: 1100px) {
-          min-width: ttp(.75);
-          font-size: ttp(.875);
-          margin: 0 ttp(.125);
-          margin-right: ttp(.3);
-          padding: ttp(.1);
+          min-width: 12px;
+          font-size: 14px;
+          margin: 0 2px;
+          margin-right: 5px;
+          padding: 2px;
         }
 
         &.FirstElementAnimated {
@@ -1145,10 +1138,10 @@
         }
 
         &.First {
-          min-width: ttp(1.5);
+          min-width: 24px;
           &.Black, &.Red, &.Green {
             color: var(--emfe-w-color-white, #FFFFFF);
-            border: ttp(.0625) solid var(--emfe-w-color-white, #FFFFFF);
+            border: 1px solid var(--emfe-w-color-white, #FFFFFF);
           }
           &.Black {
             background: var(--emfe-w-color-black, #000000)
@@ -1159,9 +1152,9 @@
           &.Green {
             background: #56A80A;
           }
-          padding: ttp(.25);
+          padding: 4px;
           @media (min-width: 1100px) {
-            padding: ttp(.25);
+            padding: 4px;
           }
         }
       }
@@ -1172,7 +1165,7 @@
 
         .LatestResult {
           &:first-child {
-            margin-bottom: ttp(.625);
+            margin-bottom: 10px;
           }
         }
 
@@ -1249,16 +1242,16 @@
     }
     .OpenSeat, .ClosedSeat {
       display: inline-block;
-      width: ttp(1);
-      height: ttp(1);
-      margin-right: ttp(.25);
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
       @media (min-width: 768px) {
-        width: ttp(1);
-        height: ttp(1);
+        width: 16px;
+        height: 16px;
       }
       @media (min-width: 1100px) {
-        width: ttp(1);
-        height: ttp(1);
+        width: 16px;
+        height: 16px;
       }
       svg {
         width: 100%;
@@ -1288,10 +1281,10 @@
     display: flex;
     position: relative;
     z-index: 10;
-    height: ttp(1.25);
-    padding: ttp(.0625) ttp(.25) ttp(.0625) 0;
+    height: 20px;
+    padding: 1px 4px 1px 0;
     align-items: center;
-    border-radius: ttp(.1875);
+    border-radius: 3px;
     font-size: 12px;
     white-space: normal;
     text-transform: uppercase;
@@ -1307,7 +1300,7 @@
       fill: var(--emfe-w-color-white, #FFFFFF);
     }
     &.ClosedSeat {
-      margin-right: ttp(-.1875);
+      margin-right: -3px;
     }
   }
   .PlayersDisplay {
@@ -1315,16 +1308,16 @@
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    padding: ttp(.125) ttp(.625);
+    padding: 2px 10px;
     background: linear-gradient(to bottom, rgba(33, 33, 33, .9) 0%, rgba(33, 33, 33, .1) 100%);
     color: var(--emfe-w-color-white, #FFFFFF);
     @media (min-width: 1100px) {
-      padding: ttp(.125) ttp(1);
+      padding: 2px 16px;
     }
     .PlayersIcon {
-      width: ttp(.875);
-      height: ttp(.875);
-      margin-right: ttp(.25);
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
       //@media (min-width: 1100px) {
       //  width: 1.7rem;
       //  height: 1.7rem;
@@ -1339,14 +1332,14 @@
   .ClosedGame {
     opacity: 1;
     z-index: 10;
-    padding: ttp(.5) ttp(.625);
+    padding: 8px 10px;
     color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: ttp(1.125);
+    font-size: 18px;
     @media (min-width: 1100px) {
-      padding: ttp(.5) ttp(1);
+      padding: 8px 16px;
     }
     span {
-      font-size: ttp(1.125);
+      font-size: 18px;
     }
   }
   .LiveLimits {
@@ -1354,22 +1347,22 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: ttp(.125) ttp(1.25) ttp(.3125) ttp(1.25);
+    padding: 2px 20px 5px 20px;
     background: var(--emfe-w-color-black, #000000);
     color: var(--emfe-w-color-white, #FFFFFF);
     font-weight: normal;
-    font-size: ttp(.75);
+    font-size: 12px;
     @media (min-width: 1100px) {
-      padding: ttp(.125) ttp(1.25) ttp(.3125) ttp(1.25);
+      padding: 2px 18px 5px 18px;
     }
     span {
-      font-size: ttp(.75);
+      font-size: 12px;
     }
   }
   .Players {
     display: inline-block;
-    width: ttp(1.1875);
-    height: ttp(1.1875);
+    width: 19px;
+    height: 19px;
   }
 }
 </style>