@golstats/gsc-reports 1.0.131 → 1.0.132

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 (25) hide show
  1. package/README.md +2 -2
  2. package/dist/{FilterConditions-55d68355-DMqzcKBO-B5d657ee-Bx3MwOaz.js → FilterConditions-55d68355-DMqzcKBO-CcPvaaPQ-BhCs6qs4.js} +13 -13
  3. package/dist/{FilterField-59a73e38-CNaE03Ge-DAfayPkJ-xt4KSb5Q.js → FilterField-59a73e38-CNaE03Ge-VIwjBS8b-DNoIxR0R.js} +1 -1
  4. package/dist/{FilterSubcategories-a9b32cc9-_h5FCZ4r-B7VqLyBd-qoru-7Qp.js → FilterSubcategories-a9b32cc9-_h5FCZ4r-BHdwLhTj-CoLCYF3z.js} +1 -1
  5. package/dist/css/fonts.css +83 -83
  6. package/dist/gsc-reports.css +1 -1
  7. package/dist/gsc-reports.es.js +1 -1
  8. package/dist/gsc-reports.umd.js +130 -130
  9. package/dist/{index-BZqP6GtQ.js → index-BMjKOCt8.js} +16675 -16546
  10. package/package.json +2 -2
  11. package/src/components/elementsTemplates/ModalDeleteTemplate.vue +249 -249
  12. package/src/components/elementsTemplates/ModalSoloEscritorio.vue +83 -83
  13. package/src/components/elementsTemplates/ModalduplicateTemplate.vue +300 -300
  14. package/src/components/elementsTemplates/TooltipReportOptions.vue +97 -97
  15. package/src/components/elementsTemplates/TooltipTemplateOptions.vue +168 -168
  16. package/src/components/filters.vue +935 -935
  17. package/src/components/template-report-maker/CoverSelector.vue +165 -165
  18. package/src/components/template-report-maker/ReportView.vue +66 -66
  19. package/src/components/thumbnails-reports/AnalisisPostMatchType1.vue +741 -741
  20. package/src/components/thumbnails-reports/AnalisisPostMatchType2.vue +743 -743
  21. package/src/components/thumbnails-reports/AnalisisPrematchType3.vue +173 -173
  22. package/src/components/thumbnails-reports/AnalisisPrematchType4.vue +173 -173
  23. package/src/index.js +4 -4
  24. package/src/types.d.ts +45 -45
  25. package/src/utils/dateUtils.js +52 -52
package/src/components/thumbnails-reports/AnalisisPostMatchType1.vue CHANGED
@@ -1,741 +1,741 @@
1
- <template>
2
- <div class="prematch-bg">
3
- <!-- Escudos de fondo -->
4
- <div class="background-shields">
5
- <div class="shield-left">
6
- <img
7
- :src="
8
- 'https://golstatsimages.blob.core.windows.net/teams-150/' +
9
- report.game.home_team +
10
- '.png'
11
- "
12
- alt="Escudo local"
13
- />
14
- </div>
15
- <div class="shield-right">
16
- <img
17
- :src="
18
- 'https://golstatsimages.blob.core.windows.net/teams-150/' +
19
- report.game.visiting_team +
20
- '.png'
21
- "
22
- alt="Escudo visitante"
23
- />
24
- </div>
25
- </div>
26
-
27
- <div class="title">Análisis <span class="highlight">Postmatch</span></div>
28
- <div class="subtitle">
29
- <span class="jornada">{{ traducirJornada(report.game.matchday_name) }}</span>
30
- <span class="fecha"> - {{ formatDate(report.game.date_time_utc) }}</span>
31
- </div>
32
- <div class="teams-grid">
33
- <div class="row row-top">
34
- <div class="team team-local">
35
- <span class="escudo-svg">
36
- <img
37
- width="55px"
38
- :src="
39
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
40
- report.game.home_team +
41
- '.png'
42
- "
43
- />
44
- </span>
45
- <span class="team-name">{{ report.game.home_team_acronym }}</span>
46
- </div>
47
- <div class="score">
48
- <span class="score-text">{{ report.game.score[0] }}:{{ report.game.score[1] }}</span>
49
- </div>
50
- <div class="team team-visitor">
51
- <span class="team-name">{{ report.game.visiting_team_acronym }}</span>
52
- <span class="escudo-svg">
53
- <img
54
- width="55px"
55
- :src="
56
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
57
- report.game.visiting_team +
58
- '.png'
59
- "
60
- />
61
- </span>
62
- </div>
63
- </div>
64
- <div class="row row-bottom">
65
- <div class="team-stats">
66
- <span class="stat ball">
67
- <svg
68
- width="19"
69
- height="19"
70
- viewBox="0 0 20 20"
71
- fill="none"
72
- xmlns="http://www.w3.org/2000/svg"
73
- >
74
- <path
75
- fill-rule="evenodd"
76
- clip-rule="evenodd"
77
- d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
78
- stroke="white"
79
- stroke-width="1.36665"
80
- stroke-linecap="round"
81
- stroke-linejoin="round"
82
- />
83
- <path
84
- fill-rule="evenodd"
85
- clip-rule="evenodd"
86
- d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
87
- stroke="white"
88
- stroke-width="1.36665"
89
- stroke-linecap="round"
90
- stroke-linejoin="round"
91
- />
92
- <path
93
- d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
94
- stroke="white"
95
- stroke-width="1.36665"
96
- stroke-linecap="round"
97
- stroke-linejoin="round"
98
- />
99
- <path
100
- d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
101
- stroke="white"
102
- stroke-width="1.36665"
103
- stroke-linecap="round"
104
- stroke-linejoin="round"
105
- />
106
- <path
107
- d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
108
- stroke="white"
109
- stroke-width="1.36665"
110
- stroke-linecap="round"
111
- stroke-linejoin="round"
112
- />
113
- <path
114
- d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
115
- stroke="white"
116
- stroke-width="1.36665"
117
- stroke-linecap="round"
118
- stroke-linejoin="round"
119
- />
120
- <path
121
- d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
122
- stroke="white"
123
- stroke-width="1.36665"
124
- stroke-linecap="round"
125
- stroke-linejoin="round"
126
- />
127
- <path
128
- d="M10.0456 4.54688V6.92693"
129
- stroke="white"
130
- stroke-width="1.36665"
131
- stroke-linecap="round"
132
- stroke-linejoin="round"
133
- />
134
- <path
135
- d="M13.2109 9.32248L15.1681 8.27344"
136
- stroke="white"
137
- stroke-width="1.36665"
138
- stroke-linecap="round"
139
- stroke-linejoin="round"
140
- />
141
- <path
142
- d="M11.9961 12.9609L13.2064 14.3086"
143
- stroke="white"
144
- stroke-width="1.36665"
145
- stroke-linecap="round"
146
- stroke-linejoin="round"
147
- />
148
- <path
149
- d="M8.08198 12.9609L6.87109 14.3099"
150
- stroke="white"
151
- stroke-width="1.36665"
152
- stroke-linecap="round"
153
- stroke-linejoin="round"
154
- />
155
- <path
156
- d="M4.91797 8.27344L6.87609 9.22818"
157
- stroke="white"
158
- stroke-width="1.36665"
159
- stroke-linecap="round"
160
- stroke-linejoin="round"
161
- />
162
- </svg>
163
- </span>
164
- <span
165
- class="stat time"
166
- :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
167
- v-if="homeGoalsMinutes !== null"
168
- >{{ homeGoalsMinutes }}</span
169
- >
170
- <div
171
- class="separator"
172
- :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
173
- ></div>
174
- <span class="stat red">
175
- <svg
176
- width="12"
177
- height="16"
178
- viewBox="0 0 14 18"
179
- fill="none"
180
- xmlns="http://www.w3.org/2000/svg"
181
- >
182
- <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
183
- </svg>
184
- <span class="stat-number">{{ homeRedCardsCount || 0 }}</span>
185
- </span>
186
- <span class="stat yellow">
187
- <svg
188
- width="12"
189
- height="16"
190
- viewBox="0 0 14 18"
191
- fill="none"
192
- xmlns="http://www.w3.org/2000/svg"
193
- >
194
- <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
195
- </svg>
196
- <span class="stat-number">{{ homeYellowCardsCount || 0 }}</span>
197
- </span>
198
- </div>
199
- <div class="empty"></div>
200
- <div class="team-stats">
201
- <span class="stat-number">{{ awayYellowCardsCount || 0 }}</span>
202
- <span class="stat yellow">
203
- <svg
204
- width="12"
205
- height="16"
206
- viewBox="0 0 14 18"
207
- fill="none"
208
- xmlns="http://www.w3.org/2000/svg"
209
- >
210
- <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
211
- </svg>
212
- </span>
213
- <span class="stat-number">{{ awayRedCardsCount || 0 }}</span>
214
- <span class="stat red">
215
- <svg
216
- width="12"
217
- height="16"
218
- viewBox="0 0 14 18"
219
- fill="none"
220
- xmlns="http://www.w3.org/2000/svg"
221
- >
222
- <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
223
- </svg>
224
- </span>
225
- <div
226
- class="separator"
227
- :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
228
- ></div>
229
- <span
230
- class="stat time"
231
- :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
232
- v-if="visitingGoalsMinutes !== null"
233
- >{{ visitingGoalsMinutes }}</span
234
- >
235
- <span class="stat ball">
236
- <svg
237
- width="19"
238
- height="19"
239
- viewBox="0 0 20 20"
240
- fill="none"
241
- xmlns="http://www.w3.org/2000/svg"
242
- >
243
- <path
244
- fill-rule="evenodd"
245
- clip-rule="evenodd"
246
- d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
247
- stroke="white"
248
- stroke-width="1.36665"
249
- stroke-linecap="round"
250
- stroke-linejoin="round"
251
- />
252
- <path
253
- fill-rule="evenodd"
254
- clip-rule="evenodd"
255
- d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
256
- stroke="white"
257
- stroke-width="1.36665"
258
- stroke-linecap="round"
259
- stroke-linejoin="round"
260
- />
261
- <path
262
- d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
263
- stroke="white"
264
- stroke-width="1.36665"
265
- stroke-linecap="round"
266
- stroke-linejoin="round"
267
- />
268
- <path
269
- d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
270
- stroke="white"
271
- stroke-width="1.36665"
272
- stroke-linecap="round"
273
- stroke-linejoin="round"
274
- />
275
- <path
276
- d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
277
- stroke="white"
278
- stroke-width="1.36665"
279
- stroke-linecap="round"
280
- stroke-linejoin="round"
281
- />
282
- <path
283
- d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
284
- stroke="white"
285
- stroke-width="1.36665"
286
- stroke-linecap="round"
287
- stroke-linejoin="round"
288
- />
289
- <path
290
- d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
291
- stroke="white"
292
- stroke-width="1.36665"
293
- stroke-linecap="round"
294
- stroke-linejoin="round"
295
- />
296
- <path
297
- d="M10.0456 4.54688V6.92693"
298
- stroke="white"
299
- stroke-width="1.36665"
300
- stroke-linecap="round"
301
- stroke-linejoin="round"
302
- />
303
- <path
304
- d="M13.2109 9.32248L15.1681 8.27344"
305
- stroke="white"
306
- stroke-width="1.36665"
307
- stroke-linecap="round"
308
- stroke-linejoin="round"
309
- />
310
- <path
311
- d="M11.9961 12.9609L13.2064 14.3086"
312
- stroke="white"
313
- stroke-width="1.36665"
314
- stroke-linecap="round"
315
- stroke-linejoin="round"
316
- />
317
- <path
318
- d="M8.08198 12.9609L6.87109 14.3099"
319
- stroke="white"
320
- stroke-width="1.36665"
321
- stroke-linecap="round"
322
- stroke-linejoin="round"
323
- />
324
- <path
325
- d="M4.91797 8.27344L6.87609 9.22818"
326
- stroke="white"
327
- stroke-width="1.36665"
328
- stroke-linecap="round"
329
- stroke-linejoin="round"
330
- />
331
- </svg>
332
- </span>
333
- </div>
334
- </div>
335
- </div>
336
- </div>
337
- </template>
338
-
339
- <script setup>
340
- import { formatDate } from '../../utils/dateUtils.js'
341
- import { computed } from 'vue'
342
-
343
- function traducirJornada(jornada) {
344
- if (!jornada) return ''
345
- return jornada
346
- .replace('Matchday', 'J')
347
- .replace('de Final', '')
348
- .replace('Playoffs 1', 'CFI')
349
- .replace('Playoffs 2', 'CFV')
350
- .replace('Playoffs 3', 'SI')
351
- .replace('Playoffs 4', 'SV')
352
- .replace('Playoffs 5', 'FI')
353
- .replace('Playoffs 6', 'FV')
354
- }
355
- // Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
356
- const props = defineProps({
357
- report: {
358
- type: Object,
359
- default: () => ({}),
360
- },
361
- })
362
-
363
- // Función computada para extraer y concatenar solo los minutos de los goles
364
- const homeGoalsMinutes = computed(() => {
365
- const goalsArray = props.report?.game?.minutes?.home_goals_minutes
366
-
367
- if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
368
- return null
369
- }
370
-
371
- // Extraer solo los minutos de cada string
372
- const minutes = goalsArray
373
- .map((goal) => {
374
- // Buscar el patrón de minutos al final del string (números seguidos de ')
375
- const match = goal.match(/(\d+)'$/)
376
- return match ? match[1] + "'" : ''
377
- })
378
- .filter((minute) => minute !== '')
379
-
380
- // Si hay más de 5 goles, dividir en 2 renglones
381
- if (minutes.length > 5) {
382
- const firstRow = minutes.slice(0, 5).join(', ')
383
- const secondRow = minutes.slice(5).join(', ')
384
- return `${firstRow}\n${secondRow}`
385
- }
386
-
387
- // Si hay 5 o menos goles, mostrar en un solo renglón
388
- return minutes.join(', ')
389
- })
390
-
391
- // Función computada para extraer y concatenar solo los minutos de los goles del equipo visitante
392
- const visitingGoalsMinutes = computed(() => {
393
- const goalsArray = props.report?.game?.minutes?.visiting_goals_minutes
394
-
395
- if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
396
- return null
397
- }
398
-
399
- // Extraer solo los minutos de cada string
400
- const minutes = goalsArray
401
- .map((goal) => {
402
- // Buscar el patrón de minutos al final del string (números seguidos de ')
403
- const match = goal.match(/(\d+)'$/)
404
- return match ? match[1] + "'" : ''
405
- })
406
- .filter((minute) => minute !== '')
407
-
408
- // Si hay más de 5 goles, dividir en 2 renglones
409
- if (minutes.length > 5) {
410
- const firstRow = minutes.slice(0, 5).join(', ')
411
- const secondRow = minutes.slice(5).join(', ')
412
- return `${firstRow}\n${secondRow}`
413
- }
414
-
415
- // Si hay 5 o menos goles, mostrar en un solo renglón
416
- return minutes.join(', ')
417
- })
418
-
419
- // Funciones computadas para validar y obtener las tarjetas
420
- const homeRedCardsCount = computed(() => {
421
- const redCardsArray = props.report?.game?.minutes?.home_red_cards_minutes
422
- return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
423
- })
424
-
425
- const homeYellowCardsCount = computed(() => {
426
- const yellowCardsArray = props.report?.game?.minutes?.home_yellow_cards_minutes
427
- return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
428
- ? yellowCardsArray.length
429
- : null
430
- })
431
-
432
- const awayYellowCardsCount = computed(() => {
433
- const yellowCardsArray = props.report?.game?.minutes?.away_yellow_cards_minutes
434
- return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
435
- ? yellowCardsArray.length
436
- : null
437
- })
438
-
439
- const awayRedCardsCount = computed(() => {
440
- const redCardsArray = props.report?.game?.minutes?.away_red_cards_minutes
441
- return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
442
- })
443
- </script>
444
-
445
- <style scoped>
446
- .prematch-bg {
447
- width: 100%;
448
- height: 222px;
449
- /* height: 100vh; */
450
- background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
451
- background-size: cover;
452
- background-repeat: no-repeat;
453
- display: flex;
454
- flex-direction: column;
455
- justify-content: center;
456
- align-items: center;
457
- position: relative;
458
- overflow: hidden;
459
- }
460
-
461
- .background-shields {
462
- position: absolute;
463
- top: 0;
464
- left: 0;
465
- width: 100%;
466
- height: 100%;
467
- pointer-events: none;
468
- z-index: 1;
469
- }
470
-
471
- .shield-left {
472
- position: absolute;
473
- left: -80px;
474
- top: 50%;
475
- transform: translateY(-50%);
476
- opacity: 0.09;
477
- }
478
-
479
- .shield-left img {
480
- width: 170px;
481
- object-fit: contain;
482
- }
483
-
484
- .shield-right {
485
- position: absolute;
486
- right: -80px;
487
- top: 50%;
488
- transform: translateY(-50%);
489
- opacity: 0.09;
490
- }
491
-
492
- .shield-right img {
493
- width: 170px;
494
- object-fit: contain;
495
- }
496
-
497
- .header {
498
- padding: 24px 32px;
499
- }
500
-
501
- .logo {
502
- height: 40px;
503
- }
504
-
505
- .main-content {
506
- display: flex;
507
- flex-direction: column;
508
- align-items: center;
509
- /* Elimina el margin-top para centrar verticalmente */
510
- }
511
-
512
- .title {
513
- font-size: 0.8rem;
514
- color: #fff;
515
- margin-top: 13px;
516
- font-family: Poppins-Regular;
517
- position: relative;
518
- z-index: 2;
519
- }
520
-
521
- .highlight {
522
- font-family: Poppins-Bold;
523
- color: #fff;
524
- }
525
-
526
- .subtitle {
527
- font-family: Poppins-Regular;
528
- margin-top: -8px;
529
- font-size: 1.1rem;
530
- color: #e0e0e0;
531
- position: relative;
532
- z-index: 2;
533
- }
534
-
535
- .jornada {
536
- font-family: Poppins-Medium;
537
- color: #fff;
538
- font-size: 0.4rem;
539
- line-height: 2.2;
540
- letter-spacing: 0.2px;
541
- opacity: 0.8;
542
- }
543
-
544
- .fecha {
545
- font-family: Poppins-Regular;
546
- color: #e0e0e0;
547
- opacity: 0.8;
548
- line-height: 2.2;
549
- letter-spacing: 0.2px;
550
- font-size: 0.4rem;
551
- }
552
-
553
- .teams-row {
554
- display: none;
555
- }
556
-
557
- .teams-grid {
558
- display: flex;
559
- flex-direction: column;
560
- align-items: center;
561
- width: 100%;
562
- margin-top: 14px;
563
- position: relative;
564
- z-index: 2;
565
- }
566
- .row {
567
- display: flex;
568
- width: 100%;
569
- gap: 10px;
570
- justify-content: center;
571
- align-items: center;
572
- }
573
- .row-top {
574
- margin-bottom: 0px;
575
- }
576
- .row-bottom {
577
- margin-top: 0;
578
- }
579
- .team {
580
- display: flex;
581
- align-items: center;
582
- gap: 6px;
583
- }
584
- .score {
585
- margin: 0 24px;
586
- }
587
- .team-stats {
588
- width: auto;
589
- display: flex;
590
- align-items: center;
591
- justify-content: center;
592
- gap: 1px;
593
- padding: 0.5px 2px;
594
- border-radius: 2px;
595
- }
596
-
597
- .team-stats .stat.ball svg {
598
- width: 9px !important;
599
- height: 9px !important;
600
- }
601
-
602
- .team-stats .stat.yellow svg,
603
- .team-stats .stat.red svg {
604
- width: 7px !important;
605
- height: 7px !important;
606
- }
607
-
608
- .stat-number,
609
- .stat.time {
610
- font-size: 0.4rem;
611
- margin-left: 0.5px;
612
- font-family: Poppins-Medium;
613
- color: #fff;
614
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
615
- letter-spacing: -0.2px;
616
- font-weight: 600;
617
- }
618
-
619
- .stat.yellow svg rect {
620
- stroke: #ffd600;
621
- filter: drop-shadow(0 1px 2px #bfa60055);
622
- }
623
-
624
- .stat.red svg rect {
625
- stroke: #ff2222;
626
- filter: drop-shadow(0 1px 2px #a8000055);
627
- }
628
-
629
- .empty {
630
- width: 40px;
631
- }
632
-
633
- .team-local-block,
634
- .team-visitor-block {
635
- display: flex;
636
- flex-direction: column;
637
- align-items: center;
638
- }
639
-
640
- .escudo-svg {
641
- display: flex;
642
- justify-content: center;
643
- align-items: center;
644
- width: 55px;
645
- height: 55px;
646
- }
647
-
648
- .team-name {
649
- font-size: 0.8rem;
650
- font-family: Poppins-bold;
651
- font-weight: 700;
652
- color: #fff;
653
- letter-spacing: 2px;
654
- }
655
-
656
- .score {
657
- display: flex;
658
- justify-content: center;
659
- align-items: center;
660
- margin: 0 0px;
661
- }
662
-
663
- .score-text {
664
- font-size: 3rem;
665
- font-family: BebasNeue-Bold;
666
- font-weight: 700;
667
- color: #fff;
668
- margin-top: 5px;
669
- letter-spacing: 1px;
670
- }
671
-
672
- .team-stats {
673
- display: flex;
674
- align-items: center;
675
- margin-top: 4px;
676
- }
677
-
678
- .stat {
679
- display: flex;
680
- align-items: center;
681
- justify-content: center;
682
- font-size: 0.5rem;
683
- color: #fff;
684
- }
685
-
686
- .stat-number {
687
- margin-left: 1px;
688
- font-size: 0.5rem;
689
- font-family: Poppins-Regular;
690
- color: #fff;
691
- }
692
-
693
- .stat.yellow svg {
694
- margin-right: 1px;
695
- }
696
-
697
- .stat.red svg {
698
- margin-right: 1px;
699
- }
700
-
701
- .stat.time {
702
- font-size: 0.5rem;
703
- font-family: Poppins-Regular;
704
- color: #fff;
705
- margin: 0 2px;
706
- white-space: pre-line;
707
- text-align: center;
708
- line-height: 1.2;
709
- }
710
-
711
- .stat.time.two-lines {
712
- margin-top: 12px;
713
- text-align: left;
714
- }
715
-
716
- .team-stats .stat-number {
717
- font-size: 0.5rem;
718
- font-family: Poppins-Regular;
719
- color: #fff;
720
- margin: 0 1px;
721
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
722
- letter-spacing: -0.2px;
723
- font-weight: 600;
724
- }
725
-
726
- .stat.ball svg {
727
- display: block;
728
- }
729
-
730
- .separator {
731
- width: 1px;
732
- height: 12px;
733
- border-right: 1px dotted #fff;
734
- margin: 0 4px 0 4px;
735
- }
736
-
737
- .separator.two-lines {
738
- height: 18px;
739
- margin-top: 10px;
740
- }
741
- </style>
1
+ <template>
2
+ <div class="prematch-bg">
3
+ <!-- Escudos de fondo -->
4
+ <div class="background-shields">
5
+ <div class="shield-left">
6
+ <img
7
+ :src="
8
+ 'https://golstatsimages.blob.core.windows.net/teams-150/' +
9
+ report.game.home_team +
10
+ '.png'
11
+ "
12
+ alt="Escudo local"
13
+ />
14
+ </div>
15
+ <div class="shield-right">
16
+ <img
17
+ :src="
18
+ 'https://golstatsimages.blob.core.windows.net/teams-150/' +
19
+ report.game.visiting_team +
20
+ '.png'
21
+ "
22
+ alt="Escudo visitante"
23
+ />
24
+ </div>
25
+ </div>
26
+
27
+ <div class="title">Análisis <span class="highlight">Postmatch</span></div>
28
+ <div class="subtitle">
29
+ <span class="jornada">{{ traducirJornada(report.game.matchday_name) }}</span>
30
+ <span class="fecha"> - {{ formatDate(report.game.date_time_utc) }}</span>
31
+ </div>
32
+ <div class="teams-grid">
33
+ <div class="row row-top">
34
+ <div class="team team-local">
35
+ <span class="escudo-svg">
36
+ <img
37
+ width="55px"
38
+ :src="
39
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
40
+ report.game.home_team +
41
+ '.png'
42
+ "
43
+ />
44
+ </span>
45
+ <span class="team-name">{{ report.game.home_team_acronym }}</span>
46
+ </div>
47
+ <div class="score">
48
+ <span class="score-text">{{ report.game.score[0] }}:{{ report.game.score[1] }}</span>
49
+ </div>
50
+ <div class="team team-visitor">
51
+ <span class="team-name">{{ report.game.visiting_team_acronym }}</span>
52
+ <span class="escudo-svg">
53
+ <img
54
+ width="55px"
55
+ :src="
56
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
57
+ report.game.visiting_team +
58
+ '.png'
59
+ "
60
+ />
61
+ </span>
62
+ </div>
63
+ </div>
64
+ <div class="row row-bottom">
65
+ <div class="team-stats">
66
+ <span class="stat ball">
67
+ <svg
68
+ width="19"
69
+ height="19"
70
+ viewBox="0 0 20 20"
71
+ fill="none"
72
+ xmlns="http://www.w3.org/2000/svg"
73
+ >
74
+ <path
75
+ fill-rule="evenodd"
76
+ clip-rule="evenodd"
77
+ d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
78
+ stroke="white"
79
+ stroke-width="1.36665"
80
+ stroke-linecap="round"
81
+ stroke-linejoin="round"
82
+ />
83
+ <path
84
+ fill-rule="evenodd"
85
+ clip-rule="evenodd"
86
+ d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
87
+ stroke="white"
88
+ stroke-width="1.36665"
89
+ stroke-linecap="round"
90
+ stroke-linejoin="round"
91
+ />
92
+ <path
93
+ d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
94
+ stroke="white"
95
+ stroke-width="1.36665"
96
+ stroke-linecap="round"
97
+ stroke-linejoin="round"
98
+ />
99
+ <path
100
+ d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
101
+ stroke="white"
102
+ stroke-width="1.36665"
103
+ stroke-linecap="round"
104
+ stroke-linejoin="round"
105
+ />
106
+ <path
107
+ d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
108
+ stroke="white"
109
+ stroke-width="1.36665"
110
+ stroke-linecap="round"
111
+ stroke-linejoin="round"
112
+ />
113
+ <path
114
+ d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
115
+ stroke="white"
116
+ stroke-width="1.36665"
117
+ stroke-linecap="round"
118
+ stroke-linejoin="round"
119
+ />
120
+ <path
121
+ d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
122
+ stroke="white"
123
+ stroke-width="1.36665"
124
+ stroke-linecap="round"
125
+ stroke-linejoin="round"
126
+ />
127
+ <path
128
+ d="M10.0456 4.54688V6.92693"
129
+ stroke="white"
130
+ stroke-width="1.36665"
131
+ stroke-linecap="round"
132
+ stroke-linejoin="round"
133
+ />
134
+ <path
135
+ d="M13.2109 9.32248L15.1681 8.27344"
136
+ stroke="white"
137
+ stroke-width="1.36665"
138
+ stroke-linecap="round"
139
+ stroke-linejoin="round"
140
+ />
141
+ <path
142
+ d="M11.9961 12.9609L13.2064 14.3086"
143
+ stroke="white"
144
+ stroke-width="1.36665"
145
+ stroke-linecap="round"
146
+ stroke-linejoin="round"
147
+ />
148
+ <path
149
+ d="M8.08198 12.9609L6.87109 14.3099"
150
+ stroke="white"
151
+ stroke-width="1.36665"
152
+ stroke-linecap="round"
153
+ stroke-linejoin="round"
154
+ />
155
+ <path
156
+ d="M4.91797 8.27344L6.87609 9.22818"
157
+ stroke="white"
158
+ stroke-width="1.36665"
159
+ stroke-linecap="round"
160
+ stroke-linejoin="round"
161
+ />
162
+ </svg>
163
+ </span>
164
+ <span
165
+ class="stat time"
166
+ :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
167
+ v-if="homeGoalsMinutes !== null"
168
+ >{{ homeGoalsMinutes }}</span
169
+ >
170
+ <div
171
+ class="separator"
172
+ :class="{ 'two-lines': homeGoalsMinutes && homeGoalsMinutes.includes('\n') }"
173
+ ></div>
174
+ <span class="stat red">
175
+ <svg
176
+ width="12"
177
+ height="16"
178
+ viewBox="0 0 14 18"
179
+ fill="none"
180
+ xmlns="http://www.w3.org/2000/svg"
181
+ >
182
+ <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
183
+ </svg>
184
+ <span class="stat-number">{{ homeRedCardsCount || 0 }}</span>
185
+ </span>
186
+ <span class="stat yellow">
187
+ <svg
188
+ width="12"
189
+ height="16"
190
+ viewBox="0 0 14 18"
191
+ fill="none"
192
+ xmlns="http://www.w3.org/2000/svg"
193
+ >
194
+ <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
195
+ </svg>
196
+ <span class="stat-number">{{ homeYellowCardsCount || 0 }}</span>
197
+ </span>
198
+ </div>
199
+ <div class="empty"></div>
200
+ <div class="team-stats">
201
+ <span class="stat-number">{{ awayYellowCardsCount || 0 }}</span>
202
+ <span class="stat yellow">
203
+ <svg
204
+ width="12"
205
+ height="16"
206
+ viewBox="0 0 14 18"
207
+ fill="none"
208
+ xmlns="http://www.w3.org/2000/svg"
209
+ >
210
+ <rect width="14" height="18" rx="2" fill="#FFE066" stroke="#BFA600" />
211
+ </svg>
212
+ </span>
213
+ <span class="stat-number">{{ awayRedCardsCount || 0 }}</span>
214
+ <span class="stat red">
215
+ <svg
216
+ width="12"
217
+ height="16"
218
+ viewBox="0 0 14 18"
219
+ fill="none"
220
+ xmlns="http://www.w3.org/2000/svg"
221
+ >
222
+ <rect width="14" height="18" rx="2" fill="#FF4D4F" stroke="#A80000" />
223
+ </svg>
224
+ </span>
225
+ <div
226
+ class="separator"
227
+ :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
228
+ ></div>
229
+ <span
230
+ class="stat time"
231
+ :class="{ 'two-lines': visitingGoalsMinutes && visitingGoalsMinutes.includes('\n') }"
232
+ v-if="visitingGoalsMinutes !== null"
233
+ >{{ visitingGoalsMinutes }}</span
234
+ >
235
+ <span class="stat ball">
236
+ <svg
237
+ width="19"
238
+ height="19"
239
+ viewBox="0 0 20 20"
240
+ fill="none"
241
+ xmlns="http://www.w3.org/2000/svg"
242
+ >
243
+ <path
244
+ fill-rule="evenodd"
245
+ clip-rule="evenodd"
246
+ d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
247
+ stroke="white"
248
+ stroke-width="1.36665"
249
+ stroke-linecap="round"
250
+ stroke-linejoin="round"
251
+ />
252
+ <path
253
+ fill-rule="evenodd"
254
+ clip-rule="evenodd"
255
+ d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
256
+ stroke="white"
257
+ stroke-width="1.36665"
258
+ stroke-linecap="round"
259
+ stroke-linejoin="round"
260
+ />
261
+ <path
262
+ d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453"
263
+ stroke="white"
264
+ stroke-width="1.36665"
265
+ stroke-linecap="round"
266
+ stroke-linejoin="round"
267
+ />
268
+ <path
269
+ d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871"
270
+ stroke="white"
271
+ stroke-width="1.36665"
272
+ stroke-linecap="round"
273
+ stroke-linejoin="round"
274
+ />
275
+ <path
276
+ d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279"
277
+ stroke="white"
278
+ stroke-width="1.36665"
279
+ stroke-linecap="round"
280
+ stroke-linejoin="round"
281
+ />
282
+ <path
283
+ d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445"
284
+ stroke="white"
285
+ stroke-width="1.36665"
286
+ stroke-linecap="round"
287
+ stroke-linejoin="round"
288
+ />
289
+ <path
290
+ d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766"
291
+ stroke="white"
292
+ stroke-width="1.36665"
293
+ stroke-linecap="round"
294
+ stroke-linejoin="round"
295
+ />
296
+ <path
297
+ d="M10.0456 4.54688V6.92693"
298
+ stroke="white"
299
+ stroke-width="1.36665"
300
+ stroke-linecap="round"
301
+ stroke-linejoin="round"
302
+ />
303
+ <path
304
+ d="M13.2109 9.32248L15.1681 8.27344"
305
+ stroke="white"
306
+ stroke-width="1.36665"
307
+ stroke-linecap="round"
308
+ stroke-linejoin="round"
309
+ />
310
+ <path
311
+ d="M11.9961 12.9609L13.2064 14.3086"
312
+ stroke="white"
313
+ stroke-width="1.36665"
314
+ stroke-linecap="round"
315
+ stroke-linejoin="round"
316
+ />
317
+ <path
318
+ d="M8.08198 12.9609L6.87109 14.3099"
319
+ stroke="white"
320
+ stroke-width="1.36665"
321
+ stroke-linecap="round"
322
+ stroke-linejoin="round"
323
+ />
324
+ <path
325
+ d="M4.91797 8.27344L6.87609 9.22818"
326
+ stroke="white"
327
+ stroke-width="1.36665"
328
+ stroke-linecap="round"
329
+ stroke-linejoin="round"
330
+ />
331
+ </svg>
332
+ </span>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </template>
338
+
339
+ <script setup>
340
+ import { formatDate } from '../../utils/dateUtils.js'
341
+ import { computed } from 'vue'
342
+
343
+ function traducirJornada(jornada) {
344
+ if (!jornada) return ''
345
+ return jornada
346
+ .replace('Matchday', 'J')
347
+ .replace('de Final', '')
348
+ .replace('Playoffs 1', 'CFI')
349
+ .replace('Playoffs 2', 'CFV')
350
+ .replace('Playoffs 3', 'SI')
351
+ .replace('Playoffs 4', 'SV')
352
+ .replace('Playoffs 5', 'FI')
353
+ .replace('Playoffs 6', 'FV')
354
+ }
355
+ // Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
356
+ const props = defineProps({
357
+ report: {
358
+ type: Object,
359
+ default: () => ({}),
360
+ },
361
+ })
362
+
363
+ // Función computada para extraer y concatenar solo los minutos de los goles
364
+ const homeGoalsMinutes = computed(() => {
365
+ const goalsArray = props.report?.game?.minutes?.home_goals_minutes
366
+
367
+ if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
368
+ return null
369
+ }
370
+
371
+ // Extraer solo los minutos de cada string
372
+ const minutes = goalsArray
373
+ .map((goal) => {
374
+ // Buscar el patrón de minutos al final del string (números seguidos de ')
375
+ const match = goal.match(/(\d+)'$/)
376
+ return match ? match[1] + "'" : ''
377
+ })
378
+ .filter((minute) => minute !== '')
379
+
380
+ // Si hay más de 5 goles, dividir en 2 renglones
381
+ if (minutes.length > 5) {
382
+ const firstRow = minutes.slice(0, 5).join(', ')
383
+ const secondRow = minutes.slice(5).join(', ')
384
+ return `${firstRow}\n${secondRow}`
385
+ }
386
+
387
+ // Si hay 5 o menos goles, mostrar en un solo renglón
388
+ return minutes.join(', ')
389
+ })
390
+
391
+ // Función computada para extraer y concatenar solo los minutos de los goles del equipo visitante
392
+ const visitingGoalsMinutes = computed(() => {
393
+ const goalsArray = props.report?.game?.minutes?.visiting_goals_minutes
394
+
395
+ if (!Array.isArray(goalsArray) || goalsArray.length === 0) {
396
+ return null
397
+ }
398
+
399
+ // Extraer solo los minutos de cada string
400
+ const minutes = goalsArray
401
+ .map((goal) => {
402
+ // Buscar el patrón de minutos al final del string (números seguidos de ')
403
+ const match = goal.match(/(\d+)'$/)
404
+ return match ? match[1] + "'" : ''
405
+ })
406
+ .filter((minute) => minute !== '')
407
+
408
+ // Si hay más de 5 goles, dividir en 2 renglones
409
+ if (minutes.length > 5) {
410
+ const firstRow = minutes.slice(0, 5).join(', ')
411
+ const secondRow = minutes.slice(5).join(', ')
412
+ return `${firstRow}\n${secondRow}`
413
+ }
414
+
415
+ // Si hay 5 o menos goles, mostrar en un solo renglón
416
+ return minutes.join(', ')
417
+ })
418
+
419
+ // Funciones computadas para validar y obtener las tarjetas
420
+ const homeRedCardsCount = computed(() => {
421
+ const redCardsArray = props.report?.game?.minutes?.home_red_cards_minutes
422
+ return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
423
+ })
424
+
425
+ const homeYellowCardsCount = computed(() => {
426
+ const yellowCardsArray = props.report?.game?.minutes?.home_yellow_cards_minutes
427
+ return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
428
+ ? yellowCardsArray.length
429
+ : null
430
+ })
431
+
432
+ const awayYellowCardsCount = computed(() => {
433
+ const yellowCardsArray = props.report?.game?.minutes?.away_yellow_cards_minutes
434
+ return Array.isArray(yellowCardsArray) && yellowCardsArray.length > 0
435
+ ? yellowCardsArray.length
436
+ : null
437
+ })
438
+
439
+ const awayRedCardsCount = computed(() => {
440
+ const redCardsArray = props.report?.game?.minutes?.away_red_cards_minutes
441
+ return Array.isArray(redCardsArray) && redCardsArray.length > 0 ? redCardsArray.length : null
442
+ })
443
+ </script>
444
+
445
+ <style scoped>
446
+ .prematch-bg {
447
+ width: 100%;
448
+ height: 222px;
449
+ /* height: 100vh; */
450
+ background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
451
+ background-size: cover;
452
+ background-repeat: no-repeat;
453
+ display: flex;
454
+ flex-direction: column;
455
+ justify-content: center;
456
+ align-items: center;
457
+ position: relative;
458
+ overflow: hidden;
459
+ }
460
+
461
+ .background-shields {
462
+ position: absolute;
463
+ top: 0;
464
+ left: 0;
465
+ width: 100%;
466
+ height: 100%;
467
+ pointer-events: none;
468
+ z-index: 1;
469
+ }
470
+
471
+ .shield-left {
472
+ position: absolute;
473
+ left: -80px;
474
+ top: 50%;
475
+ transform: translateY(-50%);
476
+ opacity: 0.09;
477
+ }
478
+
479
+ .shield-left img {
480
+ width: 170px;
481
+ object-fit: contain;
482
+ }
483
+
484
+ .shield-right {
485
+ position: absolute;
486
+ right: -80px;
487
+ top: 50%;
488
+ transform: translateY(-50%);
489
+ opacity: 0.09;
490
+ }
491
+
492
+ .shield-right img {
493
+ width: 170px;
494
+ object-fit: contain;
495
+ }
496
+
497
+ .header {
498
+ padding: 24px 32px;
499
+ }
500
+
501
+ .logo {
502
+ height: 40px;
503
+ }
504
+
505
+ .main-content {
506
+ display: flex;
507
+ flex-direction: column;
508
+ align-items: center;
509
+ /* Elimina el margin-top para centrar verticalmente */
510
+ }
511
+
512
+ .title {
513
+ font-size: 0.8rem;
514
+ color: #fff;
515
+ margin-top: 13px;
516
+ font-family: Poppins-Regular;
517
+ position: relative;
518
+ z-index: 2;
519
+ }
520
+
521
+ .highlight {
522
+ font-family: Poppins-Bold;
523
+ color: #fff;
524
+ }
525
+
526
+ .subtitle {
527
+ font-family: Poppins-Regular;
528
+ margin-top: -8px;
529
+ font-size: 1.1rem;
530
+ color: #e0e0e0;
531
+ position: relative;
532
+ z-index: 2;
533
+ }
534
+
535
+ .jornada {
536
+ font-family: Poppins-Medium;
537
+ color: #fff;
538
+ font-size: 0.4rem;
539
+ line-height: 2.2;
540
+ letter-spacing: 0.2px;
541
+ opacity: 0.8;
542
+ }
543
+
544
+ .fecha {
545
+ font-family: Poppins-Regular;
546
+ color: #e0e0e0;
547
+ opacity: 0.8;
548
+ line-height: 2.2;
549
+ letter-spacing: 0.2px;
550
+ font-size: 0.4rem;
551
+ }
552
+
553
+ .teams-row {
554
+ display: none;
555
+ }
556
+
557
+ .teams-grid {
558
+ display: flex;
559
+ flex-direction: column;
560
+ align-items: center;
561
+ width: 100%;
562
+ margin-top: 14px;
563
+ position: relative;
564
+ z-index: 2;
565
+ }
566
+ .row {
567
+ display: flex;
568
+ width: 100%;
569
+ gap: 10px;
570
+ justify-content: center;
571
+ align-items: center;
572
+ }
573
+ .row-top {
574
+ margin-bottom: 0px;
575
+ }
576
+ .row-bottom {
577
+ margin-top: 0;
578
+ }
579
+ .team {
580
+ display: flex;
581
+ align-items: center;
582
+ gap: 6px;
583
+ }
584
+ .score {
585
+ margin: 0 24px;
586
+ }
587
+ .team-stats {
588
+ width: auto;
589
+ display: flex;
590
+ align-items: center;
591
+ justify-content: center;
592
+ gap: 1px;
593
+ padding: 0.5px 2px;
594
+ border-radius: 2px;
595
+ }
596
+
597
+ .team-stats .stat.ball svg {
598
+ width: 9px !important;
599
+ height: 9px !important;
600
+ }
601
+
602
+ .team-stats .stat.yellow svg,
603
+ .team-stats .stat.red svg {
604
+ width: 7px !important;
605
+ height: 7px !important;
606
+ }
607
+
608
+ .stat-number,
609
+ .stat.time {
610
+ font-size: 0.4rem;
611
+ margin-left: 0.5px;
612
+ font-family: Poppins-Medium;
613
+ color: #fff;
614
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
615
+ letter-spacing: -0.2px;
616
+ font-weight: 600;
617
+ }
618
+
619
+ .stat.yellow svg rect {
620
+ stroke: #ffd600;
621
+ filter: drop-shadow(0 1px 2px #bfa60055);
622
+ }
623
+
624
+ .stat.red svg rect {
625
+ stroke: #ff2222;
626
+ filter: drop-shadow(0 1px 2px #a8000055);
627
+ }
628
+
629
+ .empty {
630
+ width: 40px;
631
+ }
632
+
633
+ .team-local-block,
634
+ .team-visitor-block {
635
+ display: flex;
636
+ flex-direction: column;
637
+ align-items: center;
638
+ }
639
+
640
+ .escudo-svg {
641
+ display: flex;
642
+ justify-content: center;
643
+ align-items: center;
644
+ width: 55px;
645
+ height: 55px;
646
+ }
647
+
648
+ .team-name {
649
+ font-size: 0.8rem;
650
+ font-family: Poppins-bold;
651
+ font-weight: 700;
652
+ color: #fff;
653
+ letter-spacing: 2px;
654
+ }
655
+
656
+ .score {
657
+ display: flex;
658
+ justify-content: center;
659
+ align-items: center;
660
+ margin: 0 0px;
661
+ }
662
+
663
+ .score-text {
664
+ font-size: 3rem;
665
+ font-family: BebasNeue-Bold;
666
+ font-weight: 700;
667
+ color: #fff;
668
+ margin-top: 5px;
669
+ letter-spacing: 1px;
670
+ }
671
+
672
+ .team-stats {
673
+ display: flex;
674
+ align-items: center;
675
+ margin-top: 4px;
676
+ }
677
+
678
+ .stat {
679
+ display: flex;
680
+ align-items: center;
681
+ justify-content: center;
682
+ font-size: 0.5rem;
683
+ color: #fff;
684
+ }
685
+
686
+ .stat-number {
687
+ margin-left: 1px;
688
+ font-size: 0.5rem;
689
+ font-family: Poppins-Regular;
690
+ color: #fff;
691
+ }
692
+
693
+ .stat.yellow svg {
694
+ margin-right: 1px;
695
+ }
696
+
697
+ .stat.red svg {
698
+ margin-right: 1px;
699
+ }
700
+
701
+ .stat.time {
702
+ font-size: 0.5rem;
703
+ font-family: Poppins-Regular;
704
+ color: #fff;
705
+ margin: 0 2px;
706
+ white-space: pre-line;
707
+ text-align: center;
708
+ line-height: 1.2;
709
+ }
710
+
711
+ .stat.time.two-lines {
712
+ margin-top: 12px;
713
+ text-align: left;
714
+ }
715
+
716
+ .team-stats .stat-number {
717
+ font-size: 0.5rem;
718
+ font-family: Poppins-Regular;
719
+ color: #fff;
720
+ margin: 0 1px;
721
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
722
+ letter-spacing: -0.2px;
723
+ font-weight: 600;
724
+ }
725
+
726
+ .stat.ball svg {
727
+ display: block;
728
+ }
729
+
730
+ .separator {
731
+ width: 1px;
732
+ height: 12px;
733
+ border-right: 1px dotted #fff;
734
+ margin: 0 4px 0 4px;
735
+ }
736
+
737
+ .separator.two-lines {
738
+ height: 18px;
739
+ margin-top: 10px;
740
+ }
741
+ </style>