@mjsz-vbr-elements/shared 2.9.0 → 2.10.0

package/dist/css/game-center.css

@@ -1,53 +1,56 @@
+/* --vbr-widget-typography-font-size-50
+--vbr-widget-typography-font-lineheight-50 */
+
 .mjsz-vbr-gamecenter-game-data {
     margin-bottom: 30px;
     text-align: center;
   }
 
-    .mjsz-vbr-gamecenter-game-data .is-teams-and-results {
+.mjsz-vbr-gamecenter-game-data .is-teams-and-results {
       display: grid;
       grid-template-columns: 1fr;
       justify-items: center;
       align-items: flex-end;
     }
 
-    @media all and (min-width: 576px) {
+@media all and (min-width: 576px) {
 
-    .mjsz-vbr-gamecenter-game-data .is-teams-and-results {
+.mjsz-vbr-gamecenter-game-data .is-teams-and-results {
         grid-template-columns: repeat(3, 1fr)
     }
   }
 
-    .mjsz-vbr-gamecenter-game-data .is-title-container {
+.mjsz-vbr-gamecenter-game-data .is-title-container {
       margin-bottom: 30px;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-title {
+.mjsz-vbr-gamecenter-game-data .is-title {
       color: var(--vbr-widget-gamecenter-title-color);
       font-size: var(--vbr-widget-gamecenter-title-size);
       font-weight: var(--vbr-widget-gamecenter-title-weight);
       text-transform: uppercase;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-gamedate {
+.mjsz-vbr-gamecenter-game-data .is-gamedate {
       color: var(--vbr-widget-gamecenter-gamedate-color);
       font-size: var(--vbr-widget-gamecenter-gamedate-size);
       text-transform: uppercase;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-local-gamedate {
+.mjsz-vbr-gamecenter-game-data .is-local-gamedate {
       color: var(--vbr-widget-gamecenter-local-gamedate-color);
       font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
       text-transform: uppercase;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-game-result {
+.mjsz-vbr-gamecenter-game-data .is-game-result {
       color: var(--vbr-widget-gamecenter-result-color);
       font-weight: var(--vbr-widget-gamecenter-result-weight);
       font-size: var(--vbr-widget-gamecenter-result-size);
       line-height: var(--vbr-widget-gamecenter-result-size);
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-team-name {
+.mjsz-vbr-gamecenter-game-data .is-team-name {
       display: block;
       padding: 8px 0;
       color: var(--vbr-widget-gamecenter-teamname-color);
@@ -55,71 +58,75 @@
       font-size: var(--vbr-widget-gamecenter-teamname-size);
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-game-status {
+.mjsz-vbr-gamecenter-game-data .is-game-status {
       color: var(--vbr-widget-gamecenter-gamestatus-color);
       font-size: var(--vbr-widget-gamecenter-gamestatus-size);
       text-transform: uppercase;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-period-results {
+.mjsz-vbr-gamecenter-game-data .is-period-results {
       color: var(--vbr-widget-gamecenter-periodresults-color);
       font-size: var(--vbr-widget-gamecenter-periodresults-size);
       font-weight: 500;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-team-logo {
+.mjsz-vbr-gamecenter-game-data .is-team-logo {
       margin: auto;
       display: block;
       width: 128px;
       height: 128px;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-game-status-live {
+.mjsz-vbr-gamecenter-game-data .is-game-status-live {
       color: var(--vbr-widget-live-game-color);
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-external-contents {
+.mjsz-vbr-gamecenter-game-data .is-external-contents {
       padding: 5px;
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    .mjsz-vbr-gamecenter-game-data .is-external-contents a {
+.mjsz-vbr-gamecenter-game-data .is-external-contents a {
         display: flex;
         align-items: center;
         font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
       }
 
-    .mjsz-vbr-gamecenter-game-data .is-external-contents a:after {
+.mjsz-vbr-gamecenter-game-data .is-external-contents a:after {
           content: '/';
           margin: 0 5px;
         }
 
-    .mjsz-vbr-gamecenter-game-data .is-external-contents a:last-of-type:after {
+.mjsz-vbr-gamecenter-game-data .is-external-contents a:last-of-type:after {
           content: '';
         }
 
-    .mjsz-vbr-gamecenter-game-data .is-external-contents .is-icon {
+.mjsz-vbr-gamecenter-game-data .is-external-contents .is-icon {
         margin-right: 5px;
         display: inline-block;
         width: 15px;
         height: 15px;
       }
-  .mjsz-vbr-gamecenter-game-stats {
+
+.mjsz-vbr-gamecenter-game-stats {
     margin-bottom: 20px;
   }
-  .mjsz-vbr-gamecenter-game-stats [data-placement] {
+
+.mjsz-vbr-gamecenter-game-stats [data-placement] {
       z-index: 1000;
     }
-  .mjsz-vbr-gamecenter-game-stats .is-popover-content {
+
+.mjsz-vbr-gamecenter-game-stats .is-popover-content {
       display: flex;
       flex-direction: column;
       gap: 20px;
       padding: 16px;
       background-color: var(--vbr-widget-primary-color-50);
     }
-  .mjsz-vbr-gamecenter-game-stats-container-wrapper {
+
+.mjsz-vbr-gamecenter-game-stats-container-wrapper {
     --columns: 1fr;
 
     display: grid;
@@ -130,38 +137,48 @@
     background-color: var(--vbr-widget-gamecenter-stats-bg-color);
     border: 1px solid var(--vbr-widget-gamecenter-stats-border-color);
   }
-  @media all and (min-width: 768px) {
-  .mjsz-vbr-gamecenter-game-stats-container-wrapper {
+
+@media all and (min-width: 768px) {
+
+.mjsz-vbr-gamecenter-game-stats-container-wrapper {
       --columns: repeat(2, 1fr)
   }
   }
-  @media all and (min-width: 992px) {
-  .mjsz-vbr-gamecenter-game-stats-container-wrapper {
+
+@media all and (min-width: 992px) {
+
+.mjsz-vbr-gamecenter-game-stats-container-wrapper {
       --columns: repeat(3, 1fr)
   }
   }
-  .mjsz-vbr-gamecenter-game-stats-container {
+
+.mjsz-vbr-gamecenter-game-stats-container {
     text-align: center;
   }
-  .mjsz-vbr-gamecenter-game-stats-container dt {
+
+.mjsz-vbr-gamecenter-game-stats-container dt {
       font-size: var(--vbr-widget-gamecenter-stats-title-size);
       color: var(--vbr-widget-gamecenter-stats-title-color);
       text-transform: uppercase;
     }
-  .mjsz-vbr-gamecenter-game-stats-container dt button {
+
+.mjsz-vbr-gamecenter-game-stats-container dt button {
         width: var(--vbr-widget-gamecenter-stats-title-size);
       }
-  .mjsz-vbr-gamecenter-game-stats-container dd {
+
+.mjsz-vbr-gamecenter-game-stats-container dd {
       font-size: var(--vbr-widget-gamecenter-stats-size);
       color: var(--vbr-widget-gamecenter-stats-color);
     }
-  .mjsz-vbr-gamecenter-game-events {
+
+.mjsz-vbr-gamecenter-game-events {
     container-name: rows;
     container-type: inline-size;
     margin-bottom: 20px;
     border: 1px solid var(--vbr-widget-gamecenter-stats-border-color);
   }
-  .mjsz-vbr-gamecenter-game-events .is-period-header {
+
+.mjsz-vbr-gamecenter-game-events .is-period-header {
       padding: 10px 20px;
       font-size: var(--vbr-widget-gamecenter-period-header-size);
       font-weight: var(--vbr-widget-gamecenter-period-header-weight);
@@ -170,18 +187,22 @@
       color: var(--vbr-widget-gamecenter-period-header-color);
       background-color: var(--vbr-widget-gamecenter-period-header-bg-color);
     }
-  .mjsz-vbr-gamecenter-game-events .is-no-action {
+
+.mjsz-vbr-gamecenter-game-events .is-no-action {
       padding: 10px;
       text-align: center;
     }
-  .mjsz-vbr-gamecenter-game-event {
+
+.mjsz-vbr-gamecenter-game-event {
     --cols: 1fr 1fr 1fr 1fr 1fr 1fr 6fr;
     display: grid;
     grid-template-columns: var(--cols);
     align-items: center;
   }
-  @container rows (max-width: 500px) {
-  .mjsz-vbr-gamecenter-game-event {
+
+@container rows (max-width: 500px) {
+
+.mjsz-vbr-gamecenter-game-event {
       --cols: 1fr 1fr 1fr 1fr 1fr 1fr
   }
 
@@ -189,117 +210,147 @@
         grid-column: 2/7;
       }
     }
-  .mjsz-vbr-gamecenter-game-event:nth-child(odd) {
+
+.mjsz-vbr-gamecenter-game-event:nth-child(odd) {
       background-color: var(--vbr-widget-table-stripped-bg-color);
     }
-  .mjsz-vbr-gamecenter-game-event > * {
+
+.mjsz-vbr-gamecenter-game-event > * {
       padding: 10px;
     }
-  .mjsz-vbr-gamecenter-game-event .is-team-logo-cell span {
+
+.mjsz-vbr-gamecenter-game-event .is-team-logo-cell span {
         display: inline-block;
       }
-  .mjsz-vbr-gamecenter-game-event .is-team-logo-cell img {
+
+.mjsz-vbr-gamecenter-game-event .is-team-logo-cell img {
         display: block;
         width: 40px;
         height: 40px;
       }
-  .mjsz-vbr-gamecenter-game-event .is-icon-cell svg {
+
+.mjsz-vbr-gamecenter-game-event .is-icon-cell svg {
         width: 25px;
         height: 25px;
       }
-  .mjsz-vbr-gamecenter-game-event .is-penalty-icon {
+
+.mjsz-vbr-gamecenter-game-event .is-penalty-icon {
       color: var(--vbr-widget-primary-color-300);
     }
-  .mjsz-vbr-gamecenter-game-event .is-goal-so-icon {
+
+.mjsz-vbr-gamecenter-game-event .is-goal-so-icon {
       color: var(--vbr-widget-primary-color-500);
     }
-  .mjsz-vbr-gamecenter-game-event .is-goal-icon {
+
+.mjsz-vbr-gamecenter-game-event .is-goal-icon {
       color: var(--vbr-widget-danger-color-a400);
     }
-  .mjsz-vbr-gamecenter-game-event .is-timer-icon {
+
+.mjsz-vbr-gamecenter-game-event .is-timer-icon {
       color: var(--vbr-widget-secondary-color-500);
     }
-  .mjsz-vbr-gamecenter-game-event .is-goalie-in-icon {
+
+.mjsz-vbr-gamecenter-game-event .is-goalie-in-icon {
       color: var(--vbr-widget-secondary-color-500);
     }
-  .mjsz-vbr-gamecenter-game-event .is-goalie-out-icon {
+
+.mjsz-vbr-gamecenter-game-event .is-goalie-out-icon {
       color: var(--vbr-widget-danger-color-a400);
     }
-  .mjsz-vbr-gamecenter-game-event .is-time-cell {
+
+.mjsz-vbr-gamecenter-game-event .is-time-cell {
       font-weight: 700;
     }
-  .mjsz-vbr-gamecenter-game-event .is-penalty-cell {
+
+.mjsz-vbr-gamecenter-game-event .is-penalty-cell {
       font-size: var(--vbr-widget-gamecenter-events-penalty-size);
       text-align: center;
     }
-  .mjsz-vbr-gamecenter-game-event .is-score {
+
+.mjsz-vbr-gamecenter-game-event .is-score {
       font-size: var(--vbr-widget-gamecenter-events-score-size);
       font-weight: 700;
       text-align: center;
       color: var(--vbr-widget-danger-color-a400);
     }
-  .mjsz-vbr-gamecenter-game-event .is-score-so {
+
+.mjsz-vbr-gamecenter-game-event .is-score-so {
       font-size: var(--vbr-widget-gamecenter-events-score-size);
       font-weight: 700;
       text-align: center;
       color: var(--vbr-widget-primary-color-500);
     }
-  .mjsz-vbr-gamecenter-game-event .is-score-so-goal {
+
+.mjsz-vbr-gamecenter-game-event .is-score-so-goal {
       color: var(--vbr-widget-live-game-color);
     }
-  .mjsz-vbr-gamecenter-game-event .is-goalie-direction {
+
+.mjsz-vbr-gamecenter-game-event .is-goalie-direction {
       font-size: var(--vbr-widget-gamecenter-events-goalie-direction-size);
       text-align: center;
       color: var(--vbr-widget-primary-color-400);
     }
-  .mjsz-vbr-gamecenter-game-event .is-evented-person {
+
+.mjsz-vbr-gamecenter-game-event .is-evented-person {
       font-size: var(--vbr-widget-gamecenter-events-evented-person-size);
       font-weight: var(--vbr-widget-gamecenter-events-evented-person-weight);
     }
-  .mjsz-vbr-gamecenter-game-event .is-assists-list {
+
+.mjsz-vbr-gamecenter-game-event .is-assists-list {
       font-size: var(--vbr-widget-gamecenter-events-assitst-list-size);
       color: var(--vbr-widget-primary-color-400);
     }
-  .mjsz-vbr-gamecenter-game-event .is-assists-list span::after {
+
+.mjsz-vbr-gamecenter-game-event .is-assists-list span::after {
         content: ' / ';
       }
-  .mjsz-vbr-gamecenter-game-event .is-assists-list span:last-child::after {
+
+.mjsz-vbr-gamecenter-game-event .is-assists-list span:last-child::after {
         content: '';
       }
-  .mjsz-vbr-gamecenter-game-event .is-poi-data {
+
+.mjsz-vbr-gamecenter-game-event .is-poi-data {
       font-size: var(--vbr-widget-gamecenter-events-poi-list-size);
       color: var(--vbr-widget-primary-color-400);
     }
-  .mjsz-vbr-gamecenter-game-event .is-poi-data ul {
+
+.mjsz-vbr-gamecenter-game-event .is-poi-data ul {
         display: inline-flex;
       }
-  .mjsz-vbr-gamecenter-game-event .is-poi-data ul li::after {
+
+.mjsz-vbr-gamecenter-game-event .is-poi-data ul li::after {
             content: ',';
             margin-right: 2px;
           }
-  .mjsz-vbr-gamecenter-game-event .is-poi-data ul li:last-child::after {
+
+.mjsz-vbr-gamecenter-game-event .is-poi-data ul li:last-child::after {
           content: '';
         }
-  .mjsz-vbr-gamecenter-game-event .is-player-number {
+
+.mjsz-vbr-gamecenter-game-event .is-player-number {
       font-weight: 400;
       font-style: italic;
       color: var(--vbr-widget-primary-color-500);
     }
-  .mjsz-vbr-gamecenter-game-event .is-light-cell {
+
+.mjsz-vbr-gamecenter-game-event .is-light-cell {
       color: var(--vbr-widget-primary-color-400);
     }
-  .mjsz-vbr-gamecenter-data-table {
+
+.mjsz-vbr-gamecenter-data-table {
     border: 1px solid var(--vbr-widget-gamecenter-team-container-border-color);
     min-width: 0;
   }
-  .mjsz-vbr-gamecenter-data-table h2 {
+
+.mjsz-vbr-gamecenter-data-table h2 {
       padding: 8px;
       font-size: var(--vbr-widget-gamecenter-team-container-title-size);
       font-weight: 500;
       color: var(--vbr-widget-gamecenter-team-container-title-color);
       background-color: var(--vbr-widget-gamecenter-team-container-title-bg-color);
     }
-  .mjsz-vbr-gamecenter-data-columns {
+
+.mjsz-vbr-gamecenter-data-columns {
     --columns: 1fr;
 
     display: grid;
@@ -307,12 +358,15 @@
     gap: 20px;
     margin-bottom: 20px;
   }
-  @media all and (min-width: 576px) {
-  .mjsz-vbr-gamecenter-data-columns {
+
+@media all and (min-width: 576px) {
+
+.mjsz-vbr-gamecenter-data-columns {
       --columns: repeat(2, 1fr)
   }
   }
-  .mjsz-vbr-gamecenter-data-column {
+
+.mjsz-vbr-gamecenter-data-column {
     display: grid;
     gap: 20px;
     margin-bottom: 20px;

package/dist/css/games-timeline.css

@@ -15,18 +15,6 @@
     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 {
@@ -140,7 +128,7 @@
 
 .mjsz-vbr-games-timeline-game time {
     grid-area: gamedate;
-    font-size: 0.6875rem;
+    font-size: var(--vbr-widget-games-timeline-game-date-size);
     font-weight: 700;
     color: var(--vbr-widget-games-timeline-game-date-color);
   }
@@ -161,7 +149,7 @@
 
 .mjsz-vbr-games-timeline-game :is(.is-home-team-name, .is-away-team-name) {
     justify-self: start;
-    font-size: 0.8125rem;
+    font-size: var(--vbr-widget-games-timeline-game-team-size);
     font-weight: 700;
     color: var(--vbr-widget-games-timeline-game-team-color);
     overflow: hidden;
@@ -178,10 +166,6 @@
     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;
   }
@@ -192,7 +176,7 @@
 
 .mjsz-vbr-games-timeline-game .is-status {
     grid-area: status;
-    font-size: 0.75rem;
+    font-size: var(--vbr-widget-games-timeline-game-status-size);
     color: var(--vbr-widget-games-timeline-game-status-color);
     overflow: hidden;
     width: 100%;
@@ -214,7 +198,7 @@
 .mjsz-vbr-games-timeline-schedule-link button {
     display: flex;
     align-items: center;
-    font-size: 0.75rem;
+    font-size: var(--vbr-widget-games-timeline-external-link-size);
     font-weight: 700;
     text-transform: uppercase;
     color: var(--vbr-widget-games-timeline-external-link-color);
@@ -231,9 +215,8 @@
   align-items: center;
   place-content: center;
   width: 100%;
-  font-size: 0.875rem;
+  font-size: var(--vbr-widget-typography-font-size-400);
   font-weight: 500;
-  /* text-transform: uppercase; */
   color: var(--vbr-widget-error-notice-color);
 }
 
@@ -243,6 +226,45 @@
   }
 
 .mjsz-vbr-games-timeline-error-indicator button {
-    /* text-transform: uppercase; */
     text-decoration: underline;
   }
+
+.mjsz-vbr-score-display {
+  height: 20px;
+  padding: 0 5px !important;
+}
+
+.mjsz-vbr-score-display .is-score {
+    display: grid;
+    grid-template-areas: 'stack';
+    justify-items: center;
+    position: relative;
+    overflow: hidden;
+    mask-image: linear-gradient(to bottom, transparent 0, black 30%, black 70%, transparent 100%);
+  }
+
+.mjsz-vbr-score-display .is-score > span {
+      grid-area: stack;
+      line-height: 20px;
+    }
+
+.mjsz-vbr-score-display .is-slide-transition-enter-active,
+  .mjsz-vbr-score-display .is-slide-transition-leave-active {
+    transition: all 420ms linear;
+  }
+
+.mjsz-vbr-score-display .is-slide-transition-enter-from {
+    transform: translateY(-100%);
+  }
+
+.mjsz-vbr-score-display .is-slide-transition-enter-to {
+    transform: translateY(0);
+  }
+
+.mjsz-vbr-score-display .is-slide-transition-leave-from {
+    transform: translateY(0);
+  }
+
+.mjsz-vbr-score-display .is-slide-transition-leave-to {
+    transform: translateY(100%);
+  }

package/dist/css/grid.css

@@ -1,3 +1,6 @@
+/* --vbr-widget-typography-font-size-50
+--vbr-widget-typography-font-lineheight-50 */
+
 .g-row {
   display: flex;
 }