aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/plyr.less
diff options
context:
space:
mode:
Diffstat (limited to 'src/less/plyr.less')
-rw-r--r--src/less/plyr.less140
1 files changed, 65 insertions, 75 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 0c36930c..22e29aa2 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -1,6 +1,7 @@
// ==========================================================================
// Plyr styles
// https://github.com/sampotts/plyr
+// TODO: break into smaller files and look at use of BEM classnames
// ==========================================================================
@import 'variables';
@@ -57,7 +58,7 @@
}
// ARIA
- [aria-hidden="true"] {
+ [aria-hidden='true'] {
display: none;
}
@@ -77,7 +78,7 @@
// Range inputs
// Specificity is for bootstrap compatibility
- input[type="range"] {
+ input[type='range'] {
display: block;
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%;
@@ -87,6 +88,9 @@
border: none;
background: transparent;
+ // Used in JS to populate lower fill for WebKit
+ color: @plyr-range-selected-bg;
+
// WebKit
-webkit-appearance: none;
@@ -106,6 +110,11 @@
&::-moz-range-thumb {
.plyr-range-thumb();
}
+ &::-moz-range-progress {
+ height: @plyr-range-track-height;
+ background: currentColor;
+ border-radius: (@plyr-range-track-height / 2);
+ }
// Microsoft
&::-ms-track {
@@ -119,7 +128,7 @@
}
&::-ms-fill-lower {
.plyr-range-track();
- background: @plyr-range-selected-bg;
+ background: currentColor;
}
&::-ms-thumb {
.plyr-range-thumb();
@@ -157,13 +166,37 @@
}
// Video range inputs
-.plyr--video input[type="range"].tab-focus {
- outline: 1px dotted fade(@plyr-video-control-color, 50%);
+.plyr--video input[type='range'] {
+ &::-webkit-slider-runnable-track {
+ background: @plyr-video-range-track-bg;
+ }
+ &::-moz-range-track {
+ background: @plyr-video-range-track-bg;
+ }
+ &::-ms-track {
+ background: @plyr-video-range-track-bg;
+ }
+
+ &.tab-focus {
+ outline: 1px dotted fade(@plyr-video-control-color, 50%);
+ }
}
// Audio range inputs
-.plyr--audio input[type="range"].tab-focus {
- outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+.plyr--audio input[type='range'] {
+ &::-webkit-slider-runnable-track {
+ background: @plyr-audio-range-track-bg;
+ }
+ &::-moz-range-track {
+ background: @plyr-audio-range-track-bg;
+ }
+ &::-ms-track {
+ background: @plyr-audio-range-track-bg;
+ }
+
+ &.tab-focus {
+ outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+ }
}
// Screen reader only elements
@@ -354,7 +387,6 @@
display: block;
fill: currentColor;
pointer-events: none;
- filter: drop-shadow(0 1px 1px fade(#000, 15%));
}
// Hide toggle icons by default
@@ -378,17 +410,21 @@
bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
- background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
+ 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: opacity 0.3s ease;
.plyr__control {
+ svg {
+ filter: drop-shadow(0 1px 1px fade(#000, 15%));
+ }
+
// Hover and tab focus
&.tab-focus,
&:hover,
- &[aria-expanded="true"] {
+ &[aria-expanded='true'] {
background: @plyr-video-control-bg-hover;
color: @plyr-video-control-color-hover;
}
@@ -407,7 +443,7 @@
// Hover and tab focus
&.tab-focus,
&:hover,
- &[aria-expanded="true"] {
+ &[aria-expanded='true'] {
background: @plyr-audio-control-bg-hover;
color: @plyr-audio-control-color-hover;
}
@@ -461,11 +497,11 @@
}
// States
-.plyr__controls [data-plyr="pause"],
-.plyr--playing .plyr__controls [data-plyr="play"] {
+.plyr__controls [data-plyr='pause'],
+.plyr--playing .plyr__controls [data-plyr='play'] {
display: none;
}
-.plyr--playing .plyr__controls [data-plyr="pause"] {
+.plyr--playing .plyr__controls [data-plyr='pause'] {
display: inline-block;
}
@@ -481,16 +517,16 @@
}
// Some options are hidden by default
-.plyr [data-plyr="captions"],
-.plyr [data-plyr="fullscreen"],
-.plyr [data-plyr="pip"],
-.plyr [data-plyr="airplay"] {
+.plyr [data-plyr='captions'],
+.plyr [data-plyr='fullscreen'],
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'] {
display: none;
}
-.plyr--captions-enabled [data-plyr="captions"],
-.plyr--fullscreen-enabled [data-plyr="fullscreen"],
-.plyr--pip-enabled [data-plyr="pip"],
-.plyr--airplay-enabled [data-plyr="airplay"] {
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'],
+.plyr--pip-enabled [data-plyr='pip'],
+.plyr--airplay-enabled [data-plyr='airplay'] {
display: inline-block;
}
@@ -503,7 +539,7 @@
.plyr__control svg {
transition: transform 0.3s ease;
}
- .plyr__control[aria-expanded="true"] {
+ .plyr__control[aria-expanded='true'] {
svg {
transform: rotate(45deg);
}
@@ -668,7 +704,7 @@
&::before {
// Arrows
- content: "";
+ content: '';
position: absolute;
width: 0;
height: 0;
@@ -739,16 +775,6 @@
input[type='range'] {
position: relative;
z-index: 2;
-
- &::-webkit-slider-runnable-track {
- background: transparent;
- }
- &::-moz-range-track {
- background: transparent;
- }
- &::-ms-fill-upper {
- background: transparent;
- }
}
// Seek tooltip to show time
@@ -760,9 +786,7 @@
display: inline-block;
}
-.plyr__progress--buffer,
-.plyr__progress--played,
-.plyr__volume--display {
+.plyr__progress--buffer {
position: absolute;
left: 0;
top: 50%;
@@ -770,8 +794,7 @@
height: @plyr-range-track-height;
margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0;
- vertical-align: top;
-
+ background: transparent;
border: none;
border-radius: 100px;
@@ -799,31 +822,6 @@
border-radius: 100px;
}
}
-.plyr__progress--played,
-.plyr__volume--display {
- z-index: 1;
- color: @plyr-range-selected-bg;
- background: transparent;
- transition: none;
-
- &::-webkit-progress-value {
- min-width: @plyr-range-track-height;
- max-width: 99%;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- transition: none;
- }
- &::-moz-progress-bar {
- min-width: @plyr-range-track-height;
- max-width: 99%;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- transition: none;
- }
- &::-ms-fill {
- display: none;
- }
-}
.plyr__progress--buffer {
&::-webkit-progress-value {
transition: width 0.2s ease;
@@ -835,18 +833,10 @@
transition: width 0.2s ease;
}
}
-.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display {
- background: @plyr-video-range-track-bg;
- box-shadow: 0 1px 1px fade(#000, 15%);
-}
.plyr--video .plyr__progress--buffer {
+ box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-progress-buffered-bg;
}
-.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display {
- background: @plyr-audio-range-track-bg;
-}
.plyr--audio .plyr__progress--buffer {
color: @plyr-audio-progress-buffered-bg;
}
@@ -892,7 +882,7 @@
// Add a slash in before
&::before {
- content: "\2044";
+ content: '\2044';
margin-right: @plyr-control-spacing;
}
}
@@ -926,7 +916,7 @@
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr="mute"] {
+.plyr--is-ios [data-plyr='mute'] {
display: none !important;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 01:39:17 +0000