aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components')
-rw-r--r--src/sass/components/badges.scss12
-rw-r--r--src/sass/components/captions.scss76
-rw-r--r--src/sass/components/control.scss63
-rw-r--r--src/sass/components/controls.scss66
-rw-r--r--src/sass/components/menus.scss348
-rw-r--r--src/sass/components/poster.scss26
-rw-r--r--src/sass/components/progress.scss130
-rw-r--r--src/sass/components/sliders.scss154
-rw-r--r--src/sass/components/times.scss18
-rw-r--r--src/sass/components/tooltips.scss108
-rw-r--r--src/sass/components/volume.scss28
11 files changed, 514 insertions, 515 deletions
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index b0d575bb..83d045a6 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -3,10 +3,10 @@
// --------------------------------------------------------------
.plyr__badge {
- background: var(--plyr-badge-background, $plyr-badge-background);
- border-radius: 2px;
- 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;
+ background: $plyr-badge-background;
+ border-radius: $plyr-badge-border-radius;
+ color: $plyr-badge-color;
+ font-size: $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 85899ef3..eb3c9389 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -4,57 +4,55 @@
// Hide default captions
.plyr--full-ui ::-webkit-media-text-track-container {
- display: none;
+ display: none;
}
.plyr__captions {
- animation: plyr-fade-in 0.3s ease;
- bottom: 0;
- display: none;
- font-size: $plyr-font-size-captions-small;
- left: 0;
- padding: $plyr-control-spacing;
- position: absolute;
- text-align: center;
- transition: transform 0.4s ease-in-out;
- width: 100%;
-
- .plyr__caption {
- 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;
-
- // Firefox adds a <div> when using getCueAsHTML()
- div {
- display: inline;
- }
+ animation: plyr-fade-in 0.3s ease;
+ bottom: 0;
+ display: none;
+ font-size: $plyr-font-size-captions-small;
+ left: 0;
+ padding: $plyr-control-spacing;
+ position: absolute;
+ text-align: center;
+ transition: transform 0.4s ease-in-out;
+ width: 100%;
+
+ .plyr__caption {
+ background: $plyr-captions-background;
+ border-radius: 2px;
+ box-decoration-break: clone;
+ color: $plyr-captions-text-color;
+ line-height: 185%;
+ padding: 0.2em 0.5em;
+ white-space: pre-wrap;
+
+ // Firefox adds a <div> when using getCueAsHTML()
+ div {
+ display: inline;
}
+ }
- span:empty {
- display: none;
- }
+ span:empty {
+ display: none;
+ }
- @media (min-width: $plyr-bp-sm) {
- font-size: $plyr-font-size-captions-base;
- padding: ($plyr-control-spacing * 2);
- }
+ @media (min-width: $plyr-bp-sm) {
+ font-size: $plyr-font-size-captions-base;
+ padding: calc(#{$plyr-control-spacing} * 2);
+ }
- @media (min-width: $plyr-bp-md) {
- font-size: $plyr-font-size-captions-medium;
- }
+ @media (min-width: $plyr-bp-md) {
+ font-size: $plyr-font-size-captions-medium;
+ }
}
.plyr--captions-active .plyr__captions {
- display: block;
+ display: block;
}
// 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));
+ transform: translateY(calc(#{$plyr-control-spacing} * -4));
}
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 2940897b..8671fa2a 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -3,45 +3,44 @@
// --------------------------------------------------------------
.plyr__control {
- background: transparent;
- border: 0;
- 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, $plyr-control-padding);
- position: relative;
- transition: all 0.3s ease;
+ background: transparent;
+ border: 0;
+ border-radius: $plyr-control-radius;
+ color: inherit;
+ cursor: pointer;
+ flex-shrink: 0;
+ overflow: visible; // IE11
+ padding: $plyr-control-padding;
+ position: relative;
+ transition: all 0.3s ease;
- svg {
- display: block;
- fill: currentColor;
- height: var(--plyr-control-icon-size, $plyr-control-icon-size);
- pointer-events: none;
- width: var(--plyr-control-icon-size, $plyr-control-icon-size);
- }
+ svg {
+ display: block;
+ fill: currentColor;
+ height: $plyr-control-icon-size;
+ pointer-events: none;
+ width: $plyr-control-icon-size;
+ }
- // Default focus
- &:focus {
- outline: 0;
- }
+ // Default focus
+ &:focus {
+ outline: 0;
+ }
- // Tab focus
- &.plyr__tab-focus {
- @include plyr-tab-focus();
- }
+ // Tab focus
+ &.plyr__tab-focus {
+ @include plyr-tab-focus();
+ }
}
// Remove any link styling
a.plyr__control {
- text-decoration: none;
+ text-decoration: none;
- &::after,
- &::before {
- display: none;
- }
+ &::after,
+ &::before {
+ display: none;
+ }
}
// Change icons on state change
@@ -49,5 +48,5 @@ a.plyr__control {
.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;
+ display: none;
}
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 50333701..60ee774d 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -4,49 +4,49 @@
// Hide native controls
.plyr--full-ui ::-webkit-media-controls {
- display: none;
+ display: none;
}
// Playback controls
.plyr__controls {
- align-items: center;
- display: flex;
- justify-content: flex-end;
- text-align: center;
-
- .plyr__progress__container {
- flex: 1;
- min-width: 0; // Fix for Edge issue where content would overflow
- }
+ align-items: center;
+ display: flex;
+ justify-content: flex-end;
+ text-align: center;
- // Spacing
- .plyr__controls__item {
- margin-left: ($plyr-control-spacing / 4);
+ .plyr__progress__container {
+ flex: 1;
+ min-width: 0; // Fix for Edge issue where content would overflow
+ }
- &:first-child {
- margin-left: 0;
- margin-right: auto;
- }
+ // Spacing
+ .plyr__controls__item {
+ margin-left: calc(#{$plyr-control-spacing} / 4);
- &.plyr__progress__container {
- padding-left: ($plyr-control-spacing / 4);
- }
+ &:first-child {
+ margin-left: 0;
+ margin-right: auto;
+ }
- &.plyr__time {
- padding: 0 ($plyr-control-spacing / 2);
- }
+ &.plyr__progress__container {
+ padding-left: calc(#{$plyr-control-spacing} / 4);
+ }
- &.plyr__progress__container:first-child,
- &.plyr__time:first-child,
- &.plyr__time + .plyr__time {
- padding-left: 0;
- }
+ &.plyr__time {
+ padding: 0 calc(#{$plyr-control-spacing} / 2);
}
- // Hide empty controls
- &:empty {
- display: none;
+ &.plyr__progress__container:first-child,
+ &.plyr__time:first-child,
+ &.plyr__time + .plyr__time {
+ padding-left: 0;
}
+ }
+
+ // Hide empty controls
+ &:empty {
+ display: none;
+ }
}
// Some options are hidden by default
@@ -54,11 +54,11 @@
.plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'],
.plyr [data-plyr='fullscreen'] {
- display: none;
+ display: none;
}
.plyr--captions-enabled [data-plyr='captions'],
.plyr--pip-supported [data-plyr='pip'],
.plyr--airplay-supported [data-plyr='airplay'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
- display: inline-block;
+ display: inline-block;
}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 50a47248..49cec6f5 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -3,198 +3,200 @@
// --------------------------------------------------------------
.plyr__menu {
- display: flex; // Edge fix
- position: relative;
+ display: flex; // Edge fix
+ position: relative;
+
+ // Animate the icon
+ .plyr__control svg {
+ transition: transform 0.3s ease;
+ }
+ .plyr__control[aria-expanded='true'] {
+ svg {
+ transform: rotate(90deg);
+ }
- // Animate the icon
- .plyr__control svg {
- transition: transform 0.3s ease;
+ // Hide tooltip
+ .plyr__tooltip {
+ display: none;
+ }
+ }
+
+ // The actual menu container
+ &__container {
+ animation: plyr-popup 0.2s ease;
+ background: $plyr-menu-background;
+ border-radius: 4px;
+ bottom: 100%;
+ box-shadow: $plyr-menu-shadow;
+ color: $plyr-menu-color;
+ font-size: $plyr-font-size-base;
+ margin-bottom: 10px;
+ position: absolute;
+ right: -3px;
+ text-align: left;
+ white-space: nowrap;
+ z-index: 3;
+
+ > 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);
}
- .plyr__control[aria-expanded='true'] {
- svg {
- transform: rotate(90deg);
- }
- // Hide tooltip
- .plyr__tooltip {
- display: none;
- }
+ // Arrow
+ &::after {
+ border: 4px solid transparent;
+ border-top-color: $plyr-menu-background;
+ content: '';
+ height: 0;
+ position: absolute;
+ right: 15px;
+ top: 100%;
+ width: 0;
+ }
+
+ [role='menu'] {
+ padding: $plyr-control-padding;
+ }
+
+ [role='menuitem'],
+ [role='menuitemradio'] {
+ margin-top: 2px;
+
+ &:first-child {
+ margin-top: 0;
+ }
}
- // The actual menu container
- &__container {
- animation: plyr-popup 0.2s ease;
- background: $plyr-menu-background;
- border-radius: 4px;
- bottom: 100%;
- box-shadow: $plyr-menu-shadow;
- color: $plyr-menu-color;
- font-size: $plyr-font-size-base;
- margin-bottom: 10px;
+ // Options
+ .plyr__control {
+ align-items: center;
+ color: $plyr-menu-color;
+ display: flex;
+ font-size: $plyr-font-size-menu;
+ padding-bottom: calc(#{$plyr-control-padding} / 1.5);
+ padding-left: calc(#{$plyr-control-padding} * 1.5);
+ padding-right: calc(#{$plyr-control-padding} * 1.5);
+ padding-top: calc(#{$plyr-control-padding} / 1.5);
+ user-select: none;
+ width: 100%;
+
+ > span {
+ align-items: inherit;
+ display: flex;
+ width: 100%;
+ }
+
+ &::after {
+ border: 4px solid transparent;
+ content: '';
position: absolute;
- right: -3px;
- text-align: left;
- white-space: nowrap;
- z-index: 3;
-
- > 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);
- }
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ &--forward {
+ padding-right: calc(#{$plyr-control-padding} * 4);
- // Arrow
&::after {
- border: 4px solid transparent;
- border-top-color: $plyr-menu-background;
- content: '';
- height: 0;
- position: absolute;
- right: 15px;
- top: 100%;
- width: 0;
+ border-left-color: $plyr-menu-arrow-color;
+ right: 5px;
}
- [role='menu'] {
- padding: $plyr-control-padding;
+ &.plyr__tab-focus::after,
+ &:hover::after {
+ border-left-color: currentColor;
}
+ }
- [role='menuitem'],
- [role='menuitemradio'] {
- margin-top: 2px;
+ &--back {
+ font-weight: $plyr-font-weight-regular;
+ margin: $plyr-control-padding;
+ margin-bottom: calc(#{$plyr-control-padding} / 2);
+ padding-left: calc(#{$plyr-control-padding} * 4);
+ position: relative;
+ width: calc(100% - (#{$plyr-control-padding} * 2));
- &:first-child {
- margin-top: 0;
- }
+ &::after {
+ border-right-color: $plyr-menu-arrow-color;
+ left: $plyr-control-padding;
}
- // Options
- .plyr__control {
- align-items: center;
- color: $plyr-menu-color;
- display: flex;
- font-size: $plyr-font-size-menu;
- 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: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
-
- &--forward {
- padding-right: ceil($plyr-control-padding * 4);
-
- &::after {
- border-left-color: rgba($plyr-menu-color, 0.8);
- right: 5px;
- }
-
- &.plyr__tab-focus::after,
- &:hover::after {
- border-left-color: currentColor;
- }
- }
-
- &--back {
- $horizontal-padding: ($plyr-control-padding * 2);
- font-weight: $plyr-font-weight-regular;
- margin: $plyr-control-padding;
- margin-bottom: floor($plyr-control-padding / 2);
- padding-left: ceil($plyr-control-padding * 4);
- position: relative;
- width: calc(100% - #{$horizontal-padding});
-
- &::after {
- border-right-color: rgba($plyr-menu-color, 0.8);
- left: $plyr-control-padding;
- }
-
- &::before {
- background: $plyr-menu-border-color;
- box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
- content: '';
- height: 1px;
- left: 0;
- margin-top: ceil($plyr-control-padding / 2);
- overflow: hidden;
- position: absolute;
- right: 0;
- top: 100%;
- }
-
- &.plyr__tab-focus::after,
- &:hover::after {
- border-right-color: currentColor;
- }
- }
+ &::before {
+ background: $plyr-menu-border-color;
+ box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+ content: '';
+ height: 1px;
+ left: 0;
+ margin-top: calc(#{$plyr-control-padding} / 2);
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ top: 100%;
}
- .plyr__control[role='menuitemradio'] {
- padding-left: $plyr-control-padding;
-
- &::before,
- &::after {
- border-radius: 100%;
- }
-
- &::before {
- background: rgba(#000, 0.1);
- content: '';
- display: block;
- flex-shrink: 0;
- height: 16px;
- margin-right: $plyr-control-spacing;
- transition: all 0.3s ease;
- width: 16px;
- }
-
- &::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: var(--plyr-color-main, $plyr-color-main);
- }
- &::after {
- opacity: 1;
- transform: translateY(-50%) scale(1);
- }
- }
-
- &.plyr__tab-focus::before,
- &:hover::before {
- background: rgba(#000, 0.1);
- }
+ &.plyr__tab-focus::after,
+ &:hover::after {
+ border-right-color: currentColor;
}
+ }
+ }
- // Option value
- .plyr__menu__value {
- align-items: center;
- display: flex;
- margin-left: auto;
- margin-right: -($plyr-control-padding - 2);
- overflow: hidden;
- padding-left: ceil($plyr-control-padding * 3.5);
- pointer-events: none;
+ .plyr__control[role='menuitemradio'] {
+ padding-left: $plyr-control-padding;
+
+ &::before,
+ &::after {
+ border-radius: 100%;
+ }
+
+ &::before {
+ background: rgba(#000, 0.1);
+ content: '';
+ display: block;
+ flex-shrink: 0;
+ height: 16px;
+ margin-right: $plyr-control-spacing;
+ transition: all 0.3s ease;
+ width: 16px;
+ }
+
+ &::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-control-toggle-checked-background;
}
+ &::after {
+ opacity: 1;
+ transform: translateY(-50%) scale(1);
+ }
+ }
+
+ &.plyr__tab-focus::before,
+ &:hover::before {
+ background: rgba($plyr-color-gray-900, 0.1);
+ }
+ }
+
+ // Option value
+ .plyr__menu__value {
+ align-items: center;
+ display: flex;
+ margin-left: auto;
+ margin-right: calc((#{$plyr-control-padding} - 2) * -1);
+ overflow: hidden;
+ padding-left: calc(#{$plyr-control-padding} * 3.5);
+ pointer-events: none;
}
+ }
}
diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index 9b239d4f..2e966a32 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -3,20 +3,20 @@
// --------------------------------------------------------------
.plyr__poster {
- background-color: #000;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: contain;
- height: 100%;
- left: 0;
- opacity: 0;
- position: absolute;
- top: 0;
- transition: opacity 0.2s ease;
- width: 100%;
- z-index: 1;
+ background-color: #000;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ background-size: contain;
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ transition: opacity 0.2s ease;
+ width: 100%;
+ z-index: 1;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
- opacity: 1;
+ opacity: 1;
}
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index c15ee911..be5bc126 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -6,89 +6,89 @@
$plyr-progress-offset: $plyr-range-thumb-height;
.plyr__progress {
- left: $plyr-progress-offset / 2;
- margin-right: $plyr-progress-offset;
- position: relative;
+ left: calc(#{$plyr-progress-offset} * 0.5);
+ margin-right: $plyr-progress-offset;
+ position: relative;
- input[type='range'],
- &__buffer {
- margin-left: -($plyr-progress-offset / 2);
- margin-right: -($plyr-progress-offset / 2);
- width: calc(100% + #{$plyr-progress-offset});
- }
+ input[type='range'],
+ &__buffer {
+ margin-left: calc(#{$plyr-progress-offset} * -0.5);
+ margin-right: calc(#{$plyr-progress-offset} * -0.5);
+ width: calc(100% + #{$plyr-progress-offset});
+ }
- input[type='range'] {
- position: relative;
- z-index: 2;
- }
+ input[type='range'] {
+ position: relative;
+ z-index: 2;
+ }
- // Seek tooltip to show time
- .plyr__tooltip {
- font-size: $plyr-font-size-time;
- left: 0;
- }
+ // Seek tooltip to show time
+ .plyr__tooltip {
+ font-size: $plyr-font-size-time;
+ left: 0;
+ }
}
.plyr__progress__buffer {
- -webkit-appearance: none; /* stylelint-disable-line */
- background: transparent;
- border: 0;
- border-radius: 100px;
- height: $plyr-range-track-height;
- left: 0;
- margin-top: -($plyr-range-track-height / 2);
- padding: 0;
- position: absolute;
- top: 50%;
+ -webkit-appearance: none; /* stylelint-disable-line */
+ background: transparent;
+ border: 0;
+ border-radius: 100px;
+ height: $plyr-range-track-height;
+ left: 0;
+ margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
+ padding: 0;
+ position: absolute;
+ top: 50%;
- &::-webkit-progress-bar {
- background: transparent;
- }
+ &::-webkit-progress-bar {
+ background: transparent;
+ }
- &::-webkit-progress-value {
- background: currentColor;
- border-radius: 100px;
- min-width: $plyr-range-track-height;
- 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
- &::-moz-progress-bar {
- background: currentColor;
- border-radius: 100px;
- min-width: $plyr-range-track-height;
- transition: width 0.2s ease;
- }
+ // Mozilla
+ &::-moz-progress-bar {
+ background: currentColor;
+ border-radius: 100px;
+ min-width: $plyr-range-track-height;
+ transition: width 0.2s ease;
+ }
- // Microsoft
- &::-ms-fill {
- border-radius: 100px;
- transition: width 0.2s ease;
- }
+ // Microsoft
+ &::-ms-fill {
+ border-radius: 100px;
+ transition: width 0.2s ease;
+ }
}
// Loading state
.plyr--loading .plyr__progress__buffer {
- animation: plyr-progress 1s linear infinite;
- background-image: linear-gradient(
- -45deg,
- var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
- transparent 25%,
- transparent 50%,
- var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
- var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
- transparent 75%,
- transparent
- );
- background-repeat: repeat-x;
- background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
- color: transparent;
+ animation: plyr-progress 1s linear infinite;
+ background-image: linear-gradient(
+ -45deg,
+ $plyr-progress-loading-background 25%,
+ transparent 25%,
+ transparent 50%,
+ $plyr-progress-loading-background 50%,
+ $plyr-progress-loading-background 75%,
+ transparent 75%,
+ transparent
+ );
+ background-repeat: repeat-x;
+ background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+ color: transparent;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
- background-color: $plyr-video-progress-buffered-background;
+ background-color: $plyr-video-progress-buffered-background;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
- background-color: $plyr-audio-progress-buffered-background;
+ background-color: $plyr-audio-progress-buffered-background;
}
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index 7b13348e..b7872bcb 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -3,92 +3,92 @@
// --------------------------------------------------------------
.plyr--full-ui input[type='range'] {
- // WebKit
+ // WebKit
+ -webkit-appearance: none; /* stylelint-disable-line */
+ background: transparent;
+ border: 0;
+ border-radius: calc(#{$plyr-range-thumb-height} * 2);
+ // color is used in JS to populate lower fill for WebKit
+ color: $plyr-range-fill-background;
+ display: block;
+ height: $plyr-range-max-height;
+ margin: 0;
+ padding: 0;
+ transition: box-shadow 0.3s ease;
+ width: 100%;
+
+ &::-webkit-slider-runnable-track {
+ @include plyr-range-track();
+ background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+ }
+
+ &::-webkit-slider-thumb {
+ @include plyr-range-thumb();
-webkit-appearance: none; /* stylelint-disable-line */
- background: transparent;
+ margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
+ }
+
+ // Mozilla
+ &::-moz-range-track {
+ @include plyr-range-track();
+ }
+
+ &::-moz-range-thumb {
+ @include plyr-range-thumb();
+ }
+
+ &::-moz-range-progress {
+ background: currentColor;
+ border-radius: calc(#{$plyr-range-track-height} / 2);
+ height: $plyr-range-track-height;
+ }
+
+ // Microsoft
+ &::-ms-track {
+ @include plyr-range-track();
+ color: transparent;
+ }
+
+ &::-ms-fill-upper {
+ @include plyr-range-track();
+ }
+
+ &::-ms-fill-lower {
+ @include plyr-range-track();
+
+ background: currentColor;
+ }
+
+ &::-ms-thumb {
+ @include plyr-range-thumb();
+ // For some reason, Edge uses the -webkit margin above
+ margin-top: 0;
+ }
+
+ &::-ms-tooltip {
+ display: none;
+ }
+
+ // Focus styles
+ &:focus {
+ outline: 0;
+ }
+
+ &::-moz-focus-outer {
border: 0;
- border-radius: ($plyr-range-thumb-height * 2);
- // color is used in JS to populate lower fill for WebKit
- color: $plyr-range-fill-background;
- display: block;
- height: $plyr-range-max-height;
- margin: 0;
- padding: 0;
- transition: box-shadow 0.3s ease;
- width: 100%;
+ }
+ &.plyr__tab-focus {
&::-webkit-slider-runnable-track {
- @include plyr-range-track();
- background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+ @include plyr-tab-focus();
}
- &::-webkit-slider-thumb {
- @include plyr-range-thumb();
- -webkit-appearance: none; /* stylelint-disable-line */
- margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
- }
-
- // Mozilla
&::-moz-range-track {
- @include plyr-range-track();
- }
-
- &::-moz-range-thumb {
- @include plyr-range-thumb();
- }
-
- &::-moz-range-progress {
- background: currentColor;
- border-radius: ($plyr-range-track-height / 2);
- height: $plyr-range-track-height;
+ @include plyr-tab-focus();
}
- // Microsoft
&::-ms-track {
- @include plyr-range-track();
- color: transparent;
- }
-
- &::-ms-fill-upper {
- @include plyr-range-track();
- }
-
- &::-ms-fill-lower {
- @include plyr-range-track();
-
- background: currentColor;
- }
-
- &::-ms-thumb {
- @include plyr-range-thumb();
- // For some reason, Edge uses the -webkit margin above
- margin-top: 0;
- }
-
- &::-ms-tooltip {
- display: none;
- }
-
- // Focus styles
- &:focus {
- outline: 0;
- }
-
- &::-moz-focus-outer {
- border: 0;
- }
-
- &.plyr__tab-focus {
- &::-webkit-slider-runnable-track {
- @include plyr-tab-focus();
- }
-
- &::-moz-range-track {
- @include plyr-tab-focus();
- }
-
- &::-ms-track {
- @include plyr-tab-focus();
- }
+ @include plyr-tab-focus();
}
+ }
}
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index 7d7a50f1..db41275d 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -3,18 +3,18 @@
// --------------------------------------------------------------
.plyr__time {
- font-size: $plyr-font-size-time;
+ font-size: $plyr-font-size-time;
}
// Media duration hidden on small screens
.plyr__time + .plyr__time {
- // Add a slash in before
- &::before {
- content: '\2044';
- margin-right: $plyr-control-spacing;
- }
+ // Add a slash in before
+ &::before {
+ content: '\2044';
+ margin-right: $plyr-control-spacing;
+ }
- @media (max-width: $plyr-bp-sm-max) {
- display: none;
- }
+ @media (max-width: calc(#{$plyr-bp-md} - 1)) {
+ display: none;
+ }
}
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 15f11f03..2d5eceaf 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -3,86 +3,86 @@
// --------------------------------------------------------------
.plyr__tooltip {
- background: $plyr-tooltip-background;
- border-radius: $plyr-tooltip-radius;
- bottom: 100%;
- box-shadow: $plyr-tooltip-shadow;
- color: $plyr-tooltip-color;
- font-size: $plyr-font-size-small;
- font-weight: $plyr-font-weight-regular;
+ background: $plyr-tooltip-background;
+ border-radius: $plyr-tooltip-radius;
+ bottom: 100%;
+ box-shadow: $plyr-tooltip-shadow;
+ color: $plyr-tooltip-color;
+ font-size: $plyr-font-size-small;
+ font-weight: $plyr-font-weight-regular;
+ left: 50%;
+ line-height: 1.3;
+ margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
+ opacity: 0;
+ padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
+ pointer-events: none;
+ position: absolute;
+ transform: translate(-50%, 10px) scale(0.8);
+ transform-origin: 50% 100%;
+ transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+ white-space: nowrap;
+ z-index: 2;
+
+ // The background triangle
+ &::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-background;
+ bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
+ content: '';
+ height: 0;
left: 50%;
- line-height: 1.3;
- margin-bottom: ($plyr-tooltip-padding * 2);
- opacity: 0;
- padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
- pointer-events: none;
position: absolute;
- transform: translate(-50%, 10px) scale(0.8);
- transform-origin: 50% 100%;
- transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
- white-space: nowrap;
+ transform: translateX(-50%);
+ width: 0;
z-index: 2;
-
- // The background triangle
- &::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-background;
- bottom: -$plyr-tooltip-arrow-size;
- content: '';
- height: 0;
- left: 50%;
- position: absolute;
- transform: translateX(-50%);
- width: 0;
- z-index: 2;
- }
+ }
}
// Displaying
.plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
- opacity: 1;
- transform: translate(-50%, 0) scale(1);
+ opacity: 1;
+ transform: translate(-50%, 0) scale(1);
}
.plyr .plyr__control:hover .plyr__tooltip {
- z-index: 3;
+ z-index: 3;
}
// First tooltip
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
- left: 0;
- transform: translate(0, 10px) scale(0.8);
- transform-origin: 0 100%;
+ left: 0;
+ transform: translate(0, 10px) scale(0.8);
+ transform-origin: 0 100%;
- &::before {
- left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
- }
+ &::before {
+ left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+ }
}
// 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%;
+ left: auto;
+ right: 0;
+ transform: translate(0, 10px) scale(0.8);
+ transform-origin: 100% 100%;
- &::before {
- left: auto;
- right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
- transform: translateX(50%);
- }
+ &::before {
+ left: auto;
+ right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+ transform: translateX(50%);
+ }
}
.plyr__controls > .plyr__control:first-child,
.plyr__controls > .plyr__control:first-child + .plyr__control,
.plyr__controls > .plyr__control:last-child {
- &:hover .plyr__tooltip,
- &.plyr__tab-focus .plyr__tooltip,
- .plyr__tooltip--visible {
- transform: translate(0, 0) scale(1);
- }
+ &:hover .plyr__tooltip,
+ &.plyr__tab-focus .plyr__tooltip,
+ .plyr__tooltip--visible {
+ transform: translate(0, 0) scale(1);
+ }
}
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index 614b35f5..be82f536 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -3,23 +3,23 @@
// --------------------------------------------------------------
.plyr__volume {
- align-items: center;
- display: flex;
- max-width: 110px;
- min-width: 80px;
- position: relative;
- width: 20%;
+ align-items: center;
+ display: flex;
+ 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;
- }
+ input[type='range'] {
+ margin-left: calc(#{$plyr-control-spacing} / 2);
+ margin-right: calc(#{$plyr-control-spacing} / 2);
+ position: relative;
+ z-index: 2;
+ }
}
// Auto size on iOS as there's no slider
.plyr--is-ios .plyr__volume {
- min-width: 0;
- width: auto;
+ min-width: 0;
+ width: auto;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 22:27:26 +0000