diff options
Diffstat (limited to 'src/less/components/controls.less')
| -rw-r--r-- | src/less/components/controls.less | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/src/less/components/controls.less b/src/less/components/controls.less new file mode 100644 index 00000000..fce34aff --- /dev/null +++ b/src/less/components/controls.less @@ -0,0 +1,155 @@ +// Controls +// -------------------------------------------------------------- + +// Playback controls +.plyr__controls { + display: flex; + align-items: center; + + line-height: 1; + text-align: center; + + transition: opacity .3s ease; + + // Spacing + > button, + .plyr__progress, + .plyr__time { + margin-left: (@plyr-control-spacing / 2); + + &:first-child { + margin-left: 0; + } + } + .plyr__volume { + margin-left: (@plyr-control-spacing / 2); + } + [data-plyr="pause"] { + margin-left: 0; + } + + // Buttons + button { + position: relative; + display: inline-block; + flex-shrink: 0; + vertical-align: middle; + padding: (@plyr-control-spacing / 2); + border: 0; + background: transparent; + border-radius: 3px; + cursor: pointer; + transition: background .3s ease, color .3s ease, opacity .3s ease; + color: inherit; + + svg { + width: 18px; + height: 18px; + display: block; + fill: currentColor; + } + + // Default focus + &:focus { + outline: 0; + } + } + + // Hide toggle icons by default + .icon--exit-fullscreen, + .icon--muted, + .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 +.plyr--video .plyr__controls { + position: absolute; + left: 0; + right: 0; + bottom: 0; + 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; + color: @plyr-video-control-color; + + button { + // Hover and tab focus + &.tab-focus:focus, + &:hover { + background: @plyr-video-control-bg-hover; + 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 { + // Hover and tab focus + &.tab-focus:focus, + &:hover { + background: @plyr-audio-control-bg-hover; + color: @plyr-audio-control-color-hover; + } + } +} + +// States +.plyr__controls [data-plyr='pause'], +.plyr--playing .plyr__controls [data-plyr='play'] { + display: none; +} +.plyr--playing .plyr__controls [data-plyr='pause'] { + display: inline-block; +} + +// Change icons on state change +.plyr--fullscreen-active .icon--exit-fullscreen, +.plyr--muted .plyr__controls .icon--muted, +.plyr--captions-active .plyr__controls .icon--captions-on { + display: block; + + & + svg { + display: none; + } +} + +// Some options are hidden by default +.plyr [data-plyr='captions'], +.plyr [data-plyr='fullscreen'] { + display: none; +} +.plyr--captions-enabled [data-plyr='captions'], +.plyr--fullscreen-enabled [data-plyr='fullscreen'] { + display: inline-block; +}
\ No newline at end of file |