@mjsz-vbr-elements/shared 2.6.2 → 2.6.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.
@@ -1,7 +1,6 @@
1
1
  .mjsz-vbr-gamecenter-timeline {
2
2
  container-name: rows;
3
3
  container-type: inline-size;
4
-
5
4
  }
6
5
 
7
6
  .mjsz-vbr-gamecenter-timeline-game-data {
@@ -133,6 +132,7 @@
133
132
  }
134
133
 
135
134
  .mjsz-vbr-gamecenter-timeline-score-board {
135
+ /* display: grid; */
136
136
  grid-template-columns: 1fr 50px auto auto auto 50px 1fr;
137
137
  grid-template-rows: 50px;
138
138
  align-items: center;
@@ -255,26 +255,50 @@
255
255
  }
256
256
 
257
257
  .mjsz-vbr-gamecenter-timeline-game-events .is-period-header {
258
- padding-block: 0.5rem;
258
+ padding-block: 1rem;
259
259
  display: grid;
260
260
  grid-template-columns: 1fr auto 1fr;
261
- grid-template-rows: 1fr 1px 1fr;
261
+ grid-template-rows: auto 1fr 1px 1fr;
262
262
  }
263
263
 
264
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header p {
265
+ grid-column: 2;
266
+ grid-row: 1;
267
+ justify-self: center;
268
+ margin-bottom: 0.25rem;
269
+ padding-inline: 0.5rem;
270
+ width: max-content;
271
+ color: #fff;
272
+ font-size: var(--vbr-widget-typography-text-base-size);
273
+ font-weight: 500;
274
+ line-height: var(--vbr-widget-typography-text-base-lineheight);
275
+ background-color: var(--vbr-widget-primary-color-900);
276
+ border-radius: 6px;
277
+ }
278
+
264
279
  .mjsz-vbr-gamecenter-timeline-game-events .is-period-header span {
265
280
  grid-column: 2;
266
- grid-row: 1/-1;
267
-
281
+ grid-row: 2/-1;
282
+
268
283
  padding-inline: 0.5rem;
269
284
  padding-block: 0.25rem;
270
285
  font-size: small;
271
- background-color: var(--vbr-widget-neutral-color);
286
+ font-weight: 500;
287
+ color: var(--vbr-widget-primary-color-500);
288
+ background-color: var(--vbr-widget-primary-color-100);
272
289
  border-radius: 0.5rem;
273
290
  }
274
291
 
292
+ .mjsz-vbr-gamecenter-timeline-game-events .is-period-header span svg {
293
+ display: inline-block;
294
+ width: 14px;
295
+ height: 14px;
296
+ vertical-align: sub;
297
+ }
298
+
275
299
  .mjsz-vbr-gamecenter-timeline-game-events .is-period-header div {
276
300
  grid-column: 1/-1;
277
- grid-row: 2;
301
+ grid-row: 3;
278
302
  background-color: var(--vbr-widget-primary-color-100);
279
303
  }
280
304
 
@@ -299,18 +323,19 @@
299
323
  grid-area: details;
300
324
 
301
325
  display: grid;
302
- grid-template-columns: auto 1fr auto;
303
- grid-template-areas: 'type-icon detail-title team-logo' 'type-icon detail-list team-logo';
304
- column-gap: 0.5rem;
326
+ grid-template-columns: auto 1fr;
327
+ grid-template-areas: 'type-icon detail-title' 'type-icon detail-list';
328
+ column-gap: 1rem;
305
329
  padding: 1rem;
306
- border-inline-end: 3px solid var(--vbr-widget-gamecenter-home-team-identifier-color);
307
- background-color: var(--vbr-widget-primary-color-50);
330
+ border-inline-end: 5px solid var(--vbr-widget-gamecenter-home-team-identifier-color);
331
+ background-color: var(--vbr-widget-gamecenter-card-bg-color);
308
332
  border-radius: 0.5rem;
309
333
  align-items: start;
334
+ outline: 1px solid var(--vbr-widget-gamecenter-card-border-color);
310
335
  }
311
336
 
312
337
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container:not(:has(.is-details-list)) {
313
- grid-template-areas: 'type-icon detail-title team-logo';
338
+ grid-template-areas: 'type-icon detail-title';
314
339
  align-items: center;
315
340
  }
316
341
 
@@ -319,7 +344,7 @@
319
344
 
320
345
  font-weight: 700;
321
346
  text-transform: uppercase;
322
- color: var(--vbr-widget-primary-color-900);
347
+ color: var(--vbr-widget-gamecenter-card-title-color);
323
348
  }
324
349
 
325
350
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list {
@@ -331,12 +356,12 @@
331
356
 
332
357
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-details-sub-title {
333
358
  font-size: var(--vbr-widget-typography-text-sm-size);
334
- color: var(--vbr-widget-primary-color-500);
359
+ color: var(--vbr-widget-gamecenter-card-secondary-color);
335
360
  }
336
361
 
337
362
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-evented-person {
338
- font-weight: 600;
339
- color: var(--vbr-widget-primary-color-700);
363
+ font-weight: var(--vbr-widget-gamecenter-events-evented-person-weight);
364
+ color: var(--vbr-widget-gamecenter-card-secondary-color);
340
365
  }
341
366
 
342
367
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-details-list .is-player-number {
@@ -347,45 +372,95 @@
347
372
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo {
348
373
  grid-area: team-logo;
349
374
 
375
+ display: none;
376
+
350
377
  justify-self: center;
351
378
  align-self: center;
352
379
  }
353
380
 
354
381
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo img {
355
- display: block;
356
382
  width: 40px;
357
383
  height: 40px;
358
384
  }
359
385
 
360
386
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon {
361
387
  grid-area: type-icon;
388
+ padding: 0.5rem;
389
+ border-radius: 100%;
362
390
  }
363
391
 
364
392
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon svg {
365
393
  display: block;
366
- width: 20px;
367
- height: 20px;
368
- margin-block-start: 1px;
394
+ width: 14px;
395
+ height: 14px;
396
+ }
397
+
398
+ /* margin-block-start: 1px; */
399
+
400
+ @container rows (width > 410px) {
401
+
402
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-event-type-icon svg {
403
+ width: 24px;
404
+ height: 24px
405
+ }
406
+ }
407
+
408
+ /* outline-color: var(--vbr-widget-danger-color-a400); */
409
+
410
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty .is-event-type-icon {
411
+ color: var(--vbr-widget-primary-color-0);
412
+ background-color: var(--vbr-widget-danger-color-a400);
413
+ }
414
+
415
+ /* outline-color: var(--vbr-widget-gamecenter-home-team-identifier-color); */
416
+
417
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-timeout .is-event-type-icon {
418
+ color: var(--vbr-widget-primary-color-0);
419
+ background-color: var(--vbr-widget-gamecenter-home-team-identifier-color);
420
+ }
421
+
422
+ /* outline-color: var(--vbr-widget-gamecenter-home-team-identifier-color); */
423
+
424
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goalies .is-event-type-icon {
425
+ color: var(--vbr-widget-primary-color-900);
426
+ background-color: var(--vbr-widget-neutral-color);
427
+ }
428
+
429
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty-shot-goal .is-event-type-icon {
430
+ color: var(--vbr-widget-primary-color-0);
431
+ background-color: var(--vbr-widget-live-game-color);
432
+ }
433
+
434
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-penalty-shot-no-goal .is-event-type-icon {
435
+ color: var(--vbr-widget-primary-color-400);
436
+ background-color: var(--vbr-widget-primary-color-100);
369
437
  }
370
438
 
371
439
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal {
372
- color: var(--vbr-widget-danger-color-500);
373
- background-color: var(--vbr-widget-danger-color-50);
440
+ /* color: var(--vbr-widget-secondary-color-500); */
441
+ background-color: var(--vbr-widget-gamecenter-card-event-goal-bg-color);
442
+ outline-color: var(--vbr-widget-gamecenter-card-event-goal-border-color);
374
443
  }
375
444
 
445
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-event-type-icon {
446
+ color: var(--vbr-widget-primary-color-0);
447
+ background-color: var(--vbr-widget-live-game-color);
448
+ }
449
+
376
450
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-details-title {
377
- color: var(--vbr-widget-danger-color-900);
451
+ color: var(--vbr-widget-primary-color-0);
378
452
  }
379
453
 
380
454
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-evented-person {
381
- color: var(--vbr-widget-danger-color-700);
455
+ color: var(--vbr-widget-primary-color-100);
382
456
  }
383
457
 
384
458
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-assists-list {
385
459
  font-size: var(--vbr-widget-typography-text-sm-size);
386
- color: var(--vbr-widget-danger-color-400);
387
460
  }
388
461
 
462
+ /* color: var(--vbr-widget-primary-color-400); */
463
+
389
464
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-assists-list span:not(:last-of-type):after {
390
465
  content: '/';
391
466
  margin-inline: 0.25rem;
@@ -396,7 +471,7 @@
396
471
  flex-wrap: wrap;
397
472
  gap: 0.25rem;
398
473
  font-size: var(--vbr-widget-typography-text-xs-size);
399
- color: var(--vbr-widget-danger-color-400);
474
+ color: var(--vbr-widget-gamecenter-card-tertiary-color);
400
475
  }
401
476
 
402
477
  .mjsz-vbr-gamecenter-timeline-game-event .is-details-container.is-goal .is-poi-data ul {
@@ -413,6 +488,23 @@
413
488
  background-color: var(--vbr-widget-danger-color-500);
414
489
  }
415
490
 
491
+ @container rows (width > 410px) {
492
+
493
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container {
494
+ grid-template-columns: auto 1fr auto;
495
+ grid-template-areas: 'type-icon detail-title team-logo' 'type-icon detail-list team-logo'
496
+ }
497
+
498
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container:not(:has(.is-details-list)) {
499
+ grid-template-areas: 'type-icon detail-title team-logo';
500
+ align-items: center;
501
+ }
502
+
503
+ .mjsz-vbr-gamecenter-timeline-game-event .is-details-container .is-team-logo {
504
+ display: block;
505
+ }
506
+ }
507
+
416
508
  .mjsz-vbr-gamecenter-timeline-game-event .is-timestamp {
417
509
  grid-area: time;
418
510
 
@@ -432,13 +524,12 @@
432
524
  border-radius: 6px;
433
525
  }
434
526
 
435
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type {
527
+ /* .is-event-type {
436
528
  grid-area: event-type;
437
529
 
438
530
  justify-self: center;
439
- }
440
531
 
441
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type p {
532
+ p {
442
533
  display: flex;
443
534
  align-items: center;
444
535
  gap: 5px;
@@ -451,47 +542,62 @@
451
542
  border-radius: 6px;
452
543
  }
453
544
 
454
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type svg {
545
+ svg {
455
546
  display: block;
456
547
  width: 14px;
457
548
  height: 14px;
458
549
  }
459
550
 
460
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-goal p {
551
+ &.is-goal {
552
+ p {
461
553
  color: var(--vbr-widget-primary-color-0);
462
554
  background-color: var(--vbr-widget-danger-color-a400);
463
555
  }
556
+ }
464
557
 
465
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-penalty p {
558
+ &.is-penalty {
559
+ p {
466
560
  color: var(--vbr-widget-primary-color-900);
467
561
  }
562
+ }
468
563
 
469
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-timeout p {
564
+ &.is-timeout {
565
+ p {
470
566
  color: var(--vbr-widget-primary-color-0);
471
567
  background-color: var(--vbr-widget-secondary-color-700);
472
568
  }
569
+ }
473
570
 
474
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-goalie-in p {
571
+ &.is-goalie-in {
572
+ p {
475
573
  color: var(--vbr-widget-secondary-color-700);
476
574
  border: 1px solid var(--vbr-widget-primary-color-100);
477
575
  background-color: var(--vbr-widget-primary-color-0);
478
576
  }
577
+ }
479
578
 
480
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-goalie-out p {
579
+ &.is-goalie-out {
580
+ p {
481
581
  color: var(--vbr-widget-danger-color-700);
482
582
  border: 1px solid var(--vbr-widget-primary-color-100);
483
583
  background-color: var(--vbr-widget-primary-color-0);
484
584
  }
585
+ }
485
586
 
486
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-penalty-shot-goal p {
587
+ &.is-penalty-shot-goal {
588
+ p {
487
589
  color: var(--vbr-widget-primary-color-0);
488
590
  background-color: var(--vbr-widget-danger-color-a400);
489
591
  }
592
+ }
490
593
 
491
- .mjsz-vbr-gamecenter-timeline-game-event .is-event-type.is-penalty-shot-no-goal p {
594
+ &.is-penalty-shot-no-goal {
595
+ p {
492
596
  color: var(--vbr-widget-danger-color-700);
493
597
  background-color: var(--vbr-widget-danger-color-100);
494
598
  }
599
+ }
600
+ } */
495
601
 
496
602
  .mjsz-vbr-gamecenter-timeline-game-event[data-team='away'] .is-details-container {
497
603
  border-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
@@ -532,8 +638,7 @@
532
638
  .mjsz-vbr-gamecenter-timeline-game-event[data-team='home'] .is-details-container {
533
639
 
534
640
  border-inline-end: none;
535
- border-inline-start: 3px solid var(--vbr-widget-gamecenter-home-team-identifier-color);
536
-
641
+ border-inline-start: 5px solid var(--vbr-widget-gamecenter-home-team-identifier-color);
537
642
  }
538
643
 
539
644
  .mjsz-vbr-gamecenter-timeline-game-event[data-team='home'] .is-details-container .is-details-list,
@@ -660,8 +765,13 @@
660
765
 
661
766
  .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container {
662
767
  display: grid;
768
+ grid-template-columns: 40px 1fr;
769
+ grid-template-areas: 'img name' 'img role';
770
+ align-content: start;
771
+ column-gap: 0.5rem;
663
772
  padding: 0.75rem;
664
- background-color: var(--vbr-widget-primary-color-50);
773
+ outline: 1px solid var(--vbr-widget-gamecenter-card-border-color);
774
+ background-color: var(--vbr-widget-gamecenter-card-bg-color);
665
775
  border-radius: 0.5rem;
666
776
  }
667
777
 
@@ -674,26 +784,42 @@
674
784
  }
675
785
 
676
786
  .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(1) {
787
+ grid-area: img;
788
+ }
789
+
790
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(2) {
791
+ grid-area: name;
792
+
677
793
  font-weight: 600;
678
794
  color: var(--vbr-widget-primary-color-700);
679
795
  }
680
796
 
681
- .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(2) {
797
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container li:nth-child(3) {
798
+ grid-area: role;
799
+
682
800
  align-self: center;
683
801
  font-size: var(--vbr-widget-typography-text-xs-size);
684
802
  line-height: 1;
685
- color: var(--vbr-widget-primary-color-300);
803
+ color: var(--vbr-widget-gamecenter-card-tertiary-color);
686
804
  text-transform: uppercase;
687
805
  }
688
806
 
807
+ .mjsz-vbr-gamecenter-timeline-lineups .is-official-person-container img {
808
+ display: block;
809
+ width: 40px;
810
+ height: 40px;
811
+ border-radius: 50%;
812
+ }
813
+
689
814
  .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper {
690
815
  display: grid;
691
816
  grid-template-columns: 40px auto 1fr;
692
817
  grid-template-areas: 'img number name' 'img position name';
693
818
  column-gap: 0.5rem;
694
819
  padding: 0.75rem;
695
- background-color: var(--vbr-widget-primary-color-50);
820
+ background-color: var(--vbr-widget-gamecenter-card-bg-color);
696
821
  border-inline-start: 3px solid var(--vbr-widget-gamecenter-home-team-identifier-color);
822
+ outline: 1px solid var(--vbr-widget-gamecenter-card-border-color);
697
823
  border-radius: 0.5rem;
698
824
  overflow: hidden;
699
825
  }
@@ -724,15 +850,20 @@
724
850
  -webkit-box-orient: vertical;
725
851
  }
726
852
 
853
+ .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) ul {
854
+ display: inline-flex;
855
+ gap: 0.125rem;
856
+ vertical-align: middle;
857
+ }
858
+
727
859
  .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(3) svg {
728
860
  display: inline-block;
729
- margin-inline-end: 0.125rem;
730
- padding: 0.125rem;
731
- width: 16px;
732
- height: 16px;
861
+ padding: 0.2rem;
862
+ width: 12px;
863
+ height: 12px;
733
864
  color: var(--vbr-widget-primary-color-0);
734
- background-color: var(--vbr-widget-primary-color-700);
735
- border-radius: 0.25rem;
865
+ background-color: var(--vbr-widget-live-game-color);
866
+ border-radius: 100%;
736
867
  }
737
868
 
738
869
  .mjsz-vbr-gamecenter-timeline-lineups .is-player-wrapper li:nth-child(4) {
@@ -740,7 +871,7 @@
740
871
  align-self: center;
741
872
  font-size: var(--vbr-widget-typography-text-xs-size);
742
873
  line-height: 1;
743
- color: var(--vbr-widget-primary-color-300);
874
+ color: var(--vbr-widget-gamecenter-card-tertiary-color);
744
875
  text-transform: uppercase;
745
876
  }
746
877
 
@@ -806,13 +937,3 @@
806
937
  width: 8px;
807
938
  background-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
808
939
  }
809
-
810
- .mjsz-vbr-gamecenter-timeline .is-fade-transition-enter-active,
811
- .mjsz-vbr-gamecenter-timeline .is-fade-transition-leave-active {
812
- transition: opacity 0.25s ease-out;
813
- }
814
-
815
- .mjsz-vbr-gamecenter-timeline .is-fade-transition-enter-from,
816
- .mjsz-vbr-gamecenter-timeline .is-fade-transition-leave-to {
817
- opacity: 0;
818
- }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mjsz-vbr-elements/shared",
3
3
  "private": false,
4
- "version": "2.6.2",
4
+ "version": "2.6.4",
5
5
  "author": "Ákos Stegner <akos.stegner@gmail.com>",
6
6
  "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
7
7
  "type": "module",