Merge branch 'develop' into css-variables
# Conflicts: # demo/dist/demo.css # demo/dist/demo.min.js.map # demo/index.html # dist/plyr.css # dist/plyr.min.js.map # dist/plyr.min.mjs.map # dist/plyr.polyfilled.min.js.map # dist/plyr.polyfilled.min.mjs.map # gulpfile.js # src/sass/base.scss # src/sass/components/control.scss # src/sass/settings/colors.scss # src/sass/settings/controls.scss
This commit is contained in:
@ -2,5 +2,5 @@
|
||||
// Badges
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-badge-bg: $plyr-color-fiord !default;
|
||||
$plyr-badge-background: $plyr-color-gray-700 !default;
|
||||
$plyr-badge-color: #fff !default;
|
||||
|
@ -9,10 +9,3 @@ $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
|
||||
)
|
||||
);
|
||||
|
@ -2,18 +2,32 @@
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-color-main: #fff !default;
|
||||
$plyr-color-gunmetal: #2f343d !default;
|
||||
$plyr-color-fiord: #4f5b5f !default;
|
||||
$plyr-color-lynch: #6b7d85 !default;
|
||||
$plyr-color-heather: #b7c5cd !default;
|
||||
$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-gunmetal: $plyr-color-gunmetal,
|
||||
--plyr-color-fiord: $plyr-color-fiord,
|
||||
--plyr-color-lynch: $plyr-color-lynch,
|
||||
--plyr-color-heather: $plyr-color-heather
|
||||
--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
|
||||
)
|
||||
);
|
||||
|
@ -7,29 +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: #000 !default;
|
||||
$plyr-video-control-bg-hover: var(--plyr-color-main) !default;
|
||||
$plyr-video-control-color-hover: #fff !default;
|
||||
$plyr-video-control-background-hover: $plyr-color-main !default;
|
||||
|
||||
$plyr-audio-controls-bg: #fff !default;
|
||||
$plyr-audio-control-color: var(--plyr-color-fiord) !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: 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
|
||||
)
|
||||
);
|
||||
$plyr-audio-control-background-hover: $plyr-color-main !default;
|
||||
|
@ -2,9 +2,9 @@
|
||||
// Menus
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-menu-bg: rgba(#fff, 0.9) !default;
|
||||
$plyr-menu-color: $plyr-color-fiord !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: $plyr-color-heather !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;
|
||||
|
@ -4,8 +4,8 @@
|
||||
|
||||
// Loading
|
||||
$plyr-progress-loading-size: 25px !default;
|
||||
$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 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-heather, 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;
|
||||
|
@ -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-gunmetal, 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: var(--plyr-color-main);
|
||||
$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;
|
||||
|
@ -2,8 +2,8 @@
|
||||
// Tooltips
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
|
||||
$plyr-tooltip-color: $plyr-color-fiord !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;
|
||||
|
Reference in New Issue
Block a user