diff options
Diffstat (limited to 'src/less/plyr.less')
-rw-r--r-- | src/less/plyr.less | 588 |
1 files changed, 291 insertions, 297 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index f27023bc..50a530c9 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -7,12 +7,7 @@ // ------------------------------- // Colors -@plyr-blue: #3498DB; -@plyr-gray-dark: #343F4A; -@plyr-gray: #565D64; -@plyr-gray-light: #6B7D86; -@plyr-gray-lighter: #CBD0D3; -@plyr-off-white: #D6DADD; +@plyr-color-main: #3498DB; // Font sizes @plyr-font-size-small: 14px; @@ -24,11 +19,13 @@ @plyr-font-size-captions-large: (@plyr-font-size-base * 2); // Controls +@plyr-controls-bg: #000; +@plyr-control-color: #fff; +@plyr-control-color-hover: #fff; @plyr-control-spacing: 10px; -@plyr-controls-bg: #fff; -@plyr-control-bg-hover: @plyr-blue; -.contrast-control-color(@plyr-controls-bg); -.contrast-control-color-hover(@plyr-control-bg-hover); +@plyr-control-bg-hover: @plyr-color-main; +//.contrast-control-color(@plyr-controls-bg); +//.contrast-control-color-hover(@plyr-control-bg-hover); // Tooltips @plyr-tooltip-bg: @plyr-controls-bg; @@ -37,24 +34,27 @@ @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-control-color; -@plyr-tooltip-padding: @plyr-control-spacing; -@plyr-tooltip-arrow-size: 6px; +@plyr-tooltip-padding: (@plyr-control-spacing / 2); +@plyr-tooltip-arrow-size: 4px; @plyr-tooltip-radius: 3px; // Progress -@plyr-progress-bg: fade(@plyr-gray, 20%); -@plyr-progress-playing-bg: @plyr-blue; -@plyr-progress-buffered-bg: fade(@plyr-gray, 25%); -@plyr-progress-loading-size: 40px; +@plyr-progress-bg: fade(@plyr-control-color, 25%); +@plyr-progress-playing-bg: @plyr-color-main; +@plyr-progress-buffered-bg: fade(@plyr-control-color, 25%); +@plyr-progress-loading-size: 25px; @plyr-progress-loading-bg: fade(#000, 15%); -// Volume -@plyr-volume-track-height: 6px; -@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%); -@plyr-volume-thumb-height: (@plyr-volume-track-height * 2); -@plyr-volume-thumb-width: (@plyr-volume-track-height * 2); -@plyr-volume-thumb-bg: @plyr-control-color; -@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover; +// 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-control-bg-hover; +@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%); // Breakpoints @plyr-bp-control-split: 560px; // When controls split into left/right @@ -69,7 +69,7 @@ // Mixins // ------------------------------- // Contrast -.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) { +/*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) { @plyr-control-color: @plyr-gray-light; } .contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) { @@ -80,47 +80,31 @@ } .contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) { @plyr-control-color-hover: #fff; -} - -// Font smoothing -.font-smoothing(@mode: on) when (@mode = on) { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} -.font-smoothing(@mode: on) when (@mode = off) { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; -} +}*/ // <input type="range"> styling -.volume-thumb() { - height: @plyr-volume-thumb-height; - width: @plyr-volume-thumb-width; - background: @plyr-volume-thumb-bg; - border: 0; - border-radius: 100%; - transition: background .3s ease; - cursor: ew-resize; -} -.volume-track() { - height: @plyr-volume-track-height; - background: @plyr-volume-track-bg; - border: 0; - border-radius: (@plyr-volume-track-height / 2); -} -.seek-thumb() { - background: transparent; +.range-track() { + height: @range-track-height; + background: @range-track-bg; border: 0; - width: 1px; - height: @plyr-control-spacing; + border-radius: (@range-track-height / 2); + user-select: none; } -.seek-thumb-touch() { - width: (@plyr-control-spacing * 4); - transform: translateX(-50%); +.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; } -.seek-track() { - background: none; - border: 0; +.range-thumb-active() { + background: @range-thumb-active-bg; + border-color: @range-thumb-active-border-color; + transform: scale(1.25); } // Styles @@ -160,17 +144,16 @@ // For video &__video-wrapper { position: relative; + background: #000; + border-radius: inherit; + //overflow: hidden; } video, audio { width: 100%; height: auto; vertical-align: middle; - } - - // Hide default captions - video::-webkit-media-text-track-container { - display: none; + border-radius: inherit; } // Container for embeds @@ -178,7 +161,7 @@ padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; - background: #000; + border-radius: inherit; iframe { position: absolute; @@ -204,22 +187,27 @@ } // Captions + + // Hide default captions + video::-webkit-media-text-track-container { + display: none; + } &__captions { display: none; position: absolute; bottom: 0; left: 0; width: 100%; - padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 3); + padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8); color: #fff; font-size: @plyr-font-size-captions-base; text-align: center; - .font-smoothing(); + font-weight: 400; span { border-radius: 2px; - padding: 3px 10px; - background: fade(#000, 90%); + padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing; + background: fade(#000, 85%); } span:empty { display: none; @@ -236,45 +224,165 @@ font-size: @plyr-font-size-captions-large; } + // Common + // Specificity is for bootstrap compatibility + input[type='range'] { + display: block; + height: @range-thumb-height; + width: 100%; + margin: 0; + padding: 0; + vertical-align: middle; + + appearance: none; + cursor: pointer; + border: none; + background: transparent; + + // Webkit + &::-webkit-slider-runnable-track { + .range-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -((@range-thumb-height - @range-track-height) / 2); + .range-thumb(); + } + + // Mozilla + &::-moz-range-track { + .range-track(); + } + &::-moz-range-thumb { + .range-thumb(); + } + &::-moz-focus-outer { + border: 0; + } + + // Microsoft + &::-ms-track { + height: @range-track-height; + background: transparent; + border: 0; + color: transparent; + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .range-track(); + } + &::-ms-thumb { + .range-thumb(); + + // For some reason, Edge uses the -webkit margin above + margin-top: 0; + } + + &::-ms-tooltip { + display: none; + } + + // Focus styles + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + &.tab-focus:focus { + outline: 1px dotted fade(@plyr-control-color, 50%); + outline-offset: 3px; + } + + // Pressed styles + &:active { + &::-webkit-slider-thumb { + .range-thumb-active(); + } + &::-moz-range-thumb { + .range-thumb-active(); + } + &::-ms-thumb { + .range-thumb-active(); + } + } + } + + // Large play button + &__play-large { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: @plyr-control-spacing; + background: @plyr-control-bg-hover; + border: 4px solid @plyr-control-color; + border-radius: 100%; + color: @plyr-control-color; + + svg { + position: relative; + left: 2px; + width: 20px; + height: 20px; + display: block; + fill: currentColor; + } + + &:focus { + outline: 1px dotted fade(@plyr-control-color, 50%); + } + } + + // Shared + &__controls, + &__play-large { + transition: visibility .3s ease, opacity .3s ease; + } + &--playing &__play-large { + visibility: hidden; + opacity: 0; + } + // Playback controls &__controls { - .font-smoothing(); - position: relative; - padding: @plyr-control-spacing; - background: @plyr-controls-bg; + position: absolute; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; + + background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 25%)); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + line-height: 1; text-align: center; - box-shadow: 0 1px 1px fade(@plyr-gray-dark, 20%); - // Clear floats - &::after { - content: ''; - display: table; - clear: both; - } + // Spacing + > button, + .plyr__progress, + .plyr__time, + .plyr__volume[type="range"] { + margin-left: @plyr-control-spacing; - // Layout - &--right { - display: block; - margin: @plyr-control-spacing auto 0; - } - @media (min-width: @plyr-bp-control-split) { - &--left { - float: left; - } - &--right { - float: right; - margin-top: 0; + &::first-child { + margin-left: 0; } } + [data-plyr="mute"] { + margin-left: 0; + } // Buttons button { + position: relative; display: inline-block; + flex-shrink: 0; vertical-align: middle; - margin: 0 2px; padding: (@plyr-control-spacing / 2) @plyr-control-spacing; - overflow: hidden; border: 0; background: transparent; border-radius: 3px; @@ -287,7 +395,6 @@ height: 18px; display: block; fill: currentColor; - transition: fill .3s ease; } // Hover and tab focus @@ -308,31 +415,6 @@ .icon--captions-on { display: none; } - - // plyr time - .plyr__time { - display: inline-block; - vertical-align: middle; - margin-left: @plyr-control-spacing; - color: @plyr-control-color; - font-weight: 600; - font-size: @plyr-font-size-small; - } - - // Media duration hidden on small screens - .plyr__time + .plyr__time { - display: none; - - @media (min-width: @plyr-bp-control-split) { - display: inline-block; - } - - // Add a slash in before - &::before { - content: '\2044'; - margin-right: @plyr-control-spacing; - } - } } // Tooltips @@ -341,7 +423,7 @@ position: absolute; z-index: 2; bottom: 100%; - margin-bottom: @plyr-tooltip-padding; + margin-bottom: (@plyr-tooltip-padding * 2); padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5); pointer-events: none; @@ -349,10 +431,10 @@ background: @plyr-tooltip-bg; box-shadow: @plyr-tooltip-shadow; border-radius: @plyr-tooltip-radius; + color: @plyr-tooltip-color; font-size: @plyr-font-size-small; - line-height: 1.5; - font-weight: 600; + line-height: 1.3; transform: translate(-50%, 10px) scale(.8); transform-origin: 50% 100%; @@ -398,115 +480,95 @@ z-index: 3; } - // Common range styles - input[type='range'] { - &::-ms-tooltip { - display: none; - } - &.tab-focus:focus { - outline: 1px dotted fade(@plyr-gray-dark, 80%); - outline-offset: 3px; - } - } - // Playback progress // <progress> element &__progress { - position: absolute; - bottom: 100%; - left: 0; - right: 0; - width: 100%; - height: @plyr-control-spacing; - background: @plyr-progress-bg; + position: relative; + flex: 1; + + input[type="range"] { + position: relative; + z-index: 2; + + &::-webkit-slider-runnable-track { + background: transparent; + } + &::-moz-range-track { + background: transparent; + } + &::-ms-fill-lower, + &::-ms-fill-upper { + background: transparent; + } + } &--buffer[value], - &--played[value], - &--seek[type='range'] { + &--played[value] { position: absolute; left: 0; - top: 0; + top: 50%; width: 100%; - height: @plyr-control-spacing; - margin: 0; + height: @range-track-height; + margin: -(@range-track-height / 2) 0 0; padding: 0; vertical-align: top; - - -webkit-appearance: none; - -moz-appearance: none; + appearance: none; border: none; - background: transparent; - } - &--buffer[value], - &--played[value] { + border-radius: 100px; + &::-webkit-progress-bar { background: transparent; - transition: width .2s ease; } - - // Inherit from currentColor; &::-webkit-progress-value { background: currentColor; - transition: width .2s ease; + border-radius: 100px; + min-width: @range-track-height; } &::-moz-progress-bar { background: currentColor; - transition: width .2s ease; + border-radius: 100px; + min-width: @range-track-height; + } + &::-ms-fill { + border-radius: 100px; } } &--played[value] { - z-index: 2; + z-index: 1; color: @plyr-progress-playing-bg; - } - &--buffer[value] { - color: @plyr-progress-buffered-bg; - } - - // Seek control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &--seek[type='range'] { - z-index: 4; - cursor: pointer; - outline: 0; - - // Webkit - &::-webkit-slider-runnable-track { - .seek-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - .seek-thumb(); - } - - // Mozilla - &::-moz-range-track { - .seek-track(); - } - &::-moz-range-thumb { - -moz-appearance: none; - .seek-thumb(); - } + background: transparent; - // Microsoft - &::-ms-track { - color: transparent; - .seek-track(); + &::-webkit-progress-value { + background: currentColor; + min-width: @range-track-height; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - &::-ms-fill-lower, - &::-ms-fill-upper { - .seek-track(); + &::-moz-progress-bar { + background: currentColor; + min-width: @range-track-height; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - &::-ms-thumb { - .seek-thumb(); + &::-ms-fill { + min-width: @range-track-height; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + } + &--buffer[value] { + color: @plyr-progress-buffered-bg; + background: @range-track-bg; - &:focus { - outline: 0; - } - &::-moz-focus-outer { - border: 0; + &::-webkit-progress-value { + transition: width .2s ease; } + &::-moz-progress-bar { + transition: width .2s ease; + } + &::-ms-fill { + transition: width .2s ease; + } } // Seek tooltip to show time @@ -515,21 +577,6 @@ } } - // Touch seek wider handle - &--is-touch &--seek[type='range'] { - &::-webkit-slider-thumb { - .seek-thumb-touch(); - } - // Mozilla - &::-moz-range-thumb { - .seek-thumb-touch(); - } - // Microsoft - &::-ms-thumb { - .seek-thumb-touch(); - } - } - // Loading state &--loading .plyr__progress--buffer { animation: plyr-progress 1s linear infinite; @@ -557,68 +604,35 @@ display: inline-block; } - // Volume control - // <input[type='range']> element - // Specificity is for bootstrap compatibility - &__volume[type='range'] { + // plyr time + &__time { display: inline-block; vertical-align: middle; - -webkit-appearance: none; - -moz-appearance: none; - width: 100px; - margin: 0 @plyr-control-spacing 0 0; - padding: 0; - cursor: pointer; - background: transparent; - border: none; + color: @plyr-control-color; + font-size: @plyr-font-size-small; + line-height: .95; + } - // Webkit - &::-webkit-slider-runnable-track { - .volume-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -((@plyr-volume-thumb-height - @plyr-volume-track-height) / 2); - .volume-thumb(); - } + // Media duration hidden on small screens + &__time + &__time { + display: none; - // Mozilla - &::-moz-range-track { - .volume-track(); - } - &::-moz-range-thumb { - .volume-thumb(); + @media (min-width: @plyr-bp-control-split) { + display: inline-block; } - // Microsoft - &::-ms-track { - height: @plyr-volume-track-height; - background: transparent; - border-color: transparent; - border-width: ((@plyr-volume-thumb-height - @plyr-volume-track-height) / 2) 0; - color: transparent; - } - &::-ms-fill-lower, - &::-ms-fill-upper { - .volume-track(); - } - &::-ms-thumb { - .volume-thumb(); + // Add a slash in before + &::before { + content: '\2044'; + margin-right: @plyr-control-spacing; } + } - &:focus { - outline: 0; - - &::-webkit-slider-thumb { - background: @plyr-volume-thumb-bg-focus; - } - &::-moz-range-thumb { - background: @plyr-volume-thumb-bg-focus; - } - &::-ms-thumb { - background: @plyr-volume-thumb-bg-focus; - } - } + // Volume control + // <input[type='range']> element + // Specificity is for bootstrap compatibility + &__volume[type='range'] { + max-width: 100px; } // Hide sound controls on iOS @@ -642,7 +656,7 @@ &--audio .plyr__progress { bottom: auto; top: 0; - background: @plyr-off-white; + background: #fff; } // Full screen mode @@ -674,30 +688,10 @@ } // Hide controls when playing in full screen - &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing, - &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing { + &.plyr--hide-controls { .plyr__controls { - transform: translateY(100%) translateY(@plyr-control-spacing / 2); - transition: transform .3s .2s ease; - } - .plyr__captions { - bottom: (@plyr-control-spacing / 2); - transition: bottom .3s .2s ease; - } - &.plyr--hover .plyr__controls { - transform: translateY(0); - } - } - - // Captions - &.plyr--fullscreen .plyr__captions, - &--fullscreen-active .plyr__captions, - &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions { - top: auto; - bottom: 90px; - - @media (min-width: @plyr-bp-control-split) { - bottom: 60px; + opacity: 0; + visibility: hidden; } } |