diff options
Diffstat (limited to 'src/less/components/controls.less')
| -rw-r--r-- | src/less/components/controls.less | 155 |
1 files changed, 0 insertions, 155 deletions
diff --git a/src/less/components/controls.less b/src/less/components/controls.less deleted file mode 100644 index fce34aff..00000000 --- a/src/less/components/controls.less +++ /dev/null @@ -1,155 +0,0 @@ -// 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 |