aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components')
-rw-r--r--src/sass/components/badges.scss6
-rw-r--r--src/sass/components/captions.scss6
-rw-r--r--src/sass/components/control.scss70
-rw-r--r--src/sass/components/controls.scss44
-rw-r--r--src/sass/components/menus.scss12
-rw-r--r--src/sass/components/progress.scss19
-rw-r--r--src/sass/components/sliders.scss74
-rw-r--r--src/sass/components/times.scss4
-rw-r--r--src/sass/components/tooltips.scss4
-rw-r--r--src/sass/components/video.scss55
-rw-r--r--src/sass/components/volume.scss26
11 files changed, 34 insertions, 286 deletions
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 46c87d03..b0d575bb 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -3,10 +3,10 @@
// --------------------------------------------------------------
.plyr__badge {
- background: $plyr-badge-bg;
+ background: var(--plyr-badge-background, $plyr-badge-background);
border-radius: 2px;
- color: $plyr-badge-color;
- font-size: var(--plyr-font-size-badge);
+ color: var(--plyr-badge-color, $plyr-badge-color);
+ font-size: var(--plyr-font-size-badge, $plyr-font-size-badge);
line-height: 1;
padding: 3px 4px;
}
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index d7951b96..85899ef3 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -10,7 +10,6 @@
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
- color: var(--plyr-captions-text-color);
display: none;
font-size: $plyr-font-size-captions-small;
left: 0;
@@ -21,9 +20,12 @@
width: 100%;
.plyr__caption {
- background: var(--plyr-captions-background);
+ background: $plyr-captions-background;
+ background: var(--plyr-captions-background, $plyr-captions-background);
border-radius: 2px;
box-decoration-break: clone;
+ color: $plyr-captions-text-color;
+ color: var(--plyr-captions-text-color, $plyr-captions-text-color);
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index ee24604e..2940897b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -5,21 +5,22 @@
.plyr__control {
background: transparent;
border: 0;
- border-radius: var(--plyr-control-radius);
+ border-radius: $plyr-control-radius;
+ border-radius: var(--plyr-control-radius, $plyr-control-radius);
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible; // IE11
- padding: var(--plyr-control-padding);
+ padding: var(--plyr-control-padding, $plyr-control-padding);
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
- height: var(--plyr-control-icon-size);
+ height: var(--plyr-control-icon-size, $plyr-control-icon-size);
pointer-events: none;
- width: var(--plyr-control-icon-size);
+ width: var(--plyr-control-icon-size, $plyr-control-icon-size);
}
// Default focus
@@ -50,64 +51,3 @@ a.plyr__control {
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
-
-// Audio control
-.plyr--audio .plyr__control {
- &.plyr__tab-focus,
- &:hover,
- &[aria-expanded='true'] {
- background: $plyr-audio-control-bg-hover;
- color: $plyr-audio-control-color-hover;
- }
-}
-
-// 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: var(--plyr-video-control-bg-hover);
- color: var(--plyr-video-control-color-hover);
- }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
- background: var(--plyr-video-control-bg-hover);
- border: 0;
- border-radius: 100%;
- box-shadow: 0 1px 1px rgba(#000, 0.15);
- color: var(--plyr-video-control-color-hover);
- display: none;
- left: 50%;
- padding: ceil($plyr-control-spacing * 1.5);
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- z-index: 2;
-
- // Offset icon to make the play button look right
- svg {
- left: 2px; // Offset to make the play button look right
- position: relative;
- }
-
- &:hover,
- &:focus {
- background: var(--plyr-video-control-bg-hover);
- }
-}
-
-.plyr--playing .plyr__control--overlaid {
- opacity: 0;
- visibility: hidden;
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
- display: block;
-}
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index f4559bba..50333701 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -12,11 +12,11 @@
align-items: center;
display: flex;
justify-content: flex-end;
- min-width: 0; // Fix for Edge issue where content would overflow
text-align: center;
.plyr__progress__container {
flex: 1;
+ min-width: 0; // Fix for Edge issue where content would overflow
}
// Spacing
@@ -41,14 +41,6 @@
&.plyr__time + .plyr__time {
padding-left: 0;
}
-
- &.plyr__volume {
- padding-right: ($plyr-control-spacing / 2);
- }
-
- &.plyr__volume:first-child {
- padding-right: 0;
- }
}
// Hide empty controls
@@ -57,40 +49,6 @@
}
}
-// 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));
- border-bottom-left-radius: inherit;
- border-bottom-right-radius: inherit;
- bottom: 0;
- color: $plyr-video-control-color;
- left: 0;
- 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: 3;
-
- @media (min-width: $plyr-bp-sm) {
- padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
- }
-}
-
-// Hide video controls
-.plyr--video.plyr--hide-controls .plyr__controls {
- opacity: 0;
- pointer-events: none;
- transform: translateY(100%);
-}
-
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='pip'],
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index b8c85284..50a47248 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -24,7 +24,7 @@
// The actual menu container
&__container {
animation: plyr-popup 0.2s ease;
- background: $plyr-menu-bg;
+ background: $plyr-menu-background;
border-radius: 4px;
bottom: 100%;
box-shadow: $plyr-menu-shadow;
@@ -39,14 +39,13 @@
> 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
&::after {
border: 4px solid transparent;
- border-top-color: $plyr-menu-bg;
+ border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
@@ -74,8 +73,7 @@
color: $plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
- padding: ceil($plyr-control-padding / 2)
- ceil($plyr-control-padding * 1.5);
+ padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
user-select: none;
width: 100%;
@@ -174,7 +172,7 @@
&[aria-checked='true'] {
&::before {
- background: $plyr-color-main;
+ background: var(--plyr-color-main, $plyr-color-main);
}
&::after {
opacity: 1;
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index 04c83516..c15ee911 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -67,25 +67,16 @@ $plyr-progress-offset: $plyr-range-thumb-height;
}
}
-.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 {
- color: $plyr-audio-progress-buffered-bg;
-}
-
// Loading state
.plyr--loading .plyr__progress__buffer {
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(
-45deg,
- $plyr-progress-loading-bg 25%,
+ var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
transparent 25%,
transparent 50%,
- $plyr-progress-loading-bg 50%,
- $plyr-progress-loading-bg 75%,
+ var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
+ var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
transparent 75%,
transparent
);
@@ -95,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
- background-color: $plyr-video-progress-buffered-bg;
+ background-color: $plyr-video-progress-buffered-background;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
- background-color: $plyr-audio-progress-buffered-bg;
+ background-color: $plyr-audio-progress-buffered-background;
}
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index ee64271b..7b13348e 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -9,7 +9,7 @@
border: 0;
border-radius: ($plyr-range-thumb-height * 2);
// color is used in JS to populate lower fill for WebKit
- color: $plyr-range-fill-bg;
+ color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
margin: 0;
@@ -19,11 +19,7 @@
&::-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 {
@@ -96,69 +92,3 @@
}
}
}
-
-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
- &::-webkit-slider-runnable-track {
- background-color: $plyr-video-range-track-bg;
- }
-
- &::-moz-range-track {
- background-color: $plyr-video-range-track-bg;
- }
-
- &::-ms-track {
- background-color: $plyr-video-range-track-bg;
- }
-
- // Pressed styles
- &:active {
- &::-webkit-slider-thumb {
- @include plyr-range-thumb-active();
- }
-
- &::-moz-range-thumb {
- @include plyr-range-thumb-active();
- }
-
- &::-ms-thumb {
- @include plyr-range-thumb-active();
- }
- }
-}
-
-// Audio range inputs
-.plyr--full-ui.plyr--audio input[type='range'] {
- &::-webkit-slider-runnable-track {
- background-color: $plyr-audio-range-track-bg;
- }
-
- &::-moz-range-track {
- background-color: $plyr-audio-range-track-bg;
- }
-
- &::-ms-track {
- background-color: $plyr-audio-range-track-bg;
- }
-
- // Pressed styles
- &:active {
- &::-webkit-slider-thumb {
- @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
- );
- }
-
- &::-ms-thumb {
- @include plyr-range-thumb-active(
- $plyr-audio-range-thumb-shadow-color
- );
- }
- }
-}
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index 240d3528..7d7a50f1 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -18,7 +18,3 @@
display: none;
}
}
-
-.plyr--video .plyr__time {
- text-shadow: 0 1px 1px rgba(#000, 0.15);
-}
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 80603bb5..15f11f03 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -3,7 +3,7 @@
// --------------------------------------------------------------
.plyr__tooltip {
- background: $plyr-tooltip-bg;
+ background: $plyr-tooltip-background;
border-radius: $plyr-tooltip-radius;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
@@ -27,7 +27,7 @@
&::before {
border-left: $plyr-tooltip-arrow-size solid transparent;
border-right: $plyr-tooltip-arrow-size solid transparent;
- border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+ border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
bottom: -$plyr-tooltip-arrow-size;
content: '';
height: 0;
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
deleted file mode 100644
index fdcf4f2d..00000000
--- a/src/sass/components/video.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// --------------------------------------------------------------
-// Video styles
-// --------------------------------------------------------------
-
-.plyr--video {
- background: #000;
- overflow: hidden;
-
- // Menu open
- &.plyr--menu-open {
- overflow: visible;
- }
-}
-
-.plyr__video-wrapper {
- background: #000;
- border-radius: inherit;
- overflow: hidden;
- position: relative;
- // Require z-index to force border-radius
- z-index: 0;
-}
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed,
-.plyr__video-wrapper--fixed-ratio {
- height: 0;
- padding-bottom: to-percentage($embed-padding);
-}
-
-.plyr__video-embed iframe,
-.plyr__video-wrapper--fixed-ratio video {
- border: 0;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- user-select: none;
- width: 100%;
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
- $height: 240;
- $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
- // Only used for Vimeo
- > .plyr__video-embed__container {
- padding-bottom: to-percentage($height);
- position: relative;
- transform: translateY(-$offset);
- }
-}
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index 82a6dd36..614b35f5 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -5,33 +5,21 @@
.plyr__volume {
align-items: center;
display: flex;
- flex: 1;
+ max-width: 110px;
+ min-width: 80px;
position: relative;
+ width: 20%;
input[type='range'] {
margin-left: ($plyr-control-spacing / 2);
+ margin-right: ($plyr-control-spacing / 2);
position: relative;
z-index: 2;
}
-
- @media (min-width: $plyr-bp-sm) {
- max-width: 90px;
- }
-
- @media (min-width: $plyr-bp-md) {
- max-width: 110px;
- }
}
-// Hide sound controls on iOS
-// 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
+// Auto size on iOS as there's no slider
.plyr--is-ios .plyr__volume {
- display: none !important;
-}
-
-// Vimeo has no toggle mute method so hide mute button
-// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183
-.plyr--is-ios.plyr--vimeo [data-plyr='mute'] {
- display: none !important;
+ min-width: 0;
+ width: auto;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 23:58:36 +0000