@mjsz-vbr-elements/shared 2.9.1 → 2.11.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,53 +1,56 @@
1
+ /* --vbr-widget-typography-font-size-50
2
+ --vbr-widget-typography-font-lineheight-50 */
3
+
1
4
  .mjsz-vbr-gamecenter-game-data {
2
5
  margin-bottom: 30px;
3
6
  text-align: center;
4
7
  }
5
8
 
6
- .mjsz-vbr-gamecenter-game-data .is-teams-and-results {
9
+ .mjsz-vbr-gamecenter-game-data .is-teams-and-results {
7
10
  display: grid;
8
11
  grid-template-columns: 1fr;
9
12
  justify-items: center;
10
13
  align-items: flex-end;
11
14
  }
12
15
 
13
- @media all and (min-width: 576px) {
16
+ @media all and (min-width: 576px) {
14
17
 
15
- .mjsz-vbr-gamecenter-game-data .is-teams-and-results {
18
+ .mjsz-vbr-gamecenter-game-data .is-teams-and-results {
16
19
  grid-template-columns: repeat(3, 1fr)
17
20
  }
18
21
  }
19
22
 
20
- .mjsz-vbr-gamecenter-game-data .is-title-container {
23
+ .mjsz-vbr-gamecenter-game-data .is-title-container {
21
24
  margin-bottom: 30px;
22
25
  }
23
26
 
24
- .mjsz-vbr-gamecenter-game-data .is-title {
27
+ .mjsz-vbr-gamecenter-game-data .is-title {
25
28
  color: var(--vbr-widget-gamecenter-title-color);
26
29
  font-size: var(--vbr-widget-gamecenter-title-size);
27
30
  font-weight: var(--vbr-widget-gamecenter-title-weight);
28
31
  text-transform: uppercase;
29
32
  }
30
33
 
31
- .mjsz-vbr-gamecenter-game-data .is-gamedate {
34
+ .mjsz-vbr-gamecenter-game-data .is-gamedate {
32
35
  color: var(--vbr-widget-gamecenter-gamedate-color);
33
36
  font-size: var(--vbr-widget-gamecenter-gamedate-size);
34
37
  text-transform: uppercase;
35
38
  }
36
39
 
37
- .mjsz-vbr-gamecenter-game-data .is-local-gamedate {
40
+ .mjsz-vbr-gamecenter-game-data .is-local-gamedate {
38
41
  color: var(--vbr-widget-gamecenter-local-gamedate-color);
39
42
  font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
40
43
  text-transform: uppercase;
41
44
  }
42
45
 
43
- .mjsz-vbr-gamecenter-game-data .is-game-result {
46
+ .mjsz-vbr-gamecenter-game-data .is-game-result {
44
47
  color: var(--vbr-widget-gamecenter-result-color);
45
48
  font-weight: var(--vbr-widget-gamecenter-result-weight);
46
49
  font-size: var(--vbr-widget-gamecenter-result-size);
47
50
  line-height: var(--vbr-widget-gamecenter-result-size);
48
51
  }
49
52
 
50
- .mjsz-vbr-gamecenter-game-data .is-team-name {
53
+ .mjsz-vbr-gamecenter-game-data .is-team-name {
51
54
  display: block;
52
55
  padding: 8px 0;
53
56
  color: var(--vbr-widget-gamecenter-teamname-color);
@@ -55,71 +58,75 @@
55
58
  font-size: var(--vbr-widget-gamecenter-teamname-size);
56
59
  }
57
60
 
58
- .mjsz-vbr-gamecenter-game-data .is-game-status {
61
+ .mjsz-vbr-gamecenter-game-data .is-game-status {
59
62
  color: var(--vbr-widget-gamecenter-gamestatus-color);
60
63
  font-size: var(--vbr-widget-gamecenter-gamestatus-size);
61
64
  text-transform: uppercase;
62
65
  }
63
66
 
64
- .mjsz-vbr-gamecenter-game-data .is-period-results {
67
+ .mjsz-vbr-gamecenter-game-data .is-period-results {
65
68
  color: var(--vbr-widget-gamecenter-periodresults-color);
66
69
  font-size: var(--vbr-widget-gamecenter-periodresults-size);
67
70
  font-weight: 500;
68
71
  }
69
72
 
70
- .mjsz-vbr-gamecenter-game-data .is-team-logo {
73
+ .mjsz-vbr-gamecenter-game-data .is-team-logo {
71
74
  margin: auto;
72
75
  display: block;
73
76
  width: 128px;
74
77
  height: 128px;
75
78
  }
76
79
 
77
- .mjsz-vbr-gamecenter-game-data .is-game-status-live {
80
+ .mjsz-vbr-gamecenter-game-data .is-game-status-live {
78
81
  color: var(--vbr-widget-live-game-color);
79
82
  }
80
83
 
81
- .mjsz-vbr-gamecenter-game-data .is-external-contents {
84
+ .mjsz-vbr-gamecenter-game-data .is-external-contents {
82
85
  padding: 5px;
83
86
  display: flex;
84
87
  align-items: center;
85
88
  justify-content: center;
86
89
  }
87
90
 
88
- .mjsz-vbr-gamecenter-game-data .is-external-contents a {
91
+ .mjsz-vbr-gamecenter-game-data .is-external-contents a {
89
92
  display: flex;
90
93
  align-items: center;
91
94
  font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
92
95
  }
93
96
 
94
- .mjsz-vbr-gamecenter-game-data .is-external-contents a:after {
97
+ .mjsz-vbr-gamecenter-game-data .is-external-contents a:after {
95
98
  content: '/';
96
99
  margin: 0 5px;
97
100
  }
98
101
 
99
- .mjsz-vbr-gamecenter-game-data .is-external-contents a:last-of-type:after {
102
+ .mjsz-vbr-gamecenter-game-data .is-external-contents a:last-of-type:after {
100
103
  content: '';
101
104
  }
102
105
 
103
- .mjsz-vbr-gamecenter-game-data .is-external-contents .is-icon {
106
+ .mjsz-vbr-gamecenter-game-data .is-external-contents .is-icon {
104
107
  margin-right: 5px;
105
108
  display: inline-block;
106
109
  width: 15px;
107
110
  height: 15px;
108
111
  }
109
- .mjsz-vbr-gamecenter-game-stats {
112
+
113
+ .mjsz-vbr-gamecenter-game-stats {
110
114
  margin-bottom: 20px;
111
115
  }
112
- .mjsz-vbr-gamecenter-game-stats [data-placement] {
116
+
117
+ .mjsz-vbr-gamecenter-game-stats [data-placement] {
113
118
  z-index: 1000;
114
119
  }
115
- .mjsz-vbr-gamecenter-game-stats .is-popover-content {
120
+
121
+ .mjsz-vbr-gamecenter-game-stats .is-popover-content {
116
122
  display: flex;
117
123
  flex-direction: column;
118
124
  gap: 20px;
119
125
  padding: 16px;
120
126
  background-color: var(--vbr-widget-primary-color-50);
121
127
  }
122
- .mjsz-vbr-gamecenter-game-stats-container-wrapper {
128
+
129
+ .mjsz-vbr-gamecenter-game-stats-container-wrapper {
123
130
  --columns: 1fr;
124
131
 
125
132
  display: grid;
@@ -130,38 +137,48 @@
130
137
  background-color: var(--vbr-widget-gamecenter-stats-bg-color);
131
138
  border: 1px solid var(--vbr-widget-gamecenter-stats-border-color);
132
139
  }
133
- @media all and (min-width: 768px) {
134
- .mjsz-vbr-gamecenter-game-stats-container-wrapper {
140
+
141
+ @media all and (min-width: 768px) {
142
+
143
+ .mjsz-vbr-gamecenter-game-stats-container-wrapper {
135
144
  --columns: repeat(2, 1fr)
136
145
  }
137
146
  }
138
- @media all and (min-width: 992px) {
139
- .mjsz-vbr-gamecenter-game-stats-container-wrapper {
147
+
148
+ @media all and (min-width: 992px) {
149
+
150
+ .mjsz-vbr-gamecenter-game-stats-container-wrapper {
140
151
  --columns: repeat(3, 1fr)
141
152
  }
142
153
  }
143
- .mjsz-vbr-gamecenter-game-stats-container {
154
+
155
+ .mjsz-vbr-gamecenter-game-stats-container {
144
156
  text-align: center;
145
157
  }
146
- .mjsz-vbr-gamecenter-game-stats-container dt {
158
+
159
+ .mjsz-vbr-gamecenter-game-stats-container dt {
147
160
  font-size: var(--vbr-widget-gamecenter-stats-title-size);
148
161
  color: var(--vbr-widget-gamecenter-stats-title-color);
149
162
  text-transform: uppercase;
150
163
  }
151
- .mjsz-vbr-gamecenter-game-stats-container dt button {
164
+
165
+ .mjsz-vbr-gamecenter-game-stats-container dt button {
152
166
  width: var(--vbr-widget-gamecenter-stats-title-size);
153
167
  }
154
- .mjsz-vbr-gamecenter-game-stats-container dd {
168
+
169
+ .mjsz-vbr-gamecenter-game-stats-container dd {
155
170
  font-size: var(--vbr-widget-gamecenter-stats-size);
156
171
  color: var(--vbr-widget-gamecenter-stats-color);
157
172
  }
158
- .mjsz-vbr-gamecenter-game-events {
173
+
174
+ .mjsz-vbr-gamecenter-game-events {
159
175
  container-name: rows;
160
176
  container-type: inline-size;
161
177
  margin-bottom: 20px;
162
178
  border: 1px solid var(--vbr-widget-gamecenter-stats-border-color);
163
179
  }
164
- .mjsz-vbr-gamecenter-game-events .is-period-header {
180
+
181
+ .mjsz-vbr-gamecenter-game-events .is-period-header {
165
182
  padding: 10px 20px;
166
183
  font-size: var(--vbr-widget-gamecenter-period-header-size);
167
184
  font-weight: var(--vbr-widget-gamecenter-period-header-weight);
@@ -170,136 +187,159 @@
170
187
  color: var(--vbr-widget-gamecenter-period-header-color);
171
188
  background-color: var(--vbr-widget-gamecenter-period-header-bg-color);
172
189
  }
173
- .mjsz-vbr-gamecenter-game-events .is-no-action {
190
+
191
+ .mjsz-vbr-gamecenter-game-events .is-no-action {
174
192
  padding: 10px;
175
193
  text-align: center;
176
194
  }
177
- .mjsz-vbr-gamecenter-game-event {
195
+
196
+ .mjsz-vbr-gamecenter-game-event {
178
197
  --cols: 1fr 1fr 1fr 1fr 1fr 1fr 6fr;
179
198
  display: grid;
180
199
  grid-template-columns: var(--cols);
181
200
  align-items: center;
182
201
  }
183
- @container rows (max-width: 500px) {
184
- .mjsz-vbr-gamecenter-game-event {
185
- --cols: 1fr 1fr 1fr 1fr 1fr 1fr
186
- }
187
202
 
188
- .mjsz-vbr-gamecenter-game-event > *:last-of-type {
189
- grid-column: 2/7;
190
- }
191
- }
192
- .mjsz-vbr-gamecenter-game-event:nth-child(odd) {
203
+ .mjsz-vbr-gamecenter-game-event:nth-child(odd) {
193
204
  background-color: var(--vbr-widget-table-stripped-bg-color);
194
205
  }
195
- .mjsz-vbr-gamecenter-game-event > * {
206
+
207
+ .mjsz-vbr-gamecenter-game-event > * {
196
208
  padding: 10px;
197
209
  }
198
- .mjsz-vbr-gamecenter-game-event .is-team-logo-cell span {
210
+
211
+ .mjsz-vbr-gamecenter-game-event .is-team-logo-cell span {
199
212
  display: inline-block;
200
213
  }
201
- .mjsz-vbr-gamecenter-game-event .is-team-logo-cell img {
214
+
215
+ .mjsz-vbr-gamecenter-game-event .is-team-logo-cell img {
202
216
  display: block;
203
217
  width: 40px;
204
218
  height: 40px;
205
219
  }
206
- .mjsz-vbr-gamecenter-game-event .is-icon-cell svg {
220
+
221
+ .mjsz-vbr-gamecenter-game-event .is-icon-cell svg {
207
222
  width: 25px;
208
223
  height: 25px;
209
224
  }
210
- .mjsz-vbr-gamecenter-game-event .is-penalty-icon {
225
+
226
+ .mjsz-vbr-gamecenter-game-event .is-penalty-icon {
211
227
  color: var(--vbr-widget-primary-color-300);
212
228
  }
213
- .mjsz-vbr-gamecenter-game-event .is-goal-so-icon {
229
+
230
+ .mjsz-vbr-gamecenter-game-event .is-goal-so-icon {
214
231
  color: var(--vbr-widget-primary-color-500);
215
232
  }
216
- .mjsz-vbr-gamecenter-game-event .is-goal-icon {
233
+
234
+ .mjsz-vbr-gamecenter-game-event .is-goal-icon {
217
235
  color: var(--vbr-widget-danger-color-a400);
218
236
  }
219
- .mjsz-vbr-gamecenter-game-event .is-timer-icon {
237
+
238
+ .mjsz-vbr-gamecenter-game-event .is-timer-icon {
220
239
  color: var(--vbr-widget-secondary-color-500);
221
240
  }
222
- .mjsz-vbr-gamecenter-game-event .is-goalie-in-icon {
241
+
242
+ .mjsz-vbr-gamecenter-game-event .is-goalie-in-icon {
223
243
  color: var(--vbr-widget-secondary-color-500);
224
244
  }
225
- .mjsz-vbr-gamecenter-game-event .is-goalie-out-icon {
245
+
246
+ .mjsz-vbr-gamecenter-game-event .is-goalie-out-icon {
226
247
  color: var(--vbr-widget-danger-color-a400);
227
248
  }
228
- .mjsz-vbr-gamecenter-game-event .is-time-cell {
249
+
250
+ .mjsz-vbr-gamecenter-game-event .is-time-cell {
229
251
  font-weight: 700;
230
252
  }
231
- .mjsz-vbr-gamecenter-game-event .is-penalty-cell {
253
+
254
+ .mjsz-vbr-gamecenter-game-event .is-penalty-cell {
232
255
  font-size: var(--vbr-widget-gamecenter-events-penalty-size);
233
256
  text-align: center;
234
257
  }
235
- .mjsz-vbr-gamecenter-game-event .is-score {
258
+
259
+ .mjsz-vbr-gamecenter-game-event .is-score {
236
260
  font-size: var(--vbr-widget-gamecenter-events-score-size);
237
261
  font-weight: 700;
238
262
  text-align: center;
239
263
  color: var(--vbr-widget-danger-color-a400);
240
264
  }
241
- .mjsz-vbr-gamecenter-game-event .is-score-so {
265
+
266
+ .mjsz-vbr-gamecenter-game-event .is-score-so {
242
267
  font-size: var(--vbr-widget-gamecenter-events-score-size);
243
268
  font-weight: 700;
244
269
  text-align: center;
245
270
  color: var(--vbr-widget-primary-color-500);
246
271
  }
247
- .mjsz-vbr-gamecenter-game-event .is-score-so-goal {
272
+
273
+ .mjsz-vbr-gamecenter-game-event .is-score-so-goal {
248
274
  color: var(--vbr-widget-live-game-color);
249
275
  }
250
- .mjsz-vbr-gamecenter-game-event .is-goalie-direction {
276
+
277
+ .mjsz-vbr-gamecenter-game-event .is-goalie-direction {
251
278
  font-size: var(--vbr-widget-gamecenter-events-goalie-direction-size);
252
279
  text-align: center;
253
280
  color: var(--vbr-widget-primary-color-400);
254
281
  }
255
- .mjsz-vbr-gamecenter-game-event .is-evented-person {
282
+
283
+ .mjsz-vbr-gamecenter-game-event .is-evented-person {
256
284
  font-size: var(--vbr-widget-gamecenter-events-evented-person-size);
257
285
  font-weight: var(--vbr-widget-gamecenter-events-evented-person-weight);
258
286
  }
259
- .mjsz-vbr-gamecenter-game-event .is-assists-list {
287
+
288
+ .mjsz-vbr-gamecenter-game-event .is-assists-list {
260
289
  font-size: var(--vbr-widget-gamecenter-events-assitst-list-size);
261
290
  color: var(--vbr-widget-primary-color-400);
262
291
  }
263
- .mjsz-vbr-gamecenter-game-event .is-assists-list span::after {
292
+
293
+ .mjsz-vbr-gamecenter-game-event .is-assists-list span::after {
264
294
  content: ' / ';
265
295
  }
266
- .mjsz-vbr-gamecenter-game-event .is-assists-list span:last-child::after {
296
+
297
+ .mjsz-vbr-gamecenter-game-event .is-assists-list span:last-child::after {
267
298
  content: '';
268
299
  }
269
- .mjsz-vbr-gamecenter-game-event .is-poi-data {
300
+
301
+ .mjsz-vbr-gamecenter-game-event .is-poi-data {
270
302
  font-size: var(--vbr-widget-gamecenter-events-poi-list-size);
271
303
  color: var(--vbr-widget-primary-color-400);
272
304
  }
273
- .mjsz-vbr-gamecenter-game-event .is-poi-data ul {
305
+
306
+ .mjsz-vbr-gamecenter-game-event .is-poi-data ul {
274
307
  display: inline-flex;
275
308
  }
276
- .mjsz-vbr-gamecenter-game-event .is-poi-data ul li::after {
309
+
310
+ .mjsz-vbr-gamecenter-game-event .is-poi-data ul li::after {
277
311
  content: ',';
278
312
  margin-right: 2px;
279
313
  }
280
- .mjsz-vbr-gamecenter-game-event .is-poi-data ul li:last-child::after {
314
+
315
+ .mjsz-vbr-gamecenter-game-event .is-poi-data ul li:last-child::after {
281
316
  content: '';
282
317
  }
283
- .mjsz-vbr-gamecenter-game-event .is-player-number {
318
+
319
+ .mjsz-vbr-gamecenter-game-event .is-player-number {
284
320
  font-weight: 400;
285
321
  font-style: italic;
286
322
  color: var(--vbr-widget-primary-color-500);
287
323
  }
288
- .mjsz-vbr-gamecenter-game-event .is-light-cell {
324
+
325
+ .mjsz-vbr-gamecenter-game-event .is-light-cell {
289
326
  color: var(--vbr-widget-primary-color-400);
290
327
  }
291
- .mjsz-vbr-gamecenter-data-table {
328
+
329
+ .mjsz-vbr-gamecenter-data-table {
292
330
  border: 1px solid var(--vbr-widget-gamecenter-team-container-border-color);
293
331
  min-width: 0;
294
332
  }
295
- .mjsz-vbr-gamecenter-data-table h2 {
333
+
334
+ .mjsz-vbr-gamecenter-data-table h2 {
296
335
  padding: 8px;
297
336
  font-size: var(--vbr-widget-gamecenter-team-container-title-size);
298
337
  font-weight: 500;
299
338
  color: var(--vbr-widget-gamecenter-team-container-title-color);
300
339
  background-color: var(--vbr-widget-gamecenter-team-container-title-bg-color);
301
340
  }
302
- .mjsz-vbr-gamecenter-data-columns {
341
+
342
+ .mjsz-vbr-gamecenter-data-columns {
303
343
  --columns: 1fr;
304
344
 
305
345
  display: grid;
@@ -307,13 +347,18 @@
307
347
  gap: 20px;
308
348
  margin-bottom: 20px;
309
349
  }
310
- @media all and (min-width: 576px) {
311
- .mjsz-vbr-gamecenter-data-columns {
350
+
351
+ @media all and (min-width: 576px) {
352
+
353
+ .mjsz-vbr-gamecenter-data-columns {
312
354
  --columns: repeat(2, 1fr)
313
355
  }
314
356
  }
315
- .mjsz-vbr-gamecenter-data-column {
357
+
358
+ .mjsz-vbr-gamecenter-data-column {
316
359
  display: grid;
317
360
  gap: 20px;
318
361
  margin-bottom: 20px;
319
362
  }
363
+
364
+ :export { meta: '{"e":"table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td","f":[{"b":[{"e":"> *:last-of-type","d":{"grid-column":"2/7"}}],"a":[[["max-width",":",500]]]}]}' }
@@ -25,37 +25,9 @@
25
25
  flex-shrink: 0;
26
26
  flex-grow: 0;
27
27
  flex-basis: 100%;
28
- scroll-snap-align: start;
28
+ scroll-snap-align: start
29
29
  }
30
30
 
31
- @container games-timeline (width > 375px) {
32
-
33
- .mjsz-vbr-games-timeline .is-slide {
34
- flex-basis: 50%
35
- }
36
- }
37
-
38
- @container games-timeline (width > 500px) {
39
-
40
- .mjsz-vbr-games-timeline .is-slide {
41
- flex-basis: 33.3334%
42
- }
43
- }
44
-
45
- @container games-timeline (width > 700px) {
46
-
47
- .mjsz-vbr-games-timeline .is-slide {
48
- flex-basis: 25%
49
- }
50
- }
51
-
52
- @container games-timeline (width > 880px) {
53
-
54
- .mjsz-vbr-games-timeline .is-slide {
55
- flex-basis: 20%
56
- }
57
- }
58
-
59
31
  .mjsz-vbr-games-timeline > button {
60
32
  position: relative;
61
33
  display: grid;
@@ -215,7 +187,7 @@
215
187
  align-items: center;
216
188
  place-content: center;
217
189
  width: 100%;
218
- font-size: var(--vbr-widget-typography-text-sm-size);
190
+ font-size: var(--vbr-widget-typography-font-size-400);
219
191
  font-weight: 500;
220
192
  color: var(--vbr-widget-error-notice-color);
221
193
  }
@@ -228,3 +200,45 @@
228
200
  .mjsz-vbr-games-timeline-error-indicator button {
229
201
  text-decoration: underline;
230
202
  }
203
+
204
+ .mjsz-vbr-score-display {
205
+ height: 20px;
206
+ padding: 0 5px !important;
207
+ }
208
+
209
+ .mjsz-vbr-score-display .is-score {
210
+ display: grid;
211
+ grid-template-areas: 'stack';
212
+ justify-items: center;
213
+ position: relative;
214
+ overflow: hidden;
215
+ mask-image: linear-gradient(to bottom, transparent 0, black 30%, black 70%, transparent 100%);
216
+ }
217
+
218
+ .mjsz-vbr-score-display .is-score > span {
219
+ grid-area: stack;
220
+ line-height: 20px;
221
+ }
222
+
223
+ .mjsz-vbr-score-display .is-slide-transition-enter-active,
224
+ .mjsz-vbr-score-display .is-slide-transition-leave-active {
225
+ transition: all 420ms linear;
226
+ }
227
+
228
+ .mjsz-vbr-score-display .is-slide-transition-enter-from {
229
+ transform: translateY(-100%);
230
+ }
231
+
232
+ .mjsz-vbr-score-display .is-slide-transition-enter-to {
233
+ transform: translateY(0);
234
+ }
235
+
236
+ .mjsz-vbr-score-display .is-slide-transition-leave-from {
237
+ transform: translateY(0);
238
+ }
239
+
240
+ .mjsz-vbr-score-display .is-slide-transition-leave-to {
241
+ transform: translateY(100%);
242
+ }
243
+
244
+ :export { meta: '{"e":".games-timeline","f":[]}' }
package/dist/css/grid.css CHANGED
@@ -1,3 +1,6 @@
1
+ /* --vbr-widget-typography-font-size-50
2
+ --vbr-widget-typography-font-lineheight-50 */
3
+
1
4
  .g-row {
2
5
  display: flex;
3
6
  }
@@ -53,3 +56,5 @@
53
56
  grid-template-columns: var(--columns-tablet)
54
57
  }
55
58
  }
59
+
60
+ :export { meta: '{"e":"table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td","f":[]}' }
@@ -47,3 +47,4 @@
47
47
  border-color: var(--vbr-widget-paginator-active-bg-color);
48
48
  cursor: default;
49
49
  }
50
+ :export { meta: '{"e":".paginator","f":[]}' }