aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/lib/mixins.less
diff options
context:
space:
mode:
Diffstat (limited to 'src/less/lib/mixins.less')
-rw-r--r--src/less/lib/mixins.less76
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;
+ }
+ }
+}