diff options
Diffstat (limited to 'src/scss')
| -rw-r--r-- | src/scss/plyr.scss | 18 | ||||
| -rw-r--r-- | src/scss/variables.scss | 12 |
2 files changed, 11 insertions, 19 deletions
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 0cb8968d..0d6f28a7 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -201,7 +201,7 @@ padding: ($plyr-control-spacing * 2); transform: translateY(-($plyr-control-spacing * 6)); transition: transform .3s ease; - color: #fff; + color: $plyr-captions-color; font-size: $plyr-font-size-captions-base; text-align: center; font-weight: 400; @@ -209,7 +209,7 @@ span { border-radius: 2px; padding: floor($plyr-control-spacing / 3) $plyr-control-spacing; - background: transparentize(#000, .15); + background: $plyr-captions-bg; } span:empty { display: none; @@ -263,8 +263,9 @@ position: relative; display: inline-block; flex-shrink: 0; + overflow: visible; // IE11 vertical-align: middle; - padding: ($plyr-control-spacing / 2); + padding: ($plyr-control-spacing * .7); border: 0; background: transparent; border-radius: 3px; @@ -298,9 +299,6 @@ .plyr__time { margin-left: $plyr-control-spacing; } - button { - padding: ($plyr-control-spacing / 2) $plyr-control-spacing; - } } } // Hide controls @@ -328,11 +326,6 @@ color: $plyr-video-control-color-hover; } } - - @media (min-width: $plyr-bp-screen-sm) { - padding-left: ($plyr-control-spacing * 1.5); - padding-right: ($plyr-control-spacing * 1.5); - } } // Audio controls @@ -431,7 +424,6 @@ opacity: 0; background: $plyr-tooltip-bg; - box-shadow: $plyr-tooltip-shadow; border-radius: $plyr-tooltip-radius; color: $plyr-tooltip-color; @@ -542,12 +534,14 @@ max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; + transition: none; } &::-moz-progress-bar { min-width: $plyr-range-track-height; max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; + transition: none; } &::-ms-fill { display: none; diff --git a/src/scss/variables.scss b/src/scss/variables.scss index baf47e25..ad63423a 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -12,7 +12,9 @@ $plyr-font-size-small: 14px !default; $plyr-font-size-base: 16px !default; // Captions -$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default; +$plyr-captions-bg: transparentize(#000, .3) !default; +$plyr-captions-color: #fff !default; +$plyr-font-size-captions-base: $plyr-font-size-base !default; $plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default; $plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default; @@ -30,12 +32,8 @@ $plyr-audio-control-color-hover: #fff !default; $plyr-audio-control-bg-hover: $plyr-color-main; // Tooltips -$plyr-tooltip-bg: $plyr-video-controls-bg !default; -$plyr-tooltip-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .9) !default; -$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .8) !default; -$plyr-tooltip-border-width: 1px !default; -$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color !default; -$plyr-tooltip-color: $plyr-video-control-color !default; +$plyr-tooltip-bg: transparentize(#000, .3) !default; +$plyr-tooltip-color: #fff !default; $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default; $plyr-tooltip-arrow-size: 4px !default; $plyr-tooltip-radius: 3px !default; |