diff options
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/mixins.less | 29 | ||||
| -rw-r--r-- | src/less/plyr.less | 287 | ||||
| -rw-r--r-- | src/less/variables.less | 66 |
3 files changed, 225 insertions, 157 deletions
diff --git a/src/less/mixins.less b/src/less/mixins.less new file mode 100644 index 00000000..25f43761 --- /dev/null +++ b/src/less/mixins.less @@ -0,0 +1,29 @@ +// ========================================================================== +// Plyr mixins +// https://github.com/selz/plyr +// ========================================================================== + +// <input type="range"> styling +.plyr-range-track() { + height: @plyr-range-track-height; + background: transparent; + border: 0; + border-radius: (@plyr-range-track-height / 2); + user-select: none; +} +.plyr-range-thumb() { + position: relative; + height: @plyr-range-thumb-height; + width: @plyr-range-thumb-width; + background: @plyr-range-thumb-bg; + border: @plyr-range-thumb-border; + border-radius: 100%; + transition: background .2s ease, border .2s ease, transform .2s ease; + box-shadow: @plyr-range-thumb-shadow; + box-sizing: border-box; +} +.plyr-range-thumb-active() { + background: @plyr-range-thumb-active-bg; + border-color: @plyr-range-thumb-active-border-color; + transform: scale(@plyr-range-thumb-active-scale); +}
\ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less index 99df1115..c2b5e55b 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -3,65 +3,8 @@ // https://github.com/selz/plyr // ========================================================================== -// Variables -// ------------------------------- - -// Colors -@plyr-color-main: #63B4E1; - -// Font sizes -@plyr-font-size-small: 14px; -@plyr-font-size-base: 16px; - -// Captions -@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); -@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); -@plyr-font-size-captions-large: (@plyr-font-size-base * 2); - -// Controls -// #C6D6DB -@plyr-control-spacing: 10px; -@plyr-video-controls-bg: #000; -@plyr-video-control-color: #fff; -@plyr-video-control-color-hover: #fff; -@plyr-video-control-bg-hover: @plyr-color-main; -@plyr-audio-controls-bg: transparent; -@plyr-audio-control-color: #565D64; -@plyr-audio-control-color-hover: #fff; -@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-padding: (@plyr-control-spacing / 2); -@plyr-tooltip-arrow-size: 4px; -@plyr-tooltip-radius: 3px; - -// Progress -@plyr-progress-bg: fade(@plyr-video-control-color, 25%); -@plyr-progress-playing-bg: @plyr-color-main; -@plyr-progress-buffered-bg: fade(@plyr-video-control-color, 25%); -@plyr-progress-loading-size: 25px; -@plyr-progress-loading-bg: fade(#000, 15%); - -// Range sliders -@range-track-height: 8px; -@range-track-bg: fade(#fff, 25%); -@range-thumb-height: floor(@range-track-height * 2); -@range-thumb-width: floor(@range-track-height * 2); -@range-thumb-bg: #fff; -@range-thumb-border: 2px solid transparent; -@range-thumb-active-border-color: #fff; -@range-thumb-active-bg: @plyr-video-control-bg-hover; -@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); - -// Breakpoints -@plyr-bp-control-split: 560px; // When controls split into left/right -@plyr-bp-captions-large: 768px; // When captions jump to the larger font size +@import "variables"; +@import "mixins"; // Animation // --------------------------------------- @@ -69,40 +12,13 @@ to { background-position: @plyr-progress-loading-size 0; } } -// Mixins -// ------------------------------- -// <input type="range"> styling -.range-track() { - height: @range-track-height; - background: @range-track-bg; - border: 0; - border-radius: (@range-track-height / 2); - user-select: none; -} -.range-thumb() { - position: relative; - height: @range-thumb-height; - width: @range-thumb-width; - background: @range-thumb-bg; - border: @range-thumb-border; - border-radius: 100%; - transition: background .2s ease, border .2s ease, transform .2s ease; - box-shadow: @range-thumb-shadow; - box-sizing: border-box; -} -.range-thumb-active() { - background: @range-thumb-active-bg; - border-color: @range-thumb-active-border-color; - transform: scale(1.25); -} - // Styles // ------------------------------- // Base .plyr { position: relative; max-width: 100%; - min-width: 290px; + min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; // border-box everything @@ -132,7 +48,7 @@ // Specificity is for bootstrap compatibility input[type='range'] { display: block; - height: @range-thumb-height; + height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); width: 100%; margin: 0; padding: 0; @@ -143,22 +59,22 @@ border: none; background: transparent; - // Webkit + // WebKit &::-webkit-slider-runnable-track { - .range-track(); + .plyr-range-track(); } &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: -((@range-thumb-height - @range-track-height) / 2); - .range-thumb(); + margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2); + .plyr-range-thumb(); } // Mozilla &::-moz-range-track { - .range-track(); + .plyr-range-track(); } &::-moz-range-thumb { - .range-thumb(); + .plyr-range-thumb(); } &::-moz-focus-outer { border: 0; @@ -166,22 +82,23 @@ // Microsoft &::-ms-track { - height: @range-track-height; + height: @plyr-range-track-height; background: transparent; border: 0; color: transparent; } - &::-ms-fill-lower, &::-ms-fill-upper { - .range-track(); + .plyr-range-track(); + } + &::-ms-fill-lower { + .plyr-range-track(); + background: @plyr-range-selected-bg; } &::-ms-thumb { - .range-thumb(); - + .plyr-range-thumb(); // For some reason, Edge uses the -webkit margin above margin-top: 0; } - &::-ms-tooltip { display: none; } @@ -194,25 +111,34 @@ border: 0; } &.tab-focus:focus { - outline: 1px dotted fade(@plyr-video-control-color, 50%); outline-offset: 3px; } // Pressed styles &:active { &::-webkit-slider-thumb { - .range-thumb-active(); + .plyr-range-thumb-active(); } &::-moz-range-thumb { - .range-thumb-active(); + .plyr-range-thumb-active(); } &::-ms-thumb { - .range-thumb-active(); + .plyr-range-thumb-active(); } } } } +// Video range inputs +.plyr--video input[type='range'].tab-focus:focus { + outline: 1px dotted fade(@plyr-video-control-color, 50%); +} + +// Audio range inputs +.plyr--audio input[type='range'].tab-focus:focus { + outline: 1px dotted fade(@plyr-audio-control-color, 50%); +} + // Screen reader only elements .plyr__sr-only { position: absolute !important; @@ -229,6 +155,9 @@ position: relative; background: #000; border-radius: inherit; + + // Cleaner radius, also forces iframe radius + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } // Container for embeds @@ -277,6 +206,7 @@ font-size: @plyr-font-size-captions-base; text-align: center; font-weight: 400; + -webkit-font-smoothing: subpixel-antialiased; span { border-radius: 2px; @@ -287,7 +217,7 @@ display: none; } - @media (min-width: @plyr-bp-captions-large) { + @media (min-width: @plyr-bp-screen-md) { font-size: @plyr-font-size-captions-medium; } } @@ -300,12 +230,6 @@ // Controls // -------------------------------------------------------------- -// Shared -.plyr__controls, -.plyr__play-large { - transition: visibility .3s ease, opacity .3s ease; -} - // Playback controls .plyr__controls { display: flex; @@ -314,17 +238,19 @@ line-height: 1; text-align: center; + transition: opacity .3s ease; + // Spacing > button, .plyr__progress, .plyr__time { - margin-left: @plyr-control-spacing; + margin-left: (@plyr-control-spacing / 2); &:first-child { margin-left: 0; } } - .plyr__volume[type="range"] { + .plyr__volume { margin-left: (@plyr-control-spacing / 2); } [data-plyr="pause"] { @@ -337,7 +263,7 @@ display: inline-block; flex-shrink: 0; vertical-align: middle; - padding: (@plyr-control-spacing / 2) @plyr-control-spacing; + padding: (@plyr-control-spacing / 2); border: 0; background: transparent; border-radius: 3px; @@ -364,6 +290,21 @@ .icon--captions-on { display: none; } + + @media (min-width: @plyr-bp-screen-sm) { + > button, + .plyr__progress, + .plyr__time { + margin-left: @plyr-control-spacing; + } + button { + padding: (@plyr-control-spacing / 2) @plyr-control-spacing; + } + } +} +// Hide controls +.plyr--hide-controls .plyr__controls { + opacity: 0; } // Video controls @@ -372,7 +313,7 @@ left: 0; right: 0; bottom: 0; - padding: (@plyr-control-spacing * 5) (@plyr-control-spacing * 1.5) @plyr-control-spacing; + padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; @@ -386,11 +327,20 @@ 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 .plyr--audio .plyr__controls { padding: @plyr-control-spacing; border-radius: inherit; background: @plyr-audio-controls-bg; + border: @plyr-audio-controls-border; + box-shadow: @plyr-audio-controls-box-shadow; color: @plyr-audio-control-color; button { @@ -403,7 +353,7 @@ } } -// Large play button +// Large play button (video only) .plyr__play-large { position: absolute; top: 50%; @@ -411,9 +361,11 @@ transform: translate(-50%, -50%); padding: @plyr-control-spacing; background: @plyr-video-control-bg-hover; - border: 4px solid @plyr-video-control-color; + border: 4px solid currentColor; border-radius: 100%; + box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); color: @plyr-video-control-color; + transition: opacity .3s ease, visibility .3s ease; svg { position: relative; @@ -431,6 +383,10 @@ .plyr--audio .plyr__play-large { display: none; } +.plyr--playing .plyr__play-large { + opacity: 0; + visibility: hidden; +} // States .plyr__controls [data-plyr='pause'], @@ -441,13 +397,6 @@ display: inline-block; } -// Hide controls -.plyr--hide-controls .plyr__controls, -.plyr--playing .plyr__play-large { - visibility: hidden; - opacity: 0; -} - // Change icons on state change .plyr--fullscreen-active .icon--exit-fullscreen, .plyr--muted .plyr__controls .icon--muted, @@ -472,7 +421,6 @@ // Tooltips // -------------------------------------------------------------- .plyr__tooltip { - visibility: hidden; position: absolute; z-index: 2; bottom: 100%; @@ -488,10 +436,11 @@ color: @plyr-tooltip-color; font-size: @plyr-font-size-small; line-height: 1.3; + -webkit-font-smoothing: subpixel-antialiased; transform: translate(-50%, 10px) scale(.8); transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease; + transition: transform .2s .1s ease, opacity .2s .1s ease; // Arrows &::before { @@ -514,7 +463,6 @@ .plyr button:hover .plyr__tooltip, .plyr button.tab-focus:focus .plyr__tooltip, .plyr__tooltip--visible { - visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } @@ -539,7 +487,6 @@ &::-moz-range-track { background: transparent; } - &::-ms-fill-lower, &::-ms-fill-upper { background: transparent; } @@ -552,13 +499,14 @@ } .plyr__progress--buffer[value], -.plyr__progress--played[value] { +.plyr__progress--played[value], +.plyr__volume--display[value] { position: absolute; left: 0; top: 50%; width: 100%; - height: @range-track-height; - margin: -(@range-track-height / 2) 0 0; + height: @plyr-range-track-height; + margin: -(@plyr-range-track-height / 2) 0 0; padding: 0; vertical-align: top; appearance: none; @@ -571,42 +519,41 @@ &::-webkit-progress-value { background: currentColor; border-radius: 100px; - min-width: @range-track-height; + min-width: @plyr-range-track-height; } &::-moz-progress-bar { background: currentColor; border-radius: 100px; - min-width: @range-track-height; + min-width: @plyr-range-track-height; } &::-ms-fill { border-radius: 100px; } } -.plyr__progress--played[value] { +.plyr__progress--played[value], +.plyr__volume--display[value] { z-index: 1; - color: @plyr-progress-playing-bg; + color: @plyr-range-selected-bg; background: transparent; + transition: none; &::-webkit-progress-value { - min-width: @range-track-height; + min-width: @plyr-range-track-height; + max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; } &::-moz-progress-bar { - min-width: @range-track-height; + min-width: @plyr-range-track-height; + max-width: 99%; border-top-right-radius: 0; border-bottom-right-radius: 0; } &::-ms-fill { - min-width: @range-track-height; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + display: none; } } .plyr__progress--buffer[value] { - color: @plyr-progress-buffered-bg; - background: @range-track-bg; - &::-webkit-progress-value { transition: width .2s ease; } @@ -617,13 +564,26 @@ transition: width .2s ease; } } +.plyr--video .plyr__progress--buffer[value], +.plyr--video .plyr__volume--display[value] { + background: @plyr-video-range-track-bg; +} +.plyr--video .plyr__progress--buffer[value] { + color: @plyr-video-progress-buffered-bg; +} +.plyr--audio .plyr__progress--buffer[value], +.plyr--audio .plyr__volume--display[value] { + background: @plyr-audio-range-track-bg; +} +.plyr--audio .plyr__progress--buffer[value] { + color: @plyr-audio-progress-buffered-bg; +} // Loading state .plyr--loading .plyr__progress--buffer { animation: plyr-progress 1s linear infinite; background-size: @plyr-progress-loading-size @plyr-progress-loading-size; background-repeat: repeat-x; - background-color: @plyr-progress-buffered-bg; background-image: linear-gradient( -45deg, @plyr-progress-loading-bg 25%, @@ -635,6 +595,12 @@ transparent); color: transparent; } +.plyr--video.plyr--loading .plyr__progress--buffer { + background-color: @plyr-video-progress-buffered-bg; +} +.plyr--audio.plyr--loading .plyr__progress--buffer { + background-color: @plyr-audio-progress-buffered-bg; +} // Time // -------------------------------------------------------------- @@ -643,13 +609,13 @@ vertical-align: middle; font-size: @plyr-font-size-small; line-height: .95; + -webkit-font-smoothing: subpixel-antialiased; } - // Media duration hidden on small screens .plyr__time + .plyr__time { display: none; - @media (min-width: @plyr-bp-control-split) { + @media (min-width: @plyr-bp-screen-md) { display: inline-block; } @@ -662,23 +628,29 @@ // Volume // -------------------------------------------------------------- -// <input[type='range']> element -// Specificity is for bootstrap compatibility -.plyr__volume[type='range'] { - max-width: 100px; +.plyr .plyr__volume { + display: none; + position: relative; + + input[type="range"] { + position: relative; + z-index: 2; + } + @media (min-width: @plyr-bp-screen-sm) { + display: block; + max-width: 60px; + } + @media (min-width: @plyr-bp-screen-md) { + max-width: 100px; + } } // Hide sound controls on iOS // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .plyr--is-ios .plyr__volume, -.plyr--is-ios [data-plyr='mute'], -.plyr--is-ios.plyr--audio .plyr__controls--right { - display: none; -} -// Center buttons so it looks less odd -.plyr--is-ios.plyr--audio .plyr__controls--left { - float: none; +.plyr--is-ios [data-plyr='mute'] { + display: none !important; } // Fullscreen @@ -694,6 +666,7 @@ width: 100%; z-index: 10000000; background: #000; + border-radius: 0; video { height: 100%; diff --git a/src/less/variables.less b/src/less/variables.less new file mode 100644 index 00000000..ea5c6b8e --- /dev/null +++ b/src/less/variables.less @@ -0,0 +1,66 @@ +// ========================================================================== +// Plyr variables +// https://github.com/selz/plyr +// ========================================================================== + +// Colors +@plyr-color-main: #3498db; + +// Font sizes +@plyr-font-size-small: 14px; +@plyr-font-size-base: 16px; + +// Captions +@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); +@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); +@plyr-font-size-captions-large: (@plyr-font-size-base * 2); + +// Controls +@plyr-control-spacing: 10px; +@plyr-video-controls-bg: #000; +@plyr-video-control-color: #fff; +@plyr-video-control-color-hover: #fff; +@plyr-video-control-bg-hover: @plyr-color-main; +@plyr-audio-controls-bg: #fff; +@plyr-audio-controls-border: 1px solid #dbe3e8; +@plyr-audio-controls-box-shadow: 0 1px 1px fade(#000, 5%); +@plyr-audio-control-color: #565D64; +@plyr-audio-control-color-hover: #fff; +@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-padding: (@plyr-control-spacing / 2); +@plyr-tooltip-arrow-size: 4px; +@plyr-tooltip-radius: 3px; + +// Progress +@plyr-progress-loading-size: 25px; +@plyr-progress-loading-bg: fade(#000, 15%); +@plyr-video-progress-bg: fade(#fff, 25%); +@plyr-video-progress-buffered-bg: @plyr-video-progress-bg; +@plyr-audio-progress-bg: fade(#C6D6DB, 66%); +@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg; + +// Range sliders +@plyr-range-track-height: 8px; +@plyr-range-thumb-height: floor(@plyr-range-track-height * 2); +@plyr-range-thumb-width: floor(@plyr-range-track-height * 2); +@plyr-range-thumb-bg: #fff; +@plyr-range-thumb-border: 2px solid transparent; +@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#000, 15%); +@plyr-range-thumb-active-border-color: #fff; +@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover; +@plyr-range-thumb-active-scale: 1.25; +@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg; +@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg; +@plyr-range-selected-bg: @plyr-color-main; + +// Breakpoints +@plyr-bp-screen-sm: 480px; +@plyr-bp-screen-md: 768px;
\ No newline at end of file |