@everymatrix/casino-games-category-section 1.36.1 → 1.37.1

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 +1 -0
  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 +250 -185
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,19 +171,18 @@
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
-
187
186
  resolve(favoriteGames);
188
187
 
189
188
  }).catch((err:any) => {
@@ -473,11 +472,11 @@
473
472
  break;
474
473
 
475
474
  case 'UpdateFavoredList':
476
- if(categoryid === 'FAVORITES') updateFavoredList(e.data.url, e.data.sessionID)
475
+ if (categoryid === 'FAVORITES') updateFavoredList(e.data.url, e.data.sessionID);
477
476
  break;
478
477
 
479
478
  default:
480
- // do nothing
479
+ // Do nothing
481
480
  break;
482
481
  }
483
482
  }
@@ -529,10 +528,10 @@
529
528
 
530
529
  const removeFavoredGame = (url:string, sessionID:string, gameID:string) => {
531
530
  let options = {
532
- method: "DELETE",
533
- headers: {
534
- 'X-SessionID': sessionID,
535
- }
531
+ method: "DELETE",
532
+ headers: {
533
+ 'X-SessionID': sessionID,
534
+ }
536
535
  };
537
536
 
538
537
  fetch(`${url}/${gameID}`, options)
@@ -549,7 +548,7 @@
549
548
  }
550
549
  }
551
550
 
552
- //Fetch fav list and pass to be updated
551
+ // Fetch fav list and pass to be updated
553
552
  const updateFavoredList = async (url, sessionID) => {
554
553
  let options = {
555
554
  method: "GET",
@@ -719,20 +718,20 @@
719
718
  }
720
719
 
721
720
  onMount(() => {
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
- }
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
+ }
730
729
  });
731
730
 
732
731
  $: lang && setActiveLanguage();
733
- //Widget is working as standalone when fetchviaevent isn't set
732
+ // Widget is working as standalone when fetchviaevent isn't set
734
733
  $: (fetchviaevent === 'false' || fetchviaevent === '') && endpoint && lang && categoryid && datasource && displayedgamecount && showallbuttongamescount && fetchGamesByCategory(categoryid, displayedgamecount, showallbuttongamescount);
735
- //Call the fav. list fetch when widget is standalone
734
+ // Call the fav. list fetch when widget is standalone
736
735
  $: favorites === 'true' && endpoint && session && userid && getFavoritesGames(session, userid);
737
736
  $: dataloaded && thumbnailContainer && setupObserver();
738
737
  $: lang && categoryid && userid && session && initialSetup();
@@ -770,7 +769,6 @@
770
769
  {/if}
771
770
  </div>
772
771
  {#if shownCategoryData}
773
-
774
772
  {#if !showItems}
775
773
  <p class="NoSearchResults NoRecentSearches NoRecentSearchesCenter {isMobile(userAgent) ? 'NoRecentSearchesMobile' : ''}">{$_('noRecentSearch')}</p>
776
774
  {/if}
@@ -787,7 +785,7 @@
787
785
  categoryid={categoryid}
788
786
  gamethumbnail={gameprops.thumbnail}
789
787
  gamename={gameprops.name}
790
- gamevendor={gameprops.vendor.name}
788
+ gamevendor={gameprops.vendor.logo}
791
789
  gameLaunchUrl={gameprops.launchUrl}
792
790
  gameisnew={gameprops.isNew}
793
791
  gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
@@ -819,6 +817,18 @@
819
817
  <div class="CasinoGamesContainer">
820
818
  {#if casinomygames !== 'true'}
821
819
  <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>
822
832
  <h3 class="CategoryName" bind:this={categoryName}>
823
833
  {categoryData.name}
824
834
  </h3>
@@ -858,12 +868,12 @@
858
868
  </div>
859
869
  {/if}
860
870
  {#if isLoading && !isLazyLoading}
861
- <div class="lds-dual-ring" part="lds-dual-ring"></div>
871
+ <div class="DualRing"></div>
862
872
  {:else}
863
873
  {#if shownCategoryData.length !== 0 }
864
874
  <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} {(lobbyView && casinogamesgridslider == 'true') ? 'CasinoGamesGridSlider CustomScroll' : '' } GamesListIncreasedGap" bind:this={container}>
865
875
  {#each shownCategoryData as gameprops, index}
866
- {#if intersecting || nativeLoading}
876
+ {#if intersecting || nativeLoading}
867
877
  <casino-game-thumbnail
868
878
  session={session}
869
879
  userid={userid}
@@ -874,7 +884,7 @@
874
884
  categoryid={categoryid}
875
885
  gamethumbnail={gameprops.thumbnail}
876
886
  gamename={gameprops.name}
877
- gamevendor={gameprops.vendor.name}
887
+ gamevendor={gameprops.vendor.logo}
878
888
  gameLaunchUrl={gameprops.launchUrl}
879
889
  gameisnew={gameprops.isNew}
880
890
  gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
@@ -928,7 +938,7 @@
928
938
  {#if intersecting || nativeLoading}
929
939
  {#if isMobile(userAgent)}
930
940
  {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
931
- <casino-game-thumbnail
941
+ <casino-game-thumbnail
932
942
  class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
933
943
  part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
934
944
  session={session}
@@ -938,7 +948,7 @@
938
948
  categoryid={categoryid}
939
949
  gamethumbnail={gameprops.gameModel.thumbnail}
940
950
  gamename={gameprops.gameModel.name}
941
- gamevendor={gameprops.gameModel.vendor.name}
951
+ gamevendor={gameprops.gameModel.vendor.logo}
942
952
  gameLaunchUrl={gameprops.launchUrl}
943
953
  gameisnew={gameprops.gameModel.isNew}
944
954
  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
@@ -974,7 +984,7 @@
974
984
  categoryid={categoryid}
975
985
  gamethumbnail={gameprops.gameModel.thumbnail}
976
986
  gamename={gameprops.gameModel.name}
977
- gamevendor={gameprops.gameModel.vendor.name}
987
+ gamevendor={gameprops.gameModel.vendor.logo}
978
988
  gameLaunchUrl={gameprops.launchUrl}
979
989
  gameisnew={gameprops.gameModel.isNew}
980
990
  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
@@ -1003,13 +1013,13 @@
1003
1013
  {:else}
1004
1014
  <p class="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}">
1005
1015
  <svg width="198" height="148" viewBox="0 0 198 148" fill="none" xmlns="http://www.w3.org/2000/svg">
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"/>
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"/>
1013
1023
  </svg>
1014
1024
  <span class="NoFavoriteText NoFavoriteTextHighlight">{$_('noFavoritesTitle')}</span>
1015
1025
  {#if isMobile(userAgent)}
@@ -1033,15 +1043,17 @@
1033
1043
 
1034
1044
 
1035
1045
  <style lang="scss">
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;
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);
1045
1057
 
1046
1058
  *, *::before, *::after {
1047
1059
  margin: 0;
@@ -1053,45 +1065,41 @@
1053
1065
  container-type: inline-size;
1054
1066
  }
1055
1067
 
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
- }
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
+ }
1062
1073
 
1063
- .CustomScroll::-webkit-scrollbar
1064
- {
1065
- height: 5px;
1066
- background-color: transparent;
1067
- }
1074
+ .CustomScroll::-webkit-scrollbar {
1075
+ height: 5px;
1076
+ background-color: transparent;
1077
+ }
1068
1078
 
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
- }
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
+ }
1076
1085
 
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;
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);
1082
1090
  }
1083
1091
 
1084
1092
  .CategoryLoadMore {
1085
- font-size: 14px;
1086
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
1093
+ font-size: var(--emw--font-size-small, 14px);
1094
+ color: var(--emw-casino-typography, #FFFFFF);
1087
1095
  }
1088
1096
 
1089
1097
  .NoSearchResults {
1090
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1098
+ color: var(--emw-casino-typography, #FFFFFF);
1091
1099
  text-align: center;
1092
1100
  width: 100%;
1093
1101
  padding-left: 5px;
1094
- font-size: 16px;
1102
+ font-size: var(--emw--font-size-medium, 16px);
1095
1103
  }
1096
1104
 
1097
1105
  .NoRecentSearches {
@@ -1103,8 +1111,8 @@
1103
1111
  }
1104
1112
 
1105
1113
  .NoFavoriteGames {
1106
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1107
- font-size: 16px;
1114
+ color: var(--emw-casino-typography, #FFFFFF);
1115
+ font-size: var(--emw--font-size-medium, 16px);
1108
1116
  display: flex;
1109
1117
  flex-direction: column;
1110
1118
  align-items: center;
@@ -1119,8 +1127,8 @@
1119
1127
  text-align: center;
1120
1128
  }
1121
1129
  .NoFavoriteTextHighlight {
1122
- font-weight: 600;
1123
- font-size: 18px;
1130
+ font-weight: var(--emw--font-weight-bold, 700);
1131
+ font-size: var(--emw--font-size-medium, 16px);
1124
1132
  padding: 15px 0;
1125
1133
  }
1126
1134
  }
@@ -1131,8 +1139,8 @@
1131
1139
 
1132
1140
  .SearchWaiting {
1133
1141
  grid-column: 1/-1;
1134
- color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
1135
- font-size: 13px;
1142
+ color: var(--emw-casino-typography, #FFFFFF);
1143
+ font-size: var(--emw--font-size-x-small, 12px);
1136
1144
  text-align: center;
1137
1145
  }
1138
1146
 
@@ -1140,16 +1148,25 @@
1140
1148
  width: 100%;
1141
1149
  display: flex;
1142
1150
  align-items: center;
1143
- justify-content: space-between;
1144
1151
  padding: 8px 0 0;
1145
1152
  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
+ }
1146
1162
  .CategoryNameLink {
1147
1163
  display: block;
1148
1164
  cursor: pointer;
1165
+ margin-left: auto;
1149
1166
  }
1150
1167
 
1151
1168
  .CategoryLoadMore {
1152
- font-weight: normal;
1169
+ font-weight: var(--emw--font-weight-normal, 400);
1153
1170
  }
1154
1171
 
1155
1172
  &.Searched {
@@ -1166,10 +1183,10 @@
1166
1183
  .CasinoGamesGrid {
1167
1184
  display: grid;
1168
1185
  gap: $grid-gap;
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;
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;
1173
1190
  grid-auto-flow: row dense;
1174
1191
 
1175
1192
  .game-tile-2x1 {
@@ -1199,7 +1216,7 @@
1199
1216
  }
1200
1217
 
1201
1218
  &.GamesListIncreasedGap {
1202
- gap: $grid-gap + 12;
1219
+ gap: $grid-gap;
1203
1220
  }
1204
1221
  }
1205
1222
 
@@ -1207,13 +1224,13 @@
1207
1224
  display: grid;
1208
1225
  gap: $grid-gap;
1209
1226
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-scroll, 46%), 2fr));
1210
- grid-template-rows: repeat(auto-fill, $grid-cell-size-scroll);
1227
+ grid-template-rows: repeat(auto-fill, $grid-cell-size-height-scroll);
1211
1228
  grid-auto-rows: $grid-cell-size-scroll;
1212
1229
  grid-auto-columns: $grid-cell-size-scroll;
1213
1230
  grid-auto-flow: column;
1214
1231
  overflow-x: auto;
1215
1232
  overflow-y: hidden;
1216
- padding-bottom: 5px;
1233
+ padding-bottom: 35px;
1217
1234
 
1218
1235
  .game-tile-2x1 {
1219
1236
  grid-row: span 2;
@@ -1242,7 +1259,7 @@
1242
1259
  }
1243
1260
 
1244
1261
  &.GamesListIncreasedGap {
1245
- gap: $grid-gap + 12;
1262
+ gap: $grid-gap;
1246
1263
  }
1247
1264
  }
1248
1265
 
@@ -1250,82 +1267,32 @@
1250
1267
  display: grid;
1251
1268
  grid-template-columns: 1fr 1fr;
1252
1269
  gap: 20px;
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
- }
1270
+ margin-left: auto;
1277
1271
  }
1278
1272
 
1279
1273
  .SearchLoading {
1280
1274
  display: block;
1281
1275
  padding: 50px;
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
- }
1276
+ color: var(--emw-casino-typography, #FFFFFF);
1309
1277
  }
1310
1278
 
1311
1279
  @container (max-width: 385px) {
1312
-
1313
1280
  .CasinoGamesGrid {
1314
1281
  display: grid;
1315
1282
  gap: $grid-gap;
1316
- grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small, 46%), 1fr));
1317
1283
  grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
1284
+ grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small, 46%), 1fr));
1318
1285
  grid-auto-rows: $grid-cell-size-small;
1319
1286
  grid-auto-columns: $grid-cell-size-small;
1320
1287
 
1321
1288
  &.GamesListIncreasedGap {
1322
1289
  gap: $grid-gap;
1323
- }
1290
+ }
1324
1291
  }
1325
1292
 
1326
1293
  .CasinoGamesGridSlider {
1327
1294
  display: grid;
1328
- gap: $grid-gap-scroll !important;
1295
+ gap: $grid-gap-scroll;
1329
1296
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small-scroll, 46%), 2fr));
1330
1297
  grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
1331
1298
  grid-auto-rows: $grid-cell-size-small-scroll;
@@ -1335,57 +1302,53 @@
1335
1302
  overflow-y: hidden;
1336
1303
  padding-bottom: 5px;
1337
1304
 
1338
- & .GameInnerContainer .GameInfoWrapper .GameInfoName {
1339
- font-size: 10px !important;
1305
+ & .GameInnerContainer .GameInfoWrapper {
1306
+ .GameInfoName, .GameInfoVendor {
1307
+ font-size: var(--emw--font-size-2x-small, 10px);
1340
1308
  }
1341
- & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
1342
- font-size: 10px !important;
1343
- }
1309
+ }
1344
1310
  }
1345
1311
  }
1346
1312
 
1347
1313
  @container (max-width: 410px) {
1348
1314
 
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;
1363
- }
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;
1364
1326
 
1365
- & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
1366
- font-size: 10px !important;
1367
- }
1327
+ & .GameInnerContainer .GameInfoWrapper {
1328
+ .GameInfoName, .GameInfoVendor {
1329
+ font-size: var(--emw--font-size-2x-small, 10px);
1330
+ }
1368
1331
  }
1369
1332
  }
1333
+ }
1370
1334
 
1371
1335
  @container (max-width: 480px) {
1372
-
1373
1336
  .CasinoGamesGrid {
1374
- display: grid;
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;
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;
1380
1343
 
1381
- &.GamesListIncreasedGap {
1382
- gap: $grid-gap;
1383
- }
1344
+ &.GamesListIncreasedGap {
1345
+ gap: $grid-gap;
1384
1346
  }
1347
+ }
1385
1348
 
1386
1349
  .CasinoGamesGridSlider {
1387
1350
  display: grid;
1388
- gap: $grid-gap-scroll !important;
1351
+ gap: $grid-gap-scroll;
1389
1352
  grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium-scroll, 46%), 2fr));
1390
1353
  grid-template-rows: repeat(auto-fill, $grid-cell-size-medium-scroll);
1391
1354
  grid-auto-rows: $grid-cell-size-medium-scroll;
@@ -1395,13 +1358,115 @@
1395
1358
  overflow-y: hidden;
1396
1359
  padding-bottom: 5px;
1397
1360
 
1398
- & .GameInnerContainer .GameInfoWrapper .GameInfoName {
1399
- font-size: 10px !important;
1361
+ & .GameInnerContainer .GameInfoWrapper {
1362
+ .GameInfoName, .GameInfoVendor {
1363
+ font-size: var(--emw--font-size-2x-small, 10px);
1400
1364
  }
1401
- & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
1402
- font-size: 10px !important;
1403
- }
1365
+ }
1404
1366
  }
1405
1367
  }
1406
1368
 
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
+ }
1407
1471
  </style>
1472
+