@everymatrix/casino-game-thumbnail 1.36.0 → 1.37.0

package/src/CasinoGameThumbnail.svelte

@@ -1,5 +1,4 @@
 <svelte:options tag={null} />
-
 <script lang="ts">
   import moment from 'moment';
   import { onMount, tick } from "svelte";
@@ -202,9 +201,7 @@
 
   };
 
-
   const toggleFavoriteGame = (id:any):void => {
-
     if (gamefavorite) {
       window.postMessage({ type: `SetUnfavoredGame${categoryid}`, id }, window.location.href);
     } else {
@@ -233,6 +230,7 @@
   const getLiveLobbyURL = (vendorName, id):string => {
     return `${endpoint}/v1/encoder/lobby/updates/${vendorName}/${id}`;
   }
+
   const connectGameToLiveLobby = ():void => {
     if (livelobbyendpoint && EventSource && !liveLobbyConnection) {
       if (gamevendor && gameid) {
@@ -241,6 +239,7 @@
       }
     }
   }
+
   const disconnectGameFromLiveLobby = () => {
     if (liveLobbyConnection) {
       liveLobbyConnection.close();
@@ -327,7 +326,7 @@
       }
     }
   }
-  //Revert manually, commented changes are the current ones, will undo after deploy
+  // Revert manually, commented changes are the current ones, will undo after deploy
   const setLiveLobbyData = ():void => {
     let url:any = new URL(`${livelobbyendpoint.split('?')[0]}`);
     url.searchParams.append("platform", getDevice(userAgent));
@@ -390,7 +389,7 @@
     }
     if (numberofplayers) {
       rightSideContent = `
-        <svg fill="var(--emfe-w-color-white, #FFFFFF);" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
+        <svg fill="var(--emw--casino-thumbnail-animation-color, #FFFFFF);" width="13" height="13" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 8.2a4.6 4.6 0 0 0 5 0c2.7.8 4 2.6 4 4.8H0c0-2.2 1.3-4 4-4.8zM6.6 8c2 0 3.8-1.7 3.8-4 0-2.1-1.7-4-3.8-4a3.9 3.9 0 0 0-3.8 4c0 2.2 1.7 4 3.8 4z"/></svg>
         <span class="NrOfPlayers">${numberofplayers}</span>`;
     }
     if (!rightSideContent && !leftSideContent) {
@@ -455,6 +454,7 @@
       }, 2000);
     }
   }
+
   const updateComponent = () => {
     if (livegamedata) {
       isopen = livegamedata.isOpen;
@@ -508,6 +508,7 @@
       }
     }
   }
+
   const toggleConnect = ():void => {
     if (connectlive === 'disconnect') {
       disconnectGameFromLiveLobby();
@@ -515,6 +516,7 @@
       connectGameToLiveLobby();
     }
   }
+
   const toggleVisibilityConnect = ():void => {
     if (visibilityconnect === 'disconnect') {
       disconnectGameFromLiveLobby();
@@ -571,19 +573,28 @@
 
 <div class={`GameContainer ${extraclassname} ${(casinogamesgridslider == 'true') ? 'CasinoGamesGridSlider' : '' }`} class:WithGameName={showgamename} bind:this={customStylingContainer} >
   <div class="GameInnerContainer { (livegamedata && !isopen && openhours.value) || (livegamedata && istablefull) ? 'GameInnerContainerUnavailable' : ''}">
-    <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${loaded ? 'Loaded' : ''}`} alt="" bind:this={image} loading="lazy" />
+    <img src={gamethumbnail} class={`GameBg GameBg-${gamecellsize} ${loaded ? 'Loaded' : ''}`} alt="Game thumbnail" bind:this={image} loading="lazy" />
     <div class="GameInfoWrapper">
       <div class="GameInfo">
-        <p class="GameInfoName" title="{gamename}">{gamename}</p>
         {#if lang}
-          <button class="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">{$_('playNow')}</button>
+          <button class="GameInfoBtn" on:click="{() => toggleGameFrame(gameid)}">
+            {#if !isMobile(userAgent)}
+              <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
+                <g id="Group_5260" data-name="Group 5260" transform="translate(-26 -13)">
+                  <g id="Ellipse_664_copy" data-name="Ellipse 664 copy" transform="translate(26 13)" fill="rgba(249,165,2,0)">
+                    <path d="M 14 27 C 10.52756977081299 27 7.26298999786377 25.64776039123535 4.807610034942627 23.19239044189453 C 2.352240085601807 20.73700904846191 1 17.4724292755127 1 14 C 1 10.52756977081299 2.352240085601807 7.26298999786377 4.807610034942627 4.807610034942627 C 7.26298999786377 2.352240085601807 10.52756977081299 1 14 1 C 17.4724292755127 1 20.73700904846191 2.352240085601807 23.19239044189453 4.807610034942627 C 25.64776039123535 7.26298999786377 27 10.52756977081299 27 14 C 27 17.4724292755127 25.64776039123535 20.73700904846191 23.19239044189453 23.19239044189453 C 20.73700904846191 25.64776039123535 17.4724292755127 27 14 27 Z" stroke="none"/>
+                    <path d="M 14 2 C 10.79467964172363 2 7.781219482421875 3.248220443725586 5.514720916748047 5.514720916748047 C 3.248220443725586 7.781219482421875 2 10.79467964172363 2 14 C 2 17.2053108215332 3.248220443725586 20.21878051757812 5.514720916748047 22.48527908325195 C 7.781219482421875 24.75177955627441 10.79467964172363 26 14 26 C 17.2053108215332 26 20.21878051757812 24.75177955627441 22.48527908325195 22.48527908325195 C 24.75177955627441 20.21878051757812 26 17.2053108215332 26 14 C 26 10.79467964172363 24.75177955627441 7.781219482421875 22.48527908325195 5.514720916748047 C 20.21878051757812 3.248220443725586 17.2053108215332 2 14 2 M 14 0 C 21.73197937011719 0 28 6.268009185791016 28 14 C 28 21.73197937011719 21.73197937011719 28 14 28 C 6.268009185791016 28 0 21.73197937011719 0 14 C 0 6.268009185791016 6.268009185791016 0 14 0 Z" stroke="none" fill="#fff"/>
+                  </g>
+                  <path id="Rounded_Rectangle_683" data-name="Rounded Rectangle 683" d="M1139,917.587V906.4a1.4,1.4,0,0,1,1.976,0l4.61,4.608a1.4,1.4,0,0,1,0,1.975l-4.61,4.607A1.4,1.4,0,0,1,1139,917.587Z" transform="translate(-1102 -885)" fill="#fff"/>
+                </g>
+              </svg>
+            {/if}
+            <span>{$_('playNow')}</span>
+          </button>
         {/if}
       </div>
-      <span class="GameInfoVendor">
-        { gamevendor ? gamevendor : '-'}
-      </span>
     </div>
-  <div class="GameExtraInfoContainer">
+    <div class="GameExtraInfoContainer">
       <div class="GameExtraInfo">
         {#if gameisnew}
           <span class="GameExtraInfoLabel NewGameTag">{$_('new')}</span>
@@ -647,29 +658,27 @@
           {/if}
         {/if}
       </div>
-      {#if !isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
-        <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-          <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
-            <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
-          </svg>
+      {#if !isMobile(userAgent)}
+        <div class="GameTopContainer">
+          <span class="GameInfoVendor" style="background-image: url({gamevendor})"></span>
+          {#if gamefavorite && isLoggedIn && favorites}
+            <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+              <svg xmlns="http://www.w3.org/2000/svg" class="FavoredIcon" width="34" height="34" viewBox="0 0 34 34">
+                <path id="Subtraction_4" data-name="Subtraction 4" d="M1911-7475a16.89,16.89,0,0,1-12.021-4.979A16.889,16.889,0,0,1,1894-7492a16.889,16.889,0,0,1,4.979-12.021A16.889,16.889,0,0,1,1911-7509a16.889,16.889,0,0,1,12.021,4.979A16.888,16.888,0,0,1,1928-7492a16.889,16.889,0,0,1-4.979,12.021A16.89,16.89,0,0,1,1911-7475Zm.009-9.883h0l5.7,3.008a.909.909,0,0,0,.405.087.779.779,0,0,0,.492-.173.892.892,0,0,0,.347-.811l-1.1-6.335,4.6-4.483a.8.8,0,0,0,.2-.869.768.768,0,0,0-.665-.579l-6.364-.925-2.864-5.786a.836.836,0,0,0-.752-.463.832.832,0,0,0-.752.463l-2.864,5.786-6.366.925a.887.887,0,0,0-.693.579.873.873,0,0,0,.2.869l4.63,4.483-1.1,6.335a.8.8,0,0,0,.349.811.765.765,0,0,0,.476.161.944.944,0,0,0,.419-.1l5.7-2.979Zm-5.672,1.678v0l1.072-6.306-4.572-4.483,6.336-.925,2.836-5.757,2.834,5.757,6.336.925-4.57,4.483,1.07,6.305-5.67-2.977-5.671,2.979Z" transform="translate(-1893.999 7509)" fill="#fff"/>
+              </svg>
+            </div>
+          {:else if !gamefavorite && isLoggedIn}
+            <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
+              <svg xmlns="http://www.w3.org/2000/svg" class="UnfavoredIcon" width="34" height="34" viewBox="0 0 34 34">
+                <path id="Subtraction_3" data-name="Subtraction 3" d="M1911-7475a16.89,16.89,0,0,1-12.021-4.979A16.889,16.889,0,0,1,1894-7492a16.889,16.889,0,0,1,4.979-12.021A16.889,16.889,0,0,1,1911-7509a16.889,16.889,0,0,1,12.021,4.979A16.888,16.888,0,0,1,1928-7492a16.889,16.889,0,0,1-4.979,12.021A16.89,16.89,0,0,1,1911-7475Zm.009-9.883h0l5.7,3.008a.909.909,0,0,0,.405.087.779.779,0,0,0,.492-.173.892.892,0,0,0,.347-.811l-1.1-6.335,4.6-4.483a.8.8,0,0,0,.2-.869.768.768,0,0,0-.665-.579l-6.364-.925-2.864-5.786a.836.836,0,0,0-.752-.463.832.832,0,0,0-.752.463l-2.864,5.786-6.366.925a.887.887,0,0,0-.693.579.873.873,0,0,0,.2.869l4.63,4.483-1.1,6.335a.8.8,0,0,0,.349.811.765.765,0,0,0,.476.161.944.944,0,0,0,.419-.1l5.7-2.979Zm-5.672,1.678v0l1.072-6.306-4.572-4.483,6.336-.925,2.836-5.757,2.834,5.757,6.336.925-4.57,4.483,1.07,6.305-5.67-2.977-5.671,2.979Z" transform="translate(-1893.999 7509)" opacity="0.6"/>
+              </svg>
+            </div>
+          {/if}
         </div>
-      {:else if !isMobile(userAgent) && !gamefavorite && isLoggedIn}
-          <div class="FavIconContainer" on:click="{() => toggleFavoriteGame(gameid)}">
-            <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
-            viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
-            c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
-            c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
-            c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
-            c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
-            l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
-            l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
-            c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
-            l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
-          </div>
-      {:else if isMobile(userAgent) && gamefavorite && isLoggedIn && favorites}
+      {:else if gamefavorite && isLoggedIn && favorites}
         <div class="FavIconContainer">
           <svg version="1.1" class="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
-            <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
+            <path style="fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>
           </svg>
         </div>
       {/if}
@@ -681,9 +690,6 @@
 </div>
 
 <style lang="scss">
-
-
-
   *, *::before, *::after {
     margin: 0;
     padding: 0;
@@ -696,14 +702,14 @@
     position: relative;
   }
   .GameContainer.WithGameName {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
   .GameInnerContainer {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    border-radius: 5px;
+    border-radius: var(--emw--border-radius-medium, 10px);
     .GameBg {
       width: 100%;
       height: 100%;
@@ -714,6 +720,11 @@
       &.GameBg-2x2 { object-fit: cover; }
     }
 
+    .GameTopContainer {
+      display: flex;
+      gap: 10px;
+    }
+
     .GameInfoWrapper {
       display: none;
       position: absolute;
@@ -723,7 +734,16 @@
       right: 0;
       bottom: 0;
       left: 0;
-      background: rgba(0, 0, 0, .65);
+      background-image: linear-gradient(
+                                        to top,
+                                        var(--emw--casino-thumbnail-color-contrast, #000000),
+                                        hsla(
+                                          var(--emw--casino-thumbnail-color-h, 120),
+                                          var(--emw--casino-thumbnail-color-s, 100%),
+                                          var(--emw--casino-thumbnail-color-l, 50%),
+                                          0.7
+                                        )
+                                      );
       z-index: 15;
       padding: 8px 25px;
 
@@ -735,9 +755,9 @@
         align-items: center;
         justify-content: space-evenly;
         &Name {
-          color: white;
+          color: var(--emw--color-typography, #FFFFFF);
           text-align: center;
-          font-size: 14px;
+          font-size: var(--emw--font-size-small, 14px);
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
@@ -747,32 +767,23 @@
 
         &Btn {
           appearance: none;
-          padding: 6px;
-          background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-          color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-          font-size: 16px;
-          border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-          border-radius: 5px;
+          padding: 10px;
+          background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, var(--emw--casino-thumbnail-color-contrast, #000000) 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, var(--emw--casino-thumbnail-animation-color, #FFFFFF) 30%));
+          color: var(--emw--button-typography, #FFFFFF);
+          font-size: var(--emw--font-size-small, 14px);
+          border: 2px solid var(--emw--button-border-color, #073B17);
+          border-radius: var(--emw--border-radius-large, 20px);
           cursor: pointer;
           transition: border 150ms ease-in-out;
 
           &:hover {
-            border: 2px solid var(--emfe-w-color-primary-100, #F1BED9);
+            border: 2px solid var(--emw--button-border-highlight-color, #F1BED9);
           }
         }
       }
-
-      .GameInfoVendor {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        color: white;
-        font-size: 12px;
-        font-weight: normal;
-      }
     }
 
-    .GameExtraInfoContainer{
+    .GameExtraInfoContainer {
       position: absolute;
       top: 0;
       left: 0;
@@ -782,7 +793,7 @@
       align-items: center;
       width: 100%;
       height: auto;
-      padding: 4px;
+      padding: 0 4px 4px 4px;
     }
 
     .GameExtraInfo {
@@ -791,22 +802,22 @@
       align-items: center;
       width: 100%;
       height: 100%;
-      z-index: 0;
+      z-index: 15;
       &Label {
-        font-size: 11px;
-        padding: 3px;
-        background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-        color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
-        font-weight: bold;
+        font-size: var(--emw--font-size-2x-small, 10px);
+        padding: 5px;
+        background-color: transparent;
+        color: var(--emw--button-typography, #FFFFFF);
         text-transform: uppercase;
-        border-radius: 5px;
+        border-radius: var(--emw--border-radius-medium, 10px);
+        border: 1px solid var(--emw--button-typography, #FFFFFF);
       }
     }
 
     &:hover, &:active {
       cursor: pointer;
 
-      .GameInfoWrapper{
+      .GameInfoWrapper {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -815,29 +826,41 @@
       .GameBg {
         filter: blur(5px) grayscale(1);
       }
+    }
 
-      .UnfavoredIcon{
-        display: flex;
-      }
+    .GameInfoWrapper .GameInfoBtn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
   }
+  .GameInfoVendor {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    color: var(--emw--color-typography, #FFFFFF);
+    font-size: var(--emw--font-size-x-small, 12px);
+    font-weight: var(--emw--font-weight-normal, 400);
+    width: 40px;
+    height: 40px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: 15;
+  }
 
   .GameNameBelow {
-    color: var(--emfe-w-color-white, #FFFFFF);
+    color: var(--emw--casino-typography, #FFFFFF);
     position: relative;
-    bottom: -5px;
-    text-align: center;
+    padding: 5px 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .FavoredIcon, .UnfavoredIcon {
-    width: 20px;
-    height: 20px;
-  }
-  .UnfavoredIcon{
-    display: none;
+    width: 24px;
+    height: 24px;
   }
+
   .FavIconContainer {
     display: flex;
     justify-content: center;
@@ -852,15 +875,15 @@
       z-index: 4;
     }
   }
-  // dim the game that doesn't have open seats or table is full
+  // Dim the game that doesn't have open seats or table is full
   .ListGame:hover, .ListGame:active {
     .OpenSeat, .ClosedSeat, .LiveLimits, .LatestResult, .FullTable {
       opacity: .2;
     }
   }
-  // fix for displaying live game thumbnails that don't have details without backdrop
+  // Fix for displaying live game thumbnails that don't have details without backdrop
   .ListGame.GameBackdrop {
-    .GameInnerContainer  {
+    .GameInnerContainer {
       &::after {
         content: '';
         position: absolute;
@@ -868,7 +891,7 @@
         right: 0;
         bottom: 0;
         left: 0;
-        background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
+        background-image: linear-gradient(to top, var(--emw--casino-thumbnail-animation-color-contrast, #000000), rgba(0, 191, 114, 0.7));
       }
     }
   }
@@ -884,13 +907,13 @@
       z-index: 10;
     }
     &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
 
     &.GameInnerContainerUnavailable {
       &::after {
@@ -916,10 +939,10 @@
       left: 0;
       z-index: 5;
       background: rgba(0,0,0, .4);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      fill: var(--emfe-w-color-white, #FFFFFF);
+      color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
       opacity: 1;
-      border-radius: 4px;
+      border-radius: var(--emw--border-radius-small, 5px);
     }
 
     .ListGame.GameContainerFullyDimmed:before {
@@ -934,10 +957,10 @@
       left: 0;
       z-index: 5;
       background: rgba(0,0,0, .8);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      fill: var(--emfe-w-color-white, #FFFFFF);
+      color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
       opacity: 1;
-      border-radius: 4px;
+      border-radius: var(--emw--border-radius-small, 5px);
     }
 
     .LiveProps {
@@ -950,16 +973,16 @@
       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);
+      color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
       opacity: 1;
-      font-size: 14px;
+      font-size: var(--emw--font-size-small, 14px);
     }
 
     .ListGame:hover .LiveProps,
     .ListGameLink:hover .LiveProps {
       opacity: 0;
     }
-    //--------------------------------------LIVE LOBBY ANIMATIONS------------------------------------------
+    //-------------------------------------- LIVE LOBBY ANIMATIONS ------------------------------------------
     // Pulsating animations
     @keyframes red-pulse {
       0% {
@@ -1110,17 +1133,6 @@
       }
     }
 
-    // .Page-LiveCasino .GamesListContainer,
-    // .Page-LiveCasino-Child .GamesListContainer,
-    // .Page-LiveCasino .OperatorSticky .GamesListContainer,
-    // .Page-LiveCasino .CasinoGames .GamesListContainer,
-    // .Page-Live-casinoSource .GamesListContainer,
-    // .Page-Live-casinoSource .GamesListContainer,
-    // .Page-Live-casinoSource .OperatorSticky .GamesListContainer,
-    // .Page-Live-casinoSource .CasinoGames .GamesListContainer {
-    //   overflow: visible;
-    // }
-
     .ListGame.PulsatingGreenShadow, .ListGame.PulsatingRedShadow {
       overflow: auto;
     }
@@ -1137,7 +1149,6 @@
       position: relative;
       display: flex;
       padding: 0 16px;
-      // flex-wrap: wrap;
       box-sizing: border-box;
       flex-direction: row;
       align-items: center;
@@ -1157,8 +1168,8 @@
       }
 
       &.Black, &.Red, &.Green {
-        color: var(--emfe-w-color-white, #FFFFFF);
-        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+        color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+        border: 1px solid var(--emw--casino-thumbnail-animation-color, #FFFFFF);
       }
 
       .LatestResult {
@@ -1166,14 +1177,11 @@
         padding: 2px;
         margin: 0 1px;
         margin-right: 6px;
-        font-size: 14px;
+        font-size: var(--emw--font-size-small, 14px);
         text-align: center;
         @media (min-width: 1100px) {
-          min-width: 12px;
-          font-size: 14px;
           margin: 0 2px;
           margin-right: 5px;
-          padding: 2px;
         }
 
         &.FirstElementAnimated {
@@ -1185,22 +1193,22 @@
 
         &.First {
           min-width: 24px;
+          padding: 4px;
+          @media (min-width: 1100px) {
+            padding: 4px;
+          }
           &.Black, &.Red, &.Green {
-            color: var(--emfe-w-color-white, #FFFFFF);
-            border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+            color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+            border: 1px solid var(--emw--casino-thumbnail-animation-color, #FFFFFF);
           }
           &.Black {
-            background: var(--emfe-w-color-black, #000000)
+            background: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
           }
           &.Red {
-            background: red;
+            background: var(--emw--casino-thumbnail-animation-color-type-e, #ff0000);
           }
           &.Green {
-            background: #56A80A;
-          }
-          padding: 4px;
-          @media (min-width: 1100px) {
-            padding: 4px;
+            background: var(--emw--casino-thumbnail-animation-color-type-c, #56A80A);
           }
         }
       }
@@ -1234,40 +1242,40 @@
       }
 
       .Black {
-        color: var(--emfe-w-color-white, #FFFFFF);
+        color: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
       }
 
       .Red {
-        color: red;
+        color: var(--emw--casino-thumbnail-animation-color-type-e, #ff0000);
       }
 
       .Green {
-        color: #56A80A;
+        color: var(--emw--casino-thumbnail-animation-color-type-c, #56A80A);
       }
     }
 
     .Blue {
-      color: #4d90a7;
+      color: var(--emw--casino-thumbnail-animation-color-type-f, #4d90a7);
     }
 
     .Red {
-      background-color: red;
+      background-color: var(--emw--casino-thumbnail-animation-color-type-e, #ff0000);
     }
 
     .Black {
-      background-color: var(--emfe-w-color-black, #000000);
+      background-color: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
     }
 
     .Green {
-      background-color: #56A80A;
+      background-color: var(--emw--casino-thumbnail-animation-color-type-c, #56A80A);
     }
 
     .White {
-      background-color: var(--emfe-w-color-white, #FFFFFF);
+      background-color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
     }
 
     .Yellow {
-      background-color: #eeca3d;
+      background-color: var(--emw--casino-thumbnail-animation-color-type-b, #eeca3d);
     }
 
     .Gold {
@@ -1283,8 +1291,8 @@
     }
 
     .Tie {
-      background-color: var(--emfe-w-color-white, #FFFFFF);
-      background-image: linear-gradient(135deg, var(--emfe-w-color-white, #FFFFFF) 25%, transparent 25%, transparent 50%, #212121 50%, var(--emfe-w-color-white, #FFFFFF) 75%, transparent 75%, var(--emfe-w-color-white, #FFFFFF));
+      background-color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+      background-image: linear-gradient(135deg, var(--emw--casino-thumbnail-animation-color, #FFFFFF) 25%, transparent 25%, transparent 50%, var(--emw--casino-thumbnail-animation-color-type-a, #212121) 50%, var(--emw--casino-thumbnail-animation-color, #FFFFFF) 75%, transparent 75%, var(--emw--casino-thumbnail-animation-color, #FFFFFF));
     }
     .OpenSeat, .ClosedSeat {
       display: inline-block;
@@ -1318,10 +1326,10 @@
   }
   .OpenSeat svg {
     fill: transparent;
-    stroke: var(--emfe-w-color-white, #FFFFFF);
+    stroke: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
   }
   .ClosedSeat svg {
-    fill: var(--emfe-w-color-white, #FFFFFF);
+    fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
   }
   .FullTable {
     display: flex;
@@ -1330,8 +1338,8 @@
     height: 20px;
     padding: 1px 4px 1px 0;
     align-items: center;
-    border-radius: 3px;
-    font-size: 12px;
+    border-radius: var(--emw--border-radius-small, 5px);
+    font-size: var(--emw--font-size-x-small, 12px);
     white-space: normal;
     text-transform: uppercase;
     -webkit-animation-name: silde-in-from-left;
@@ -1343,7 +1351,7 @@
     svg {
       width: 100%;
       height: 100%;
-      fill: var(--emfe-w-color-white, #FFFFFF);
+      fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
     }
     &.ClosedSeat {
       margin-right: -3px;
@@ -1356,7 +1364,7 @@
     align-items: center;
     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);
+    color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
     @media (min-width: 1100px) {
       padding: 2px 16px;
     }
@@ -1364,12 +1372,8 @@
       width: 14px;
       height: 14px;
       margin-right: 4px;
-      //@media (min-width: 1100px) {
-      //  width: 1.7rem;
-      //  height: 1.7rem;
-      //}
       svg {
-        fill: var(--emfe-w-color-white, #FFFFFF);
+        fill: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
         width: 100%;
         height: 100%;
       }
@@ -1379,14 +1383,14 @@
     opacity: 1;
     z-index: 10;
     padding: 8px 10px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 18px;
+    color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+    font-size: var(--emw--font-size-medium, 16px);
+    span {
+      font-size: inherit;
+    }
     @media (min-width: 1100px) {
       padding: 8px 16px;
     }
-    span {
-      font-size: 18px;
-    }
   }
   .LiveLimits {
     opacity: 1;
@@ -1394,15 +1398,15 @@
     flex-direction: row;
     justify-content: space-between;
     padding: 2px 20px 5px 20px;
-    background: var(--emfe-w-color-black, #000000);
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-weight: normal;
-    font-size: 12px;
+    background: var(--emw--casino-thumbnail-animation-color-contrast, #000000);
+    color: var(--emw--casino-thumbnail-animation-color, #FFFFFF);
+    font-weight: var(--emw--font-weight-normal, 400);
+    font-size: var(--emw--font-size-x-small, 12px);
     @media (min-width: 1100px) {
       padding: 2px 18px 5px 18px;
     }
     span {
-      font-size: 12px;
+      font-size: inherit;
     }
   }
   .Players {
@@ -1421,7 +1425,7 @@
   left: -8px;
   div {
     position: absolute;
-    border: 4px solid #fff;
+    border: 4px solid var(--emw--casino-thumbnail-animation-color, #FFFFFF);
     opacity: 1;
     border-radius: 50%;
     animation: ripple-effect 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
@@ -1468,30 +1472,46 @@
     padding: 8px 10px;
   }
 
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoName {
-    font-size: 12px;
-    margin-top: 4px;
+  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper {
+    .GameInfoName, .GameInfoBtn {
+      font-size: var(--emw--font-size-x-small, 12px);
+    }
+    .GameInfoName {
+      margin-top: 4px;
+    }
+    .GameInfoBtn {
+      padding: 6px 8px;
+    }
+    .GameInfoVendor {
+      font-size: var(--emw--font-size-2x-small, 10px);
+    }
+    .FavoredIcon, .UnfavoredIcon {
+      width: 25px;
+      height: 25px;
+    }
   }
 
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
-    font-size: 12px;
-    padding:2px;
+  .GameInfoVendor {
+    width: 45px;
+    height: 45px;
   }
 
-  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-    font-size: 8px;
-  }    
-  
-  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .FavoredIcon,
-  .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .UnfavoredIcon {
-      width: 14px;
-      height: 14px;
+  .GameInnerContainer .GameExtraInfoContainer {
+    padding-top: 5px;
   }
 
   .CasinoGamesGridSlider .GameInnerContainer .GameExtraInfoContainer .GameExtraInfoLabel {
-    font-size: 8px;
+    font-size: var(--emw--font-size-2x-small, 10px);
   }
-
 }
 
+@container (max-width: 768px) {
+  .CasinoGamesGridSlider .GameInnerContainer .GameInfoWrapper .GameInfoBtn {
+    font-size: var(--emw--font-size-x-small, 12px);
+    padding: 6px;
+  }
+  .GameInnerContainer .GameInfoWrapper {
+    padding: 8px 10px;
+  }
+}
 </style>