aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass')
-rw-r--r--src/sass/base.scss1
-rw-r--r--src/sass/components/control.scss2
-rw-r--r--src/sass/components/controls.scss1
-rw-r--r--src/sass/components/menus.scss7
-rw-r--r--src/sass/components/sliders.scss39
-rw-r--r--src/sass/components/tooltips.scss1
-rw-r--r--src/sass/lib/css-vars.scss31
-rw-r--r--src/sass/lib/functions.scss4
-rw-r--r--src/sass/lib/mixins.scss4
-rw-r--r--src/sass/plugins/ads.scss4
-rw-r--r--src/sass/plyr.scss10
-rw-r--r--src/sass/settings/captions.scss1
-rw-r--r--src/sass/settings/colors.scss24
-rw-r--r--src/sass/settings/controls.scss5
-rw-r--r--src/sass/settings/menus.scss2
-rw-r--r--src/sass/settings/sliders.scss1
-rw-r--r--src/sass/settings/type.scss4
-rw-r--r--src/sass/states/fullscreen.scss20
-rw-r--r--src/sass/types/video.scss8
19 files changed, 72 insertions, 97 deletions
diff --git a/src/sass/base.scss b/src/sass/base.scss
index 93f91bd9..794e7960 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -5,6 +5,7 @@
// Base
.plyr {
@include plyr-font-smoothing($plyr-font-smoothing);
+
align-items: center;
direction: ltr;
display: flex;
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 8671fa2a..55d02143 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -29,7 +29,7 @@
// Tab focus
&.plyr__tab-focus {
- @include plyr-tab-focus();
+ @include plyr-tab-focus;
}
}
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 60ee774d..330c450c 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -56,6 +56,7 @@
.plyr [data-plyr='fullscreen'] {
display: none;
}
+
.plyr--captions-enabled [data-plyr='captions'],
.plyr--pip-supported [data-plyr='pip'],
.plyr--airplay-supported [data-plyr='airplay'],
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index ce6d7e6e..c6ce6ce8 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -10,6 +10,7 @@
.plyr__control svg {
transition: transform 0.3s ease;
}
+
.plyr__control[aria-expanded='true'] {
svg {
transform: rotate(90deg);
@@ -77,10 +78,7 @@
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);
+ padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);
user-select: none;
width: 100%;
@@ -180,6 +178,7 @@
&::before {
background: $plyr-control-toggle-checked-background;
}
+
&::after {
opacity: 1;
transform: translateY(-50%) scale(1);
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index 69947003..db75bd56 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -3,10 +3,11 @@
// --------------------------------------------------------------
.plyr--full-ui input[type='range'] {
- -webkit-appearance: none; /* stylelint-disable-line */
+ appearance: none;
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
+
// `color` property is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
@@ -18,23 +19,25 @@
width: 100%;
&::-webkit-slider-runnable-track {
- @include plyr-range-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 */
+ @include plyr-range-thumb;
+
+ appearance: none;
margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
}
// Mozilla
&::-moz-range-track {
- @include plyr-range-track();
+ @include plyr-range-track;
}
&::-moz-range-thumb {
- @include plyr-range-thumb();
+ @include plyr-range-thumb;
}
&::-moz-range-progress {
@@ -45,22 +48,24 @@
// Microsoft
&::-ms-track {
- @include plyr-range-track();
+ @include plyr-range-track;
+
color: transparent;
}
&::-ms-fill-upper {
- @include plyr-range-track();
+ @include plyr-range-track;
}
&::-ms-fill-lower {
- @include plyr-range-track();
+ @include plyr-range-track;
background: currentColor;
}
&::-ms-thumb {
- @include plyr-range-thumb();
+ @include plyr-range-thumb;
+
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
}
@@ -70,25 +75,25 @@
}
// Focus styles
- &:focus {
- outline: 0;
- }
-
&::-moz-focus-outer {
border: 0;
}
+ &:focus {
+ outline: 0;
+ }
+
&.plyr__tab-focus {
&::-webkit-slider-runnable-track {
- @include plyr-tab-focus();
+ @include plyr-tab-focus;
}
&::-moz-range-track {
- @include plyr-tab-focus();
+ @include plyr-tab-focus;
}
&::-ms-track {
- @include plyr-tab-focus();
+ @include plyr-tab-focus;
}
}
}
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 2d5eceaf..b7afd366 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-max-compound-selectors */
// --------------------------------------------------------------
// Tooltips
// --------------------------------------------------------------
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss
index fb30f3a7..cb3da879 100644
--- a/src/sass/lib/css-vars.scss
+++ b/src/sass/lib/css-vars.scss
@@ -1,5 +1,8 @@
// Downloaded from https://github.com/malyw/css-vars (and modified)
+@use 'sass:list';
+@use 'sass:map';
+
// global map to be filled via variables
$css-vars: ();
@@ -21,36 +24,35 @@ $css-vars-use-native: false !default;
///
// Emulates var() CSS native function behavior
-//
// $args[0] {String} "--" + variable name
// [$args[1]] Optional default value if variable is not assigned yet
-//
// E.G.:
// color: var(--main-color);
// background: var(--main-background, green);
///
@function var($args...) {
// CHECK PARAMS
- @if (length($args) ==0) {
+ @if length($args) == 0 {
@error 'Variable name is expected to be passed to the var() function';
}
- @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+
+ @if str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--' {
@error "Variable name is expected to start from '--'";
}
// PROCESS
- $var-name: nth($args, 1);
- $var-value: map-get($css-vars, $var-name);
+ $var-name: list.nth($args, 1);
+ $var-value: map.get($css-vars, $var-name);
- @if ($css-vars-use-native) {
+ @if $css-vars-use-native {
// CSS variables
// Native CSS: don't process function in case of native
@return unquote('var(' + $args + ')');
} @else {
- @if ($var-value == null) {
+ @if not $var-value {
// variable is not provided so far
- @if (length($args) == 2) {
- $var-value: nth($args, 2);
+ @if length($args) == 2 {
+ $var-value: list.nth($args, 2);
}
}
@@ -70,20 +72,21 @@ $css-vars-use-native: false !default;
///
@mixin css-vars($var-map: null) {
// CHECK PARAMS
- @if ($var-map == null) {
+ @if not $var-map {
@error 'Map of variables is expected, instead got: null';
}
- @if (type_of($var-map) != map) {
+
+ @if type_of($var-map) != map {
@error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
}
// PROCESS
- @if ($css-vars-use-native) {
+ @if $css-vars-use-native {
// CSS variables
// Native CSS: assign CSS custom properties to the global scope
@at-root :root {
@each $var-name, $var-value in $var-map {
- @if (type_of($var-value) == string) {
+ @if type_of($var-value) == string {
#{$var-name}: $var-value; // to prevent quotes interpolation
} @else {
#{$var-name}: #{$var-value};
diff --git a/src/sass/lib/functions.scss b/src/sass/lib/functions.scss
index e991e2d8..d312874a 100644
--- a/src/sass/lib/functions.scss
+++ b/src/sass/lib/functions.scss
@@ -1,7 +1,3 @@
-// ==========================================================================
-// Useful functions
-// ==========================================================================
-
@function to-percentage($input) {
@return $input * 1%;
}
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index d1bc4b3e..0c1eab6e 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -5,10 +5,8 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
- outline-color: $color;
+ outline: $color dotted 3px;
outline-offset: 2px;
- outline-style: dotted;
- outline-width: 3px;
}
// Font smoothing
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index 16fb43e4..c422c695 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -36,7 +36,7 @@
z-index: 3;
}
- &::after:empty {
+ &:empty::after {
display: none;
}
}
@@ -47,10 +47,10 @@
display: block;
height: $plyr-range-track-height;
left: 0;
- margin: -($plyr-range-track-height / 2) 0 0;
opacity: 0.8;
position: absolute;
top: 50%;
+ transform: translateY(-50%);
width: 3px;
z-index: 3; // Between progress and thumb
}
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 3a8ca093..39dc49d6 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -4,15 +4,14 @@
// TODO: Review use of BEM classnames
// ==========================================================================
@charset 'UTF-8';
-
@import 'lib/css-vars';
+
$css-vars-use-native: true;
@import 'settings/breakpoints';
@import 'settings/colors';
@import 'settings/cosmetics';
@import 'settings/type';
-
@import 'settings/badges';
@import 'settings/captions';
@import 'settings/controls';
@@ -21,13 +20,10 @@ $css-vars-use-native: true;
@import 'settings/progress';
@import 'settings/sliders';
@import 'settings/tooltips';
-
@import 'lib/animation';
@import 'lib/functions';
@import 'lib/mixins';
-
@import 'base';
-
@import 'components/badges';
@import 'components/captions';
@import 'components/control';
@@ -39,14 +35,10 @@ $css-vars-use-native: true;
@import 'components/tooltips';
@import 'components/progress';
@import 'components/volume';
-
@import 'types/audio';
@import 'types/video';
-
@import 'states/fullscreen';
-
@import 'plugins/ads';
@import 'plugins/preview-thumbnails/index';
-
@import 'utils/animation';
@import 'utils/hidden';
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 23d944cb..156e9291 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -4,7 +4,6 @@
$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
-
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-small: $plyr-font-size-small !default;
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index a9846b19..060564ee 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,17 +2,17 @@
// Colors
// ==========================================================================
-$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
-$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default;
+$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default;
// Grayscale
-$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
-$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
-$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
-$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
-$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
-$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
-$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
-$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
-$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
-$plyr-color-gray-50: hsl(216, 15%, 97%) !default;
+$plyr-color-gray-900: hsl(216deg 15% 16%) !default;
+$plyr-color-gray-800: hsl(216deg 15% 25%) !default;
+$plyr-color-gray-700: hsl(216deg 15% 34%) !default;
+$plyr-color-gray-600: hsl(216deg 15% 43%) !default;
+$plyr-color-gray-500: hsl(216deg 15% 52%) !default;
+$plyr-color-gray-400: hsl(216deg 15% 61%) !default;
+$plyr-color-gray-300: hsl(216deg 15% 70%) !default;
+$plyr-color-gray-200: hsl(216deg 15% 79%) !default;
+$plyr-color-gray-100: hsl(216deg 15% 88%) !default;
+$plyr-color-gray-50: hsl(216deg 15% 97%) !default;
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index da4d5dbe..a9862734 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -7,15 +7,13 @@ $plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
-
$plyr-control-toggle-checked-background: var(
--plyr-control-toggle-checked-background,
var(--plyr-color-main, $plyr-color-main)
) !default;
-
$plyr-video-controls-background: var(
--plyr-video-controls-background,
- linear-gradient(rgba(#000, 0), rgba(#000, 0.8))
+ linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
) !default;
$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
@@ -23,7 +21,6 @@ $plyr-video-control-background-hover: var(
--plyr-video-control-background-hover,
var(--plyr-color-main, $plyr-color-main)
) !default;
-
$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 283a0c59..bf47837a 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -7,9 +7,7 @@ $plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
-
$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
-
$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 444b43da..2f5448da 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -29,7 +29,6 @@ $plyr-video-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba(#fff, 0.5)
) !default;
-
$plyr-audio-range-track-background: var(
--plyr-audio-range-track-background,
$plyr-audio-progress-buffered-background
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index 17db54f2..3c79291c 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -7,14 +7,10 @@ $plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
-
$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
-
$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
-
$plyr-line-height: var(--plyr-line-height, 1.7) !default;
-
$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss
index 4143d28e..7a5c8b83 100644
--- a/src/sass/states/fullscreen.scss
+++ b/src/sass/states/fullscreen.scss
@@ -3,27 +3,13 @@
// --------------------------------------------------------------
.plyr:fullscreen {
- @include plyr-fullscreen-active();
-}
-
-/* stylelint-disable-next-line */
-.plyr:-webkit-full-screen {
- @include plyr-fullscreen-active();
-}
-
-/* stylelint-disable-next-line */
-.plyr:-moz-full-screen {
- @include plyr-fullscreen-active();
-}
-
-/* stylelint-disable-next-line */
-.plyr:-ms-fullscreen {
- @include plyr-fullscreen-active();
+ @include plyr-fullscreen-active;
}
// Fallback for unsupported browsers
.plyr--fullscreen-fallback {
- @include plyr-fullscreen-active();
+ @include plyr-fullscreen-active;
+
bottom: 0;
display: block;
left: 0;
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index e0de7acc..747a2eb7 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -2,6 +2,8 @@
// Video styles
// --------------------------------------------------------------
+@use 'sass:math';
+
// Container
.plyr--video {
background: var(--plyr-video-background, $plyr-video-background);
@@ -14,6 +16,7 @@
.plyr__video-wrapper {
background: var(--plyr-video-background, $plyr-video-background);
+ height: 100%;
margin: auto;
overflow: hidden;
position: relative;
@@ -21,7 +24,7 @@
}
// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
+$embed-padding: (math.div(100, 16) * 9);
.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
@@ -47,7 +50,8 @@ $embed-padding: ((100 / 16) * 9);
// For Vimeo, if the full custom UI is supported
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
$height: 240;
- $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+ $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));
+
padding-bottom: to-percentage($height);
position: relative;
transform: translateY(-$offset);
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 09:20:29 +0000