aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/ui.js2
-rw-r--r--src/js/utils.js4
-rw-r--r--src/less/base.less7
-rw-r--r--src/less/components/badges.less3
-rw-r--r--src/less/components/buttons.less10
-rw-r--r--src/less/components/captions.less1
-rw-r--r--src/less/components/menus.less14
-rw-r--r--src/less/components/progress.less1
-rw-r--r--src/less/components/sliders.less22
-rw-r--r--src/less/components/times.less2
-rw-r--r--src/less/components/tooltips.less2
-rw-r--r--src/less/lib/mixins.less11
-rw-r--r--src/less/settings.less20
13 files changed, 62 insertions, 37 deletions
diff --git a/src/js/ui.js b/src/js/ui.js
index 14b8d1cb..bc7443b5 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -144,7 +144,7 @@ const ui = {
utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
this.toggleControls(!this.playing);
- }, 10);
+ }, 100);
},
// Check if media is loading
diff --git a/src/js/utils.js b/src/js/utils.js
index aeb5ecd2..36fdaa6e 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -41,7 +41,9 @@ const utils = {
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
},
track(input) {
- return this.instanceof(input, window.TextTrack) || this.string(input.kind);
+ return (
+ this.instanceof(input, window.TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind))
+ );
},
nullOrUndefined(input) {
return input === null || typeof input === 'undefined';
diff --git a/src/less/base.less b/src/less/base.less
index 0fb14bd8..9839b533 100644
--- a/src/less/base.less
+++ b/src/less/base.less
@@ -8,12 +8,12 @@
max-width: 100%;
min-width: 200px;
font-family: @plyr-font-family;
- font-weight: @plyr-font-weight-normal;
+ font-weight: @plyr-font-weight-regular;
line-height: @plyr-line-height;
direction: ltr;
text-shadow: none;
transition: box-shadow 0.3s ease;
- .plyr-font-smoothing(off);
+ .plyr-font-smoothing(@plyr-font-smoothing);
// Media elements
video,
@@ -25,8 +25,7 @@
}
&:focus {
- outline: 0;
- box-shadow: 0 0 0 3px fade(#000, 10%);
+ .plyr-tab-focus();
}
}
diff --git a/src/less/components/badges.less b/src/less/components/badges.less
index d87706df..2668674c 100644
--- a/src/less/components/badges.less
+++ b/src/less/components/badges.less
@@ -7,7 +7,6 @@
border-radius: 2px;
background: @plyr-menu-color;
color: @plyr-menu-bg;
- font-size: @plyr-font-size-tiny;
+ font-size: @plyr-font-size-micro;
line-height: 1;
- .plyr-font-smoothing(on);
}
diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less
index 3a9057c6..238f13c9 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/buttons.less
@@ -9,7 +9,7 @@
background: transparent;
border-radius: 3px;
cursor: pointer;
- transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
+ transition: all 0.3s ease;
color: inherit;
svg {
@@ -29,6 +29,11 @@
&:focus {
outline: 0;
}
+
+ // Tab focus
+ &.plyr__tab-focus {
+ .plyr-tab-focus();
+ }
}
// Change icons on state change
@@ -85,8 +90,7 @@
}
&.plyr__tab-focus {
- outline: 0;
- box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
+ .plyr-tab-focus();
}
}
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index 3082b899..14c1d2e7 100644
--- a/src/less/components/captions.less
+++ b/src/less/components/captions.less
@@ -19,7 +19,6 @@
color: @plyr-captions-color;
font-size: @plyr-font-size-captions-small;
text-align: center;
- .plyr-font-smoothing(on);
span {
border-radius: 2px;
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
index 2b3ae418..80b8fabe 100644
--- a/src/less/components/menus.less
+++ b/src/less/components/menus.less
@@ -34,7 +34,7 @@
white-space: nowrap;
text-align: left;
color: @plyr-menu-color;
- font-size: @plyr-font-size-small;
+ font-size: @plyr-font-size-base;
> div {
overflow: hidden;
@@ -67,7 +67,6 @@
width: 100%;
padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
color: @plyr-menu-color;
- font-weight: @plyr-font-weight-bold;
user-select: none;
&::after {
@@ -101,7 +100,7 @@
margin: @plyr-control-padding;
margin-bottom: floor(@plyr-control-padding / 2);
padding-left: ceil(@plyr-control-padding * 4);
- font-weight: @plyr-font-weight-normal;
+ font-weight: @plyr-font-weight-regular;
&::after {
left: @plyr-control-padding;
@@ -166,6 +165,10 @@
}
}
+ input[type='radio']:focus + span {
+ .plyr-tab-focus();
+ }
+
&.plyr__tab-focus input[type='radio'] + span,
&:hover input[type='radio'] + span {
background: fade(#000, 10%);
@@ -181,11 +184,6 @@
padding-left: ceil(@plyr-control-padding * 3.5);
pointer-events: none;
overflow: hidden;
- font-weight: @plyr-font-weight-normal;
-
- .plyr__badge {
- font-weight: @plyr-font-weight-bold;
- }
}
}
}
diff --git a/src/less/components/progress.less b/src/less/components/progress.less
index 0022dfe0..1472f9c5 100644
--- a/src/less/components/progress.less
+++ b/src/less/components/progress.less
@@ -15,6 +15,7 @@
// Seek tooltip to show time
.plyr__tooltip {
left: 0;
+ font-size: @plyr-font-size-time;
}
}
diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less
index dff1da8b..b420c8ad 100644
--- a/src/less/components/sliders.less
+++ b/src/less/components/sliders.less
@@ -81,6 +81,20 @@
border: 0;
}
+ &.plyr__tab-focus {
+ &::-webkit-slider-runnable-track {
+ .plyr-tab-focus();
+ }
+
+ &::-moz-range-track {
+ .plyr-tab-focus();
+ }
+
+ &::-ms-track {
+ .plyr-tab-focus();
+ }
+ }
+
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@@ -110,10 +124,6 @@
&::-ms-track {
background: @plyr-video-range-track-bg;
}
-
- &.plyr__tab-focus {
- box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
- }
}
// Audio range inputs
@@ -129,8 +139,4 @@
&::-ms-track {
background: @plyr-audio-range-track-bg;
}
-
- &.plyr__tab-focus {
- box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%);
- }
}
diff --git a/src/less/components/times.less b/src/less/components/times.less
index ea4466d1..29b06aa0 100644
--- a/src/less/components/times.less
+++ b/src/less/components/times.less
@@ -5,7 +5,7 @@
.plyr__time {
display: inline-block;
vertical-align: middle;
- font-size: @plyr-font-size-small;
+ font-size: @plyr-font-size-time;
}
// Media duration hidden on small screens
diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less
index 7b85d3ff..79b8e404 100644
--- a/src/less/components/tooltips.less
+++ b/src/less/components/tooltips.less
@@ -15,7 +15,7 @@
box-shadow: @plyr-tooltip-shadow;
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
- font-weight: @plyr-font-weight-normal;
+ font-weight: @plyr-font-weight-regular;
line-height: 1.3;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less
index 22ffed9d..e58bb16e 100644
--- a/src/less/lib/mixins.less
+++ b/src/less/lib/mixins.less
@@ -3,6 +3,13 @@
// https://github.com/sampotts/plyr
// ==========================================================================
+// Nicer focus styles
+// ---------------------------------------
+.plyr-tab-focus(@color: @plyr-tab-focus-default-color) {
+ outline: 0;
+ box-shadow: 0 0 0 3px fade(@color, 35%);
+}
+
// Font smoothing
// ---------------------------------------
.plyr-font-smoothing(@mode: on) when(@mode = on) {
@@ -15,12 +22,14 @@
}
// <input type="range"> styling
+// ---------------------------------------
.plyr-range-track() {
height: @plyr-range-track-height;
background: transparent;
border: 0;
border-radius: (@plyr-range-track-height / 2);
user-select: none;
+ transition: all 0.3s ease;
}
.plyr-range-thumb() {
@@ -42,9 +51,11 @@
}
// Fullscreen styles
+// ---------------------------------------
.plyr-fullscreen-active() {
height: 100%;
width: 100%;
+ margin: 0;
background: #000;
border-radius: 0 !important;
diff --git a/src/less/settings.less b/src/less/settings.less
index bbcca869..c4854037 100644
--- a/src/less/settings.less
+++ b/src/less/settings.less
@@ -12,21 +12,26 @@
@plyr-color-main: #1aafff;
// Font
-@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-@plyr-font-size-base: 16px;
-@plyr-font-size-small: 14px;
-@plyr-font-size-tiny: 10px;
-@plyr-font-weight-normal: 500;
+@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+@plyr-font-size-base: 13px;
+@plyr-font-size-small: 12px;
+@plyr-font-size-tiny: 11px;
+@plyr-font-size-micro: 9px;
+@plyr-font-weight-regular: 500;
@plyr-font-weight-bold: 600;
@plyr-line-height: 1.7;
+@plyr-font-smoothing: on;
+
+// Focus
+@plyr-tab-focus-default-color: @plyr-color-main;
// Captions
@plyr-captions-bg: fade(#000, 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);
+@plyr-font-size-captions-medium: 18px;
+@plyr-font-size-captions-large: 21px;
// Controls
@plyr-control-icon-size: 18px;
@@ -41,6 +46,7 @@
@plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
+@plyr-font-size-time: @plyr-font-size-tiny;
// Tooltips
@plyr-tooltip-bg: fade(#fff, 90%);
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 23:17:38 +0000