diff options
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/plyr.less | 83 |
1 files changed, 43 insertions, 40 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 7ece63c2..3b1c21b6 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -9,7 +9,9 @@ // Animation // --------------------------------------- @keyframes plyr-progress { - to { background-position: @plyr-progress-loading-size 0; } + to { + background-position: @plyr-progress-loading-size 0; + } } // Styles @@ -35,7 +37,10 @@ & when (@plyr-touch-action = true) { // Fix 300ms delay - a, button, input, label { + a, + button, + input, + label { touch-action: manipulation; } } @@ -56,7 +61,7 @@ // Range inputs // Specificity is for bootstrap compatibility - input[type='range'] { + input[type="range"] { display: block; height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); width: 100%; @@ -137,12 +142,12 @@ } // Video range inputs -.plyr--video input[type='range'].tab-focus:focus { +.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 { +.plyr--audio input[type="range"].tab-focus:focus { outline: 1px dotted fade(@plyr-audio-control-color, 50%); } @@ -221,7 +226,7 @@ width: 100%; padding: (@plyr-control-spacing * 2); transform: translateY(-(@plyr-control-spacing * 4)); - transition: transform .3s ease; + transition: transform 0.3s ease; color: @plyr-captions-color; font-size: @plyr-font-size-captions-base; text-align: center; @@ -303,7 +308,7 @@ background: transparent; border-radius: 3px; cursor: pointer; - transition: background .3s ease, color .3s ease, opacity .3s ease; + transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; color: inherit; svg { @@ -352,7 +357,7 @@ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: @plyr-video-control-color; - transition: opacity .3s ease; + transition: opacity 0.3s ease; button { // Hover and tab focus @@ -396,7 +401,7 @@ border-radius: 100%; box-shadow: 0 1px 1px fade(#000, 15%); color: @plyr-video-control-color; - transition: all .3s ease; + transition: all 0.3s ease; svg { position: relative; @@ -423,11 +428,11 @@ } // States -.plyr__controls [data-plyr='pause'], -.plyr--playing .plyr__controls [data-plyr='play'] { +.plyr__controls [data-plyr="pause"], +.plyr--playing .plyr__controls [data-plyr="play"] { display: none; } -.plyr--playing .plyr__controls [data-plyr='pause'] { +.plyr--playing .plyr__controls [data-plyr="pause"] { display: inline-block; } @@ -443,12 +448,12 @@ } // Some options are hidden by default -.plyr [data-plyr='captions'], -.plyr [data-plyr='fullscreen'] { +.plyr [data-plyr="captions"], +.plyr [data-plyr="fullscreen"] { display: none; } -.plyr--captions-enabled [data-plyr='captions'], -.plyr--fullscreen-enabled [data-plyr='fullscreen'] { +.plyr--captions-enabled [data-plyr="captions"], +.plyr--fullscreen-enabled [data-plyr="fullscreen"] { display: inline-block; } @@ -470,13 +475,13 @@ font-size: @plyr-font-size-small; line-height: 1.3; - transform: translate(-50%, 10px) scale(.8); + transform: translate(-50%, 10px) scale(0.8); transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; &::before { // Arrows - content: ''; + content: ""; position: absolute; width: 0; height: 0; @@ -504,7 +509,7 @@ // First tooltip .plyr__controls button:first-child .plyr__tooltip { left: 0; - transform: translate(0, 10px) scale(.8); + transform: translate(0, 10px) scale(0.8); transform-origin: 0 100%; &::before { @@ -515,7 +520,7 @@ // Last tooltip .plyr__controls button:last-child .plyr__tooltip { right: 0; - transform: translate(0, 10px) scale(.8); + transform: translate(0, 10px) scale(0.8); transform-origin: 100% 100%; &::before { @@ -534,7 +539,6 @@ } } - // Playback progress // -------------------------------------------------------------- // <progress> element @@ -626,13 +630,13 @@ } .plyr__progress--buffer { &::-webkit-progress-value { - transition: width .2s ease; + transition: width 0.2s ease; } &::-moz-progress-bar { - transition: width .2s ease; + transition: width 0.2s ease; } &::-ms-fill { - transition: width .2s ease; + transition: width 0.2s ease; } } .plyr--video .plyr__progress--buffer, @@ -663,7 +667,8 @@ @plyr-progress-loading-bg 50%, @plyr-progress-loading-bg 75%, transparent 75%, - transparent); + transparent + ); color: transparent; } .plyr--video.plyr--loading .plyr__progress--buffer { @@ -690,7 +695,7 @@ // Add a slash in before &::before { - content: '\2044'; + content: "\2044"; margin-right: @plyr-control-spacing; } } @@ -721,21 +726,15 @@ // 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 [data-plyr="mute"] { display: none !important; } // Fullscreen // -------------------------------------------------------------- .plyr--fullscreen-active { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; height: 100%; width: 100%; - z-index: 10000000; background: #000; border-radius: 0 !important; @@ -750,12 +749,6 @@ // Revert overflow change overflow: visible; } - .plyr__controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } // Vimeo requires some different styling &.plyr--vimeo .plyr__video-wrapper { @@ -764,3 +757,13 @@ transform: translateY(-50%); } } + +// Fallback for unsupported browsers +.plyr--fullscreen-fallback.plyr--fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10000000; +} |