From 7f624ebbb7f32bc54bb57d77a8408446e819f43a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 14 May 2016 00:48:21 +1000 Subject: Icon tweaks, IE button fix --- src/js/plyr.js | 2 +- src/less/plyr.less | 22 ++++++++-------------- src/less/variables.less | 12 +++++------- src/scss/plyr.scss | 18 ++++++------------ src/scss/variables.scss | 12 +++++------- src/sprite/icon-captions-off.svg | 9 +++++---- src/sprite/icon-captions-on.svg | 12 +++++------- src/sprite/icon-enter-fullscreen.svg | 10 ++++++---- src/sprite/icon-exit-fullscreen.svg | 8 ++++---- src/sprite/icon-fast-forward.svg | 13 ++++++------- src/sprite/icon-muted.svg | 11 +++++------ src/sprite/icon-pause.svg | 15 +++++++-------- src/sprite/icon-play.svg | 13 ++++++------- src/sprite/icon-restart.svg | 12 ++++++------ src/sprite/icon-rewind.svg | 13 ++++++------- src/sprite/icon-volume.svg | 13 ++++++++----- 16 files changed, 89 insertions(+), 106 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 832df4af..db9f8a77 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.6.5 +// plyr.js v1.6.6 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/less/plyr.less b/src/less/plyr.less index 69846a10..ee07ed47 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -199,9 +199,9 @@ left: 0; width: 100%; padding: (@plyr-control-spacing * 2); - transform: translateY(-(@plyr-control-spacing * 6)); + transform: translateY(-(@plyr-control-spacing * 4)); 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: fade(#000, 85%); + background: @plyr-captions-bg; } span:empty { display: none; @@ -226,7 +226,7 @@ font-size: @plyr-font-size-captions-large; } .plyr--hide-controls .plyr__captions { - transform: translateY(-(@plyr-control-spacing * 2)); + transform: translateY(-(@plyr-control-spacing * 1.5)); } // Controls @@ -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/less/variables.less b/src/less/variables.less index ea5c6b8e..ef3b4e45 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -11,7 +11,9 @@ @plyr-font-size-base: 16px; // Captions -@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); +@plyr-captions-bg: fade(#000, 70%); +@plyr-captions-color: #fff; +@plyr-font-size-captions-base: @plyr-font-size-base; @plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); @plyr-font-size-captions-large: (@plyr-font-size-base * 2); @@ -29,12 +31,8 @@ @plyr-audio-control-bg-hover: @plyr-color-main; // Tooltips -@plyr-tooltip-bg: @plyr-video-controls-bg; -@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%); -@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%); -@plyr-tooltip-border-width: 1px; -@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color; -@plyr-tooltip-color: @plyr-video-control-color; +@plyr-tooltip-bg: fade(#000, 70%); +@plyr-tooltip-color: #fff; @plyr-tooltip-padding: (@plyr-control-spacing / 2); @plyr-tooltip-arrow-size: 4px; @plyr-tooltip-radius: 3px; 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; diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg index 788e4de4..48503285 100644 --- a/src/sprite/icon-captions-off.svg +++ b/src/sprite/icon-captions-off.svg @@ -1,6 +1,7 @@ - - - + + + + - + \ No newline at end of file diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg index c02dfcb1..b524abcb 100644 --- a/src/sprite/icon-captions-on.svg +++ b/src/sprite/icon-captions-on.svg @@ -1,9 +1,7 @@ - - - - - - + + + + - + \ No newline at end of file diff --git a/src/sprite/icon-enter-fullscreen.svg b/src/sprite/icon-enter-fullscreen.svg index e8d1ab1a..2bc7036c 100644 --- a/src/sprite/icon-enter-fullscreen.svg +++ b/src/sprite/icon-enter-fullscreen.svg @@ -1,7 +1,9 @@ - - - + + + + + - + \ No newline at end of file diff --git a/src/sprite/icon-exit-fullscreen.svg b/src/sprite/icon-exit-fullscreen.svg index 0fdd6b45..d02726ab 100644 --- a/src/sprite/icon-exit-fullscreen.svg +++ b/src/sprite/icon-exit-fullscreen.svg @@ -1,7 +1,7 @@ - - - + + + - + \ No newline at end of file diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg index 3ae96af6..a441bd27 100644 --- a/src/sprite/icon-fast-forward.svg +++ b/src/sprite/icon-fast-forward.svg @@ -1,7 +1,6 @@ - - - - - - + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-muted.svg b/src/sprite/icon-muted.svg index 8a0014f1..41c66821 100644 --- a/src/sprite/icon-muted.svg +++ b/src/sprite/icon-muted.svg @@ -1,8 +1,7 @@ - - - - - + + + + - + \ No newline at end of file diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg index db51a807..a4dae883 100644 --- a/src/sprite/icon-pause.svg +++ b/src/sprite/icon-pause.svg @@ -1,8 +1,7 @@ - - - - - - - + + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg index 069af73c..cc551902 100644 --- a/src/sprite/icon-play.svg +++ b/src/sprite/icon-play.svg @@ -1,7 +1,6 @@ - - - - - - + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg index 2a889021..efb99cce 100755 --- a/src/sprite/icon-restart.svg +++ b/src/sprite/icon-restart.svg @@ -1,6 +1,6 @@ - - - - + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg index fbc252d2..dec85456 100644 --- a/src/sprite/icon-rewind.svg +++ b/src/sprite/icon-rewind.svg @@ -1,7 +1,6 @@ - - - - - - + + + + + + \ No newline at end of file diff --git a/src/sprite/icon-volume.svg b/src/sprite/icon-volume.svg index 9de20690..bc533f40 100755 --- a/src/sprite/icon-volume.svg +++ b/src/sprite/icon-volume.svg @@ -1,5 +1,8 @@ - - - - - + + + + + + + + \ No newline at end of file -- cgit v1.2.3