Split LESS into more granular files, Vimeo fixes

1 files changed, 127 insertions, 0 deletions

diff --git a/src/less/components/controls.less b/src/less/components/controls.less
new file mode 100644
index 00000000..2750de32
--- /dev/null
+++ b/src/less/components/controls.less
@@ -0,0 +1,127 @@
+// --------------------------------------------------------------
+// Controls
+// --------------------------------------------------------------
+
+// Hide native controls
+.plyr ::-webkit-media-controls {
+    display: none;
+}
+
+// Playback controls
+.plyr__controls {
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    // Spacing
+    > .plyr__control,
+    .plyr__progress,
+    .plyr__time,
+    .plyr__menu {
+        margin-left: (@plyr-control-spacing / 2);
+
+        &:first-child,
+        &:first-child + [data-plyr='pause'] {
+            margin-left: 0;
+        }
+    }
+
+    .plyr__volume {
+        margin-left: (@plyr-control-spacing / 2);
+    }
+
+    @media (min-width: @plyr-bp-screen-sm) {
+        > .plyr__control,
+        .plyr__progress,
+        .plyr__time,
+        .plyr__menu {
+            margin-left: @plyr-control-spacing;
+        }
+
+        > .plyr__control + .plyr__control,
+        .plyr__menu + .plyr__control,
+        > .plyr__control + .plyr__menu {
+            margin-left: (@plyr-control-spacing / 2);
+        }
+    }
+}
+
+// Video controls
+.plyr--video .plyr__controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    padding: (@plyr-control-spacing * 3.5) (@plyr-control-spacing + 2) @plyr-control-spacing;
+    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    color: @plyr-video-control-color;
+    transition: all 0.4s ease-in-out;
+
+    .plyr__control {
+        svg {
+            filter: drop-shadow(0 1px 1px fade(#000, 15%));
+        }
+
+        // Hover and tab focus
+        &.tab-focus,
+        &:hover,
+        &[aria-expanded='true'] {
+            background: @plyr-video-control-bg-hover;
+            color: @plyr-video-control-color-hover;
+        }
+    }
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    transform: translateY(100%);
+    pointer-events: none;
+}
+
+// Audio controls
+.plyr--audio .plyr__controls {
+    padding: @plyr-control-spacing;
+    border-radius: inherit;
+    background: @plyr-audio-controls-bg;
+    border: @plyr-audio-controls-border;
+    color: @plyr-audio-control-color;
+}
+
+// States
+.plyr__controls [data-plyr='pause'] {
+    display: none;
+}
+.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--muted .plyr__control .icon--muted,
+.plyr--captions-active .plyr__control .icon--captions-on {
+    display: block;
+
+    & + svg {
+        display: none;
+    }
+}
+
+// Some options are hidden by default
+.plyr [data-plyr='captions'],
+    .plyr [data-plyr='pip'],
+    .plyr [data-plyr='airplay'],
+    .plyr [data-plyr='fullscreen'] {
+    display: none;
+}
+.plyr--captions-enabled [data-plyr='captions'],
+    .plyr--pip-supported [data-plyr='pip'],
+    .plyr--airplay-supported [data-plyr='airplay'],
+    .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+    display: inline-block;
+}