From 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 May 2018 13:37:10 +1000 Subject: WIP --- src/sass/settings/captions.scss | 12 ++++++++++-- src/sass/settings/colors.scss | 10 ++++++++++ src/sass/settings/controls.scss | 24 +++++++++++++++++++++--- src/sass/settings/cosmetics.scss | 2 ++ src/sass/settings/sliders.scss | 2 +- 5 files changed, 44 insertions(+), 6 deletions(-) (limited to 'src/sass/settings') 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 64f05cec..77387567 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -11,9 +11,27 @@ $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-icon-size-large: $plyr-control-icon-size-large, + --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 3c75b797..edc3fe7e 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -16,7 +16,7 @@ $plyr-range-track-height: 6px !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; -- cgit v1.2.3 From bdd513635fffa33f66735c80209e6ae77e0426b4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 8 Dec 2018 17:06:20 +1100 Subject: Work on outline/focus styles --- src/sass/settings/controls.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/sass/settings') diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index ee88434a..906744b2 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -20,7 +20,6 @@ $plyr-audio-control-bg-hover: var(--plyr-color-main) !default; @include css-vars( ( --plyr-control-icon-size: $plyr-control-icon-size, - --plyr-control-icon-size-large: $plyr-control-icon-size-large, --plyr-control-spacing: $plyr-control-spacing, --plyr-control-padding: $plyr-control-padding, --plyr-control-radius: $plyr-control-radius, -- cgit v1.2.3 From 996075decc6e8c0f0c5059dccea21b16020eb78b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 11 Apr 2019 20:50:20 +1000 Subject: More work on variable usage --- src/sass/settings/colors.scss | 2 +- src/sass/settings/controls.scss | 2 +- src/sass/settings/type.scss | 20 ++++++++++++++++++-- 3 files changed, 20 insertions(+), 4 deletions(-) (limited to 'src/sass/settings') diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index 5a2f4e82..c0867b85 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -2,7 +2,7 @@ // Colors // ========================================================================== -$plyr-color-main: #1aafff !default; +$plyr-color-main: #fff !default; $plyr-color-gunmetal: #2f343d !default; $plyr-color-fiord: #4f5b5f !default; $plyr-color-lynch: #6b7d85 !default; diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index 906744b2..0c88163d 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -9,7 +9,7 @@ $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-color-hover: #000 !default; $plyr-video-control-bg-hover: var(--plyr-color-main) !default; $plyr-audio-controls-bg: #fff !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 + ) +); -- cgit v1.2.3 From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 11 Apr 2020 16:23:14 +1000 Subject: Converted to 2 space indentation --- src/sass/settings/badges.scss | 5 +++-- src/sass/settings/breakpoints.scss | 7 ++----- src/sass/settings/captions.scss | 12 +++++------ src/sass/settings/colors.scss | 38 ++++++++++----------------------- src/sass/settings/controls.scss | 38 ++++++++++++++++++++++----------- src/sass/settings/cosmetics.scss | 4 +--- src/sass/settings/menus.scss | 17 +++++++++------ src/sass/settings/progress.scss | 11 ++++++---- src/sass/settings/sliders.scss | 43 ++++++++++++++++++++++++++------------ src/sass/settings/tooltips.scss | 12 +++++------ src/sass/settings/type.scss | 39 +++++++++++----------------------- 11 files changed, 115 insertions(+), 111 deletions(-) (limited to 'src/sass/settings') diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss index 7915c048..0148f570 100644 --- a/src/sass/settings/badges.scss +++ b/src/sass/settings/badges.scss @@ -2,5 +2,6 @@ // Badges // ========================================================================== -$plyr-badge-background: $plyr-color-gray-700 !default; -$plyr-badge-color: #fff !default; +$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default; +$plyr-badge-color: var(--plyr-badge-color, #fff) !default; +$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default; diff --git a/src/sass/settings/breakpoints.scss b/src/sass/settings/breakpoints.scss index 77a5b93a..daa58f68 100644 --- a/src/sass/settings/breakpoints.scss +++ b/src/sass/settings/breakpoints.scss @@ -1,12 +1,9 @@ // ========================================================================== // Breakpoints +// NOTE: we can't use CSS variables for breakpoints unfortunately +// https://www.w3.org/TR/css-variables-1/#using-variables // ========================================================================== $plyr-bp-sm: 480px !default; $plyr-bp-md: 768px !default; $plyr-bp-lg: 1024px !default; - -// Max-width media queries -$plyr-bp-xs-max: ($plyr-bp-sm - 1); -$plyr-bp-sm-max: ($plyr-bp-md - 1); -$plyr-bp-md-max: ($plyr-bp-lg - 1); diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 50f577dc..85735faf 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -2,10 +2,10 @@ // Captions // ========================================================================== -$plyr-captions-background: rgba(#000, 0.8) !default; -$plyr-captions-text-color: #fff !default; +$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default; +$plyr-captions-text-color: var(--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; +$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default; +$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default; +$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default; +$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default; diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index 6c9b0a3f..f1364905 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -2,32 +2,16 @@ // Colors // ========================================================================== -$plyr-color-main: hsl(198, 100%, 50%) !default; +$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default; // Grayscale -$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 - ) -); +$plyr-color-gray-900: hsl(216, 15%, 16%) !default; +$plyr-color-gray-800: hsl(216, 15%, 25%) !default; +$plyr-color-gray-700: hsl(216, 15%, 34%) !default; +$plyr-color-gray-600: hsl(216, 15%, 43%) !default; +$plyr-color-gray-500: hsl(216, 15%, 52%) !default; +$plyr-color-gray-400: hsl(216, 15%, 61%) !default; +$plyr-color-gray-300: hsl(216, 15%, 70%) !default; +$plyr-color-gray-200: hsl(216, 15%, 79%) !default; +$plyr-color-gray-100: hsl(216, 15%, 88%) !default; +$plyr-color-gray-50: hsl(216, 15%, 97%) !default; diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index a4009758..64882f4e 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -2,17 +2,31 @@ // Controls // ========================================================================== -$plyr-control-icon-size: 18px !default; -$plyr-control-spacing: 10px !default; -$plyr-control-padding: ($plyr-control-spacing * 0.7) !default; -$plyr-control-radius: 3px !default; +$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default; +$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default; +$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default; +$plyr-control-radius: var(--plyr-control-radius, 3px) !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-background-hover: $plyr-color-main !default; +$plyr-control-toggle-checked-background: var( + --plyr-control-toggle-checked-background, + var(--plyr-color-main, $plyr-color-main) +) !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-background-hover: $plyr-color-main !default; +$plyr-video-controls-background: var( + --plyr-video-controls-background, + linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) +) !default; +$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default; +$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default; +$plyr-video-control-background-hover: var( + --plyr-video-control-background-hover, + var(--plyr-color-main, $plyr-color-main) +) !default; + +$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default; +$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default; +$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default; +$plyr-audio-control-background-hover: var( + --plyr-audio-control-background-hover, + var(--plyr-color-main, $plyr-color-main) +) !default; diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss index 80063850..3320ae7f 100644 --- a/src/sass/settings/cosmetics.scss +++ b/src/sass/settings/cosmetics.scss @@ -2,6 +2,4 @@ // Cosmetic // ========================================================================== -$plyr-tab-focus-default-color: $plyr-color-main !default; - -@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color)); +$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default; diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss index 62c3dd04..bdd1eb36 100644 --- a/src/sass/settings/menus.scss +++ b/src/sass/settings/menus.scss @@ -2,9 +2,14 @@ // Menus // ========================================================================== -$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-500, 0.2) !default; -$plyr-menu-border-shadow-color: #fff !default; -$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default; +$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default; +$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default; + +$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default; + +$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default; +$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default; + +// Border seperators +$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default; +$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default; diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss index a0e7f755..7e76da19 100644 --- a/src/sass/settings/progress.scss +++ b/src/sass/settings/progress.scss @@ -3,9 +3,12 @@ // ========================================================================== // Loading -$plyr-progress-loading-size: 25px !default; -$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default; +$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default; +$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default; // Buffered -$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default; -$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default; +$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default; +$plyr-audio-progress-buffered-background: var( + --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 17740623..928a46b3 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -2,23 +2,40 @@ // Sliders // ========================================================================== -// Active state -$plyr-range-thumb-active-shadow-width: 3px !default; - // Thumb -$plyr-range-thumb-height: 13px !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-900, 0.2) !default; +$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default; +$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default; +$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default; +$plyr-range-thumb-shadow: var( + --plyr-range-thumb-shadow, + 0 1px 1px rgba($plyr-color-gray-900, 0.15), + 0 0 0 1px rgba($plyr-color-gray-900, 0.2) +) !default; + +// Active state +$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5)); +$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default; // Track -$plyr-range-track-height: 5px !default; -$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default; +$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default; +$plyr-range-max-height: var( + --plyr-range-max-height, + calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height}) +) !default; // Fill -$plyr-range-fill-background: var(--plyr-color-main); +$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default; // Type specific -$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; +$plyr-video-range-track-background: var( + --plyr-video-range-track-background, + $plyr-video-progress-buffered-background +) !default; +$plyr-audio-range-track-background: var( + --plyr-audio-range-track-background, + $plyr-audio-progress-buffered-background +) !default; +$plyr-audio-range-thumb-shadow-color: var( + --plyr-audio-range-thumb-shadow-color, + rgba($plyr-color-gray-900, 0.1) +) !default; diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss index 0ea5c582..76a9855a 100644 --- a/src/sass/settings/tooltips.scss +++ b/src/sass/settings/tooltips.scss @@ -2,9 +2,9 @@ // Tooltips // ========================================================================== -$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; -$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default; +$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default; +$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default; +$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default; +$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default; +$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default; +$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default; diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss index e9ee2671..f424ecef 100644 --- a/src/sass/settings/type.scss +++ b/src/sass/settings/type.scss @@ -2,35 +2,20 @@ // Typography // ========================================================================== -$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default; -$plyr-font-size-base: 16px !default; -$plyr-font-size-small: 14px !default; -$plyr-font-size-large: 18px !default; -$plyr-font-size-xlarge: 21px !default; +$plyr-font-family: var(--plyr-font-family) !default; +$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default; +$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default; +$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default; +$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default; -$plyr-font-size-time: var(--plyr-font-size-small) !default; -$plyr-font-size-badge: 9px !default; -$plyr-font-size-menu: var(--plyr-font-size-small) !default; +$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default; +$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default; +$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default; +$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default; -$plyr-font-weight-regular: 500 !default; -$plyr-font-weight-bold: 600 !default; +$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default; +$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default; -$plyr-line-height: 1.7 !default; +$plyr-line-height: var(--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 - ) -); -- cgit v1.2.3 From a97008aeebb19678e5183e7c934e60729857e11b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 24 Apr 2020 00:14:50 +1000 Subject: More work on custom properties and documentation --- src/sass/settings/badges.scss | 2 +- src/sass/settings/captions.scss | 8 ++++---- src/sass/settings/cosmetics.scss | 2 +- src/sass/settings/menus.scss | 14 +++++++------- src/sass/settings/progress.scss | 2 +- src/sass/settings/sliders.scss | 15 +++++++-------- src/sass/settings/tooltips.scss | 2 +- src/sass/settings/type.scss | 7 +++---- 8 files changed, 25 insertions(+), 27 deletions(-) (limited to 'src/sass/settings') diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss index 0148f570..e56da1f8 100644 --- a/src/sass/settings/badges.scss +++ b/src/sass/settings/badges.scss @@ -3,5 +3,5 @@ // ========================================================================== $plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default; -$plyr-badge-color: var(--plyr-badge-color, #fff) !default; +$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default; $plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default; diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 85735faf..23d944cb 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -5,7 +5,7 @@ $plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default; $plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default; -$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default; -$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default; -$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default; -$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !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; diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss index 3320ae7f..4fc10de5 100644 --- a/src/sass/settings/cosmetics.scss +++ b/src/sass/settings/cosmetics.scss @@ -2,4 +2,4 @@ // Cosmetic // ========================================================================== -$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default; +$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default; diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss index bdd1eb36..283a0c59 100644 --- a/src/sass/settings/menus.scss +++ b/src/sass/settings/menus.scss @@ -3,13 +3,13 @@ // ========================================================================== $plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default; +$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default; $plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default; +$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default; +$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default; -$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default; +$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default; +$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default; -$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default; -$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default; - -// Border seperators -$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default; -$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default; +$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default; +$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default; diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss index 7e76da19..4e5105f0 100644 --- a/src/sass/settings/progress.scss +++ b/src/sass/settings/progress.scss @@ -10,5 +10,5 @@ $plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba( $plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default; $plyr-audio-progress-buffered-background: var( --plyr-audio-progress-buffered-background, - rgba($plyr-color-gray-200, 0.66) + rgba($plyr-color-gray-200, 0.6) ) !default; diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index 928a46b3..444b43da 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -5,7 +5,6 @@ // Thumb $plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default; $plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default; -$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default; $plyr-range-thumb-shadow: var( --plyr-range-thumb-shadow, 0 1px 1px rgba($plyr-color-gray-900, 0.15), @@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var( ) !default; // Active state -$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5)); $plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default; // Track $plyr-range-track-height: var(--plyr-range-track-height, 5px) !default; -$plyr-range-max-height: var( - --plyr-range-max-height, - calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height}) -) !default; // Fill $plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default; @@ -31,11 +25,16 @@ $plyr-video-range-track-background: var( --plyr-video-range-track-background, $plyr-video-progress-buffered-background ) !default; +$plyr-video-range-thumb-active-shadow-color: var( + --plyr-audio-range-thumb-active-shadow-color, + rgba(#fff, 0.5) +) !default; + $plyr-audio-range-track-background: var( --plyr-audio-range-track-background, $plyr-audio-progress-buffered-background ) !default; -$plyr-audio-range-thumb-shadow-color: var( - --plyr-audio-range-thumb-shadow-color, +$plyr-audio-range-thumb-active-shadow-color: var( + --plyr-audio-range-thumb-active-shadow-color, rgba($plyr-color-gray-900, 0.1) ) !default; diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss index 76a9855a..629e9358 100644 --- a/src/sass/settings/tooltips.scss +++ b/src/sass/settings/tooltips.scss @@ -7,4 +7,4 @@ $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default; $plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default; $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default; $plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default; -$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default; +$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default; diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss index f424ecef..17db54f2 100644 --- a/src/sass/settings/type.scss +++ b/src/sass/settings/type.scss @@ -2,20 +2,19 @@ // Typography // ========================================================================== -$plyr-font-family: var(--plyr-font-family) !default; +$plyr-font-family: var(--plyr-font-family, inherit) !default; $plyr-font-size-base: var(--plyr-font-size-base, 15px) !default; $plyr-font-size-small: var(--plyr-font-size-small, 13px) !default; $plyr-font-size-large: var(--plyr-font-size-large, 18px) !default; $plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default; $plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default; -$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default; -$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default; $plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default; +$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default; $plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default; $plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default; $plyr-line-height: var(--plyr-line-height, 1.7) !default; -$plyr-font-smoothing: false !default; +$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default; -- cgit v1.2.3 From 853753a3da22ca444c9773098a4cedcca575f934 Mon Sep 17 00:00:00 2001 From: Kostadin Bashev Date: Fri, 1 May 2020 18:16:59 +0300 Subject: Update tooltips.scss --- src/sass/settings/tooltips.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/sass/settings') diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss index 629e9358..ffc24ab8 100644 --- a/src/sass/settings/tooltips.scss +++ b/src/sass/settings/tooltips.scss @@ -4,7 +4,8 @@ $plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default; $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default; -$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default; +$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2); +$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default; $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default; $plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default; $plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default; -- cgit v1.2.3 From 2a97adbec66ebedb892828844e0874662b31cb78 Mon Sep 17 00:00:00 2001 From: Kostadin Bashev Date: Fri, 1 May 2020 18:17:49 +0300 Subject: Update controls.scss --- src/sass/settings/controls.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/sass/settings') diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index 64882f4e..f1e90dd5 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -4,7 +4,8 @@ $plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default; $plyr-control-spacing: var(--plyr-control-spacing, 10px) !default; -$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default; +$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7); +$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default; $plyr-control-radius: var(--plyr-control-radius, 3px) !default; $plyr-control-toggle-checked-background: var( -- cgit v1.2.3