diff options
Diffstat (limited to 'src/scss')
| -rw-r--r-- | src/scss/plyr.scss | 31 | ||||
| -rw-r--r-- | src/scss/variables.scss | 12 |
2 files changed, 22 insertions, 21 deletions
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 917c0645..20b73206 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -215,7 +215,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; @@ -223,7 +223,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; @@ -277,8 +277,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; @@ -312,9 +313,6 @@ .plyr__time { margin-left: $plyr-control-spacing; } - button { - padding: ($plyr-control-spacing / 2) $plyr-control-spacing; - } } } // Hide controls @@ -342,11 +340,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 @@ -370,6 +363,7 @@ // Large play button (video only) .plyr__play-large { + display: none; position: absolute; top: 50%; left: 50%; @@ -395,6 +389,9 @@ outline: 1px dotted transparentize($plyr-video-control-color, .5); } } +.plyr .plyr__play-large { + display: inline-block; +} .plyr--audio .plyr__play-large { display: none; } @@ -445,7 +442,6 @@ opacity: 0; background: $plyr-tooltip-bg; - box-shadow: $plyr-tooltip-shadow; border-radius: $plyr-tooltip-radius; color: $plyr-tooltip-color; @@ -487,8 +483,8 @@ // -------------------------------------------------------------- // <progress> element .plyr__progress { + display: none; position: relative; - display: inline-block; flex: 1; input[type="range"] { @@ -511,6 +507,9 @@ left: 0; } } +.plyr .plyr__progress { + display: inline-block; +} .plyr__progress--buffer, .plyr__progress--played, @@ -556,12 +555,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; @@ -641,8 +642,10 @@ // Volume // -------------------------------------------------------------- -.plyr .plyr__volume { +.plyr__volume { display: none; +} +.plyr .plyr__volume { flex: 1; position: relative; diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 7cc7e34c..5aa0d629 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -17,7 +17,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; @@ -35,12 +37,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; |