@everymatrix/casino-games-category-section 1.37.3 → 1.37.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +0 -2
  2. package/dist/casino-games-category-section.js +3 -3
  3. package/dist/casino-games-category-section.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/CasinoGamesCategorySection.svelte +185 -250
package/src/CasinoGamesCategorySection.svelte CHANGED
@@ -148,10 +148,10 @@
148
148
  let url = `${endpoint}/v1/player/${playerID}/favorites/`;
149
149
  isLoading = true;
150
150
  let options = {
151
- method: "GET",
152
- headers: {
153
- 'X-SessionID': sessionID,
154
- }
151
+ method: "GET",
152
+ headers: {
153
+ 'X-SessionID': sessionID,
154
+ }
155
155
  };
156
156
 
157
157
  return new Promise((resolve, reject) => {
@@ -171,18 +171,19 @@
171
171
  });
172
172
  window.postMessage({ type: 'UpdateFavoritesCount', favoriteGames});
173
173
  } else {
174
- favoriteGames = [];
174
+ favoriteGames = [];
175
175
  }
176
176
 
177
177
  if(categoryid === 'FAVORITES') showFavoriteSection(favoriteGames);
178
178
 
179
179
  shownCategoryData.forEach((item) => {
180
- item.isFavorite = checkFavorite(item.id);
180
+ item.isFavorite = checkFavorite(item.id);
181
181
  });
182
182
 
183
183
  let aux:any = shownCategoryData;
184
184
  shownCategoryData = undefined;
185
185
  shownCategoryData = aux;
186
+
186
187
  resolve(favoriteGames);
187
188
 
188
189
  }).catch((err:any) => {
@@ -472,11 +473,11 @@
472
473
  break;
473
474
 
474
475
  case 'UpdateFavoredList':
475
- if (categoryid === 'FAVORITES') updateFavoredList(e.data.url, e.data.sessionID);
476
+ if(categoryid === 'FAVORITES') updateFavoredList(e.data.url, e.data.sessionID)
476
477
  break;
477
478
 
478
479
  default:
479
- // Do nothing
480
+ // do nothing
480
481
  break;
481
482
  }
482
483
  }
@@ -528,10 +529,10 @@
528
529
 
529
530
  const removeFavoredGame = (url:string, sessionID:string, gameID:string) => {
530
531
  let options = {
531
- method: "DELETE",
532
- headers: {
533
- 'X-SessionID': sessionID,
534
- }
532
+ method: "DELETE",
533
+ headers: {
534
+ 'X-SessionID': sessionID,
535
+ }
535
536
  };
536
537
 
537
538
  fetch(`${url}/${gameID}`, options)
@@ -548,7 +549,7 @@
548
549
  }
549
550
  }
550
551
 
551
- // Fetch fav list and pass to be updated
552
+ //Fetch fav list and pass to be updated
552
553
  const updateFavoredList = async (url, sessionID) => {
553
554
  let options = {
554
555
  method: "GET",
@@ -718,20 +719,20 @@
718
719
  }
719
720
 
720
721
  onMount(() => {
721
- window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
722
- window.addEventListener('message', messageHandler, false);
723
-
724
-
725
- return () => {
726
- window.removeEventListener('message', messageHandler);
727
- window.removeEventListener('visibilitychange', messageHandler);
728
- }
722
+ window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
723
+ window.addEventListener('message', messageHandler, false);
724
+
725
+
726
+ return () => {
727
+ window.removeEventListener('message', messageHandler);
728
+ window.removeEventListener('visibilitychange', messageHandler);
729
+ }
729
730
  });
730
731
 
731
732
  $: lang && setActiveLanguage();
732
- // Widget is working as standalone when fetchviaevent isn't set
733
+ //Widget is working as standalone when fetchviaevent isn't set
733
734
  $: (fetchviaevent === 'false' || fetchviaevent === '') && endpoint && lang && categoryid && datasource && displayedgamecount && showallbuttongamescount && fetchGamesByCategory(categoryid, displayedgamecount, showallbuttongamescount);
734
- // Call the fav. list fetch when widget is standalone
735
+ //Call the fav. list fetch when widget is standalone
735
736
  $: favorites === 'true' && endpoint && session && userid && getFavoritesGames(session, userid);
736
737
  $: dataloaded && thumbnailContainer && setupObserver();
737
738
  $: lang && categoryid && userid && session && initialSetup();
@@ -769,6 +770,7 @@
769
770
  {/if}
770
771
  </div>
771
772
  {#if shownCategoryData}
773
+
772
774
  {#if !showItems}
773
775
  <p class="NoSearchResults NoRecentSearches NoRecentSearchesCenter {isMobile(userAgent) ? 'NoRecentSearchesMobile' : ''}">{$_('noRecentSearch')}</p>
774
776
  {/if}
@@ -785,7 +787,7 @@
785
787
  categoryid={categoryid}
786
788
  gamethumbnail={gameprops.thumbnail}
787
789
  gamename={gameprops.name}
788
- gamevendor={gameprops.vendor.logo}
790
+ gamevendor={gameprops.vendor.name}
789
791
  gameLaunchUrl={gameprops.launchUrl}
790
792
  gameisnew={gameprops.isNew}
791
793
  gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
@@ -817,18 +819,6 @@
817
819
  <div class="CasinoGamesContainer">
818
820
  {#if casinomygames !== 'true'}
819
821
  <div class="CasinoGamesHeader">
820
- <span class="CategoryIcon">
821
- <div class="CategoryIconAnimation"></div>
822
- <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 28 28">
823
- <g id="Group_5260" data-name="Group 5260" transform="translate(-26 -13)">
824
- <g id="Ellipse_664_copy" data-name="Ellipse 664 copy" transform="translate(26 13)" fill="rgba(249,165,2,0)">
825
- <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"/>
826
- <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"/>
827
- </g>
828
- <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"/>
829
- </g>
830
- </svg>
831
- </span>
832
822
  <h3 class="CategoryName" bind:this={categoryName}>
833
823
  {categoryData.name}
834
824
  </h3>
@@ -868,12 +858,12 @@
868
858
  </div>
869
859
  {/if}
870
860
  {#if isLoading && !isLazyLoading}
871
- <div class="DualRing"></div>
861
+ <div class="lds-dual-ring" part="lds-dual-ring"></div>
872
862
  {:else}
873
863
  {#if shownCategoryData.length !== 0 }
874
864
  <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} {(lobbyView && casinogamesgridslider == 'true') ? 'CasinoGamesGridSlider CustomScroll' : '' } GamesListIncreasedGap" bind:this={container}>
875
865
  {#each shownCategoryData as gameprops, index}
876
- {#if intersecting || nativeLoading}
866
+ {#if intersecting || nativeLoading}
877
867
  <casino-game-thumbnail
878
868
  session={session}
879
869
  userid={userid}
@@ -884,7 +874,7 @@
884
874
  categoryid={categoryid}
885
875
  gamethumbnail={gameprops.thumbnail}
886
876
  gamename={gameprops.name}
887
- gamevendor={gameprops.vendor.logo}
877
+ gamevendor={gameprops.vendor.name}
888
878
  gameLaunchUrl={gameprops.launchUrl}
889
879
  gameisnew={gameprops.isNew}
890
880
  gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
@@ -938,7 +928,7 @@
938
928
  {#if intersecting || nativeLoading}
939
929
  {#if isMobile(userAgent)}
940
930
  {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
941
- <casino-game-thumbnail
931
+ <casino-game-thumbnail
942
932
  class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
943
933
  part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
944
934
  session={session}
@@ -948,7 +938,7 @@
948
938
  categoryid={categoryid}
949
939
  gamethumbnail={gameprops.gameModel.thumbnail}
950
940
  gamename={gameprops.gameModel.name}
951
- gamevendor={gameprops.gameModel.vendor.logo}
941
+ gamevendor={gameprops.gameModel.vendor.name}
952
942
  gameLaunchUrl={gameprops.launchUrl}
953
943
  gameisnew={gameprops.gameModel.isNew}
954
944
  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
@@ -984,7 +974,7 @@
984
974
  categoryid={categoryid}
985
975
  gamethumbnail={gameprops.gameModel.thumbnail}
986
976
  gamename={gameprops.gameModel.name}
987
- gamevendor={gameprops.gameModel.vendor.logo}
977
+ gamevendor={gameprops.gameModel.vendor.name}
988
978
  gameLaunchUrl={gameprops.launchUrl}
989
979
  gameisnew={gameprops.gameModel.isNew}
990
980
  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
@@ -1013,13 +1003,13 @@
1013
1003
  {:else}
1014
1004
  <p class="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}">
1015
1005
  <svg width="198" height="148" viewBox="0 0 198 148" fill="none" xmlns="http://www.w3.org/2000/svg">
1016
- <rect x="1" y="18.053" width="90.263" height="90.263" rx="12" stroke="var(--emw--color-gray-150, #828282)" stroke-width="1.5"/>
1017
- <rect x="106.737" y="56.737" width="90.263" height="90.263" rx="12" stroke="var(--emw--color-gray-150, #828282)" stroke-width="1.5"/>
1018
- <circle cx="70.5" cy="32.237" r="31.487" stroke="var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C))" stroke-width="1.5" stroke-dasharray="5 0"/>
1019
- <path d="M153.909 81.631a.747.747 0 0 0-.166-1.046l-5.466-3.954a.751.751 0 0 0-.882 1.214l4.859 3.514-3.529 4.858a.75.75 0 1 0 1.215.878l3.969-5.464zm-.725-1.18c-.501.081-.999.159-1.493.233l.223 1.482c.498-.075 1-.153 1.506-.234l-.236-1.48zm-4.457.654c-1.006.133-1.996.253-2.97.36l.162 1.49c.985-.109 1.986-.23 3.002-.364l-.194-1.486zm-5.944.65c-1.01.085-2.002.155-2.978.209l.081 1.496c.991-.054 1.997-.125 3.021-.212l-.124-1.493zm-5.955.326c-1.009.022-2 .026-2.974.01l-.026 1.5c.994.015 2.003.011 3.031-.012l-.031-1.498zm-5.953-.099a61.03 61.03 0 0 1-2.961-.245l-.164 1.49c.995.107 2.006.19 3.035.251l.09-1.496zm-5.898-.641a49.97 49.97 0 0 1-2.907-.56l-.332 1.462c.983.22 1.98.412 2.995.577l.244-1.48zm-5.773-1.298a44.435 44.435 0 0 1-2.807-.92l-.518 1.407c.953.348 1.92.665 2.901.951l.424-1.438zm-5.546-2.027A44.285 44.285 0 0 1 111 76.73l-.702 1.326a45.9 45.9 0 0 0 2.748 1.331l.612-1.37zm-5.23-2.75a49.031 49.031 0 0 1-2.472-1.616l-.861 1.229a50.27 50.27 0 0 0 2.548 1.666l.785-1.278zm-4.851-3.378c-.767-.601-1.529-1.231-2.289-1.891l-.987 1.131c.778.676 1.56 1.322 2.348 1.94l.928-1.18zm-4.486-3.889a74.64 74.64 0 0 1-2.11-2.088l-1.078 1.044a76.17 76.17 0 0 0 2.152 2.13L99.091 68zm-4.143-4.259a97.17 97.17 0 0 1-1.965-2.239l-1.145.972a98.31 98.31 0 0 0 1.996 2.274l1.114-1.007zm-3.867-4.536a127.63 127.63 0 0 1-1.845-2.346l-1.192.914c.624.812 1.246 1.603 1.867 2.373l1.17-.94zm-3.64-4.733c-.58-.788-1.163-1.596-1.749-2.423l-1.225.867c.59.834 1.179 1.649 1.764 2.445l1.21-.89z" fill="var(--emw-color-gray-150, #828282)"/>
1020
- <path d="M78 43h11v13H78V43z" stroke="var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C))"/>
1021
- <path d="m180 65 2.021 6.219h6.539l-5.291 3.843 2.021 6.22-5.29-3.844-5.29 3.843 2.021-6.219-5.291-3.843h6.539L180 65z" fill="var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C))" stroke="var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C))" stroke-linecap="round" stroke-linejoin="round"/>
1022
- <path d="m74 27 2.02 6.219h6.54l-5.29 3.843 2.02 6.22L74 39.437l-5.29 3.843 2.02-6.219-5.29-3.843h6.54L74 27z" stroke="var(--emw--casino-color-primary, var(--emw--color-primary, #D0046C))" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1006
+ <rect x="1" y="18.053" width="90.263" height="90.263" rx="12" stroke="var(--emfe-w-color-gray-150, #828282)" stroke-width="1.5"/>
1007
+ <rect x="106.737" y="56.737" width="90.263" height="90.263" rx="12" stroke="var(--emfe-w-color-gray-150, #828282)" stroke-width="1.5"/>
1008
+ <circle cx="70.5" cy="32.237" r="31.487" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke-width="1.5" stroke-dasharray="5 0"/>
1009
+ <path d="M153.909 81.631a.747.747 0 0 0-.166-1.046l-5.466-3.954a.751.751 0 0 0-.882 1.214l4.859 3.514-3.529 4.858a.75.75 0 1 0 1.215.878l3.969-5.464zm-.725-1.18c-.501.081-.999.159-1.493.233l.223 1.482c.498-.075 1-.153 1.506-.234l-.236-1.48zm-4.457.654c-1.006.133-1.996.253-2.97.36l.162 1.49c.985-.109 1.986-.23 3.002-.364l-.194-1.486zm-5.944.65c-1.01.085-2.002.155-2.978.209l.081 1.496c.991-.054 1.997-.125 3.021-.212l-.124-1.493zm-5.955.326c-1.009.022-2 .026-2.974.01l-.026 1.5c.994.015 2.003.011 3.031-.012l-.031-1.498zm-5.953-.099a61.03 61.03 0 0 1-2.961-.245l-.164 1.49c.995.107 2.006.19 3.035.251l.09-1.496zm-5.898-.641a49.97 49.97 0 0 1-2.907-.56l-.332 1.462c.983.22 1.98.412 2.995.577l.244-1.48zm-5.773-1.298a44.435 44.435 0 0 1-2.807-.92l-.518 1.407c.953.348 1.92.665 2.901.951l.424-1.438zm-5.546-2.027A44.285 44.285 0 0 1 111 76.73l-.702 1.326a45.9 45.9 0 0 0 2.748 1.331l.612-1.37zm-5.23-2.75a49.031 49.031 0 0 1-2.472-1.616l-.861 1.229a50.27 50.27 0 0 0 2.548 1.666l.785-1.278zm-4.851-3.378c-.767-.601-1.529-1.231-2.289-1.891l-.987 1.131c.778.676 1.56 1.322 2.348 1.94l.928-1.18zm-4.486-3.889a74.64 74.64 0 0 1-2.11-2.088l-1.078 1.044a76.17 76.17 0 0 0 2.152 2.13L99.091 68zm-4.143-4.259a97.17 97.17 0 0 1-1.965-2.239l-1.145.972a98.31 98.31 0 0 0 1.996 2.274l1.114-1.007zm-3.867-4.536a127.63 127.63 0 0 1-1.845-2.346l-1.192.914c.624.812 1.246 1.603 1.867 2.373l1.17-.94zm-3.64-4.733c-.58-.788-1.163-1.596-1.749-2.423l-1.225.867c.59.834 1.179 1.649 1.764 2.445l1.21-.89z" fill="var(--emfe-w-color-gray-150, #828282)"/>
1010
+ <path d="M78 43h11v13H78V43z" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))"/>
1011
+ <path d="m180 65 2.021 6.219h6.539l-5.291 3.843 2.021 6.22-5.29-3.844-5.29 3.843 2.021-6.219-5.291-3.843h6.539L180 65z" fill="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke-linecap="round" stroke-linejoin="round"/>
1012
+ <path d="m74 27 2.02 6.219h6.54l-5.29 3.843 2.02 6.22L74 39.437l-5.29 3.843 2.02-6.219-5.29-3.843h6.54L74 27z" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1023
1013
  </svg>
1024
1014
  <span class="NoFavoriteText NoFavoriteTextHighlight">{$_('noFavoritesTitle')}</span>
1025
1015
  {#if isMobile(userAgent)}
@@ -1043,17 +1033,15 @@
1043
1033
 
1044
1034
 
1045
1035
  <style lang="scss">
1046
- $grid-gap: var(--emw-casino-category-grid-gap, 16px);
1047
- $grid-cell-size: var(--emw-casino-category-grid-cell-size, 192px);
1048
- $grid-cell-size-small: var(--emw-casino-category-grid-cell-size-small, 110px);
1049
- $grid-cell-size-medium: var(--emw-casino-category-grid-cell-size-medium, 122px);
1050
-
1051
- $grid-gap-scroll: var(--emw-casino-category-grid-gap-scroll, 16px);
1052
- $grid-gap-scroll-medium: var(--emw-casino-category-grid-gap-scroll-mediu, 10px);
1053
- $grid-cell-size-scroll: var( --emw-casino-category-grid-cell-size-scroll, 180px);
1054
- $grid-cell-size-height-scroll: var(--emw-casino-category-grid-cell-size-height-scroll, 180px);
1055
- $grid-cell-size-medium-scroll: var(--emw-casino-category-grid-cell-size-medium-scroll, 120px);
1056
- $grid-cell-size-small-scroll: var(--emw-casino-category-grid-cell-size-small-scroll, 100px);
1036
+ $grid-gap: 16px;
1037
+ $grid-cell-size: 192px;
1038
+ $grid-cell-size-small: 110px;
1039
+ $grid-cell-size-medium: 122px;
1040
+
1041
+ $grid-gap-scroll: 16px;
1042
+ $grid-cell-size-scroll: 182px;
1043
+ $grid-cell-size-medium-scroll: 105px;
1044
+ $grid-cell-size-small-scroll: 100px;
1057
1045
 
1058
1046
  *, *::before, *::after {
1059
1047
  margin: 0;
@@ -1065,41 +1053,45 @@
1065
1053
  container-type: inline-size;
1066
1054
  }
1067
1055
 
1068
- .CustomScroll:-webkit-scrollbar-track {
1069
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
1070
- border-radius: var(--emw--border-radius-small, 5px);
1071
- background-color: transparent;
1072
- }
1056
+ .CustomScroll:-webkit-scrollbar-track
1057
+ {
1058
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
1059
+ border-radius: 5px;
1060
+ background-color: transparent;
1061
+ }
1073
1062
 
1074
- .CustomScroll::-webkit-scrollbar {
1075
- height: 5px;
1076
- background-color: transparent;
1077
- }
1063
+ .CustomScroll::-webkit-scrollbar
1064
+ {
1065
+ height: 5px;
1066
+ background-color: transparent;
1067
+ }
1078
1068
 
1079
- .CustomScroll::-webkit-scrollbar-thumb {
1080
- border-radius: var(--emw--border-radius-small, 5px);
1081
- height: 5px;
1082
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
1083
- background-color: rgba(255,255,255,.3);
1084
- }
1069
+ .CustomScroll::-webkit-scrollbar-thumb
1070
+ {
1071
+ border-radius: 5px;
1072
+ height: 5px;
1073
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
1074
+ background-color: rgba(255,255,255,.3);
1075
+ }
1085
1076
 
1086
- .CategoryName, .StatusText {
1087
- color: var(--emw-casino-typography, #FFFFFF);
1088
- font-size: var(--emw--font-size-large, 20px);
1089
- font-weight: var(--emw--font-weight-semibold, 500);
1077
+ .CategoryName,
1078
+ .StatusText {
1079
+ color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
1080
+ font-size: 22px;
1081
+ font-weight: 500;
1090
1082
  }
1091
1083
 
1092
1084
  .CategoryLoadMore {
1093
- font-size: var(--emw--font-size-small, 14px);
1094
- color: var(--emw-casino-typography, #FFFFFF);
1085
+ font-size: 14px;
1086
+ color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
1095
1087
  }
1096
1088
 
1097
1089
  .NoSearchResults {
1098
- color: var(--emw-casino-typography, #FFFFFF);
1090
+ color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1099
1091
  text-align: center;
1100
1092
  width: 100%;
1101
1093
  padding-left: 5px;
1102
- font-size: var(--emw--font-size-medium, 16px);
1094
+ font-size: 16px;
1103
1095
  }
1104
1096
 
1105
1097
  .NoRecentSearches {
@@ -1111,8 +1103,8 @@
1111
1103
  }
1112
1104
 
1113
1105
  .NoFavoriteGames {
1114
- color: var(--emw-casino-typography, #FFFFFF);
1115
- font-size: var(--emw--font-size-medium, 16px);
1106
+ color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1107
+ font-size: 16px;
1116
1108
  display: flex;
1117
1109
  flex-direction: column;
1118
1110
  align-items: center;
@@ -1127,8 +1119,8 @@
1127
1119
  text-align: center;
1128
1120
  }
1129
1121
  .NoFavoriteTextHighlight {
1130
- font-weight: var(--emw--font-weight-bold, 700);
1131
- font-size: var(--emw--font-size-medium, 16px);
1122
+ font-weight: 600;
1123
+ font-size: 18px;
1132
1124
  padding: 15px 0;
1133
1125
  }
1134
1126
  }
@@ -1139,8 +1131,8 @@
1139
1131
 
1140
1132
  .SearchWaiting {
1141
1133
  grid-column: 1/-1;
1142
- color: var(--emw-casino-typography, #FFFFFF);
1143
- font-size: var(--emw--font-size-x-small, 12px);
1134
+ color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1135
+ font-size: 13px;
1144
1136
  text-align: center;
1145
1137
  }
1146
1138
 
@@ -1148,25 +1140,16 @@
1148
1140
  width: 100%;
1149
1141
  display: flex;
1150
1142
  align-items: center;
1143
+ justify-content: space-between;
1151
1144
  padding: 8px 0 0;
1152
1145
  margin-bottom: 16px;
1153
- gap: 10px;
1154
- .CategoryIcon {
1155
- display: flex;
1156
- place-content: center;
1157
- background-color: transparent;
1158
- position: relative;
1159
- align-items: center;
1160
- justify-content: center;
1161
- }
1162
1146
  .CategoryNameLink {
1163
1147
  display: block;
1164
1148
  cursor: pointer;
1165
- margin-left: auto;
1166
1149
  }
1167
1150
 
1168
1151
  .CategoryLoadMore {
1169
- font-weight: var(--emw--font-weight-normal, 400);
1152
+ font-weight: normal;
1170
1153
  }
1171
1154
 
1172
1155
  &.Searched {
@@ -1183,10 +1166,10 @@
1183
1166
  .CasinoGamesGrid {
1184
1167
  display: grid;
1185
1168
  gap: $grid-gap;
1186
- grid-template-rows: repeat(auto-fill, $grid-cell-size-height-scroll);
1187
- grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-scroll, 46%), 1fr));
1188
- grid-auto-rows: $grid-cell-size-height-scroll;
1189
- grid-auto-columns: $grid-cell-size-scroll;
1169
+ grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size, 46%), 1fr));
1170
+ grid-template-rows: repeat(auto-fill, $grid-cell-size);
1171
+ grid-auto-rows: $grid-cell-size;
1172
+ grid-auto-columns: $grid-cell-size;
1190
1173
  grid-auto-flow: row dense;
1191
1174
 
1192
1175
  .game-tile-2x1 {
@@ -1216,7 +1199,7 @@
1216
1199
  }
1217
1200
 
1218
1201
  &.GamesListIncreasedGap {
1219
- gap: $grid-gap;
1202
+ gap: $grid-gap + 12;
1220
1203
  }
1221
1204
  }
1222
1205
 
@@ -1224,13 +1207,13 @@
1224
1207
  display: grid;
1225
1208
  gap: $grid-gap;
1226
1209
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-scroll, 46%), 2fr));
1227
- grid-template-rows: repeat(auto-fill, $grid-cell-size-height-scroll);
1210
+ grid-template-rows: repeat(auto-fill, $grid-cell-size-scroll);
1228
1211
  grid-auto-rows: $grid-cell-size-scroll;
1229
1212
  grid-auto-columns: $grid-cell-size-scroll;
1230
1213
  grid-auto-flow: column;
1231
1214
  overflow-x: auto;
1232
1215
  overflow-y: hidden;
1233
- padding-bottom: 35px;
1216
+ padding-bottom: 5px;
1234
1217
 
1235
1218
  .game-tile-2x1 {
1236
1219
  grid-row: span 2;
@@ -1259,7 +1242,7 @@
1259
1242
  }
1260
1243
 
1261
1244
  &.GamesListIncreasedGap {
1262
- gap: $grid-gap;
1245
+ gap: $grid-gap + 12;
1263
1246
  }
1264
1247
  }
1265
1248
 
@@ -1267,32 +1250,82 @@
1267
1250
  display: grid;
1268
1251
  grid-template-columns: 1fr 1fr;
1269
1252
  gap: 20px;
1270
- margin-left: auto;
1253
+ }
1254
+
1255
+
1256
+ @container (max-width: 768px) {
1257
+ .CasinoGamesHeader {
1258
+ align-items: unset;
1259
+ flex-direction: row;
1260
+ flex-wrap: wrap;
1261
+ }
1262
+
1263
+ .CategoryName {
1264
+ margin-bottom: 20px;
1265
+ }
1266
+
1267
+ .CategoryFilterContainer {
1268
+ width: 100%;
1269
+ }
1270
+ }
1271
+
1272
+ @container (min-width: 1100px) {
1273
+ .CasinoGamesGrid {
1274
+ grid-template-rows: repeat(auto-fill, 142px);
1275
+ grid-auto-rows: 142px;
1276
+ }
1271
1277
  }
1272
1278
 
1273
1279
  .SearchLoading {
1274
1280
  display: block;
1275
1281
  padding: 50px;
1276
- color: var(--emw-casino-typography, #FFFFFF);
1282
+ color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1283
+ }
1284
+
1285
+ .lds-dual-ring {
1286
+ display: block;
1287
+ width: 80px;
1288
+ height: 80px;
1289
+ margin: 0 auto
1290
+ }
1291
+ .lds-dual-ring:after {
1292
+ content: " ";
1293
+ display: block;
1294
+ width: 64px;
1295
+ height: 64px;
1296
+ margin: 8px;
1297
+ border-radius: 50%;
1298
+ border: 6px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
1299
+ border-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) transparent var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
1300
+ animation: lds-dual-ring 1.2s linear infinite;
1301
+ }
1302
+ @keyframes lds-dual-ring {
1303
+ 0% {
1304
+ transform: rotate(0deg);
1305
+ }
1306
+ 100% {
1307
+ transform: rotate(360deg);
1308
+ }
1277
1309
  }
1278
1310
 
1279
1311
  @container (max-width: 385px) {
1312
+
1280
1313
  .CasinoGamesGrid {
1281
1314
  display: grid;
1282
1315
  gap: $grid-gap;
1283
- grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
1284
1316
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small, 46%), 1fr));
1317
+ grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
1285
1318
  grid-auto-rows: $grid-cell-size-small;
1286
1319
  grid-auto-columns: $grid-cell-size-small;
1287
1320
 
1288
1321
  &.GamesListIncreasedGap {
1289
1322
  gap: $grid-gap;
1290
- }
1323
+ }
1291
1324
  }
1292
1325
 
1293
1326
  .CasinoGamesGridSlider {
1294
1327
  display: grid;
1295
- gap: $grid-gap-scroll;
1328
+ gap: $grid-gap-scroll !important;
1296
1329
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small-scroll, 46%), 2fr));
1297
1330
  grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
1298
1331
  grid-auto-rows: $grid-cell-size-small-scroll;
@@ -1302,53 +1335,57 @@
1302
1335
  overflow-y: hidden;
1303
1336
  padding-bottom: 5px;
1304
1337
 
1305
- & .GameInnerContainer .GameInfoWrapper {
1306
- .GameInfoName, .GameInfoVendor {
1307
- font-size: var(--emw--font-size-2x-small, 10px);
1338
+ & .GameInnerContainer .GameInfoWrapper .GameInfoName {
1339
+ font-size: 10px !important;
1308
1340
  }
1309
- }
1341
+ & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
1342
+ font-size: 10px !important;
1343
+ }
1310
1344
  }
1311
1345
  }
1312
1346
 
1313
1347
  @container (max-width: 410px) {
1314
1348
 
1315
- .CasinoGamesGridSlider {
1316
- display: grid;
1317
- gap: $grid-gap-scroll;
1318
- grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium, 46%), 2fr));
1319
- grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
1320
- grid-auto-rows: $grid-cell-size-medium;
1321
- grid-auto-columns: $grid-cell-size-medium;
1322
- grid-auto-flow: column;
1323
- overflow-x: auto;
1324
- overflow-y: hidden;
1325
- padding-bottom: 5px;
1326
-
1327
- & .GameInnerContainer .GameInfoWrapper {
1328
- .GameInfoName, .GameInfoVendor {
1329
- font-size: var(--emw--font-size-2x-small, 10px);
1349
+ .CasinoGamesGridSlider {
1350
+ display: grid;
1351
+ gap: $grid-gap-scroll;
1352
+ grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small-scroll, 46%), 2fr));
1353
+ grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
1354
+ grid-auto-rows: $grid-cell-size-small-scroll;
1355
+ grid-auto-columns: $grid-cell-size-small-scroll;
1356
+ grid-auto-flow: column;
1357
+ overflow-x: auto;
1358
+ overflow-y: hidden;
1359
+ padding-bottom: 5px;
1360
+
1361
+ & .GameInnerContainer .GameInfoWrapper .GameInfoName {
1362
+ font-size: 10px !important;
1330
1363
  }
1364
+
1365
+ & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
1366
+ font-size: 10px !important;
1367
+ }
1331
1368
  }
1332
1369
  }
1333
- }
1334
1370
 
1335
1371
  @container (max-width: 480px) {
1336
- .CasinoGamesGrid {
1337
- display: grid;
1338
- gap: $grid-gap;
1339
- grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
1340
- grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium, 46%), 1fr));
1341
- grid-auto-rows: $grid-cell-size-medium;
1342
- grid-auto-columns: $grid-cell-size-medium;
1343
1372
 
1344
- &.GamesListIncreasedGap {
1373
+ .CasinoGamesGrid {
1374
+ display: grid;
1345
1375
  gap: $grid-gap;
1376
+ grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium, 46%), 1fr));
1377
+ grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
1378
+ grid-auto-rows: $grid-cell-size-medium;
1379
+ grid-auto-columns: $grid-cell-size-medium;
1380
+
1381
+ &.GamesListIncreasedGap {
1382
+ gap: $grid-gap;
1383
+ }
1346
1384
  }
1347
- }
1348
1385
 
1349
1386
  .CasinoGamesGridSlider {
1350
1387
  display: grid;
1351
- gap: $grid-gap-scroll;
1388
+ gap: $grid-gap-scroll !important;
1352
1389
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium-scroll, 46%), 2fr));
1353
1390
  grid-template-rows: repeat(auto-fill, $grid-cell-size-medium-scroll);
1354
1391
  grid-auto-rows: $grid-cell-size-medium-scroll;
@@ -1358,115 +1395,13 @@
1358
1395
  overflow-y: hidden;
1359
1396
  padding-bottom: 5px;
1360
1397
 
1361
- & .GameInnerContainer .GameInfoWrapper {
1362
- .GameInfoName, .GameInfoVendor {
1363
- font-size: var(--emw--font-size-2x-small, 10px);
1398
+ & .GameInnerContainer .GameInfoWrapper .GameInfoName {
1399
+ font-size: 10px !important;
1364
1400
  }
1365
- }
1401
+ & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
1402
+ font-size: 10px !important;
1403
+ }
1366
1404
  }
1367
1405
  }
1368
1406
 
1369
- @container (max-width: 768px) {
1370
- .CasinoGamesContainer .CasinoGamesGrid, .GameContainer.CasinoGamesGridSlider {
1371
- display: grid;
1372
- gap: $grid-gap;
1373
- grid-template-rows: repeat(auto-fill, $grid-cell-size-medium-scroll);
1374
- grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small, 46%), 1fr));
1375
- grid-auto-rows: $grid-cell-size-medium-scroll;
1376
- grid-auto-columns: $grid-cell-size-medium;
1377
- &.GamesListIncreasedGap {
1378
- gap: $grid-gap-scroll-medium;
1379
- }
1380
- .GameInfo .GameInfoName {
1381
- font-size: var(--emw--font-size-x-small, 12px);
1382
- }
1383
- }
1384
- .CasinoGamesGridSlider {
1385
- padding-bottom: 10px;
1386
- }
1387
- .GameInnerContainer {
1388
- border-radius: var(--emw--border-radius-large, 20px);
1389
- .GameInfoWrapper .GameInfoBtn {
1390
- gap: 2px;
1391
- }
1392
- }
1393
- .CasinoGamesHeader {
1394
- align-items: center;
1395
- flex-direction: row;
1396
- flex-wrap: wrap;
1397
- justify-content: center;
1398
- }
1399
-
1400
- .CategoryFilterContainer {
1401
- width: 100%;
1402
- }
1403
- }
1404
-
1405
- // animation spinner
1406
- .DualRing {
1407
- display: block;
1408
- width: 80px;
1409
- height: 80px;
1410
- margin: 0 auto;
1411
- }
1412
- .DualRing:after {
1413
- content: " ";
1414
- display: block;
1415
- width: 64px;
1416
- height: 64px;
1417
- margin: 8px;
1418
- border-radius: 50%;
1419
- border: 6px solid var(--emw-casino-color-primary, #D0046C);
1420
- border-color: var(--emw-casino-color-primary, #D0046C) transparent var(--emw-casino-color-primary, #D0046C);
1421
- animation: DualRing 1.2s linear infinite;
1422
- }
1423
- @keyframes DualRing {
1424
- 0% {
1425
- transform: rotate(0deg);
1426
- }
1427
- 100% {
1428
- transform: rotate(360deg);
1429
- }
1430
- }
1431
-
1432
- // animation categories icon
1433
- .CategoryIcon svg {
1434
- position: absolute;
1435
- left: 0;
1436
- right: 0;
1437
- margin-left: auto;
1438
- margin-right: auto;
1439
- }
1440
-
1441
- .CategoryIconAnimation {
1442
- position: relative;
1443
- width: 40px;
1444
- height: 40px;
1445
- border-radius: 50%;
1446
- background: linear-gradient(45deg, transparent, transparent 40%, var(--emw-casino-categories-animation-main, #ffff00)), linear-gradient(var(--emfe-casino-categories-animation-fill-secondary-color, #262626), var(--emfe-casino-categories-animation-contrast, #141414));
1447
-
1448
- animation: rotate 3.5s linear infinite;
1449
- }
1450
-
1451
- .CategoryIconAnimation:before,
1452
- .CategoryIconAnimation:after {
1453
- content: " ";
1454
- position: absolute;
1455
- inset: 3px;
1456
- background: linear-gradient(var(--emw-casino-categories-animation-fill-main-color, #161616), var(--emfe-casino-categories-animation-fill-secondary-color, #262626));
1457
- border-radius: inherit;
1458
- }
1459
-
1460
- .CategoryIconAnimation:before {
1461
- background: linear-gradient(45deg, transparent, transparent 40%, var(--emw-casino-categories-animation-main, #ffff00));
1462
- filter: blur(12px);
1463
- }
1464
-
1465
- @keyframes rotate {
1466
- 100% {
1467
- transform: rotate(360deg);
1468
- filter: hue-rotate(360deg);
1469
- }
1470
- }
1471
1407
  </style>
1472
-