@everymatrix/bonus-powerups-ingame-detail 0.0.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 (69) hide show
  1. package/dist/bonus-powerups-ingame-detail/app-globals-0f993ce5.js +1 -0
  2. package/dist/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail-78a50d3f.js +11 -0
  3. package/dist/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail.esm.js +1 -0
  4. package/dist/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail_5.entry.js +1 -0
  5. package/dist/bonus-powerups-ingame-detail/index-334a1114.js +2 -0
  6. package/dist/bonus-powerups-ingame-detail/index.esm.js +1 -0
  7. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  8. package/dist/cjs/bonus-powerups-ingame-detail-33f5b380.js +11826 -0
  9. package/dist/cjs/bonus-powerups-ingame-detail.cjs.js +25 -0
  10. package/dist/cjs/bonus-powerups-ingame-detail_5.cjs.entry.js +334 -0
  11. package/dist/cjs/index-956ad213.js +1306 -0
  12. package/dist/cjs/index.cjs.js +10 -0
  13. package/dist/cjs/loader.cjs.js +15 -0
  14. package/dist/collection/assets/Arrow Curve Left.svg +11 -0
  15. package/dist/collection/assets/double-right.svg +4 -0
  16. package/dist/collection/assets/gotoPage.svg +3 -0
  17. package/dist/collection/assets/return.svg +15 -0
  18. package/dist/collection/collection-manifest.json +27 -0
  19. package/dist/collection/components/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail.css +304 -0
  20. package/dist/collection/components/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail.js +483 -0
  21. package/dist/collection/components/bonus-powerups-ingame-detail/index.js +1 -0
  22. package/dist/collection/components/smart-loader/smart-loader.css +84 -0
  23. package/dist/collection/components/smart-loader/smart-loader.js +17 -0
  24. package/dist/collection/components/time-count/time-count.js +159 -0
  25. package/dist/collection/index.js +1 -0
  26. package/dist/collection/utils/constants.js +10 -0
  27. package/dist/collection/utils/locale.utils.js +46 -0
  28. package/dist/collection/utils/utils.js +11 -0
  29. package/dist/esm/app-globals-0f993ce5.js +3 -0
  30. package/dist/esm/bonus-powerups-ingame-detail-78a50d3f.js +11822 -0
  31. package/dist/esm/bonus-powerups-ingame-detail.js +20 -0
  32. package/dist/esm/bonus-powerups-ingame-detail_5.entry.js +327 -0
  33. package/dist/esm/index-334a1114.js +1277 -0
  34. package/dist/esm/index.js +2 -0
  35. package/dist/esm/loader.js +11 -0
  36. package/dist/index.cjs.js +1 -0
  37. package/dist/index.js +1 -0
  38. package/dist/stencil.config.dev.js +20 -0
  39. package/dist/stencil.config.js +20 -0
  40. package/dist/storybook/main.js +43 -0
  41. package/dist/storybook/preview.js +9 -0
  42. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/libs/common/src/storybook/storybook-utils.d.ts +39 -0
  43. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/libs/common/src/types/casino/powerups.d.ts +60 -0
  44. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/packages/stencil/bonus-powerups-ingame-detail/stencil.config.d.ts +2 -0
  45. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/packages/stencil/bonus-powerups-ingame-detail/stencil.config.dev.d.ts +2 -0
  46. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/packages/stencil/bonus-powerups-ingame-detail/storybook/main.d.ts +3 -0
  47. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/packages/stencil/bonus-powerups-ingame-detail/storybook/preview.d.ts +70 -0
  48. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/tools/plugins/index.d.ts +4 -0
  49. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +12 -0
  50. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +5 -0
  51. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/tools/plugins/vite-chunk-plugin.d.ts +6 -0
  52. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/bonus-powerups-ingame-detail/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +4 -0
  53. package/dist/types/components/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail.d.ts +40 -0
  54. package/dist/types/components/bonus-powerups-ingame-detail/index.d.ts +1 -0
  55. package/dist/types/components/smart-loader/smart-loader.d.ts +3 -0
  56. package/dist/types/components/time-count/time-count.d.ts +17 -0
  57. package/dist/types/components.d.ts +123 -0
  58. package/dist/types/index.d.ts +1 -0
  59. package/dist/types/stencil-public-runtime.d.ts +1674 -0
  60. package/dist/types/utils/constants.d.ts +9 -0
  61. package/dist/types/utils/locale.utils.d.ts +2 -0
  62. package/dist/types/utils/utils.d.ts +2 -0
  63. package/loader/cdn.js +1 -0
  64. package/loader/index.cjs.js +1 -0
  65. package/loader/index.d.ts +24 -0
  66. package/loader/index.es2017.js +1 -0
  67. package/loader/index.js +2 -0
  68. package/loader/package.json +11 -0
  69. package/package.json +27 -0
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const bonusPowerupsIngameDetail = require('./bonus-powerups-ingame-detail-33f5b380.js');
6
+ require('./index-956ad213.js');
7
+
8
+
9
+
10
+ exports.BonusPowerupsIngameDetail = bonusPowerupsIngameDetail.BonusPowerupsIngameDetail;
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-956ad213.js');
6
+ const appGlobals = require('./app-globals-3a1e7e63.js');
7
+
8
+ const defineCustomElements = async (win, options) => {
9
+ if (typeof window === 'undefined') return undefined;
10
+ await appGlobals.globalScripts();
11
+ return index.bootstrapLazy([["bonus-powerups-ingame-detail_5.cjs",[[1,"bonus-powerups-ingame-detail",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"session":[513],"pid":[513],"powerupId":[514,"powerup-id"],"isPowering":[516,"is-powering"],"powerUp":[32],"powerUpGames":[32],"isLoading":[32],"isLoadingGames":[32],"limit":[32]},[[0,"showPowerupDetails","showPowerupDetailsHandler"]],{"session":["loadPowerUpById"],"endpoint":["loadPowerUpById"],"language":["loadPowerUpById"],"pid":["loadPowerUpById"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"translationUrl":["handleNewTranslations"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"smart-loader"],[0,"time-count-detail",{"expireTime":[1,"expire-time"],"language":[1],"pid":[520],"displayTime":[32],"isExpireInDay1":[32],"timeLeft":[32]},null,{"expireTime":["startTimeChanged"],"timeLeft":["timeLeftChanged"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
12
+ };
13
+
14
+ exports.setNonce = index.setNonce;
15
+ exports.defineCustomElements = defineCustomElements;
@@ -0,0 +1,11 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_4119_5439)">
3
+ <path d="M11.1533 12.8332C11.8242 11.9932 12.25 10.9315 12.25 9.759C12.25 6.959 9.7475 4.6665 6.69667 4.6665H1.75" stroke="white" stroke-width="0.952264" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M5.25 1.16699L1.75 4.66699L5.25 8.16699" stroke="white" stroke-width="0.952264" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </g>
6
+ <defs>
7
+ <clipPath id="clip0_4119_5439">
8
+ <rect width="14" height="14" fill="white"/>
9
+ </clipPath>
10
+ </defs>
11
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2.33398 2.3335L7.00065 7.00016L2.33398 11.6668" stroke="white" stroke-width="0.952264" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M7 2.3335L11.6667 7.00016L7 11.6668" stroke="white" stroke-width="0.952264" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2.87935 2.15646e-07L4 4.54064e-07C4.27614 4.54064e-07 4.5 0.223858 4.5 0.5C4.5 0.776143 4.27614 1 4 1H2.9C2.47171 1 2.18056 1.00039 1.95552 1.01878C1.73631 1.03669 1.62421 1.06915 1.54601 1.10899C1.35785 1.20487 1.20487 1.35785 1.10899 1.54601C1.06915 1.62421 1.03669 1.73631 1.01878 1.95552C1.00039 2.18056 1 2.47171 1 2.9V7.1C1 7.52829 1.00039 7.81944 1.01878 8.04448C1.03669 8.26369 1.06915 8.37579 1.10899 8.45399C1.20487 8.64215 1.35785 8.79513 1.54601 8.89101C1.62421 8.93085 1.73631 8.96331 1.95552 8.98122C2.18056 8.99961 2.47171 9 2.9 9H7.1C7.52829 9 7.81944 8.99961 8.04448 8.98122C8.26369 8.96331 8.37579 8.93085 8.45399 8.89101C8.64215 8.79513 8.79513 8.64215 8.89101 8.45399C8.93085 8.37579 8.96331 8.26369 8.98122 8.04448C8.99961 7.81944 9 7.52829 9 7.1V6C9 5.72386 9.22386 5.5 9.5 5.5C9.77614 5.5 10 5.72386 10 6V7.12066C10 7.52314 10 7.85532 9.9779 8.12591C9.95494 8.40696 9.90566 8.66531 9.78201 8.90798C9.59027 9.28431 9.28431 9.59027 8.90798 9.78201C8.66531 9.90566 8.40696 9.95494 8.12591 9.9779C7.85532 10 7.52314 10 7.12066 10H2.87934C2.47686 10 2.14468 10 1.87409 9.9779C1.59304 9.95494 1.33469 9.90566 1.09202 9.78201C0.715696 9.59027 0.409734 9.28431 0.217988 8.90798C0.094342 8.66531 0.0450599 8.40696 0.0220973 8.12591C-1.14068e-05 7.85532 -6.16205e-06 7.52314 2.15646e-07 7.12065V2.87935C-6.16205e-06 2.47687 -1.14068e-05 2.14469 0.0220973 1.87409C0.0450599 1.59304 0.094342 1.33469 0.217987 1.09202C0.409734 0.715695 0.715695 0.409734 1.09202 0.217987C1.33469 0.094342 1.59304 0.0450599 1.87409 0.0220973C2.14469 -1.14068e-05 2.47687 -6.16205e-06 2.87935 2.15646e-07ZM5.99999 0.500005C5.99999 0.223863 6.22385 5.22244e-06 6.49999 5.22244e-06H9.49999C9.77613 5.22244e-06 9.99999 0.223863 9.99999 0.500005L9.99999 3.5C9.99999 3.77615 9.77613 4 9.49999 4.00001C9.22385 4.00001 8.99999 3.77615 8.99999 3.50001L8.99999 1.70711L5.35355 5.35355C5.15829 5.54882 4.84171 5.54882 4.64645 5.35355C4.45119 5.15829 4.45118 4.84171 4.64645 4.64645L8.29288 1.00001H6.49999C6.22385 1.00001 5.99999 0.776148 5.99999 0.500005Z" fill="#00B541"/>
3
+ </svg>
@@ -0,0 +1,15 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14"
2
+ fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <g clip-path="url(#clip0_4119_5439)">
4
+ <path d="M11.1533 12.8332C11.8242 11.9932 12.25 10.9315 12.25 9.759C12.25 6.959 9.7475 4.6665 6.69667 4.6665H1.75"
5
+ stroke="currentColor" stroke-width="0.952264" stroke-miterlimit="10" stroke-linecap="round"
6
+ stroke-linejoin="round" />
7
+ <path d="M5.25 1.16699L1.75 4.66699L5.25 8.16699" stroke="currentColor" stroke-width="0.952264" stroke-miterlimit="10"
8
+ stroke-linecap="round" stroke-linejoin="round" />
9
+ </g>
10
+ <defs>
11
+ <clipPath id="clip0_4119_5439">
12
+ <rect width="14" height="14" fill="white" />
13
+ </clipPath>
14
+ </defs>
15
+ </svg>
@@ -0,0 +1,27 @@
1
+ {
2
+ "entries": [
3
+ "components/bonus-powerups-ingame-detail/bonus-powerups-ingame-detail.js",
4
+ "components/smart-loader/smart-loader.js",
5
+ "components/time-count/time-count.js"
6
+ ],
7
+ "compiler": {
8
+ "name": "@stencil/core",
9
+ "version": "4.19.2",
10
+ "typescriptVersion": "5.4.5"
11
+ },
12
+ "collections": [
13
+ {
14
+ "name": "@everymatrix/ui-image",
15
+ "tags": [
16
+ "ui-image"
17
+ ]
18
+ },
19
+ {
20
+ "name": "@everymatrix/ui-skeleton",
21
+ "tags": [
22
+ "ui-skeleton"
23
+ ]
24
+ }
25
+ ],
26
+ "bundles": []
27
+ }
@@ -0,0 +1,304 @@
1
+ @charset "UTF-8";
2
+ :host {
3
+ display: block;
4
+ height: 100%;
5
+ }
6
+
7
+ .IngamePowerUpDetailContainer {
8
+ gap: 5px;
9
+ display: flex;
10
+ padding: var(--emw--ingame-power-container-padding, 8px);
11
+ height: 100%;
12
+ justify-content: space-between;
13
+ flex-direction: column;
14
+ /* 内容区域样式 */
15
+ }
16
+ .IngamePowerUpDetailContainer .CircleLinearBorder {
17
+ position: relative;
18
+ width: 26px;
19
+ height: 26px;
20
+ border-radius: 20px;
21
+ background: none;
22
+ overflow: hidden;
23
+ border: 1.5px solid transparent;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ cursor: pointer;
28
+ }
29
+ .IngamePowerUpDetailContainer .CircleLinearBorder svg {
30
+ border-radius: 20px;
31
+ padding: 4.5px;
32
+ background: var(--emw--ingame-color-powerup-bg, rgba(9, 9, 9, 0.8980392157));
33
+ z-index: 1;
34
+ }
35
+ .IngamePowerUpDetailContainer .CircleLinearBorder::before {
36
+ content: "";
37
+ position: absolute;
38
+ top: -1.5px;
39
+ left: -1.5px;
40
+ right: -1.5px;
41
+ bottom: -1.5px;
42
+ z-index: -1;
43
+ border-radius: 21.5px;
44
+ background: linear-gradient(0deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0666666667)), var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0666666667))), linear-gradient(35.22deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0)), var(--emw--ingame-color-white30, rgba(255, 255, 255, 0.5490196078)) 89.19%);
45
+ }
46
+ .IngamePowerUpDetailContainer .FlexRow {
47
+ display: flex;
48
+ flex-direction: row;
49
+ width: 100%;
50
+ }
51
+ .IngamePowerUpDetailContainer .FlexRow .RowLeft, .IngamePowerUpDetailContainer .FlexRow .RowRight {
52
+ display: flex;
53
+ flex-direction: row;
54
+ align-items: center;
55
+ }
56
+ .IngamePowerUpDetailContainer .NoData, .IngamePowerUpDetailContainer .Loading {
57
+ padding: 15px;
58
+ }
59
+ .IngamePowerUpDetailContainer .MainContainer {
60
+ padding: 15px;
61
+ }
62
+ .IngamePowerUpDetailContainer .TopBar {
63
+ display: flex;
64
+ align-items: center;
65
+ padding: 0;
66
+ }
67
+ .IngamePowerUpDetailContainer .TopBar .ReturnIcon {
68
+ width: 26px;
69
+ height: 26px;
70
+ display: flex;
71
+ border-radius: 20px;
72
+ padding: 0;
73
+ backdrop-filter: blur(13.7647px);
74
+ justify-content: center;
75
+ align-items: center;
76
+ }
77
+ .IngamePowerUpDetailContainer .TopBar .ReturnIcon svg {
78
+ color: var(--emw--ingame-color-white60, #f0f0f0);
79
+ }
80
+ .IngamePowerUpDetailContainer .TopBar .Title {
81
+ font-weight: 600;
82
+ font-size: 1.2rem;
83
+ line-height: 100%;
84
+ text-align: center;
85
+ vertical-align: middle;
86
+ flex: 1;
87
+ color: var(--emw--ingame-color-neutural-95, #EDEFF2);
88
+ }
89
+ .IngamePowerUpDetailContainer .DetailInfo .Description, .IngamePowerUpDetailContainer .DetailInfo .TextContent {
90
+ font-weight: 400;
91
+ font-size: 0.9rem;
92
+ line-height: 1.1rem;
93
+ vertical-align: middle;
94
+ color: var(--emw--ingame-color-white70, rgba(255, 255, 255, 0.6980392157));
95
+ }
96
+ .IngamePowerUpDetailContainer .DetailInfo .Card {
97
+ margin-top: 20px;
98
+ width: 100%;
99
+ height: 74px;
100
+ color: var(--emw--ingame-color-black40, rgba(9, 9, 9, 0.5019607843));
101
+ backdrop-filter: blur(22.9411773682px);
102
+ display: flex;
103
+ flex-direction: row;
104
+ align-content: space-around;
105
+ text-align: center;
106
+ }
107
+ .IngamePowerUpDetailContainer .DetailInfo .Card .Label {
108
+ color: var(--emw--ingame-color-neutural-95, #C9CACB);
109
+ }
110
+ .IngamePowerUpDetailContainer .DetailInfo .Card .Value {
111
+ color: var(--emw--ingame-color-text, #fff);
112
+ line-height: 150%;
113
+ letter-spacing: 0.9px;
114
+ font-weight: 600;
115
+ }
116
+ .IngamePowerUpDetailContainer .DetailInfo .CircleLinearBorder::before {
117
+ background: linear-gradient(0deg, var(--emw--ingame-color-white20, rgba(255, 255, 255, 0.1568627451)), var(--emw--ingame-color-white20, rgba(255, 255, 255, 0.07))), linear-gradient(358deg, var(--emw--ingame-color-white20, rgba(255, 255, 255, 0.15)) 33.61%, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.11)) 89.19%);
118
+ top: -1px;
119
+ left: -1px;
120
+ right: -1px;
121
+ bottom: -1px;
122
+ border-radius: 21px;
123
+ }
124
+ .IngamePowerUpDetailContainer .DetailInfo .CircleInner {
125
+ background-color: var(--emw--ingame-color-neutural, rgba(9, 9, 9, 0.5019607843));
126
+ width: calc(100% - 31px);
127
+ border-radius: 19px;
128
+ z-index: 1;
129
+ padding: 15px;
130
+ height: calc(100% - 32px);
131
+ align-items: center;
132
+ justify-content: space-evenly;
133
+ }
134
+ .IngamePowerUpDetailContainer .DetailInfo .TermsUrl {
135
+ height: 80px;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ flex-direction: column;
140
+ gap: 6px;
141
+ }
142
+ .IngamePowerUpDetailContainer .DetailInfo .TermsUrl .Label {
143
+ color: #00B541;
144
+ display: flex;
145
+ justify-content: center;
146
+ text-decoration: underline;
147
+ }
148
+ .IngamePowerUpDetailContainer .DetailInfo .TermsUrl .Label .GoToOpenIcon {
149
+ margin-left: 10px;
150
+ }
151
+ .IngamePowerUpDetailContainer .DetailInfo .Card.MultiplierContainer {
152
+ width: 100%;
153
+ }
154
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper {
155
+ height: 126px;
156
+ flex-direction: column;
157
+ display: flex;
158
+ justify-content: space-evenly;
159
+ }
160
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .GamesHeader {
161
+ justify-content: space-between;
162
+ }
163
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .GamesHeader .RowLeft {
164
+ gap: 5px;
165
+ }
166
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .GamesHeader .GamesTitle {
167
+ color: var(--emw--ingame-color-text, #fff);
168
+ line-height: 150%;
169
+ letter-spacing: 0.9px;
170
+ font-weight: 600;
171
+ }
172
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .GamesHeader .RowRight {
173
+ gap: 5px;
174
+ }
175
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .GamesHeader .RowRight .DetailIcon {
176
+ height: 23px;
177
+ }
178
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Games {
179
+ width: 100%;
180
+ overflow: Hidden;
181
+ }
182
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Container {
183
+ width: fit-content;
184
+ display: flex;
185
+ }
186
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game {
187
+ height: 60px;
188
+ width: 85px;
189
+ margin: 10px;
190
+ position: relative;
191
+ }
192
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game .GameMask {
193
+ display: none;
194
+ transition: display;
195
+ transition-duration: 0.2s;
196
+ opacity: 0;
197
+ position: absolute;
198
+ width: 70%;
199
+ height: 100%;
200
+ font-size: 0.85rem;
201
+ color: var(--emw--ingame-color-text, #fff);
202
+ }
203
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game .GameMask .GameStartBtn {
204
+ width: 80px;
205
+ height: 22px;
206
+ border-radius: 8px;
207
+ opacity: 1;
208
+ padding: 4px 5px;
209
+ background: linear-gradient(180deg, var(--emw--color-powup-green, #24B24E) 0%, var(--emw--color-powup-light-green, #18CE51) 100%);
210
+ border: 1px solid var(--emw--ingame-color-white, #FFFFFF);
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: space-between;
214
+ cursor: pointer;
215
+ }
216
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game .GameMask .GameStartBtn .PlayIcon {
217
+ background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1ZM0 5.5C0 2.46243 2.46243 0 5.5 0C8.53757 0 11 2.46243 11 5.5C11 8.53757 8.53757 11 5.5 11C2.46243 11 0 8.53757 0 5.5ZM5.12255 3.21652C5.12728 3.21956 5.13199 3.22259 5.13668 3.22561L7.49698 4.74294C7.50129 4.74571 7.50562 4.74849 7.50998 4.75129C7.58551 4.79982 7.66805 4.85285 7.73381 4.90413C7.80355 4.95852 7.91363 5.05446 7.97854 5.20809C8.0574 5.39471 8.0574 5.60529 7.97854 5.79191C7.91363 5.94554 7.80355 6.04148 7.73381 6.09587C7.66805 6.14715 7.58551 6.20018 7.50998 6.24871C7.50562 6.25151 7.50129 6.25429 7.49698 6.25706L5.13668 7.77439C5.13199 7.77741 5.12727 7.78045 5.12255 7.78348C5.03469 7.84 4.9423 7.89941 4.86094 7.94176C4.77909 7.98436 4.63056 8.05332 4.44657 8.04018C4.22957 8.02468 4.02999 7.91572 3.89961 7.74157C3.78907 7.59391 3.76675 7.43167 3.75832 7.33979C3.74995 7.24844 3.74997 7.1386 3.75 7.03414C3.75 7.02852 3.75 7.02292 3.75 7.01733V3.98267C3.75 3.97708 3.75 3.97148 3.75 3.96586C3.74997 3.8614 3.74995 3.75156 3.75832 3.66021C3.76675 3.56833 3.78907 3.40609 3.89961 3.25843C4.02999 3.08428 4.22957 2.97532 4.44657 2.95982C4.63056 2.94668 4.77909 3.01564 4.86094 3.05824C4.94231 3.10059 5.03469 3.16001 5.12255 3.21652ZM4.75 4.16583V6.83417L6.82537 5.5L4.75 4.16583Z" fill="white"/> <path d="M4.75 6.83417V4.16583L6.82537 5.5L4.75 6.83417Z" fill="white"/></svg>');
218
+ height: 16px;
219
+ width: 16px;
220
+ background-repeat: no-repeat;
221
+ background-size: contain;
222
+ }
223
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game:hover img {
224
+ opacity: 0.4;
225
+ filter: blur(1.5px);
226
+ }
227
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game:hover .GameMask {
228
+ mix-blend-mode: screen;
229
+ background-color: var(--emw--color-powup-green, #24B24E);
230
+ display: flex;
231
+ justify-content: center;
232
+ align-items: center;
233
+ position: absolute;
234
+ width: 100%;
235
+ opacity: 1;
236
+ left: 0;
237
+ height: 100%;
238
+ top: 0;
239
+ border-radius: 8px;
240
+ }
241
+ .IngamePowerUpDetailContainer .DetailInfo .GamesWrapper .Game:hover .GameMask .GameStartBtn {
242
+ opacity: 1;
243
+ }
244
+ .IngamePowerUpDetailContainer .ActiveBtn {
245
+ color: var(--emw--ingame-color-black, #090909);
246
+ position: relative;
247
+ background: none;
248
+ overflow: hidden;
249
+ min-width: 88px;
250
+ height: 36px;
251
+ font-weight: bold;
252
+ gap: 10px;
253
+ border-radius: 20px;
254
+ animation-duration: 0ms;
255
+ }
256
+ .IngamePowerUpDetailContainer .ActiveBtn.Disabled .content {
257
+ background-color: var(--emw--ingame-color-white20, rgba(255, 255, 255, 0.2));
258
+ color: var(--emw--ingame-color-white20, rgba(255, 255, 255, 0.2));
259
+ }
260
+ .IngamePowerUpDetailContainer .ActiveBtn.Disabled:hover, .IngamePowerUpDetailContainer .ActiveBtn.Disabled:before {
261
+ box-shadow: none;
262
+ background: none;
263
+ }
264
+ .IngamePowerUpDetailContainer .ActiveBtn:hover {
265
+ box-shadow: 0px 0px 3px 5px var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.1019607843));
266
+ }
267
+ .IngamePowerUpDetailContainer .ActiveBtn::before {
268
+ content: "";
269
+ position: absolute;
270
+ top: -1px;
271
+ left: -1px;
272
+ right: -1px;
273
+ bottom: -1px;
274
+ z-index: 1;
275
+ border-radius: 18px;
276
+ background: linear-gradient(218deg, var(--emw--ingame-color-white60, rgba(255, 255, 255, 0.568627451)), var(--emw--ingame-color-white30, rgba(255, 255, 255, 0.3019607843))), linear-gradient(93deg, var(--emw--ingame-color-white60, rgba(255, 255, 255, 0.6588235294)) 33.61%, var(--emw--ingame-color-white60, rgba(255, 255, 255, 0.5411764706)) 89.19%);
277
+ }
278
+ .IngamePowerUpDetailContainer .ActiveBtn .content {
279
+ line-height: 1.6;
280
+ background: var(--emw--ingame-color-powerup-brightgreen, #00FA5A);
281
+ border-radius: 18px;
282
+ padding: 1px;
283
+ height: calc(100% - 4px);
284
+ width: calc(100% - 4px);
285
+ text-align: center;
286
+ align-items: center;
287
+ display: flex;
288
+ justify-content: center;
289
+ z-index: 1;
290
+ }
291
+ .IngamePowerUpDetailContainer .BottomBar {
292
+ width: calc(100% - 30px);
293
+ height: 60px;
294
+ opacity: 1;
295
+ gap: 8px;
296
+ padding: 15px;
297
+ background: rgba(9, 9, 9, 0.8);
298
+ border-top: 2px solid;
299
+ border-image-source: linear-gradient(89.94deg, var(--emw--ingame-color-powerup-primary2, #003E5C) 0.05%, var(--emw--ingame-color-powerup-primary1, #113B21) 87.69%);
300
+ backdrop-filter: blur(32.1176490784px);
301
+ border-image-slice: 1;
302
+ align-items: center;
303
+ border-radius: 0 0 20px 20px;
304
+ }