@everymatrix/casino-header-controller 1.37.3 → 1.37.4
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.
- package/CHANGELOG.md +0 -1
- package/dist/casino-header-controller.js +3 -1
- package/dist/casino-header-controller.js.map +1 -1
- package/index.html +19 -24
- package/package.json +3 -8
- package/src/CasinoHeaderController.svelte +384 -976
|
@@ -11,131 +11,137 @@
|
|
|
11
11
|
import '@everymatrix/player-account-balance-modal';
|
|
12
12
|
import '@everymatrix/player-deposit';
|
|
13
13
|
|
|
14
|
-
import * as countryFlags from 'country-flag-icons/string/3x2';
|
|
15
|
-
|
|
16
|
-
// @ts-ignore
|
|
17
14
|
import everymatrixLogo from './images/everymatrix-logo-white.png';
|
|
18
15
|
|
|
19
|
-
export let session:
|
|
20
|
-
export let userid:
|
|
21
|
-
export let endpoint:
|
|
22
|
-
export let cmsendpoint:
|
|
23
|
-
export let cmsenv:
|
|
24
|
-
export let lang:
|
|
25
|
-
export let languageslist:
|
|
26
|
-
export let activecategory:
|
|
27
|
-
export let translationurl:
|
|
28
|
-
export let customlocaleidentifier:
|
|
29
|
-
export let gmversion:
|
|
30
|
-
export let countryflagheader:
|
|
31
|
-
export let displaybalanceoption:
|
|
32
|
-
export let countryflaghamburger:
|
|
33
|
-
export let hasdefaultamount:
|
|
16
|
+
export let session:string = '';
|
|
17
|
+
export let userid:string = '';
|
|
18
|
+
export let endpoint:string = '';
|
|
19
|
+
export let cmsendpoint:string = '';
|
|
20
|
+
export let cmsenv:string = 'stage';
|
|
21
|
+
export let lang:string = 'en';
|
|
22
|
+
export let languageslist:string = 'en, ro';
|
|
23
|
+
export let activecategory:string = '';
|
|
24
|
+
export let translationurl:string = '';
|
|
25
|
+
export let customlocaleidentifier:string = '';
|
|
26
|
+
export let gmversion:string = '';
|
|
27
|
+
export let countryflagheader:string = 'false';
|
|
28
|
+
export let displaybalanceoption:string = 'All';
|
|
29
|
+
export let countryflaghamburger:string = 'false';
|
|
30
|
+
export let hasdefaultamount:string = '';
|
|
34
31
|
export let playercurrency: string ='';
|
|
35
32
|
|
|
36
33
|
//short cashier
|
|
37
|
-
export let shortcashierenabled:
|
|
38
|
-
export let producttype:
|
|
39
|
-
export let successurl:
|
|
40
|
-
export let failurl:
|
|
41
|
-
export let cancelurl:
|
|
42
|
-
export let sportsurl:
|
|
43
|
-
export let casinourl:
|
|
44
|
-
export let contacturl:
|
|
45
|
-
export let homeurl:
|
|
46
|
-
export let depositurl:
|
|
47
|
-
|
|
48
|
-
export let actionevent:
|
|
49
|
-
|
|
50
|
-
export let userroles:
|
|
51
|
-
export let showsubgroups:
|
|
52
|
-
export let clientstyling:
|
|
53
|
-
export let clientstylingurl:
|
|
54
|
-
|
|
55
|
-
export let currencyseparator:
|
|
56
|
-
export let currencydecimal:
|
|
57
|
-
export let currencyprecision:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
let
|
|
61
|
-
let
|
|
62
|
-
let
|
|
63
|
-
let
|
|
34
|
+
export let shortcashierenabled:string = '';
|
|
35
|
+
export let producttype:string = '';
|
|
36
|
+
export let successurl:string = '';
|
|
37
|
+
export let failurl:string = '';
|
|
38
|
+
export let cancelurl:string = '';
|
|
39
|
+
export let sportsurl:string = '';
|
|
40
|
+
export let casinourl:string = '';
|
|
41
|
+
export let contacturl:string = '';
|
|
42
|
+
export let homeurl:string = '';
|
|
43
|
+
export let depositurl:string = '';
|
|
44
|
+
|
|
45
|
+
export let actionevent:string = '';
|
|
46
|
+
|
|
47
|
+
export let userroles:string = '';
|
|
48
|
+
export let showsubgroups:string = 'false';
|
|
49
|
+
export let clientstyling:string = '';
|
|
50
|
+
export let clientstylingurl:string = '';
|
|
51
|
+
|
|
52
|
+
export let currencyseparator:string = '';
|
|
53
|
+
export let currencydecimal:string = '';
|
|
54
|
+
export let currencyprecision:string = '';
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
let primaryActiveIndex:string;
|
|
58
|
+
let secondaryActiveIndex:string;
|
|
59
|
+
let identity:string = "HeaderMenu";
|
|
60
|
+
let customStylingContainer:HTMLElement;
|
|
64
61
|
|
|
65
62
|
setupI18n({ withLocale: 'en', translations: {}});
|
|
66
63
|
|
|
67
|
-
const setTranslationUrl = ():
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}).catch((err: any): void => {
|
|
75
|
-
console.log(err);
|
|
64
|
+
const setTranslationUrl = ():void => {
|
|
65
|
+
let url:string = translationurl;
|
|
66
|
+
|
|
67
|
+
fetch(url).then((res:any) => res.json())
|
|
68
|
+
.then((res) => {
|
|
69
|
+
Object.keys(res).forEach((item:any):void => {
|
|
70
|
+
addNewMessages(item, res[item]);
|
|
76
71
|
});
|
|
72
|
+
}).catch((err:any) => {
|
|
73
|
+
console.log(err);
|
|
74
|
+
});
|
|
77
75
|
}
|
|
78
76
|
|
|
79
|
-
Object.keys(TRANSLATIONS).forEach((item:
|
|
77
|
+
Object.keys(TRANSLATIONS).forEach((item:any) => {
|
|
80
78
|
addNewMessages(item, TRANSLATIONS[item]);
|
|
81
79
|
});
|
|
82
80
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
let
|
|
94
|
-
let
|
|
95
|
-
let
|
|
96
|
-
let
|
|
97
|
-
let
|
|
98
|
-
let
|
|
99
|
-
let
|
|
100
|
-
let
|
|
101
|
-
|
|
102
|
-
let
|
|
103
|
-
let
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
const menuAction = (
|
|
116
|
-
switch (
|
|
81
|
+
const genericIcon:string = `<svg version="1.1" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 30px; color: #fff;" x="0px" y="0px"
|
|
82
|
+
viewBox="0 0 384.971 384.971" style="enable-background:new 0 0 384.971 384.971;" xml:space="preserve">
|
|
83
|
+
<path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
|
|
84
|
+
C5.39,0.001,0,5.39,0,12.031V372.94c0,6.641,5.39,12.03,12.03,12.03h168.424c6.641,0,12.03-5.39,12.03-12.03
|
|
85
|
+
C192.485,366.299,187.095,360.91,180.455,360.91z"/>
|
|
86
|
+
<path style="color: var(--emfe-w-color-white, #FFFFFF)" d="M381.481,184.088l-83.009-84.2c-4.704-4.752-12.319-4.74-17.011,0c-4.704,4.74-4.704,12.439,0,17.179l62.558,63.46H96.279
|
|
87
|
+
c-6.641,0-12.03,5.438-12.03,12.151c0,6.713,5.39,12.151,12.03,12.151h247.74l-62.558,63.46c-4.704,4.752-4.704,12.439,0,17.179
|
|
88
|
+
c4.704,4.752,12.319,4.752,17.011,0l82.997-84.2C386.113,196.588,386.161,188.756,381.481,184.088z"/>
|
|
89
|
+
</svg>`;
|
|
90
|
+
|
|
91
|
+
let mainMenuArray:Array<any> = [];
|
|
92
|
+
let secondaryMenuArray:Array<any> = [];
|
|
93
|
+
let selectedLanguage:string = '';
|
|
94
|
+
let hamburgerURL:URL;
|
|
95
|
+
let headerURL:URL;
|
|
96
|
+
let logoURL:URL;
|
|
97
|
+
let isLoading:boolean = true;
|
|
98
|
+
let logoFromCms:boolean = false;
|
|
99
|
+
|
|
100
|
+
let isOptionsListVisible:boolean = false;
|
|
101
|
+
let mobileView:boolean = false;
|
|
102
|
+
let userAgent:string = window.navigator.userAgent;
|
|
103
|
+
let isLoggedIn:boolean = false;
|
|
104
|
+
let playerID:string = '';
|
|
105
|
+
let sessionID:string = '';
|
|
106
|
+
let loginActive:boolean = true;
|
|
107
|
+
let language:string = '';
|
|
108
|
+
let languagesArray:Array<string> = [];
|
|
109
|
+
let hamburgerMenuActive:boolean = false;
|
|
110
|
+
let logoPath:string = '';
|
|
111
|
+
let shortCashierActivated:boolean = false;
|
|
112
|
+
|
|
113
|
+
const menuAction = (data: any) => {
|
|
114
|
+
switch (data) {
|
|
117
115
|
case 'login':
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
116
|
+
loginActive = true;
|
|
117
|
+
window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
|
|
118
|
+
|
|
119
|
+
//Analytics event
|
|
120
|
+
if (typeof gtag == 'function'){
|
|
121
|
+
gtag('event', 'OpenLoginModal', {
|
|
122
|
+
'context': 'HeaderController'
|
|
123
|
+
});
|
|
124
|
+
}
|
|
121
125
|
break;
|
|
122
126
|
|
|
123
127
|
case 'register':
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
128
|
+
loginActive = false;
|
|
129
|
+
window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
|
|
130
|
+
|
|
131
|
+
//Analytics event
|
|
132
|
+
if (typeof gtag == 'function'){
|
|
133
|
+
gtag('event', 'OpenRegisterModal', {
|
|
134
|
+
'context': 'HeaderController'
|
|
135
|
+
});
|
|
136
|
+
}
|
|
127
137
|
break;
|
|
128
138
|
|
|
129
139
|
case 'lobby':
|
|
130
|
-
window.postMessage({
|
|
131
|
-
|
|
132
|
-
gtagCall('GoToHomepage');
|
|
140
|
+
window.postMessage({type: 'GoToHomepage'}, window.location.href);
|
|
133
141
|
break;
|
|
134
142
|
|
|
135
143
|
case 'myaccount':
|
|
136
|
-
window.postMessage({
|
|
137
|
-
|
|
138
|
-
gtagCall('GoToMyAccount');
|
|
144
|
+
window.postMessage({type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent)}, window.location.href);
|
|
139
145
|
break;
|
|
140
146
|
|
|
141
147
|
case 'deposit':
|
|
@@ -143,28 +149,29 @@
|
|
|
143
149
|
shortCashierActivated = true;
|
|
144
150
|
window.postMessage({ type: 'DisableScroll' }, window.location.href);
|
|
145
151
|
} else {
|
|
146
|
-
window.postMessage({
|
|
152
|
+
window.postMessage({type: 'GoToDeposit'}, window.location.href);
|
|
147
153
|
}
|
|
148
154
|
|
|
149
|
-
|
|
155
|
+
//Analytics event
|
|
156
|
+
if (typeof gtag == 'function'){
|
|
157
|
+
gtag('event', 'GoToDeposit', {
|
|
158
|
+
'context': 'HeaderController'
|
|
159
|
+
});
|
|
160
|
+
}
|
|
150
161
|
break;
|
|
151
162
|
|
|
152
163
|
case 'language':
|
|
153
|
-
window.postMessage({
|
|
154
|
-
break;
|
|
155
|
-
|
|
156
|
-
case 'page':
|
|
157
|
-
window.postMessage({ type: 'NavigateTo', item: data, path: data.path });
|
|
164
|
+
window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
|
|
158
165
|
break;
|
|
159
166
|
}
|
|
160
167
|
}
|
|
161
168
|
|
|
162
|
-
const toggleMenu = ()
|
|
163
|
-
hamburgerMenuActive =
|
|
164
|
-
window.postMessage({
|
|
169
|
+
const toggleMenu = () => {
|
|
170
|
+
hamburgerMenuActive = true;
|
|
171
|
+
window.postMessage({type: 'OpenHamburgerMenuModal'}, window.location.href);
|
|
165
172
|
}
|
|
166
173
|
|
|
167
|
-
const messageHandler = (e: any)
|
|
174
|
+
const messageHandler = (e: any) => {
|
|
168
175
|
if (e.data) {
|
|
169
176
|
switch (e.data.type) {
|
|
170
177
|
case 'UserSessionID':
|
|
@@ -174,7 +181,7 @@
|
|
|
174
181
|
break;
|
|
175
182
|
|
|
176
183
|
case 'CloseHamburgerMenu':
|
|
177
|
-
window.postMessage({ type: 'EnableScroll'
|
|
184
|
+
window.postMessage({ type: 'EnableScroll'}, window.location.href);
|
|
178
185
|
if (e.data.showhamburger) {
|
|
179
186
|
hamburgerMenuActive = false;
|
|
180
187
|
}
|
|
@@ -185,9 +192,6 @@
|
|
|
185
192
|
break;
|
|
186
193
|
|
|
187
194
|
case 'LanguageChanged':
|
|
188
|
-
if (e.data.selectedLanguage.toLowerCase() != lang) {
|
|
189
|
-
primaryMenuLoading = true;
|
|
190
|
-
}
|
|
191
195
|
createCMSUrls();
|
|
192
196
|
getHeaderMenusData(headerURL);
|
|
193
197
|
break;
|
|
@@ -203,55 +207,31 @@
|
|
|
203
207
|
case 'RequestHeaderHeight':
|
|
204
208
|
window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
|
|
205
209
|
break;
|
|
206
|
-
|
|
207
|
-
case 'BalanceModalStatus':
|
|
208
|
-
isBalanceOpened = e.data.status == 'open';
|
|
209
|
-
adaptDepositBackground(isBalanceOpened);
|
|
210
|
-
break;
|
|
211
|
-
|
|
212
|
-
case 'BalancedFetched':
|
|
213
|
-
setInitialStateForDepositBackground();
|
|
214
|
-
break;
|
|
215
210
|
}
|
|
216
211
|
}
|
|
217
212
|
}
|
|
218
213
|
|
|
219
|
-
const
|
|
220
|
-
let width = depositContainer.getBoundingClientRect().width;
|
|
221
|
-
backgroundContainer.style.width = `${width}px`;
|
|
222
|
-
backgroundContainer.style.left = `${balanceContainer.getBoundingClientRect().width}px`;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
const adaptDepositBackground = (isBalanceOpened): void => {
|
|
226
|
-
if (isBalanceOpened) {
|
|
227
|
-
let width = balanceContainer.getBoundingClientRect().width;
|
|
228
|
-
backgroundContainer.style.width = `${width}px`;
|
|
229
|
-
backgroundContainer.style.left = `0px`;
|
|
230
|
-
} else {
|
|
231
|
-
setInitialStateForDepositBackground();
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
const setSession = (): void => {
|
|
214
|
+
const setSession = () => {
|
|
236
215
|
isLoggedIn = true;
|
|
237
216
|
sessionID = session;
|
|
238
217
|
}
|
|
239
218
|
|
|
240
|
-
const closeShortCashier = (event
|
|
219
|
+
const closeShortCashier = (event?) => {
|
|
241
220
|
shortCashierActivated = false;
|
|
242
221
|
window.postMessage({ type: 'EnableScroll' }, window.location.href);
|
|
243
222
|
event?.stopPropagation();
|
|
244
223
|
}
|
|
245
224
|
|
|
246
|
-
const createCMSUrls = ()
|
|
247
|
-
headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
|
|
225
|
+
const createCMSUrls = () => {
|
|
226
|
+
headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
|
|
248
227
|
hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
|
|
249
228
|
logoURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/op-options/style`);
|
|
250
229
|
|
|
251
|
-
let device = getDevice(userAgent)
|
|
230
|
+
let device = getDevice(userAgent)
|
|
252
231
|
|
|
253
232
|
headerURL.searchParams.append('env', cmsenv);
|
|
254
233
|
headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
|
|
234
|
+
//headerURL.searchParams.append('platform', 'dk');
|
|
255
235
|
headerURL.searchParams.append('userRoles', userroles);
|
|
256
236
|
|
|
257
237
|
if (device) {
|
|
@@ -268,69 +248,75 @@
|
|
|
268
248
|
}
|
|
269
249
|
hamburgerURL.searchParams.append('env', cmsenv);
|
|
270
250
|
hamburgerURL.searchParams.append('language', selectedLanguage.toLowerCase());
|
|
251
|
+
//hamburgerURL.searchParams.append('platform', 'dk');
|
|
271
252
|
hamburgerURL.searchParams.append('userRoles', userroles);
|
|
272
253
|
|
|
273
|
-
getHeaderMenusData(headerURL);
|
|
274
254
|
}
|
|
275
255
|
|
|
276
|
-
const setActiveLanguage = ():
|
|
256
|
+
const setActiveLanguage = ():void => {
|
|
277
257
|
setLocale(lang);
|
|
278
258
|
}
|
|
279
259
|
|
|
280
|
-
const initialLoad = ():
|
|
260
|
+
const initialLoad = ():void => {
|
|
281
261
|
languagesArray = languageslist.replace(/ /g,'').split(',');
|
|
282
262
|
languagesArray = languagesArray.map((language:string) => language.toUpperCase());
|
|
283
263
|
|
|
284
264
|
selectedLanguage = lang.toUpperCase();
|
|
285
|
-
|
|
286
265
|
createCMSUrls();
|
|
266
|
+
|
|
287
267
|
getLogo(logoURL);
|
|
268
|
+
// getHeaderMenusData need to execute after the initialLoad receives the current lang value
|
|
269
|
+
setTimeout(() => {
|
|
270
|
+
getHeaderMenusData(headerURL);
|
|
271
|
+
})
|
|
288
272
|
}
|
|
289
273
|
|
|
290
|
-
const initializeMenu = ():
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
activeIndex = primaryActiveIndex > secondaryActiveIndex ? primaryActiveIndex : secondaryActiveIndex;
|
|
274
|
+
const initializeMenu = ():void => {
|
|
275
|
+
primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
|
|
276
|
+
secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
|
|
294
277
|
}
|
|
295
278
|
|
|
296
|
-
const setActiveIndex = (activecategory
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
}
|
|
279
|
+
const setActiveIndex = (activecategory, menuList) => {
|
|
280
|
+
let result = menuList.find(item => {
|
|
281
|
+
if (activecategory.indexOf('/sport') > -1) {
|
|
282
|
+
return item.path.indexOf(activecategory) > -1;
|
|
283
|
+
} else {
|
|
284
|
+
if (item.path.includes(activecategory)) {
|
|
285
|
+
return true;
|
|
304
286
|
}
|
|
287
|
+
}
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
if (!result) {
|
|
291
|
+
result = menuList.find(item => {
|
|
292
|
+
return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
|
|
305
293
|
});
|
|
294
|
+
}
|
|
306
295
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
296
|
+
if (result) {
|
|
297
|
+
return result.id;
|
|
298
|
+
} else {
|
|
299
|
+
return -1;
|
|
300
|
+
}
|
|
301
|
+
}
|
|
312
302
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
} else {
|
|
316
|
-
return -1;
|
|
317
|
-
}
|
|
303
|
+
const sendSliderData = ():void => {
|
|
304
|
+
window.postMessage({ type: 'SliderData', identity, data: mainMenuArray }, window.location.href);
|
|
318
305
|
}
|
|
319
306
|
|
|
320
|
-
const getHeaderMenusData = (url:
|
|
307
|
+
const getHeaderMenusData = (url:any):Promise<any> => {
|
|
321
308
|
isLoading = true;
|
|
322
309
|
|
|
323
|
-
return new Promise((resolve, reject)
|
|
310
|
+
return new Promise((resolve, reject) => {
|
|
324
311
|
fetch(url)
|
|
325
|
-
.then((res: any)
|
|
326
|
-
.then((data: any)
|
|
312
|
+
.then((res: any) => res.json())
|
|
313
|
+
.then((data: any) => {
|
|
327
314
|
mainMenuArray = data.desktop.primary;
|
|
328
315
|
secondaryMenuArray = data.desktop.secondary;
|
|
329
316
|
isLoading = false;
|
|
330
|
-
primaryMenuLoading = false;
|
|
331
317
|
|
|
332
318
|
resolve(data);
|
|
333
|
-
}, (err: any)
|
|
319
|
+
}, (err: any) => {
|
|
334
320
|
isLoading = false;
|
|
335
321
|
console.error(err);
|
|
336
322
|
reject(err);
|
|
@@ -338,13 +324,13 @@
|
|
|
338
324
|
});
|
|
339
325
|
}
|
|
340
326
|
|
|
341
|
-
const getLogo = (url:
|
|
327
|
+
const getLogo = (url:any):Promise<any> => {
|
|
342
328
|
logoFromCms = false;
|
|
343
329
|
|
|
344
|
-
return new Promise((resolve, reject)
|
|
330
|
+
return new Promise((resolve, reject) => {
|
|
345
331
|
fetch(url)
|
|
346
|
-
.then((res: any)
|
|
347
|
-
.then((data: any)
|
|
332
|
+
.then((res: any) => res.json())
|
|
333
|
+
.then((data: any) => {
|
|
348
334
|
if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
|
|
349
335
|
logoPath = data.logoUrl;
|
|
350
336
|
logoFromCms = true;
|
|
@@ -352,7 +338,7 @@
|
|
|
352
338
|
logoFromCms = false;
|
|
353
339
|
}
|
|
354
340
|
resolve(data);
|
|
355
|
-
}, (err: any)
|
|
341
|
+
}, (err: any) => {
|
|
356
342
|
logoFromCms = false;
|
|
357
343
|
console.error(err);
|
|
358
344
|
reject(err);
|
|
@@ -360,11 +346,11 @@
|
|
|
360
346
|
});
|
|
361
347
|
}
|
|
362
348
|
|
|
363
|
-
const navigationTrigger = (itemData:
|
|
349
|
+
const navigationTrigger = (itemData:any) => {
|
|
364
350
|
window.postMessage({ type: 'NavigateTo', itemId: itemData.id, item: itemData, path: itemData.path, externalLink: itemData.externalLink || false, target: itemData.attrs?.target || null }, window.location.href);
|
|
365
351
|
}
|
|
366
352
|
|
|
367
|
-
const selectLanguage = (operatorLanguage:
|
|
353
|
+
const selectLanguage = (operatorLanguage:string): void => {
|
|
368
354
|
selectedLanguage = operatorLanguage;
|
|
369
355
|
isOptionsListVisible = false;
|
|
370
356
|
menuAction('language');
|
|
@@ -374,32 +360,30 @@
|
|
|
374
360
|
isOptionsListVisible = !isOptionsListVisible;
|
|
375
361
|
}
|
|
376
362
|
|
|
377
|
-
const determineFlag = (
|
|
378
|
-
let flag = operatorLanguage ? operatorLanguage.slice(-2) : selectedLanguage.slice(-2);
|
|
379
|
-
|
|
363
|
+
const determineFlag = (selectedLanguage: string): string => {
|
|
380
364
|
if (customlocaleidentifier) {
|
|
381
|
-
|
|
382
|
-
customlocaleidentifier.includes(
|
|
365
|
+
selectedLanguage =
|
|
366
|
+
customlocaleidentifier.includes(selectedLanguage.toLowerCase()) ?
|
|
383
367
|
customlocaleidentifier.slice(-2) :
|
|
384
|
-
|
|
368
|
+
selectedLanguage;
|
|
385
369
|
}
|
|
386
370
|
|
|
387
|
-
return
|
|
371
|
+
return selectedLanguage == 'EN' ? 'US' : selectedLanguage.toUpperCase();
|
|
388
372
|
}
|
|
389
373
|
|
|
390
|
-
const setClientStyling = ():
|
|
374
|
+
const setClientStyling = ():void => {
|
|
391
375
|
let sheet = document.createElement('style');
|
|
392
376
|
sheet.innerHTML = clientstyling;
|
|
393
377
|
customStylingContainer.appendChild(sheet);
|
|
394
378
|
}
|
|
395
379
|
|
|
396
|
-
const setClientStylingURL = ():
|
|
397
|
-
let url:
|
|
398
|
-
let cssFile:
|
|
380
|
+
const setClientStylingURL = ():void => {
|
|
381
|
+
let url:URL = new URL(clientstylingurl);
|
|
382
|
+
let cssFile:HTMLElement = document.createElement('style');
|
|
399
383
|
|
|
400
384
|
fetch(url.href)
|
|
401
|
-
.then((res:
|
|
402
|
-
.then((data:
|
|
385
|
+
.then((res:any) => res.text())
|
|
386
|
+
.then((data:any) => {
|
|
403
387
|
cssFile.innerHTML = data
|
|
404
388
|
|
|
405
389
|
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
@@ -409,7 +393,9 @@
|
|
|
409
393
|
onMount(async () => {
|
|
410
394
|
window.addEventListener('message', messageHandler, false);
|
|
411
395
|
|
|
412
|
-
|
|
396
|
+
if (isMobile(userAgent)) {
|
|
397
|
+
mobileView = true;
|
|
398
|
+
}
|
|
413
399
|
|
|
414
400
|
return () => {
|
|
415
401
|
window.removeEventListener('message', messageHandler);
|
|
@@ -418,7 +404,7 @@
|
|
|
418
404
|
|
|
419
405
|
$: activecategory && !isLoading && initializeMenu();
|
|
420
406
|
$: session && setSession();
|
|
421
|
-
$: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase()
|
|
407
|
+
$: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() === 'true';
|
|
422
408
|
$: lang && setActiveLanguage();
|
|
423
409
|
$: cmsendpoint && lang && languageslist && userroles && initialLoad();
|
|
424
410
|
$: translationurl && setTranslationUrl();
|
|
@@ -426,200 +412,10 @@
|
|
|
426
412
|
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
427
413
|
</script>
|
|
428
414
|
|
|
429
|
-
<
|
|
430
|
-
<
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
434
|
-
<div on:click={toggleMenu} class="NavIcon {hamburgerMenuActive ? 'Open' : ''}">
|
|
435
|
-
<span></span>
|
|
436
|
-
<span></span>
|
|
437
|
-
<span></span>
|
|
438
|
-
</div>
|
|
439
|
-
</div>
|
|
440
|
-
{/if}
|
|
441
|
-
<div class="Logo">
|
|
442
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
443
|
-
<div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
|
|
444
|
-
{#if logoFromCms}
|
|
445
|
-
<img src={logoPath} alt="Logo">
|
|
446
|
-
{:else}
|
|
447
|
-
<img src={everymatrixLogo} alt="Logo">
|
|
448
|
-
{/if}
|
|
449
|
-
</div>
|
|
450
|
-
</div>
|
|
451
|
-
<nav class="PrimaryMenu">
|
|
452
|
-
{#if !mobileView}
|
|
453
|
-
{#if primaryMenuLoading}
|
|
454
|
-
{#each new Array(6) as item}
|
|
455
|
-
<div class="Skeleton SkeletonText"></div>
|
|
456
|
-
{/each}
|
|
457
|
-
{:else}
|
|
458
|
-
{#each mainMenuArray as menuItem}
|
|
459
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
460
|
-
<div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}" on:click={() => menuAction('page', menuItem)}>
|
|
461
|
-
<p>{menuItem.label}</p>
|
|
462
|
-
<div class="MenuHover"></div>
|
|
463
|
-
</div>
|
|
464
|
-
{/each}
|
|
465
|
-
{/if}
|
|
466
|
-
{/if}
|
|
467
|
-
</nav>
|
|
468
|
-
{#if isLoggedIn}
|
|
469
|
-
<div class="BalanceDepositWrapper">
|
|
470
|
-
<div class="Balance {isBalanceOpened ? 'Open' : ''}" bind:this={balanceContainer}>
|
|
471
|
-
<player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
|
|
472
|
-
</div>
|
|
473
|
-
<div class="Deposit {isBalanceOpened ? 'Open' : ''}" bind:this={depositContainer}>
|
|
474
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
475
|
-
<div class="DepositButton" on:click={() => menuAction('deposit')}>
|
|
476
|
-
<p>{$_('deposit')}</p>
|
|
477
|
-
</div>
|
|
478
|
-
{#if shortCashierActivated}
|
|
479
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
480
|
-
<div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
|
|
481
|
-
<div class="ShortCashierContainerWrapperMobile">
|
|
482
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
483
|
-
<div class="ShortCashierContainerMobile">
|
|
484
|
-
<div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
|
|
485
|
-
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
|
|
486
|
-
<line x1="2" y1="2" x2="18" y2="18" stroke-width="2"/>
|
|
487
|
-
<line x1="18" y1="2" x2="2" y2="18" stroke-width="2"/>
|
|
488
|
-
</svg>
|
|
489
|
-
</div>
|
|
490
|
-
{#if gmversion === 'gmcore'}
|
|
491
|
-
<player-deposit
|
|
492
|
-
{endpoint}
|
|
493
|
-
{session}
|
|
494
|
-
playerid={userid}
|
|
495
|
-
{lang}
|
|
496
|
-
{hasdefaultamount}
|
|
497
|
-
{playercurrency}
|
|
498
|
-
{shortcashierenabled}
|
|
499
|
-
{clientstyling}
|
|
500
|
-
{clientstylingurl}
|
|
501
|
-
></player-deposit>
|
|
502
|
-
{:else}
|
|
503
|
-
<user-deposit-withdrawal
|
|
504
|
-
{endpoint}
|
|
505
|
-
type="deposit"
|
|
506
|
-
channel="Mobile"
|
|
507
|
-
language={lang}
|
|
508
|
-
is-short-cashier={shortcashierenabled}
|
|
509
|
-
product-type={producttype}
|
|
510
|
-
user-id={userid}
|
|
511
|
-
{session}
|
|
512
|
-
success-url={'https://' + window.location.hostname + '/' + lang + successurl}
|
|
513
|
-
cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
|
|
514
|
-
fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
|
|
515
|
-
sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
|
|
516
|
-
casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
|
|
517
|
-
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
518
|
-
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
519
|
-
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
520
|
-
></user-deposit-withdrawal>
|
|
521
|
-
{/if}
|
|
522
|
-
</div>
|
|
523
|
-
</div>
|
|
524
|
-
{/if}
|
|
525
|
-
</div>
|
|
526
|
-
<div class="Background {isBalanceOpened ? 'Open' : ''}" bind:this={backgroundContainer}></div>
|
|
527
|
-
</div>
|
|
528
|
-
<div class="Profile">
|
|
529
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
530
|
-
<div class="ProfileWrapper" on:click={() => menuAction('myaccount')}>
|
|
531
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16.429">
|
|
532
|
-
<g transform="translate(-8 -4)">
|
|
533
|
-
<path class="a"
|
|
534
|
-
d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
|
|
535
|
-
transform="translate(0 0)"/>
|
|
536
|
-
</g>
|
|
537
|
-
</svg>
|
|
538
|
-
</div>
|
|
539
|
-
</div>
|
|
540
|
-
{:else}
|
|
541
|
-
<div class="AuthButtons">
|
|
542
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
543
|
-
<div class="Item ItemLogin" on:click={() => menuAction('login')}>
|
|
544
|
-
<p>{$_('login')}</p>
|
|
545
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
|
|
546
|
-
</div>
|
|
547
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
548
|
-
<div class="Item ItemRegister" on:click={() => menuAction('register')}>
|
|
549
|
-
<p>{$_('register')}</p>
|
|
550
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
|
|
551
|
-
</div>
|
|
552
|
-
</div>
|
|
553
|
-
{/if}
|
|
554
|
-
<div class="Slot1">
|
|
555
|
-
<slot name="slot1"></slot>
|
|
556
|
-
</div>
|
|
557
|
-
<div class="Slot2">
|
|
558
|
-
<slot name="slot2"></slot>
|
|
559
|
-
</div>
|
|
560
|
-
<div class="Slot3">
|
|
561
|
-
<slot name="slot3"></slot>
|
|
562
|
-
</div>
|
|
563
|
-
{#if !mobileView}
|
|
564
|
-
<div class="LanguageSelector">
|
|
565
|
-
{#if (languagesArray.length > 1) }
|
|
566
|
-
<div class="LanguageDropdown">
|
|
567
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
568
|
-
<div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
|
|
569
|
-
{#if countryflagheader == 'true' }
|
|
570
|
-
<span class="LanguageName">{@html countryFlags[determineFlag()]}</span>
|
|
571
|
-
{:else}
|
|
572
|
-
<span class="LanguageName">{determineFlag()}</span>
|
|
573
|
-
{/if}
|
|
574
|
-
<span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
|
|
575
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
|
|
576
|
-
<path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
|
|
577
|
-
</svg>
|
|
578
|
-
</span>
|
|
579
|
-
</div>
|
|
580
|
-
</div>
|
|
581
|
-
<div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
|
|
582
|
-
{#each languagesArray as operatorLanguage}
|
|
583
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
584
|
-
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
|
585
|
-
{#if countryflagheader == 'true' }
|
|
586
|
-
<span class="FlagIcon">
|
|
587
|
-
{@html countryFlags[determineFlag(operatorLanguage)]}
|
|
588
|
-
</span>
|
|
589
|
-
{/if}
|
|
590
|
-
<span class="LanguageName">{operatorLanguage.slice(-2)}</span>
|
|
591
|
-
</div>
|
|
592
|
-
{/each}
|
|
593
|
-
</div>
|
|
594
|
-
{/if}
|
|
595
|
-
</div>
|
|
596
|
-
{/if}
|
|
597
|
-
</div>
|
|
598
|
-
<div class="Separator">
|
|
599
|
-
|
|
600
|
-
</div>
|
|
601
|
-
{#if !mobileView}
|
|
602
|
-
<div class="SecondaryNav">
|
|
603
|
-
<div class="LeftSpace">
|
|
604
|
-
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
|
|
605
|
-
</div>
|
|
606
|
-
<div class="SecondaryMenuContent">
|
|
607
|
-
{#if primaryMenuLoading}
|
|
608
|
-
{#each new Array(2) as item}
|
|
609
|
-
<div class="Skeleton SkeletonText"></div>
|
|
610
|
-
{/each}
|
|
611
|
-
{:else}
|
|
612
|
-
{#each secondaryMenuArray as secondaryItem}
|
|
613
|
-
<span class="ItemSecondary {secondaryItem.id == activeIndex ? 'Active' : ''}">
|
|
614
|
-
<p on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</p>
|
|
615
|
-
</span>
|
|
616
|
-
{/each}
|
|
617
|
-
{/if}
|
|
618
|
-
</div>
|
|
619
|
-
</div>
|
|
620
|
-
{/if}
|
|
621
|
-
</div>
|
|
622
|
-
<!--
|
|
415
|
+
<svelte:head>
|
|
416
|
+
<script type="module" src="https://unpkg.com/@everymatrix/user-deposit-withdrawal"></script>
|
|
417
|
+
</svelte:head>
|
|
418
|
+
|
|
623
419
|
{#if isLoggedIn}
|
|
624
420
|
{#if mobileView}
|
|
625
421
|
<header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
|
|
@@ -630,7 +426,7 @@
|
|
|
630
426
|
viewBox="0 0 22 16">
|
|
631
427
|
<defs>
|
|
632
428
|
<style>.a {
|
|
633
|
-
fill: var(--
|
|
429
|
+
fill: var(--emfe-w-color-white, #FFFFFF);
|
|
634
430
|
}
|
|
635
431
|
</style>
|
|
636
432
|
</defs>
|
|
@@ -642,6 +438,13 @@
|
|
|
642
438
|
</svg>
|
|
643
439
|
{/if}
|
|
644
440
|
</div>
|
|
441
|
+
<div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
|
|
442
|
+
{#if logoFromCms}
|
|
443
|
+
<img src={logoPath} alt="Logo">
|
|
444
|
+
{:else}
|
|
445
|
+
<img src={everymatrixLogo} alt="Logo">
|
|
446
|
+
{/if}
|
|
447
|
+
</div>
|
|
645
448
|
|
|
646
449
|
<div class="HeaderTopActions" part="HeaderTopActions">
|
|
647
450
|
<div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
|
|
@@ -688,6 +491,8 @@
|
|
|
688
491
|
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
689
492
|
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
690
493
|
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
494
|
+
client-styling={clientstyling}
|
|
495
|
+
client-styling-url={clientstylingurl}
|
|
691
496
|
></user-deposit-withdrawal>
|
|
692
497
|
{/if}
|
|
693
498
|
</div>
|
|
@@ -698,7 +503,7 @@
|
|
|
698
503
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
|
|
699
504
|
<defs>
|
|
700
505
|
<style>.a {
|
|
701
|
-
fill: var(--
|
|
506
|
+
fill: var(--emfe-w-color-white, #FFFFFF);
|
|
702
507
|
}
|
|
703
508
|
</style>
|
|
704
509
|
</defs>
|
|
@@ -716,6 +521,13 @@
|
|
|
716
521
|
{:else}
|
|
717
522
|
<header class="HeaderWrapper" bind:this={customStylingContainer}>
|
|
718
523
|
<div class="HeaderContainer">
|
|
524
|
+
<div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
|
|
525
|
+
{#if logoFromCms}
|
|
526
|
+
<img src={logoPath} alt="Logo">
|
|
527
|
+
{:else}
|
|
528
|
+
<img src={everymatrixLogo} alt="Logo">
|
|
529
|
+
{/if}
|
|
530
|
+
</div>
|
|
719
531
|
|
|
720
532
|
<nav class="HeaderMainNav">
|
|
721
533
|
{#if !isLoading}
|
|
@@ -791,7 +603,7 @@
|
|
|
791
603
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
|
|
792
604
|
<defs>
|
|
793
605
|
<style>.a {
|
|
794
|
-
fill: var(--
|
|
606
|
+
fill: var(--emfe-w-color-white, #FFFFFF);
|
|
795
607
|
}
|
|
796
608
|
</style>
|
|
797
609
|
</defs>
|
|
@@ -802,6 +614,42 @@
|
|
|
802
614
|
</g>
|
|
803
615
|
</svg>
|
|
804
616
|
</div>
|
|
617
|
+
{#if (languagesArray.length > 1) }
|
|
618
|
+
{#if countryflagheader !== 'true'}
|
|
619
|
+
<select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
|
|
620
|
+
{#each languagesArray as operatorLanguage}
|
|
621
|
+
<option value={operatorLanguage} selected>{operatorLanguage.slice(-2)}</option>
|
|
622
|
+
{/each}
|
|
623
|
+
</select>
|
|
624
|
+
{:else}
|
|
625
|
+
<div class="LanguageDropdown">
|
|
626
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
627
|
+
<div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
|
|
628
|
+
<span class="FlagIcon">
|
|
629
|
+
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(selectedLanguage.slice(-2))}.svg`}/>
|
|
630
|
+
</span>
|
|
631
|
+
<span class="LanguageName">{selectedLanguage.slice(-2)}</span>
|
|
632
|
+
<span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
|
|
633
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
|
|
634
|
+
<path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
|
|
635
|
+
</svg>
|
|
636
|
+
</span>
|
|
637
|
+
</div>
|
|
638
|
+
{#if isOptionsListVisible}
|
|
639
|
+
<div class="OptionList">
|
|
640
|
+
{#each languagesArray as operatorLanguage}
|
|
641
|
+
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
|
642
|
+
<span class="FlagIcon">
|
|
643
|
+
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage.slice(-2))}.svg`}/>
|
|
644
|
+
</span>
|
|
645
|
+
<span class="LanguageName">{operatorLanguage.slice(-2)}</span>
|
|
646
|
+
</div>
|
|
647
|
+
{/each}
|
|
648
|
+
</div>
|
|
649
|
+
{/if}
|
|
650
|
+
</div>
|
|
651
|
+
{/if}
|
|
652
|
+
{/if}
|
|
805
653
|
</div>
|
|
806
654
|
</div>
|
|
807
655
|
</div>
|
|
@@ -825,7 +673,7 @@
|
|
|
825
673
|
viewBox="0 0 22 16">
|
|
826
674
|
<defs>
|
|
827
675
|
<style>.a {
|
|
828
|
-
fill: var(--
|
|
676
|
+
fill: var(--emfe-w-color-white, #FFFFFF);
|
|
829
677
|
}
|
|
830
678
|
</style>
|
|
831
679
|
</defs>
|
|
@@ -935,12 +783,12 @@
|
|
|
935
783
|
</header>
|
|
936
784
|
{/if}
|
|
937
785
|
{/if}
|
|
938
|
-
-->
|
|
939
786
|
|
|
940
|
-
<casino-hamburger-menu {
|
|
787
|
+
<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
|
|
941
788
|
|
|
942
789
|
<style lang="scss">
|
|
943
|
-
|
|
790
|
+
|
|
791
|
+
*,
|
|
944
792
|
*::before,
|
|
945
793
|
*::after {
|
|
946
794
|
font-family: inherit
|
|
@@ -950,554 +798,6 @@
|
|
|
950
798
|
font-family: inherit;
|
|
951
799
|
}
|
|
952
800
|
|
|
953
|
-
// ------> new stuff
|
|
954
|
-
.NavIcon {
|
|
955
|
-
width: 30px;
|
|
956
|
-
height: 28px;
|
|
957
|
-
position: relative;
|
|
958
|
-
margin: 50px auto;
|
|
959
|
-
-webkit-transform: rotate(0deg);
|
|
960
|
-
-moz-transform: rotate(0deg);
|
|
961
|
-
-o-transform: rotate(0deg);
|
|
962
|
-
transform: rotate(0deg);
|
|
963
|
-
-webkit-transition: .5s ease-in-out;
|
|
964
|
-
-moz-transition: .5s ease-in-out;
|
|
965
|
-
-o-transition: .5s ease-in-out;
|
|
966
|
-
transition: .5s ease-in-out;
|
|
967
|
-
cursor: pointer;
|
|
968
|
-
|
|
969
|
-
span {
|
|
970
|
-
display: block;
|
|
971
|
-
position: absolute;
|
|
972
|
-
height: 3px;
|
|
973
|
-
width: 100%;
|
|
974
|
-
background: #ffffff;
|
|
975
|
-
border-radius: 9px;
|
|
976
|
-
opacity: 1;
|
|
977
|
-
left: 0;
|
|
978
|
-
-webkit-transform: rotate(0deg);
|
|
979
|
-
-moz-transform: rotate(0deg);
|
|
980
|
-
-o-transform: rotate(0deg);
|
|
981
|
-
transform: rotate(0deg);
|
|
982
|
-
-webkit-transition: .25s ease-in-out;
|
|
983
|
-
-moz-transition: .25s ease-in-out;
|
|
984
|
-
-o-transition: .25s ease-in-out;
|
|
985
|
-
transition: .25s ease-in-out;
|
|
986
|
-
}
|
|
987
|
-
|
|
988
|
-
span:nth-child(1) {
|
|
989
|
-
top: 0px;
|
|
990
|
-
width: 80%;
|
|
991
|
-
}
|
|
992
|
-
|
|
993
|
-
span:nth-child(2) {
|
|
994
|
-
top: 9px;
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
span:nth-child(3) {
|
|
998
|
-
top: 18px;
|
|
999
|
-
}
|
|
1000
|
-
|
|
1001
|
-
&.Open span:nth-child(1) {
|
|
1002
|
-
top: 9px;
|
|
1003
|
-
width: 100%;
|
|
1004
|
-
-webkit-transform: rotate(135deg);
|
|
1005
|
-
-moz-transform: rotate(135deg);
|
|
1006
|
-
-o-transform: rotate(135deg);
|
|
1007
|
-
transform: rotate(135deg);
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1010
|
-
&.Open span:nth-child(2) {
|
|
1011
|
-
opacity: 0;
|
|
1012
|
-
left: -60px;
|
|
1013
|
-
}
|
|
1014
|
-
|
|
1015
|
-
&.Open span:nth-child(3) {
|
|
1016
|
-
top: 9px;
|
|
1017
|
-
-webkit-transform: rotate(-135deg);
|
|
1018
|
-
-moz-transform: rotate(-135deg);
|
|
1019
|
-
-o-transform: rotate(-135deg);
|
|
1020
|
-
transform: rotate(-135deg);
|
|
1021
|
-
}
|
|
1022
|
-
}
|
|
1023
|
-
|
|
1024
|
-
.Skeleton {
|
|
1025
|
-
animation: skeleton-loading .6s linear infinite alternate;
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
|
-
@keyframes skeleton-loading {
|
|
1029
|
-
0% {
|
|
1030
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .2) 0%, rgba(0, 61, 93, .2) 100%);
|
|
1031
|
-
}
|
|
1032
|
-
12% {
|
|
1033
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .225) 0%, rgba(0, 61, 93, .225) 100%);
|
|
1034
|
-
}
|
|
1035
|
-
25% {
|
|
1036
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .25) 0%, rgba(0, 61, 93, .25) 100%);
|
|
1037
|
-
}
|
|
1038
|
-
33% {
|
|
1039
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .275) 0%, rgba(0, 61, 93, .275) 100%);
|
|
1040
|
-
}
|
|
1041
|
-
50% {
|
|
1042
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .3) 0%, rgba(0, 61, 93, .3) 100%);
|
|
1043
|
-
}
|
|
1044
|
-
63% {
|
|
1045
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .325) 0%, rgba(0, 61, 93, .325) 100%);
|
|
1046
|
-
}
|
|
1047
|
-
75% {
|
|
1048
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .35) 0%, rgba(0, 61, 93, .35) 100%);
|
|
1049
|
-
}
|
|
1050
|
-
88% {
|
|
1051
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .375) 0%, rgba(0, 61, 93, .375) 100%);
|
|
1052
|
-
}
|
|
1053
|
-
100% {
|
|
1054
|
-
background: linear-gradient(90deg, rgba(35, 178, 78, .4) 0%, rgba(0, 61, 93, .4) 100%);
|
|
1055
|
-
}
|
|
1056
|
-
}
|
|
1057
|
-
|
|
1058
|
-
.SkeletonText {
|
|
1059
|
-
opacity: 0.5;
|
|
1060
|
-
margin: 0 15px;
|
|
1061
|
-
width: 125px;
|
|
1062
|
-
height: 15px;
|
|
1063
|
-
border-radius: 15px;
|
|
1064
|
-
}
|
|
1065
|
-
|
|
1066
|
-
.HeaderContainer {
|
|
1067
|
-
position: fixed;
|
|
1068
|
-
width: 100%;
|
|
1069
|
-
z-index: 999;
|
|
1070
|
-
background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
|
|
1071
|
-
display: flex;
|
|
1072
|
-
flex-direction: column;
|
|
1073
|
-
align-items: center;
|
|
1074
|
-
user-select: none;
|
|
1075
|
-
|
|
1076
|
-
.MainNav {
|
|
1077
|
-
width: 99%;
|
|
1078
|
-
height: 84px;
|
|
1079
|
-
display: flex;
|
|
1080
|
-
gap: 5px;
|
|
1081
|
-
flex-direction: row;
|
|
1082
|
-
align-items: center;
|
|
1083
|
-
margin: 0 15px;
|
|
1084
|
-
|
|
1085
|
-
.HeaderMobileMainNav {
|
|
1086
|
-
display: flex;
|
|
1087
|
-
margin-left: 5px;
|
|
1088
|
-
}
|
|
1089
|
-
|
|
1090
|
-
.Logo {
|
|
1091
|
-
display: flex;
|
|
1092
|
-
justify-content: center;
|
|
1093
|
-
align-items: center;
|
|
1094
|
-
width: 10%;
|
|
1095
|
-
min-width: 75px;
|
|
1096
|
-
transition: all .2s;
|
|
1097
|
-
|
|
1098
|
-
.HeaderBranding {
|
|
1099
|
-
width: 140px;
|
|
1100
|
-
cursor: pointer;
|
|
1101
|
-
img {
|
|
1102
|
-
width: 100%;
|
|
1103
|
-
}
|
|
1104
|
-
@media only screen and (max-width: 360px) {
|
|
1105
|
-
margin-right: 0;
|
|
1106
|
-
}
|
|
1107
|
-
}
|
|
1108
|
-
|
|
1109
|
-
&:active {
|
|
1110
|
-
opacity: .9;
|
|
1111
|
-
transform: scale(1.02);
|
|
1112
|
-
}
|
|
1113
|
-
}
|
|
1114
|
-
|
|
1115
|
-
.BalanceDepositWrapper {
|
|
1116
|
-
height: 34px;
|
|
1117
|
-
background-color: white;
|
|
1118
|
-
display: flex;
|
|
1119
|
-
position: relative;
|
|
1120
|
-
justify-content: center;
|
|
1121
|
-
align-items: center;
|
|
1122
|
-
border-radius: 30px;
|
|
1123
|
-
|
|
1124
|
-
.Background {
|
|
1125
|
-
height: 34px;
|
|
1126
|
-
position: absolute;
|
|
1127
|
-
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1128
|
-
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1129
|
-
border-radius: 30px;
|
|
1130
|
-
z-index: 3;
|
|
1131
|
-
transition: all 0.3s ease;
|
|
1132
|
-
}
|
|
1133
|
-
|
|
1134
|
-
.Deposit {
|
|
1135
|
-
display: flex;
|
|
1136
|
-
align-items: center;
|
|
1137
|
-
cursor: pointer;
|
|
1138
|
-
justify-content: center;
|
|
1139
|
-
z-index: 4;
|
|
1140
|
-
|
|
1141
|
-
.DepositButton {
|
|
1142
|
-
font-size: 14px;
|
|
1143
|
-
text-align: center;
|
|
1144
|
-
cursor: pointer;
|
|
1145
|
-
padding: 0 10px;
|
|
1146
|
-
transition: all .5s linear;
|
|
1147
|
-
display: flex;
|
|
1148
|
-
justify-content: center;
|
|
1149
|
-
align-items: center;
|
|
1150
|
-
p {
|
|
1151
|
-
text-transform: uppercase;
|
|
1152
|
-
color: white;
|
|
1153
|
-
transition: all .3s ease;
|
|
1154
|
-
|
|
1155
|
-
&:hover {
|
|
1156
|
-
text-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
|
|
1157
|
-
}
|
|
1158
|
-
|
|
1159
|
-
&:active {
|
|
1160
|
-
color: black;
|
|
1161
|
-
}
|
|
1162
|
-
}
|
|
1163
|
-
}
|
|
1164
|
-
|
|
1165
|
-
&.Open {
|
|
1166
|
-
.DepositButton {
|
|
1167
|
-
p {
|
|
1168
|
-
transition: all .5s linear;
|
|
1169
|
-
color: black;
|
|
1170
|
-
opacity: .5;
|
|
1171
|
-
}
|
|
1172
|
-
}
|
|
1173
|
-
|
|
1174
|
-
}
|
|
1175
|
-
}
|
|
1176
|
-
|
|
1177
|
-
.Balance {
|
|
1178
|
-
display: flex;
|
|
1179
|
-
z-index: 4;
|
|
1180
|
-
height: 100%;
|
|
1181
|
-
padding-left: 10px;
|
|
1182
|
-
align-items: center;
|
|
1183
|
-
|
|
1184
|
-
&.Open {
|
|
1185
|
-
color: white;
|
|
1186
|
-
}
|
|
1187
|
-
}
|
|
1188
|
-
}
|
|
1189
|
-
|
|
1190
|
-
.Profile {
|
|
1191
|
-
display: flex;
|
|
1192
|
-
justify-content: center;
|
|
1193
|
-
flex-direction: column;
|
|
1194
|
-
cursor: pointer;
|
|
1195
|
-
|
|
1196
|
-
.ProfileWrapper {
|
|
1197
|
-
width: 30px;
|
|
1198
|
-
height: 30px;
|
|
1199
|
-
background-color: orange;
|
|
1200
|
-
border-radius: 50px;
|
|
1201
|
-
display: flex;
|
|
1202
|
-
justify-content: center;
|
|
1203
|
-
align-items: center;
|
|
1204
|
-
transition: all .3s ease;
|
|
1205
|
-
|
|
1206
|
-
svg {
|
|
1207
|
-
width: 15px;
|
|
1208
|
-
height: 16px;
|
|
1209
|
-
fill: var(--emw-color-white, #FFFFFF)
|
|
1210
|
-
|
|
1211
|
-
}
|
|
1212
|
-
&:hover {
|
|
1213
|
-
box-shadow: 0px 0px 4px white;
|
|
1214
|
-
}
|
|
1215
|
-
|
|
1216
|
-
&:active {
|
|
1217
|
-
svg {
|
|
1218
|
-
fill: var(--emw-color-black, #000000)
|
|
1219
|
-
}
|
|
1220
|
-
}
|
|
1221
|
-
}
|
|
1222
|
-
}
|
|
1223
|
-
|
|
1224
|
-
.PrimaryMenu {
|
|
1225
|
-
display: flex;
|
|
1226
|
-
flex-direction: row;
|
|
1227
|
-
align-items: center;
|
|
1228
|
-
width: 100%;
|
|
1229
|
-
|
|
1230
|
-
.ItemMenu {
|
|
1231
|
-
color: white;
|
|
1232
|
-
margin: 0 20px;
|
|
1233
|
-
text-transform: uppercase;
|
|
1234
|
-
height: 84px;
|
|
1235
|
-
transition: all .5s;
|
|
1236
|
-
cursor: pointer;
|
|
1237
|
-
|
|
1238
|
-
&:after {
|
|
1239
|
-
content: "";
|
|
1240
|
-
display: block;
|
|
1241
|
-
height: 5px;
|
|
1242
|
-
width: 100%;
|
|
1243
|
-
cursor: pointer;
|
|
1244
|
-
background-color: pink;
|
|
1245
|
-
position: relative;
|
|
1246
|
-
}
|
|
1247
|
-
|
|
1248
|
-
.MenuHover {
|
|
1249
|
-
width: 0px;
|
|
1250
|
-
transition: transform 0.3s ease-in-out;
|
|
1251
|
-
transform-origin: center;
|
|
1252
|
-
transform: scaleX(0);
|
|
1253
|
-
}
|
|
1254
|
-
|
|
1255
|
-
p {
|
|
1256
|
-
height: 33px;
|
|
1257
|
-
margin-top: 35px;
|
|
1258
|
-
}
|
|
1259
|
-
|
|
1260
|
-
&:hover, &.Active {
|
|
1261
|
-
color: #22B04F;
|
|
1262
|
-
|
|
1263
|
-
.MenuHover {
|
|
1264
|
-
transform: scaleX(1);
|
|
1265
|
-
opacity: 1;
|
|
1266
|
-
background-color: rgba(255, 255, 255, 0.5);
|
|
1267
|
-
width: 100%;
|
|
1268
|
-
position: relative;
|
|
1269
|
-
height: 5px;
|
|
1270
|
-
z-index: 4;
|
|
1271
|
-
}
|
|
1272
|
-
}
|
|
1273
|
-
|
|
1274
|
-
&:active {
|
|
1275
|
-
color: rgba(255,255,255,1);
|
|
1276
|
-
}
|
|
1277
|
-
}
|
|
1278
|
-
}
|
|
1279
|
-
|
|
1280
|
-
.AuthButtons {
|
|
1281
|
-
display: flex;
|
|
1282
|
-
flex-direction: row;
|
|
1283
|
-
justify-content: center;
|
|
1284
|
-
align-items: center;
|
|
1285
|
-
|
|
1286
|
-
.Item {
|
|
1287
|
-
gap: 5px;
|
|
1288
|
-
padding: 0 25px;
|
|
1289
|
-
display: flex;
|
|
1290
|
-
align-items: center;
|
|
1291
|
-
color: white;
|
|
1292
|
-
|
|
1293
|
-
&.ItemLogin {
|
|
1294
|
-
font-size: 14px;
|
|
1295
|
-
height: 36px;
|
|
1296
|
-
text-align: center;
|
|
1297
|
-
margin-right: 10px;
|
|
1298
|
-
position: relative;
|
|
1299
|
-
cursor: pointer;
|
|
1300
|
-
background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
|
|
1301
|
-
linear-gradient(180deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
|
|
1302
|
-
border-radius: 30px;
|
|
1303
|
-
border: 2px solid transparent;
|
|
1304
|
-
transition: all .3s linear;
|
|
1305
|
-
|
|
1306
|
-
&:hover {
|
|
1307
|
-
color: white;
|
|
1308
|
-
background: linear-gradient(180deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
|
|
1309
|
-
linear-gradient(0deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
|
|
1310
|
-
border: 2px solid white;
|
|
1311
|
-
}
|
|
1312
|
-
|
|
1313
|
-
&:active {
|
|
1314
|
-
background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
|
|
1315
|
-
linear-gradient(180deg, rgba(231,145,28,.4) 0%, rgba(224,169,76,.4) 100%) border-box;
|
|
1316
|
-
}
|
|
1317
|
-
}
|
|
1318
|
-
|
|
1319
|
-
&.ItemRegister {
|
|
1320
|
-
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1321
|
-
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1322
|
-
border-radius: 30px;
|
|
1323
|
-
border: 2px solid transparent;
|
|
1324
|
-
font-size: 14px;
|
|
1325
|
-
height: 36px;
|
|
1326
|
-
text-align: center;
|
|
1327
|
-
line-height: 44px;
|
|
1328
|
-
cursor: pointer;
|
|
1329
|
-
transition: all .3s linear;
|
|
1330
|
-
|
|
1331
|
-
&:hover {
|
|
1332
|
-
background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1333
|
-
linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1334
|
-
border: 2px solid white;
|
|
1335
|
-
}
|
|
1336
|
-
|
|
1337
|
-
&:active {
|
|
1338
|
-
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1339
|
-
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1340
|
-
}
|
|
1341
|
-
}
|
|
1342
|
-
|
|
1343
|
-
svg {
|
|
1344
|
-
width: 15px;
|
|
1345
|
-
height: 15px;
|
|
1346
|
-
fill: white;
|
|
1347
|
-
padding-bottom: 2px;
|
|
1348
|
-
}
|
|
1349
|
-
}
|
|
1350
|
-
}
|
|
1351
|
-
|
|
1352
|
-
.Slot1 {}
|
|
1353
|
-
.Slot2 {}
|
|
1354
|
-
.Slot3 {}
|
|
1355
|
-
.LanguageSelector {
|
|
1356
|
-
align-content: center;
|
|
1357
|
-
height: 100%;
|
|
1358
|
-
cursor: pointer;
|
|
1359
|
-
transform: all .3s linear;
|
|
1360
|
-
color: white;
|
|
1361
|
-
|
|
1362
|
-
.SelectedOption {
|
|
1363
|
-
display: flex;
|
|
1364
|
-
align-items: center;
|
|
1365
|
-
justify-content: center;
|
|
1366
|
-
|
|
1367
|
-
.TriangleActive, .TriangleInactive {
|
|
1368
|
-
display: block;
|
|
1369
|
-
margin: 0 0 0 10px;
|
|
1370
|
-
transition: all .2s;
|
|
1371
|
-
&:hover {
|
|
1372
|
-
transform: scale(1.2);
|
|
1373
|
-
}
|
|
1374
|
-
|
|
1375
|
-
svg{
|
|
1376
|
-
margin: 2px 0px;
|
|
1377
|
-
}
|
|
1378
|
-
}
|
|
1379
|
-
|
|
1380
|
-
.TriangleActive {
|
|
1381
|
-
transform: scale(1.1) rotateX(180deg);
|
|
1382
|
-
margin-bottom: 5px;
|
|
1383
|
-
|
|
1384
|
-
&:hover {
|
|
1385
|
-
transform: scale(1.1) rotateX(180deg);
|
|
1386
|
-
}
|
|
1387
|
-
}
|
|
1388
|
-
}
|
|
1389
|
-
.LanguageName {
|
|
1390
|
-
.ItemLanguage {
|
|
1391
|
-
display: flex;
|
|
1392
|
-
justify-content: space-around;
|
|
1393
|
-
}
|
|
1394
|
-
|
|
1395
|
-
svg {
|
|
1396
|
-
width: 30px;
|
|
1397
|
-
border-radius: 20px;
|
|
1398
|
-
}
|
|
1399
|
-
}
|
|
1400
|
-
|
|
1401
|
-
.OptionList {
|
|
1402
|
-
border: 1px solid var(--emw-header-color-primary);
|
|
1403
|
-
padding: 10px;
|
|
1404
|
-
position: absolute;
|
|
1405
|
-
cursor: pointer;
|
|
1406
|
-
display: flex;
|
|
1407
|
-
gap: 4px;
|
|
1408
|
-
flex-direction: column;
|
|
1409
|
-
border-radius: 10px;
|
|
1410
|
-
opacity: 0;
|
|
1411
|
-
transition: all 0.4s;
|
|
1412
|
-
z-index: 6;
|
|
1413
|
-
right: 5px;
|
|
1414
|
-
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1415
|
-
background: linear-gradient(90deg, rgba(42,79,55,1) 0%, rgba(0,61,92,1) 100%);
|
|
1416
|
-
|
|
1417
|
-
&.Active {
|
|
1418
|
-
opacity: 1;
|
|
1419
|
-
}
|
|
1420
|
-
|
|
1421
|
-
.FlagIcon {
|
|
1422
|
-
width: 16px;
|
|
1423
|
-
|
|
1424
|
-
svg {
|
|
1425
|
-
border-radius: 5px;
|
|
1426
|
-
}
|
|
1427
|
-
}
|
|
1428
|
-
|
|
1429
|
-
.LanguageOption {
|
|
1430
|
-
display: flex;
|
|
1431
|
-
align-items: center;
|
|
1432
|
-
transform: scale(1.1);
|
|
1433
|
-
gap: 3px;
|
|
1434
|
-
padding: 7px;
|
|
1435
|
-
|
|
1436
|
-
&:hover {
|
|
1437
|
-
transition: all 0.2s;
|
|
1438
|
-
color: var(--emw-color-primary);
|
|
1439
|
-
background: var(--emw-color-primary) transparent;
|
|
1440
|
-
box-shadow: inset 0px 0px 0px 2px var(--emw-color-primary);
|
|
1441
|
-
border-radius: 20px;
|
|
1442
|
-
box-sizing: border-box;
|
|
1443
|
-
}
|
|
1444
|
-
}
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
}
|
|
1448
|
-
|
|
1449
|
-
.Separator {
|
|
1450
|
-
width: 100%;
|
|
1451
|
-
height: 5px;
|
|
1452
|
-
background: rgb(0,0,0);
|
|
1453
|
-
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(35,172,77,1) 50%, rgba(0,0,0,1) 100%);
|
|
1454
|
-
z-index: 3;
|
|
1455
|
-
}
|
|
1456
|
-
|
|
1457
|
-
.SecondaryNav {
|
|
1458
|
-
width: 100%;
|
|
1459
|
-
height: 50px;
|
|
1460
|
-
display: flex;
|
|
1461
|
-
align-items: center;
|
|
1462
|
-
background: linear-gradient(90deg, rgba(35,172,77,1) 0%, rgba(18,62,33,1) 100%);
|
|
1463
|
-
z-index: 3;
|
|
1464
|
-
|
|
1465
|
-
.LeftSpace {
|
|
1466
|
-
width: 10%;
|
|
1467
|
-
}
|
|
1468
|
-
|
|
1469
|
-
.SecondaryMenuContent {
|
|
1470
|
-
text-transform: uppercase;
|
|
1471
|
-
margin: 0 20px;
|
|
1472
|
-
color: white;
|
|
1473
|
-
transition: all .5s;
|
|
1474
|
-
display: flex;
|
|
1475
|
-
cursor: pointer;
|
|
1476
|
-
user-select: none;
|
|
1477
|
-
|
|
1478
|
-
.Active {
|
|
1479
|
-
transition: all .5s;
|
|
1480
|
-
color: black;
|
|
1481
|
-
|
|
1482
|
-
&:hover {
|
|
1483
|
-
opacity: .5;
|
|
1484
|
-
color: white;
|
|
1485
|
-
}
|
|
1486
|
-
}
|
|
1487
|
-
|
|
1488
|
-
&:hover {
|
|
1489
|
-
color: black;
|
|
1490
|
-
}
|
|
1491
|
-
|
|
1492
|
-
&:active {
|
|
1493
|
-
color: white;
|
|
1494
|
-
}
|
|
1495
|
-
}
|
|
1496
|
-
}
|
|
1497
|
-
}
|
|
1498
|
-
|
|
1499
|
-
// ------> old stuff
|
|
1500
|
-
|
|
1501
801
|
@keyframes ModalBounce {
|
|
1502
802
|
0% {
|
|
1503
803
|
opacity: 0;
|
|
@@ -1524,6 +824,11 @@
|
|
|
1524
824
|
height: 400px;
|
|
1525
825
|
}
|
|
1526
826
|
|
|
827
|
+
.LanguageDropdown {
|
|
828
|
+
margin-right: 16px;
|
|
829
|
+
position: relative;
|
|
830
|
+
display: inline-block;
|
|
831
|
+
}
|
|
1527
832
|
|
|
1528
833
|
.ClosePopUpButtonShortCashier{
|
|
1529
834
|
margin-left: auto;
|
|
@@ -1552,18 +857,18 @@
|
|
|
1552
857
|
right: 60%;
|
|
1553
858
|
}
|
|
1554
859
|
.ShortCashierContainer{
|
|
1555
|
-
background-color: var(--
|
|
860
|
+
background-color: var(--emfe-w-color-white, #FFFFFF);
|
|
1556
861
|
position: absolute;
|
|
1557
862
|
width: 360px;
|
|
1558
863
|
top: 16px;
|
|
1559
864
|
transform: translateX(-60%);
|
|
1560
|
-
box-shadow: 0px 30px 30px var(--
|
|
865
|
+
box-shadow: 0px 30px 30px var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1561
866
|
border-radius: 5px;
|
|
1562
867
|
z-index: 17;
|
|
1563
868
|
box-shadow: 0px 5px 20px 0px #191919;
|
|
1564
869
|
&:before {
|
|
1565
870
|
content: "";
|
|
1566
|
-
background: var(--
|
|
871
|
+
background: var(--emfe-w-color-white, #FFFFFF);
|
|
1567
872
|
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
|
|
1568
873
|
position: absolute;
|
|
1569
874
|
top: -8px;
|
|
@@ -1582,19 +887,19 @@
|
|
|
1582
887
|
z-index: 17;
|
|
1583
888
|
}
|
|
1584
889
|
.ShortCashierContainerMobile {
|
|
1585
|
-
background-color: var(--
|
|
890
|
+
background-color: var(--emfe-w-color-white, #FFFFFF);
|
|
1586
891
|
position: absolute;
|
|
1587
892
|
width: 80vw;
|
|
1588
893
|
top: 14px;
|
|
1589
894
|
left: 50%;
|
|
1590
895
|
transform: translateX(-60%);
|
|
1591
|
-
box-shadow: 0px 30px 30px var(--
|
|
896
|
+
box-shadow: 0px 30px 30px var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1592
897
|
border-radius: 5px;
|
|
1593
898
|
z-index: 17;
|
|
1594
899
|
box-shadow: 0px 5px 20px 0px #191919;
|
|
1595
900
|
&:before {
|
|
1596
901
|
content: "";
|
|
1597
|
-
background: var(--
|
|
902
|
+
background: var(--emfe-w-color-white, #FFFFFF);
|
|
1598
903
|
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
|
|
1599
904
|
position: absolute;
|
|
1600
905
|
top: -8px;
|
|
@@ -1606,6 +911,19 @@
|
|
|
1606
911
|
}
|
|
1607
912
|
}
|
|
1608
913
|
|
|
914
|
+
.SelectedOption,
|
|
915
|
+
.OptionList {
|
|
916
|
+
border: 1px solid var(--emfe-w-header-color-primary);
|
|
917
|
+
padding: 8px;
|
|
918
|
+
cursor: pointer;
|
|
919
|
+
width: 76px;
|
|
920
|
+
border-radius: 4px;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
.SelectedOption {
|
|
924
|
+
display: flex;
|
|
925
|
+
align-items: center;
|
|
926
|
+
}
|
|
1609
927
|
|
|
1610
928
|
.FlagIcon img {
|
|
1611
929
|
width: 20px;
|
|
@@ -1614,13 +932,74 @@
|
|
|
1614
932
|
border-radius: 2px;
|
|
1615
933
|
}
|
|
1616
934
|
|
|
935
|
+
.OptionList {
|
|
936
|
+
position: absolute;
|
|
937
|
+
z-index: 1;
|
|
938
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
939
|
+
background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-background-secondary, #050518));
|
|
940
|
+
max-height: 150px;
|
|
941
|
+
overflow-y: auto;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
.LanguageOption {
|
|
945
|
+
display: flex;
|
|
946
|
+
align-items: center;
|
|
947
|
+
padding: 4px;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
.TriangleInactive {
|
|
951
|
+
display: block;
|
|
952
|
+
color: currentColor;
|
|
953
|
+
margin: 0 0 0 10px;
|
|
954
|
+
transition: all .5s;
|
|
1617
955
|
|
|
956
|
+
svg{
|
|
957
|
+
margin: 2px 0px;
|
|
958
|
+
}
|
|
959
|
+
}
|
|
1618
960
|
|
|
961
|
+
.TriangleActive {
|
|
962
|
+
transform: rotate(180deg);
|
|
963
|
+
position: relative;
|
|
964
|
+
|
|
965
|
+
svg{
|
|
966
|
+
margin: 2px 0px;
|
|
967
|
+
}
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.LanguageOption:hover {
|
|
971
|
+
background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
972
|
+
border-radius: 2px;
|
|
973
|
+
}
|
|
1619
974
|
.HeaderWrapper {
|
|
1620
|
-
background: var(--
|
|
975
|
+
background: var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-background-secondary, #050518));
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
.HeaderContainer {
|
|
979
|
+
max-width: 1300px;
|
|
980
|
+
display: flex;
|
|
981
|
+
flex-direction: row;
|
|
982
|
+
align-items: center;
|
|
983
|
+
height: 84px;
|
|
984
|
+
margin: 0 auto;
|
|
1621
985
|
}
|
|
1622
986
|
|
|
987
|
+
.HeaderMobileMainNav {
|
|
988
|
+
display: flex;
|
|
989
|
+
align-items: center;
|
|
990
|
+
}
|
|
1623
991
|
|
|
992
|
+
.HeaderBranding {
|
|
993
|
+
width: 140px;
|
|
994
|
+
margin-right: 15px;
|
|
995
|
+
cursor: pointer;
|
|
996
|
+
img {
|
|
997
|
+
width: 100%;
|
|
998
|
+
}
|
|
999
|
+
@media only screen and (max-width: 360px) {
|
|
1000
|
+
margin-right: 0;
|
|
1001
|
+
}
|
|
1002
|
+
}
|
|
1624
1003
|
|
|
1625
1004
|
.HeaderMainNav {
|
|
1626
1005
|
text-align: left;
|
|
@@ -1634,8 +1013,8 @@
|
|
|
1634
1013
|
.HeaderSecondaryNav {
|
|
1635
1014
|
flex-direction: row;
|
|
1636
1015
|
width: 100%;
|
|
1637
|
-
background: var(--
|
|
1638
|
-
border-top: 1px solid var(--
|
|
1016
|
+
background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-background-secondary, #050518));
|
|
1017
|
+
border-top: 1px solid var(--emfe-w-color-gray-300, #58586B);
|
|
1639
1018
|
}
|
|
1640
1019
|
|
|
1641
1020
|
.HeaderItemsMenu {
|
|
@@ -1644,7 +1023,7 @@
|
|
|
1644
1023
|
align-content: flex-start;
|
|
1645
1024
|
list-style: none;
|
|
1646
1025
|
text-transform: uppercase;
|
|
1647
|
-
color: var(--
|
|
1026
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1648
1027
|
font-size: 16px;
|
|
1649
1028
|
align-items: center;
|
|
1650
1029
|
|
|
@@ -1666,20 +1045,43 @@
|
|
|
1666
1045
|
}
|
|
1667
1046
|
}
|
|
1668
1047
|
|
|
1669
|
-
|
|
1670
|
-
color: var(--
|
|
1048
|
+
.Item a {
|
|
1049
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1671
1050
|
text-decoration: none;
|
|
1672
1051
|
border-top: 1px solid transparent;
|
|
1673
1052
|
}
|
|
1674
1053
|
|
|
1675
1054
|
.Item a:hover {
|
|
1676
|
-
color: var(--
|
|
1677
|
-
border-top: 1px solid var(--
|
|
1055
|
+
color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1056
|
+
border-top: 1px solid var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1678
1057
|
padding-top: 5px;
|
|
1679
|
-
}
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
.ItemLogin {
|
|
1061
|
+
border-radius: 5px;
|
|
1062
|
+
background: transparent;
|
|
1063
|
+
font-size: 14px;
|
|
1064
|
+
font-weight: 600;
|
|
1065
|
+
border: solid 1px var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1066
|
+
height: 44px;
|
|
1067
|
+
text-align: center;
|
|
1068
|
+
line-height: 44px;
|
|
1069
|
+
margin-right: 10px;
|
|
1070
|
+
cursor: pointer;
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
.ItemRegister, .ItemDeposit {
|
|
1074
|
+
border-radius: 5px;
|
|
1075
|
+
background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1076
|
+
font-size: 14px;
|
|
1077
|
+
height: 44px;
|
|
1078
|
+
text-align: center;
|
|
1079
|
+
line-height: 44px;
|
|
1080
|
+
cursor: pointer;
|
|
1081
|
+
}
|
|
1680
1082
|
|
|
1681
1083
|
.ItemDeposit {
|
|
1682
|
-
background: var(--
|
|
1084
|
+
background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1683
1085
|
}
|
|
1684
1086
|
|
|
1685
1087
|
.ItemLanguage {
|
|
@@ -1688,7 +1090,7 @@
|
|
|
1688
1090
|
text-align: center;
|
|
1689
1091
|
line-height: 44px;
|
|
1690
1092
|
background: transparent;
|
|
1691
|
-
color: var(--
|
|
1093
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1692
1094
|
border: none;
|
|
1693
1095
|
cursor: pointer;
|
|
1694
1096
|
outline: none;
|
|
@@ -1697,12 +1099,12 @@
|
|
|
1697
1099
|
appearance: none;
|
|
1698
1100
|
|
|
1699
1101
|
option {
|
|
1700
|
-
color: var(--
|
|
1102
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1701
1103
|
}
|
|
1702
1104
|
}
|
|
1703
1105
|
|
|
1704
1106
|
.ItemLanguage.NoFlag{
|
|
1705
|
-
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--
|
|
1107
|
+
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-header-color-menu-bg, var(--emfe-w-color-background-secondary, #050518));
|
|
1706
1108
|
background-position: calc(100% - 0.75rem) center;
|
|
1707
1109
|
width: 90px;
|
|
1708
1110
|
margin-right: 6px;
|
|
@@ -1710,7 +1112,7 @@
|
|
|
1710
1112
|
|
|
1711
1113
|
.ItemBalance {
|
|
1712
1114
|
background: transparent;
|
|
1713
|
-
color: var(--
|
|
1115
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1714
1116
|
border: 0;
|
|
1715
1117
|
}
|
|
1716
1118
|
|
|
@@ -1731,7 +1133,7 @@
|
|
|
1731
1133
|
height: 60px;
|
|
1732
1134
|
list-style: none;
|
|
1733
1135
|
text-transform: uppercase;
|
|
1734
|
-
color: var(--
|
|
1136
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1735
1137
|
font-size: 14px;
|
|
1736
1138
|
max-width: 1280px;
|
|
1737
1139
|
margin: 0 auto;
|
|
@@ -1750,7 +1152,7 @@
|
|
|
1750
1152
|
transition-duration: 0.15s;
|
|
1751
1153
|
|
|
1752
1154
|
button {
|
|
1753
|
-
color: var(--
|
|
1155
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1754
1156
|
text-decoration: none;
|
|
1755
1157
|
border: none;
|
|
1756
1158
|
background: none;
|
|
@@ -1759,24 +1161,24 @@
|
|
|
1759
1161
|
text-transform: uppercase;
|
|
1760
1162
|
cursor: pointer;
|
|
1761
1163
|
&:hover {
|
|
1762
|
-
color: var(--
|
|
1164
|
+
color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1763
1165
|
}
|
|
1764
1166
|
|
|
1765
1167
|
&:focus {
|
|
1766
|
-
color: var(--
|
|
1168
|
+
color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1767
1169
|
}
|
|
1768
1170
|
|
|
1769
1171
|
&:visited {
|
|
1770
|
-
color: var(--
|
|
1172
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1771
1173
|
}
|
|
1772
1174
|
|
|
1773
1175
|
&:focus-visible {
|
|
1774
|
-
color: var(--
|
|
1176
|
+
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1775
1177
|
outline: none;
|
|
1776
1178
|
}
|
|
1777
1179
|
}
|
|
1778
1180
|
&.active {
|
|
1779
|
-
background: var(--
|
|
1181
|
+
background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1780
1182
|
}
|
|
1781
1183
|
}
|
|
1782
1184
|
|
|
@@ -1794,6 +1196,12 @@
|
|
|
1794
1196
|
}
|
|
1795
1197
|
}
|
|
1796
1198
|
|
|
1199
|
+
.HeaderBranding {
|
|
1200
|
+
width: 110px;
|
|
1201
|
+
display: flex;
|
|
1202
|
+
align-items: center;
|
|
1203
|
+
}
|
|
1204
|
+
|
|
1797
1205
|
.HeaderItemsMenu {
|
|
1798
1206
|
.Item {
|
|
1799
1207
|
padding: 0 10px;
|