@mjsz-vbr-elements/shared 2.7.2 → 2.9.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.
@@ -166,6 +166,7 @@ ul {
166
166
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
167
167
  --vbr-widget-badge-font-size: 0.625rem;
168
168
  --vbr-widget-badge-large-font-size: 0.6875rem;
169
+ --vbr-widget-badge-extra-large-font-size: 0.8125rem;
169
170
 
170
171
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
171
172
  --vbr-widget-tab-btn-font-size: var();
@@ -231,16 +232,46 @@ ul {
231
232
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
232
233
 
233
234
  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
234
- --vbr-widget-gamecenter-events-evented-person-weight: 500;
235
+ --vbr-widget-gamecenter-events-evented-person-weight: 600;
235
236
  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
236
237
  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
237
238
  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
238
239
  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
239
240
  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
241
+ --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
242
+
243
+ --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
244
+ --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
245
+ --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
246
+ --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
247
+ --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
248
+
249
+ --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
250
+ --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
251
+
252
+ --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
253
+ --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
254
+ --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
255
+ --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
240
256
 
241
257
  --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
242
258
 
243
259
  --vbr-widget-sticky-top-offset: 0;
260
+
261
+ --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
262
+ --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
263
+ --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
264
+ --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
265
+ --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
266
+ --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
267
+ --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
268
+ --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
269
+ --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
270
+ }
271
+
272
+ html,
273
+ body {
274
+ -webkit-font-smoothing: antialiased;
244
275
  }
245
276
 
246
277
  .transition-fade-enter-active,
@@ -254,6 +285,18 @@ ul {
254
285
  transform: translateY(5px);
255
286
  }
256
287
 
288
+ .transition-event-move,
289
+ .transition-event-enter-active,
290
+ .transition-event-leave-active {
291
+ transition: all 0.25s ease;
292
+ }
293
+
294
+ .transition-event-enter-from,
295
+ .transition-event-leave-to {
296
+ opacity: 0;
297
+ /* transform: translateY(5px); */
298
+ }
299
+
257
300
  img {
258
301
  opacity: 0;
259
302
  transition: opacity 0.5s ease-out;
@@ -381,7 +424,17 @@ a:hover {
381
424
  background-color: var(--vbr-widget-neutral-color);
382
425
  }
383
426
 
427
+ .is-badge.is-dark {
428
+ color: var(--vbr-widget-primary-color-0);
429
+ background-color: var(--vbr-widget-primary-color-700);
430
+ }
431
+
384
432
  .is-badge.is-large {
385
433
  font-size: var(--vbr-widget-badge-large-font-size);
386
434
  padding: 0.15rem 0.35rem;
387
435
  }
436
+
437
+ .is-badge.is-extra-large {
438
+ font-size: var(--vbr-widget-badge-extra-large-font-size);
439
+ padding: 0.21875rem 0.45rem;
440
+ }
@@ -133,7 +133,7 @@
133
133
 
134
134
  .mjsz-vbr-gamecenter-timeline-score-board {
135
135
  /* display: grid; */
136
- grid-template-columns: 1fr 50px auto auto auto 50px 1fr;
136
+ grid-template-columns: 50px auto auto auto 50px;
137
137
  grid-template-rows: 50px;
138
138
  align-items: center;
139
139
  justify-items: center;
@@ -158,6 +158,7 @@
158
158
  }
159
159
 
160
160
  .mjsz-vbr-gamecenter-timeline-score-board .is-team {
161
+ display: none;
161
162
  font-size: var(--vbr-widget-typography-text-base-size);
162
163
  font-weight: 700;
163
164
  color: var(--vbr-widget-primary-color-100);
@@ -185,6 +186,17 @@
185
186
  height: 100%;
186
187
  }
187
188
 
189
+ @media all and (min-width: 576px) {
190
+
191
+ .mjsz-vbr-gamecenter-timeline-score-board {
192
+ grid-template-columns: 1fr 50px auto auto auto 50px 1fr;
193
+ }
194
+
195
+ .mjsz-vbr-gamecenter-timeline-score-board .is-team {
196
+ display: block;
197
+ }
198
+ }
199
+
188
200
  .mjsz-vbr-gamecenter-timeline .is-heading-1 {
189
201
  margin-block-start: 3rem;
190
202
  margin-block-end: 1rem;
@@ -0,0 +1,248 @@
1
+ .mjsz-vbr-games-timeline {
2
+ display: grid;
3
+ grid-template-columns: 30px 1fr 30px;
4
+ align-items: center;
5
+ height: 100%;
6
+
7
+ container-type: inline-size;
8
+ container-name: games-timeline;
9
+ }
10
+
11
+ .mjsz-vbr-games-timeline > div {
12
+ display: flex;
13
+ overflow-x: auto;
14
+ overflow-y: hidden;
15
+ scroll-snap-type: x mandatory;
16
+ -ms-overflow-style: none;
17
+ scrollbar-width: none;
18
+
19
+ /* background: canvas;
20
+ --cover: canvas;
21
+ --mixed: color-mix(in lch, canvasText, canvas 75%);
22
+ --shadow: light-dark(var(--mixed), black);
23
+ --size: 4px;
24
+ background:
25
+ linear-gradient(-270deg, var(--cover) 0, #0000) 0 0 / calc(var(--size) * 2)
26
+ no-repeat local,
27
+ linear-gradient(-270deg, var(--shadow) 0, #0000) 0 0 / var(--size)
28
+ no-repeat scroll,
29
+ canvas; */
30
+ }
31
+
32
+ .mjsz-vbr-games-timeline > div::-webkit-scrollbar {
33
+ display: none;
34
+ }
35
+
36
+ .mjsz-vbr-games-timeline .is-slide {
37
+ flex-shrink: 0;
38
+ flex-grow: 0;
39
+ flex-basis: 100%;
40
+ scroll-snap-align: start;
41
+ }
42
+
43
+ @container games-timeline (width > 375px) {
44
+
45
+ .mjsz-vbr-games-timeline .is-slide {
46
+ flex-basis: 50%
47
+ }
48
+ }
49
+
50
+ @container games-timeline (width > 500px) {
51
+
52
+ .mjsz-vbr-games-timeline .is-slide {
53
+ flex-basis: 33.3334%
54
+ }
55
+ }
56
+
57
+ @container games-timeline (width > 700px) {
58
+
59
+ .mjsz-vbr-games-timeline .is-slide {
60
+ flex-basis: 25%
61
+ }
62
+ }
63
+
64
+ @container games-timeline (width > 880px) {
65
+
66
+ .mjsz-vbr-games-timeline .is-slide {
67
+ flex-basis: 20%
68
+ }
69
+ }
70
+
71
+ .mjsz-vbr-games-timeline > button {
72
+ position: relative;
73
+ display: grid;
74
+ place-content: center;
75
+ height: 100%;
76
+ }
77
+
78
+ .mjsz-vbr-games-timeline > button svg {
79
+ display: block;
80
+ height: 22px;
81
+ width: 22px;
82
+ color: var(--vbr-widget-games-timeline-arrow-color);
83
+ transition: all 0.2s;
84
+ }
85
+
86
+ .mjsz-vbr-games-timeline > button:hover svg {
87
+ color: var(--vbr-widget-games-timeline-arrow-hover-color);
88
+ }
89
+
90
+ .mjsz-vbr-games-timeline > button:disabled {
91
+ cursor: not-allowed;
92
+ }
93
+
94
+ .mjsz-vbr-games-timeline > button:disabled svg {
95
+ color: var(--vbr-widget-games-timeline-arrow-disabled-color);
96
+ }
97
+
98
+ .mjsz-vbr-games-timeline > button:before,
99
+ .mjsz-vbr-games-timeline > button:after {
100
+ position: absolute;
101
+ content: '';
102
+ top: 10px;
103
+ height: 90px;
104
+ transition: opacity 0.2s;
105
+ }
106
+
107
+ .mjsz-vbr-games-timeline > button:first-of-type:after {
108
+ right: 0;
109
+ border-right: 1px solid var(--vbr-widget-games-timeline-arrow-border-color);
110
+ box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.1);
111
+ }
112
+
113
+ .mjsz-vbr-games-timeline > button:last-of-type:before {
114
+ left: 0;
115
+ border-left: 1px solid var(--vbr-widget-games-timeline-arrow-border-color);
116
+ box-shadow: -1px 0 3px 0 rgba(0, 0, 0, 0.1);
117
+ }
118
+
119
+ .mjsz-vbr-games-timeline > button:disabled:first-of-type:after,
120
+ .mjsz-vbr-games-timeline > button:disabled:last-of-type:before {
121
+ opacity: 0;
122
+ }
123
+
124
+ .mjsz-vbr-games-timeline-game {
125
+ display: grid;
126
+ grid-template-columns: 20px 1fr 20px;
127
+ grid-template-areas: 'gamedate gamedate gamedate' 'home-logo home-team home-score' 'away-logo away-team away-score' 'status status status';
128
+ grid-template-rows: 1fr 1fr 1fr 1fr;
129
+ gap: 5px;
130
+ justify-items: center;
131
+ align-items: center;
132
+ padding: 0.625rem;
133
+ line-height: 1;
134
+ cursor: pointer;
135
+ }
136
+
137
+ .mjsz-vbr-games-timeline-game:hover {
138
+ background-image: var(--vbr-widget-games-timeline-game-hover-bg-color);
139
+ }
140
+
141
+ .mjsz-vbr-games-timeline-game time {
142
+ grid-area: gamedate;
143
+ font-size: 0.6875rem;
144
+ font-weight: 700;
145
+ color: var(--vbr-widget-games-timeline-game-date-color);
146
+ }
147
+
148
+ .mjsz-vbr-games-timeline-game .is-home-team-logo {
149
+ grid-area: home-logo;
150
+ }
151
+
152
+ .mjsz-vbr-games-timeline-game .is-away-team-logo {
153
+ grid-area: away-logo;
154
+ }
155
+
156
+ .mjsz-vbr-games-timeline-game :is(.is-home-team-logo, .is-away-team-logo) .is-team-logo {
157
+ display: block;
158
+ width: 20px;
159
+ height: 20px;
160
+ }
161
+
162
+ .mjsz-vbr-games-timeline-game :is(.is-home-team-name, .is-away-team-name) {
163
+ justify-self: start;
164
+ font-size: 0.8125rem;
165
+ font-weight: 700;
166
+ color: var(--vbr-widget-games-timeline-game-team-color);
167
+ overflow: hidden;
168
+ width: 100%;
169
+ text-overflow: ellipsis;
170
+ white-space: nowrap;
171
+ }
172
+
173
+ .mjsz-vbr-games-timeline-game .is-home-team-name {
174
+ grid-area: home-team;
175
+ }
176
+
177
+ .mjsz-vbr-games-timeline-game .is-away-team-name {
178
+ grid-area: away-team;
179
+ }
180
+
181
+ .mjsz-vbr-games-timeline-game :is(.is-home-team-score, .is-away-team-score) {
182
+ font-size: 0.8125rem;
183
+ }
184
+
185
+ .mjsz-vbr-games-timeline-game .is-home-team-score {
186
+ grid-area: home-score;
187
+ }
188
+
189
+ .mjsz-vbr-games-timeline-game .is-away-team-score {
190
+ grid-area: away-score;
191
+ }
192
+
193
+ .mjsz-vbr-games-timeline-game .is-status {
194
+ grid-area: status;
195
+ font-size: 0.75rem;
196
+ color: var(--vbr-widget-games-timeline-game-status-color);
197
+ overflow: hidden;
198
+ width: 100%;
199
+ text-overflow: ellipsis;
200
+ white-space: nowrap;
201
+ text-align: center;
202
+ }
203
+
204
+ .mjsz-vbr-games-timeline-schedule-link {
205
+ display: grid;
206
+ place-content: center;
207
+ height: 100%;
208
+ }
209
+
210
+ .mjsz-vbr-games-timeline-schedule-link:hover {
211
+ background-image: var(--vbr-widget-games-timeline-game-hover-bg-color);
212
+ }
213
+
214
+ .mjsz-vbr-games-timeline-schedule-link button {
215
+ display: flex;
216
+ align-items: center;
217
+ font-size: 0.75rem;
218
+ font-weight: 700;
219
+ text-transform: uppercase;
220
+ color: var(--vbr-widget-games-timeline-external-link-color);
221
+ }
222
+
223
+ .mjsz-vbr-games-timeline-schedule-link button svg {
224
+ display: inline-block;
225
+ width: 14px;
226
+ }
227
+
228
+ .mjsz-vbr-games-timeline-error-indicator {
229
+ display: flex;
230
+ gap: 0.5rem;
231
+ align-items: center;
232
+ place-content: center;
233
+ width: 100%;
234
+ font-size: 0.875rem;
235
+ font-weight: 500;
236
+ /* text-transform: uppercase; */
237
+ color: var(--vbr-widget-error-notice-color);
238
+ }
239
+
240
+ .mjsz-vbr-games-timeline-error-indicator svg {
241
+ display: block;
242
+ width: 20px;
243
+ }
244
+
245
+ .mjsz-vbr-games-timeline-error-indicator button {
246
+ /* text-transform: uppercase; */
247
+ text-decoration: underline;
248
+ }
@@ -53,3 +53,75 @@
53
53
  background-position-x: var(--vbr-widget-progress-height);
54
54
  }
55
55
  }
56
+
57
+ .mjsz-vbr-statistics-double-bar {
58
+ display: grid;
59
+ grid-template-columns: 0.3fr 1fr 1fr 0.3fr;
60
+ grid-template-areas: 'value-start title title value-end' 'bar-start bar-start bar-end bar-end';
61
+ align-items: center;
62
+ }
63
+
64
+ @media (width > 500px) {
65
+
66
+ .mjsz-vbr-statistics-double-bar {
67
+ grid-template-areas: 'title title title title' 'value-start bar-start bar-end value-end'
68
+ }
69
+ }
70
+
71
+ .mjsz-vbr-statistics-double-bar .is-value {
72
+ font-weight: 700;
73
+ color: var(--vbr-widget-primary-color-900);
74
+ }
75
+
76
+ .mjsz-vbr-statistics-double-bar .is-value-start {
77
+ grid-area: value-start;
78
+ padding-inline-end: 0.5rem;
79
+ justify-self: end;
80
+ }
81
+
82
+ .mjsz-vbr-statistics-double-bar .is-value-end {
83
+ grid-area: value-end;
84
+ padding-inline-start: 0.5rem;
85
+ }
86
+
87
+ .mjsz-vbr-statistics-double-bar .is-bar {
88
+ background-color: var(--vbr-widget-primary-color-50);
89
+ height: 8px;
90
+ margin-block: 5px;
91
+ }
92
+
93
+ .mjsz-vbr-statistics-double-bar .is-bar-start {
94
+ grid-area: bar-start;
95
+
96
+ display: flex;
97
+ justify-content: flex-end;
98
+ }
99
+
100
+ .mjsz-vbr-statistics-double-bar .is-bar-start--progress {
101
+ background-color: var(--vbr-widget-gamecenter-home-team-identifier-color);
102
+ outline: 1px solid var(--vbr-widget-gamecenter-home-team-identifier-border-color);
103
+ outline-offset: -1px;
104
+ height: 100%;
105
+ transition: width 0.3s ease-out;
106
+ }
107
+
108
+ .mjsz-vbr-statistics-double-bar .is-bar-end {
109
+ grid-area: bar-end;
110
+ }
111
+
112
+ .mjsz-vbr-statistics-double-bar .is-bar-end--progress {
113
+ background-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
114
+ outline: 1px solid var(--vbr-widget-gamecenter-away-team-identifier-border-color);
115
+ outline-offset: -1px;
116
+ height: 100%;
117
+ }
118
+
119
+ .mjsz-vbr-statistics-double-bar .is-title {
120
+ grid-area: title;
121
+
122
+ justify-self: center;
123
+ font-size: var(--vbr-widget-typography-text-sm-size);
124
+ font-weight: 700;
125
+ line-height: 1.5rem;
126
+ color: var(--vbr-widget-primary-color-500);
127
+ }
@@ -132,6 +132,7 @@
132
132
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
133
133
  --vbr-widget-badge-font-size: 0.625rem;
134
134
  --vbr-widget-badge-large-font-size: 0.6875rem;
135
+ --vbr-widget-badge-extra-large-font-size: 0.8125rem;
135
136
 
136
137
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
137
138
  --vbr-widget-tab-btn-font-size: var();
@@ -197,14 +198,39 @@
197
198
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
198
199
 
199
200
  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
200
- --vbr-widget-gamecenter-events-evented-person-weight: 500;
201
+ --vbr-widget-gamecenter-events-evented-person-weight: 600;
201
202
  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
202
203
  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
203
204
  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
204
205
  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
205
206
  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
207
+ --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
208
+
209
+ --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
210
+ --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
211
+ --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
212
+ --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
213
+ --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
214
+
215
+ --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
216
+ --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
217
+
218
+ --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
219
+ --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
220
+ --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
221
+ --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
206
222
 
207
223
  --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
208
224
 
209
225
  --vbr-widget-sticky-top-offset: 0;
226
+
227
+ --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
228
+ --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
229
+ --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
230
+ --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
231
+ --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
232
+ --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
233
+ --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
234
+ --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
235
+ --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
210
236
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mjsz-vbr-elements/shared",
3
3
  "private": false,
4
- "version": "2.7.2",
4
+ "version": "2.9.0",
5
5
  "author": "Ákos Stegner <akos.stegner@gmail.com>",
6
6
  "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
7
7
  "type": "module",