aboutsummaryrefslogtreecommitdiffstats
path: root/src/less
diff options
context:
space:
mode:
Diffstat (limited to 'src/less')
-rw-r--r--src/less/plyr.less45
-rw-r--r--src/less/variables.less111
2 files changed, 85 insertions, 71 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 16d8fa25..01fbc7e7 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -9,7 +9,9 @@
// Animation
// ---------------------------------------
@keyframes plyr-progress {
- to { background-position: @plyr-progress-loading-size 0; }
+ to {
+ background-position: @plyr-progress-loading-size 0;
+ }
}
@keyframes plyr-popup {
from {
@@ -46,7 +48,10 @@
& when (@plyr-touch-action = true) {
// Fix 300ms delay
- a, button, input, label {
+ a,
+ button,
+ input,
+ label {
touch-action: manipulation;
}
}
@@ -232,19 +237,20 @@
bottom: 0;
left: 0;
width: 100%;
- padding: (@plyr-control-spacing * 2);
+ padding: @plyr-control-spacing;
transform: translateY(-(@plyr-control-spacing * 4));
transition: transform .3s ease;
color: @plyr-captions-color;
- font-size: @plyr-font-size-captions-base;
+ font-size: @plyr-font-size-captions-small;
text-align: center;
span {
border-radius: 2px;
- padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
+ padding: .2em .5em;
background: @plyr-captions-bg;
box-decoration-break: clone;
- line-height: 150%;
+ line-height: 170%;
+ white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
@@ -255,6 +261,10 @@
display: none;
}
+ @media (min-width: @plyr-bp-screen-sm) {
+ padding: (@plyr-control-spacing * 2);
+ font-size: @plyr-font-size-captions-base;
+ }
@media (min-width: @plyr-bp-screen-md) {
font-size: @plyr-font-size-captions-medium;
}
@@ -335,9 +345,7 @@
background: transparent;
border-radius: 3px;
cursor: pointer;
- transition: background .3s ease,
- color .3s ease,
- opacity .3s ease;
+ transition: background .3s ease, color .3s ease, opacity .3s ease;
color: inherit;
svg {
@@ -346,7 +354,9 @@
display: block;
fill: currentColor;
pointer-events: none;
+ filter: drop-shadow(0 1px 1px fade(#000, 15%));
}
+
// Hide toggle icons by default
.icon--exit-fullscreen,
.icon--muted,
@@ -367,8 +377,8 @@
right: 0;
bottom: 0;
z-index: 2;
- padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
- background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
+ 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%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
@@ -521,8 +531,7 @@
> div {
overflow: hidden;
- transition: height .35s cubic-bezier(.4, 0, .2, 1),
- width .35s cubic-bezier(.4, 0, .2, 1);
+ transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
}
// Arrow
@@ -719,7 +728,6 @@
}
}
-
// Playback progress
// --------------------------------------------------------------
// <progress> element
@@ -763,7 +771,7 @@
margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
-
+
border: none;
border-radius: 100px;
@@ -830,6 +838,7 @@
.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 {
color: @plyr-video-progress-buffered-bg;
@@ -855,7 +864,8 @@
@plyr-progress-loading-bg 50%,
@plyr-progress-loading-bg 75%,
transparent 75%,
- transparent);
+ transparent
+ );
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress--buffer {
@@ -886,6 +896,9 @@
margin-right: @plyr-control-spacing;
}
}
+.plyr--video .plyr__time {
+ text-shadow: 0 1px 1px fade(#000, 15%);
+}
// Volume
// --------------------------------------------------------------
diff --git a/src/less/variables.less b/src/less/variables.less
index dd6c9e0f..fe6e3e39 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -4,76 +4,77 @@
// ==========================================================================
// Settings
-@plyr-border-box: true;
-@plyr-touch-action: true;
-@plyr-sr-only-important: true;
+@plyr-border-box: true;
+@plyr-touch-action: true;
+@plyr-sr-only-important: true;
// Colors
-@plyr-color-main: #1aafff;
+@plyr-color-main: #1aafff;
// Font
-@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-@plyr-font-size-small: 14px;
-@plyr-font-size-base: 16px;
-@plyr-font-weight-normal: 500;
-@plyr-font-weight-bold: 600;
+@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+@plyr-font-size-small: 14px;
+@plyr-font-size-base: 16px;
+@plyr-font-weight-normal: 500;
+@plyr-font-weight-bold: 600;
// Captions
-@plyr-captions-bg: fade(#343f4a, 80%);
-@plyr-captions-color: #fff;
-@plyr-font-size-captions-base: @plyr-font-size-base;
-@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
-@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
+@plyr-captions-bg: fade(#343f4a, 80%);
+@plyr-captions-color: #fff;
+@plyr-font-size-captions-base: @plyr-font-size-base;
+@plyr-font-size-captions-small: @plyr-font-size-small;
+@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.25);
+@plyr-font-size-captions-large: (@plyr-font-size-base * 1.5);
// Controls
-@plyr-control-icon-size: 18px;
-@plyr-control-spacing: 10px;
-@plyr-control-padding: (@plyr-control-spacing * .7);
-@plyr-video-controls-bg: #343f4a;
-@plyr-video-control-color: #fff;
-@plyr-video-control-color-hover: #fff;
-@plyr-video-control-bg-hover: @plyr-color-main;
-@plyr-audio-controls-bg: #fff;
-@plyr-audio-controls-border: 1px solid #dbe3e8;
-@plyr-audio-control-color: #565d64;
-@plyr-audio-control-color-hover: #fff;
-@plyr-audio-control-bg-hover: @plyr-color-main;
+@plyr-control-icon-size: 18px;
+@plyr-control-spacing: 10px;
+@plyr-control-padding: (@plyr-control-spacing * .7);
+@plyr-video-controls-bg: #343f4a;
+@plyr-video-control-color: #fff;
+@plyr-video-control-color-hover: #fff;
+@plyr-video-control-bg-hover: @plyr-color-main;
+@plyr-audio-controls-bg: #fff;
+@plyr-audio-controls-border: 1px solid #dbe3e8;
+@plyr-audio-control-color: #565d64;
+@plyr-audio-control-color-hover: #fff;
+@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
-@plyr-tooltip-bg: fade(#343f4a, 90%);
-@plyr-tooltip-color: #fff;
-@plyr-tooltip-padding: (@plyr-control-spacing / 2);
-@plyr-tooltip-arrow-size: 4px;
-@plyr-tooltip-radius: 3px;
+@plyr-tooltip-bg: fade(#343f4a, 90%);
+@plyr-tooltip-color: #fff;
+@plyr-tooltip-padding: (@plyr-control-spacing / 2);
+@plyr-tooltip-arrow-size: 4px;
+@plyr-tooltip-radius: 3px;
// Menus
-@plyr-menu-bg: @plyr-tooltip-bg;
-@plyr-menu-color: @plyr-tooltip-color;
-@plyr-menu-arrow-size: 6px;
+@plyr-menu-bg: @plyr-tooltip-bg;
+@plyr-menu-color: @plyr-tooltip-color;
+@plyr-menu-arrow-size: 6px;
// Progress
-@plyr-progress-loading-size: 25px;
-@plyr-progress-loading-bg: fade(#343f4a, 20%);
-@plyr-video-progress-bg: fade(#fff, 25%);
-@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
-@plyr-audio-progress-bg: fade(#c6d6db, 66%);
-@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
+@plyr-progress-loading-size: 25px;
+@plyr-progress-loading-bg: fade(#343f4a, 20%);
+@plyr-video-progress-bg: fade(#fff, 25%);
+@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
+@plyr-audio-progress-bg: fade(#c6d6db, 66%);
+@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
// Range sliders
-@plyr-range-track-height: 8px;
-@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
-@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
-@plyr-range-thumb-bg: #fff;
-@plyr-range-thumb-border: 2px solid transparent;
-@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
-@plyr-range-thumb-active-border-color: #fff;
-@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
-@plyr-range-thumb-active-scale: 1.25;
-@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
-@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
-@plyr-range-selected-bg: @plyr-color-main;
+@plyr-range-track-height: 8px;
+@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
+@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
+@plyr-range-thumb-bg: #fff;
+@plyr-range-thumb-border: 2px solid transparent;
+@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
+@plyr-range-thumb-active-border-color: #fff;
+@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
+@plyr-range-thumb-active-scale: 1.25;
+@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
+@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
+@plyr-range-selected-bg: @plyr-color-main;
// Breakpoints
-@plyr-bp-screen-sm: 480px;
-@plyr-bp-screen-md: 768px;
-@plyr-bp-screen-lg: 1024px; \ No newline at end of file
+@plyr-bp-screen-sm: 480px;
+@plyr-bp-screen-md: 768px;
+@plyr-bp-screen-lg: 1024px;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-11 02:26:03 +0000