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