diff options
Diffstat (limited to 'src/less/lib/mixins.less')
-rw-r--r-- | src/less/lib/mixins.less | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less new file mode 100644 index 00000000..333f6afe --- /dev/null +++ b/src/less/lib/mixins.less @@ -0,0 +1,76 @@ +// ========================================================================== +// Plyr mixins +// https://github.com/sampotts/plyr +// ========================================================================== + +// <input type="range"> styling +.plyr-range-track() { + height: @plyr-range-track-height; + background: transparent; + 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 0.2s ease, border 0.2s ease, transform 0.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); +} + +// Fullscreen styles +.plyr-fullscreen-active() { + height: 100%; + width: 100%; + background: #000; + border-radius: 0 !important; + + video { + height: 100%; + } + + .plyr__video-wrapper { + height: 100%; + width: 100%; + } + + .plyr__video-embed { + // Revert overflow change + overflow: visible; + } + + // Vimeo requires some different styling + &.plyr--vimeo .plyr__video-wrapper { + height: 0; + top: 50%; + transform: translateY(-50%); + } + + // Display correct icon + .plyr__control .icon--exit-fullscreen { + display: block; + + + svg { + display: none; + } + } + + // Large captions in full screen on larger screens + @media (min-width: @plyr-bp-screen-lg) { + .plyr__captions { + font-size: @plyr-font-size-captions-large; + } + } +} |