@mjsz-vbr-elements/shared 2.9.0 → 2.10.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.
@@ -1,14 +1,17 @@
1
+ /* --vbr-widget-typography-font-size-50
2
+ --vbr-widget-typography-font-lineheight-50 */
3
+
1
4
  .mjsz-vbr-gamecenter-timeline {
2
5
  container-name: rows;
3
6
  container-type: inline-size;
4
7
  }
5
8
 
6
- .mjsz-vbr-gamecenter-timeline-game-data {
9
+ .mjsz-vbr-gamecenter-timeline-game-data {
7
10
  margin-bottom: 30px;
8
11
  text-align: center;
9
12
  }
10
13
 
11
- .mjsz-vbr-gamecenter-timeline-game-data .is-teams-and-results {
14
+ .mjsz-vbr-gamecenter-timeline-game-data .is-teams-and-results {
12
15
  display: grid;
13
16
  grid-template-columns: 1fr;
14
17
  justify-items: center;
@@ -17,44 +20,44 @@
17
20
  background-color: var(--vbr-widget-primary-color-0);
18
21
  }
19
22
 
20
- @media all and (min-width: 576px) {
23
+ @media all and (min-width: 576px) {
21
24
 
22
- .mjsz-vbr-gamecenter-timeline-game-data .is-teams-and-results {
25
+ .mjsz-vbr-gamecenter-timeline-game-data .is-teams-and-results {
23
26
  grid-template-columns: repeat(3, 1fr)
24
27
  }
25
28
  }
26
29
 
27
- .mjsz-vbr-gamecenter-timeline-game-data .is-title-container {
30
+ .mjsz-vbr-gamecenter-timeline-game-data .is-title-container {
28
31
  margin-bottom: 30px;
29
32
  }
30
33
 
31
- .mjsz-vbr-gamecenter-timeline-game-data .is-title-container .is-title {
34
+ .mjsz-vbr-gamecenter-timeline-game-data .is-title-container .is-title {
32
35
  color: var(--vbr-widget-gamecenter-title-color);
33
36
  font-size: var(--vbr-widget-gamecenter-title-size);
34
37
  font-weight: var(--vbr-widget-gamecenter-title-weight);
35
38
  text-transform: uppercase;
36
39
  }
37
40
 
38
- .mjsz-vbr-gamecenter-timeline-game-data .is-title-container .is-gamedate {
41
+ .mjsz-vbr-gamecenter-timeline-game-data .is-title-container .is-gamedate {
39
42
  color: var(--vbr-widget-gamecenter-gamedate-color);
40
43
  font-size: var(--vbr-widget-gamecenter-gamedate-size);
41
44
  text-transform: uppercase;
42
45
  }
43
46
 
44
- .mjsz-vbr-gamecenter-timeline-game-data .is-title-container .is-local-gamedate {
47
+ .mjsz-vbr-gamecenter-timeline-game-data .is-title-container .is-local-gamedate {
45
48
  color: var(--vbr-widget-gamecenter-local-gamedate-color);
46
49
  font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
47
50
  text-transform: uppercase;
48
51
  }
49
52
 
50
- .mjsz-vbr-gamecenter-timeline-game-data .is-game-result {
53
+ .mjsz-vbr-gamecenter-timeline-game-data .is-game-result {
51
54
  color: var(--vbr-widget-gamecenter-result-color);
52
55
  font-weight: var(--vbr-widget-gamecenter-result-weight);
53
56
  font-size: var(--vbr-widget-gamecenter-result-size);
54
57
  line-height: var(--vbr-widget-gamecenter-result-size);
55
58
  }
56
59
 
57
- .mjsz-vbr-gamecenter-timeline-game-data .is-team-name {
60
+ .mjsz-vbr-gamecenter-timeline-game-data .is-team-name {
58
61
  display: block;
59
62
  padding: 8px 0;
60
63
  color: var(--vbr-widget-gamecenter-teamname-color);
@@ -62,76 +65,76 @@
62
65
  font-size: var(--vbr-widget-gamecenter-teamname-size);
63
66
  }
64
67
 
65
- .mjsz-vbr-gamecenter-timeline-game-data .is-game-status {
68
+ .mjsz-vbr-gamecenter-timeline-game-data .is-game-status {
66
69
  color: var(--vbr-widget-gamecenter-gamestatus-color);
67
70
  font-size: var(--vbr-widget-gamecenter-gamestatus-size);
68
71
  text-transform: uppercase;
69
72
  }
70
73
 
71
- .mjsz-vbr-gamecenter-timeline-game-data .is-period-results {
74
+ .mjsz-vbr-gamecenter-timeline-game-data .is-period-results {
72
75
  color: var(--vbr-widget-gamecenter-periodresults-color);
73
76
  font-size: var(--vbr-widget-gamecenter-periodresults-size);
74
77
  font-weight: 500;
75
78
  }
76
79
 
77
- .mjsz-vbr-gamecenter-timeline-game-data .is-team-logo {
80
+ .mjsz-vbr-gamecenter-timeline-game-data .is-team-logo {
78
81
  margin: auto;
79
82
  display: block;
80
83
  width: 128px;
81
84
  height: 128px;
82
85
  }
83
86
 
84
- .mjsz-vbr-gamecenter-timeline-game-data .is-game-status-live {
87
+ .mjsz-vbr-gamecenter-timeline-game-data .is-game-status-live {
85
88
  color: var(--vbr-widget-live-game-color);
86
89
  }
87
90
 
88
- .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents {
91
+ .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents {
89
92
  padding: 5px;
90
93
  display: flex;
91
94
  align-items: center;
92
95
  justify-content: center;
93
96
  }
94
97
 
95
- .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents a {
98
+ .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents a {
96
99
  display: flex;
97
100
  align-items: center;
98
101
  font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
99
102
  }
100
103
 
101
- .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents a:after {
104
+ .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents a:after {
102
105
  content: '/';
103
106
  margin: 0 5px;
104
107
  }
105
108
 
106
- .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents a:last-of-type:after {
109
+ .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents a:last-of-type:after {
107
110
  content: '';
108
111
  }
109
112
 
110
- .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents .is-icon {
113
+ .mjsz-vbr-gamecenter-timeline-game-data .is-external-contents .is-icon {
111
114
  margin-right: 5px;
112
115
  display: inline-block;
113
116
  width: 15px;
114
117
  height: 15px;
115
118
  }
116
119
 
117
- .mjsz-vbr-gamecenter-timeline-game-data .is-attendance {
118
- font-size: var(--vbr-widget-typography-text-sm-size);
119
- line-height: var(--vbr-widget-typography-text-lg-lineheight);
120
+ .mjsz-vbr-gamecenter-timeline-game-data .is-attendance {
121
+ font-size: var(--vbr-widget-typography-font-size-400);
122
+ line-height: var(--vbr-widget-typography-font-lineheight-600);
120
123
  color: var(--vbr-widget-primary-color-500);
121
124
  }
122
125
 
123
- .mjsz-vbr-gamecenter-timeline-game-data .is-goal-scorers {
124
- font-size: var(--vbr-widget-typography-text-xs-size);
126
+ .mjsz-vbr-gamecenter-timeline-game-data .is-goal-scorers {
127
+ font-size: var(--vbr-widget-typography-font-size-200);
125
128
  font-weight: 700;
126
- line-height: var(--vbr-widget-typography-text-xs-lineheight);
129
+ line-height: var(--vbr-widget-typography-font-lineheight-200);
127
130
  color: var(--vbr-widget-primary-color-500);
128
131
  }
129
132
 
130
- .mjsz-vbr-gamecenter-timeline-game-data .is-goal-scorers span {
133
+ .mjsz-vbr-gamecenter-timeline-game-data .is-goal-scorers span {
131
134
  font-weight: 400;
132
135
  }
133
136
 
134
- .mjsz-vbr-gamecenter-timeline-score-board {
137
+ .mjsz-vbr-gamecenter-timeline-score-board {
135
138
  /* display: grid; */
136
139
  grid-template-columns: 50px auto auto auto 50px;
137
140
  grid-template-rows: 50px;
@@ -148,47 +151,47 @@
148
151
  z-index: 100;
149
152
  }
150
153
 
151
- .mjsz-vbr-gamecenter-timeline-score-board.is-visible {
154
+ .mjsz-vbr-gamecenter-timeline-score-board.is-visible {
152
155
  display: grid;
153
156
  }
154
157
 
155
- .mjsz-vbr-gamecenter-timeline-score-board .is-score {
156
- font-size: var(--vbr-widget-typography-text-4xl-size);
158
+ .mjsz-vbr-gamecenter-timeline-score-board .is-score {
159
+ font-size: var(--vbr-widget-typography-font-size-950);
157
160
  font-weight: 700;
158
161
  }
159
162
 
160
- .mjsz-vbr-gamecenter-timeline-score-board .is-team {
163
+ .mjsz-vbr-gamecenter-timeline-score-board .is-team {
161
164
  display: none;
162
- font-size: var(--vbr-widget-typography-text-base-size);
165
+ font-size: var(--vbr-widget-typography-font-size-500);
163
166
  font-weight: 700;
164
167
  color: var(--vbr-widget-primary-color-100);
165
168
  }
166
169
 
167
- .mjsz-vbr-gamecenter-timeline-score-board .is-home-team {
170
+ .mjsz-vbr-gamecenter-timeline-score-board .is-home-team {
168
171
  justify-self: end;
169
172
  text-align: right;
170
173
  }
171
174
 
172
- .mjsz-vbr-gamecenter-timeline-score-board .is-away-team {
175
+ .mjsz-vbr-gamecenter-timeline-score-board .is-away-team {
173
176
  justify-self: start;
174
177
  }
175
178
 
176
- .mjsz-vbr-gamecenter-timeline-score-board .is-game-status {
177
- font-size: var(--vbr-widget-typography-text-xs-size);
179
+ .mjsz-vbr-gamecenter-timeline-score-board .is-game-status {
180
+ font-size: var(--vbr-widget-typography-font-size-200);
178
181
  font-weight: 500;
179
182
  text-transform: uppercase;
180
183
  color: var(--vbr-widget-live-game-color);
181
184
  }
182
185
 
183
- .mjsz-vbr-gamecenter-timeline-score-board img {
186
+ .mjsz-vbr-gamecenter-timeline-score-board img {
184
187
  display: block;
185
188
  width: 100%;
186
189
  height: 100%;
187
190
  }
188
191
 
189
- @media all and (min-width: 576px) {
192
+ @media all and (min-width: 576px) {
190
193
 
191
- .mjsz-vbr-gamecenter-timeline-score-board {
194
+ .mjsz-vbr-gamecenter-timeline-score-board {
192
195
  grid-template-columns: 1fr 50px auto auto auto 50px 1fr;
193
196
  }
194
197
 
@@ -197,27 +200,27 @@
197
200
  }
198
201
  }
199
202
 
200
- .mjsz-vbr-gamecenter-timeline .is-heading-1 {
203
+ .mjsz-vbr-gamecenter-timeline .is-heading-1 {
201
204
  margin-block-start: 3rem;
202
205
  margin-block-end: 1rem;
203
- font-size: var(--vbr-widget-typography-text-xl-size);
206
+ font-size: var(--vbr-widget-typography-font-size-700);
204
207
  font-weight: 700;
205
208
  color: var(--vbr-widget-primary-color-800);
206
209
  text-align: center;
207
210
  text-transform: uppercase;
208
211
  }
209
212
 
210
- .mjsz-vbr-gamecenter-timeline .is-heading-2 {
213
+ .mjsz-vbr-gamecenter-timeline .is-heading-2 {
211
214
  margin-block-start: 3rem;
212
215
  margin-block-end: 1rem;
213
- font-size: var(--vbr-widget-typography-text-base-size);
216
+ font-size: var(--vbr-widget-typography-font-size-500);
214
217
  font-weight: 700;
215
218
  color: var(--vbr-widget-primary-color-800);
216
219
  text-align: center;
217
220
  text-transform: uppercase;
218
221
  }
219
222
 
220
- .mjsz-vbr-gamecenter-timeline-tab-buttons {
223
+ .mjsz-vbr-gamecenter-timeline-tab-buttons {
221
224
  display: flex;
222
225
  flex-wrap: wrap;
223
226
  justify-content: center;
@@ -225,26 +228,26 @@
225
228
  margin-block-end: 2rem;
226
229
  }
227
230
 
228
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results {
231
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results {
229
232
  width: 100%;
230
233
  }
231
234
 
232
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results tr:first-of-type {
235
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results tr:first-of-type {
233
236
  border-bottom: 1px solid var(--vbr-widget-primary-color-100);
234
237
  }
235
238
 
236
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results td {
237
- font-size: var(--vbr-widget-typography-text-base-size);
239
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results td {
240
+ font-size: var(--vbr-widget-typography-font-size-500);
238
241
  font-weight: 500;
239
242
  color: var(--vbr-widget-primary-color-700);
240
243
  }
241
244
 
242
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results td:nth-child(2) {
243
- font-size: var(--vbr-widget-typography-text-sm-size);
245
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results td:nth-child(2) {
246
+ font-size: var(--vbr-widget-typography-font-size-400);
244
247
  text-align: left;
245
248
  }
246
249
 
247
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results span {
250
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results span {
248
251
  display: inline-block;
249
252
  width: 9px;
250
253
  height: 9px;
@@ -252,32 +255,32 @@
252
255
  border-radius: 50%;
253
256
  }
254
257
 
255
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results span.is-home-team {
258
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results span.is-home-team {
256
259
  background-color: var(--vbr-widget-gamecenter-home-team-identifier-color);
257
260
  outline: 1px solid var(--vbr-widget-gamecenter-home-team-identifier-border-color);
258
261
  outline-offset: -2px;
259
262
  }
260
263
 
261
- .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results span.is-away-team {
264
+ .mjsz-vbr-gamecenter-timeline .mjsz-vbr-period-results span.is-away-team {
262
265
  background-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
263
266
  outline: 1px solid var(--vbr-widget-gamecenter-away-team-identifier-border-color);
264
267
  outline-offset: -2px;
265
268
  }
266
269
 
267
- .mjsz-vbr-gamecenter-timeline-game-events .is-no-action {
270
+ .mjsz-vbr-gamecenter-timeline-game-events .is-no-action {
268
271
  padding-block: 0.5rem;
269
272
  text-align: center;
270
273
  color: var(--vbr-widget-primary-color-300);
271
274
  }
272
275
 
273
- .mjsz-vbr-gamecenter-timeline-game-events .is-period-header {
276
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header {
274
277
  padding-block: 1rem;
275
278
  display: grid;
276
279
  grid-template-columns: 1fr auto 1fr;
277
280
  grid-template-rows: auto 1fr 1px 1fr;
278
281
  }
279
282
 
280
- .mjsz-vbr-gamecenter-timeline-game-events .is-period-header p {
283
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header p {
281
284
  grid-column: 2;
282
285
  grid-row: 1;
283
286
  justify-self: center;
@@ -285,14 +288,14 @@
285
288
  padding-inline: 0.5rem;
286
289
  width: max-content;
287
290
  color: #fff;
288
- font-size: var(--vbr-widget-typography-text-base-size);
291
+ font-size: var(--vbr-widget-typography-font-size-500);
289
292
  font-weight: 500;
290
- line-height: var(--vbr-widget-typography-text-base-lineheight);
293
+ line-height: var(--vbr-widget-typography-font-lineheight-500);
291
294
  background-color: var(--vbr-widget-primary-color-900);
292
295
  border-radius: 6px;
293
296
  }
294
297
 
295
- .mjsz-vbr-gamecenter-timeline-game-events .is-period-header span {
298
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header span {
296
299
  grid-column: 2;
297
300
  grid-row: 2/-1;
298
301
 
@@ -305,20 +308,20 @@
305
308
  border-radius: 0.5rem;
306
309
  }
307
310
 
308
- .mjsz-vbr-gamecenter-timeline-game-events .is-period-header span svg {
311
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header span svg {
309
312
  display: inline-block;
310
313
  width: 14px;
311
314
  height: 14px;
312
315
  vertical-align: sub;
313
316
  }
314
317
 
315
- .mjsz-vbr-gamecenter-timeline-game-events .is-period-header div {
318
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header div {
316
319
  grid-column: 1/-1;
317
320
  grid-row: 3;
318
321
  background-color: var(--vbr-widget-primary-color-100);
319
322
  }
320
323
 
321
- .mjsz-vbr-gamecenter-timeline-game-event {
324
+ .mjsz-vbr-gamecenter-timeline-game-event {
322
325
  --columns: 0.15fr 2px 0.15fr 1fr;
323
326
  --areas: '. . . .' 'time time time details' '. . . .';
324
327
 
@@ -329,13 +332,13 @@
329
332
  gap: 0.25rem;
330
333
  }
331
334
 
332
- .mjsz-vbr-gamecenter-timeline-game-event .is-timeline {
335
+ .mjsz-vbr-gamecenter-timeline-game-event .is-timeline {
333
336
  grid-column: 2/3;
334
337
  grid-row: 1/-1;
335
338
  background-color: var(--vbr-widget-primary-color-200);
336
339
  }
337
340
 
338
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container {
341
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container {
339
342
  grid-area: details;
340
343
 
341
344
  display: grid;
@@ -350,12 +353,12 @@
350
353
  outline: 1px solid var(--vbr-widget-gamecenter-card-border-color);
351
354
  }
352
355
 
353
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container:not(:has(.is-details-list)) {
356
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container:not(:has(.is-details-list)) {
354
357
  grid-template-areas: 'type-icon detail-title';
355
358
  align-items: center;
356
359
  }
357
360
 
358
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-title {
361
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-title {
359
362
  grid-area: detail-title;
360
363
 
361
364
  font-weight: 700;
@@ -363,29 +366,29 @@
363
366
  color: var(--vbr-widget-gamecenter-card-title-color);
364
367
  }
365
368
 
366
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list {
369
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list {
367
370
  grid-area: detail-list;
368
371
  margin: 0;
369
372
  padding: 0;
370
373
  list-style: none;
371
374
  }
372
375
 
373
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-details-sub-title {
374
- font-size: var(--vbr-widget-typography-text-sm-size);
376
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-details-sub-title {
377
+ font-size: var(--vbr-widget-typography-font-size-400);
375
378
  color: var(--vbr-widget-gamecenter-card-secondary-color);
376
379
  }
377
380
 
378
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-evented-person {
381
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-evented-person {
379
382
  font-weight: var(--vbr-widget-gamecenter-events-evented-person-weight);
380
383
  color: var(--vbr-widget-gamecenter-card-secondary-color);
381
384
  }
382
385
 
383
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-player-number {
386
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-player-number {
384
387
  font-weight: 400;
385
388
  font-style: italic;
386
389
  }
387
390
 
388
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo {
391
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo {
389
392
  grid-area: team-logo;
390
393
 
391
394
  display: none;
@@ -394,110 +397,109 @@
394
397
  align-self: center;
395
398
  }
396
399
 
397
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo img {
400
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo img {
398
401
  width: 40px;
399
402
  height: 40px;
400
403
  }
401
404
 
402
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon {
405
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon {
403
406
  grid-area: type-icon;
404
407
  padding: 0.5rem;
405
408
  border-radius: 100%;
406
409
  }
407
410
 
408
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon svg {
411
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon svg {
409
412
  display: block;
410
413
  width: 14px;
411
414
  height: 14px;
412
415
  }
413
416
 
414
- @container rows (width > 410px) {
417
+ @container rows (width > 410px) {
415
418
 
416
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon svg {
419
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon svg {
417
420
  width: 24px;
418
421
  height: 24px
419
422
  }
420
423
  }
421
424
 
422
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty .is-event-type-icon {
425
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty .is-event-type-icon {
423
426
  color: var(--vbr-widget-primary-color-0);
424
427
  background-color: var(--vbr-widget-danger-color-a400);
425
428
  }
426
429
 
427
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-timeout .is-event-type-icon {
430
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-timeout .is-event-type-icon {
428
431
  color: var(--vbr-widget-primary-color-0);
429
432
  background-color: var(--vbr-widget-gamecenter-events-timeout-bg-color);
430
433
  }
431
434
 
432
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goalies .is-event-type-icon {
435
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goalies .is-event-type-icon {
433
436
  color: var(--vbr-widget-primary-color-900);
434
437
  background-color: var(--vbr-widget-neutral-color);
435
438
  }
436
439
 
437
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty-shot-goal .is-event-type-icon {
440
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty-shot-goal .is-event-type-icon {
438
441
  color: var(--vbr-widget-primary-color-0);
439
442
  background-color: var(--vbr-widget-live-game-color);
440
443
  }
441
444
 
442
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty-shot-no-goal .is-event-type-icon {
445
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty-shot-no-goal .is-event-type-icon {
443
446
  color: var(--vbr-widget-primary-color-400);
444
447
  background-color: var(--vbr-widget-primary-color-100);
445
448
  }
446
449
 
447
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal {
450
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal {
448
451
  background-color: var(--vbr-widget-gamecenter-card-event-goal-bg-color);
449
452
  outline-color: var(--vbr-widget-gamecenter-card-event-goal-border-color);
450
453
  }
451
454
 
452
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-event-type-icon {
455
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-event-type-icon {
453
456
  color: var(--vbr-widget-primary-color-0);
454
457
  background-color: var(--vbr-widget-live-game-color);
455
458
  }
456
459
 
457
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-details-title {
460
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-details-title {
458
461
  color: var(--vbr-widget-primary-color-0);
459
462
  }
460
463
 
461
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-evented-person {
464
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-evented-person {
462
465
  color: var(--vbr-widget-primary-color-100);
463
466
  }
464
467
 
465
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-assists-list {
466
- font-size: var(--vbr-widget-typography-text-sm-size);
468
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-assists-list {
469
+ font-size: var(--vbr-widget-typography-font-size-400);
470
+ /* color: var(--vbr-widget-primary-color-400); */
467
471
  }
468
472
 
469
- /* color: var(--vbr-widget-primary-color-400); */
470
-
471
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-assists-list span:not(:last-of-type):after {
473
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-assists-list span:not(:last-of-type):after {
472
474
  content: '/';
473
475
  margin-inline: 0.25rem;
474
476
  }
475
477
 
476
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data {
478
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data {
477
479
  display: flex;
478
480
  flex-wrap: wrap;
479
481
  gap: 0.25rem;
480
- font-size: var(--vbr-widget-typography-text-xs-size);
482
+ font-size: var(--vbr-widget-typography-font-size-200);
481
483
  color: var(--vbr-widget-gamecenter-card-tertiary-color);
482
484
  }
483
485
 
484
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data ul {
486
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data ul {
485
487
  display: flex;
486
488
  gap: 0.125rem;
487
489
  }
488
490
 
489
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data ul li:not(:last-of-type):after {
491
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data ul li:not(:last-of-type):after {
490
492
  content: ',';
491
493
  }
492
494
 
493
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-badge.is-invert {
495
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-badge.is-invert {
494
496
  color: var(--vbr-widget-danger-color-50);
495
497
  background-color: var(--vbr-widget-danger-color-500);
496
498
  }
497
499
 
498
- @container rows (width > 410px) {
500
+ @container rows (width > 410px) {
499
501
 
500
- .mjsz-vbr-gamecenter-timeline-game-event .is-details-container {
502
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container {
501
503
  grid-template-columns: auto 1fr auto;
502
504
  grid-template-areas: 'type-icon detail-title team-logo' 'type-icon detail-list team-logo'
503
505
  }
@@ -512,32 +514,32 @@
512
514
  }
513
515
  }
514
516
 
515
- .mjsz-vbr-gamecenter-timeline-game-event .is-timestamp {
517
+ .mjsz-vbr-gamecenter-timeline-game-event .is-timestamp {
516
518
  grid-area: time;
517
519
 
518
520
  justify-self: center;
519
521
  align-self: center;
520
522
  }
521
523
 
522
- .mjsz-vbr-gamecenter-timeline-game-event .is-timestamp p {
524
+ .mjsz-vbr-gamecenter-timeline-game-event .is-timestamp p {
523
525
  margin: 0;
524
526
  padding-inline: 0.5rem;
525
527
  width: max-content;
526
528
  color: #fff;
527
- font-size: var(--vbr-widget-typography-text-base-size);
529
+ font-size: var(--vbr-widget-typography-font-size-500);
528
530
  font-weight: 500;
529
- line-height: var(--vbr-widget-typography-text-base-lineheight);
531
+ line-height: var(--vbr-widget-typography-font-lineheight-500);
530
532
  background-color: var(--vbr-widget-primary-color-900);
531
533
  border-radius: 6px;
532
534
  }
533
535
 
534
- .mjsz-vbr-gamecenter-timeline-game-event[data-team='away'] .is-details-container {
536
+ .mjsz-vbr-gamecenter-timeline-game-event[data-team='away'] .is-details-container {
535
537
  border-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
536
538
  }
537
539
 
538
- @container rows (width > 500px) {
540
+ @container rows (width > 500px) {
539
541
 
540
- .mjsz-vbr-gamecenter-timeline-game-event {
542
+ .mjsz-vbr-gamecenter-timeline-game-event {
541
543
  --columns: 1fr 0.15fr 2px 0.15fr 1fr;
542
544
  --areas: '. . . . .' 'details time time time .' '. . . . .'
543
545
  }
@@ -576,71 +578,71 @@
576
578
  }
577
579
  }
578
580
 
579
- .mjsz-vbr-gamecenter-timeline-lineups {
581
+ .mjsz-vbr-gamecenter-timeline-lineups {
580
582
  margin-block-start: 1rem;
581
583
  padding-block-end: 2rem;
582
584
  }
583
585
 
584
- .mjsz-vbr-gamecenter-timeline-lineups hr {
586
+ .mjsz-vbr-gamecenter-timeline-lineups hr {
585
587
  margin-block: 1.5rem;
586
588
  border-top: 1px solid var(--vbr-widget-primary-color-100);
587
589
  }
588
590
 
589
- .mjsz-vbr-gamecenter-timeline-lineups .is-container {
591
+ .mjsz-vbr-gamecenter-timeline-lineups .is-container {
590
592
  display: grid;
591
593
  gap: 2rem;
592
594
  }
593
595
 
594
- @container rows (width >= 768px) {
596
+ @container rows (width >= 768px) {
595
597
 
596
- .mjsz-vbr-gamecenter-timeline-lineups .is-container {
598
+ .mjsz-vbr-gamecenter-timeline-lineups .is-container {
597
599
  grid-template-columns: 1fr 1fr
598
600
  }
599
601
  }
600
602
 
601
- .mjsz-vbr-gamecenter-timeline-lineups-lines {
603
+ .mjsz-vbr-gamecenter-timeline-lineups-lines {
602
604
  display: grid;
603
605
  grid-template-columns: 1fr;
604
606
  grid-template-areas: 'ld' 'rd' 'lw' 'c' 'rw';
605
607
  gap: 0.5rem;
606
608
  }
607
609
 
608
- .mjsz-vbr-gamecenter-timeline-lineups-lines.is-away-team {
610
+ .mjsz-vbr-gamecenter-timeline-lineups-lines.is-away-team {
609
611
  grid-template-areas: 'ld' 'rd' 'lw' 'c' 'rw';
610
612
  }
611
613
 
612
- .mjsz-vbr-gamecenter-timeline-lineups-lines .is-ld {
614
+ .mjsz-vbr-gamecenter-timeline-lineups-lines .is-ld {
613
615
  grid-area: ld;
614
616
  }
615
617
 
616
- .mjsz-vbr-gamecenter-timeline-lineups-lines .is-rd {
618
+ .mjsz-vbr-gamecenter-timeline-lineups-lines .is-rd {
617
619
  grid-area: rd;
618
620
  }
619
621
 
620
- .mjsz-vbr-gamecenter-timeline-lineups-lines .is-lw {
622
+ .mjsz-vbr-gamecenter-timeline-lineups-lines .is-lw {
621
623
  grid-area: lw;
622
624
  }
623
625
 
624
- .mjsz-vbr-gamecenter-timeline-lineups-lines .is-c {
626
+ .mjsz-vbr-gamecenter-timeline-lineups-lines .is-c {
625
627
  grid-area: c;
626
628
  }
627
629
 
628
- .mjsz-vbr-gamecenter-timeline-lineups-lines .is-rw {
630
+ .mjsz-vbr-gamecenter-timeline-lineups-lines .is-rw {
629
631
  grid-area: rw;
630
632
  }
631
633
 
632
- .mjsz-vbr-gamecenter-timeline-lineups-lines .is-gk {
634
+ .mjsz-vbr-gamecenter-timeline-lineups-lines .is-gk {
633
635
  width: 100%;
634
636
  }
635
637
 
636
- .mjsz-vbr-gamecenter-timeline-lineups-lines.is-away-team .is-player-wrapper {
638
+ .mjsz-vbr-gamecenter-timeline-lineups-lines.is-away-team .is-player-wrapper {
637
639
  border-inline-start: none;
638
640
  border-inline-end: 3px solid var(--vbr-widget-gamecenter-away-team-identifier-color);
639
641
  }
640
642
 
641
- @container rows (width >= 768px) {
643
+ @container rows (width >= 768px) {
642
644
 
643
- .mjsz-vbr-gamecenter-timeline-lineups-lines {
645
+ .mjsz-vbr-gamecenter-timeline-lineups-lines {
644
646
  grid-template-columns: 1fr 1fr;
645
647
  grid-template-areas: '. lw' 'ld lw' 'ld c' 'rd c' 'rd rw' '. rw';
646
648
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr
@@ -662,33 +664,33 @@
662
664
  }
663
665
  }
664
666
 
665
- .mjsz-vbr-gamecenter-timeline-lineups-lines-simple {
667
+ .mjsz-vbr-gamecenter-timeline-lineups-lines-simple {
666
668
  display: grid;
667
669
  grid-template-columns: 1fr;
668
670
  gap: 0.5rem;
669
671
  }
670
672
 
671
- @container rows (width >= 768px) {
673
+ @container rows (width >= 768px) {
672
674
 
673
- .mjsz-vbr-gamecenter-timeline-lineups-lines-simple {
675
+ .mjsz-vbr-gamecenter-timeline-lineups-lines-simple {
674
676
  grid-template-columns: 1fr 1fr
675
677
  }
676
678
  }
677
679
 
678
- .mjsz-vbr-gamecenter-timeline-lineups-lines-referees {
680
+ .mjsz-vbr-gamecenter-timeline-lineups-lines-referees {
679
681
  display: grid;
680
682
  grid-template-columns: 1fr;
681
683
  gap: 0.5rem;
682
684
  }
683
685
 
684
- @container rows (width >= 768px) {
686
+ @container rows (width >= 768px) {
685
687
 
686
- .mjsz-vbr-gamecenter-timeline-lineups-lines-referees {
688
+ .mjsz-vbr-gamecenter-timeline-lineups-lines-referees {
687
689
  grid-template-columns: 1fr 1fr 1fr 1fr
688
690
  }
689
691
  }
690
692
 
691
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container {
693
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container {
692
694
  display: grid;
693
695
  grid-template-columns: 40px 1fr;
694
696
  grid-template-areas: 'img name' 'img role';
@@ -700,43 +702,43 @@
700
702
  border-radius: 0.5rem;
701
703
  }
702
704
 
703
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container.is-home-team {
705
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container.is-home-team {
704
706
  border-inline-start: 3px solid var(--vbr-widget-gamecenter-home-team-identifier-color);
705
707
  }
706
708
 
707
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container.is-away-team {
709
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container.is-away-team {
708
710
  border-inline-end: 3px solid var(--vbr-widget-gamecenter-away-team-identifier-color);
709
711
  }
710
712
 
711
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(1) {
713
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(1) {
712
714
  grid-area: img;
713
715
  }
714
716
 
715
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(2) {
717
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(2) {
716
718
  grid-area: name;
717
719
 
718
720
  font-weight: 600;
719
721
  color: var(--vbr-widget-primary-color-700);
720
722
  }
721
723
 
722
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(3) {
724
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(3) {
723
725
  grid-area: role;
724
726
 
725
727
  align-self: center;
726
- font-size: var(--vbr-widget-typography-text-xs-size);
728
+ font-size: var(--vbr-widget-typography-font-size-200);
727
729
  line-height: 1;
728
730
  color: var(--vbr-widget-gamecenter-card-tertiary-color);
729
731
  text-transform: uppercase;
730
732
  }
731
733
 
732
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container img {
734
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container img {
733
735
  display: block;
734
736
  width: 40px;
735
737
  height: 40px;
736
738
  border-radius: 50%;
737
739
  }
738
740
 
739
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper {
741
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper {
740
742
  display: grid;
741
743
  grid-template-columns: 40px auto 1fr;
742
744
  grid-template-areas: 'img number name' 'img position name';
@@ -749,21 +751,21 @@
749
751
  overflow: hidden;
750
752
  }
751
753
 
752
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li {
753
- line-height: var(--vbr-widget-typography-text-xs-lineheight);
754
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li {
755
+ line-height: var(--vbr-widget-typography-font-lineheight-200);
754
756
  }
755
757
 
756
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(1) {
758
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(1) {
757
759
  grid-area: img;
758
760
  }
759
761
 
760
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(2) {
762
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(2) {
761
763
  grid-area: number;
762
764
  font-style: italic;
763
765
  color: var(--vbr-widget-primary-color-500);
764
766
  }
765
767
 
766
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) {
768
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) {
767
769
  grid-area: name;
768
770
  font-weight: 600;
769
771
  color: var(--vbr-widget-primary-color-700);
@@ -775,13 +777,13 @@
775
777
  -webkit-box-orient: vertical;
776
778
  }
777
779
 
778
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) ul {
780
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) ul {
779
781
  display: inline-flex;
780
782
  gap: 0.125rem;
781
783
  vertical-align: middle;
782
784
  }
783
785
 
784
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) svg {
786
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) svg {
785
787
  display: inline-block;
786
788
  padding: 0.2rem;
787
789
  width: 12px;
@@ -791,59 +793,59 @@
791
793
  border-radius: 100%;
792
794
  }
793
795
 
794
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(4) {
796
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(4) {
795
797
  grid-area: position;
796
798
  align-self: center;
797
- font-size: var(--vbr-widget-typography-text-xs-size);
799
+ font-size: var(--vbr-widget-typography-font-size-200);
798
800
  line-height: 1;
799
801
  color: var(--vbr-widget-gamecenter-card-tertiary-color);
800
802
  text-transform: uppercase;
801
803
  }
802
804
 
803
- .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper img {
805
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper img {
804
806
  display: block;
805
807
  width: 40px;
806
808
  height: 40px;
807
809
  border-radius: 50%;
808
810
  }
809
811
 
810
- .mjsz-vbr-gamecenter-timeline-team-stats .is-stat-container {
812
+ .mjsz-vbr-gamecenter-timeline-team-stats .is-stat-container {
811
813
  display: grid;
812
814
  gap: 1rem;
813
815
  margin-inline: auto;
814
816
  width: min(100%, 700px);
815
817
  }
816
818
 
817
- .mjsz-vbr-gamecenter-timeline-game-officials .is-game-officials-container {
819
+ .mjsz-vbr-gamecenter-timeline-game-officials .is-game-officials-container {
818
820
  display: flex;
819
821
  flex-direction: column;
820
822
  gap: 1rem;
821
823
  }
822
824
 
823
- .mjsz-vbr-gamecenter-timeline-game-officials .is-game-officials-container > div {
825
+ .mjsz-vbr-gamecenter-timeline-game-officials .is-game-officials-container > div {
824
826
  flex: 1;
825
827
  }
826
828
 
827
- @container rows (width >= 768px) {
829
+ @container rows (width >= 768px) {
828
830
 
829
- .mjsz-vbr-gamecenter-timeline-game-officials .is-game-officials-container {
831
+ .mjsz-vbr-gamecenter-timeline-game-officials .is-game-officials-container {
830
832
  flex-direction: row
831
833
  }
832
834
  }
833
835
 
834
- .mjsz-vbr-gamecenter-timeline-data-table {
836
+ .mjsz-vbr-gamecenter-timeline-data-table {
835
837
  margin-block-end: 1rem;
836
838
  min-width: 0;
837
839
  }
838
840
 
839
- .mjsz-vbr-gamecenter-timeline-data-table h2 {
841
+ .mjsz-vbr-gamecenter-timeline-data-table h2 {
840
842
  padding: 8px;
841
843
  font-size: var(--vbr-widget-gamecenter-team-container-title-size);
842
844
  font-weight: 700;
843
845
  color: var(--vbr-widget-gamecenter-team-container-title-color);
844
846
  }
845
847
 
846
- .mjsz-vbr-gamecenter-timeline-data-table h2:before {
848
+ .mjsz-vbr-gamecenter-timeline-data-table h2:before {
847
849
  display: inline-block;
848
850
  content: '';
849
851
  width: 0;
@@ -854,14 +856,14 @@
854
856
  margin-block-end: 1px;
855
857
  }
856
858
 
857
- .mjsz-vbr-gamecenter-timeline-data-table.is-home-team h2:before {
859
+ .mjsz-vbr-gamecenter-timeline-data-table.is-home-team h2:before {
858
860
  width: 8px;
859
861
  background-color: var(--vbr-widget-gamecenter-home-team-identifier-color);
860
862
  outline: 1px solid var(--vbr-widget-gamecenter-home-team-identifier-border-color);
861
863
  outline-offset: -1px;
862
864
  }
863
865
 
864
- .mjsz-vbr-gamecenter-timeline-data-table.is-away-team h2:before {
866
+ .mjsz-vbr-gamecenter-timeline-data-table.is-away-team h2:before {
865
867
  width: 8px;
866
868
  background-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
867
869
  outline: 1px solid var(--vbr-widget-gamecenter-away-team-identifier-border-color);