diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/less/mixins.less | 29 | ||||
| -rw-r--r-- | src/less/plyr.less | 122 | ||||
| -rw-r--r-- | src/less/variables.less | 66 |
3 files changed, 116 insertions, 101 deletions
diff --git a/src/less/mixins.less b/src/less/mixins.less new file mode 100644 index 00000000..8e8c43f1 --- /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: currentColor; + 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 d76eae48..ee22f97a 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -3,69 +3,8 @@ // https://github.com/selz/plyr // ========================================================================== -// Variables -// ------------------------------- - -// 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 -// #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-playing-bg: @plyr-color-main; -@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; - -// Breakpoints -@plyr-bp-screen-sm: 480px; -@plyr-bp-screen-md: 768px; +@import "variables"; +@import "mixins"; // Animation // --------------------------------------- @@ -73,33 +12,6 @@ to { background-position: @plyr-progress-loading-size 0; } } -// Mixins -// ------------------------------- -// <input type="range"> styling -.range-track() { - height: @plyr-range-track-height; - background: currentColor; - border: 0; - border-radius: (@plyr-range-track-height / 2); - user-select: none; -} -.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; -} -.range-thumb-active() { - background: @plyr-range-thumb-active-bg; - border-color: @plyr-range-thumb-active-border-color; - transform: scale(@plyr-range-thumb-active-scale); -} - // Styles // ------------------------------- // Base @@ -149,20 +61,20 @@ // WebKit &::-webkit-slider-runnable-track { - .range-track(); + .plyr-range-track(); } &::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2); - .range-thumb(); + .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; @@ -176,14 +88,14 @@ color: transparent; } &::-ms-fill-upper { - .range-track(); + .plyr-range-track(); } &::-ms-fill-lower { - .range-track(); + .plyr-range-track(); background: @plyr-progress-playing-bg; } &::-ms-thumb { - .range-thumb(); + .plyr-range-thumb(); // For some reason, Edge uses the -webkit margin above margin-top: 0; } @@ -205,17 +117,19 @@ // 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'] { color: @plyr-video-range-track-bg; @@ -223,6 +137,8 @@ outline: 1px dotted fade(@plyr-video-control-color, 50%); } } + +// Audio range inputs .plyr--audio input[type='range'] { color: @plyr-audio-range-track-bg; @@ -425,10 +341,14 @@ 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 { @@ -441,7 +361,7 @@ } } -// Large play button +// Large play button (video only) .plyr__play-large { position: absolute; top: 50%; diff --git a/src/less/variables.less b/src/less/variables.less new file mode 100644 index 00000000..338e5438 --- /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-playing-bg: @plyr-color-main; +@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; + +// Breakpoints +@plyr-bp-screen-sm: 480px; +@plyr-bp-screen-md: 768px;
\ No newline at end of file |