diff options
Diffstat (limited to 'src/sass/settings')
-rw-r--r-- | src/sass/settings/captions.scss | 12 | ||||
-rw-r--r-- | src/sass/settings/colors.scss | 10 | ||||
-rw-r--r-- | src/sass/settings/controls.scss | 23 | ||||
-rw-r--r-- | src/sass/settings/cosmetics.scss | 2 | ||||
-rw-r--r-- | src/sass/settings/sliders.scss | 2 |
5 files changed, 43 insertions, 6 deletions
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 0c259046..46c9cfc8 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -2,9 +2,17 @@ // 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; $plyr-font-size-captions-large: $plyr-font-size-xlarge !default; + +@include css-vars( + ( + --plyr-captions-background: $plyr-captions-background, + --plyr-captions-text-color: $plyr-captions-text-color + ) +); diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index c9ea580c..5a2f4e82 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -7,3 +7,13 @@ $plyr-color-gunmetal: #2f343d !default; $plyr-color-fiord: #4f5b5f !default; $plyr-color-lynch: #6b7d85 !default; $plyr-color-heather: #b7c5cd !default; + +@include css-vars( + ( + --plyr-color-main: $plyr-color-main, + --plyr-color-gunmetal: $plyr-color-gunmetal, + --plyr-color-fiord: $plyr-color-fiord, + --plyr-color-lynch: $plyr-color-lynch, + --plyr-color-heather: $plyr-color-heather + ) +); diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index d6d2c153..906744b2 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -10,9 +10,26 @@ $plyr-control-radius: 3px !default; $plyr-video-controls-bg: #000 !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-bg-hover: var(--plyr-color-main) !default; $plyr-audio-controls-bg: #fff !default; -$plyr-audio-control-color: $plyr-color-fiord !default; +$plyr-audio-control-color: var(--plyr-color-fiord) !default; $plyr-audio-control-color-hover: #fff !default; -$plyr-audio-control-bg-hover: $plyr-color-main !default; +$plyr-audio-control-bg-hover: var(--plyr-color-main) !default; + +@include css-vars( + ( + --plyr-control-icon-size: $plyr-control-icon-size, + --plyr-control-spacing: $plyr-control-spacing, + --plyr-control-padding: $plyr-control-padding, + --plyr-control-radius: $plyr-control-radius, + --plyr-video-controls-bg: $plyr-video-controls-bg, + --plyr-video-control-color: $plyr-video-control-color, + --plyr-video-control-color-hover: $plyr-video-control-color-hover, + --plyr-video-control-bg-hover: $plyr-video-control-bg-hover, + --plyr-audio-controls-bg: $plyr-audio-controls-bg, + --plyr-audio-control-color: $plyr-audio-control-color, + --plyr-audio-control-color-hover: $plyr-audio-control-color-hover, + --plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover + ) +); 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/sliders.scss b/src/sass/settings/sliders.scss index 6ac053b0..3d77f485 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -16,7 +16,7 @@ $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-bg: var(--plyr-color-main); // Type specific $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; |