@mjsz-vbr-elements/shared 2.7.2 → 2.9.0

package/dist/css/common.css

@@ -166,6 +166,7 @@ ul {
   --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
   --vbr-widget-badge-font-size: 0.625rem;
   --vbr-widget-badge-large-font-size: 0.6875rem;
+  --vbr-widget-badge-extra-large-font-size: 0.8125rem;
 
   --vbr-widget-tab-btn-padding: 0.625rem 1rem;
   --vbr-widget-tab-btn-font-size: var();
@@ -231,16 +232,46 @@ ul {
   --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
 
   --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
-  --vbr-widget-gamecenter-events-evented-person-weight: 500;
+  --vbr-widget-gamecenter-events-evented-person-weight: 600;
   --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
   --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
   --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
   --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
   --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
+  --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
+
+  --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
+  --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
+
+  --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
+
+  --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
+  --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
+  --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
+  --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
 
   --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
 
   --vbr-widget-sticky-top-offset: 0;
+
+  --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
+  --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
+}
+
+html,
+body {
+  -webkit-font-smoothing: antialiased;
 }
 
 .transition-fade-enter-active,
@@ -254,6 +285,18 @@ ul {
   transform: translateY(5px);
 }
 
+.transition-event-move,
+.transition-event-enter-active,
+.transition-event-leave-active {
+  transition: all 0.25s ease;
+}
+
+.transition-event-enter-from,
+.transition-event-leave-to {
+  opacity: 0;
+  /* transform: translateY(5px); */
+}
+
 img {
   opacity: 0;
   transition: opacity 0.5s ease-out;
@@ -381,7 +424,17 @@ a:hover {
     background-color: var(--vbr-widget-neutral-color);
   }
 
+.is-badge.is-dark {
+    color: var(--vbr-widget-primary-color-0);
+    background-color: var(--vbr-widget-primary-color-700);
+  }
+
 .is-badge.is-large {
     font-size: var(--vbr-widget-badge-large-font-size);
     padding: 0.15rem 0.35rem;
   }
+
+.is-badge.is-extra-large {
+    font-size: var(--vbr-widget-badge-extra-large-font-size);
+    padding: 0.21875rem 0.45rem;
+  }

package/dist/css/game-center-timeline.css

@@ -133,7 +133,7 @@
 
   .mjsz-vbr-gamecenter-timeline-score-board {
     /* display: grid; */
-    grid-template-columns: 1fr 50px auto auto auto 50px 1fr;
+    grid-template-columns: 50px auto auto auto 50px;
     grid-template-rows: 50px;
     align-items: center;
     justify-items: center;
@@ -158,6 +158,7 @@
     }
 
   .mjsz-vbr-gamecenter-timeline-score-board .is-team {
+      display: none;
       font-size: var(--vbr-widget-typography-text-base-size);
       font-weight: 700;
       color: var(--vbr-widget-primary-color-100);
@@ -185,6 +186,17 @@
       height: 100%;
     }
 
+  @media all and (min-width: 576px) {
+
+  .mjsz-vbr-gamecenter-timeline-score-board {
+      grid-template-columns: 1fr 50px auto auto auto 50px 1fr;
+  }
+
+      .mjsz-vbr-gamecenter-timeline-score-board .is-team {
+        display: block;
+      }
+  }
+
   .mjsz-vbr-gamecenter-timeline .is-heading-1 {
     margin-block-start: 3rem;
     margin-block-end: 1rem;

package/dist/css/games-timeline.css

@@ -0,0 +1,248 @@
+.mjsz-vbr-games-timeline {
+  display: grid;
+  grid-template-columns: 30px 1fr 30px;
+  align-items: center;
+  height: 100%;
+
+  container-type: inline-size;
+  container-name: games-timeline;
+}
+
+  .mjsz-vbr-games-timeline > div {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    /* background: canvas;
+    --cover: canvas;
+    --mixed: color-mix(in lch, canvasText, canvas 75%);
+    --shadow: light-dark(var(--mixed), black);
+    --size: 4px;
+    background: 
+    linear-gradient(-270deg, var(--cover) 0, #0000) 0 0 / calc(var(--size) * 2) 
+      no-repeat local,
+    linear-gradient(-270deg, var(--shadow) 0, #0000) 0 0 / var(--size)
+      no-repeat scroll,
+    canvas; */
+  }
+
+  .mjsz-vbr-games-timeline > div::-webkit-scrollbar {
+      display: none;
+    }
+
+  .mjsz-vbr-games-timeline .is-slide {
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: 100%;
+    scroll-snap-align: start;
+  }
+
+  @container games-timeline (width > 375px) {
+
+  .mjsz-vbr-games-timeline .is-slide {
+      flex-basis: 50%
+  }
+    }
+
+  @container games-timeline (width > 500px) {
+
+  .mjsz-vbr-games-timeline .is-slide {
+      flex-basis: 33.3334%
+  }
+    }
+
+  @container games-timeline (width > 700px) {
+
+  .mjsz-vbr-games-timeline .is-slide {
+      flex-basis: 25%
+  }
+    }
+
+  @container games-timeline (width > 880px) {
+
+  .mjsz-vbr-games-timeline .is-slide {
+      flex-basis: 20%
+  }
+    }
+
+  .mjsz-vbr-games-timeline > button {
+    position: relative;
+    display: grid;
+    place-content: center;
+    height: 100%;
+  }
+
+  .mjsz-vbr-games-timeline > button svg {
+      display: block;
+      height: 22px;
+      width: 22px;
+      color: var(--vbr-widget-games-timeline-arrow-color);
+      transition: all 0.2s;
+    }
+
+  .mjsz-vbr-games-timeline > button:hover svg {
+        color: var(--vbr-widget-games-timeline-arrow-hover-color);
+      }
+
+  .mjsz-vbr-games-timeline > button:disabled {
+      cursor: not-allowed;
+    }
+
+  .mjsz-vbr-games-timeline > button:disabled svg {
+        color: var(--vbr-widget-games-timeline-arrow-disabled-color);
+      }
+
+  .mjsz-vbr-games-timeline > button:before,
+    .mjsz-vbr-games-timeline > button:after {
+      position: absolute;
+      content: '';
+      top: 10px;
+      height: 90px;
+      transition: opacity 0.2s;
+    }
+
+  .mjsz-vbr-games-timeline > button:first-of-type:after {
+      right: 0;
+      border-right: 1px solid var(--vbr-widget-games-timeline-arrow-border-color);
+      box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.1);
+    }
+
+  .mjsz-vbr-games-timeline > button:last-of-type:before {
+      left: 0;
+      border-left: 1px solid var(--vbr-widget-games-timeline-arrow-border-color);
+      box-shadow: -1px 0 3px 0 rgba(0, 0, 0, 0.1);
+    }
+
+  .mjsz-vbr-games-timeline > button:disabled:first-of-type:after,
+    .mjsz-vbr-games-timeline > button:disabled:last-of-type:before {
+      opacity: 0;
+    }
+
+.mjsz-vbr-games-timeline-game {
+  display: grid;
+  grid-template-columns: 20px 1fr 20px;
+  grid-template-areas: 'gamedate gamedate gamedate' 'home-logo home-team home-score' 'away-logo away-team away-score' 'status status status';
+  grid-template-rows: 1fr 1fr 1fr 1fr;
+  gap: 5px;
+  justify-items: center;
+  align-items: center;
+  padding: 0.625rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.mjsz-vbr-games-timeline-game:hover {
+    background-image: var(--vbr-widget-games-timeline-game-hover-bg-color);
+  }
+
+.mjsz-vbr-games-timeline-game time {
+    grid-area: gamedate;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    color: var(--vbr-widget-games-timeline-game-date-color);
+  }
+
+.mjsz-vbr-games-timeline-game .is-home-team-logo {
+    grid-area: home-logo;
+  }
+
+.mjsz-vbr-games-timeline-game .is-away-team-logo {
+    grid-area: away-logo;
+  }
+
+.mjsz-vbr-games-timeline-game :is(.is-home-team-logo, .is-away-team-logo) .is-team-logo {
+      display: block;
+      width: 20px;
+      height: 20px;
+    }
+
+.mjsz-vbr-games-timeline-game :is(.is-home-team-name, .is-away-team-name) {
+    justify-self: start;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    color: var(--vbr-widget-games-timeline-game-team-color);
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+.mjsz-vbr-games-timeline-game .is-home-team-name {
+    grid-area: home-team;
+  }
+
+.mjsz-vbr-games-timeline-game .is-away-team-name {
+    grid-area: away-team;
+  }
+
+.mjsz-vbr-games-timeline-game :is(.is-home-team-score, .is-away-team-score) {
+    font-size: 0.8125rem;
+  }
+
+.mjsz-vbr-games-timeline-game .is-home-team-score {
+    grid-area: home-score;
+  }
+
+.mjsz-vbr-games-timeline-game .is-away-team-score {
+    grid-area: away-score;
+  }
+
+.mjsz-vbr-games-timeline-game .is-status {
+    grid-area: status;
+    font-size: 0.75rem;
+    color: var(--vbr-widget-games-timeline-game-status-color);
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+.mjsz-vbr-games-timeline-schedule-link {
+  display: grid;
+  place-content: center;
+  height: 100%;
+}
+
+.mjsz-vbr-games-timeline-schedule-link:hover {
+    background-image: var(--vbr-widget-games-timeline-game-hover-bg-color);
+  }
+
+.mjsz-vbr-games-timeline-schedule-link button {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--vbr-widget-games-timeline-external-link-color);
+  }
+
+.mjsz-vbr-games-timeline-schedule-link button svg {
+      display: inline-block;
+      width: 14px;
+    }
+
+.mjsz-vbr-games-timeline-error-indicator {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  place-content: center;
+  width: 100%;
+  font-size: 0.875rem;
+  font-weight: 500;
+  /* text-transform: uppercase; */
+  color: var(--vbr-widget-error-notice-color);
+}
+
+.mjsz-vbr-games-timeline-error-indicator svg {
+    display: block;
+    width: 20px;
+  }
+
+.mjsz-vbr-games-timeline-error-indicator button {
+    /* text-transform: uppercase; */
+    text-decoration: underline;
+  }

package/dist/css/progress.css

@@ -53,3 +53,75 @@
     background-position-x: var(--vbr-widget-progress-height);
   }
 }
+
+.mjsz-vbr-statistics-double-bar {
+  display: grid;
+  grid-template-columns: 0.3fr 1fr 1fr 0.3fr;
+  grid-template-areas: 'value-start title title value-end' 'bar-start bar-start bar-end bar-end';
+  align-items: center;
+}
+
+@media (width > 500px) {
+
+.mjsz-vbr-statistics-double-bar {
+    grid-template-areas: 'title title title title' 'value-start bar-start bar-end value-end'
+}
+  }
+
+.mjsz-vbr-statistics-double-bar .is-value {
+    font-weight: 700;
+    color: var(--vbr-widget-primary-color-900);
+  }
+
+.mjsz-vbr-statistics-double-bar .is-value-start {
+    grid-area: value-start;
+    padding-inline-end: 0.5rem;
+    justify-self: end;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-value-end {
+    grid-area: value-end;
+    padding-inline-start: 0.5rem;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-bar {
+    background-color: var(--vbr-widget-primary-color-50);
+    height: 8px;
+    margin-block: 5px;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-bar-start {
+    grid-area: bar-start;
+
+    display: flex;
+    justify-content: flex-end;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-bar-start--progress {
+    background-color: var(--vbr-widget-gamecenter-home-team-identifier-color);
+    outline: 1px solid var(--vbr-widget-gamecenter-home-team-identifier-border-color);
+    outline-offset: -1px;
+    height: 100%;
+    transition: width 0.3s ease-out;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-bar-end {
+    grid-area: bar-end;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-bar-end--progress {
+    background-color: var(--vbr-widget-gamecenter-away-team-identifier-color);
+    outline: 1px solid var(--vbr-widget-gamecenter-away-team-identifier-border-color);
+    outline-offset: -1px;
+    height: 100%;
+  }
+
+.mjsz-vbr-statistics-double-bar .is-title {
+    grid-area: title;
+
+    justify-self: center;
+    font-size: var(--vbr-widget-typography-text-sm-size);
+    font-weight: 700;
+    line-height: 1.5rem;
+    color: var(--vbr-widget-primary-color-500);
+  }

package/dist/css/variables.css

@@ -132,6 +132,7 @@
   --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
   --vbr-widget-badge-font-size: 0.625rem;
   --vbr-widget-badge-large-font-size: 0.6875rem;
+  --vbr-widget-badge-extra-large-font-size: 0.8125rem;
 
   --vbr-widget-tab-btn-padding: 0.625rem 1rem;
   --vbr-widget-tab-btn-font-size: var();
@@ -197,14 +198,39 @@
   --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
 
   --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
-  --vbr-widget-gamecenter-events-evented-person-weight: 500;
+  --vbr-widget-gamecenter-events-evented-person-weight: 600;
   --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
   --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
   --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
   --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
   --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
+  --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
+
+  --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
+  --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
+
+  --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
+
+  --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
+  --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
+  --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
+  --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
 
   --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
 
   --vbr-widget-sticky-top-offset: 0;
+
+  --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
+  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
+  --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
+  --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
+  --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
+  --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mjsz-vbr-elements/shared",
   "private": false,
-  "version": "2.7.2",
+  "version": "2.9.0",
   "author": "Ákos Stegner <akos.stegner@gmail.com>",
   "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
   "type": "module",