@golstats/gsc-lineups-reports 1.0.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +2 -2
  2. package/dist/css/fonts.css +91 -91
  3. package/dist/gsc-lineups-reports.css +1 -1
  4. package/dist/gsc-lineups-reports.es.js +2946 -2675
  5. package/dist/gsc-lineups-reports.umd.js +10 -7
  6. package/dist/images/canchaRPH.svg +30 -30
  7. package/dist/images/events/atajada.svg +56 -56
  8. package/dist/images/events/fin-del-partido.svg +43 -43
  9. package/dist/images/events/fuera-de-lugar.svg +57 -57
  10. package/dist/images/events/gol.svg +48 -48
  11. package/dist/images/events/icn-cambio.svg +6 -6
  12. package/dist/images/events/icn-falta.svg +4 -4
  13. package/dist/images/events/icn-play.svg +3 -3
  14. package/dist/images/events/icn-tarjeta-amarilla.svg +3 -3
  15. package/dist/images/events/icn-tarjeta-roja.svg +3 -3
  16. package/dist/images/events/icn-tiro-a-porteria.svg +36 -36
  17. package/dist/images/events/icn-tiros-de-esquina.svg +18 -18
  18. package/dist/images/events/inicia-el-partido.svg +45 -45
  19. package/dist/images/events/jugada-peligrosa.svg +90 -90
  20. package/dist/images/events/penal-fallado.svg +194 -194
  21. package/dist/images/events/penal-marcado.svg +189 -189
  22. package/dist/images/events/tiempo-agregado.svg +74 -74
  23. package/dist/images/events/tiro-a-porteria.svg +80 -80
  24. package/dist/images/events/var.svg +30 -30
  25. package/package.json +7 -3
  26. package/src/components/Lineup2D/CheckBox.vue +42 -42
  27. package/src/components/Lineup2D/FilterEmpty.vue +48 -48
  28. package/src/components/Lineup2D/Icons.vue +29 -29
  29. package/src/components/Lineup2D/LineupField.vue +274 -274
  30. package/src/components/Lineup2D/LineupFilter.vue +285 -285
  31. package/src/components/Lineup2D/LineupMainHeader.vue +222 -222
  32. package/src/components/Lineup2D/LineupRecentItem.vue +110 -110
  33. package/src/components/Lineup2D/MatchDetails.vue +66 -66
  34. package/src/components/gsc-filter.vue +286 -286
  35. package/src/components/gsc-header-historico-lineup.vue +1064 -1064
  36. package/src/components/gsc-header-postmatch-lineup.vue +1017 -1017
  37. package/src/components/gsc-header-probables-lineup.vue +1044 -1044
  38. package/src/components/gsc-header-recientes-lineup.vue +2337 -2337
  39. package/src/components/gsc-lineup-dosd.vue +3777 -3752
  40. package/src/components/gsc-lineup-main.vue +81 -65
  41. package/src/components/gsc-lineups-reports.vue +10 -0
  42. package/src/components/gsc-lineups.vue +46 -12
  43. package/src/components/gsc-player-card.vue +166 -166
  44. package/src/index.js +4 -4
  45. package/src/main-test.js +42 -0
  46. package/src/types.d.ts +45 -45
  47. package/src/utils/apiUrl.js +33 -0
  48. package/src/utils/socketConnection.js +29 -29
package/src/components/gsc-header-probables-lineup.vue CHANGED
@@ -1,1044 +1,1044 @@
1
- <template>
2
- <div :class="$style.headerSeccionAlineaciones">
3
- <div :class="$style.headerSeccionAlineaciones1" id="header-desktop">
4
- <div :class="$style.groupsLeagueParent">
5
- <div :class="$style.groupsLeague">
6
- <span>Las alineaciones de este partido </span>
7
- <span :class="$style.anNoEstn">aún no están disponibles</span>
8
- <span>. Por lo pronto puedes ver alineaciones: </span>
9
- </div>
10
- <div :class="$style.switchStatesBig" id="switch-lineup">
11
- <GscSwitchComponent
12
- :buttons="['Historicos', 'Recientes', 'Probables']"
13
- :selectedOption="optionSelected"
14
- :type="1"
15
- :arrow="false"
16
- borderRadius="32px"
17
- height="28px"
18
- fontSize="11px;"
19
- fontFamily="Poppins-Regular"
20
- border-width="1px"
21
- border-width-container="0px"
22
- backgroundOptionDisable="#162533"
23
- width="600px"
24
- backgroundOptionActive="transparent"
25
- @input="clickOnSelectOption" />
26
- </div>
27
- </div>
28
- <div :class="$style.matchContainer" id="match-container">
29
- <div :class="$style.homeTeamContainer">
30
- <div :class="$style.teamContainer">
31
- <div :class="$style.imgHomeTeamWrapper">
32
- <img
33
- :class="$style.imgHomeTeamIcon"
34
- alt=""
35
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
36
- />
37
- </div>
38
- </div>
39
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
40
-
41
- <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
42
- <template #default="data">
43
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
44
- </template>
45
- <template #availableItem="{item}">
46
- <div>{{item.name}}</div>
47
- </template>
48
- </GSCDropdown>
49
- <div :class="$style.team">
50
- <div :class="$style.manchesterUnited">vs</div>
51
- <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
52
- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
53
- </div>
54
- </div>
55
- <div :class="$style.scoreContainerWrapper">
56
- <div :class="$style.scoreContainer">
57
- <div :class="$style.div1">2</div>
58
- <div :class="$style.div1">-</div>
59
- <div :class="$style.div1">2</div>
60
- </div>
61
- </div>
62
- <div :class="$style.awayTeamContainer">
63
- <div :class="$style.team1">
64
- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
65
- <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
66
- <div :class="$style.manchesterUnited">vs</div>
67
- </div>
68
- <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
69
- <template #default="data">
70
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
71
- </template>
72
- <template #availableItem="{item}">
73
- <div>{{item.name}}</div>
74
- </template>
75
- </GSCDropdown>
76
- <div :class="$style.name1">{{ gameInfo.away_team_abbreviation }}</div>
77
- <div :class="$style.teamContainer1">
78
- <div :class="$style.imgHomeTeamWrapper">
79
- <img
80
- :class="$style.imgHomeTeamIcon"
81
- alt=""
82
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
83
- />
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
-
89
- </div>
90
- <div :class="$style.headerSeccionAlineaciones2" id="header-desktop">
91
- <div :class="$style.groupsLeagueParent">
92
- <div :class="$style.groupsLeague">
93
- <span>Las alineaciones de este partido </span>
94
- <span :class="$style.anNoEstn">aún no están disponibles</span>
95
- <span>. Por lo pronto puedes ver alineaciones:</span>
96
- </div>
97
- <div :class="$style.switchStatesBig" id="switch-lineup">
98
- <GscSwitchComponent
99
- :buttons="['Historicos', 'Recientes', 'Probables']"
100
- :selectedOption="optionSelected"
101
- :type="1"
102
- :arrow="false"
103
- borderRadius="32px"
104
- height="28px"
105
- fontSize="11px;"
106
- fontFamily="Poppins-Regular"
107
- border-width="1px"
108
- border-width-container="0px"
109
- backgroundOptionDisable="#162533"
110
- width="600px"
111
- backgroundOptionActive="transparent"
112
- @input="clickOnSelectOption" />
113
- </div>
114
- </div>
115
- <div :class="$style.matchContainer" id="match-container">
116
- <div :class="$style.homeTeamContainer1">
117
- <div :class="$style.teamContainer">
118
- <div :class="$style.imgHomeTeamWrapper">
119
- <img
120
- :class="$style.imgHomeTeamIcon"
121
- alt=""
122
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
123
- />
124
- </div>
125
- </div>
126
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
127
- <div :class="$style.frameParent">
128
- <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
129
- <template #default="data">
130
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
131
- </template>
132
- <template #availableItem="{item}">
133
- <div>{{item.name}}</div>
134
- </template>
135
- </GSCDropdown>
136
- </div>
137
- <div :class="$style.team">
138
- <div :class="$style.manchesterUnited">vs</div>
139
- <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
140
- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
141
- </div>
142
- </div>
143
- <div :class="$style.awayTeamContainer1">
144
-
145
-
146
- <div :class="$style.team">
147
- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
148
- <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
149
- <div :class="$style.manchesterUnited">vs</div>
150
- </div>
151
- <div :class="$style.frameParent">
152
- <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
153
- <template #default="data">
154
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
155
- </template>
156
- <template #availableItem="{item}">
157
- <div>{{item.name}}</div>
158
- </template>
159
- </GSCDropdown>
160
- </div>
161
- <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
162
- <div :class="$style.teamContainer1">
163
- <div :class="$style.imgHomeTeamWrapper">
164
- <img
165
- :class="$style.imgHomeTeamIcon"
166
- alt=""
167
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
168
- />
169
- </div>
170
- </div>
171
- </div>
172
- </div>
173
- </div>
174
- <div :class="$style.headerSeccionAlineaciones3" id="header-mobile">
175
- <div :class="$style.switchStatesBig2" id="switch-lineup">
176
- <GscSwitchComponent
177
- :buttons="['Historicos', 'Recientes', 'Probables']"
178
- :selectedOption="optionSelected"
179
- :type="1"
180
- :arrow="false"
181
- borderRadius="32px"
182
- height="28px"
183
- fontSize="11px;"
184
- fontFamily="Poppins-Regular"
185
- border-width="1px"
186
- border-width-container="0px"
187
- backgroundOptionDisable="#162533"
188
- width="600px"
189
- backgroundOptionActive="transparent"
190
- @input="clickOnSelectOption" />
191
- </div>
192
- <div :class="$style.containerData">
193
- <div :class="$style.manchesterUnited28">Alineación utilizada en:</div>
194
- <div :class="$style.matchContainer2" id="match-container">
195
- <div :class="$style.homeTeamContainer2">
196
- <div :class="$style.teamContainer">
197
- <div :class="$style.imgHomeTeamWrapper">
198
- <img
199
- :class="$style.imgHomeTeamIcon"
200
- alt=""
201
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
202
- />
203
- </div>
204
- </div>
205
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
206
- </div>
207
- <div :class="$style.homeTeamContainer2">
208
- <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
209
- <div :class="$style.teamContainer1">
210
- <div :class="$style.imgHomeTeamWrapper">
211
- <img
212
- :class="$style.imgHomeTeamIcon"
213
- alt=""
214
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
215
- />
216
- </div>
217
- </div>
218
- </div>
219
- </div>
220
-
221
- <div :class="$style.filtersContainer">
222
- <div :class="$style.filterMatchdayParent">
223
- <div :class="$style.filterMatchday">
224
- <div :class="$style.filterMatchday1">
225
- <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
226
- <template #default="data">
227
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
228
- </template>
229
- <template #availableItem="{item}">
230
- <div>{{item.name}}</div>
231
- </template>
232
- </GSCDropdown>
233
- </div>
234
- </div>
235
- <div :class="$style.team4">
236
- <div :class="$style.manchesterUnited1">vs</div>
237
- <img
238
- :class="$style.necaxaIcon4"
239
- alt=""
240
- :src="rivalHomeImg"
241
- />
242
- <!-- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div> -->
243
- </div>
244
- </div>
245
- <div :class="$style.teamParent">
246
- <div :class="$style.team1">
247
- <!-- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div> -->
248
- <img
249
- :class="$style.necaxaIcon4"
250
- alt=""
251
- :src="rivalVisitImg"
252
- />
253
- <div :class="$style.manchesterUnited1">vs</div>
254
- </div>
255
- <div :class="$style.filterMatchday1">
256
- <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
257
- <template #default="data">
258
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
259
- </template>
260
- <template #availableItem="{item}">
261
- <div>{{item.name}}</div>
262
- </template>
263
- </GSCDropdown>
264
- </div>
265
- </div>
266
- </div>
267
- </div>
268
- </div>
269
- </div>
270
- </template>
271
-
272
-
273
- <script>
274
- import {
275
- GSCDropdown
276
- } from '@golstats/gsc-dropdown';
277
- import '@@/@golstats/gsc-dropdown/dist/style.css'
278
- import { GscSwitchComponent } from '@golstats/gsc-switch-component'
279
- import '@@/@golstats/gsc-switch-component/dist/style.css'
280
- export default {
281
- components: { GSCDropdown, GscSwitchComponent},
282
- props: {
283
- optionSelected: {
284
- type: String,
285
- default: 'Historicos',
286
- },
287
- gameInfo: {
288
- type: Object,
289
- default: () => {},
290
- },
291
- gameRecientes: {
292
- type: Array,
293
- default: () => [],
294
- },
295
- matchdaysDefault: {
296
- type: Array,
297
- default: () => [],
298
- },
299
- },
300
- data() {
301
- return {
302
- rivalHomeImg: '',
303
- rivalVisitImg: '',
304
- rivalHomeAbrev: '',
305
- rivalVisitAbrev: '',
306
- auxVal: 0,
307
-
308
- }
309
- },
310
- watch: {
311
- gameInfo: {
312
- immediate: true,
313
- handler: async function (newValue) {
314
- try {
315
- this.$emit('input',newValue);
316
- } catch (e) {
317
- throw new Error(e);
318
- }
319
- },
320
- },
321
- },
322
- methods: {
323
- clickOnSelectOption(val){
324
- this.$emit('clickOnSelectOption', val);
325
- },
326
- changeDropdownVisit(val){
327
- const indexGame = this.gameRecientes[this.gameInfo.away_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
328
- this.rivalVisitAbrev = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team_abbreviation : this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation;
329
- this.rivalVisitImg = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team+'.png';
330
-
331
- this.$emit('changeaway',this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame]);
332
-
333
- },
334
- changeDropdownLocal(val){
335
- const indexGame = this.gameRecientes[this.gameInfo.home_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
336
- this.rivalHomeAbrev = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team_abbreviation : this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation;
337
- this.rivalHomeImg = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team+'.png';
338
-
339
- this.$emit('changehome',this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame]);
340
-
341
- }
342
- }
343
- };
344
- </script>
345
-
346
-
347
- <style module>
348
- @import '/css/fonts.css';
349
- @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
350
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
351
- body {
352
- margin: 0;
353
- line-height: normal;
354
- }
355
- :root {
356
- /* fonts */
357
- --font-poppinspro: Poppins;
358
- --font-interpro: Inter;
359
-
360
- /* font sizes */
361
- --font-size-3xspro: 10px;
362
- --font-size-xspro: 12px;
363
- --font-size-smpro: 14px;
364
- --font-size-2xspro: 11px;
365
- --font-size-4xspro: 9px;
366
- --font-size-base-2pro: 15.2px;
367
-
368
- /* Colors */
369
- --color-gray-100pro: #172632;
370
- --color-gray-200pro: #172531;
371
- --color-gray-300pro: rgba(255, 255, 255, 0.7);
372
- --color-gray-400pro: rgba(255, 255, 255, 0.3);
373
- --color-whitepro: #fff;
374
- --color-yellowgreen-100pro: #cbee6b;
375
- --color-yellowgreen-200pro: #cbed6e;
376
- --color-whitesmokepro: #f4f4f4;
377
- --color-darkbluepro: #0234c5;
378
- --color-darkslategraypro: #1e2b36;
379
- --color-goldenrodpro: #f7c330;
380
- --color-redpro: #ff0000;
381
- --color-slategraypro: #56637b;
382
-
383
- /* Spacing */
384
- --sizes-round-corner-round-corner-32pro: 32px;
385
- --sizes-spacing-space-24pro: 24px;
386
-
387
- /* Gaps */
388
- --gap-basepro: 16px;
389
- --gap-3xspro: 10px;
390
- --gap-7xspro: 6px;
391
- --gap-11xspro: 2px;
392
- --gap-8xspro: 5px;
393
- --gap-40xlpro: 59px;
394
- --gap-4xspro: 9px;
395
- --gap-11xlpro: 30px;
396
-
397
- /* Paddings */
398
- --padding-basepro: 16px;
399
- --padding-5xlpro: 24px;
400
- --padding-xspro: 12px;
401
- --padding-7xspro: 6px;
402
- --padding-11xspro: 2px;
403
- --padding-3xspro: 10px;
404
- --padding-29xlpro: 48px;
405
- --padding-xlpro: 20px;
406
- --padding-5xspro: 8px;
407
-
408
- /* Border radiuses */
409
- --br-9xspro: 4px;
410
- --br-2xs-2pro: 10.2px;
411
- --br-31xlpro: 50px;
412
- --br-13xlpro: 32px;
413
- --br-12xspro: 1px;
414
- }
415
-
416
- .anNoEstn {
417
- font-weight: 500;
418
- }
419
- .groupsLeague {
420
- position: relative;
421
- line-height: 20px;
422
- }
423
- .historicas {
424
- position: relative;
425
- line-height: 20px;
426
- opacity: 0.6;
427
- }
428
- .switchOption {
429
- border-radius: var(--br-13xlpro);
430
- width: 109px;
431
- display: flex;
432
- flex-direction: row;
433
- align-items: center;
434
- justify-content: center;
435
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
436
- box-sizing: border-box;
437
- }
438
- .switchOption1 {
439
- border-radius: var(--br-13xlpro);
440
- width: 107px;
441
- display: flex;
442
- flex-direction: row;
443
- align-items: center;
444
- justify-content: center;
445
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
446
- box-sizing: border-box;
447
- }
448
- .probables {
449
- position: relative;
450
- line-height: 20px;
451
- font-weight: 600;
452
- }
453
- .switchOption2 {
454
- border-radius: var(--br-13xlpro);
455
- background-color: var(--color-darkslategraypro);
456
- border: 0.8px solid var(--color-yellowgreen-100pro);
457
- box-sizing: border-box;
458
- width: 109.8px;
459
- display: flex;
460
- flex-direction: row;
461
- align-items: center;
462
- justify-content: center;
463
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
464
- }
465
- .switchStatesBig {
466
- border-radius: var(--sizes-round-corner-round-corner-32pro);
467
- background-color: var(--color-gray-100pro);
468
- border: 1px solid var(--color-gray-400pro);
469
- display: inline-block;
470
- width: 320px;
471
- font-size: var(--font-size-xspro);
472
- color: var(--color-whitepro);
473
- }
474
- .groupsLeagueParent {
475
- align-self: stretch;
476
- display: flex;
477
- flex-direction: column;
478
- align-items: center;
479
- justify-content: flex-start;
480
- gap: var(--gap-11xlpro);
481
- text-align: center;
482
- }
483
- .imgHomeTeamIcon {
484
- position: relative;
485
- width: 28px;
486
- height: 28px;
487
- object-fit: cover;
488
- }
489
- .imgHomeTeamWrapper {
490
- border-radius: var(--br-31xlpro);
491
- background-color: var(--color-gray-200pro);
492
- width: 40px;
493
- height: 40px;
494
- display: flex;
495
- flex-direction: column;
496
- align-items: center;
497
- justify-content: center;
498
- padding: var(--padding-3xspro);
499
- box-sizing: border-box;
500
- }
501
- .teamContainer {
502
- border-radius: var(--br-31xlpro);
503
- border: 1px solid var(--color-darkbluepro);
504
- box-sizing: border-box;
505
- width: 48px;
506
- height: 48px;
507
- display: flex;
508
- flex-direction: row;
509
- align-items: center;
510
- justify-content: center;
511
- padding: var(--padding-3xspro);
512
- }
513
- .name {
514
- position: relative;
515
- letter-spacing: 0.31px;
516
- line-height: 30.87px;
517
- font-weight: 500;
518
- }
519
- .jor {
520
- position: relative;
521
- line-height: 9px;
522
- font-weight: 600;
523
- opacity: 0.6;
524
- }
525
- .jorParent {
526
- flex: 1;
527
- display: flex;
528
- flex-direction: row;
529
- align-items: center;
530
- justify-content: flex-start;
531
- gap: var(--gap-7xspro);
532
- }
533
- .shapeIcon {
534
- position: relative;
535
- width: 8px;
536
- height: 4px;
537
- }
538
- .frameParent {
539
- cursor: pointer;
540
- width: auto;
541
- border: 1px solid var(--color-gray-400pro);
542
- background-color: rgba(255, 255, 255, 0.05);
543
- border-radius: var(--br-5xsre);
544
- box-sizing: border-box;
545
- height: 32px;
546
- display: flex;
547
- font-size: 10px;
548
- flex-direction: row;
549
- align-items: center;
550
- justify-content: flex-start;
551
- gap: var(--gap-3xspro);
552
- }
553
- .manchesterUnited {
554
- position: relative;
555
- letter-spacing: -0.01em;
556
- line-height: 20.07px;
557
- font-weight: 500;
558
- display: flex;
559
- align-items: center;
560
- width: 16px;
561
- height: 29px;
562
- flex-shrink: 0;
563
- }
564
- .necaxaIcon {
565
- position: relative;
566
- width: 29px;
567
- height: 29px;
568
- object-fit: cover;
569
- }
570
- .manchesterUnited1 {
571
- position: relative;
572
- letter-spacing: -0.01em;
573
- line-height: 20.07px;
574
- font-weight: 500;
575
- }
576
- .team {
577
- display: flex;
578
- flex-direction: row;
579
- align-items: center;
580
- justify-content: flex-start;
581
- gap: var(--gap-8xspro);
582
- color: var(--color-gray-300pro);
583
- }
584
- .homeTeamContainer {
585
- flex: 1;
586
- border-bottom: 1px solid var(--color-slategraypro);
587
- display: flex;
588
- flex-direction: row;
589
- align-items: center;
590
- justify-content: flex-start;
591
- padding: 0px 0px var(--padding-xlpro);
592
- gap: var(--gap-3xspro);
593
- }
594
- .div1 {
595
- position: relative;
596
- font-weight: 600;
597
- }
598
- .scoreContainer {
599
- border-radius: 17.4px;
600
- background-color: rgba(255, 255, 255, 0.1);
601
- display: flex;
602
- flex-direction: row;
603
- align-items: center;
604
- justify-content: center;
605
- padding: 6.524074554443359px 17.397533416748047px;
606
- gap: 8.7px;
607
- opacity: 0;
608
- }
609
- .scoreContainerWrapper {
610
- align-self: stretch;
611
- width: 323px;
612
- display: flex;
613
- flex-direction: column;
614
- align-items: center;
615
- justify-content: space-between;
616
- text-align: center;
617
- font-size: 15.22px;
618
- color: var(--color-whitepro);
619
- font-family: var(--font-interpro);
620
- }
621
- .team1 {
622
- display: flex;
623
- flex-direction: row;
624
- align-items: center;
625
- justify-content: flex-start;
626
- gap: var(--gap-8xspro);
627
- }
628
- .name1 {
629
- position: relative;
630
- letter-spacing: 0.31px;
631
- line-height: 30.87px;
632
- font-weight: 500;
633
- color: var(--color-whitesmokepro);
634
- }
635
- .teamContainer1 {
636
- border-radius: var(--br-31xlpro);
637
- border: 1px solid var(--color-yellowgreen-200pro);
638
- box-sizing: border-box;
639
- width: 48px;
640
- height: 48px;
641
- display: flex;
642
- flex-direction: row;
643
- align-items: center;
644
- justify-content: center;
645
- padding: var(--padding-3xspro);
646
- }
647
- .awayTeamContainer {
648
- flex: 1;
649
- border-bottom: 1px solid var(--color-slategraypro);
650
- display: flex;
651
- flex-direction: row;
652
- align-items: center;
653
- justify-content: flex-end;
654
- padding: 0px 0px var(--padding-xlpro);
655
- gap: var(--gap-3xspro);
656
- color: var(--color-gray-300pro);
657
- }
658
- .matchContainer {
659
- align-self: stretch;
660
- display: flex;
661
- flex-direction: row;
662
- align-items: center;
663
- justify-content: space-between;
664
- padding: 0px 0px var(--padding-xspro);
665
- color: var(--color-whitesmokepro);
666
- }
667
- .goalChild {
668
- position: relative;
669
- width: 8.03px;
670
- height: 8.03px;
671
- }
672
- .goal {
673
- width: 9px;
674
- height: 9px;
675
- display: flex;
676
- flex-direction: row;
677
- align-items: center;
678
- justify-content: center;
679
- }
680
- .manchesterUnited4 {
681
- position: relative;
682
- letter-spacing: -0.01em;
683
- line-height: 19.5px;
684
- text-transform: capitalize;
685
- font-weight: 500;
686
- }
687
- .minuteEvent {
688
- display: flex;
689
- flex-direction: row;
690
- align-items: center;
691
- justify-content: flex-start;
692
- gap: var(--gap-4xspro);
693
- }
694
- .yellowCard {
695
- position: relative;
696
- border-radius: var(--br-12xspro);
697
- background-color: var(--color-goldenrodpro);
698
- width: 4px;
699
- height: 6px;
700
- }
701
- .awayTeamEvents {
702
- display: flex;
703
- flex-direction: column;
704
- align-items: flex-start;
705
- justify-content: flex-start;
706
- gap: var(--gap-3xspro);
707
- }
708
- .rectangle {
709
- position: relative;
710
- border-radius: var(--br-12xspro);
711
- background-color: var(--color-redpro);
712
- width: 4px;
713
- height: 6px;
714
- }
715
- .homeTeamEvents {
716
- display: flex;
717
- flex-direction: column;
718
- align-items: flex-end;
719
- justify-content: flex-start;
720
- gap: var(--gap-3xspro);
721
- text-align: right;
722
- }
723
- .totalEvents {
724
- display: none;
725
- flex-direction: row;
726
- align-items: center;
727
- justify-content: flex-start;
728
- gap: var(--gap-40xlpro);
729
- font-size: var(--font-size-4xspro);
730
- }
731
- .headerSeccionAlineaciones1 {
732
- align-self: stretch;
733
- background-color: var(--color-gray-200pro);
734
- display: flex;
735
- flex-direction: column;
736
- align-items: center;
737
- justify-content: flex-start;
738
- padding: 0px var(--padding-29xlpro);
739
- gap: var(--gap-basepro);
740
- }
741
- .homeTeamContainer1 {
742
- border-bottom: 1px solid var(--color-slategraypro);
743
- box-sizing: border-box;
744
- width: 45%;
745
- display: flex;
746
- flex-direction: row;
747
- flex-wrap: wrap;
748
- align-items: center;
749
- justify-content: flex-start;
750
- padding: 0px 0px var(--padding-xlpro);
751
- gap: var(--gap-3xspro);
752
- }
753
- .awayTeamContainer1 {
754
- border-bottom: 1px solid var(--color-slategraypro);
755
- box-sizing: border-box;
756
- width: 45%;
757
- display: flex;
758
- flex-direction: row;
759
- flex-wrap: wrap;
760
- align-items: center;
761
- justify-content: flex-end;
762
- padding: 0px 0px var(--padding-xlpro);
763
- gap: var(--gap-3xspro);
764
- }
765
- .headerSeccionAlineaciones2 {
766
- align-self: stretch;
767
- background-color: var(--color-gray-200pro);
768
- display: none;
769
- flex-direction: column;
770
- align-items: center;
771
- justify-content: flex-start;
772
- padding: 0px var(--padding-29xlpro);
773
- gap: var(--gap-basepro);
774
- }
775
- .jugadores {
776
- position: relative;
777
- line-height: 20px;
778
- font-weight: 600;
779
- opacity: 0.6;
780
- }
781
- .switchOption6 {
782
- border-radius: var(--sizes-round-corner-round-corner-32pro);
783
- width: 74px;
784
- display: flex;
785
- flex-direction: row;
786
- align-items: center;
787
- justify-content: center;
788
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
789
- box-sizing: border-box;
790
- }
791
- .switchOption8 {
792
- border-radius: var(--sizes-round-corner-round-corner-32pro);
793
- background-color: var(--color-darkslategraypro);
794
- border: 0.8px solid var(--color-yellowgreen-100pro);
795
- box-sizing: border-box;
796
- width: 74.8px;
797
- display: flex;
798
- flex-direction: row;
799
- align-items: center;
800
- justify-content: center;
801
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
802
- }
803
- .switchStatesBig2 {
804
- border-radius: var(--sizes-round-corner-round-corner-32pro);
805
- background-color: var(--color-gray-100pro);
806
- border: 1px solid var(--color-gray-400pro);
807
- display: inline-block;
808
- width: 280px;
809
- }
810
- .manchesterUnited28 {
811
- position: relative;
812
- font-weight: 500;
813
- }
814
- .homeTeamContainer2 {
815
- display: flex;
816
- flex-direction: row;
817
- align-items: center;
818
- justify-content: flex-start;
819
- gap: var(--gap-3xspro);
820
- }
821
- .matchContainer2 {
822
- align-self: stretch;
823
- display: flex;
824
- flex-direction: row;
825
- align-items: center;
826
- justify-content: space-between;
827
- padding: 0px 0px var(--padding-xspro);
828
- text-align: left;
829
- font-size: var(--font-size-smpro);
830
- color: var(--color-whitesmokepro);
831
- }
832
- .manchesterUnited29 {
833
- position: relative;
834
- letter-spacing: -0.01em;
835
- line-height: 20.07px;
836
- font-weight: 500;
837
- z-index: 0;
838
- }
839
- .sliderMatchesChild {
840
- position: absolute;
841
- margin: 0 !important;
842
- top: 14.31px;
843
- left: 261.07px;
844
- border-radius: 10.21px;
845
- width: 14.31px;
846
- height: 6.41px;
847
- z-index: 1;
848
- }
849
- .sliderMatchesItem {
850
- position: absolute;
851
- margin: 0 !important;
852
- top: 0.31px;
853
- left: 6.41px;
854
- border-radius: 10.21px;
855
- width: 14.31px;
856
- height: 6.41px;
857
- z-index: 2;
858
- }
859
- .sliderMatches {
860
- display: none;
861
- flex-direction: row;
862
- align-items: flex-start;
863
- justify-content: flex-start;
864
- padding: var(--padding-11xspro) var(--padding-basepro);
865
- position: relative;
866
- gap: var(--gap-3xspro);
867
- font-size: var(--font-size-smpro);
868
- }
869
- .jorParent2 {
870
- display: flex;
871
- flex-direction: row;
872
- align-items: center;
873
- justify-content: center;
874
- gap: var(--gap-11xspro);
875
- }
876
- .filterMatchday {
877
- border-radius: var(--br-9xspro);
878
- border: 1px solid var(--color-gray-400pro);
879
- box-sizing: border-box;
880
- height: 25px;
881
- display: flex;
882
- flex-direction: row;
883
- align-items: center;
884
- justify-content: flex-start;
885
- gap: var(--gap-7xspro);
886
- }
887
- .necaxaIcon4 {
888
- position: relative;
889
- width: 18px;
890
- height: 18px;
891
- object-fit: cover;
892
- }
893
- .team4 {
894
- display: flex;
895
- flex-direction: row;
896
- align-items: center;
897
- justify-content: flex-start;
898
- gap: var(--gap-8xspro);
899
- text-align: left;
900
- font-size: var(--font-size-xspro);
901
- color: var(--color-gray-300pro);
902
- }
903
- .filterMatchdayParent {
904
- display: flex;
905
- flex-direction: row;
906
- align-items: center;
907
- justify-content: center;
908
- gap: var(--gap-3xspro);
909
- }
910
- .filterMatchday1 {
911
- border-radius: var(--br-9xspro);
912
- border: 1px solid var(--color-gray-400pro);
913
- box-sizing: border-box;
914
- height: 25px;
915
- display: flex;
916
- flex-direction: row;
917
- align-items: center;
918
- justify-content: flex-start;
919
- padding: var(--padding-11xspro) var(--padding-7xspro);
920
- gap: var(--gap-7xspro);
921
- text-align: center;
922
- font-size: var(--font-size-3xspro);
923
- color: var(--color-whitepro);
924
- }
925
- .teamParent {
926
- display: flex;
927
- flex-direction: row;
928
- align-items: center;
929
- justify-content: center;
930
- gap: var(--gap-3xspro);
931
- text-align: left;
932
- font-size: var(--font-size-xspro);
933
- color: var(--color-gray-300pro);
934
- }
935
- .filtersContainer {
936
- align-self: stretch;
937
- display: flex;
938
- flex-direction: row;
939
- align-items: center;
940
- justify-content: space-between;
941
- padding: 0px 0px var(--padding-7xspro);
942
- color: var(--color-whitepro);
943
- }
944
- .containerData {
945
- align-self: stretch;
946
- border-radius: 9px;
947
- background-color: #192632;
948
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
949
- display: flex;
950
- flex-direction: column;
951
- align-items: center;
952
- justify-content: flex-start;
953
- padding: var(--padding-basepro) var(--padding-5xlpro) 32px;
954
- gap: 12px;
955
- font-size: var(--font-size-3xspro);
956
- color: var(--color-gray-300pro);
957
- }
958
- .headerSeccionAlineaciones3 {
959
- align-self: stretch;
960
- display: none;
961
- flex-direction: column;
962
- align-items: center;
963
- justify-content: flex-start;
964
- gap: var(--gap-basepro);
965
- text-align: center;
966
- font-size: var(--font-size-2xspro);
967
- color: var(--color-whitepro);
968
- }
969
- .headerSeccionAlineaciones {
970
- position: relative;
971
- width: 100%;
972
- display: flex;
973
- flex-direction: column;
974
- align-items: flex-start;
975
- justify-content: flex-start;
976
- gap: 132px;
977
- text-align: left;
978
- font-size: var(--font-size-smpro);
979
- color: var(--color-gray-300pro);
980
- font-family: var(--font-poppinspro);
981
- }
982
-
983
- @media screen and (max-width: 1200px) {
984
- .headerSeccionAlineaciones1 {
985
- align-self: stretch;
986
- width: auto;
987
- max-width: 1089px;
988
- }
989
-
990
- .headerSeccionAlineaciones2 {
991
- display: none;
992
- align-self: stretch;
993
- width: auto;
994
- max-width: 1089px;
995
- }
996
-
997
- .headerSeccionAlineaciones3 {
998
- display: none;
999
- max-width: 540px;
1000
- }
1001
- }
1002
- @media screen and (max-width: 420px) {
1003
- .headerSeccionAlineaciones1 {
1004
- display: none;
1005
- }
1006
-
1007
- .headerSeccionAlineaciones2 {
1008
- display: none;
1009
- }
1010
-
1011
- .headerSeccionAlineaciones3 {
1012
- display: flex;
1013
- }
1014
- }
1015
- @media screen and (max-width: 880px) {
1016
- .headerSeccionAlineaciones1 {
1017
- display: none;
1018
- }
1019
-
1020
- .headerSeccionAlineaciones2 {
1021
- display: flex;
1022
- }
1023
-
1024
- .headerSeccionAlineaciones3 {
1025
- display: none;
1026
- }
1027
- }
1028
- @media screen and (max-width: 540px) {
1029
- .headerSeccionAlineaciones2 {
1030
- display: none;
1031
- }
1032
-
1033
- .containerData {
1034
- padding-left: var(--padding-xspro);
1035
- padding-right: var(--padding-xspro);
1036
- box-sizing: border-box;
1037
- }
1038
-
1039
- .headerSeccionAlineaciones3 {
1040
- display: flex;
1041
- min-width: 300px;
1042
- }
1043
- }
1044
- </style>
1
+ <template>
2
+ <div :class="$style.headerSeccionAlineaciones">
3
+ <div :class="$style.headerSeccionAlineaciones1" id="header-desktop">
4
+ <div :class="$style.groupsLeagueParent">
5
+ <div :class="$style.groupsLeague">
6
+ <span>Las alineaciones de este partido </span>
7
+ <span :class="$style.anNoEstn">aún no están disponibles</span>
8
+ <span>. Por lo pronto puedes ver alineaciones: </span>
9
+ </div>
10
+ <div :class="$style.switchStatesBig" id="switch-lineup">
11
+ <GscSwitchComponent
12
+ :buttons="['Historicos', 'Recientes', 'Probables']"
13
+ :selectedOption="optionSelected"
14
+ :type="1"
15
+ :arrow="false"
16
+ borderRadius="32px"
17
+ height="28px"
18
+ fontSize="11px;"
19
+ fontFamily="Poppins-Regular"
20
+ border-width="1px"
21
+ border-width-container="0px"
22
+ backgroundOptionDisable="#162533"
23
+ width="600px"
24
+ backgroundOptionActive="transparent"
25
+ @input="clickOnSelectOption" />
26
+ </div>
27
+ </div>
28
+ <div :class="$style.matchContainer" id="match-container">
29
+ <div :class="$style.homeTeamContainer">
30
+ <div :class="$style.teamContainer">
31
+ <div :class="$style.imgHomeTeamWrapper">
32
+ <img
33
+ :class="$style.imgHomeTeamIcon"
34
+ alt=""
35
+ :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
36
+ />
37
+ </div>
38
+ </div>
39
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
40
+
41
+ <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
42
+ <template #default="data">
43
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
44
+ </template>
45
+ <template #availableItem="{item}">
46
+ <div>{{item.name}}</div>
47
+ </template>
48
+ </GSCDropdown>
49
+ <div :class="$style.team">
50
+ <div :class="$style.manchesterUnited">vs</div>
51
+ <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
52
+ <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
53
+ </div>
54
+ </div>
55
+ <div :class="$style.scoreContainerWrapper">
56
+ <div :class="$style.scoreContainer">
57
+ <div :class="$style.div1">2</div>
58
+ <div :class="$style.div1">-</div>
59
+ <div :class="$style.div1">2</div>
60
+ </div>
61
+ </div>
62
+ <div :class="$style.awayTeamContainer">
63
+ <div :class="$style.team1">
64
+ <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
65
+ <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
66
+ <div :class="$style.manchesterUnited">vs</div>
67
+ </div>
68
+ <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
69
+ <template #default="data">
70
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
71
+ </template>
72
+ <template #availableItem="{item}">
73
+ <div>{{item.name}}</div>
74
+ </template>
75
+ </GSCDropdown>
76
+ <div :class="$style.name1">{{ gameInfo.away_team_abbreviation }}</div>
77
+ <div :class="$style.teamContainer1">
78
+ <div :class="$style.imgHomeTeamWrapper">
79
+ <img
80
+ :class="$style.imgHomeTeamIcon"
81
+ alt=""
82
+ :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
83
+ />
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ </div>
90
+ <div :class="$style.headerSeccionAlineaciones2" id="header-desktop">
91
+ <div :class="$style.groupsLeagueParent">
92
+ <div :class="$style.groupsLeague">
93
+ <span>Las alineaciones de este partido </span>
94
+ <span :class="$style.anNoEstn">aún no están disponibles</span>
95
+ <span>. Por lo pronto puedes ver alineaciones:</span>
96
+ </div>
97
+ <div :class="$style.switchStatesBig" id="switch-lineup">
98
+ <GscSwitchComponent
99
+ :buttons="['Historicos', 'Recientes', 'Probables']"
100
+ :selectedOption="optionSelected"
101
+ :type="1"
102
+ :arrow="false"
103
+ borderRadius="32px"
104
+ height="28px"
105
+ fontSize="11px;"
106
+ fontFamily="Poppins-Regular"
107
+ border-width="1px"
108
+ border-width-container="0px"
109
+ backgroundOptionDisable="#162533"
110
+ width="600px"
111
+ backgroundOptionActive="transparent"
112
+ @input="clickOnSelectOption" />
113
+ </div>
114
+ </div>
115
+ <div :class="$style.matchContainer" id="match-container">
116
+ <div :class="$style.homeTeamContainer1">
117
+ <div :class="$style.teamContainer">
118
+ <div :class="$style.imgHomeTeamWrapper">
119
+ <img
120
+ :class="$style.imgHomeTeamIcon"
121
+ alt=""
122
+ :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
123
+ />
124
+ </div>
125
+ </div>
126
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
127
+ <div :class="$style.frameParent">
128
+ <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
129
+ <template #default="data">
130
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
131
+ </template>
132
+ <template #availableItem="{item}">
133
+ <div>{{item.name}}</div>
134
+ </template>
135
+ </GSCDropdown>
136
+ </div>
137
+ <div :class="$style.team">
138
+ <div :class="$style.manchesterUnited">vs</div>
139
+ <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
140
+ <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
141
+ </div>
142
+ </div>
143
+ <div :class="$style.awayTeamContainer1">
144
+
145
+
146
+ <div :class="$style.team">
147
+ <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
148
+ <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
149
+ <div :class="$style.manchesterUnited">vs</div>
150
+ </div>
151
+ <div :class="$style.frameParent">
152
+ <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
153
+ <template #default="data">
154
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
155
+ </template>
156
+ <template #availableItem="{item}">
157
+ <div>{{item.name}}</div>
158
+ </template>
159
+ </GSCDropdown>
160
+ </div>
161
+ <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
162
+ <div :class="$style.teamContainer1">
163
+ <div :class="$style.imgHomeTeamWrapper">
164
+ <img
165
+ :class="$style.imgHomeTeamIcon"
166
+ alt=""
167
+ :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
168
+ />
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ <div :class="$style.headerSeccionAlineaciones3" id="header-mobile">
175
+ <div :class="$style.switchStatesBig2" id="switch-lineup">
176
+ <GscSwitchComponent
177
+ :buttons="['Historicos', 'Recientes', 'Probables']"
178
+ :selectedOption="optionSelected"
179
+ :type="1"
180
+ :arrow="false"
181
+ borderRadius="32px"
182
+ height="28px"
183
+ fontSize="11px;"
184
+ fontFamily="Poppins-Regular"
185
+ border-width="1px"
186
+ border-width-container="0px"
187
+ backgroundOptionDisable="#162533"
188
+ width="600px"
189
+ backgroundOptionActive="transparent"
190
+ @input="clickOnSelectOption" />
191
+ </div>
192
+ <div :class="$style.containerData">
193
+ <div :class="$style.manchesterUnited28">Alineación utilizada en:</div>
194
+ <div :class="$style.matchContainer2" id="match-container">
195
+ <div :class="$style.homeTeamContainer2">
196
+ <div :class="$style.teamContainer">
197
+ <div :class="$style.imgHomeTeamWrapper">
198
+ <img
199
+ :class="$style.imgHomeTeamIcon"
200
+ alt=""
201
+ :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
202
+ />
203
+ </div>
204
+ </div>
205
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
206
+ </div>
207
+ <div :class="$style.homeTeamContainer2">
208
+ <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
209
+ <div :class="$style.teamContainer1">
210
+ <div :class="$style.imgHomeTeamWrapper">
211
+ <img
212
+ :class="$style.imgHomeTeamIcon"
213
+ alt=""
214
+ :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
215
+ />
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <div :class="$style.filtersContainer">
222
+ <div :class="$style.filterMatchdayParent">
223
+ <div :class="$style.filterMatchday">
224
+ <div :class="$style.filterMatchday1">
225
+ <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
226
+ <template #default="data">
227
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
228
+ </template>
229
+ <template #availableItem="{item}">
230
+ <div>{{item.name}}</div>
231
+ </template>
232
+ </GSCDropdown>
233
+ </div>
234
+ </div>
235
+ <div :class="$style.team4">
236
+ <div :class="$style.manchesterUnited1">vs</div>
237
+ <img
238
+ :class="$style.necaxaIcon4"
239
+ alt=""
240
+ :src="rivalHomeImg"
241
+ />
242
+ <!-- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div> -->
243
+ </div>
244
+ </div>
245
+ <div :class="$style.teamParent">
246
+ <div :class="$style.team1">
247
+ <!-- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div> -->
248
+ <img
249
+ :class="$style.necaxaIcon4"
250
+ alt=""
251
+ :src="rivalVisitImg"
252
+ />
253
+ <div :class="$style.manchesterUnited1">vs</div>
254
+ </div>
255
+ <div :class="$style.filterMatchday1">
256
+ <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
257
+ <template #default="data">
258
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
259
+ </template>
260
+ <template #availableItem="{item}">
261
+ <div>{{item.name}}</div>
262
+ </template>
263
+ </GSCDropdown>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </template>
271
+
272
+
273
+ <script>
274
+ import {
275
+ GSCDropdown
276
+ } from '@golstats/gsc-dropdown';
277
+ import '@@/@golstats/gsc-dropdown/dist/style.css'
278
+ import { GscSwitchComponent } from '@golstats/gsc-switch-component'
279
+ import '@@/@golstats/gsc-switch-component/dist/style.css'
280
+ export default {
281
+ components: { GSCDropdown, GscSwitchComponent},
282
+ props: {
283
+ optionSelected: {
284
+ type: String,
285
+ default: 'Historicos',
286
+ },
287
+ gameInfo: {
288
+ type: Object,
289
+ default: () => {},
290
+ },
291
+ gameRecientes: {
292
+ type: Array,
293
+ default: () => [],
294
+ },
295
+ matchdaysDefault: {
296
+ type: Array,
297
+ default: () => [],
298
+ },
299
+ },
300
+ data() {
301
+ return {
302
+ rivalHomeImg: '',
303
+ rivalVisitImg: '',
304
+ rivalHomeAbrev: '',
305
+ rivalVisitAbrev: '',
306
+ auxVal: 0,
307
+
308
+ }
309
+ },
310
+ watch: {
311
+ gameInfo: {
312
+ immediate: true,
313
+ handler: async function (newValue) {
314
+ try {
315
+ this.$emit('input',newValue);
316
+ } catch (e) {
317
+ throw new Error(e);
318
+ }
319
+ },
320
+ },
321
+ },
322
+ methods: {
323
+ clickOnSelectOption(val){
324
+ this.$emit('clickOnSelectOption', val);
325
+ },
326
+ changeDropdownVisit(val){
327
+ const indexGame = this.gameRecientes[this.gameInfo.away_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
328
+ this.rivalVisitAbrev = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team_abbreviation : this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation;
329
+ this.rivalVisitImg = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team+'.png';
330
+
331
+ this.$emit('changeaway',this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame]);
332
+
333
+ },
334
+ changeDropdownLocal(val){
335
+ const indexGame = this.gameRecientes[this.gameInfo.home_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
336
+ this.rivalHomeAbrev = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team_abbreviation : this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation;
337
+ this.rivalHomeImg = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team+'.png';
338
+
339
+ this.$emit('changehome',this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame]);
340
+
341
+ }
342
+ }
343
+ };
344
+ </script>
345
+
346
+
347
+ <style module>
348
+ @import '/css/fonts.css';
349
+ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
350
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
351
+ body {
352
+ margin: 0;
353
+ line-height: normal;
354
+ }
355
+ :root {
356
+ /* fonts */
357
+ --font-poppinspro: Poppins;
358
+ --font-interpro: Inter;
359
+
360
+ /* font sizes */
361
+ --font-size-3xspro: 10px;
362
+ --font-size-xspro: 12px;
363
+ --font-size-smpro: 14px;
364
+ --font-size-2xspro: 11px;
365
+ --font-size-4xspro: 9px;
366
+ --font-size-base-2pro: 15.2px;
367
+
368
+ /* Colors */
369
+ --color-gray-100pro: #172632;
370
+ --color-gray-200pro: #172531;
371
+ --color-gray-300pro: rgba(255, 255, 255, 0.7);
372
+ --color-gray-400pro: rgba(255, 255, 255, 0.3);
373
+ --color-whitepro: #fff;
374
+ --color-yellowgreen-100pro: #cbee6b;
375
+ --color-yellowgreen-200pro: #cbed6e;
376
+ --color-whitesmokepro: #f4f4f4;
377
+ --color-darkbluepro: #0234c5;
378
+ --color-darkslategraypro: #1e2b36;
379
+ --color-goldenrodpro: #f7c330;
380
+ --color-redpro: #ff0000;
381
+ --color-slategraypro: #56637b;
382
+
383
+ /* Spacing */
384
+ --sizes-round-corner-round-corner-32pro: 32px;
385
+ --sizes-spacing-space-24pro: 24px;
386
+
387
+ /* Gaps */
388
+ --gap-basepro: 16px;
389
+ --gap-3xspro: 10px;
390
+ --gap-7xspro: 6px;
391
+ --gap-11xspro: 2px;
392
+ --gap-8xspro: 5px;
393
+ --gap-40xlpro: 59px;
394
+ --gap-4xspro: 9px;
395
+ --gap-11xlpro: 30px;
396
+
397
+ /* Paddings */
398
+ --padding-basepro: 16px;
399
+ --padding-5xlpro: 24px;
400
+ --padding-xspro: 12px;
401
+ --padding-7xspro: 6px;
402
+ --padding-11xspro: 2px;
403
+ --padding-3xspro: 10px;
404
+ --padding-29xlpro: 48px;
405
+ --padding-xlpro: 20px;
406
+ --padding-5xspro: 8px;
407
+
408
+ /* Border radiuses */
409
+ --br-9xspro: 4px;
410
+ --br-2xs-2pro: 10.2px;
411
+ --br-31xlpro: 50px;
412
+ --br-13xlpro: 32px;
413
+ --br-12xspro: 1px;
414
+ }
415
+
416
+ .anNoEstn {
417
+ font-weight: 500;
418
+ }
419
+ .groupsLeague {
420
+ position: relative;
421
+ line-height: 20px;
422
+ }
423
+ .historicas {
424
+ position: relative;
425
+ line-height: 20px;
426
+ opacity: 0.6;
427
+ }
428
+ .switchOption {
429
+ border-radius: var(--br-13xlpro);
430
+ width: 109px;
431
+ display: flex;
432
+ flex-direction: row;
433
+ align-items: center;
434
+ justify-content: center;
435
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
436
+ box-sizing: border-box;
437
+ }
438
+ .switchOption1 {
439
+ border-radius: var(--br-13xlpro);
440
+ width: 107px;
441
+ display: flex;
442
+ flex-direction: row;
443
+ align-items: center;
444
+ justify-content: center;
445
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
446
+ box-sizing: border-box;
447
+ }
448
+ .probables {
449
+ position: relative;
450
+ line-height: 20px;
451
+ font-weight: 600;
452
+ }
453
+ .switchOption2 {
454
+ border-radius: var(--br-13xlpro);
455
+ background-color: var(--color-darkslategraypro);
456
+ border: 0.8px solid var(--color-yellowgreen-100pro);
457
+ box-sizing: border-box;
458
+ width: 109.8px;
459
+ display: flex;
460
+ flex-direction: row;
461
+ align-items: center;
462
+ justify-content: center;
463
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
464
+ }
465
+ .switchStatesBig {
466
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
467
+ background-color: var(--color-gray-100pro);
468
+ border: 1px solid var(--color-gray-400pro);
469
+ display: inline-block;
470
+ width: 320px;
471
+ font-size: var(--font-size-xspro);
472
+ color: var(--color-whitepro);
473
+ }
474
+ .groupsLeagueParent {
475
+ align-self: stretch;
476
+ display: flex;
477
+ flex-direction: column;
478
+ align-items: center;
479
+ justify-content: flex-start;
480
+ gap: var(--gap-11xlpro);
481
+ text-align: center;
482
+ }
483
+ .imgHomeTeamIcon {
484
+ position: relative;
485
+ width: 28px;
486
+ height: 28px;
487
+ object-fit: cover;
488
+ }
489
+ .imgHomeTeamWrapper {
490
+ border-radius: var(--br-31xlpro);
491
+ background-color: var(--color-gray-200pro);
492
+ width: 40px;
493
+ height: 40px;
494
+ display: flex;
495
+ flex-direction: column;
496
+ align-items: center;
497
+ justify-content: center;
498
+ padding: var(--padding-3xspro);
499
+ box-sizing: border-box;
500
+ }
501
+ .teamContainer {
502
+ border-radius: var(--br-31xlpro);
503
+ border: 1px solid var(--color-darkbluepro);
504
+ box-sizing: border-box;
505
+ width: 48px;
506
+ height: 48px;
507
+ display: flex;
508
+ flex-direction: row;
509
+ align-items: center;
510
+ justify-content: center;
511
+ padding: var(--padding-3xspro);
512
+ }
513
+ .name {
514
+ position: relative;
515
+ letter-spacing: 0.31px;
516
+ line-height: 30.87px;
517
+ font-weight: 500;
518
+ }
519
+ .jor {
520
+ position: relative;
521
+ line-height: 9px;
522
+ font-weight: 600;
523
+ opacity: 0.6;
524
+ }
525
+ .jorParent {
526
+ flex: 1;
527
+ display: flex;
528
+ flex-direction: row;
529
+ align-items: center;
530
+ justify-content: flex-start;
531
+ gap: var(--gap-7xspro);
532
+ }
533
+ .shapeIcon {
534
+ position: relative;
535
+ width: 8px;
536
+ height: 4px;
537
+ }
538
+ .frameParent {
539
+ cursor: pointer;
540
+ width: auto;
541
+ border: 1px solid var(--color-gray-400pro);
542
+ background-color: rgba(255, 255, 255, 0.05);
543
+ border-radius: var(--br-5xsre);
544
+ box-sizing: border-box;
545
+ height: 32px;
546
+ display: flex;
547
+ font-size: 10px;
548
+ flex-direction: row;
549
+ align-items: center;
550
+ justify-content: flex-start;
551
+ gap: var(--gap-3xspro);
552
+ }
553
+ .manchesterUnited {
554
+ position: relative;
555
+ letter-spacing: -0.01em;
556
+ line-height: 20.07px;
557
+ font-weight: 500;
558
+ display: flex;
559
+ align-items: center;
560
+ width: 16px;
561
+ height: 29px;
562
+ flex-shrink: 0;
563
+ }
564
+ .necaxaIcon {
565
+ position: relative;
566
+ width: 29px;
567
+ height: 29px;
568
+ object-fit: cover;
569
+ }
570
+ .manchesterUnited1 {
571
+ position: relative;
572
+ letter-spacing: -0.01em;
573
+ line-height: 20.07px;
574
+ font-weight: 500;
575
+ }
576
+ .team {
577
+ display: flex;
578
+ flex-direction: row;
579
+ align-items: center;
580
+ justify-content: flex-start;
581
+ gap: var(--gap-8xspro);
582
+ color: var(--color-gray-300pro);
583
+ }
584
+ .homeTeamContainer {
585
+ flex: 1;
586
+ border-bottom: 1px solid var(--color-slategraypro);
587
+ display: flex;
588
+ flex-direction: row;
589
+ align-items: center;
590
+ justify-content: flex-start;
591
+ padding: 0px 0px var(--padding-xlpro);
592
+ gap: var(--gap-3xspro);
593
+ }
594
+ .div1 {
595
+ position: relative;
596
+ font-weight: 600;
597
+ }
598
+ .scoreContainer {
599
+ border-radius: 17.4px;
600
+ background-color: rgba(255, 255, 255, 0.1);
601
+ display: flex;
602
+ flex-direction: row;
603
+ align-items: center;
604
+ justify-content: center;
605
+ padding: 6.524074554443359px 17.397533416748047px;
606
+ gap: 8.7px;
607
+ opacity: 0;
608
+ }
609
+ .scoreContainerWrapper {
610
+ align-self: stretch;
611
+ width: 323px;
612
+ display: flex;
613
+ flex-direction: column;
614
+ align-items: center;
615
+ justify-content: space-between;
616
+ text-align: center;
617
+ font-size: 15.22px;
618
+ color: var(--color-whitepro);
619
+ font-family: var(--font-interpro);
620
+ }
621
+ .team1 {
622
+ display: flex;
623
+ flex-direction: row;
624
+ align-items: center;
625
+ justify-content: flex-start;
626
+ gap: var(--gap-8xspro);
627
+ }
628
+ .name1 {
629
+ position: relative;
630
+ letter-spacing: 0.31px;
631
+ line-height: 30.87px;
632
+ font-weight: 500;
633
+ color: var(--color-whitesmokepro);
634
+ }
635
+ .teamContainer1 {
636
+ border-radius: var(--br-31xlpro);
637
+ border: 1px solid var(--color-yellowgreen-200pro);
638
+ box-sizing: border-box;
639
+ width: 48px;
640
+ height: 48px;
641
+ display: flex;
642
+ flex-direction: row;
643
+ align-items: center;
644
+ justify-content: center;
645
+ padding: var(--padding-3xspro);
646
+ }
647
+ .awayTeamContainer {
648
+ flex: 1;
649
+ border-bottom: 1px solid var(--color-slategraypro);
650
+ display: flex;
651
+ flex-direction: row;
652
+ align-items: center;
653
+ justify-content: flex-end;
654
+ padding: 0px 0px var(--padding-xlpro);
655
+ gap: var(--gap-3xspro);
656
+ color: var(--color-gray-300pro);
657
+ }
658
+ .matchContainer {
659
+ align-self: stretch;
660
+ display: flex;
661
+ flex-direction: row;
662
+ align-items: center;
663
+ justify-content: space-between;
664
+ padding: 0px 0px var(--padding-xspro);
665
+ color: var(--color-whitesmokepro);
666
+ }
667
+ .goalChild {
668
+ position: relative;
669
+ width: 8.03px;
670
+ height: 8.03px;
671
+ }
672
+ .goal {
673
+ width: 9px;
674
+ height: 9px;
675
+ display: flex;
676
+ flex-direction: row;
677
+ align-items: center;
678
+ justify-content: center;
679
+ }
680
+ .manchesterUnited4 {
681
+ position: relative;
682
+ letter-spacing: -0.01em;
683
+ line-height: 19.5px;
684
+ text-transform: capitalize;
685
+ font-weight: 500;
686
+ }
687
+ .minuteEvent {
688
+ display: flex;
689
+ flex-direction: row;
690
+ align-items: center;
691
+ justify-content: flex-start;
692
+ gap: var(--gap-4xspro);
693
+ }
694
+ .yellowCard {
695
+ position: relative;
696
+ border-radius: var(--br-12xspro);
697
+ background-color: var(--color-goldenrodpro);
698
+ width: 4px;
699
+ height: 6px;
700
+ }
701
+ .awayTeamEvents {
702
+ display: flex;
703
+ flex-direction: column;
704
+ align-items: flex-start;
705
+ justify-content: flex-start;
706
+ gap: var(--gap-3xspro);
707
+ }
708
+ .rectangle {
709
+ position: relative;
710
+ border-radius: var(--br-12xspro);
711
+ background-color: var(--color-redpro);
712
+ width: 4px;
713
+ height: 6px;
714
+ }
715
+ .homeTeamEvents {
716
+ display: flex;
717
+ flex-direction: column;
718
+ align-items: flex-end;
719
+ justify-content: flex-start;
720
+ gap: var(--gap-3xspro);
721
+ text-align: right;
722
+ }
723
+ .totalEvents {
724
+ display: none;
725
+ flex-direction: row;
726
+ align-items: center;
727
+ justify-content: flex-start;
728
+ gap: var(--gap-40xlpro);
729
+ font-size: var(--font-size-4xspro);
730
+ }
731
+ .headerSeccionAlineaciones1 {
732
+ align-self: stretch;
733
+ background-color: var(--color-gray-200pro);
734
+ display: flex;
735
+ flex-direction: column;
736
+ align-items: center;
737
+ justify-content: flex-start;
738
+ padding: 0px var(--padding-29xlpro);
739
+ gap: var(--gap-basepro);
740
+ }
741
+ .homeTeamContainer1 {
742
+ border-bottom: 1px solid var(--color-slategraypro);
743
+ box-sizing: border-box;
744
+ width: 45%;
745
+ display: flex;
746
+ flex-direction: row;
747
+ flex-wrap: wrap;
748
+ align-items: center;
749
+ justify-content: flex-start;
750
+ padding: 0px 0px var(--padding-xlpro);
751
+ gap: var(--gap-3xspro);
752
+ }
753
+ .awayTeamContainer1 {
754
+ border-bottom: 1px solid var(--color-slategraypro);
755
+ box-sizing: border-box;
756
+ width: 45%;
757
+ display: flex;
758
+ flex-direction: row;
759
+ flex-wrap: wrap;
760
+ align-items: center;
761
+ justify-content: flex-end;
762
+ padding: 0px 0px var(--padding-xlpro);
763
+ gap: var(--gap-3xspro);
764
+ }
765
+ .headerSeccionAlineaciones2 {
766
+ align-self: stretch;
767
+ background-color: var(--color-gray-200pro);
768
+ display: none;
769
+ flex-direction: column;
770
+ align-items: center;
771
+ justify-content: flex-start;
772
+ padding: 0px var(--padding-29xlpro);
773
+ gap: var(--gap-basepro);
774
+ }
775
+ .jugadores {
776
+ position: relative;
777
+ line-height: 20px;
778
+ font-weight: 600;
779
+ opacity: 0.6;
780
+ }
781
+ .switchOption6 {
782
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
783
+ width: 74px;
784
+ display: flex;
785
+ flex-direction: row;
786
+ align-items: center;
787
+ justify-content: center;
788
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
789
+ box-sizing: border-box;
790
+ }
791
+ .switchOption8 {
792
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
793
+ background-color: var(--color-darkslategraypro);
794
+ border: 0.8px solid var(--color-yellowgreen-100pro);
795
+ box-sizing: border-box;
796
+ width: 74.8px;
797
+ display: flex;
798
+ flex-direction: row;
799
+ align-items: center;
800
+ justify-content: center;
801
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
802
+ }
803
+ .switchStatesBig2 {
804
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
805
+ background-color: var(--color-gray-100pro);
806
+ border: 1px solid var(--color-gray-400pro);
807
+ display: inline-block;
808
+ width: 280px;
809
+ }
810
+ .manchesterUnited28 {
811
+ position: relative;
812
+ font-weight: 500;
813
+ }
814
+ .homeTeamContainer2 {
815
+ display: flex;
816
+ flex-direction: row;
817
+ align-items: center;
818
+ justify-content: flex-start;
819
+ gap: var(--gap-3xspro);
820
+ }
821
+ .matchContainer2 {
822
+ align-self: stretch;
823
+ display: flex;
824
+ flex-direction: row;
825
+ align-items: center;
826
+ justify-content: space-between;
827
+ padding: 0px 0px var(--padding-xspro);
828
+ text-align: left;
829
+ font-size: var(--font-size-smpro);
830
+ color: var(--color-whitesmokepro);
831
+ }
832
+ .manchesterUnited29 {
833
+ position: relative;
834
+ letter-spacing: -0.01em;
835
+ line-height: 20.07px;
836
+ font-weight: 500;
837
+ z-index: 0;
838
+ }
839
+ .sliderMatchesChild {
840
+ position: absolute;
841
+ margin: 0 !important;
842
+ top: 14.31px;
843
+ left: 261.07px;
844
+ border-radius: 10.21px;
845
+ width: 14.31px;
846
+ height: 6.41px;
847
+ z-index: 1;
848
+ }
849
+ .sliderMatchesItem {
850
+ position: absolute;
851
+ margin: 0 !important;
852
+ top: 0.31px;
853
+ left: 6.41px;
854
+ border-radius: 10.21px;
855
+ width: 14.31px;
856
+ height: 6.41px;
857
+ z-index: 2;
858
+ }
859
+ .sliderMatches {
860
+ display: none;
861
+ flex-direction: row;
862
+ align-items: flex-start;
863
+ justify-content: flex-start;
864
+ padding: var(--padding-11xspro) var(--padding-basepro);
865
+ position: relative;
866
+ gap: var(--gap-3xspro);
867
+ font-size: var(--font-size-smpro);
868
+ }
869
+ .jorParent2 {
870
+ display: flex;
871
+ flex-direction: row;
872
+ align-items: center;
873
+ justify-content: center;
874
+ gap: var(--gap-11xspro);
875
+ }
876
+ .filterMatchday {
877
+ border-radius: var(--br-9xspro);
878
+ border: 1px solid var(--color-gray-400pro);
879
+ box-sizing: border-box;
880
+ height: 25px;
881
+ display: flex;
882
+ flex-direction: row;
883
+ align-items: center;
884
+ justify-content: flex-start;
885
+ gap: var(--gap-7xspro);
886
+ }
887
+ .necaxaIcon4 {
888
+ position: relative;
889
+ width: 18px;
890
+ height: 18px;
891
+ object-fit: cover;
892
+ }
893
+ .team4 {
894
+ display: flex;
895
+ flex-direction: row;
896
+ align-items: center;
897
+ justify-content: flex-start;
898
+ gap: var(--gap-8xspro);
899
+ text-align: left;
900
+ font-size: var(--font-size-xspro);
901
+ color: var(--color-gray-300pro);
902
+ }
903
+ .filterMatchdayParent {
904
+ display: flex;
905
+ flex-direction: row;
906
+ align-items: center;
907
+ justify-content: center;
908
+ gap: var(--gap-3xspro);
909
+ }
910
+ .filterMatchday1 {
911
+ border-radius: var(--br-9xspro);
912
+ border: 1px solid var(--color-gray-400pro);
913
+ box-sizing: border-box;
914
+ height: 25px;
915
+ display: flex;
916
+ flex-direction: row;
917
+ align-items: center;
918
+ justify-content: flex-start;
919
+ padding: var(--padding-11xspro) var(--padding-7xspro);
920
+ gap: var(--gap-7xspro);
921
+ text-align: center;
922
+ font-size: var(--font-size-3xspro);
923
+ color: var(--color-whitepro);
924
+ }
925
+ .teamParent {
926
+ display: flex;
927
+ flex-direction: row;
928
+ align-items: center;
929
+ justify-content: center;
930
+ gap: var(--gap-3xspro);
931
+ text-align: left;
932
+ font-size: var(--font-size-xspro);
933
+ color: var(--color-gray-300pro);
934
+ }
935
+ .filtersContainer {
936
+ align-self: stretch;
937
+ display: flex;
938
+ flex-direction: row;
939
+ align-items: center;
940
+ justify-content: space-between;
941
+ padding: 0px 0px var(--padding-7xspro);
942
+ color: var(--color-whitepro);
943
+ }
944
+ .containerData {
945
+ align-self: stretch;
946
+ border-radius: 9px;
947
+ background-color: #192632;
948
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
949
+ display: flex;
950
+ flex-direction: column;
951
+ align-items: center;
952
+ justify-content: flex-start;
953
+ padding: var(--padding-basepro) var(--padding-5xlpro) 32px;
954
+ gap: 12px;
955
+ font-size: var(--font-size-3xspro);
956
+ color: var(--color-gray-300pro);
957
+ }
958
+ .headerSeccionAlineaciones3 {
959
+ align-self: stretch;
960
+ display: none;
961
+ flex-direction: column;
962
+ align-items: center;
963
+ justify-content: flex-start;
964
+ gap: var(--gap-basepro);
965
+ text-align: center;
966
+ font-size: var(--font-size-2xspro);
967
+ color: var(--color-whitepro);
968
+ }
969
+ .headerSeccionAlineaciones {
970
+ position: relative;
971
+ width: 100%;
972
+ display: flex;
973
+ flex-direction: column;
974
+ align-items: flex-start;
975
+ justify-content: flex-start;
976
+ gap: 132px;
977
+ text-align: left;
978
+ font-size: var(--font-size-smpro);
979
+ color: var(--color-gray-300pro);
980
+ font-family: var(--font-poppinspro);
981
+ }
982
+
983
+ @media screen and (max-width: 1200px) {
984
+ .headerSeccionAlineaciones1 {
985
+ align-self: stretch;
986
+ width: auto;
987
+ max-width: 1089px;
988
+ }
989
+
990
+ .headerSeccionAlineaciones2 {
991
+ display: none;
992
+ align-self: stretch;
993
+ width: auto;
994
+ max-width: 1089px;
995
+ }
996
+
997
+ .headerSeccionAlineaciones3 {
998
+ display: none;
999
+ max-width: 540px;
1000
+ }
1001
+ }
1002
+ @media screen and (max-width: 420px) {
1003
+ .headerSeccionAlineaciones1 {
1004
+ display: none;
1005
+ }
1006
+
1007
+ .headerSeccionAlineaciones2 {
1008
+ display: none;
1009
+ }
1010
+
1011
+ .headerSeccionAlineaciones3 {
1012
+ display: flex;
1013
+ }
1014
+ }
1015
+ @media screen and (max-width: 880px) {
1016
+ .headerSeccionAlineaciones1 {
1017
+ display: none;
1018
+ }
1019
+
1020
+ .headerSeccionAlineaciones2 {
1021
+ display: flex;
1022
+ }
1023
+
1024
+ .headerSeccionAlineaciones3 {
1025
+ display: none;
1026
+ }
1027
+ }
1028
+ @media screen and (max-width: 540px) {
1029
+ .headerSeccionAlineaciones2 {
1030
+ display: none;
1031
+ }
1032
+
1033
+ .containerData {
1034
+ padding-left: var(--padding-xspro);
1035
+ padding-right: var(--padding-xspro);
1036
+ box-sizing: border-box;
1037
+ }
1038
+
1039
+ .headerSeccionAlineaciones3 {
1040
+ display: flex;
1041
+ min-width: 300px;
1042
+ }
1043
+ }
1044
+ </style>