diff options
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/plyr.less | 22 | ||||
| -rw-r--r-- | src/less/variables.less | 12 |
2 files changed, 13 insertions, 21 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 1b5c7eb2..ee7d5b78 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -214,9 +214,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; @@ -224,7 +224,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; @@ -241,7 +241,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 @@ -278,8 +278,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; @@ -313,9 +314,6 @@ .plyr__time { margin-left: @plyr-control-spacing; } - button { - padding: (@plyr-control-spacing / 2) @plyr-control-spacing; - } } } // Hide controls @@ -343,11 +341,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 @@ -446,7 +439,6 @@ opacity: 0; background: @plyr-tooltip-bg; - box-shadow: @plyr-tooltip-shadow; border-radius: @plyr-tooltip-radius; color: @plyr-tooltip-color; @@ -557,12 +549,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 fa0f83e9..0b2d0895 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -16,7 +16,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); @@ -34,12 +36,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; |