@use 'sass:math'; @use 'sass:color'; @use 'sass:map'; $small-view: 800px; $mobile-view: 500px; $main-fonts: 'Source Sans Pro', sans-serif; $font-regular: 400; $font-semibold: 600; $font-bold: 700; $line-height-normal: 1.2; $support-button: inherit; $support-button-heart: #e83e8c; $red: #dc3545; $green: #198754; $white: #fff; $button-font-size: 1rem; $header-height: 94px; $header-height-small-view: 74px; $header-height-mobile-view: 124px; $menu-width: 248px; $menu-collapsed-width: 50px; $menu-margin-left: 2rem; $menu-overlay-view: 1200px; $sub-menu-height: 81px; $banner-inverted-ratio: math.div(1, 6); $max-channels-width: 1200px; $footer-height: 30px; $footer-margin: 30px; // --------------------------------------------------------------------------- $miniature-fs-small: 0.75rem; $miniature-fs-medium: 0.875rem; $miniature-fs-big: 1rem; $miniature-fs-row-small: 0.875rem; $miniature-fs-row-medium: 1rem; $miniature-fs-row-big: 1.25rem; $miniature-fs-mobile-small: 0.875rem; $miniature-fs-mobile-medium: 0.875rem; $miniature-fs-mobile-big: 1rem; $video-thumbnail-height: 153px; $video-thumbnail-width: 280px; $video-thumbnail-medium-height: 114px; $video-thumbnail-medium-width: 201px; $video-thumbnail-small-height: 71px; $video-thumbnail-small-width: 125px; // --------------------------------------------------------------------------- $theater-bottom-space: 115px; $player-portrait-bottom-space: 50px; $sub-menu-margin-bottom: 30px; $sub-menu-margin-bottom-small-view: 10px; $focus-box-shadow-dimensions: 0 0 0 .2rem; $form-input-font-size: 16px; $video-watch-info-margin-left: 44px; $primeng-breakpoint: 960px; // --------------------------------------------------------------------------- // Theme variables with key check using pvar() function // --------------------------------------------------------------------------- $variables: ( --embed-foreground-color: var(--embed-foreground-color), --embed-big-play-background-color: var(--embed-big-play-background-color), --x-margin-content: var(--x-margin-content), --main-col-width: var(--main-col-width), --header-height: var(--header-height), --fg: var(--fg), --bg: var(--bg), --red: var(--red), --on-red: var(--on-red), --green: var(--green), --input-fg: var(--input-fg), --input-bg: var(--input-bg), --input-placeholder: var(--input-placeholder), --input-border-color: var(--input-border-color), --input-bg-in-secondary: var(--input-bg-in-secondary), --input-check-active-fg: var(--input-check-active-fg), --input-check-active-bg: var(--input-check-active-bg), --input-x-padding: var(--input-x-padding), --input-y-padding: var(--input-y-padding), --textarea-fg: var(--textarea-fg), --textarea-bg: var(--textarea-bg), --support-btn-bg: var(--support-btn-bg), --support-btn-fg: var(--support-btn-fg), --support-btn-heart-bg: var(--support-btn-heart-bg), --secondary-icon-color: var(--secondary-icon-color), --active-icon-color: var(--active-icon-color), --active-icon-bg: var(--active-icon-bg), --fg-500: var(--fg-500), --fg-450: var(--fg-450), --fg-400: var(--fg-400), --fg-350: var(--fg-350), --fg-300: var(--fg-300), --fg-250: var(--fg-250), --fg-200: var(--fg-200), --fg-150: var(--fg-150), --fg-100: var(--fg-100), --fg-50: var(--fg-50), --bg-secondary-600: var(--bg-secondary-600), --bg-secondary-550: var(--bg-secondary-550), --bg-secondary-500: var(--bg-secondary-500), --bg-secondary-450: var(--bg-secondary-450), --bg-secondary-400: var(--bg-secondary-400), --bg-secondary-350: var(--bg-secondary-350), --bg-secondary-300: var(--bg-secondary-300), --bg-secondary-250: var(--bg-secondary-250), --bg-secondary-200: var(--bg-secondary-200), --menu-fg: var(--menu-fg), --menu-fg-600: var(--menu-fg-600), --menu-fg-550: var(--menu-fg-550), --menu-fg-500: var(--menu-fg-500), --menu-fg-450: var(--menu-fg-450), --menu-fg-400: var(--menu-fg-400), --menu-fg-350: var(--menu-fg-350), --menu-fg-300: var(--menu-fg-300), --menu-fg-250: var(--menu-fg-250), --menu-fg-200: var(--menu-fg-200), --menu-fg-150: var(--menu-fg-150), --menu-fg-100: var(--menu-fg-100), --menu-fg-50: var(--menu-fg-50), --menu-bg: var(--menu-bg), --menu-bg-600: var(--menu-bg-600), --menu-bg-550: var(--menu-bg-550), --menu-bg-500: var(--menu-bg-500), --menu-bg-450: var(--menu-bg-450), --menu-bg-400: var(--menu-bg-400), --menu-bg-350: var(--menu-bg-350), --menu-bg-300: var(--menu-bg-300), --menu-bg-250: var(--menu-bg-250), --menu-bg-200: var(--menu-bg-200), --on-primary: var(--on-primary), --on-primary-700: var(--on-primary-700), --on-primary-650: var(--on-primary-650), --on-primary-600: var(--on-primary-600), --on-primary-550: var(--on-primary-550), --on-primary-500: var(--on-primary-500), --on-primary-450: var(--on-primary-450), --on-primary-400: var(--on-primary-400), --on-primary-350: var(--on-primary-350), --on-primary-300: var(--on-primary-300), --on-primary-250: var(--on-primary-250), --on-primary-200: var(--on-primary-200), --on-primary-150: var(--on-primary-150), --on-primary-100: var(--on-primary-100), --on-primary-50: var(--on-primary-50), --primary: var(--primary), --primary-700: var(--primary-700), --primary-650: var(--primary-650), --primary-600: var(--primary-600), --primary-550: var(--primary-550), --primary-500: var(--primary-500), --primary-450: var(--primary-450), --primary-400: var(--primary-400), --primary-350: var(--primary-350), --primary-300: var(--primary-300), --primary-250: var(--primary-250), --primary-200: var(--primary-200), --primary-150: var(--primary-150), --primary-100: var(--primary-100), --primary-50: var(--primary-50), --border-primary: var(--border-primary), --alert-primary-fg: var(--alert-primary-fg), --alert-primary-bg: var(--alert-primary-bg), --alert-primary-border-color: var(--alert-primary-border-color), --menu-margin-left: var(--menu-margin-left), ); // SASS type check our CSS variables @function pvar($variable) { @if map.has-key($variables, $variable) { @return map.get($variables, $variable); } @else { @error 'ERROR: Variable #{$variable} does not exist'; } } @function pvar-fallback($variable, $fallback) { @if map.has-key($variables, $variable) and map.has-key($variables, $fallback) { @return var($variable, map.get($variables, $fallback)); } @else { @error 'ERROR: Variable #{$variable} or #{$fallback} does not exist'; } } // --------------------------------------------------------------------------- // z-index groups // --------------------------------------------------------------------------- $zindex: ( miniature : 10, overlay : 12550, menu : 12600, search-typeahead: 12650, popover : 13000, tooltip : 14000, loadbar : 15000, privacymsg : 17500, root-header : 17500, help-popover : 17600, dropdown : 17600, modal : 19000, hotkeys : 19000, notification : 20000 ); @function z($label) { @return map.get($zindex, $label); } // --------------------------------------------------------------------------- // Other variables that use pvar() // --------------------------------------------------------------------------- $separator-border-color: pvar(--bg-secondary-400); $separator-border-color-on-secondary: pvar(--bg-secondary-450); $focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)};