@times-components/ts-components 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24 → 1.146.2-e5795a0ef59e2adb61ba52aeb7332fda4405cb7a.4

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 (73) hide show
  1. package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.d.ts +10 -0
  2. package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.js +69 -0
  3. package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.d.ts +12 -0
  4. package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.js +90 -0
  5. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.d.ts +12 -0
  6. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.js +10 -0
  7. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.js +24 -0
  8. package/dist/components/opta/football/opta-match-stats/matchday-live/__tests__/MobileWidget.test.js +57 -0
  9. package/dist/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.d.ts +2 -0
  10. package/dist/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.js +48 -0
  11. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.d.ts +1 -0
  12. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.js +19 -0
  13. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.d.ts +12 -0
  14. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.js +67 -0
  15. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.d.ts +6 -0
  16. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.js +736 -0
  17. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/NavigationWrapper.test.d.ts +1 -0
  18. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/NavigationWrapper.test.js +33 -0
  19. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/WidgetContainer.test.d.ts +1 -0
  20. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/WidgetContainer.test.js +36 -0
  21. package/dist/components/opta/football/opta-match-stats/shared/styles.js +8 -1
  22. package/dist/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.js +2 -2
  23. package/dist/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.stories.js +1 -1
  24. package/dist/components/opta/football/opta-match-stats/summary/WidgetContainer.js +19 -5
  25. package/dist/index.d.ts +1 -1
  26. package/dist/index.js +2 -2
  27. package/package.json +3 -3
  28. package/rnw.js +1 -1
  29. package/src/components/opta/football/opta-match-stats/commentary/__tests__/__snapshots__/OptaMatchStatsCommentary.test.tsx.snap +1 -1
  30. package/src/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.tsx +108 -0
  31. package/src/components/opta/football/opta-match-stats/matchday-live/MobileWidget.tsx +158 -0
  32. package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.tsx +38 -0
  33. package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.tsx +23 -0
  34. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/MobileWidget.test.tsx +69 -0
  35. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.tsx +61 -0
  36. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/__snapshots__/OptaMatchStatsMatchdayLive.test.tsx.snap +61 -0
  37. package/src/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.tsx +19 -0
  38. package/src/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.tsx +81 -0
  39. package/src/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.tsx +767 -0
  40. package/src/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/NavigationWrapper.test.tsx +67 -0
  41. package/src/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/WidgetContainer.test.tsx +64 -0
  42. package/src/components/opta/football/opta-match-stats/shared/styles.ts +8 -0
  43. package/src/components/opta/football/opta-match-stats/stats-graphs/__tests__/__snapshots__/OptaMatchStatsGraphs.test.tsx.snap +1 -1
  44. package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.stories.tsx +1 -1
  45. package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.tsx +1 -1
  46. package/src/components/opta/football/opta-match-stats/summary/WidgetContainer.tsx +18 -4
  47. package/src/components/opta/football/opta-match-stats/summary/__tests__/__snapshots__/OptaMatchStatsSummary.test.tsx.snap +1 -1
  48. package/src/index.ts +3 -1
  49. package/dist/components/travel-mini-cta/__tests__/index.test.js +0 -262
  50. package/dist/components/travel-mini-cta/index.d.ts +0 -10
  51. package/dist/components/travel-mini-cta/index.js +0 -93
  52. package/dist/components/travel-mini-cta/styles.d.ts +0 -42
  53. package/dist/components/travel-mini-cta/styles.js +0 -268
  54. package/dist/components/travel-mini-cta/travel-mini-cta.stories.js +0 -8
  55. package/dist/components/travel-mini-cta/types.d.ts +0 -10
  56. package/dist/components/travel-mini-cta/types.js +0 -2
  57. package/dist/utils/applyDarkMode.d.ts +0 -1
  58. package/dist/utils/applyDarkMode.js +0 -12
  59. package/dist/utils/getMediaQuery.d.ts +0 -11
  60. package/dist/utils/getMediaQuery.js +0 -19
  61. package/dist/utils/index.d.ts +0 -2
  62. package/dist/utils/index.js +0 -3
  63. package/src/components/travel-mini-cta/__tests__/__snapshots__/index.test.tsx.snap +0 -211
  64. package/src/components/travel-mini-cta/__tests__/index.test.tsx +0 -330
  65. package/src/components/travel-mini-cta/index.tsx +0 -190
  66. package/src/components/travel-mini-cta/styles.ts +0 -331
  67. package/src/components/travel-mini-cta/travel-mini-cta.stories.tsx +0 -23
  68. package/src/components/travel-mini-cta/types.ts +0 -10
  69. package/src/utils/applyDarkMode.ts +0 -12
  70. package/src/utils/getMediaQuery.ts +0 -25
  71. package/src/utils/index.ts +0 -2
  72. /package/dist/components/{travel-mini-cta/travel-mini-cta.stories.d.ts → opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.d.ts} +0 -0
  73. /package/dist/components/{travel-mini-cta/__tests__/index.test.d.ts → opta/football/opta-match-stats/matchday-live/__tests__/MobileWidget.test.d.ts} +0 -0
@@ -0,0 +1,736 @@
1
+ import styled from 'styled-components';
2
+ import { colours, fonts } from '@times-components/ts-styleguide';
3
+ import { backgroundColor, darkBackgroundColor, darkTextColor, borderColor, textColor, maxMDBreakpoint, darkBorderColor } from '../../shared/styles';
4
+ export const WidgetContainer = styled.div `
5
+ ${props => props.isApp &&
6
+ `
7
+ @media(prefers-color-scheme: dark) {
8
+ background-color: ${darkBackgroundColor} !important;
9
+ color: ${darkTextColor} !important;
10
+ }
11
+ `} .Opta-Cf.Opta-js-main {
12
+ ${props => props.isApp &&
13
+ `
14
+ @media(prefers-color-scheme: dark) {
15
+ background-color: ${darkBackgroundColor};
16
+ }
17
+ `};
18
+ }
19
+
20
+ .Opta > .Opta_W {
21
+ margin-top: 0px !important;
22
+ margin-bottom: 0px !important;
23
+ }
24
+
25
+ .Opta-Cf {
26
+ display: flex;
27
+ flex-direction: column;
28
+
29
+ ${props => props.isApp &&
30
+ `
31
+ @media(prefers-color-scheme: dark) {
32
+ background-color: ${darkBackgroundColor} !important;
33
+ color: ${darkTextColor} !important;
34
+ }
35
+ `};
36
+ }
37
+
38
+ .Opta-Score,
39
+ .Opta-Divider {
40
+ display: none !important;
41
+ }
42
+
43
+ // Move match data to top
44
+ .Opta-Matchdata {
45
+ order: -1;
46
+ margin-top: 8px !important;
47
+ margin-bottom: 0px !important;
48
+ border-top: 1px solid ${borderColor};
49
+ border-bottom: 1px solid ${borderColor};
50
+ background-color: ${backgroundColor} !important;
51
+
52
+ dd,
53
+ dt {
54
+ font-family: Roboto, sans-serif;
55
+ font-weight: 400;
56
+ line-height: 150%;
57
+ color: #333;
58
+ }
59
+
60
+ ${props => props.isApp &&
61
+ `
62
+ @media(prefers-color-scheme: dark) {
63
+ background-color: ${darkBackgroundColor} !important;
64
+ border-top: 1px solid ${darkBorderColor};
65
+ border-bottom: 1px solid ${darkBorderColor};
66
+ dd, dt {
67
+ color: ${darkTextColor};
68
+ }
69
+ }
70
+ `};
71
+ }
72
+
73
+ .Opta-MatchHeader {
74
+ margin-bottom: 0;
75
+ tr {
76
+ display: flex;
77
+ gap: 20px;
78
+ align-items: center;
79
+ padding: 16px;
80
+ }
81
+
82
+ .Opta-Team {
83
+ font-family: Roboto, sans-serif;
84
+ font-weight: 700;
85
+ font-size: 20px;
86
+ line-height: 150%;
87
+ color: ${textColor};
88
+ display: flex;
89
+ align-items: center;
90
+ ${props => props.isApp &&
91
+ `
92
+ @media(prefers-color-scheme: dark) {
93
+ color: ${darkTextColor};
94
+ }
95
+ `};
96
+
97
+ &.Opta-Home {
98
+ order: 2;
99
+ }
100
+
101
+ &.Opta-Away {
102
+ order: 5;
103
+ }
104
+ }
105
+
106
+ .Opta-Crest {
107
+ display: contents;
108
+
109
+ .Opta-Image-Team img {
110
+ height: 48px;
111
+ width: 48px;
112
+ }
113
+
114
+ .Opta-TeamFormation {
115
+ font-family: Roboto, sans-serif;
116
+ font-weight: 400;
117
+ font-size: 14px;
118
+ line-height: 150%;
119
+ letter-spacing: 0.08px;
120
+ color: ${textColor};
121
+ ${props => props.isApp &&
122
+ `
123
+ @media(prefers-color-scheme: dark) {
124
+ color: ${darkTextColor};
125
+ }
126
+ `};
127
+ }
128
+
129
+ &:first-of-type {
130
+ .Opta-Image-Team {
131
+ order: 1;
132
+ }
133
+ .Opta-TeamFormation {
134
+ order: 3;
135
+ margin: 0;
136
+ margin-right: auto;
137
+ }
138
+ }
139
+
140
+ &:last-of-type {
141
+ .Opta-Image-Team {
142
+ order: 6;
143
+ }
144
+ .Opta-TeamFormation {
145
+ order: 4;
146
+ margin: 0;
147
+ margin-left: auto;
148
+ }
149
+ }
150
+ }
151
+ }
152
+
153
+ .Opta-FootballPitch {
154
+ margin-inline: 16px;
155
+ margin-bottom: 16px;
156
+ border-radius: 8px;
157
+ background: none !important;
158
+ background-image: repeating-linear-gradient(
159
+ 90deg,
160
+ #d4e3db 0,
161
+ #d4e3db 28px,
162
+ #e5f0ea 28px,
163
+ #e5f0ea 56px
164
+ ) !important;
165
+ background-size: 56px 100% !important;
166
+
167
+ circle {
168
+ stroke: none !important;
169
+ &.Opta-Home {
170
+ fill: ${props => props.homeTeamColor.light} !important;
171
+ }
172
+ &.Opta-Away {
173
+ fill: ${props => props.awayTeamColor.light} !important;
174
+ }
175
+ }
176
+
177
+ .Opta-JerseyNumber {
178
+ font-family: ${fonts.headline};
179
+ font-weight: 800;
180
+ font-size: 16px;
181
+ line-height: 112.99999%;
182
+ transform: translateY(-1px);
183
+ }
184
+
185
+ .Opta-PlayerName {
186
+ fill: ${textColor} !important;
187
+ filter: none;
188
+ font-family: Roboto, sans-serif;
189
+ font-weight: 600;
190
+ font-size: 13px;
191
+ line-height: 100%;
192
+ }
193
+ }
194
+
195
+ .Opta-Subs-Wrap {
196
+ border-top: 1px solid ${borderColor};
197
+ ${props => props.isApp &&
198
+ `
199
+ @media(prefers-color-scheme: dark) {
200
+ border-top: 1px solid ${darkBorderColor};
201
+ }
202
+ `};
203
+ thead {
204
+ th {
205
+ background-color: ${backgroundColor} !important;
206
+ color: ${textColor};
207
+ font-family: Roboto, sans-serif;
208
+ font-weight: 500;
209
+ font-size: 18px;
210
+ line-height: 112.999%;
211
+ padding-block: 32px;
212
+ ${props => props.isApp &&
213
+ `
214
+ @media(prefers-color-scheme: dark) {
215
+ background-color: ${darkBackgroundColor} !important;
216
+ color: ${darkTextColor};
217
+ }
218
+ `};
219
+ }
220
+ }
221
+
222
+ .Opta-FootballPitch-Subplayers {
223
+ margin: 0;
224
+ tr {
225
+ display: flex;
226
+ justify-content: center;
227
+ }
228
+ td {
229
+ display: flex;
230
+ flex-direction: column;
231
+ height: auto;
232
+
233
+ .Opta-Sub {
234
+ display: flex;
235
+ align-items: center;
236
+
237
+ &.Opta-Home {
238
+ span.Opta-Circle {
239
+ border: 2px solid ${props => props.homeTeamColor.light};
240
+ color: ${props => props.homeTeamColor.light};
241
+ }
242
+ }
243
+
244
+ &.Opta-Away {
245
+ span.Opta-Circle {
246
+ border: 2px solid ${props => props.awayTeamColor.light};
247
+ color: ${props => props.awayTeamColor.light} !important;
248
+ }
249
+ }
250
+
251
+ ${props => props.isApp &&
252
+ `
253
+ @media(prefers-color-scheme: dark) {
254
+ &.Opta-Home {
255
+ span.Opta-Circle {
256
+ border: 2px solid ${props.homeTeamColor.dark};
257
+ color: ${props.homeTeamColor.dark};
258
+ }
259
+ }
260
+
261
+ &.Opta-Away {
262
+ span.Opta-Circle {
263
+ border: 2px solid ${props.awayTeamColor.dark};
264
+ color: ${props.awayTeamColor.dark} !important;
265
+ }
266
+ }
267
+ }
268
+ `};
269
+
270
+ &.Opta-Unused {
271
+ opacity: 1;
272
+ }
273
+
274
+ span.Opta-Circle {
275
+ background-color: ${backgroundColor};
276
+ font-family: ${fonts.headline};
277
+ font-weight: 800;
278
+ font-size: 16px;
279
+ line-height: 112.99999%;
280
+ margin-bottom: 0;
281
+ min-width: 32px;
282
+ margin-right: 12px;
283
+
284
+ ${props => props.isApp &&
285
+ `
286
+ @media(prefers-color-scheme: dark) {
287
+ background-color: ${darkBackgroundColor};
288
+ }
289
+ `};
290
+
291
+ & + span.Opta-PlayerName {
292
+ padding-right: 4px;
293
+ width: max-content;
294
+ font-size: 14px !important;
295
+ white-space: nowrap;
296
+
297
+ & + span.Opta-PlayerName {
298
+ width: max-content;
299
+ font-size: 14px !important;
300
+ }
301
+ }
302
+ }
303
+
304
+ span.Opta-PlayerName {
305
+ font-family: Roboto, sans-serif;
306
+ font-weight: 500;
307
+ font-size: 14px !important;
308
+ line-height: 100%;
309
+ }
310
+
311
+ span.Opta-MatcheventsIcons {
312
+ display: flex;
313
+ gap: 4px;
314
+ margin-top: 0;
315
+ }
316
+ }
317
+ }
318
+ }
319
+ }
320
+
321
+ .Opta-Overlayer {
322
+ background-color: rgb(229 240 234 / 50%);
323
+ backdrop-filter: blur(10px);
324
+ -webkit-backdrop-filter: blur(10px);
325
+ }
326
+
327
+ .Opta-Overlay {
328
+ border-radius: 8px;
329
+ overflow: hidden;
330
+ border: 1px solid #696969 !important;
331
+ .Opta-Cf {
332
+ ul {
333
+ background-color: #e5f0ea;
334
+ margin: 0 !important;
335
+ padding: 16px;
336
+ display: flex !important;
337
+ flex-direction: column;
338
+ align-items: center;
339
+ text-align: center;
340
+
341
+ .Opta-Circle {
342
+ font-family: ${fonts.headline} !important;
343
+ font-weight: 800 !important;
344
+ font-size: 20px !important;
345
+ line-height: 112.99999% !important;
346
+ color: ${colours.functional.white};
347
+ height: 48px !important;
348
+ width: 48px !important;
349
+ display: flex !important;
350
+ align-items: center;
351
+ justify-content: center;
352
+ margin-bottom: 16px !important;
353
+ &.Opta-Home {
354
+ background-color: ${props => props.homeTeamColor.light} !important;
355
+ }
356
+
357
+ &.Opta-Away {
358
+ background-color: ${props => props.awayTeamColor.light} !important;
359
+ }
360
+
361
+ & + li {
362
+ color: ${textColor};
363
+ font-family: Roboto, sans-serif;
364
+ font-weight: 600;
365
+ font-size: 20px;
366
+ line-height: 100%;
367
+ margin-bottom: 16px;
368
+
369
+ & + li {
370
+ color: ${textColor} !important;
371
+ font-family: Roboto, sans-serif;
372
+ font-weight: 500;
373
+ font-size: 16px;
374
+ margin-bottom: 8px;
375
+ }
376
+ }
377
+ }
378
+
379
+ .Opta-MatchEvent {
380
+ display: flex;
381
+ align-items: center;
382
+
383
+ .Opta-Icon {
384
+ &.Opta-IconGoal {
385
+ margin-top: 2px;
386
+ }
387
+ &.Opta-IconOff,
388
+ &.Opta-IconOn {
389
+ margin-top: 6px;
390
+ }
391
+ }
392
+
393
+ span {
394
+ color: ${textColor} !important;
395
+ font-family: Roboto, sans-serif !important;
396
+ font-weight: 400 !important;
397
+ font-size: 16px !important;
398
+ }
399
+ }
400
+ }
401
+ }
402
+
403
+ .Opta-Flex {
404
+ display: grid;
405
+ grid-template-rows: 1fr;
406
+ padding-inline: 32px;
407
+ padding-block: 32px;
408
+ padding-bottom: 16px;
409
+ ${props => props.isApp &&
410
+ `
411
+ @media(prefers-color-scheme: dark) {
412
+ background-color: ${darkBackgroundColor} !important;
413
+ color: ${darkTextColor} !important;
414
+ }
415
+ `};
416
+ }
417
+
418
+ .Opta-Flex-Group {
419
+ display: grid;
420
+ grid-template-columns: repeat(3, 1fr);
421
+ gap: 16px;
422
+ }
423
+
424
+ .Opta-Flex-Item {
425
+ display: flex !important;
426
+ width: 100% !important;
427
+ height: 100% !important;
428
+ padding: 0 !important;
429
+ padding-bottom: 16px !important;
430
+ }
431
+
432
+ .Opta-Stat {
433
+ flex-grow: 1 !important;
434
+ background-color: #e5f0ea !important;
435
+ border-radius: 8px;
436
+ padding-block: 16px;
437
+ padding-inline: 8px;
438
+ margin: 0 !important;
439
+ .Opta-Value {
440
+ color: ${textColor} !important;
441
+ font-family: ${fonts.headline} !important;
442
+ font-weight: 800;
443
+ font-size: 28px;
444
+ line-height: 112.999%;
445
+ padding-bottom: 4px;
446
+ }
447
+ .Opta-Label {
448
+ color: ${textColor} !important;
449
+ font-family: Roboto, sans-serif !important;
450
+ font-weight: 500;
451
+ font-size: 16px;
452
+ line-height: 112.999%;
453
+ }
454
+ }
455
+
456
+ .Opta-Close {
457
+ background: none !important;
458
+ top: 16px !important;
459
+ right: 16px !important;
460
+ position: relative;
461
+ &::before {
462
+ position: absolute;
463
+ top: 0;
464
+ left: 0;
465
+ right: 0;
466
+ bottom: 0;
467
+ display: flex;
468
+ justify-content: center;
469
+ align-items: center;
470
+ content: '\\00D7';
471
+ font-size: 32px;
472
+ color: ${textColor};
473
+ }
474
+ }
475
+ }
476
+
477
+ // Mobile styles
478
+ @media (max-width: ${maxMDBreakpoint}px) {
479
+ // General Styles
480
+ .Opta-Cf {
481
+ display: flex;
482
+ flex-direction: column;
483
+ ${props => props.isApp &&
484
+ `
485
+ @media(prefers-color-scheme: dark) {
486
+ background-color: ${darkBackgroundColor} !important;
487
+ color: ${darkTextColor} !important;
488
+ }
489
+ `};
490
+
491
+ // Formations
492
+ .Opta-MatchHeader {
493
+ order: 1;
494
+ border-top: 1px solid ${borderColor};
495
+ border-bottom: 1px solid ${borderColor};
496
+ ${props => props.isApp &&
497
+ `
498
+ @media(prefers-color-scheme: dark) {
499
+ border-top: 1px solid ${darkBorderColor};
500
+ border-bottom: 1px solid ${darkBorderColor};
501
+ }
502
+ `};
503
+
504
+ tr {
505
+ justify-content: center;
506
+ }
507
+
508
+ .Opta-Team {
509
+ // Hide team name
510
+ font-size: 0;
511
+ padding: 0;
512
+ }
513
+
514
+ .Opta-TeamFormation {
515
+ font-family: Roboto, sans-serif;
516
+ font-weight: 700;
517
+ font-size: 16px;
518
+ line-height: 150%;
519
+
520
+ &::before {
521
+ content: 'Formation: ';
522
+ font-size: 16px;
523
+ font-family: Roboto, sans-serif;
524
+ font-weight: 400;
525
+ line-height: 150%;
526
+ }
527
+
528
+ ${props => props.isApp &&
529
+ `
530
+ @media(prefers-color-scheme: dark) {
531
+ color: ${darkTextColor};
532
+ &::before {
533
+ color: ${darkTextColor};
534
+ }
535
+ }
536
+ `};
537
+ }
538
+ }
539
+
540
+ // Pitch
541
+ .Opta-FootballPitch {
542
+ order: 2;
543
+ margin: 0;
544
+ border-radius: 0;
545
+ background: none !important;
546
+ background-image: repeating-linear-gradient(
547
+ 0deg,
548
+ #d4e3db 0,
549
+ #d4e3db 56px,
550
+ #e5f0ea 56px,
551
+ #e5f0ea 112px
552
+ ) !important;
553
+
554
+ // Resize player elements
555
+ .Opta-PlayerNumber {
556
+ circle {
557
+ stroke: #ffffff !important;
558
+ stroke-width: 3px !important;
559
+ r: 26px !important;
560
+ border: 2px solid ${colours.functional.white} !important;
561
+ -webkit-tap-highlight-color: transparent;
562
+ }
563
+ .Opta-JerseyNumber {
564
+ font-size: 24px;
565
+ -webkit-tap-highlight-color: transparent;
566
+ }
567
+ }
568
+ .Opta-PlayerName {
569
+ font-size: 18px;
570
+ transform: translateY(14px);
571
+ & + .Opta-PlayerName {
572
+ transform: translateY(20px);
573
+ & + .Opta-Icon {
574
+ transform: translateY(30px);
575
+ }
576
+ }
577
+ }
578
+ .Opta-Icon {
579
+ transform: translateY(20px);
580
+ }
581
+ }
582
+
583
+ // Referee
584
+ .Opta-Matchdata {
585
+ order: 3;
586
+ margin: 0 !important;
587
+ padding: 16px !important;
588
+ border-bottom: none !important;
589
+ dt {
590
+ font-family: Roboto, sans-serif;
591
+ font-weight: 400;
592
+ font-size: 16px;
593
+ line-height: 150%;
594
+ }
595
+ dd {
596
+ font-family: Roboto, sans-serif;
597
+ font-weight: 700;
598
+ font-size: 16px;
599
+ line-height: 150%;
600
+ }
601
+
602
+ ${props => props.isApp &&
603
+ `
604
+ @media(prefers-color-scheme: dark) {
605
+ background-color: ${darkBackgroundColor} !important;
606
+ dt, dd {
607
+ color: ${darkTextColor};
608
+ }
609
+ }
610
+ `};
611
+ }
612
+
613
+ // Substitutions
614
+ .Opta-Subs-Wrap {
615
+ order: 4;
616
+ thead {
617
+ th {
618
+ font-family: ${fonts.headline};
619
+ font-size: 24px;
620
+ font-weight: 800;
621
+ padding-block: 40px;
622
+ display: flex;
623
+ justify-content: center;
624
+ align-items: center;
625
+ ${props => props.isApp &&
626
+ `
627
+ @media(prefers-color-scheme: dark) {
628
+ color: ${darkTextColor};
629
+ background-color: ${darkBackgroundColor} !important;
630
+ }
631
+ `};
632
+ }
633
+ }
634
+ tbody {
635
+ tr {
636
+ justify-content: flex-start;
637
+
638
+ td {
639
+ padding: 0;
640
+ }
641
+
642
+ .Opta-Sub {
643
+ display: flex;
644
+ flex-direction: row;
645
+ align-items: center;
646
+ margin-top: 0;
647
+ margin-left: 16px;
648
+ margin-bottom: 16px;
649
+
650
+ .Opta-Circle {
651
+ aspect-ratio: 1 / 1;
652
+ height: 30px !important;
653
+ width: 30px !important;
654
+ font-size: 16px !important;
655
+ display: flex;
656
+ justify-content: center;
657
+ align-items: center;
658
+ margin-right: 8px;
659
+ border-width: 1px !important;
660
+ padding-top: 3px;
661
+ -webkit-tap-highlight-color: transparent;
662
+ }
663
+
664
+ .Opta-PlayerName {
665
+ padding-right: 4px !important;
666
+ white-space: nowrap;
667
+ font-size: 16px !important;
668
+ }
669
+
670
+ .Opta-MatcheventsIcons {
671
+ margin-top: 0;
672
+ }
673
+ }
674
+ }
675
+ }
676
+ }
677
+ }
678
+
679
+ .Opta-Overlay {
680
+ .Opta-Circle {
681
+ padding-top: 3px;
682
+ }
683
+ }
684
+
685
+ // Need to override specific styles due to higher specificity in mobile view
686
+ .Opta-Subs-Wrap
687
+ .Opta-FootballPitch-Subplayers
688
+ td
689
+ .Opta-Sub
690
+ span.Opta-Circle {
691
+ color: ${textColor} !important;
692
+ border-color: ${textColor} !important;
693
+ ${props => props.isApp &&
694
+ `
695
+ @media(prefers-color-scheme: dark) {
696
+ color: ${darkTextColor} !important;
697
+ border-color: ${darkTextColor} !important;
698
+ }
699
+ `};
700
+ }
701
+ .Opta-Subs-Wrap
702
+ .Opta-FootballPitch-Subplayers
703
+ td
704
+ .Opta-Sub.Opta-Away
705
+ span.Opta-Circle {
706
+ color: ${textColor} !important;
707
+ border-color: ${textColor} !important;
708
+ ${props => props.isApp &&
709
+ `
710
+ @media(prefers-color-scheme: dark) {
711
+ color: ${darkTextColor} !important;
712
+ border-color: ${darkTextColor} !important;
713
+ }
714
+ `};
715
+ }
716
+
717
+ // Home team styles
718
+ &.home-widget-container {
719
+ .Opta-MatchHeader {
720
+ .Opta-Away {
721
+ display: none;
722
+ }
723
+ }
724
+ }
725
+
726
+ // Away team styles
727
+ &.away-widget-container {
728
+ .Opta-MatchHeader {
729
+ .Opta-Home {
730
+ display: none;
731
+ }
732
+ }
733
+ }
734
+ }
735
+ `;
736
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiV2lkZ2V0Q29udGFpbmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9vcHRhLW1hdGNoLXN0YXRzL21hdGNoZGF5LWxpdmUvc3R5bGVzL1dpZGdldENvbnRhaW5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDdkMsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUVqRSxPQUFPLEVBQ0wsZUFBZSxFQUNmLG1CQUFtQixFQUNuQixhQUFhLEVBQ2IsV0FBVyxFQUNYLFNBQVMsRUFDVCxlQUFlLEVBQ2YsZUFBZSxFQUNoQixNQUFNLHFCQUFxQixDQUFDO0FBRTdCLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUl2QztJQUNFLEtBQUssQ0FBQyxFQUFFLENBQ1IsS0FBSyxDQUFDLEtBQUs7SUFDWDs7MEJBRXNCLG1CQUFtQjtlQUM5QixhQUFhOztHQUV6QjtNQUNHLEtBQUssQ0FBQyxFQUFFLENBQ1IsS0FBSyxDQUFDLEtBQUs7SUFDWDs7MEJBRW9CLG1CQUFtQjs7R0FFMUM7Ozs7Ozs7Ozs7OztNQVlHLEtBQUssQ0FBQyxFQUFFLENBQ1IsS0FBSyxDQUFDLEtBQUs7SUFDWDs7NEJBRXNCLG1CQUFtQjtpQkFDOUIsYUFBYTs7R0FFM0I7Ozs7Ozs7Ozs7Ozs7NEJBYXlCLFdBQVc7K0JBQ1IsV0FBVzt3QkFDbEIsZUFBZTs7Ozs7Ozs7OztNQVVqQyxLQUFLLENBQUMsRUFBRSxDQUNSLEtBQUssQ0FBQyxLQUFLO0lBQ1g7OzRCQUVzQixtQkFBbUI7Z0NBQ2YsZUFBZTttQ0FDWixlQUFlOzttQkFFL0IsYUFBYTs7O0tBRzNCOzs7Ozs7Ozs7Ozs7Ozs7OztlQWlCVSxTQUFTOzs7UUFHaEIsS0FBSyxDQUFDLEVBQUUsQ0FDUixLQUFL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