CSS változók
css
: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.625rem; /* 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-link-color: var(--vbr-widget-secondary-color-700);
--vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
--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-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-400);
--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-dropdown-item-selected-color: var(--vbr-widget-secondary-color-700);
--vbr-widget-dropdown-item-selected-hover-bg-color: var(--vbr-widget-secondary-color-100);
--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-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-loading-indicator-text-color: var(--vbr-widget-hover-color);
--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);
--vbr-widget-standings-selector-title-size: var(--vbr-widget-typography-font-size-500);
--vbr-widget-standings-selector-title-color: var(--vbr-widget-primary-color-700);
--vbr-widget-standings-selector-title-transform: none;
--vbr-widget-standings-selector-title-padding: 0 0.625em 0.5625em;
--vbr-widget-standings-selector-title-bg-color: transparent;
--vbr-widget-standings-selector-section-title-bg: var(--vbr-widget-primary-color-50);
--vbr-widget-standings-selector-section-title-size: var(--vbr-widget-typography-font-size-400);
--vbr-widget-standings-selector-section-title-color: var(--vbr-widget-primary-color-700);
--vbr-widget-standings-selector-section-title-padding: 0.25em 0;
--vbr-widget-standings-selector-section-logo-size: 30px;
--vbr-widget-standings-selector-section-team-color: var(--vbr-widget-primary-color-900);
--vbr-widget-top-list-bg-color: var(--vbr-widget-primary-color-900);
--vbr-widget-top-list-title-color: var(--vbr-widget-primary-color-50);
--vbr-widget-top-list-title-separator-color: var(--vbr-widget-primary-color-700);
--vbr-widget-top-list-value-color: var(--vbr-widget-primary-color-300);
--vbr-widget-top-list-player-separator-color: var(--vbr-widget-primary-color-800);
--vbr-widget-top-list-image-border-color: var(--vbr-widget-primary-color-600);
--vbr-widget-top-list-image-bg-color: var(--vbr-widget-primary-color-800);
--vbr-widget-top-list-selector-border-color: var(--vbr-widget-primary-color-400);
--vbr-widget-countdown-title-height: 2rem;
--vbr-widget-countdown-title-bg: var(--vbr-widget-primary-color-900);
--vbr-widget-countdown-gamedata-height: 4rem;
--vbr-widget-countdown-gamedata-bg: var(--vbr-widget-primary-color-700);
--vbr-widget-countdown-result-bg: var(--vbr-widget-primary-color-800);
--vbr-widget-playoffs-header-bg: var(--vbr-widget-primary-color-800);
--vbr-widget-playoffs-header-color: var(--vbr-widget-primary-color-100);
--vbr-widget-playoffs-header-size: var(--vbr-widget-typography-font-size-500);
--vbr-widget-playoffs-details-bg: var(--vbr-widget-primary-color-50);
--ease-spring-1: linear(
0,
0.009,
0.035 2.1%,
0.141,
0.281 6.7%,
0.723 12.9%,
0.938 16.7%,
1.017,
1.077,
1.121,
1.149 24.3%,
1.159,
1.163,
1.161,
1.154 29.9%,
1.129 32.8%,
1.051 39.6%,
1.017 43.1%,
0.991,
0.977 51%,
0.974 53.8%,
0.975 57.1%,
0.997 69.8%,
1.003 76.9%,
1.004 83.8%,
1
);
}