aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass')
-rw-r--r--src/sass/components/captions.scss9
-rw-r--r--src/sass/components/control.scss40
-rw-r--r--src/sass/components/controls.scss75
-rw-r--r--src/sass/components/embed.scss5
-rw-r--r--src/sass/components/menus.scss83
-rw-r--r--src/sass/components/poster.scss6
-rw-r--r--src/sass/components/progress.scss28
-rw-r--r--src/sass/components/sliders.scss18
-rw-r--r--src/sass/components/tooltips.scss2
-rw-r--r--src/sass/components/video.scss1
-rw-r--r--src/sass/components/volume.scss7
-rw-r--r--src/sass/lib/mixins.scss10
-rw-r--r--src/sass/plugins/previewThumbnails.scss118
-rw-r--r--src/sass/plyr.scss6
-rw-r--r--src/sass/settings/controls.scss1
-rw-r--r--src/sass/settings/sliders.scss4
-rw-r--r--src/sass/settings/type.scss2
-rw-r--r--src/sass/states/error.scss25
-rw-r--r--src/sass/utils/hidden.scss4
19 files changed, 291 insertions, 153 deletions
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 9dfc2be8..1cfca92e 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -17,11 +17,10 @@
padding: $plyr-control-spacing;
position: absolute;
text-align: center;
- transform: translateY(-($plyr-control-spacing * 4));
transition: transform 0.4s ease-in-out;
width: 100%;
- span {
+ .plyr__caption {
background: $plyr-captions-bg;
border-radius: 2px;
box-decoration-break: clone;
@@ -53,6 +52,8 @@
display: block;
}
-.plyr--hide-controls .plyr__captions {
- transform: translateY(-($plyr-control-spacing * 1.5));
+// If the lower controls are shown and not empty
+.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
+ transform: translateY(-($plyr-control-spacing * 4));
}
+
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 52716805..1c9aab2b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -33,15 +33,25 @@
}
}
+// Remove any link styling
+a.plyr__control {
+ text-decoration: none;
+
+ &::after,
+ &::before {
+ display: none;
+ }
+}
+
// Change icons on state change
-.plyr__control[aria-pressed='false'] .icon--pressed,
-.plyr__control[aria-pressed='true'] .icon--not-pressed,
-.plyr__control[aria-pressed='false'] .label--pressed,
-.plyr__control[aria-pressed='true'] .label--not-pressed {
+.plyr__control:not(.plyr__control--pressed) .icon--pressed,
+.plyr__control.plyr__control--pressed .icon--not-pressed,
+.plyr__control:not(.plyr__control--pressed) .label--pressed,
+.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
-// Audio styles
+// Audio control
.plyr--audio .plyr__control {
&.plyr__tab-focus,
&:hover,
@@ -51,6 +61,21 @@
}
}
+// Video control
+.plyr--video .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;
+ }
+}
+
// Large play button (video only)
.plyr__control--overlaid {
background: rgba($plyr-video-control-bg-hover, 0.8);
@@ -66,11 +91,10 @@
transform: translate(-50%, -50%);
z-index: 2;
+ // Offset icon to make the play button look right
svg {
- height: $plyr-control-icon-size-large;
- left: 2px; // Offset to make the play button look right
+ left: 2px;
position: relative;
- width: $plyr-control-icon-size-large;
}
&:hover,
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 91db1b20..41426e8b 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -11,79 +11,78 @@
.plyr__controls {
align-items: center;
display: flex;
+ justify-content: flex-end;
text-align: center;
// Spacing
> .plyr__control,
.plyr__progress,
.plyr__time,
- .plyr__menu {
+ .plyr__menu,
+ .plyr__volume {
margin-left: ($plyr-control-spacing / 2);
+ }
- &:first-child,
- &:first-child + [data-plyr='pause'] {
- margin-left: 0;
- }
+ .plyr__menu + .plyr__control,
+ > .plyr__control + .plyr__menu,
+ > .plyr__control + .plyr__control,
+ .plyr__progress + .plyr__control {
+ margin-left: floor($plyr-control-spacing / 4);
}
- .plyr__volume {
- margin-left: ($plyr-control-spacing / 2);
+ > .plyr__control:first-child,
+ > .plyr__control:first-child + [data-plyr='pause'] {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ // Hide empty controls
+ &:empty {
+ display: none;
}
@media (min-width: $plyr-bp-sm) {
> .plyr__control,
+ .plyr__menu,
.plyr__progress,
.plyr__time,
- .plyr__menu {
+ .plyr__volume {
margin-left: $plyr-control-spacing;
}
-
- > .plyr__control + .plyr__control,
- .plyr__menu + .plyr__control,
- > .plyr__control + .plyr__menu {
- margin-left: ($plyr-control-spacing / 2);
- }
}
}
+// Audio controls
+.plyr--audio .plyr__controls {
+ background: $plyr-audio-controls-bg;
+ border-radius: inherit;
+ color: $plyr-audio-control-color;
+ padding: $plyr-control-spacing;
+}
+
// Video controls
.plyr--video .plyr__controls {
- background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
+ 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;
+ padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
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));
- }
+ z-index: 3;
- // Hover and tab focus
- &.plyr__tab-focus,
- &:hover,
- &[aria-expanded='true'] {
- background: $plyr-video-control-bg-hover;
- color: $plyr-video-control-color-hover;
- }
+ @media (min-width: $plyr-bp-sm) {
+ padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
}
}
-// 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
+// Hide video controls
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss
index be807739..25431caf 100644
--- a/src/sass/components/embed.scss
+++ b/src/sass/components/embed.scss
@@ -27,11 +27,6 @@ $embed-padding: ((100 / 16) * 9);
$height: 240;
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
- // To allow mouse events to be captured if full support
- iframe {
- pointer-events: none;
- }
-
// Only used for Vimeo
> .plyr__video-embed__container {
padding-bottom: to-percentage($height);
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 3ad4039a..b8c85284 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -39,7 +39,8 @@
> div {
overflow: hidden;
- transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
// Arrow
@@ -54,18 +55,16 @@
width: 0;
}
- ul {
- list-style: none;
- margin: 0;
- overflow: hidden;
+ [role='menu'] {
padding: $plyr-control-padding;
+ }
- li {
- margin-top: 2px;
+ [role='menuitem'],
+ [role='menuitemradio'] {
+ margin-top: 2px;
- &:first-child {
- margin-top: 0;
- }
+ &:first-child {
+ margin-top: 0;
}
}
@@ -75,10 +74,17 @@
color: $plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
- padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
+ padding: ceil($plyr-control-padding / 2)
+ ceil($plyr-control-padding * 1.5);
user-select: none;
width: 100%;
+ > span {
+ align-items: inherit;
+ display: flex;
+ width: 100%;
+ }
+
&::after {
border: 4px solid transparent;
content: '';
@@ -135,50 +141,49 @@
}
}
- label.plyr__control {
+ .plyr__control[role='menuitemradio'] {
padding-left: $plyr-control-padding;
- input[type='radio'] + span {
- background: rgba(#000, 0.1);
+ &::before,
+ &::after {
border-radius: 100%;
+ }
+
+ &::before {
+ background: rgba(#000, 0.1);
+ content: '';
display: block;
flex-shrink: 0;
height: 16px;
margin-right: $plyr-control-spacing;
- position: relative;
transition: all 0.3s ease;
width: 16px;
-
- &::after {
- background: #fff;
- border-radius: 100%;
- content: '';
- height: 6px;
- left: 5px;
- opacity: 0;
- position: absolute;
- top: 5px;
- transform: scale(0);
- transition: transform 0.3s ease, opacity 0.3s ease;
- width: 6px;
- }
}
- input[type='radio']:checked + span {
- background: $plyr-color-main;
+ &::after {
+ background: #fff;
+ border: 0;
+ height: 6px;
+ left: 12px;
+ opacity: 0;
+ top: 50%;
+ transform: translateY(-50%) scale(0);
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ width: 6px;
+ }
+ &[aria-checked='true'] {
+ &::before {
+ background: $plyr-color-main;
+ }
&::after {
opacity: 1;
- transform: scale(1);
+ transform: translateY(-50%) scale(1);
}
}
- input[type='radio']:focus + span {
- @include plyr-tab-focus();
- }
-
- &.plyr__tab-focus input[type='radio'] + span,
- &:hover input[type='radio'] + span {
+ &.plyr__tab-focus::before,
+ &:hover::before {
background: rgba(#000, 0.1);
}
}
@@ -188,7 +193,7 @@
align-items: center;
display: flex;
margin-left: auto;
- margin-right: -$plyr-control-padding;
+ margin-right: -($plyr-control-padding - 2);
overflow: hidden;
padding-left: ceil($plyr-control-padding * 3.5);
pointer-events: none;
diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index b2518a78..9b239d4f 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -6,17 +6,17 @@
background-color: #000;
background-position: 50% 50%;
background-repeat: no-repeat;
- background-size: 100% 100%;
+ background-size: contain;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
- transition: opacity 0.3s ease;
+ transition: opacity 0.2s ease;
width: 100%;
z-index: 1;
}
-.plyr--stopped .plyr__poster {
+.plyr--stopped.plyr__poster-enabled .plyr__poster {
opacity: 1;
}
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index 7490ee17..f28a19ca 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -3,10 +3,19 @@
// --------------------------------------------------------------
.plyr__progress {
- display: flex;
flex: 1;
+ left: $plyr-range-thumb-height / 2;
+ margin-right: $plyr-range-thumb-height;
position: relative;
+ input[type='range'],
+ &__buffer {
+ margin-left: -($plyr-range-thumb-height / 2);
+ margin-right: -($plyr-range-thumb-height / 2);
+ // Offset the range thumb in order to be able to calculate the relative progress (#954)
+ width: calc(100% + #{$plyr-range-thumb-height});
+ }
+
input[type='range'] {
position: relative;
z-index: 2;
@@ -19,28 +28,27 @@
}
}
-.plyr__progress--buffer {
+.plyr__progress__buffer {
-webkit-appearance: none; /* stylelint-disable-line */
background: transparent;
border: 0;
border-radius: 100px;
height: $plyr-range-track-height;
left: 0;
- margin: -($plyr-range-track-height / 2) 0 0;
+ margin-top: -($plyr-range-track-height / 2);
padding: 0;
position: absolute;
top: 50%;
- width: 100%;
&::-webkit-progress-bar {
background: transparent;
- transition: width 0.2s ease;
}
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: $plyr-range-track-height;
+ transition: width 0.2s ease;
}
// Mozilla
@@ -58,17 +66,17 @@
}
}
-.plyr--video .plyr__progress--buffer {
+.plyr--video .plyr__progress__buffer {
box-shadow: 0 1px 1px rgba(#000, 0.15);
color: $plyr-video-progress-buffered-bg;
}
-.plyr--audio .plyr__progress--buffer {
+.plyr--audio .plyr__progress__buffer {
color: $plyr-audio-progress-buffered-bg;
}
// Loading state
-.plyr--loading .plyr__progress--buffer {
+.plyr--loading .plyr__progress__buffer {
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(
-45deg,
@@ -85,10 +93,10 @@
color: transparent;
}
-.plyr--video.plyr--loading .plyr__progress--buffer {
+.plyr--video.plyr--loading .plyr__progress__buffer {
background-color: $plyr-video-progress-buffered-bg;
}
-.plyr--audio.plyr--loading .plyr__progress--buffer {
+.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: $plyr-audio-progress-buffered-bg;
}
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b9264b05..ee64271b 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -19,7 +19,11 @@
&::-webkit-slider-runnable-track {
@include plyr-range-track();
- background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+ background-image: linear-gradient(
+ to right,
+ currentColor var(--value, 0%),
+ transparent var(--value, 0%)
+ );
}
&::-webkit-slider-thumb {
@@ -140,15 +144,21 @@
// Pressed styles
&:active {
&::-webkit-slider-thumb {
- @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+ @include plyr-range-thumb-active(
+ $plyr-audio-range-thumb-shadow-color
+ );
}
&::-moz-range-thumb {
- @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+ @include plyr-range-thumb-active(
+ $plyr-audio-range-thumb-shadow-color
+ );
}
&::-ms-thumb {
- @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+ @include plyr-range-thumb-active(
+ $plyr-audio-range-thumb-shadow-color
+ );
}
}
}
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 537e2444..80603bb5 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -10,6 +10,7 @@
color: $plyr-tooltip-color;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
+ left: 50%;
line-height: 1.3;
margin-bottom: ($plyr-tooltip-padding * 2);
opacity: 0;
@@ -64,6 +65,7 @@
// Last tooltip
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
+ left: auto;
right: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index 3caf866d..c3dc4152 100644
--- a/src/sass/components/video.scss
+++ b/src/sass/components/video.scss
@@ -3,6 +3,7 @@
// --------------------------------------------------------------
.plyr--video {
+ background: #000;
overflow: hidden;
// Menu open
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index d22b7cba..82a6dd36 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -3,20 +3,23 @@
// --------------------------------------------------------------
.plyr__volume {
+ align-items: center;
+ display: flex;
flex: 1;
position: relative;
input[type='range'] {
+ margin-left: ($plyr-control-spacing / 2);
position: relative;
z-index: 2;
}
@media (min-width: $plyr-bp-sm) {
- max-width: 50px;
+ max-width: 90px;
}
@media (min-width: $plyr-bp-md) {
- max-width: 80px;
+ max-width: 110px;
}
}
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 8b333f65..554c66a5 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -5,7 +5,7 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
- box-shadow: 0 0 0 3px rgba($color, 0.35);
+ box-shadow: 0 0 0 5px rgba($color, 0.5);
outline: 0;
}
@@ -28,7 +28,7 @@
border: 0;
border-radius: ($plyr-range-track-height / 2);
height: $plyr-range-track-height;
- transition: all 0.3s ease;
+ transition: box-shadow 0.3s ease;
user-select: none;
}
@@ -37,7 +37,6 @@
border: 0;
border-radius: 100%;
box-shadow: $plyr-range-thumb-shadow;
- box-sizing: border-box;
height: $plyr-range-thumb-height;
position: relative;
transition: all 0.2s ease;
@@ -66,11 +65,6 @@
width: 100%;
}
- .plyr__video-embed {
- // Revert overflow change
- overflow: visible;
- }
-
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss
new file mode 100644
index 00000000..02a2f619
--- /dev/null
+++ b/src/sass/plugins/previewThumbnails.scss
@@ -0,0 +1,118 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-bg: $plyr-tooltip-bg !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-bg: $plyr-color-heather !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;
+
+.plyr__preview-thumb {
+ background-color: $plyr-preview-bg;
+ border-radius: 3px;
+ bottom: 100%;
+ box-shadow: $plyr-preview-shadow;
+ margin-bottom: $plyr-preview-padding * 2;
+ opacity: 0;
+ padding: $plyr-preview-radius;
+ pointer-events: none;
+ position: absolute;
+ transform: translate(0, 10px) scale(0.8);
+ transform-origin: 50% 100%;
+ transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+ z-index: 2;
+
+ &--is-shown {
+ opacity: 1;
+ transform: translate(0, 0) scale(1);
+ }
+
+ // The background triangle
+ &::before {
+ border-left: $plyr-preview-arrow-size solid transparent;
+ border-right: $plyr-preview-arrow-size solid transparent;
+ border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
+ bottom: -$plyr-preview-arrow-size;
+ content: '';
+ height: 0;
+ left: 50%;
+ position: absolute;
+ transform: translateX(-50%);
+ width: 0;
+ z-index: 2;
+ }
+
+ &__image-container {
+ background: $plyr-preview-image-bg;
+ border-radius: ($plyr-preview-radius - 1px);
+ overflow: hidden;
+ position: relative;
+ z-index: 0;
+
+ img {
+ height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+ left: 0;
+ max-height: none;
+ max-width: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
+
+ // Seek time text
+ &__time-container {
+ bottom: $plyr-preview-time-bottom-offset;
+ left: 0;
+ position: absolute;
+ right: 0;
+ white-space: nowrap;
+ z-index: 3;
+
+ span {
+ background-color: $plyr-preview-time-bg;
+ border-radius: ($plyr-preview-radius - 1px);
+ color: $plyr-preview-time-color;
+ font-size: $plyr-preview-time-font-size;
+ padding: $plyr-preview-time-padding;
+ }
+ }
+}
+
+.plyr__preview-scrubbing {
+ bottom: 0;
+ filter: blur(1px);
+ height: 100%;
+ left: 0;
+ margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transition: opacity 0.3s ease;
+ width: 100%;
+ z-index: 1;
+
+ &--is-shown {
+ opacity: 1;
+ }
+
+ img {
+ height: 100%;
+ left: 0;
+ max-height: none;
+ max-width: none;
+ object-fit: contain;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+}
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 65134331..468c534c 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -31,18 +31,18 @@
@import 'components/controls';
@import 'components/embed';
@import 'components/menus';
-@import 'components/progress';
-@import 'components/poster';
@import 'components/sliders';
+@import 'components/poster';
@import 'components/times';
@import 'components/tooltips';
@import 'components/video';
+@import 'components/progress';
@import 'components/volume';
-@import 'states/error';
@import 'states/fullscreen';
@import 'plugins/ads';
+@import 'plugins/previewThumbnails';
@import 'utils/animation';
@import 'utils/hidden';
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index 64f05cec..d6d2c153 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -3,7 +3,6 @@
// ==========================================================================
$plyr-control-icon-size: 18px !default;
-$plyr-control-icon-size-large: 20px !default;
$plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
$plyr-control-radius: 3px !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 3c75b797..6ac053b0 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -6,13 +6,13 @@
$plyr-range-thumb-active-shadow-width: 3px !default;
// Thumb
-$plyr-range-thumb-height: 14px !default;
+$plyr-range-thumb-height: 13px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
// Track
-$plyr-range-track-height: 6px !default;
+$plyr-range-track-height: 5px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
// Fill
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index 351ebd18..79cb57de 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;
$plyr-line-height: 1.7 !default;
-$plyr-font-smoothing: true !default;
+$plyr-font-smoothing: false !default;
diff --git a/src/sass/states/error.scss b/src/sass/states/error.scss
deleted file mode 100644
index 64d05c7b..00000000
--- a/src/sass/states/error.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// --------------------------------------------------------------
-// Error state
-// --------------------------------------------------------------
-
-.plyr--has-error {
- pointer-events: none;
-
- &::after {
- align-items: center;
- background: rgba(#000, 90%);
- color: #fff;
- content: attr(data-plyr-error);
- display: flex;
- font-size: $plyr-font-size-base;
- height: 100%;
- justify-content: center;
- left: 0;
- position: absolute;
- text-align: center;
- text-shadow: 0 1px 1px rgba(#000, 10%);
- top: 0;
- width: 100%;
- z-index: 10;
- }
-}
diff --git a/src/sass/utils/hidden.scss b/src/sass/utils/hidden.scss
index e4fa0aec..a42c3be8 100644
--- a/src/sass/utils/hidden.scss
+++ b/src/sass/utils/hidden.scss
@@ -22,3 +22,7 @@
width: 1px;
}
}
+
+.plyr [hidden] {
+ display: none !important;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-09 03:09:57 +0000