@everymatrix/casino-header-controller 1.36.1 → 1.37.0
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.
|
@@ -11,137 +11,127 @@
|
|
|
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
|
|
14
17
|
import everymatrixLogo from './images/everymatrix-logo-white.png';
|
|
15
18
|
|
|
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 = '';
|
|
19
|
+
export let session: string = '';
|
|
20
|
+
export let userid: string = '';
|
|
21
|
+
export let endpoint: string = '';
|
|
22
|
+
export let cmsendpoint: string = '';
|
|
23
|
+
export let cmsenv: string = 'stage';
|
|
24
|
+
export let lang: string = 'en';
|
|
25
|
+
export let languageslist: string = 'en, ro';
|
|
26
|
+
export let activecategory: string = '';
|
|
27
|
+
export let translationurl: string = '';
|
|
28
|
+
export let customlocaleidentifier: string = '';
|
|
29
|
+
export let gmversion: string = '';
|
|
30
|
+
export let countryflagheader: string = 'false';
|
|
31
|
+
export let displaybalanceoption: string = 'All';
|
|
32
|
+
export let countryflaghamburger: string = 'false';
|
|
33
|
+
export let hasdefaultamount: string = '';
|
|
31
34
|
export let playercurrency: string ='';
|
|
32
35
|
|
|
33
36
|
//short cashier
|
|
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
|
|
58
|
-
let secondaryActiveIndex:string;
|
|
59
|
-
let identity:string = "HeaderMenu";
|
|
60
|
-
let customStylingContainer:HTMLElement;
|
|
37
|
+
export let shortcashierenabled: string = '';
|
|
38
|
+
export let producttype: string = '';
|
|
39
|
+
export let successurl: string = '';
|
|
40
|
+
export let failurl: string = '';
|
|
41
|
+
export let cancelurl: string = '';
|
|
42
|
+
export let sportsurl: string = '';
|
|
43
|
+
export let casinourl: string = '';
|
|
44
|
+
export let contacturl: string = '';
|
|
45
|
+
export let homeurl: string = '';
|
|
46
|
+
export let depositurl: string = '';
|
|
47
|
+
|
|
48
|
+
export let actionevent: string = '';
|
|
49
|
+
|
|
50
|
+
export let userroles: string = '';
|
|
51
|
+
export let showsubgroups: string = 'false';
|
|
52
|
+
export let clientstyling: string = '';
|
|
53
|
+
export let clientstylingurl: string = '';
|
|
54
|
+
|
|
55
|
+
export let currencyseparator: string = '';
|
|
56
|
+
export let currencydecimal: string = '';
|
|
57
|
+
export let currencyprecision: string = '';
|
|
58
|
+
|
|
59
|
+
let activeIndex: number;
|
|
60
|
+
let customStylingContainer: HTMLElement;
|
|
61
61
|
|
|
62
62
|
setupI18n({ withLocale: 'en', translations: {}});
|
|
63
63
|
|
|
64
|
-
const setTranslationUrl = ():void => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
const setTranslationUrl = (): void => {
|
|
65
|
+
fetch(translationurl)
|
|
66
|
+
.then((res: any): void => res.json())
|
|
67
|
+
.then((res: any): void => {
|
|
68
|
+
Object.keys(res).forEach((item:any): void => {
|
|
69
|
+
addNewMessages(item, res[item]);
|
|
70
|
+
});
|
|
71
|
+
}).catch((err: any): void => {
|
|
72
|
+
console.log(err);
|
|
71
73
|
});
|
|
72
|
-
}).catch((err:any) => {
|
|
73
|
-
console.log(err);
|
|
74
|
-
});
|
|
75
74
|
}
|
|
76
75
|
|
|
77
|
-
Object.keys(TRANSLATIONS).forEach((item:
|
|
76
|
+
Object.keys(TRANSLATIONS).forEach((item: string): void => {
|
|
78
77
|
addNewMessages(item, TRANSLATIONS[item]);
|
|
79
78
|
});
|
|
80
79
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
let
|
|
92
|
-
let
|
|
93
|
-
let
|
|
94
|
-
let
|
|
95
|
-
let
|
|
96
|
-
let
|
|
97
|
-
let
|
|
98
|
-
let
|
|
99
|
-
|
|
100
|
-
let
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const menuAction = (data: any) => {
|
|
80
|
+
let mainMenuArray: Array<string> = [];
|
|
81
|
+
let secondaryMenuArray: Array<string> = [];
|
|
82
|
+
let selectedLanguage: string = '';
|
|
83
|
+
let hamburgerURL: URL;
|
|
84
|
+
let headerURL: URL;
|
|
85
|
+
let logoURL: URL;
|
|
86
|
+
let isLoading: boolean = true;
|
|
87
|
+
let logoFromCms: boolean = false;
|
|
88
|
+
let primaryMenuLoading: boolean = true;
|
|
89
|
+
|
|
90
|
+
let isOptionsListVisible: boolean = false;
|
|
91
|
+
let mobileView: boolean = false;
|
|
92
|
+
let userAgent: string = window.navigator.userAgent;
|
|
93
|
+
let isLoggedIn: boolean = false;
|
|
94
|
+
let playerID: string = '';
|
|
95
|
+
let sessionID: string = '';
|
|
96
|
+
let languagesArray: Array<string> = [];
|
|
97
|
+
let hamburgerMenuActive: boolean = false;
|
|
98
|
+
let logoPath: string = '';
|
|
99
|
+
let shortCashierActivated: boolean = false;
|
|
100
|
+
|
|
101
|
+
const gtagCall = (eventName: string): void => {
|
|
102
|
+
// @ts-ignore
|
|
103
|
+
if (typeof gtag == 'function'){
|
|
104
|
+
// @ts-ignore
|
|
105
|
+
gtag('event', eventName, {
|
|
106
|
+
'context': 'HeaderController'
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const menuAction = (data: any): void => {
|
|
114
112
|
switch (data) {
|
|
115
113
|
case 'login':
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
//Analytics event
|
|
120
|
-
if (typeof gtag == 'function'){
|
|
121
|
-
gtag('event', 'OpenLoginModal', {
|
|
122
|
-
'context': 'HeaderController'
|
|
123
|
-
});
|
|
124
|
-
}
|
|
114
|
+
window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
|
|
115
|
+
|
|
116
|
+
gtagCall('OpenLoginModal');
|
|
125
117
|
break;
|
|
126
118
|
|
|
127
119
|
case 'register':
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
//Analytics event
|
|
132
|
-
if (typeof gtag == 'function'){
|
|
133
|
-
gtag('event', 'OpenRegisterModal', {
|
|
134
|
-
'context': 'HeaderController'
|
|
135
|
-
});
|
|
136
|
-
}
|
|
120
|
+
window.postMessage({ type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
|
|
121
|
+
|
|
122
|
+
gtagCall('OpenRegisterModal');
|
|
137
123
|
break;
|
|
138
124
|
|
|
139
125
|
case 'lobby':
|
|
140
|
-
window.postMessage({type: 'GoToHomepage'}, window.location.href);
|
|
126
|
+
window.postMessage({ type: 'GoToHomepage' }, window.location.href);
|
|
127
|
+
|
|
128
|
+
gtagCall('GoToHomepage');
|
|
141
129
|
break;
|
|
142
130
|
|
|
143
131
|
case 'myaccount':
|
|
144
|
-
window.postMessage({type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent)}, window.location.href);
|
|
132
|
+
window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: isMobile(userAgent) }, window.location.href);
|
|
133
|
+
|
|
134
|
+
gtagCall('GoToMyAccount');
|
|
145
135
|
break;
|
|
146
136
|
|
|
147
137
|
case 'deposit':
|
|
@@ -149,29 +139,24 @@
|
|
|
149
139
|
shortCashierActivated = true;
|
|
150
140
|
window.postMessage({ type: 'DisableScroll' }, window.location.href);
|
|
151
141
|
} else {
|
|
152
|
-
window.postMessage({type: 'GoToDeposit'}, window.location.href);
|
|
142
|
+
window.postMessage({ type: 'GoToDeposit' }, window.location.href);
|
|
153
143
|
}
|
|
154
144
|
|
|
155
|
-
|
|
156
|
-
if (typeof gtag == 'function'){
|
|
157
|
-
gtag('event', 'GoToDeposit', {
|
|
158
|
-
'context': 'HeaderController'
|
|
159
|
-
});
|
|
160
|
-
}
|
|
145
|
+
gtagCall('GoToDeposit');
|
|
161
146
|
break;
|
|
162
147
|
|
|
163
148
|
case 'language':
|
|
164
|
-
window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
|
|
149
|
+
window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
|
|
165
150
|
break;
|
|
166
151
|
}
|
|
167
152
|
}
|
|
168
153
|
|
|
169
|
-
const toggleMenu = () => {
|
|
170
|
-
hamburgerMenuActive =
|
|
171
|
-
window.postMessage({type: 'OpenHamburgerMenuModal'}, window.location.href);
|
|
154
|
+
const toggleMenu = (): void => {
|
|
155
|
+
hamburgerMenuActive = !hamburgerMenuActive;
|
|
156
|
+
window.postMessage({ type: 'OpenHamburgerMenuModal' }, window.location.href);
|
|
172
157
|
}
|
|
173
158
|
|
|
174
|
-
const messageHandler = (e: any) => {
|
|
159
|
+
const messageHandler = (e: any): void => {
|
|
175
160
|
if (e.data) {
|
|
176
161
|
switch (e.data.type) {
|
|
177
162
|
case 'UserSessionID':
|
|
@@ -181,7 +166,7 @@
|
|
|
181
166
|
break;
|
|
182
167
|
|
|
183
168
|
case 'CloseHamburgerMenu':
|
|
184
|
-
window.postMessage({ type: 'EnableScroll'}, window.location.href);
|
|
169
|
+
window.postMessage({ type: 'EnableScroll' }, window.location.href);
|
|
185
170
|
if (e.data.showhamburger) {
|
|
186
171
|
hamburgerMenuActive = false;
|
|
187
172
|
}
|
|
@@ -203,7 +188,7 @@
|
|
|
203
188
|
case 'CloseShortCashier':
|
|
204
189
|
closeShortCashier();
|
|
205
190
|
break;
|
|
206
|
-
|
|
191
|
+
|
|
207
192
|
case 'RequestHeaderHeight':
|
|
208
193
|
window.postMessage({ type: 'HeaderHeight', headerHeight: customStylingContainer.clientHeight }, window.location.href);
|
|
209
194
|
break;
|
|
@@ -211,27 +196,26 @@
|
|
|
211
196
|
}
|
|
212
197
|
}
|
|
213
198
|
|
|
214
|
-
const setSession = () => {
|
|
199
|
+
const setSession = (): void => {
|
|
215
200
|
isLoggedIn = true;
|
|
216
201
|
sessionID = session;
|
|
217
202
|
}
|
|
218
203
|
|
|
219
|
-
const closeShortCashier = (event
|
|
204
|
+
const closeShortCashier = (event?: any): void => {
|
|
220
205
|
shortCashierActivated = false;
|
|
221
206
|
window.postMessage({ type: 'EnableScroll' }, window.location.href);
|
|
222
207
|
event?.stopPropagation();
|
|
223
208
|
}
|
|
224
209
|
|
|
225
|
-
const createCMSUrls = () => {
|
|
226
|
-
headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
|
|
210
|
+
const createCMSUrls = (): void => {
|
|
211
|
+
headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`);
|
|
227
212
|
hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
|
|
228
213
|
logoURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/op-options/style`);
|
|
229
214
|
|
|
230
|
-
let device = getDevice(userAgent)
|
|
215
|
+
let device = getDevice(userAgent);
|
|
231
216
|
|
|
232
217
|
headerURL.searchParams.append('env', cmsenv);
|
|
233
218
|
headerURL.searchParams.append('language', selectedLanguage.toLowerCase());
|
|
234
|
-
//headerURL.searchParams.append('platform', 'dk');
|
|
235
219
|
headerURL.searchParams.append('userRoles', userroles);
|
|
236
220
|
|
|
237
221
|
if (device) {
|
|
@@ -248,75 +232,69 @@
|
|
|
248
232
|
}
|
|
249
233
|
hamburgerURL.searchParams.append('env', cmsenv);
|
|
250
234
|
hamburgerURL.searchParams.append('language', selectedLanguage.toLowerCase());
|
|
251
|
-
//hamburgerURL.searchParams.append('platform', 'dk');
|
|
252
235
|
hamburgerURL.searchParams.append('userRoles', userroles);
|
|
253
236
|
|
|
237
|
+
getHeaderMenusData(headerURL);
|
|
254
238
|
}
|
|
255
239
|
|
|
256
|
-
const setActiveLanguage = ():void => {
|
|
240
|
+
const setActiveLanguage = (): void => {
|
|
257
241
|
setLocale(lang);
|
|
258
242
|
}
|
|
259
243
|
|
|
260
|
-
const initialLoad = ():void => {
|
|
244
|
+
const initialLoad = (): void => {
|
|
261
245
|
languagesArray = languageslist.replace(/ /g,'').split(',');
|
|
262
246
|
languagesArray = languagesArray.map((language:string) => language.toUpperCase());
|
|
263
247
|
|
|
264
248
|
selectedLanguage = lang.toUpperCase();
|
|
265
|
-
createCMSUrls();
|
|
266
249
|
|
|
250
|
+
createCMSUrls();
|
|
267
251
|
getLogo(logoURL);
|
|
268
|
-
// getHeaderMenusData need to execute after the initialLoad receives the current lang value
|
|
269
|
-
setTimeout(() => {
|
|
270
|
-
getHeaderMenusData(headerURL);
|
|
271
|
-
})
|
|
272
252
|
}
|
|
273
253
|
|
|
274
|
-
const initializeMenu = ():void => {
|
|
275
|
-
primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
|
|
276
|
-
secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
|
|
254
|
+
const initializeMenu = (): void => {
|
|
255
|
+
const primaryActiveIndex = setActiveIndex(activecategory, mainMenuArray);
|
|
256
|
+
const secondaryActiveIndex = setActiveIndex(activecategory, secondaryMenuArray);
|
|
257
|
+
activeIndex = primaryActiveIndex > secondaryActiveIndex ? primaryActiveIndex : secondaryActiveIndex;
|
|
277
258
|
}
|
|
278
259
|
|
|
279
|
-
const setActiveIndex = (activecategory, menuList) => {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
260
|
+
const setActiveIndex = (activecategory: any, menuList: any): any => {
|
|
261
|
+
let result = menuList.find(item => {
|
|
262
|
+
if (activecategory.indexOf('/sport') > -1) {
|
|
263
|
+
return item.path.indexOf(activecategory) > -1;
|
|
264
|
+
} else {
|
|
265
|
+
if (item.path.includes(activecategory)) {
|
|
266
|
+
return true;
|
|
267
|
+
}
|
|
286
268
|
}
|
|
287
|
-
}
|
|
288
|
-
});
|
|
289
|
-
|
|
290
|
-
if (!result) {
|
|
291
|
-
result = menuList.find(item => {
|
|
292
|
-
return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
|
|
293
269
|
});
|
|
294
|
-
}
|
|
295
270
|
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
}
|
|
271
|
+
if (!result) {
|
|
272
|
+
result = menuList.find((item: any): boolean => {
|
|
273
|
+
return item.path.split('/').indexOf(activecategory.split('/')[1]) > -1;
|
|
274
|
+
});
|
|
275
|
+
}
|
|
302
276
|
|
|
303
|
-
|
|
304
|
-
|
|
277
|
+
if (result) {
|
|
278
|
+
return result.id;
|
|
279
|
+
} else {
|
|
280
|
+
return -1;
|
|
281
|
+
}
|
|
305
282
|
}
|
|
306
283
|
|
|
307
|
-
const getHeaderMenusData = (url:any):Promise<any> => {
|
|
284
|
+
const getHeaderMenusData = (url: any): Promise<any> => {
|
|
308
285
|
isLoading = true;
|
|
309
|
-
|
|
310
|
-
return new Promise((resolve, reject) => {
|
|
286
|
+
|
|
287
|
+
return new Promise((resolve, reject): void => {
|
|
311
288
|
fetch(url)
|
|
312
|
-
.then((res: any) => res.json())
|
|
313
|
-
.then((data: any) => {
|
|
289
|
+
.then((res: any): void => res.json())
|
|
290
|
+
.then((data: any): void => {
|
|
314
291
|
mainMenuArray = data.desktop.primary;
|
|
315
292
|
secondaryMenuArray = data.desktop.secondary;
|
|
316
293
|
isLoading = false;
|
|
294
|
+
primaryMenuLoading = false;
|
|
317
295
|
|
|
318
296
|
resolve(data);
|
|
319
|
-
}, (err: any) => {
|
|
297
|
+
}, (err: any): void => {
|
|
320
298
|
isLoading = false;
|
|
321
299
|
console.error(err);
|
|
322
300
|
reject(err);
|
|
@@ -324,13 +302,13 @@
|
|
|
324
302
|
});
|
|
325
303
|
}
|
|
326
304
|
|
|
327
|
-
const getLogo = (url:
|
|
305
|
+
const getLogo = (url: URL): Promise<any> => {
|
|
328
306
|
logoFromCms = false;
|
|
329
307
|
|
|
330
|
-
return new Promise((resolve, reject) => {
|
|
308
|
+
return new Promise((resolve, reject): void => {
|
|
331
309
|
fetch(url)
|
|
332
|
-
.then((res: any) => res.json())
|
|
333
|
-
.then((data: any) => {
|
|
310
|
+
.then((res: any): void => res.json())
|
|
311
|
+
.then((data: any): void => {
|
|
334
312
|
if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
|
|
335
313
|
logoPath = data.logoUrl;
|
|
336
314
|
logoFromCms = true;
|
|
@@ -338,7 +316,7 @@
|
|
|
338
316
|
logoFromCms = false;
|
|
339
317
|
}
|
|
340
318
|
resolve(data);
|
|
341
|
-
}, (err: any) => {
|
|
319
|
+
}, (err: any): void => {
|
|
342
320
|
logoFromCms = false;
|
|
343
321
|
console.error(err);
|
|
344
322
|
reject(err);
|
|
@@ -346,11 +324,11 @@
|
|
|
346
324
|
});
|
|
347
325
|
}
|
|
348
326
|
|
|
349
|
-
const navigationTrigger = (itemData:any) => {
|
|
327
|
+
const navigationTrigger = (itemData: any): void => {
|
|
350
328
|
window.postMessage({ type: 'NavigateTo', itemId: itemData.id, item: itemData, path: itemData.path, externalLink: itemData.externalLink || false, target: itemData.attrs?.target || null }, window.location.href);
|
|
351
329
|
}
|
|
352
330
|
|
|
353
|
-
const selectLanguage = (operatorLanguage:string): void => {
|
|
331
|
+
const selectLanguage = (operatorLanguage: string): void => {
|
|
354
332
|
selectedLanguage = operatorLanguage;
|
|
355
333
|
isOptionsListVisible = false;
|
|
356
334
|
menuAction('language');
|
|
@@ -360,30 +338,32 @@
|
|
|
360
338
|
isOptionsListVisible = !isOptionsListVisible;
|
|
361
339
|
}
|
|
362
340
|
|
|
363
|
-
const determineFlag = (
|
|
341
|
+
const determineFlag = (operatorLanguage?: string): string => {
|
|
342
|
+
let flag = operatorLanguage ? operatorLanguage.slice(-2) : selectedLanguage.slice(-2);
|
|
343
|
+
|
|
364
344
|
if (customlocaleidentifier) {
|
|
365
|
-
|
|
366
|
-
customlocaleidentifier.includes(
|
|
367
|
-
customlocaleidentifier.slice(-2) :
|
|
368
|
-
|
|
345
|
+
flag =
|
|
346
|
+
customlocaleidentifier.includes(flag.toLowerCase()) ?
|
|
347
|
+
customlocaleidentifier.slice(-2) :
|
|
348
|
+
flag;
|
|
369
349
|
}
|
|
370
350
|
|
|
371
|
-
return
|
|
351
|
+
return flag == 'EN' ? 'US' : flag.toUpperCase();
|
|
372
352
|
}
|
|
373
353
|
|
|
374
|
-
const setClientStyling = ():void => {
|
|
354
|
+
const setClientStyling = (): void => {
|
|
375
355
|
let sheet = document.createElement('style');
|
|
376
356
|
sheet.innerHTML = clientstyling;
|
|
377
357
|
customStylingContainer.appendChild(sheet);
|
|
378
358
|
}
|
|
379
359
|
|
|
380
|
-
const setClientStylingURL = ():void => {
|
|
381
|
-
let url:URL = new URL(clientstylingurl);
|
|
382
|
-
let cssFile:HTMLElement = document.createElement('style');
|
|
360
|
+
const setClientStylingURL = (): void => {
|
|
361
|
+
let url: URL = new URL(clientstylingurl);
|
|
362
|
+
let cssFile: HTMLElement = document.createElement('style');
|
|
383
363
|
|
|
384
364
|
fetch(url.href)
|
|
385
|
-
.then((res:any) => res.text())
|
|
386
|
-
.then((data:any) => {
|
|
365
|
+
.then((res: any): void => res.text())
|
|
366
|
+
.then((data: any): void => {
|
|
387
367
|
cssFile.innerHTML = data
|
|
388
368
|
|
|
389
369
|
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
@@ -393,9 +373,8 @@
|
|
|
393
373
|
onMount(async () => {
|
|
394
374
|
window.addEventListener('message', messageHandler, false);
|
|
395
375
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
}
|
|
376
|
+
mobileView = isMobile(userAgent);
|
|
377
|
+
console.log('mobileView', mobileView)
|
|
399
378
|
|
|
400
379
|
return () => {
|
|
401
380
|
window.removeEventListener('message', messageHandler);
|
|
@@ -412,10 +391,200 @@
|
|
|
412
391
|
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
413
392
|
</script>
|
|
414
393
|
|
|
415
|
-
<
|
|
416
|
-
<
|
|
417
|
-
|
|
418
|
-
|
|
394
|
+
<div class="HeaderContainer" bind:this={customStylingContainer}>
|
|
395
|
+
<div class="MainNav">
|
|
396
|
+
{#if mobileView}
|
|
397
|
+
<div class="HeaderMobileMainNav">
|
|
398
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
399
|
+
<div on:click={toggleMenu} class="NavIcon {hamburgerMenuActive ? 'Open' : ''}">
|
|
400
|
+
<span></span>
|
|
401
|
+
<span></span>
|
|
402
|
+
<span></span>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
{/if}
|
|
406
|
+
<div class="Logo">
|
|
407
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
408
|
+
<div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
|
|
409
|
+
{#if logoFromCms}
|
|
410
|
+
<img src={logoPath} alt="Logo">
|
|
411
|
+
{:else}
|
|
412
|
+
<img src={everymatrixLogo} alt="Logo">
|
|
413
|
+
{/if}
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
<nav class="PrimaryMenu">
|
|
417
|
+
{#if !mobileView}
|
|
418
|
+
{#if primaryMenuLoading}
|
|
419
|
+
{#each new Array(6) as item}
|
|
420
|
+
<div class="Skeleton SkeletonText"></div>
|
|
421
|
+
{/each}
|
|
422
|
+
{:else}
|
|
423
|
+
{#each mainMenuArray as menuItem}
|
|
424
|
+
<div class="ItemMenu {menuItem.id == activeIndex ? 'Active' : ''}">
|
|
425
|
+
<p>{menuItem.label}</p>
|
|
426
|
+
<div class="MenuHover"></div>
|
|
427
|
+
</div>
|
|
428
|
+
{/each}
|
|
429
|
+
{/if}
|
|
430
|
+
{/if}
|
|
431
|
+
</nav>
|
|
432
|
+
{#if isLoggedIn}
|
|
433
|
+
<div class="BalanceDepositWrapper">
|
|
434
|
+
<div class="Balance">
|
|
435
|
+
<player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
|
|
436
|
+
</div>
|
|
437
|
+
<div class="Deposit">
|
|
438
|
+
<div class="DepositButton">
|
|
439
|
+
<p>Deposit</p>
|
|
440
|
+
</div>
|
|
441
|
+
{#if shortCashierActivated}
|
|
442
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
443
|
+
<div class="ShortCashierWindow" on:click={(event) => closeShortCashier(event)}></div>
|
|
444
|
+
<div class="ShortCashierContainerWrapperMobile">
|
|
445
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
446
|
+
<div class="ShortCashierContainerMobile">
|
|
447
|
+
<div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
|
|
448
|
+
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
|
|
449
|
+
<line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
|
|
450
|
+
<line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
|
|
451
|
+
</svg>
|
|
452
|
+
</div>
|
|
453
|
+
{#if gmversion === 'gmcore'}
|
|
454
|
+
<player-deposit
|
|
455
|
+
{endpoint}
|
|
456
|
+
{session}
|
|
457
|
+
playerid={userid}
|
|
458
|
+
{lang}
|
|
459
|
+
{hasdefaultamount}
|
|
460
|
+
{playercurrency}
|
|
461
|
+
{shortcashierenabled}
|
|
462
|
+
{clientstyling}
|
|
463
|
+
{clientstylingurl}
|
|
464
|
+
></player-deposit>
|
|
465
|
+
{:else}
|
|
466
|
+
<user-deposit-withdrawal
|
|
467
|
+
{endpoint}
|
|
468
|
+
type="deposit"
|
|
469
|
+
channel="Mobile"
|
|
470
|
+
language={lang}
|
|
471
|
+
is-short-cashier={shortcashierenabled}
|
|
472
|
+
product-type={producttype}
|
|
473
|
+
user-id={userid}
|
|
474
|
+
{session}
|
|
475
|
+
success-url={'https://' + window.location.hostname + '/' + lang + successurl}
|
|
476
|
+
cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
|
|
477
|
+
fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
|
|
478
|
+
sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
|
|
479
|
+
casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
|
|
480
|
+
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
481
|
+
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
482
|
+
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
483
|
+
></user-deposit-withdrawal>
|
|
484
|
+
{/if}
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
{/if}
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="Profile">
|
|
491
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
492
|
+
<div class="ProfileWrapper" on:click={() => menuAction('myaccount')}>
|
|
493
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16.429">
|
|
494
|
+
<g transform="translate(-8 -4)">
|
|
495
|
+
<path class="a"
|
|
496
|
+
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"
|
|
497
|
+
transform="translate(0 0)"/>
|
|
498
|
+
</g>
|
|
499
|
+
</svg>
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
502
|
+
{:else}
|
|
503
|
+
<div class="AuthButtons">
|
|
504
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
505
|
+
<div class="Item ItemLogin" on:click={()=>menuAction('login')}>
|
|
506
|
+
<p>{$_('login')}</p>
|
|
507
|
+
<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>
|
|
508
|
+
</div>
|
|
509
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
510
|
+
<div class="Item ItemRegister" on:click={()=>menuAction('register')}>
|
|
511
|
+
<p>{$_('register')}</p>
|
|
512
|
+
<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>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
{/if}
|
|
516
|
+
<div class="Slot1">
|
|
517
|
+
<slot name="slot1">
|
|
518
|
+
</slot>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="Slot2">
|
|
521
|
+
<slot name="slot2"></slot>
|
|
522
|
+
</div>
|
|
523
|
+
<div class="Slot3">
|
|
524
|
+
<slot name="slot3"></slot>
|
|
525
|
+
</div>
|
|
526
|
+
{#if !mobileView}
|
|
527
|
+
<div class="LanguageSelector">
|
|
528
|
+
{#if (languagesArray.length > 1) }
|
|
529
|
+
{#if countryflagheader !== 'true'}
|
|
530
|
+
<select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
|
|
531
|
+
{#each languagesArray as operatorLanguage}
|
|
532
|
+
<option value={operatorLanguage} selected>{operatorLanguage.slice(-2)}</option>
|
|
533
|
+
{/each}
|
|
534
|
+
</select>
|
|
535
|
+
{:else}
|
|
536
|
+
<div class="LanguageDropdown">
|
|
537
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
538
|
+
<div class="SelectedOption" on:click={() => toggleLanguageDropdown()}>
|
|
539
|
+
<span class="LanguageName">{@html countryFlags[determineFlag()]}</span>
|
|
540
|
+
<span class=" {isOptionsListVisible ? 'TriangleActive' : 'TriangleInactive'}">
|
|
541
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
|
|
542
|
+
<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"/>
|
|
543
|
+
</svg>
|
|
544
|
+
</span>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
<div class="OptionList {isOptionsListVisible ? 'Active' : ''}">
|
|
548
|
+
{#each languagesArray as operatorLanguage}
|
|
549
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
550
|
+
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
|
551
|
+
<span class="FlagIcon">
|
|
552
|
+
{@html countryFlags[determineFlag(operatorLanguage)]}
|
|
553
|
+
</span>
|
|
554
|
+
<span class="LanguageName">{operatorLanguage.slice(-2)}</span>
|
|
555
|
+
</div>
|
|
556
|
+
{/each}
|
|
557
|
+
</div>
|
|
558
|
+
{/if}
|
|
559
|
+
{/if}
|
|
560
|
+
</div>
|
|
561
|
+
{/if}
|
|
562
|
+
</div>
|
|
563
|
+
<div class="Separator">
|
|
564
|
+
|
|
565
|
+
</div>
|
|
566
|
+
{#if !mobileView}
|
|
567
|
+
<div class="SecondaryNav">
|
|
568
|
+
<div class="LeftSpace">
|
|
569
|
+
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
|
|
570
|
+
</div>
|
|
571
|
+
<div class="SecondaryMenuContent">
|
|
572
|
+
{#if primaryMenuLoading}
|
|
573
|
+
{#each new Array(2) as item}
|
|
574
|
+
<div class="Skeleton SkeletonText"></div>
|
|
575
|
+
{/each}
|
|
576
|
+
{:else}
|
|
577
|
+
{#each secondaryMenuArray as secondaryItem}
|
|
578
|
+
<span class="ItemSecondary {secondaryItem.id == activeIndex ? 'Active' : ''}">
|
|
579
|
+
<p on:click={() => navigationTrigger(secondaryItem)}>{secondaryItem.label}</p>
|
|
580
|
+
</span>
|
|
581
|
+
{/each}
|
|
582
|
+
{/if}
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
{/if}
|
|
586
|
+
</div>
|
|
587
|
+
<!--
|
|
419
588
|
{#if isLoggedIn}
|
|
420
589
|
{#if mobileView}
|
|
421
590
|
<header class="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
|
|
@@ -426,7 +595,7 @@
|
|
|
426
595
|
viewBox="0 0 22 16">
|
|
427
596
|
<defs>
|
|
428
597
|
<style>.a {
|
|
429
|
-
fill: var(--
|
|
598
|
+
fill: var(--emw-color-white, #FFFFFF);
|
|
430
599
|
}
|
|
431
600
|
</style>
|
|
432
601
|
</defs>
|
|
@@ -438,13 +607,6 @@
|
|
|
438
607
|
</svg>
|
|
439
608
|
{/if}
|
|
440
609
|
</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>
|
|
448
610
|
|
|
449
611
|
<div class="HeaderTopActions" part="HeaderTopActions">
|
|
450
612
|
<div class="HeaderItemsMenu PrimaryMenu" part="HeaderItemsMenu PrimaryMenu">
|
|
@@ -474,23 +636,23 @@
|
|
|
474
636
|
{clientstylingurl}
|
|
475
637
|
></player-deposit>
|
|
476
638
|
{:else}
|
|
477
|
-
<user-deposit-withdrawal
|
|
478
|
-
{endpoint}
|
|
479
|
-
type="deposit"
|
|
639
|
+
<user-deposit-withdrawal
|
|
640
|
+
{endpoint}
|
|
641
|
+
type="deposit"
|
|
480
642
|
channel="Mobile"
|
|
481
|
-
language={lang}
|
|
643
|
+
language={lang}
|
|
482
644
|
is-short-cashier={shortcashierenabled}
|
|
483
|
-
product-type={producttype}
|
|
484
|
-
user-id={userid}
|
|
485
|
-
{session}
|
|
486
|
-
success-url={'https://' + window.location.hostname + '/' + lang + successurl}
|
|
487
|
-
cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
|
|
488
|
-
fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
|
|
489
|
-
sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
|
|
490
|
-
casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
|
|
491
|
-
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
492
|
-
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
493
|
-
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
645
|
+
product-type={producttype}
|
|
646
|
+
user-id={userid}
|
|
647
|
+
{session}
|
|
648
|
+
success-url={'https://' + window.location.hostname + '/' + lang + successurl}
|
|
649
|
+
cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
|
|
650
|
+
fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
|
|
651
|
+
sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
|
|
652
|
+
casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
|
|
653
|
+
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
654
|
+
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
655
|
+
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
494
656
|
></user-deposit-withdrawal>
|
|
495
657
|
{/if}
|
|
496
658
|
</div>
|
|
@@ -501,7 +663,7 @@
|
|
|
501
663
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
|
|
502
664
|
<defs>
|
|
503
665
|
<style>.a {
|
|
504
|
-
fill: var(--
|
|
666
|
+
fill: var(--emw-color-white, #FFFFFF);
|
|
505
667
|
}
|
|
506
668
|
</style>
|
|
507
669
|
</defs>
|
|
@@ -519,13 +681,6 @@
|
|
|
519
681
|
{:else}
|
|
520
682
|
<header class="HeaderWrapper" bind:this={customStylingContainer}>
|
|
521
683
|
<div class="HeaderContainer">
|
|
522
|
-
<div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
|
|
523
|
-
{#if logoFromCms}
|
|
524
|
-
<img src={logoPath} alt="Logo">
|
|
525
|
-
{:else}
|
|
526
|
-
<img src={everymatrixLogo} alt="Logo">
|
|
527
|
-
{/if}
|
|
528
|
-
</div>
|
|
529
684
|
|
|
530
685
|
<nav class="HeaderMainNav">
|
|
531
686
|
{#if !isLoading}
|
|
@@ -574,23 +729,23 @@
|
|
|
574
729
|
{clientstylingurl}
|
|
575
730
|
></player-deposit>
|
|
576
731
|
{:else}
|
|
577
|
-
<user-deposit-withdrawal
|
|
578
|
-
{endpoint}
|
|
579
|
-
type="deposit"
|
|
732
|
+
<user-deposit-withdrawal
|
|
733
|
+
{endpoint}
|
|
734
|
+
type="deposit"
|
|
580
735
|
channel="Desktop"
|
|
581
|
-
language={lang}
|
|
736
|
+
language={lang}
|
|
582
737
|
is-short-cashier={shortcashierenabled}
|
|
583
|
-
product-type={producttype}
|
|
584
|
-
user-id={userid}
|
|
585
|
-
{session}
|
|
586
|
-
success-url={'https://' + window.location.hostname + '/' + lang + successurl}
|
|
587
|
-
cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
|
|
588
|
-
fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
|
|
589
|
-
sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
|
|
590
|
-
casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
|
|
591
|
-
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
592
|
-
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
593
|
-
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
738
|
+
product-type={producttype}
|
|
739
|
+
user-id={userid}
|
|
740
|
+
{session}
|
|
741
|
+
success-url={'https://' + window.location.hostname + '/' + lang + successurl}
|
|
742
|
+
cancel-url={'https://' + window.location.hostname + '/' + lang + cancelurl}
|
|
743
|
+
fail-url={'https://' + window.location.hostname + '/' + lang + failurl}
|
|
744
|
+
sports-url={'https://' + window.location.hostname + '/' + lang + sportsurl}
|
|
745
|
+
casino-url={'https://' + window.location.hostname + '/' + lang + casinourl}
|
|
746
|
+
contact-url={'https://' + window.location.hostname + '/' + lang + contacturl}
|
|
747
|
+
home-url={'https://' + window.location.hostname + '/' + lang + homeurl}
|
|
748
|
+
deposit-url={'https://' + window.location.hostname + '/' + lang + depositurl}
|
|
594
749
|
></user-deposit-withdrawal>
|
|
595
750
|
{/if}
|
|
596
751
|
</div>
|
|
@@ -601,7 +756,7 @@
|
|
|
601
756
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
|
|
602
757
|
<defs>
|
|
603
758
|
<style>.a {
|
|
604
|
-
fill: var(--
|
|
759
|
+
fill: var(--emw-color-white, #FFFFFF);
|
|
605
760
|
}
|
|
606
761
|
</style>
|
|
607
762
|
</defs>
|
|
@@ -612,42 +767,6 @@
|
|
|
612
767
|
</g>
|
|
613
768
|
</svg>
|
|
614
769
|
</div>
|
|
615
|
-
{#if (languagesArray.length > 1) }
|
|
616
|
-
{#if countryflagheader !== 'true'}
|
|
617
|
-
<select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
|
|
618
|
-
{#each languagesArray as operatorLanguage}
|
|
619
|
-
<option value={operatorLanguage} selected>{operatorLanguage.slice(-2)}</option>
|
|
620
|
-
{/each}
|
|
621
|
-
</select>
|
|
622
|
-
{:else}
|
|
623
|
-
<div class="LanguageDropdown">
|
|
624
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
625
|
-
<div class="SelectedOption Item ItemLanguage" on:click={() => toggleLanguageDropdown()}>
|
|
626
|
-
<span class="FlagIcon">
|
|
627
|
-
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(selectedLanguage.slice(-2))}.svg`}/>
|
|
628
|
-
</span>
|
|
629
|
-
<span class="LanguageName">{selectedLanguage.slice(-2)}</span>
|
|
630
|
-
<span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
|
|
631
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
|
|
632
|
-
<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"/>
|
|
633
|
-
</svg>
|
|
634
|
-
</span>
|
|
635
|
-
</div>
|
|
636
|
-
{#if isOptionsListVisible}
|
|
637
|
-
<div class="OptionList">
|
|
638
|
-
{#each languagesArray as operatorLanguage}
|
|
639
|
-
<div class="LanguageOption" on:click={() => selectLanguage(operatorLanguage)}>
|
|
640
|
-
<span class="FlagIcon">
|
|
641
|
-
<img src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${determineFlag(operatorLanguage.slice(-2))}.svg`}/>
|
|
642
|
-
</span>
|
|
643
|
-
<span class="LanguageName">{operatorLanguage.slice(-2)}</span>
|
|
644
|
-
</div>
|
|
645
|
-
{/each}
|
|
646
|
-
</div>
|
|
647
|
-
{/if}
|
|
648
|
-
</div>
|
|
649
|
-
{/if}
|
|
650
|
-
{/if}
|
|
651
770
|
</div>
|
|
652
771
|
</div>
|
|
653
772
|
</div>
|
|
@@ -671,7 +790,7 @@
|
|
|
671
790
|
viewBox="0 0 22 16">
|
|
672
791
|
<defs>
|
|
673
792
|
<style>.a {
|
|
674
|
-
fill: var(--
|
|
793
|
+
fill: var(--emw-color-white, #FFFFFF);
|
|
675
794
|
}
|
|
676
795
|
</style>
|
|
677
796
|
</defs>
|
|
@@ -730,8 +849,8 @@
|
|
|
730
849
|
<div class="HeaderTopActions">
|
|
731
850
|
<div class="HeaderItemsMenu">
|
|
732
851
|
<div class="Item ItemLogin" tabindex="0" on:click={()=>menuAction('login')}>{$_('login')}</div>
|
|
733
|
-
<div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
|
|
734
|
-
{#if (languagesArray.length > 1) }
|
|
852
|
+
<div class="Item ItemRegister" tabindex="0" on:click={()=>menuAction('register')}>{$_('register')}</div>
|
|
853
|
+
{#if (languagesArray.length > 1) }
|
|
735
854
|
{#if countryflagheader !== 'true'}
|
|
736
855
|
<select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>menuAction('language')}>
|
|
737
856
|
{#each languagesArray as operatorLanguage}
|
|
@@ -781,12 +900,12 @@
|
|
|
781
900
|
</header>
|
|
782
901
|
{/if}
|
|
783
902
|
{/if}
|
|
903
|
+
-->
|
|
784
904
|
|
|
785
905
|
<casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {countryflaghamburger} {customlocaleidentifier} {languageslist} {clientstyling} {clientstylingurl}></casino-hamburger-menu>
|
|
786
906
|
|
|
787
907
|
<style lang="scss">
|
|
788
|
-
|
|
789
|
-
*,
|
|
908
|
+
*,
|
|
790
909
|
*::before,
|
|
791
910
|
*::after {
|
|
792
911
|
font-family: inherit
|
|
@@ -796,10 +915,503 @@
|
|
|
796
915
|
font-family: inherit;
|
|
797
916
|
}
|
|
798
917
|
|
|
918
|
+
// ------> new stuff
|
|
919
|
+
.NavIcon {
|
|
920
|
+
width: 30px;
|
|
921
|
+
height: 28px;
|
|
922
|
+
position: relative;
|
|
923
|
+
margin: 50px auto;
|
|
924
|
+
-webkit-transform: rotate(0deg);
|
|
925
|
+
-moz-transform: rotate(0deg);
|
|
926
|
+
-o-transform: rotate(0deg);
|
|
927
|
+
transform: rotate(0deg);
|
|
928
|
+
-webkit-transition: .5s ease-in-out;
|
|
929
|
+
-moz-transition: .5s ease-in-out;
|
|
930
|
+
-o-transition: .5s ease-in-out;
|
|
931
|
+
transition: .5s ease-in-out;
|
|
932
|
+
cursor: pointer;
|
|
933
|
+
|
|
934
|
+
span {
|
|
935
|
+
display: block;
|
|
936
|
+
position: absolute;
|
|
937
|
+
height: 3px;
|
|
938
|
+
width: 100%;
|
|
939
|
+
background: #ffffff;
|
|
940
|
+
border-radius: 9px;
|
|
941
|
+
opacity: 1;
|
|
942
|
+
left: 0;
|
|
943
|
+
-webkit-transform: rotate(0deg);
|
|
944
|
+
-moz-transform: rotate(0deg);
|
|
945
|
+
-o-transform: rotate(0deg);
|
|
946
|
+
transform: rotate(0deg);
|
|
947
|
+
-webkit-transition: .25s ease-in-out;
|
|
948
|
+
-moz-transition: .25s ease-in-out;
|
|
949
|
+
-o-transition: .25s ease-in-out;
|
|
950
|
+
transition: .25s ease-in-out;
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
span:nth-child(1) {
|
|
954
|
+
top: 0px;
|
|
955
|
+
width: 80%;
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
span:nth-child(2) {
|
|
959
|
+
top: 9px;
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
span:nth-child(3) {
|
|
963
|
+
top: 18px;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
&.Open {
|
|
967
|
+
// animation: growWidth 1s forwards;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
&.Open span:nth-child(1) {
|
|
971
|
+
top: 9px;
|
|
972
|
+
width: 100%;
|
|
973
|
+
-webkit-transform: rotate(135deg);
|
|
974
|
+
-moz-transform: rotate(135deg);
|
|
975
|
+
-o-transform: rotate(135deg);
|
|
976
|
+
transform: rotate(135deg);
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
&.Open span:nth-child(2) {
|
|
980
|
+
opacity: 0;
|
|
981
|
+
left: -60px;
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
&.Open span:nth-child(3) {
|
|
985
|
+
top: 9px;
|
|
986
|
+
-webkit-transform: rotate(-135deg);
|
|
987
|
+
-moz-transform: rotate(-135deg);
|
|
988
|
+
-o-transform: rotate(-135deg);
|
|
989
|
+
transform: rotate(-135deg);
|
|
990
|
+
}
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
|
|
994
|
+
|
|
995
|
+
.Skeleton {
|
|
996
|
+
animation: skeleton-loading 1s linear infinite alternate;
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
@keyframes skeleton-loading {
|
|
1000
|
+
0% {
|
|
1001
|
+
background-color: hsl(192, 2%, 45%);
|
|
1002
|
+
}
|
|
1003
|
+
100% {
|
|
1004
|
+
background-color: hsl(200, 20%, 95%);
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.SkeletonText {
|
|
1009
|
+
opacity: 0.5;
|
|
1010
|
+
margin: 0 15px;
|
|
1011
|
+
width: 125px;
|
|
1012
|
+
height: 15px;
|
|
1013
|
+
border-radius: 15px;
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
.HeaderContainer {
|
|
1017
|
+
position: fixed;
|
|
1018
|
+
width: 100%;
|
|
1019
|
+
background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
|
|
1020
|
+
display: flex;
|
|
1021
|
+
flex-direction: column;
|
|
1022
|
+
align-items: center;
|
|
1023
|
+
user-select: none;
|
|
1024
|
+
|
|
1025
|
+
.MainNav {
|
|
1026
|
+
width: 99%;
|
|
1027
|
+
height: 84px;
|
|
1028
|
+
display: flex;
|
|
1029
|
+
gap: 5px;
|
|
1030
|
+
flex-direction: row;
|
|
1031
|
+
align-items: center;
|
|
1032
|
+
margin: 0 15px;
|
|
1033
|
+
|
|
1034
|
+
.HeaderMobileMainNav {
|
|
1035
|
+
display: flex;
|
|
1036
|
+
margin-left: 5px;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
.Logo {
|
|
1040
|
+
display: flex;
|
|
1041
|
+
justify-content: center;
|
|
1042
|
+
align-items: center;
|
|
1043
|
+
width: 10%;
|
|
1044
|
+
min-width: 75px;
|
|
1045
|
+
transition: all .2s;
|
|
1046
|
+
|
|
1047
|
+
.HeaderBranding {
|
|
1048
|
+
width: 140px;
|
|
1049
|
+
cursor: pointer;
|
|
1050
|
+
img {
|
|
1051
|
+
width: 100%;
|
|
1052
|
+
}
|
|
1053
|
+
@media only screen and (max-width: 360px) {
|
|
1054
|
+
margin-right: 0;
|
|
1055
|
+
}
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
&:active {
|
|
1059
|
+
opacity: .9;
|
|
1060
|
+
transform: scale(1.02);
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
.BalanceDepositWrapper {
|
|
1065
|
+
height: 34px;
|
|
1066
|
+
background-color: white;
|
|
1067
|
+
display: flex;
|
|
1068
|
+
justify-content: center;
|
|
1069
|
+
align-items: center;
|
|
1070
|
+
border-radius: 30px;
|
|
1071
|
+
padding: 0 0 0 10px;
|
|
1072
|
+
|
|
1073
|
+
.Deposit {
|
|
1074
|
+
display: flex;
|
|
1075
|
+
align-items: center;
|
|
1076
|
+
cursor: pointer;
|
|
1077
|
+
justify-content: center;
|
|
1078
|
+
|
|
1079
|
+
.DepositButton {
|
|
1080
|
+
border-radius: 30px;
|
|
1081
|
+
height: 34px;
|
|
1082
|
+
width: 100px;
|
|
1083
|
+
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1084
|
+
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1085
|
+
font-size: 14px;
|
|
1086
|
+
text-align: center;
|
|
1087
|
+
cursor: pointer;
|
|
1088
|
+
transition: all .5s linear;
|
|
1089
|
+
display: flex;
|
|
1090
|
+
justify-content: center;
|
|
1091
|
+
align-items: center;
|
|
1092
|
+
p {
|
|
1093
|
+
text-transform: uppercase;
|
|
1094
|
+
color: white;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
&:hover {
|
|
1098
|
+
background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1099
|
+
linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
&:active {
|
|
1103
|
+
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1104
|
+
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
.Balance {
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
.Profile {
|
|
1114
|
+
display: flex;
|
|
1115
|
+
justify-content: center;
|
|
1116
|
+
flex-direction: column;
|
|
1117
|
+
|
|
1118
|
+
.ProfileWrapper {
|
|
1119
|
+
width: 30px;
|
|
1120
|
+
height: 30px;
|
|
1121
|
+
background-color: orange;
|
|
1122
|
+
border-radius: 50px;
|
|
1123
|
+
display: flex;
|
|
1124
|
+
justify-content: center;
|
|
1125
|
+
align-items: center;
|
|
1126
|
+
|
|
1127
|
+
svg {
|
|
1128
|
+
width: 15px;
|
|
1129
|
+
height: 16px;
|
|
1130
|
+
fill: var(--emw-color-white, #FFFFFF)
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
.PrimaryMenu {
|
|
1136
|
+
display: flex;
|
|
1137
|
+
flex-direction: row;
|
|
1138
|
+
align-items: center;
|
|
1139
|
+
width: 100%;
|
|
1140
|
+
|
|
1141
|
+
.ItemMenu {
|
|
1142
|
+
color: white;
|
|
1143
|
+
margin: 0 20px;
|
|
1144
|
+
text-transform: uppercase;
|
|
1145
|
+
height: 84px;
|
|
1146
|
+
transition: all .5s;
|
|
1147
|
+
cursor: pointer;
|
|
1148
|
+
|
|
1149
|
+
&:after {
|
|
1150
|
+
content: "";
|
|
1151
|
+
display: block;
|
|
1152
|
+
height: 5px;
|
|
1153
|
+
width: 100%;
|
|
1154
|
+
cursor: pointer;
|
|
1155
|
+
background-color: pink;
|
|
1156
|
+
position: relative;
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
.MenuHover {
|
|
1160
|
+
width: 0px;
|
|
1161
|
+
transition: transform 0.3s ease-in-out;
|
|
1162
|
+
transform-origin: center;
|
|
1163
|
+
transform: scaleX(0);
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
p {
|
|
1167
|
+
height: 33px;
|
|
1168
|
+
margin-top: 35px;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
&:hover, &.Active {
|
|
1172
|
+
color: #22B04F;
|
|
1173
|
+
|
|
1174
|
+
.MenuHover {
|
|
1175
|
+
transform: scaleX(1);
|
|
1176
|
+
opacity: 1;
|
|
1177
|
+
background-color: rgba(255, 255, 255, 0.5);
|
|
1178
|
+
width: 100%;
|
|
1179
|
+
position: relative;
|
|
1180
|
+
height: 5px;
|
|
1181
|
+
z-index: 4;
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
&:active {
|
|
1186
|
+
color: rgba(255,255,255,1);
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.AuthButtons {
|
|
1192
|
+
display: flex;
|
|
1193
|
+
flex-direction: row;
|
|
1194
|
+
justify-content: center;
|
|
1195
|
+
align-items: center;
|
|
1196
|
+
|
|
1197
|
+
.Item {
|
|
1198
|
+
gap: 5px;
|
|
1199
|
+
padding: 0 25px;
|
|
1200
|
+
display: flex;
|
|
1201
|
+
align-items: center;
|
|
1202
|
+
color: white;
|
|
1203
|
+
|
|
1204
|
+
&.ItemLogin {
|
|
1205
|
+
font-size: 14px;
|
|
1206
|
+
height: 36px;
|
|
1207
|
+
text-align: center;
|
|
1208
|
+
margin-right: 10px;
|
|
1209
|
+
position: relative;
|
|
1210
|
+
cursor: pointer;
|
|
1211
|
+
background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
|
|
1212
|
+
linear-gradient(180deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
|
|
1213
|
+
border-radius: 30px;
|
|
1214
|
+
border: 2px solid transparent;
|
|
1215
|
+
transition: all .3s linear;
|
|
1216
|
+
|
|
1217
|
+
&:hover {
|
|
1218
|
+
color: white;
|
|
1219
|
+
background: linear-gradient(180deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
|
|
1220
|
+
linear-gradient(0deg, rgba(231,145,28,.2) 0%, rgba(224,169,76,.2) 100%) border-box;
|
|
1221
|
+
border: 2px solid white;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
&:active {
|
|
1225
|
+
background: linear-gradient(0deg, rgba(231,145,28,1) 0%, rgba(224,169,76,1) 100%) padding-box,
|
|
1226
|
+
linear-gradient(180deg, rgba(231,145,28,.4) 0%, rgba(224,169,76,.4) 100%) border-box;
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
&.ItemRegister {
|
|
1231
|
+
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1232
|
+
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1233
|
+
border-radius: 30px;
|
|
1234
|
+
border: 2px solid transparent;
|
|
1235
|
+
font-size: 14px;
|
|
1236
|
+
height: 36px;
|
|
1237
|
+
text-align: center;
|
|
1238
|
+
line-height: 44px;
|
|
1239
|
+
cursor: pointer;
|
|
1240
|
+
transition: all .3s linear;
|
|
1241
|
+
|
|
1242
|
+
&:hover {
|
|
1243
|
+
background: linear-gradient(180deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1244
|
+
linear-gradient(0deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1245
|
+
border: 2px solid white;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
&:active {
|
|
1249
|
+
background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
|
|
1250
|
+
linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
|
|
1251
|
+
}
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
svg {
|
|
1255
|
+
width: 15px;
|
|
1256
|
+
height: 15px;
|
|
1257
|
+
fill: white;
|
|
1258
|
+
padding-bottom: 2px;
|
|
1259
|
+
}
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.Slot1 {}
|
|
1264
|
+
.Slot2 {}
|
|
1265
|
+
.Slot3 {}
|
|
1266
|
+
.LanguageSelector {
|
|
1267
|
+
align-content: center;
|
|
1268
|
+
height: 100%;
|
|
1269
|
+
cursor: pointer;
|
|
1270
|
+
transform: all .3s linear;
|
|
1271
|
+
|
|
1272
|
+
.SelectedOption {
|
|
1273
|
+
display: flex;
|
|
1274
|
+
align-items: center;
|
|
1275
|
+
justify-content: center;
|
|
1276
|
+
|
|
1277
|
+
.TriangleActive, .TriangleInactive {
|
|
1278
|
+
display: block;
|
|
1279
|
+
color: currentColor;
|
|
1280
|
+
margin: 0 0 0 10px;
|
|
1281
|
+
transition: all .2s;
|
|
1282
|
+
&:hover {
|
|
1283
|
+
transform: scale(1.2);
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
svg{
|
|
1287
|
+
margin: 2px 0px;
|
|
1288
|
+
}
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
.TriangleActive {
|
|
1292
|
+
transform: scale(1.1) rotateX(180deg);
|
|
1293
|
+
margin-bottom: 5px;
|
|
1294
|
+
|
|
1295
|
+
&:hover {
|
|
1296
|
+
transform: scale(1.1) rotateX(180deg);
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
}
|
|
1300
|
+
.LanguageName {
|
|
1301
|
+
.ItemLanguage {
|
|
1302
|
+
display: flex;
|
|
1303
|
+
justify-content: space-around;
|
|
1304
|
+
}
|
|
1305
|
+
|
|
1306
|
+
svg {
|
|
1307
|
+
width: 30px;
|
|
1308
|
+
border-radius: 20px;
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
.OptionList {
|
|
1313
|
+
border: 1px solid var(--emw-header-color-primary);
|
|
1314
|
+
padding: 10px;
|
|
1315
|
+
position: absolute;
|
|
1316
|
+
cursor: pointer;
|
|
1317
|
+
display: flex;
|
|
1318
|
+
gap: 4px;
|
|
1319
|
+
flex-direction: column;
|
|
1320
|
+
border-radius: 10px;
|
|
1321
|
+
opacity: 0;
|
|
1322
|
+
transition: all 0.4s;
|
|
1323
|
+
z-index: 6;
|
|
1324
|
+
right: 5px;
|
|
1325
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1326
|
+
background: var(--emw-header-color-secondary-menu-bg, var(--emw-color-background-secondary, #050518));
|
|
1327
|
+
|
|
1328
|
+
&.Active {
|
|
1329
|
+
opacity: 1;
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
.FlagIcon {
|
|
1333
|
+
width: 16px;
|
|
1334
|
+
|
|
1335
|
+
svg {
|
|
1336
|
+
border-radius: 5px;
|
|
1337
|
+
}
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1340
|
+
.LanguageOption {
|
|
1341
|
+
display: flex;
|
|
1342
|
+
align-items: center;
|
|
1343
|
+
transform: scale(1.1);
|
|
1344
|
+
gap: 3px;
|
|
1345
|
+
background: black;
|
|
1346
|
+
padding: 7px;
|
|
1347
|
+
|
|
1348
|
+
&:hover {
|
|
1349
|
+
transition: all .5s;
|
|
1350
|
+
color: black;
|
|
1351
|
+
background-color: var(--emw-header-color-primary, var(--emw-color-primary, #22B04F));
|
|
1352
|
+
border-radius: 20px;
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.Separator {
|
|
1360
|
+
width: 100%;
|
|
1361
|
+
height: 5px;
|
|
1362
|
+
background: rgb(0,0,0);
|
|
1363
|
+
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(35,172,77,1) 50%, rgba(0,0,0,1) 100%);
|
|
1364
|
+
z-index: 3;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.SecondaryNav {
|
|
1368
|
+
width: 100%;
|
|
1369
|
+
height: 50px;
|
|
1370
|
+
display: flex;
|
|
1371
|
+
align-items: center;
|
|
1372
|
+
background: linear-gradient(90deg, rgba(35,172,77,1) 0%, rgba(18,62,33,1) 100%);
|
|
1373
|
+
z-index: 3;
|
|
1374
|
+
|
|
1375
|
+
.LeftSpace {
|
|
1376
|
+
width: 10%;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.SecondaryMenuContent {
|
|
1380
|
+
text-transform: uppercase;
|
|
1381
|
+
margin: 0 20px;
|
|
1382
|
+
color: white;
|
|
1383
|
+
transition: all .5s;
|
|
1384
|
+
display: flex;
|
|
1385
|
+
cursor: pointer;
|
|
1386
|
+
user-select: none;
|
|
1387
|
+
|
|
1388
|
+
.Active {
|
|
1389
|
+
transition: all .5s;
|
|
1390
|
+
color: black;
|
|
1391
|
+
|
|
1392
|
+
&:hover {
|
|
1393
|
+
opacity: .5;
|
|
1394
|
+
color: white;
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
&:hover {
|
|
1399
|
+
color: black;
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
&:active {
|
|
1403
|
+
color: white;
|
|
1404
|
+
}
|
|
1405
|
+
}
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
|
|
1409
|
+
// ------> old stuff
|
|
1410
|
+
|
|
799
1411
|
@keyframes ModalBounce {
|
|
800
1412
|
0% {
|
|
801
1413
|
opacity: 0;
|
|
802
|
-
transform: translateY(20px);
|
|
1414
|
+
transform: translateY(20px);
|
|
803
1415
|
}
|
|
804
1416
|
50% {
|
|
805
1417
|
transform: translateY(-6px);
|
|
@@ -822,11 +1434,6 @@
|
|
|
822
1434
|
height: 400px;
|
|
823
1435
|
}
|
|
824
1436
|
|
|
825
|
-
.LanguageDropdown {
|
|
826
|
-
margin-right: 16px;
|
|
827
|
-
position: relative;
|
|
828
|
-
display: inline-block;
|
|
829
|
-
}
|
|
830
1437
|
|
|
831
1438
|
.ClosePopUpButtonShortCashier{
|
|
832
1439
|
margin-left: auto;
|
|
@@ -855,18 +1462,18 @@
|
|
|
855
1462
|
right: 60%;
|
|
856
1463
|
}
|
|
857
1464
|
.ShortCashierContainer{
|
|
858
|
-
background-color: var(--
|
|
1465
|
+
background-color: var(--emw-color-white, #FFFFFF);
|
|
859
1466
|
position: absolute;
|
|
860
1467
|
width: 360px;
|
|
861
1468
|
top: 16px;
|
|
862
1469
|
transform: translateX(-60%);
|
|
863
|
-
box-shadow: 0px 30px 30px var(--
|
|
1470
|
+
box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
864
1471
|
border-radius: 5px;
|
|
865
1472
|
z-index: 17;
|
|
866
1473
|
box-shadow: 0px 5px 20px 0px #191919;
|
|
867
1474
|
&:before {
|
|
868
1475
|
content: "";
|
|
869
|
-
background: var(--
|
|
1476
|
+
background: var(--emw-color-white, #FFFFFF);
|
|
870
1477
|
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
|
|
871
1478
|
position: absolute;
|
|
872
1479
|
top: -8px;
|
|
@@ -875,7 +1482,7 @@
|
|
|
875
1482
|
height: 10px;
|
|
876
1483
|
transform: translateX(-50%);
|
|
877
1484
|
z-index: 1;
|
|
878
|
-
}
|
|
1485
|
+
}
|
|
879
1486
|
}
|
|
880
1487
|
|
|
881
1488
|
.ShortCashierContainerWrapperMobile{
|
|
@@ -885,19 +1492,19 @@
|
|
|
885
1492
|
z-index: 17;
|
|
886
1493
|
}
|
|
887
1494
|
.ShortCashierContainerMobile {
|
|
888
|
-
background-color: var(--
|
|
1495
|
+
background-color: var(--emw-color-white, #FFFFFF);
|
|
889
1496
|
position: absolute;
|
|
890
1497
|
width: 80vw;
|
|
891
1498
|
top: 14px;
|
|
892
1499
|
left: 50%;
|
|
893
1500
|
transform: translateX(-60%);
|
|
894
|
-
box-shadow: 0px 30px 30px var(--
|
|
1501
|
+
box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
895
1502
|
border-radius: 5px;
|
|
896
1503
|
z-index: 17;
|
|
897
1504
|
box-shadow: 0px 5px 20px 0px #191919;
|
|
898
1505
|
&:before {
|
|
899
1506
|
content: "";
|
|
900
|
-
background: var(--
|
|
1507
|
+
background: var(--emw-color-white, #FFFFFF);
|
|
901
1508
|
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
|
|
902
1509
|
position: absolute;
|
|
903
1510
|
top: -8px;
|
|
@@ -909,19 +1516,6 @@
|
|
|
909
1516
|
}
|
|
910
1517
|
}
|
|
911
1518
|
|
|
912
|
-
.SelectedOption,
|
|
913
|
-
.OptionList {
|
|
914
|
-
border: 1px solid var(--emfe-w-header-color-primary);
|
|
915
|
-
padding: 8px;
|
|
916
|
-
cursor: pointer;
|
|
917
|
-
width: 76px;
|
|
918
|
-
border-radius: 4px;
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
.SelectedOption {
|
|
922
|
-
display: flex;
|
|
923
|
-
align-items: center;
|
|
924
|
-
}
|
|
925
1519
|
|
|
926
1520
|
.FlagIcon img {
|
|
927
1521
|
width: 20px;
|
|
@@ -930,75 +1524,14 @@
|
|
|
930
1524
|
border-radius: 2px;
|
|
931
1525
|
}
|
|
932
1526
|
|
|
933
|
-
.OptionList {
|
|
934
|
-
position: absolute;
|
|
935
|
-
z-index: 1;
|
|
936
|
-
color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
937
|
-
background: var(--emfe-w-header-color-secondary-menu-bg, var(--emfe-w-color-background-secondary, #050518));
|
|
938
|
-
max-height: 150px;
|
|
939
|
-
overflow-y: auto;
|
|
940
|
-
}
|
|
941
1527
|
|
|
942
|
-
.LanguageOption {
|
|
943
|
-
display: flex;
|
|
944
|
-
align-items: center;
|
|
945
|
-
padding: 4px;
|
|
946
|
-
}
|
|
947
|
-
|
|
948
|
-
.TriangleInactive {
|
|
949
|
-
display: block;
|
|
950
|
-
color: currentColor;
|
|
951
|
-
margin: 0 0 0 10px;
|
|
952
|
-
transition: all .5s;
|
|
953
|
-
|
|
954
|
-
svg{
|
|
955
|
-
margin: 2px 0px;
|
|
956
|
-
}
|
|
957
|
-
}
|
|
958
|
-
|
|
959
|
-
.TriangleActive {
|
|
960
|
-
transform: rotate(180deg);
|
|
961
|
-
position: relative;
|
|
962
|
-
|
|
963
|
-
svg{
|
|
964
|
-
margin: 2px 0px;
|
|
965
|
-
}
|
|
966
|
-
}
|
|
967
1528
|
|
|
968
|
-
.LanguageOption:hover {
|
|
969
|
-
background-color: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
970
|
-
border-radius: 2px;
|
|
971
|
-
}
|
|
972
1529
|
.HeaderWrapper {
|
|
973
|
-
background: var(--
|
|
1530
|
+
background: var(--emw-header-color-menu-bg, var(--emw-color-background-secondary, #050518));
|
|
974
1531
|
}
|
|
975
1532
|
|
|
976
|
-
.HeaderContainer {
|
|
977
|
-
max-width: 1300px;
|
|
978
|
-
display: flex;
|
|
979
|
-
flex-direction: row;
|
|
980
|
-
align-items: center;
|
|
981
|
-
height: 84px;
|
|
982
|
-
margin: 0 auto;
|
|
983
|
-
}
|
|
984
1533
|
|
|
985
|
-
.HeaderMobileMainNav {
|
|
986
|
-
display: flex;
|
|
987
|
-
align-items: center;
|
|
988
|
-
}
|
|
989
1534
|
|
|
990
|
-
.HeaderBranding {
|
|
991
|
-
width: 140px;
|
|
992
|
-
margin-right: 15px;
|
|
993
|
-
cursor: pointer;
|
|
994
|
-
img {
|
|
995
|
-
width: 100%;
|
|
996
|
-
}
|
|
997
|
-
@media only screen and (max-width: 360px) {
|
|
998
|
-
margin-right: 0;
|
|
999
|
-
}
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
1535
|
.HeaderMainNav {
|
|
1003
1536
|
text-align: left;
|
|
1004
1537
|
}
|
|
@@ -1011,8 +1544,8 @@
|
|
|
1011
1544
|
.HeaderSecondaryNav {
|
|
1012
1545
|
flex-direction: row;
|
|
1013
1546
|
width: 100%;
|
|
1014
|
-
background: var(--
|
|
1015
|
-
border-top: 1px solid var(--
|
|
1547
|
+
background: var(--emw-header-color-secondary-menu-bg, var(--emw-color-background-secondary, #050518));
|
|
1548
|
+
border-top: 1px solid var(--emw-color-gray-300, #58586B);
|
|
1016
1549
|
}
|
|
1017
1550
|
|
|
1018
1551
|
.HeaderItemsMenu {
|
|
@@ -1021,7 +1554,7 @@
|
|
|
1021
1554
|
align-content: flex-start;
|
|
1022
1555
|
list-style: none;
|
|
1023
1556
|
text-transform: uppercase;
|
|
1024
|
-
color: var(--
|
|
1557
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1025
1558
|
font-size: 16px;
|
|
1026
1559
|
align-items: center;
|
|
1027
1560
|
|
|
@@ -1043,43 +1576,20 @@
|
|
|
1043
1576
|
}
|
|
1044
1577
|
}
|
|
1045
1578
|
|
|
1046
|
-
|
|
1047
|
-
color: var(--
|
|
1579
|
+
/*.Item a {
|
|
1580
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1048
1581
|
text-decoration: none;
|
|
1049
1582
|
border-top: 1px solid transparent;
|
|
1050
1583
|
}
|
|
1051
1584
|
|
|
1052
1585
|
.Item a:hover {
|
|
1053
|
-
color: var(--
|
|
1054
|
-
border-top: 1px solid var(--
|
|
1586
|
+
color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
1587
|
+
border-top: 1px solid var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
1055
1588
|
padding-top: 5px;
|
|
1056
|
-
}
|
|
1057
|
-
|
|
1058
|
-
.ItemLogin {
|
|
1059
|
-
border-radius: 5px;
|
|
1060
|
-
background: transparent;
|
|
1061
|
-
font-size: 14px;
|
|
1062
|
-
font-weight: 600;
|
|
1063
|
-
border: solid 1px var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
|
|
1064
|
-
height: 44px;
|
|
1065
|
-
text-align: center;
|
|
1066
|
-
line-height: 44px;
|
|
1067
|
-
margin-right: 10px;
|
|
1068
|
-
cursor: pointer;
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
.ItemRegister, .ItemDeposit {
|
|
1072
|
-
border-radius: 5px;
|
|
1073
|
-
background: var(--emfe-w-header-color-primary, var(--emfe-w-color-primary, #D0046C));
|
|
1074
|
-
font-size: 14px;
|
|
1075
|
-
height: 44px;
|
|
1076
|
-
text-align: center;
|
|
1077
|
-
line-height: 44px;
|
|
1078
|
-
cursor: pointer;
|
|
1079
|
-
}
|
|
1589
|
+
}*/
|
|
1080
1590
|
|
|
1081
1591
|
.ItemDeposit {
|
|
1082
|
-
background: var(--
|
|
1592
|
+
background: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
1083
1593
|
}
|
|
1084
1594
|
|
|
1085
1595
|
.ItemLanguage {
|
|
@@ -1088,7 +1598,7 @@
|
|
|
1088
1598
|
text-align: center;
|
|
1089
1599
|
line-height: 44px;
|
|
1090
1600
|
background: transparent;
|
|
1091
|
-
color: var(--
|
|
1601
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1092
1602
|
border: none;
|
|
1093
1603
|
cursor: pointer;
|
|
1094
1604
|
outline: none;
|
|
@@ -1097,12 +1607,12 @@
|
|
|
1097
1607
|
appearance: none;
|
|
1098
1608
|
|
|
1099
1609
|
option {
|
|
1100
|
-
color: var(--
|
|
1610
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1101
1611
|
}
|
|
1102
1612
|
}
|
|
1103
1613
|
|
|
1104
1614
|
.ItemLanguage.NoFlag{
|
|
1105
|
-
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(--
|
|
1615
|
+
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(--emw-header-color-menu-bg, var(--emw-color-background-secondary, #050518));
|
|
1106
1616
|
background-position: calc(100% - 0.75rem) center;
|
|
1107
1617
|
width: 90px;
|
|
1108
1618
|
margin-right: 6px;
|
|
@@ -1110,7 +1620,7 @@
|
|
|
1110
1620
|
|
|
1111
1621
|
.ItemBalance {
|
|
1112
1622
|
background: transparent;
|
|
1113
|
-
color: var(--
|
|
1623
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1114
1624
|
border: 0;
|
|
1115
1625
|
}
|
|
1116
1626
|
|
|
@@ -1131,7 +1641,7 @@
|
|
|
1131
1641
|
height: 60px;
|
|
1132
1642
|
list-style: none;
|
|
1133
1643
|
text-transform: uppercase;
|
|
1134
|
-
color: var(--
|
|
1644
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1135
1645
|
font-size: 14px;
|
|
1136
1646
|
max-width: 1280px;
|
|
1137
1647
|
margin: 0 auto;
|
|
@@ -1150,7 +1660,7 @@
|
|
|
1150
1660
|
transition-duration: 0.15s;
|
|
1151
1661
|
|
|
1152
1662
|
button {
|
|
1153
|
-
color: var(--
|
|
1663
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1154
1664
|
text-decoration: none;
|
|
1155
1665
|
border: none;
|
|
1156
1666
|
background: none;
|
|
@@ -1159,24 +1669,24 @@
|
|
|
1159
1669
|
text-transform: uppercase;
|
|
1160
1670
|
cursor: pointer;
|
|
1161
1671
|
&:hover {
|
|
1162
|
-
color: var(--
|
|
1672
|
+
color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
1163
1673
|
}
|
|
1164
1674
|
|
|
1165
1675
|
&:focus {
|
|
1166
|
-
color: var(--
|
|
1676
|
+
color: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
1167
1677
|
}
|
|
1168
1678
|
|
|
1169
1679
|
&:visited {
|
|
1170
|
-
color: var(--
|
|
1680
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1171
1681
|
}
|
|
1172
1682
|
|
|
1173
1683
|
&:focus-visible {
|
|
1174
|
-
color: var(--
|
|
1684
|
+
color: var(--emw-header-typography, var(--emw-color-white, #FFFFFF));
|
|
1175
1685
|
outline: none;
|
|
1176
1686
|
}
|
|
1177
1687
|
}
|
|
1178
1688
|
&.active {
|
|
1179
|
-
background: var(--
|
|
1689
|
+
background: var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
|
|
1180
1690
|
}
|
|
1181
1691
|
}
|
|
1182
1692
|
|
|
@@ -1194,12 +1704,6 @@
|
|
|
1194
1704
|
}
|
|
1195
1705
|
}
|
|
1196
1706
|
|
|
1197
|
-
.HeaderBranding {
|
|
1198
|
-
width: 110px;
|
|
1199
|
-
display: flex;
|
|
1200
|
-
align-items: center;
|
|
1201
|
-
}
|
|
1202
|
-
|
|
1203
1707
|
.HeaderItemsMenu {
|
|
1204
1708
|
.Item {
|
|
1205
1709
|
padding: 0 10px;
|