aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components/controls.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components/controls.scss')
-rw-r--r--src/sass/components/controls.scss105
1 files changed, 105 insertions, 0 deletions
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
new file mode 100644
index 00000000..91db1b20
--- /dev/null
+++ b/src/sass/components/controls.scss
@@ -0,0 +1,105 @@
+// --------------------------------------------------------------
+// Controls
+// --------------------------------------------------------------
+
+// Hide native controls
+.plyr--full-ui ::-webkit-media-controls {
+ display: none;
+}
+
+// Playback controls
+.plyr__controls {
+ align-items: center;
+ display: flex;
+ 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-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 {
+ background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+ bottom: 0;
+ color: $plyr-video-control-color;
+ left: 0;
+ padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+ position: absolute;
+ right: 0;
+ transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+ z-index: 2;
+
+ .plyr__control {
+ svg {
+ filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
+ }
+
+ // Hover and tab focus
+ &.plyr__tab-focus,
+ &:hover,
+ &[aria-expanded='true'] {
+ background: $plyr-video-control-bg-hover;
+ color: $plyr-video-control-color-hover;
+ }
+ }
+}
+
+// Audio controls
+.plyr--audio .plyr__controls {
+ background: $plyr-audio-controls-bg;
+ border-radius: inherit;
+ color: $plyr-audio-control-color;
+ padding: $plyr-control-spacing;
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(100%);
+}
+
+// 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;
+}