@mjsz-vbr-elements/shared 2.1.0-beta.53 → 2.1.0-beta.55

package/dist/css/cards.css

@@ -99,3 +99,48 @@
   margin: 20px 0;
   border-bottom: 1px solid var(--vbr-widget-primary-color-200);
 }
+
+.mjsz-vbr-main-image-wrapper {
+  --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);
+}
+
+.mjsz-vbr-main-image-wrapper:has(img.is-default) {
+    min-height: 470px;
+  }
+
+.mjsz-vbr-main-image-wrapper .is-main-image {
+    grid-column: 1/4;
+    grid-row: 1/5;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: var(--vbr-widget-primary-color-50);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  }
+
+.mjsz-vbr-main-image-wrapper .is-main-image .is-default {
+      filter: grayscale(1);
+      opacity: 0.3;
+      mix-blend-mode: multiply;
+    }
+
+.mjsz-vbr-main-image-wrapper .is-ovarlay-image {
+    grid-row: 4/-1;
+    grid-column: 2;
+    justify-self: center;
+    overflow: hidden;
+    border-radius: var(--overlay-radius);
+    z-index: 1;
+  }
+
+.mjsz-vbr-main-image-wrapper .is-ovarlay-image img {
+      width: 100%;
+      aspect-ratio: 1;
+    }

package/dist/css/common.css

@@ -80,6 +80,12 @@ ul {
   --vbr-widget-typography-text-lg-lineheight: 2rem; /* 32px */
   --vbr-widget-typography-text-xl-size: 1.25rem; /* 20px */
   --vbr-widget-typography-text-xl-lineheight: 2rem; /* 32px */
+  --vbr-widget-typography-text-2xl-size: 1.5rem; /* 24px */
+  --vbr-widget-typography-text-2xl-lineheight: 2.5rem; /* 40px */
+  --vbr-widget-typography-text-3xl-size: 1.75rem; /* 28px */
+  --vbr-widget-typography-text-3xl-lineheight: 2.5rem; /* 40px */
+  --vbr-widget-typography-text-4xl-size: 2rem; /* 32px */
+  --vbr-widget-typography-text-4xl-lineheight: 2.75rem; /* 44px */
   --vbr-widget-typography-heading-weight: 500;
 
   --vbr-widget-table-header-font-size: var(--vbr-widget-typography-text-xs-size);
@@ -108,6 +114,7 @@ ul {
   --vbr-widget-table-label-bg-color: var(--vbr-widget-primary-color-50);
   --vbr-widget-table-cell-logo-size: 20px;
   --vbr-widget-table-cell-portrait-size: 26px;
+  --vbr-widget-table-zero-color: var(--vbr-widget-primary-color-200);
 
   --vbr-widget-paginator-color: var(--vbr-widget-primary-color-500);
   --vbr-widget-paginator-bg-color: var(--vbr-widget-primary-color-0);

package/dist/css/grid.css

@@ -11,6 +11,10 @@
   flex: 1 0 0%;
 }
 
+.g-gap-normal {
+  gap: 16px;
+}
+
 [class^='g-col-'] {
   flex: 0 0 auto;
 }

package/dist/css/table.css

@@ -83,6 +83,15 @@
       background-color: var(--vbr-widget-table-active-bg-color);
     }
 
+  .mjsz-vbr-table td.is-zero {
+      color: var(--vbr-widget-table-zero-color);
+    }
+
+  .mjsz-vbr-table td.is-possible-empty:empty:before {
+      content: '0';
+      color: var(--vbr-widget-table-zero-color);
+    }
+
   .mjsz-vbr-table td .is-text-light,
     .mjsz-vbr-table td.is-text-light {
       color: var(--vbr-widget-table-cell-light-color);
@@ -126,7 +135,7 @@
     }
 
   .mjsz-vbr-table td.is-text-xl {
-      font-size: 1.2 rem;
+      font-size: 1.2rem;
     }
 
   .mjsz-vbr-table td .is-text-accent {

package/dist/css/teams.css

@@ -21,55 +21,3 @@
     width: 100%;
     aspect-ratio: 1;
   }
-
-.mjsz-vbr-team-image-wrapper {
-  position: relative;
-  margin-bottom: 100px;
-}
-
-.mjsz-vbr-team-image-wrapper .is-team-picture {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 120px;
-    width: 100%;
-    background-color: var(--vbr-widget-primary-color-50);
-    overflow: hidden;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-  }
-
-.mjsz-vbr-team-image-wrapper .is-team-picture img {
-      object-fit: cover;
-    }
-
-@media all and (min-width: 576px) {
-
-.mjsz-vbr-team-image-wrapper .is-team-picture {
-      height: 320px;
-  }
-  }
-
-@media all and (min-width: 768px) {
-
-.mjsz-vbr-team-image-wrapper .is-team-picture {
-      height: 420px;
-  }
-  }
-
-.mjsz-vbr-team-image-wrapper .is-team-logo {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    display: block;
-    width: 80px;
-    height: 80px;
-    transform: translate(-50%, 50%);
-  }
-
-@media all and (min-width: 576px) {
-
-.mjsz-vbr-team-image-wrapper .is-team-logo {
-      width: 160px;
-      height: 160px
-  }
-  }

package/dist/css/typography.css

@@ -30,6 +30,10 @@
   font-size: var(--vbr-widget-typography-text-xl-size);
   line-height: var(--vbr-widget-typography-text-xl-lineheight);
 }
+.is-text-4xl {
+  font-size: var(--vbr-widget-typography-text-4xl-size);
+  line-height: var(--vbr-widget-typography-text-4xl-lineheight);
+}
 .is-uppercase {
   text-transform: uppercase;
 }
@@ -75,3 +79,22 @@
   margin-block-start: var(--vbr-widget-typography-text-base-size);
   margin-block-end: calc(var(--vbr-widget-typography-text-base-size) / 2);
 }
+.is-rounded {
+  overflow: hidden;
+  border-radius: 100%;
+}
+.is-rounded + .is-rounded {
+    margin-left: 3px;
+  }
+.is-rounded img {
+    display: block;
+  }
+.is-w-5 {
+  width: 16px;
+}
+.is-w-7 {
+  width: 24px;
+}
+.is-w-10 {
+  width: 32px;
+}

package/package.json

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