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.less117
1 files changed, 70 insertions, 47 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less
index a008fd21..c2411ea9 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -32,16 +32,18 @@
// Tooltips
@tooltip-bg: @controls-bg;
-@tooltip-border-color: @off-white;
+@tooltip-border-color: fade(@gray-dark, 10%);
+@tooltip-border-width: 1px;
+@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color;
@tooltip-color: @control-color;
@tooltip-padding: @control-spacing;
-@tooltip-arrow-size: 5px;
+@tooltip-arrow-size: 6px;
@tooltip-radius: 3px;
// Progress
-@progress-bg: rgba(red(@gray), green(@gray), blue(@gray), .2);
+@progress-bg: fade(@gray, 20%);
@progress-playing-bg: @blue;
-@progress-buffered-bg: rgba(red(@gray), green(@gray), blue(@gray), .25);
+@progress-buffered-bg: fade(@gray, 25%);
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
@@ -59,14 +61,12 @@
// Animation
// ---------------------------------------
-
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// Mixins
// -------------------------------
-
// Contrast
.contrast-control-color(@color: "") when (lightness(@color) >= 65%) {
@control-color: @gray-light;
@@ -146,7 +146,7 @@
// Styles
// -------------------------------
// Base
-.player {
+.plyr {
position: relative;
max-width: 100%;
min-width: 290px;
@@ -175,6 +175,8 @@
&-video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
+ overflow: hidden;
+ background: #000;
iframe {
position: absolute;
@@ -183,6 +185,14 @@
width: 100%;
height: 100%;
border: 0;
+ user-select: none;
+ }
+
+ // Vimeo hack
+ > div {
+ position: relative;
+ padding-bottom: 200%;
+ transform: translateY(-35.95%);
}
}
@@ -219,7 +229,7 @@
font-size: @font-size-captions-large;
}
- // Player controls
+ // Playback controls
&-controls {
.clearfix();
.font-smoothing();
@@ -286,8 +296,8 @@
display: none;
}
- // Player time
- .player-time {
+ // plyr time
+ .plyr-time {
display: inline-block;
vertical-align: middle;
margin-left: @control-spacing;
@@ -298,7 +308,7 @@
}
// Media duration hidden on small screens
- .player-time + .player-time {
+ .plyr-time + .plyr-time {
display: none;
@media (min-width: @bp-control-split) {
@@ -323,43 +333,56 @@
opacity: 0;
background: @tooltip-bg;
- border: 1px solid @tooltip-border-color;
+ box-shadow: @tooltip-shadow;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
- transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
+ transform: translate(-50%, (@tooltip-padding * 3)) scale(.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
- // Arrow
- &::after {
+ // Arrows
+ &::after,
+ &::before {
content: '';
position: absolute;
- z-index: 1;
+ width: 0;
+ height: 0;
top: 100%;
left: 50%;
- display: block;
- width: 10px;
- height: 10px;
- background: @tooltip-bg;
- transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
- border: 1px solid @tooltip-border-color;
- border-width: 0 1px 1px 0;
+ transform: translateX(-50%);
}
+ // The border triangle
+ &::after {
+ @border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1));
+ bottom: -(@border-arrow-size + @tooltip-border-width);
+ border-right: @border-arrow-size solid transparent;
+ border-top: @border-arrow-size solid @tooltip-border-color;
+ border-left: @border-arrow-size solid transparent;
+ z-index: 1;
+ }
+ // The background triangle
+ &::before {
+ bottom: -@tooltip-arrow-size;
+ border-right: @tooltip-arrow-size solid transparent;
+ border-top: @tooltip-arrow-size solid @tooltip-bg;
+ border-left: @tooltip-arrow-size solid transparent;
+ z-index: 2;
+ }
}
- button:hover .player-tooltip,
- button.tab-focus:focus .player-tooltip {
+ button:hover .plyr-tooltip,
+ button.tab-focus:focus .plyr-tooltip {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
- button:hover .player-tooltip {
+ button:hover .plyr-tooltip {
z-index: 3;
}
- // Player progress
+ // Playback progress
// <progress> element
&-progress {
position: absolute;
@@ -458,7 +481,7 @@
}
// Loading state
- &.loading .player-progress-buffer {
+ &.loading .plyr-progress-buffer {
animation: progress 1s linear infinite;
background-size: @progress-loading-size @progress-loading-size;
background-repeat: repeat-x;
@@ -476,11 +499,11 @@
}
// States
- &-controls [data-player='pause'],
- &.playing .player-controls [data-player='play'] {
+ &-controls [data-plyr='pause'],
+ &.playing .plyr-controls [data-plyr='play'] {
display: none;
}
- &.playing .player-controls [data-player='pause'] {
+ &.playing .plyr-controls [data-plyr='pause'] {
display: inline-block;
}
@@ -552,7 +575,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
&.ios &-volume,
- &.ios [data-player='mute'],
+ &.ios [data-plyr='mute'],
&-audio.ios &-controls-right {
display: none;
}
@@ -563,10 +586,10 @@
// Audio specific styles
// Position the progress within the container
- &-audio .player-controls {
+ &-audio .plyr-controls {
padding-top: (@control-spacing * 2);
}
- &-audio .player-progress {
+ &-audio .plyr-progress {
bottom: auto;
top: 0;
background: @off-white;
@@ -588,11 +611,11 @@
video {
height: 100%;
}
- .player-video-wrapper {
+ .plyr-video-wrapper {
height: 100%;
width: 100%;
}
- .player-controls {
+ .plyr-controls {
position: absolute;
bottom: 0;
left: 0;
@@ -601,22 +624,22 @@
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing {
- .player-controls {
+ .plyr-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
}
- &.player-hover .player-controls {
+ &.plyr-hover .plyr-controls {
transform: translateY(0);
}
- .player-captions {
+ .plyr-captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
- .player-captions,
- &.fullscreen-hide-controls.playing.player-hover .player-captions {
+ .plyr-captions,
+ &.fullscreen-hide-controls.playing.plyr-hover .plyr-captions {
top: auto;
bottom: 90px;
@@ -628,8 +651,8 @@
// Change icons on state change
&.fullscreen-active .icon-exit-fullscreen,
- &.muted .player-controls .icon-muted,
- &.captions-active .player-controls .icon-captions-on {
+ &.muted .plyr-controls .icon-muted,
+ &.captions-active .plyr-controls .icon-captions-on {
display: block;
& + svg {
@@ -638,12 +661,12 @@
}
// Some options are hidden by default
- [data-player='captions'],
- [data-player='fullscreen'] {
+ [data-plyr='captions'],
+ [data-plyr='fullscreen'] {
display: none;
}
- &.captions-enabled [data-player='captions'],
- &.fullscreen-enabled [data-player='fullscreen'] {
+ &.captions-enabled [data-plyr='captions'],
+ &.fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block;
}
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 10:23:20 +0000