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