@mjsz-vbr-elements/shared 2.32.0 → 2.33.1

package/assets/css/components/game-center.css

@@ -0,0 +1,275 @@
+@layer components.variables {
+  :where(:host) {
+    /* --mvw-gamecenter-stats-bg-color: var(--mvw-color-primary-50); */
+    /* --mvw-gamecenter-stats-border-color: var(--mvw-color-primary-100); */
+    --mvw-gamecenter-stats-title-size: var(--font-size-300);
+    /* --mvw-gamecenter-stats-title-color: var(--mvw-color-primary-400); */
+    --mvw-gamecenter-stats-size: var(--font-size-500);
+    /* --mvw-gamecenter-stats-color: var(--mvw-color-primary-800); */
+
+    --mvw-gamecenter-period-header-bg-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-300));
+    --mvw-gamecenter-period-header-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-900));
+    --mvw-gamecenter-period-header-size: var(--font-size-300);
+    --mvw-gamecenter-period-header-weight: 500;
+
+    --mvw-gamecenter-team-container-title-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
+    --mvw-gamecenter-team-container-title-bg-color: light-dark(
+      var(--mvw-color-primary-100),
+      var(--mvw-color-primary-800)
+    );
+    --mvw-gamecenter-team-container-border-color: light-dark(
+      var(--mvw-color-primary-100),
+      var(--mvw-color-primary-800)
+    );
+
+    --mvw-gamecenter-events-evented-person-size: var(--font-size-500);
+    --mvw-gamecenter-events-evented-person-weight: 600;
+    --mvw-gamecenter-events-assitst-list-size: var(--font-size-400);
+    --mvw-gamecenter-events-poi-list-size: var(--font-size-200);
+    --mvw-gamecenter-events-score-size: var(--font-size-500);
+    --mvw-gamecenter-events-penalty-size: var(--font-size-400);
+    --mvw-gamecenter-events-goalie-direction-size: var(--font-size-400);
+    /* --mvw-gamecenter-events-timeout-bg-color: #2870ed; */
+
+    --mvw-gamecenter-card-title-color: var(--mvw-color-primary-900);
+    --mvw-gamecenter-card-secondary-color: var(--mvw-color-primary-500);
+    --mvw-gamecenter-card-tertiary-color: var(--mvw-color-primary-300);
+    --mvw-gamecenter-card-border-color: var(--mvw-color-primary-100);
+    --mvw-gamecenter-card-bg-color: var(--mvw-color-primary-0);
+
+    --mvw-gamecenter-card-event-goal-border-color: var(--mvw-color-primary-700);
+    --mvw-gamecenter-card-event-goal-bg-color: var(--mvw-color-primary-700);
+  }
+}
+
+@layer components {
+  :where(.gamecenter-game-stats-container-wrapper) {
+    --columns: 1fr;
+
+    display: grid;
+    grid-template-columns: var(--columns);
+    gap: var(--size-16);
+    justify-items: center;
+
+    .is-popover-content {
+      padding: var(--size-16);
+      width: max-content;
+
+      dl + dl {
+        margin-block-start: var(--size-12);
+      }
+    }
+
+    @media (width > 768px) {
+      --columns: repeat(2, 1fr);
+    }
+    @media (width > 992px) {
+      --columns: repeat(3, 1fr);
+    }
+  }
+
+  :where(.gamecenter-game-stats-container) {
+    text-align: center;
+
+    dt {
+      font-size: var(--mvw-gamecenter-stats-title-size);
+      color: var(--mvw-gamecenter-stats-title-color, var(--mvw-text-dimmed));
+      text-transform: uppercase;
+
+      button {
+        width: var(--mvw-gamecenter-stats-title-size);
+      }
+    }
+
+    dd {
+      font-size: var(--mvw-gamecenter-stats-size);
+      color: var(--mvw-gamecenter-stats-color, var(--mvw-text-default));
+    }
+  }
+
+  :where(.gamecenter-game-events) {
+    container-name: rows;
+    container-type: inline-size;
+    margin-bottom: var(--size-16);
+    border: 1px solid var(--mvw-gamecenter-stats-border-color);
+
+    .is-period-header {
+      padding: var(--size-8) var(--size-16);
+      font-size: var(--mvw-gamecenter-period-header-size);
+      font-weight: var(--mvw-gamecenter-period-header-weight);
+      text-align: center;
+      text-transform: uppercase;
+      color: var(--mvw-gamecenter-period-header-color);
+      background-color: var(--mvw-gamecenter-period-header-bg-color);
+    }
+
+    .is-no-action {
+      padding: var(--size-8);
+      text-align: center;
+    }
+  }
+
+  :where(.gamecenter-game-event) {
+    --cols: 1fr 1fr 1fr 1fr 1fr 1fr 6fr;
+    display: grid;
+    grid-template-columns: var(--cols);
+    align-items: center;
+    color: var(--mvw-text-default);
+
+    @container rows (max-width: 500px) {
+      --cols: 1fr 1fr 1fr 1fr 1fr 1fr;
+
+      > *:last-of-type {
+        grid-column: 2/7;
+      }
+    }
+
+    &:nth-child(odd) {
+      background-color: var(--mvw-table-stripped-bg-color);
+    }
+
+    > * {
+      padding: var(--size-12);
+    }
+
+    .is-team-logo-cell {
+      span {
+        display: inline-block;
+      }
+
+      img {
+        display: block;
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .is-icon-cell {
+      svg {
+        width: 25px;
+        height: 25px;
+      }
+    }
+
+    .is-penalty-icon {
+      color: var(--mvw-text-dimmed);
+    }
+
+    .is-goal-so-icon {
+      color: var(--mvw-text-muted);
+    }
+
+    .is-goal-icon {
+      color: var(--mvw-color-error);
+    }
+
+    .is-timer-icon {
+      color: var(--mvw-color-secondary-500);
+    }
+
+    .is-goalie-in-icon {
+      color: var(--mvw-color-secondary-500);
+    }
+
+    .is-goalie-out-icon {
+      color: var(--mvw-color-error);
+    }
+
+    .is-time-cell {
+      font-weight: 700;
+    }
+
+    .is-penalty-cell {
+      font-size: var(--mvw-gamecenter-events-penalty-size);
+      text-align: center;
+    }
+
+    .is-score {
+      font-size: var(--mvw-gamecenter-events-score-size);
+      font-weight: 700;
+      text-align: center;
+      color: var(--mvw-color-error);
+    }
+
+    .is-score-so {
+      font-size: var(--mvw-gamecenter-events-score-size);
+      font-weight: 700;
+      text-align: center;
+      color: var(--mvw-text-muted);
+    }
+
+    .is-score-so-goal {
+      color: var(--mvw-color-live);
+    }
+
+    .is-goalie-direction {
+      font-size: var(--mvw-gamecenter-events-goalie-direction-size);
+      text-align: center;
+      color: var(--mvw-text-dimmed);
+    }
+
+    .is-evented-person {
+      font-size: var(--mvw-gamecenter-events-evented-person-size);
+      font-weight: var(--mvw-gamecenter-events-evented-person-weight);
+    }
+
+    .is-assists-list {
+      font-size: var(--mvw-gamecenter-events-assitst-list-size);
+      color: var(--mvw-text-dimmed);
+
+      span::after {
+        content: ' / ';
+      }
+
+      span:last-child::after {
+        content: '';
+      }
+    }
+
+    .is-poi-data {
+      font-size: var(--mvw-gamecenter-events-poi-list-size);
+      color: var(--mvw-text-dimmed);
+
+      ul {
+        display: inline-flex;
+        padding: 0;
+        list-style-type: none;
+
+        li {
+          &::after {
+            content: ',';
+            margin-right: 2px;
+          }
+        }
+
+        li:last-child::after {
+          content: '';
+        }
+      }
+    }
+
+    .is-player-number {
+      font-weight: 400;
+      font-style: italic;
+      color: var(--mvw-text-muted);
+    }
+
+    .is-light-cell {
+      color: var(--mvw-text-dimmed);
+    }
+  }
+
+  :where(.gamecenter-data-table) {
+    border: 1px solid var(--mvw-gamecenter-team-container-border-color);
+    min-width: 0;
+
+    h3 {
+      padding: var(--size-8);
+      margin: 0;
+      font-size: var(--mvw-gamecenter-team-container-title-size);
+      font-weight: 500;
+      color: var(--mvw-gamecenter-team-container-title-color);
+      background-color: var(--mvw-gamecenter-team-container-title-bg-color);
+    }
+  }
+}

package/assets/css/components/game-item.css

@@ -0,0 +1,35 @@
+@layer components {
+  :where(.card-item) {
+    --_grid-template-areas: 'name name name name name' 'date date date date date'
+      'home-team home-team-logo game-data away-team-logo away-team';
+
+    display: grid;
+    grid-gap: var(--size-8);
+    grid-template-columns: 1fr 20px 1.5fr 20px 1fr;
+    grid-template-areas: var(--_grid-template-areas);
+    padding: var(--size-16);
+    align-items: center;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid var(--mvw-border-faded);
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      aspect-ratio: 1;
+    }
+
+    .game-result {
+      color: var(--mvw-text-highlighted);
+
+      &.is-live {
+        color: var(--mvw-color-live);
+      }
+    }
+
+    @container card-wrapper (width > 768px) {
+      grid-template-columns: 2fr 40px 1fr 40px 2fr;
+    }
+  }
+}

package/assets/css/components/games-timeline.css

@@ -0,0 +1,280 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-games-timeline-game-date-size: var(--font-size-100);
+    --mvw-games-timeline-game-team-size: var(--font-size-300);
+    --mvw-games-timeline-game-status-size: var(--font-size-200);
+    --mvw-games-timeline-game-hover-bg-color: linear-gradient(
+      light-dark(var(--mvw-color-white), var(--mvw-color-primary-950)),
+      light-dark(
+          hsl(from var(--mvw-color-white) h s calc(l - 5)),
+          hsl(from var(--mvw-color-primary-950) h s calc(l + 5))
+        )
+        50%,
+      light-dark(var(--mvw-color-white), var(--mvw-color-primary-950))
+    );
+  }
+}
+
+@layer components {
+  :where(.games-timeline) {
+    display: grid;
+    grid-template-columns: 30px 1fr 30px;
+    align-items: center;
+    height: 100%;
+
+    container-type: inline-size;
+    container-name: games-timeline;
+
+    > div {
+      display: flex;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scroll-snap-type: x mandatory;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .is-slide {
+      flex-shrink: 0;
+      flex-grow: 0;
+      flex-basis: 100%;
+      scroll-snap-align: start;
+
+      @container games-timeline (width > 375px) {
+        flex-basis: 50%;
+      }
+      @container games-timeline (width > 500px) {
+        flex-basis: 33.3334%;
+      }
+      @container games-timeline (width > 700px) {
+        flex-basis: 25%;
+      }
+      @container games-timeline (width > 880px) {
+        flex-basis: 20%;
+      }
+    }
+
+    > button {
+      position: relative;
+      display: grid;
+      place-content: center;
+      height: 100%;
+
+      svg {
+        display: block;
+        height: 22px;
+        width: 22px;
+        color: var(--mvw-text-dimmed);
+        transition: all 0.2s;
+      }
+
+      &:hover {
+        svg {
+          color: var(--mvw-text-muted);
+        }
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        svg {
+          color: var(--mvw-text-faded);
+        }
+      }
+
+      &:before,
+      &:after {
+        position: absolute;
+        content: '';
+        top: 10px;
+        height: 90px;
+        transition: opacity 0.2s;
+      }
+
+      &:first-of-type:after {
+        right: 0;
+        border-right: 1px solid var(--mvw-border-faded);
+        box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.1);
+      }
+      &:last-of-type:before {
+        left: 0;
+        border-left: 1px solid var(--mvw-border-faded);
+        box-shadow: -1px 0 3px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      &:disabled:first-of-type:after,
+      &:disabled:last-of-type:before {
+        opacity: 0;
+      }
+    }
+
+    .is-no-games {
+      width: 100%;
+      text-align: center;
+      color: var(--mvw-text-muted);
+    }
+  }
+
+  .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;
+
+    &:hover {
+      background-image: var(--mvw-games-timeline-game-hover-bg-color);
+    }
+
+    time {
+      grid-area: gamedate;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: var(--mvw-games-timeline-game-date-size);
+      font-weight: 700;
+      color: var(--mvw-text-muted);
+    }
+
+    .is-home-team-logo {
+      grid-area: home-logo;
+    }
+    .is-away-team-logo {
+      grid-area: away-logo;
+    }
+    :is(.is-home-team-logo, .is-away-team-logo) {
+      .is-team-logo {
+        display: block;
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    :is(.is-home-team-name, .is-away-team-name) {
+      justify-self: start;
+      font-size: var(--mvw-games-timeline-game-team-size);
+      font-weight: 700;
+      color: var(--mvw-text-default);
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .is-home-team-name {
+      grid-area: home-team;
+    }
+    .is-away-team-name {
+      grid-area: away-team;
+    }
+
+    .is-home-team-score {
+      grid-area: home-score;
+    }
+    .is-away-team-score {
+      grid-area: away-score;
+    }
+
+    .is-status {
+      grid-area: status;
+      font-size: var(--mvw-games-timeline-game-status-size);
+      color: var(--mvw-text-dimmed);
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: center;
+    }
+  }
+
+  .games-timeline-schedule-link {
+    display: grid;
+    place-content: center;
+    height: 100%;
+
+    &:hover {
+      background-image: var(--mvw-games-timeline-game-hover-bg-color);
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      font-size: var(--font-size-200);
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--mvw-text-toned);
+
+      svg {
+        display: inline-block;
+        width: 14px;
+      }
+    }
+  }
+
+  .games-timeline-error-indicator {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    place-content: center;
+    width: 100%;
+    font-size: var(--font-size-400);
+    font-weight: 500;
+    color: var(--mvw-color-error);
+
+    svg {
+      display: block;
+      width: 20px;
+    }
+
+    button {
+      text-decoration: underline;
+    }
+  }
+
+  .score-display {
+    height: 20px;
+    padding: 0 5px !important;
+
+    .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%);
+
+      > span {
+        grid-area: stack;
+        line-height: 20px;
+      }
+    }
+
+    .is-slide-transition-enter-active,
+    .is-slide-transition-leave-active {
+      transition: all 420ms linear;
+    }
+
+    .is-slide-transition-enter-from {
+      transform: translateY(100%);
+    }
+
+    .is-slide-transition-enter-to {
+      transform: translateY(0);
+    }
+
+    .is-slide-transition-leave-from {
+      transform: translateY(0);
+    }
+
+    .is-slide-transition-leave-to {
+      transform: translateY(-100%);
+    }
+  }
+}

package/assets/css/components/hero.css

@@ -0,0 +1,51 @@
+@layer components {
+  :where(.hero) {
+    --overlay-size: var(--mvw-hero-overlay-size, 160px);
+    --overlay-radius: 50%;
+
+    display: grid;
+    grid-template-columns: 1fr var(--overlay-size) 1fr;
+    grid-template-rows: 1fr 1fr 1fr calc(var(--overlay-size) / 2) calc(var(--overlay-size) / 2);
+    margin-left: var(--mvw-main-image-wrapper-horizontal-margin);
+    margin-right: var(--mvw-main-image-wrapper-horizontal-margin);
+
+    &:has(img.is-default) {
+      min-height: 470px;
+    }
+
+    .is-main-image {
+      grid-column: 1/4;
+      grid-row: 1/5;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      background-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+
+      .is-default {
+        filter: grayscale(1);
+        opacity: 0.3;
+        mix-blend-mode: multiply;
+      }
+
+      img:not(.is-default) {
+        width: 100%;
+      }
+    }
+    .is-ovarlay-image {
+      grid-row: 4/-1;
+      grid-column: 2;
+      justify-self: center;
+      overflow: hidden;
+      border-radius: var(--overlay-radius);
+      z-index: 1;
+
+      img {
+        width: 100%;
+        aspect-ratio: 1;
+      }
+    }
+  }
+}

package/assets/css/components/icon-button.css

@@ -0,0 +1,30 @@
+@layer components {
+  :where(.icon-button) {
+    /* --_text-color: inherit; */
+    --_hover-bg-color: color-mix(in oklab, light-dark(var(--mvw-color-black), var(--mvw-color-white)) 10%, transparent);
+
+    align-items: center;
+    aspect-ratio: 1;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--radius-2);
+    display: inline-flex;
+    inline-size: var(--size-24);
+    justify-content: center;
+    padding: 0;
+
+    svg {
+      max-inline-size: var(--size-16);
+      pointer-events: none;
+    }
+
+    &[data-state='open'],
+    &:hover {
+      background-color: var(--_hover-bg-color);
+    }
+
+    &.xs {
+      border-radius: var(--radius-1);
+    }
+  }
+}