diff options
Diffstat (limited to 'src')
25 files changed, 242 insertions, 87 deletions
diff --git a/src/sass/base.scss b/src/sass/base.scss index 05e77bb1..74dbb70f 100644 --- a/src/sass/base.scss +++ b/src/sass/base.scss @@ -9,11 +9,11 @@ direction: ltr; display: flex; flex-direction: column; - font-family: $plyr-font-family; + font-family: var(--plyr-font-family); font-variant-numeric: tabular-nums; // Force monosace-esque number widths - font-weight: $plyr-font-weight-regular; + font-weight: var(--plyr-font-weight-regular); height: 100%; - line-height: $plyr-line-height; + line-height: var(--plyr-line-height); max-width: 100%; min-width: 200px; position: relative; diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss index 3a9a28b5..b0d575bb 100644 --- a/src/sass/components/badges.scss +++ b/src/sass/components/badges.scss @@ -3,10 +3,10 @@ // -------------------------------------------------------------- .plyr__badge { - background: $plyr-badge-bg; + background: var(--plyr-badge-background, $plyr-badge-background); border-radius: 2px; - color: $plyr-badge-color; - font-size: $plyr-font-size-badge; + color: var(--plyr-badge-color, $plyr-badge-color); + font-size: var(--plyr-font-size-badge, $plyr-font-size-badge); line-height: 1; padding: 3px 4px; } diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index 1cfca92e..85899ef3 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -10,7 +10,6 @@ .plyr__captions { animation: plyr-fade-in 0.3s ease; bottom: 0; - color: $plyr-captions-color; display: none; font-size: $plyr-font-size-captions-small; left: 0; @@ -21,9 +20,12 @@ width: 100%; .plyr__caption { - background: $plyr-captions-bg; + background: $plyr-captions-background; + background: var(--plyr-captions-background, $plyr-captions-background); border-radius: 2px; box-decoration-break: clone; + color: $plyr-captions-text-color; + color: var(--plyr-captions-text-color, $plyr-captions-text-color); line-height: 185%; padding: 0.2em 0.5em; white-space: pre-wrap; @@ -56,4 +58,3 @@ .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { transform: translateY(-($plyr-control-spacing * 4)); } - diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 64390dbd..2940897b 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -6,20 +6,21 @@ background: transparent; border: 0; border-radius: $plyr-control-radius; + border-radius: var(--plyr-control-radius, $plyr-control-radius); color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; // IE11 - padding: $plyr-control-padding; + padding: var(--plyr-control-padding, $plyr-control-padding); position: relative; transition: all 0.3s ease; svg { display: block; fill: currentColor; - height: $plyr-control-icon-size; + height: var(--plyr-control-icon-size, $plyr-control-icon-size); pointer-events: none; - width: $plyr-control-icon-size; + width: var(--plyr-control-icon-size, $plyr-control-icon-size); } // Default focus diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index be354e46..50a47248 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -24,7 +24,7 @@ // The actual menu container &__container { animation: plyr-popup 0.2s ease; - background: $plyr-menu-bg; + background: $plyr-menu-background; border-radius: 4px; bottom: 100%; box-shadow: $plyr-menu-shadow; @@ -45,7 +45,7 @@ // Arrow &::after { border: 4px solid transparent; - border-top-color: $plyr-menu-bg; + border-top-color: $plyr-menu-background; content: ''; height: 0; position: absolute; @@ -172,7 +172,7 @@ &[aria-checked='true'] { &::before { - background: $plyr-color-main; + background: var(--plyr-color-main, $plyr-color-main); } &::after { opacity: 1; diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index f28bec8c..c15ee911 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -72,11 +72,11 @@ $plyr-progress-offset: $plyr-range-thumb-height; animation: plyr-progress 1s linear infinite; background-image: linear-gradient( -45deg, - $plyr-progress-loading-bg 25%, + var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%, transparent 25%, transparent 50%, - $plyr-progress-loading-bg 50%, - $plyr-progress-loading-bg 75%, + var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%, + var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%, transparent 75%, transparent ); @@ -86,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height; } .plyr--video.plyr--loading .plyr__progress__buffer { - background-color: $plyr-video-progress-buffered-bg; + background-color: $plyr-video-progress-buffered-background; } .plyr--audio.plyr--loading .plyr__progress__buffer { - background-color: $plyr-audio-progress-buffered-bg; + background-color: $plyr-audio-progress-buffered-background; } diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 7b519fc6..7b13348e 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -9,7 +9,7 @@ border: 0; border-radius: ($plyr-range-thumb-height * 2); // color is used in JS to populate lower fill for WebKit - color: $plyr-range-fill-bg; + color: $plyr-range-fill-background; display: block; height: $plyr-range-max-height; margin: 0; diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss index 80603bb5..15f11f03 100644 --- a/src/sass/components/tooltips.scss +++ b/src/sass/components/tooltips.scss @@ -3,7 +3,7 @@ // -------------------------------------------------------------- .plyr__tooltip { - background: $plyr-tooltip-bg; + background: $plyr-tooltip-background; border-radius: $plyr-tooltip-radius; bottom: 100%; box-shadow: $plyr-tooltip-shadow; @@ -27,7 +27,7 @@ &::before { border-left: $plyr-tooltip-arrow-size solid transparent; border-right: $plyr-tooltip-arrow-size solid transparent; - border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg; + border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background; bottom: -$plyr-tooltip-arrow-size; content: ''; height: 0; diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss new file mode 100644 index 00000000..493df3a8 --- /dev/null +++ b/src/sass/lib/css-vars.scss @@ -0,0 +1,100 @@ +// Downloaded from https://github.com/malyw/css-vars (and modified) + +// global map to be filled via variables +$css-vars: (); + +// the variable may be set to "true" anywhere in the code, +// so native CSS custom properties will be used instead of the Sass global map +$css-vars-use-native: false !default; + +/// +// Assigns a variable to the global map +/// +@function css-var-assign($varName: null, $varValue: null) { + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); +} + +/// +// Emulates var() CSS native function behavior +// +// $args[0] {String} "--" + variable name +// [$args[1]] Optional default value if variable is not assigned yet +// +// E.G.: +// color: var(--main-color); +// background: var(--main-background, green); +/// +@function var($args...) { + // CHECK PARAMS + @if (length($args) ==0) { + @error 'Variable name is expected to be passed to the var() function'; + } + @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') { + @error "Variable name is expected to start from '--'"; + } + + // PROCESS + $var-name: nth($args, 1); + $var-value: map-get($css-vars, $var-name); + + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: don't process function in case of native + @return unquote('var(' + $args + ')'); + } @else { + @if ($var-value == null) { + // variable is not provided so far + @if (length($args) == 2) { + $var-value: nth($args, 2); + } + } + + // Sass: return value from the map + @return $var-value; + } +} + +/// +// SASS mixin to provide variables +// E.G.: +// @include css-vars(( +// --color: rebeccapurple, +// --height: 68px, +// --margin-top: calc(2vh + 20px) +// )); +/// +@mixin css-vars($var-map: null) { + // CHECK PARAMS + @if ($var-map == null) { + @error 'Map of variables is expected, instead got: null'; + } + @if (type_of($var-map) != map) { + @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}'; + } + + // PROCESS + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: assign CSS custom properties to the global scope + @at-root :root { + @each $var-name, $var-value in $var-map { + @if (type_of($var-value) == string) { + #{$var-name}: $var-value; // to prevent quotes interpolation + } @else { + #{$var-name}: #{$var-value}; + } + } + } + } @else { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $var-name, $var-value in $var-map { + $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable + } + } +} diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 5a1ca753..2426ef68 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -4,9 +4,13 @@ // Nicer focus styles // --------------------------------------- -@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) { - box-shadow: 0 0 0 5px rgba($color, 0.5); - outline: 0; +@mixin plyr-tab-focus() { + // box-shadow: 0 0 0 5px rgba($color, 0.5); + // outline: 0; + outline-color: var(--plyr-color-main); + outline-offset: 2px; + outline-style: dotted; + outline-width: 3px; } // Font smoothing @@ -33,7 +37,7 @@ } @mixin plyr-range-thumb() { - background: $plyr-range-thumb-bg; + background: $plyr-range-thumb-background; border: 0; border-radius: 100%; box-shadow: $plyr-range-thumb-shadow; @@ -43,7 +47,7 @@ width: $plyr-range-thumb-height; } -@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) { +@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-background, 0.5)) { box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; } diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index 44ec5351..a577e680 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -23,7 +23,7 @@ // The countdown label &::after { - background: rgba($plyr-color-gray-9, 0.8); + background: rgba($plyr-color-gray-900, 0.8); border-radius: 2px; bottom: $plyr-control-spacing; color: #fff; diff --git a/src/sass/plugins/preview-thumbnails.scss b/src/sass/plugins/preview-thumbnails.scss index b2b272c1..d20c9d18 100644 --- a/src/sass/plugins/preview-thumbnails.scss +++ b/src/sass/plugins/preview-thumbnails.scss @@ -3,19 +3,19 @@ // -------------------------------------------------------------- $plyr-preview-padding: $plyr-tooltip-padding !default; -$plyr-preview-bg: $plyr-tooltip-bg !default; +$plyr-preview-background: $plyr-tooltip-background !default; $plyr-preview-radius: $plyr-tooltip-radius !default; $plyr-preview-shadow: $plyr-tooltip-shadow !default; $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default; -$plyr-preview-image-bg: $plyr-color-gray-2 !default; +$plyr-preview-image-background: $plyr-color-gray-200 !default; $plyr-preview-time-font-size: $plyr-font-size-time !default; $plyr-preview-time-padding: 3px 6px !default; -$plyr-preview-time-bg: rgba(0, 0, 0, 0.55); +$plyr-preview-time-background: rgba(0, 0, 0, 0.55); $plyr-preview-time-color: #fff; $plyr-preview-time-bottom-offset: 6px; .plyr__preview-thumb { - background-color: $plyr-preview-bg; + background-color: $plyr-preview-background; border-radius: 3px; bottom: 100%; box-shadow: $plyr-preview-shadow; @@ -38,7 +38,7 @@ $plyr-preview-time-bottom-offset: 6px; &::before { border-left: $plyr-preview-arrow-size solid transparent; border-right: $plyr-preview-arrow-size solid transparent; - border-top: $plyr-preview-arrow-size solid $plyr-preview-bg; + border-top: $plyr-preview-arrow-size solid $plyr-preview-background; bottom: -$plyr-preview-arrow-size; content: ''; height: 0; @@ -50,7 +50,7 @@ $plyr-preview-time-bottom-offset: 6px; } &__image-container { - background: $plyr-preview-image-bg; + background: $plyr-preview-image-background; border-radius: ($plyr-preview-radius - 1px); overflow: hidden; position: relative; @@ -77,7 +77,7 @@ $plyr-preview-time-bottom-offset: 6px; z-index: 3; span { - background-color: $plyr-preview-time-bg; + background-color: $plyr-preview-time-background; border-radius: ($plyr-preview-radius - 1px); color: $plyr-preview-time-color; font-size: $plyr-preview-time-font-size; diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index cb8a3921..3672b689 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -5,6 +5,9 @@ // ========================================================================== @charset 'UTF-8'; +@import 'lib/css-vars'; +$css-vars-use-native: true; + @import 'settings/breakpoints'; @import 'settings/colors'; @import 'settings/cosmetics'; diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss index 5fd0c138..7915c048 100644 --- a/src/sass/settings/badges.scss +++ b/src/sass/settings/badges.scss @@ -2,5 +2,5 @@ // Badges // ========================================================================== -$plyr-badge-bg: $plyr-color-gray-7 !default; +$plyr-badge-background: $plyr-color-gray-700 !default; $plyr-badge-color: #fff !default; diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 0c259046..50f577dc 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -2,8 +2,9 @@ // Captions // ========================================================================== -$plyr-captions-bg: rgba(#000, 0.8) !default; -$plyr-captions-color: #fff !default; +$plyr-captions-background: rgba(#000, 0.8) !default; +$plyr-captions-text-color: #fff !default; + $plyr-font-size-captions-base: $plyr-font-size-base !default; $plyr-font-size-captions-small: $plyr-font-size-small !default; $plyr-font-size-captions-medium: $plyr-font-size-large !default; diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index e3883eef..6c9b0a3f 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -5,13 +5,29 @@ $plyr-color-main: hsl(198, 100%, 50%) !default; // Grayscale -$plyr-color-gray-9: hsl(210, 15%, 16%); -$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%); -$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%); -$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%); -$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%); -$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%); -$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%); -$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%); -$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%); -$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%); +$plyr-color-gray-900: hsl(210, 15%, 16%); +$plyr-color-gray-800: lighten($plyr-color-gray-900, 9%); +$plyr-color-gray-700: lighten($plyr-color-gray-800, 9%); +$plyr-color-gray-600: lighten($plyr-color-gray-700, 9%); +$plyr-color-gray-500: lighten($plyr-color-gray-600, 9%); +$plyr-color-gray-400: lighten($plyr-color-gray-500, 9%); +$plyr-color-gray-300: lighten($plyr-color-gray-400, 9%); +$plyr-color-gray-200: lighten($plyr-color-gray-300, 9%); +$plyr-color-gray-100: lighten($plyr-color-gray-200, 9%); +$plyr-color-gray-50: lighten($plyr-color-gray-100, 9%); + +@include css-vars( + ( + --plyr-color-main: $plyr-color-main, + --plyr-color-gray-900: $plyr-color-gray-900, + --plyr-color-gray-800: $plyr-color-gray-800, + --plyr-color-gray-700: $plyr-color-gray-700, + --plyr-color-gray-600: $plyr-color-gray-600, + --plyr-color-gray-500: $plyr-color-gray-500, + --plyr-color-gray-400: $plyr-color-gray-400, + --plyr-color-gray-300: $plyr-color-gray-300, + --plyr-color-gray-200: $plyr-color-gray-200, + --plyr-color-gray-100: $plyr-color-gray-100, + --plyr-color-gray-50: $plyr-color-gray-50 + ) +); diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index da9f4e58..a4009758 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -7,12 +7,12 @@ $plyr-control-spacing: 10px !default; $plyr-control-padding: ($plyr-control-spacing * 0.7) !default; $plyr-control-radius: 3px !default; -$plyr-video-controls-bg: #000 !default; +$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default; $plyr-video-control-color: #fff !default; $plyr-video-control-color-hover: #fff !default; -$plyr-video-control-bg-hover: $plyr-color-main !default; +$plyr-video-control-background-hover: $plyr-color-main !default; -$plyr-audio-controls-bg: #fff !default; -$plyr-audio-control-color: $plyr-color-gray-7 !default; +$plyr-audio-controls-background: #fff !default; +$plyr-audio-control-color: $plyr-color-gray-700 !default; $plyr-audio-control-color-hover: #fff !default; -$plyr-audio-control-bg-hover: $plyr-color-main !default; +$plyr-audio-control-background-hover: $plyr-color-main !default; diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss index d6e4b86d..80063850 100644 --- a/src/sass/settings/cosmetics.scss +++ b/src/sass/settings/cosmetics.scss @@ -3,3 +3,5 @@ // ========================================================================== $plyr-tab-focus-default-color: $plyr-color-main !default; + +@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color)); diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss index 5e232d19..62c3dd04 100644 --- a/src/sass/settings/menus.scss +++ b/src/sass/settings/menus.scss @@ -2,9 +2,9 @@ // Menus // ========================================================================== -$plyr-menu-bg: rgba(#fff, 0.9) !default; -$plyr-menu-color: $plyr-color-gray-7 !default; +$plyr-menu-background: rgba(#fff, 0.9) !default; +$plyr-menu-color: $plyr-color-gray-700 !default; $plyr-menu-arrow-size: 6px !default; -$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default; +$plyr-menu-border-color: rgba($plyr-color-gray-500, 0.2) !default; $plyr-menu-border-shadow-color: #fff !default; $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default; diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss index 10b6ebb7..a0e7f755 100644 --- a/src/sass/settings/progress.scss +++ b/src/sass/settings/progress.scss @@ -4,8 +4,8 @@ // Loading $plyr-progress-loading-size: 25px !default; -$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default; +$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default; // Buffered -$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default; -$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default; +$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default; +$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default; diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index c4d239ae..17740623 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -7,18 +7,18 @@ $plyr-range-thumb-active-shadow-width: 3px !default; // Thumb $plyr-range-thumb-height: 13px !default; -$plyr-range-thumb-bg: #fff !default; +$plyr-range-thumb-background: #fff !default; $plyr-range-thumb-border: 2px solid transparent !default; -$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default; +$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default; // Track $plyr-range-track-height: 5px !default; $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default; // Fill -$plyr-range-fill-bg: $plyr-color-main !default; +$plyr-range-fill-background: var(--plyr-color-main); // Type specific -$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; -$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default; +$plyr-video-range-track-background: $plyr-video-progress-buffered-background !default; +$plyr-audio-range-track-background: $plyr-audio-progress-buffered-background !default; $plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default; diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss index 2d298ef8..0ea5c582 100644 --- a/src/sass/settings/tooltips.scss +++ b/src/sass/settings/tooltips.scss @@ -2,8 +2,8 @@ // Tooltips // ========================================================================== -$plyr-tooltip-bg: rgba(#fff, 0.9) !default; -$plyr-tooltip-color: $plyr-color-gray-7 !default; +$plyr-tooltip-background: rgba(#fff, 0.9) !default; +$plyr-tooltip-color: $plyr-color-gray-700 !default; $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default; $plyr-tooltip-arrow-size: 4px !default; $plyr-tooltip-radius: 3px !default; diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss index 79cb57de..e9ee2671 100644 --- a/src/sass/settings/type.scss +++ b/src/sass/settings/type.scss @@ -8,9 +8,9 @@ $plyr-font-size-small: 14px !default; $plyr-font-size-large: 18px !default; $plyr-font-size-xlarge: 21px !default; -$plyr-font-size-time: $plyr-font-size-small !default; +$plyr-font-size-time: var(--plyr-font-size-small) !default; $plyr-font-size-badge: 9px !default; -$plyr-font-size-menu: $plyr-font-size-small !default; +$plyr-font-size-menu: var(--plyr-font-size-small) !default; $plyr-font-weight-regular: 500 !default; $plyr-font-weight-bold: 600 !default; @@ -18,3 +18,19 @@ $plyr-font-weight-bold: 600 !default; $plyr-line-height: 1.7 !default; $plyr-font-smoothing: false !default; + +@include css-vars( + ( + --plyr-font-family: $plyr-font-family, + --plyr-font-size-base: $plyr-font-size-base, + --plyr-font-size-small: $plyr-font-size-small, + --plyr-font-size-large: $plyr-font-size-large, + --plyr-font-size-xlarge: $plyr-font-size-xlarge, + --plyr-font-size-time: $plyr-font-size-time, + --plyr-font-size-badge: $plyr-font-size-badge, + --plyr-font-size-menu: $plyr-font-size-menu, + --plyr-font-weight-regular: $plyr-font-weight-regular, + --plyr-font-weight-bold: $plyr-font-weight-bold, + --plyr-line-height: $plyr-line-height + ) +); diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss index cd9a91fc..d39f6f96 100644 --- a/src/sass/types/audio.scss +++ b/src/sass/types/audio.scss @@ -9,9 +9,9 @@ // Controls container .plyr--audio .plyr__controls { - background: $plyr-audio-controls-bg; + background: var(--plyr-audio-controls-background, $plyr-audio-controls-background); border-radius: inherit; - color: $plyr-audio-control-color; + color: var(--plyr-audio-control-color, $plyr-audio-control-color); padding: $plyr-control-spacing; } @@ -20,23 +20,26 @@ &.plyr__tab-focus, &:hover, &[aria-expanded='true'] { - background: $plyr-audio-control-bg-hover; - color: $plyr-audio-control-color-hover; + background: var( + --plyr-audio-control-background-hover, + var(--plyr-color-main, $plyr-audio-control-background-hover) + ); + color: var(--plyr-audio-control-color-hover, $plyr-audio-control-color-hover); } } // Range inputs .plyr--full-ui.plyr--audio input[type='range'] { &::-webkit-slider-runnable-track { - background-color: $plyr-audio-range-track-bg; + background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background); } &::-moz-range-track { - background-color: $plyr-audio-range-track-bg; + background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background); } &::-ms-track { - background-color: $plyr-audio-range-track-bg; + background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background); } // Pressed styles @@ -57,5 +60,5 @@ // Progress .plyr--audio .plyr__progress__buffer { - color: $plyr-audio-progress-buffered-bg; + color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background); } diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss index 9a9bd01c..6a17a51a 100644 --- a/src/sass/types/video.scss +++ b/src/sass/types/video.scss @@ -52,11 +52,11 @@ $embed-padding: ((100 / 16) * 9); // Controls container .plyr--video .plyr__controls { - background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7)); + background: $plyr-video-controls-background; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; bottom: 0; - color: $plyr-video-control-color; + color: var(--plyr-video-control-color, $plyr-video-control-color); left: 0; padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2); position: absolute; @@ -82,23 +82,31 @@ $embed-padding: ((100 / 16) * 9); &.plyr__tab-focus, &:hover, &[aria-expanded='true'] { - background: $plyr-video-control-bg-hover; - color: $plyr-video-control-color-hover; + background: var( + --plyr-video-control-background-hover, + var(--plyr-color-main, $plyr-video-control-background-hover) + ); + color: var(--plyr-video-control-color-hover, $plyr-video-control-color-hover); } } // Large play button (video only) .plyr__control--overlaid { - background: rgba($plyr-video-control-bg-hover, 0.8); + background: var( + --plyr-video-control-background-hover, + var(--plyr-color-main, $plyr-video-control-background-hover) + ); border: 0; border-radius: 100%; color: $plyr-video-control-color; display: none; left: 50%; + opacity: 0.9; padding: ceil($plyr-control-spacing * 1.5); position: absolute; top: 50%; transform: translate(-50%, -50%); + transition: 0.3s; z-index: 2; // Offset icon to make the play button look right @@ -109,7 +117,7 @@ $embed-padding: ((100 / 16) * 9); &:hover, &:focus { - background: $plyr-video-control-bg-hover; + opacity: 1; } } @@ -125,15 +133,15 @@ $embed-padding: ((100 / 16) * 9); // Video range inputs .plyr--full-ui.plyr--video input[type='range'] { &::-webkit-slider-runnable-track { - background-color: $plyr-video-range-track-bg; + background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background); } &::-moz-range-track { - background-color: $plyr-video-range-track-bg; + background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background); } &::-ms-track { - background-color: $plyr-video-range-track-bg; + background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background); } // Pressed styles @@ -154,5 +162,5 @@ $embed-padding: ((100 / 16) * 9); // Progress .plyr--video .plyr__progress__buffer { - color: $plyr-video-progress-buffered-bg; + color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background); } |