@mjsz-vbr-elements/shared 2.11.3 → 2.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mjsz-vbr-elements/shared",
   "type": "module",
-  "version": "2.11.3",
+  "version": "2.13.0",
   "private": false,
   "author": "Ákos Stegner <akos.stegner@gmail.com>",
   "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
@@ -12,9 +12,9 @@
     "./icons/*": {
       "import": "./dist/icons/*.js"
     },
-    "./css/*.css": {
-      "import": "./dist/css/*.css",
-      "require": "./dist/css/*.css"
+    "./css/*.scss": {
+      "import": "./assets/css/*.scss",
+      "require": "./assets/css/*.scss"
     }
   },
   "module": "./dist/icons/index.js",
@@ -23,24 +23,11 @@
   ],
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "@zeecoder/postcss-container-query": "^3.1.0",
     "glob": "^11.0.1",
-    "nodemon": "^3.1.9",
-    "postcss": "^8.4.49",
-    "postcss-import": "^16.1.0",
-    "postcss-media-minmax": "^5.0.0",
-    "postcss-mixins": "^11.0.3",
-    "postcss-nested": "^7.0.2",
-    "postcss-prefixer": "^3.0.0",
     "vite": "^6.0.7",
     "vite-svg-loader": "^5.1.0"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build && node scripts/convert-postcss.js",
-    "build:icons": "vite build",
-    "build:postcss": "node scripts/convert-postcss.js",
-    "build:postcss:watch": "nodemon --exec 'npm run build:postcss' --watch assets -e css",
-    "preview": "vite preview"
+    "build": "vite build"
   }
 }

package/dist/css/cards.css

@@ -1,173 +0,0 @@
-.is-card {
-  container-name: card-row;
-  container-type: inline-size;
-
-  background-color: #fff;
-  padding: 15px;
-  margin-bottom: 20px;
-  box-shadow:
-    0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    0 2px 2px 0 rgba(0, 0, 0, 0.1);
-}
-
-.is-card > div {
-  border-bottom: 1px solid var(--vbr-widget-primary-color-100);
-}
-
-.is-card > div:last-of-type {
-    border: none;
-  }
-
-.is-sticky {
-  position: sticky;
-  top: var(--vbr-widget-sticky-top-offset);
-  z-index: 10;
-}
-
-.is-blured-bg {
-  backdrop-filter: blur(10px);
-}
-
-.mjsz-vbr-card-item {
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: 2fr 1fr 2fr;
-  padding: 2rem 0;
-  border-bottom: 1px solid var(--vbr-widget-primary-color-100);
-}
-
-.mjsz-vbr-card-item.is-optional {
-    opacity: 0.4;
-    transition: opacity 0.3s ease-out;
-  }
-
-.mjsz-vbr-card-item.is-optional:hover {
-    opacity: 1;
-  }
-
-.mjsz-vbr-card-item svg {
-    display: block;
-  }
-
-.mjsz-vbr-card-item .is-team-name-short {
-    display: none;
-  }
-
-@container card-row (max-width: 640px) {
-    .mjsz-vbr-card-item .is-team-name-long {
-      display: none;
-    }
-    .mjsz-vbr-card-item .is-team-name-short {
-      display: block;
-    }
-  }
-
-.mjsz-vbr-card-item .is-info {
-    grid-column: 1/4;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--vbr-widget-primary-color-500);
-  }
-
-.mjsz-vbr-card-item .is-home-team {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: flex-end;
-    font-weight: 700;
-  }
-
-.mjsz-vbr-card-item .is-away-team {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: flex-start;
-    font-weight: 700;
-  }
-
-.mjsz-vbr-card-item .is-logo-image {
-    width: 40px;
-  }
-
-.mjsz-vbr-card-item .is-game-data {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-.mjsz-vbr-card-item .is-game-data a {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: var(--vbr-widget-primary-color-900);
-    }
-
-.mjsz-vbr-card-item .is-game-data a:hover {
-        color: var(--vbr-widget-primary-color-600);
-      }
-
-.mjsz-vbr-card-item .is-game-data.is-live {
-      color: var(--vbr-widget-live-game-color);
-    }
-
-.mjsz-vbr-card-item .is-game-data.is-live a {
-        color: var(--vbr-widget-live-game-color);
-      }
-
-.mjsz-vbr-section-selector {
-  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);
-  margin-left: var(--vbr-widget-main-image-wrapper-horizontal-margin);
-  margin-right: var(--vbr-widget-main-image-wrapper-horizontal-margin);
-}
-
-.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-main-image img:not(.is-default) {
-      width: 100%;
-    }
-
-.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

@@ -1,455 +0,0 @@
-h1,
-h2,
-h3,
-ul,
-li,
-p,
-dl,
-dt,
-dd {
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  font-family: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-
-  border-width: 0;
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-  cursor: pointer;
-}
-
-ol,
-ul {
-  list-style: none;
-}
-
-/* --vbr-widget-typography-font-size-50
---vbr-widget-typography-font-lineheight-50 */
-
-:root,
-:host {
-  font-family: 'Roboto Condensed', Avenir, Helvetica, Arial, sans-serif;
-
-  --vbr-widget-primary-color-0: #ffffff;
-  --vbr-widget-primary-color-50: #eceff1;
-  --vbr-widget-primary-color-100: #cfd8dc;
-  --vbr-widget-primary-color-200: #b0bec5;
-  --vbr-widget-primary-color-300: #90a4ae;
-  --vbr-widget-primary-color-400: #78909c;
-  --vbr-widget-primary-color-500: #607d8b;
-  --vbr-widget-primary-color-600: #546e7a;
-  --vbr-widget-primary-color-700: #455a64;
-  --vbr-widget-primary-color-800: #37474f;
-  --vbr-widget-primary-color-900: #263238;
-
-  --vbr-widget-secondary-color-100: #dcedc8;
-  --vbr-widget-secondary-color-200: #badb94;
-  --vbr-widget-secondary-color-300: #aed581;
-  --vbr-widget-secondary-color-400: #9ccc65;
-  --vbr-widget-secondary-color-500: #8bc34a;
-  --vbr-widget-secondary-color-700: #689f38;
-  --vbr-widget-secondary-color-800: #558b2f;
-  --vbr-widget-secondary-color-900: #33691e;
-
-  --vbr-widget-danger-color-50: #ffebee;
-  --vbr-widget-danger-color-100: #ffcdd2;
-  --vbr-widget-danger-color-200: #ef9a9a;
-  --vbr-widget-danger-color-300: #e57373;
-  --vbr-widget-danger-color-400: #ef5350;
-  --vbr-widget-danger-color-500: #f44336;
-  --vbr-widget-danger-color-700: #d32f2f;
-  --vbr-widget-danger-color-900: #b71c1c;
-  --vbr-widget-danger-color-a400: #ff1744;
-
-  --vbr-widget-live-game-color: #8bc34a;
-  --vbr-widget-neutral-color: #ffc107;
-
-  --vbr-widget-typography-font-size-50: 0.6275rem; /* 10px */
-  --vbr-widget-typography-font-size-100: 0.6875rem; /* 11px */
-  --vbr-widget-typography-font-size-200: 0.75rem; /* 12px */
-  --vbr-widget-typography-font-size-300: 0.8125rem; /* 13px */
-  --vbr-widget-typography-font-size-400: 0.875rem; /* 14px */
-  --vbr-widget-typography-font-size-500: 1rem; /* 16px */
-  --vbr-widget-typography-font-size-600: 1.125rem; /* 18px */
-  --vbr-widget-typography-font-size-700: 1.25rem; /* 20px */
-  --vbr-widget-typography-font-size-800: 1.5rem; /* 24px */
-  --vbr-widget-typography-font-size-900: 1.75rem; /* 28px */
-  --vbr-widget-typography-font-size-950: 2rem; /* 32px */
-
-  --vbr-widget-typography-font-lineheight-50: calc(var(--vbr-widget-typography-font-size-50) * 1.628);
-  --vbr-widget-typography-font-lineheight-100: calc(var(--vbr-widget-typography-font-size-100) * 1.628);
-  --vbr-widget-typography-font-lineheight-200: calc(var(--vbr-widget-typography-font-size-200) * 1.628);
-  --vbr-widget-typography-font-lineheight-300: calc(var(--vbr-widget-typography-font-size-300) * 1.628);
-  --vbr-widget-typography-font-lineheight-400: calc(var(--vbr-widget-typography-font-size-400) * 1.628);
-  --vbr-widget-typography-font-lineheight-500: calc(var(--vbr-widget-typography-font-size-500) * 1.628);
-  --vbr-widget-typography-font-lineheight-600: calc(var(--vbr-widget-typography-font-size-600) * 1.628);
-  --vbr-widget-typography-font-lineheight-700: calc(var(--vbr-widget-typography-font-size-700) * 1.628);
-  --vbr-widget-typography-font-lineheight-800: calc(var(--vbr-widget-typography-font-size-800) * 1.628);
-  --vbr-widget-typography-font-lineheight-900: calc(var(--vbr-widget-typography-font-size-900) * 1.628);
-  --vbr-widget-typography-font-lineheight-950: calc(var(--vbr-widget-typography-font-size-950) * 1.628);
-
-  --vbr-widget-typography-heading-weight: 500;
-
-  --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-font-size-800);
-  --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-font-size-700);
-  --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-font-size-600);
-  --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-font-size-400);
-  --vbr-widget-typography-heading-6-size: var(--vbr-widget-typography-font-size-200);
-
-  --vbr-widget-table-header-font-size: var(--vbr-widget-typography-font-size-200);
-  --vbr-widget-table-default-column-width: 30px;
-  --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-table-neutral-color: var(--vbr-widget-primary-color-300);
-  --vbr-widget-table-header-bg-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-table-header-hover-bg-color: var(--vbr-widget-primary-color-700);
-  --vbr-widget-table-header-color: var(--vbr-widget-primary-color-200);
-  --vbr-widget-table-table-header-active-bg-color: var(--vbr-widget-primary-color-700);
-  --vbr-widget-table-header-active-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-table-hover-color: var(--vbr-widget-secondary-color-900);
-  --vbr-widget-table-hover-bg-color: var(--vbr-widget-secondary-color-100);
-  --vbr-widget-table-active-color: var(--vbr-widget-secondary-color-900);
-  --vbr-widget-table-active-bg-color: var(--vbr-widget-secondary-color-200);
-  --vbr-widget-table-active-even-bg-color: var(--vbr-widget-secondary-color-300);
-  --vbr-widget-table-active-hover-color: var(--vbr-widget-secondary-color-900);
-  --vbr-widget-table-active-hover-bg-color: var(--vbr-widget-secondary-color-400);
-  --vbr-widget-table-portrait-border-color: var(--vbr-widget-primary-color-100);
-  --vbr-widget-table-portrait-bg-color: var(--vbr-widget-primary-color-50);
-  --vbr-widget-table-cell-light-color: var(--vbr-widget-primary-color-600);
-  --vbr-widget-table-cell-dark-color: var(--vbr-widget-primary-color-900);
-  --vbr-widget-table-stripped-bg-color: #f8f9fa;
-  --vbr-widget-table-label-color: var(--vbr-widget-primary-color-500);
-  --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);
-  --vbr-widget-paginator-hover-color: var(--vbr-widget-primary-color-700);
-  --vbr-widget-paginator-hover-bg-color: var(--vbr-widget-primary-color-100);
-  --vbr-widget-paginator-border-color: var(--vbr-widget-primary-color-100);
-  --vbr-widget-paginator-active-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
-  --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
-
-  --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-font-size-200);
-  --vbr-widget-tooltip-color: #ffffff;
-  --vbr-widget-tooltip-bg-color: #000000;
-
-  --vbr-widget-popover-trigger-hover-bg-color: var(--vbr-widget-secondary-color-200);
-  --vbr-widget-popover-trigger-focus-bg-color: var(--vbr-widget-secondary-color-300);
-  --vbr-widget-popover-bg-color: var(--vbr-widget-primary-color-0);
-
-  --vbr-widget-dropdown-item-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-dropdown-item-hover-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-dropdown-item-hover-bg-color: var(--vbr-widget-primary-color-50);
-
-  --vbr-widget-error-notice-bg-color: var(--vbr-widget-danger-color-50);
-  --vbr-widget-error-notice-border-color: var(--vbr-widget-danger-color-100);
-  --vbr-widget-error-notice-color: var(--vbr-widget-danger-color-700);
-
-  --vbr-widget-link-color: var(--vbr-widget-secondary-color-700);
-  --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
-
-  --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-base-input-font-size: var(--vbr-widget-typography-font-size-400);
-  --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
-  --vbr-widget-base-input-border-radius: 3px;
-
-  --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-form-label-font-size: var(--vbr-widget-typography-font-size-200);
-
-  --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-font-size-400);
-
-  --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
-  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
-  --vbr-widget-badge-font-size: var(--vbr-widget-typography-font-size-50);
-  --vbr-widget-badge-large-font-size: var(--vbr-widget-typography-font-size-100);
-  --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-font-size-300);
-
-  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
-  --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-tab-btn-font-weight: 500;
-  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
-  --vbr-widget-tab-btn-border-color: transparent;
-  --vbr-widget-tab-btn-border-style: solid;
-  --vbr-widget-tab-btn-border-width: 0 0 3px 0;
-  --vbr-widget-tab-btn-text-transform: uppercase;
-  --vbr-widget-tab-btn-hover-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-tab-btn-hover-bg-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-tab-btn-hover-border-color: transparent;
-  --vbr-widget-tab-btn-active-bg-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-tab-btn-active-color: var(--vbr-widget-primary-color-900);
-  --vbr-widget-tab-btn-active-border-color: var(--vbr-widget-secondary-color-500);
-
-  --vbr-widget-toggle-group-gap: 0.625rem;
-  --vbr-widget-toggle-group-btn-padding: 3px 10px;
-  --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-font-size-400);
-  --vbr-widget-toggle-group-btn-bg-color: var(--vbr-widget-primary-color-50);
-  --vbr-widget-toggle-group-btn-active-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-toggle-group-btn-active-bg-color: var(--vbr-widget-live-game-color);
-  --vbr-widget-toggle-group-btn-radius: 4px;
-
-  --vbr-widget-progress-height: 10px;
-  --vbr-widget-progress-border-radius: 5px;
-  --vbr-widget-progress-bg-color: var(--vbr-widget-primary-color-50);
-  --vbr-widget-progress-bar-color: var(--vbr-widget-live-game-color);
-  --vbr-widget-progress-bar-stripe-color: rgba(255, 255, 255, 0.2);
-  --vbr-widget-progress-bar-stripe-angle: 45deg;
-
-  --vbr-widget-gamecenter-result-size: 6rem;
-  --vbr-widget-gamecenter-result-weight: 700;
-  --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-teamname-size: var(--vbr-widget-typography-font-size-700);
-  --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-teamname-weight: 700;
-  --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-gamecenter-title-weight: 700;
-  --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
-  --vbr-widget-gamecenter-local-gamedate-size: var(--vbr-widget-typography-font-size-300);
-  --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
-  --vbr-widget-gamecenter-gamestatus-size: var(--vbr-widget-typography-font-size-400);
-  --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
-  --vbr-widget-gamecenter-periodresults-size: var(--vbr-widget-typography-font-size-700);
-  --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
-  --vbr-widget-gamecenter-period-header-size: var(--vbr-widget-typography-font-size-300);
-  --vbr-widget-gamecenter-period-header-weight: 500;
-  --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
-  --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
-  --vbr-widget-gamecenter-stats-title-size: var(--vbr-widget-typography-font-size-300);
-  --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
-  --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
-
-  --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
-  --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
-  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
-
-  --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-gamecenter-events-evented-person-weight: 600;
-  --vbr-widget-gamecenter-events-assitst-list-size: var(--vbr-widget-typography-font-size-400);
-  --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-font-size-200);
-  --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-font-size-500);
-  --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-font-size-400);
-  --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-font-size-400);
-  --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: 0;
-
-  --vbr-widget-sticky-top-offset: 0;
-
-  --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-font-size-100);
-  --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-team-size: var(--vbr-widget-typography-font-size-300);
-  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
-  --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-font-size-200);
-  --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);
-  --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-font-size-200);
-}
-
-html,
-body {
-  -webkit-font-smoothing: antialiased;
-}
-
-.transition-fade-enter-active,
-.transition-fade-leave-active {
-  transition: all 0.25s ease;
-}
-
-.transition-fade-enter-from,
-.transition-fade-leave-to {
-  opacity: 0;
-  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;
-}
-
-img.is-loaded {
-  opacity: 1;
-}
-
-a {
-  color: var(--vbr-widget-link-color);
-  text-decoration: none;
-}
-
-a:hover {
-    color: var(--vbr-widget-hover-color);
-  }
-
-.floating-content.is-tooltip {
-    background-color: var(--vbr-widget-tooltip-bg-color);
-    color: var(--vbr-widget-tooltip-color);
-    font-weight: bold;
-    padding: 5px 10px;
-    border-radius: 4px;
-    font-size: var(--vbr-widget-tooltip-font-size);
-    white-space: nowrap;
-    pointer-events: none;
-  }
-
-.floating-content.is-tooltip .is-arrow {
-      background-color: var(--vbr-widget-tooltip-bg-color);
-    }
-
-.floating-content.is-content {
-    /* width: 220px; */
-    border-radius: 4px;
-    box-shadow: 2px 14px 23px 0px rgba(0, 0, 0, 0.25);
-  }
-
-.floating-content.is-content .is-arrow {
-      background-color: var(--vbr-widget-primary-color-50);
-    }
-
-.floating-content .is-arrow {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    transform: rotate(45deg);
-  }
-
-[data-placement^='top'] .floating-content .is-arrow {
-      bottom: -4px;
-    }
-
-[data-placement^='bottom'] .floating-content .is-arrow {
-      top: -4px;
-    }
-
-[data-placement^='left'] .floating-content .is-arrow {
-      right: -4px;
-    }
-
-[data-placement^='right'] .floating-content .is-arrow {
-      left: -4px;
-    }
-
-.mjsz-vbr-error-notice {
-  display: flex;
-  align-items: center;
-  justify-items: flex-start;
-  margin: 10px 0;
-  padding: 10px 20px;
-  background-color: var(--vbr-widget-error-notice-bg-color);
-  color: var(--vbr-widget-error-notice-color);
-  border: 1px solid var(--vbr-widget-error-notice-border-color);
-}
-
-.mjsz-vbr-error-notice .icon {
-    margin-right: 15px;
-  }
-
-.mjsz-vbr-timezone-selector {
-  padding: 3px 0;
-  color: var(--vbr-widget-timezone-selector-color);
-  font-size: var(--vbr-widget-timezone-selector-font-size);
-  font-weight: 500;
-}
-
-.mjsz-vbr-timezone-selector .is-active {
-    font-weight: 700;
-  }
-
-.is-badge {
-  display: inline-block;
-  padding: 0.125em 0.25em;
-  color: var(--vbr-widget-badge-color);
-  font-size: var(--vbr-widget-badge-font-size);
-  font-weight: 700;
-  text-transform: uppercase;
-  background-color: var(--vbr-widget-badge-bg-color);
-  border-radius: 3px;
-}
-
-.is-badge + .is-badge {
-    margin-inline-start: 3px;
-  }
-
-.is-badge.is-invert {
-    color: var(--vbr-widget-badge-bg-color);
-    background-color: var(--vbr-widget-badge-color);
-  }
-
-.is-badge.is-green {
-    color: var(--vbr-widget-primary-color-0);
-    background-color: var(--vbr-widget-live-game-color);
-  }
-
-.is-badge.is-red {
-    color: var(--vbr-widget-primary-color-0);
-    background-color: var(--vbr-widget-danger-color-a400);
-  }
-
-.is-badge.is-yellow {
-    color: var(--vbr-widget-primary-color-0);
-    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.15em 0.35em;
-  }
-
-.is-badge.is-extra-large {
-    font-size: var(--vbr-widget-badge-extra-large-font-size);
-    padding: 0.2695em 0.5165em;
-  }