:root { /* OVERALL */ /* scrollbar */ --color-scrollbar-thumb: #353535; --color-scrollbar-track: #1d1e1c; --color-scrollbar-corner: #1d1e1c; --borderRadius-scrollbar-track: 10px; --color-scrollbar-thumb-hover: #454545; /* modal overlay */ --color-modal-overlay: rgba(0, 0, 0, 0.8); /* color sets */ --color-primary1: #ffffff; --color-primary2: #8B8C8F; --color-primary3: #ffffff; --color-primary4: #8B8C8F; --color-secondary1: #232324; --color-secondary2: #3c3a3d; --color-secondary3: #000000; --color-secondary4: #232324; --color-highlight-hover1: #FF5022; --color-highlight-hover2: #FF5022; --color-error: #CE2C34; --color-relax: #27BE51; --color-gradient1: linear-gradient(90deg, #ffffff 0%, #FF5022 100%);; --color-gradient2: #ffffff; /* Thumbnail */ /* Placeholder */ --color-thumbnail-placeholder-bg: var(--color-primary4); /* EPG */ /* Header grid */ --color-epg-header-grid-bg: var(--color-secondary3); --color-epg-header-grid-bg-hover: var(--color-secondary2); /* background */ --color-background: var(--color-secondary1); --color-background-asset: var(--color-secondary4); /* CONTENT */ /* font & icons (content) */ --color-content-default1: var(--color-primary1); --color-content-default2: var(--color-primary2); --color-content-default3: var(--color-primary3); --color-content-highlight-hover: var(--color-highlight-hover1); --color-content-hover-for-highlighted: var(--color-highlight-hover2); --color-content-error: var(--color-error); --color-promo-banner-txt-bg: var(--color-secondary4); /* overlays (content)*/ --color-content-overlay1: var(--color-secondary3); --color-content-overlay2: var(--color-secondary2); --color-content-overlay3: var(--color-secondary3); /* progress bar (content) */ --color-content-progressbar-main: var(--color-gradient1); --color-content-progressbar-buffer-empty1: transparent; --color-content-progressbar-buffer-empty2: rgba(255, 255, 255, 0.5); /* inputs (content) */ --color-input-primary: var(--color-primary1); --color-input-placeholder: var(--color-primary2); --color-input-border-bottom: var(--color-primary3); --color-input-border-bottom-focus: var(--color-highlight-hover1); /* button: normal (content) */ --color-button-normal-font: var(--color-primary1); --color-button-normal-bg: var(--color-highlight-hover1); --color-button-normal-border: transparent; --color-button-normal-font-hover: var(--color-primary1); --color-button-normal-bg-hover: var(--color-highlight-hover2); --color-button-normal-border-hover: transparent; --borderSize-button-normal: 1px; --borderRadius-button-normal: 40px; /* button: ghost (content) */ --color-button-ghost-font: var(--color-highlight-hover1); --color-button-ghost-bg: transparent; --color-button-ghost-border: var(--color-highlight-hover1); --color-button-ghost-font-hover: var(--color-primary1); --color-button-ghost-bg-hover: var(--color-highlight-hover1); --color-button-ghost-border-hover: transparent; --borderSize-button-ghost: 1px; --borderRadius-button-ghost: 40px; /* button: bordered (content) */ --color-button-bordered-font: var(--color-primary1); --color-button-bordered-bg: rgba(29, 30, 28, 0.4); --color-button-bordered-border: var(--color-primary1); --color-button-bordered-font-hover: var(--color-secondary3); --color-button-bordered-bg-hover: var(--color-primary1); --color-button-bordered-border-hover: transparent; --borderSize-button-bordered: 1px; --borderRadius-button-bordered: 20px; /* button: link (content) */ --color-button-link-font: var(--color-highlight-hover1); --color-button-link-font-hover: var(--color-highlight-hover2); /* button: disabled (content) */ --color-button-disabled-font: var(--color-primary2); --color-button-disabled-bg: var(--color-primary3); --color-button-disabled-border: transparent; --borderSize-button-disabled: 1px; --borderRadius-button-disabled: 40px; /* button: switch (content) */ --color-button-switch-circle: var(--color-primary1); --color-button-switch-label: var(--color-secondary3); --color-button-switch-bg: var(--color-primary1); --color-button-switch-circle-active: var(--color-primary1); --color-button-switch-label-active: var(--color-secondary3); --color-button-switch-bg-active: var(--color-highlight-hover1); --color-button-switch-circle-disable: var(--color-primary2); --color-button-switch-label-disable: var(--color-primary3); --color-button-switch-bg-disable: var(--color-primary3); /* button: Age restriction (content) */ --color-inner-spin-button : var(--color-content-default3); --color-inner-spin-button-hover : var(--color-content-default1); /* Saved fixed button bar (content) */ --color-save-bar-bg: var(--color-secondary2); /* button: strate nav */ --color-button-arrow-icon: var(--color-primary1); --color-button-arrow-bg: rgba(0, 0, 0, 0.7); --color-button-arrow-icon-hover: var(--color-secondary3); --color-button-arrow-bg-hover: var(--color-highlight-hover1); /* PLAY ICON && LOCK AND UNLOCK ICON */ --color-icon-playlock-fill: var(--color-primary1); --color-icon-playlock-stroke: var(--color-primary1); --color-icon-playlock-fill-hover: var(--color-primary1); --color-icon-playlock-stroke-hover: var(--color-primary1); --color-icon-playlock-circle-fill: var(--color-secondary4); --color-icon-playlock-circle-fillOpacity: 0.4; --color-icon-playlock-circle-strokeWidth: 2; --color-border-right-padlock-container: var(--color-highlight-hover1); --color-border-top-padlock-container: var(--color-highlight-hover1); /* SELECT DROPDOWN */ /* Font */ --color-select-primary1: var(--color-primary1); --color-select-highlight-hover: var(--color-secondary3); --color-select-highlight-active: var(--color-highlight-hover1); /* Background */ --color-select-background: var(--color-secondary3); --color-select-background-hover: var(--color-highlight-hover1); --color-select-background-active: var(--color-secondary3); --borderRadius-select-normal: 5px; --boxShadow-select-normal: 0 2px 10px 2px rgba(0, 0, 0, 0.7); /* Search */ /* fonts & icons (search) */ --color-search-primary1: var(--color-primary1); --color-search-channel-primary1: var(--color-primary1); /* background */ --color-search-input-bg: rgba(255, 255, 255, 0.2); --color-search-channel-input-bg: rgba(255, 255, 255, 0.2); /* SCROLLTOPHEADER */ --color-scrollTopHeader-primary1 : var(--color-primary1); --color-scrollTopHeader-primary2 : var(--color-primary2); --color-scrollTopHeader-primary3 : var(--color-primary3); --color-scrollTopHeader-highlight-hover1 : var(--color-highlight-hover1); --color-scrollTopHeader-highlight-hover2 : var(--color-highlight-hover2); --color-scrollTopHeader-bg : var(--color-secondary4); /* LOG IN */ /* font & icons (Log In) */ --color-login-primary1: var(--color-primary1); --color-login-primary2: var(--color-primary2); --color-login-primary3: var(--color-primary3); --color-login-highlight-hover1: var(--color-highlight-hover1); --color-login-highlight-hover2: var(--color-highlight-hover2); --color-login-error: var(--color-error); /* inputs (Log In) */ --color-login-input-primary: var(--color-primary1); --color-login-input-placeholder: var(--color-primary2); --color-login-input-border-bottom: var(--color-primary3); --color-login-input-border-bottom-focus: var(--color-highlight-hover1); /* button: normal (Log In) */ --color-button-login-normal-font: var(--color-primary1); --color-button-login-normal-bg: var(--color-highlight-hover1); --color-button-login-normal-border: transparent; --color-button-login-normal-font-hover: var(--color-primary1); --color-button-login-normal-bg-hover: var(--color-highlight-hover2); --color-button-login-normal-border-hover: transparent; --borderSize-button-login-normal: 1px; --borderRadius-button-login-normal: 40px; /* button: ghost (Log In) */ --color-button-login-ghost-font: var(--color-highlight-hover1); --color-button-login-ghost-bg: transparent; --color-button-login-ghost-border: var(--color-highlight-hover1); --color-button-login-ghost-font-hover: var(--color-primary1); --color-button-login-ghost-bg-hover: var(--color-highlight-hover1); --color-button-login-ghost-border-hover: transparent; --borderSize-button-login-ghost: 1px; --borderRadius-button-login-ghost: 40px; /* button: bordered (Log In) */ --color-button-login-bordered-font: var(--color-primary1); --color-button-login-bordered-bg: rgba(29, 30, 28, 0.4); --color-button-login-bordered-border: var(--color-primary1); --color-button-login-bordered-font-hover: var(--color-secondary3); --color-button-login-bordered-bg-hover: var(--color-primary1); --color-button-login-bordered-border-hover: transparent; --borderSize-button-login-bordered: 1px; --borderRadius-button-login-bordered: 40px; /* button: link (Log In) */ --color-button-login-link-font: var(--color-highlight-hover1); --color-button-login-link-font-hover: var(--color-highlight-hover2); /* button: disabled (Log In) */ --color-button-login-disabled-font: var(--color-primary2); --color-button-login-disabled-bg: var(--color-primary3); --color-button-login-disabled-border: transparent; --borderSize-button-login-disabled: 1px; --borderRadius-button-login-disabled: 40px; /* NAVIGATION */ /* fonts & icons (navigation) */ --color-nav-primary1: var(--color-primary1); --color-nav-primary2: var(--color-primary2); --color-nav-primary3: var(--color-primary3); --color-nav-hover: var(--color-highlight-hover1); --color-nav-active: var(--color-highlight-hover1); /* background (navigation) */ --color-nav-background: var(--color-secondary3); /* separator (navigation) */ --color-nav-separator: rgba(255, 255, 255, 0.2); /* toggle button (navigation) */ --color-nav-toggle-default: var(--color-secondary1); --color-nav-toggle-hover: var(--color-highlight-hover1); --color-nav-toggle-icon-default: var(--color-primary3); --color-nav-toggle-icon-hover: var(--color-primary1); /* switch icon (navigation) */ --color-nav-switch-icon-circle-stroke: var(--color-primary1); --color-nav-switch-icon-circle-fill: var(--color-secondary3); --color-nav-switch-icon-path: var(--color-primary1); /* SLIDESHOW */ /* fonts & icons (slideshow) */ --color-slideshow-primary1: var(--color-primary1); --color-slideshow-primary2: var(--color-primary2); --color-slideshow-primary3: var(--color-primary3); --color-slideshow-highlight-hover1: var(--color-highlight-hover1); --color-slideshow-highlight-hover2: var(--color-highlight-hover2); /* overlay (slideshow) */ --color-slideshow-overlay-before: linear-gradient(to bottom, #1C191E, rgba(28, 25, 30, 0)); --color-slideshow-overlay-after: linear-gradient(to top, #1C191E, rgba(28, 25, 30, 0)); /* button: bordered (slideshow) */ --color-button-slideshow-bordered-font: var(--color-primary1); --color-button-slideshow-bordered-bg: rgba(29, 30, 28, 0.4); --color-button-slideshow-bordered-border: var(--color-primary1); --color-button-slideshow-bordered-font-hover: var(--color-secondary3); --color-button-slideshow-bordered-bg-hover: var(--color-primary1); --color-button-slideshow-bordered-border-hover: transparent; --borderSize-button-slideshow-bordered: 1px; --borderRadius-button-slideshow-bordered: 40px; /* THUMBNAIL */ /* fonts & icons (thumbnail) */ --color-thumbnail-primary1: var(--color-primary1); --color-thumbnail-primary2: var(--color-primary2); --color-thumbnail-primary3: var(--color-primary3); --color-thumbnail-highlight-hover1: var(--color-highlight-hover1); --color-thumbnail-overlay-background: linear-gradient(to bottom, rgba(28, 25, 30, 0.3) 0%, #1C191E); /* PLAYER */ /* font & icons & bg (player) */ --color-player-default1: var(--color-primary1); --color-player-default2: var(--color-primary2); --color-player-default3: var(--color-primary3); --color-player-highlight-hover1: var(--color-highlight-hover1); --color-player-overlay: rgba(0, 0, 0, 0.65); --color-player-background: var(--color-secondary4); /* SIGN UP */ --color-stepFont : var(--color-primary4); --color-stepBG : var(--color-primary3); --color-stepActiveFont : var(--color-primary1); --color-stepActiveBG : var(--color-highlight-hover1); --color-stepLabel : var(--color-primary3); --color-stepEmptybar : var(--color-primary3); --color-stepFullbar : var(--color-highlight-hover1); /*ACCOUNT */ --color-account-separator : rgba(255,255,255,0.3); /* FONT-SIZES */ --fontSize-xxxl: 60px; --fontSize-xxl: 36px; --fontSize-xl: 24px; --fontSize-l: 18px; --fontSize-m: 16px; --fontSize-s: 14px; --fontSize-xs: 11px; --fontSize-xxs: 9px; } /* You can use font-converter.net to transform TTF font to various format */ /* You can use CONVERSIO (chrome extension) to convert TTF in OTF */ @font-face { font-family: beemix-font; src: url("/fonts/Barlow-Regular.eot"); /* IE9 Compat Modes */ src: url("/fonts/Barlow-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/fonts/Barlow-Regular.otf") format("opentype"), /* Open Type Font */ url("/fonts/Barlow-Regular.svg") format("svg"), /* Legacy iOS */ url("/fonts/Barlow-Regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("/fonts/Barlow-Regular.woff") format("woff"), /* Modern Browsers */ url("/fonts/Barlow-Regular.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; }