@mjsz-vbr-elements/shared 2.7.2 → 2.8.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.
@@ -231,18 +231,38 @@ ul {
231
231
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
232
232
 
233
233
  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
234
- --vbr-widget-gamecenter-events-evented-person-weight: 500;
234
+ --vbr-widget-gamecenter-events-evented-person-weight: 600;
235
235
  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
236
236
  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
237
237
  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
238
238
  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
239
239
  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
240
+ --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
241
+
242
+ --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
243
+ --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
244
+ --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
245
+ --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
246
+ --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
247
+
248
+ --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
249
+ --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
250
+
251
+ --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
252
+ --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
253
+ --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
254
+ --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
240
255
 
241
256
  --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
242
257
 
243
258
  --vbr-widget-sticky-top-offset: 0;
244
259
  }
245
260
 
261
+ html,
262
+ body {
263
+ -webkit-font-smoothing: antialiased;
264
+ }
265
+
246
266
  .transition-fade-enter-active,
247
267
  .transition-fade-leave-active {
248
268
  transition: all 0.25s ease;
@@ -254,6 +274,18 @@ ul {
254
274
  transform: translateY(5px);
255
275
  }
256
276
 
277
+ .transition-event-move,
278
+ .transition-event-enter-active,
279
+ .transition-event-leave-active {
280
+ transition: all 0.25s ease;
281
+ }
282
+
283
+ .transition-event-enter-from,
284
+ .transition-event-leave-to {
285
+ opacity: 0;
286
+ /* transform: translateY(5px); */
287
+ }
288
+
257
289
  img {
258
290
  opacity: 0;
259
291
  transition: opacity 0.5s ease-out;
@@ -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
+ }
@@ -197,12 +197,27 @@
197
197
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
198
198
 
199
199
  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
200
- --vbr-widget-gamecenter-events-evented-person-weight: 500;
200
+ --vbr-widget-gamecenter-events-evented-person-weight: 600;
201
201
  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
202
202
  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
203
203
  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
204
204
  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
205
205
  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
206
+ --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
207
+
208
+ --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
209
+ --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
210
+ --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
211
+ --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
212
+ --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
213
+
214
+ --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
215
+ --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
216
+
217
+ --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
218
+ --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
219
+ --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
220
+ --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
206
221
 
207
222
  --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
208
223
 
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.8.0",
5
5
  "author": "Ákos Stegner <akos.stegner@gmail.com>",
6
6
  "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
7
7
  "type": "module",