aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components')
-rw-r--r--src/sass/components/captions.scss4
-rw-r--r--src/sass/components/control.scss20
2 files changed, 12 insertions, 12 deletions
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 1cfca92e..b8e2d771 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -10,7 +10,7 @@
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
- color: $plyr-captions-color;
+ color: var(--plyr-captions-text-color);
display: none;
font-size: $plyr-font-size-captions-small;
left: 0;
@@ -21,7 +21,7 @@
width: 100%;
.plyr__caption {
- background: $plyr-captions-bg;
+ background: var(--plyr-captions-background);
border-radius: 2px;
box-decoration-break: clone;
line-height: 185%;
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 1c9aab2b..eedcab13 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -5,21 +5,21 @@
.plyr__control {
background: transparent;
border: 0;
- border-radius: $plyr-control-radius;
+ border-radius: var(--plyr-control-radius);
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible; // IE11
- padding: $plyr-control-padding;
+ padding: var(--plyr-control-padding);
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
- height: $plyr-control-icon-size;
+ height: var(--plyr-control-icon-size);
pointer-events: none;
- width: $plyr-control-icon-size;
+ width: var(--plyr-control-icon-size);
}
// Default focus
@@ -71,18 +71,18 @@ a.plyr__control {
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
- background: $plyr-video-control-bg-hover;
- color: $plyr-video-control-color-hover;
+ background: var(--plyr-video-control-bg-hover);
+ color: var(--plyr-video-control-color-hover);
}
}
// Large play button (video only)
.plyr__control--overlaid {
- background: rgba($plyr-video-control-bg-hover, 0.8);
+ background: var(--plyr-video-control-bg-hover);
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(#000, 0.15);
- color: $plyr-video-control-color;
+ color: var(--plyr-video-control-color);
display: none;
left: 50%;
padding: ceil($plyr-control-spacing * 1.5);
@@ -93,13 +93,13 @@ a.plyr__control {
// Offset icon to make the play button look right
svg {
- left: 2px;
+ left: 2px; // Offset to make the play button look right
position: relative;
}
&:hover,
&:focus {
- background: $plyr-video-control-bg-hover;
+ background: var(--plyr-video-control-bg-hover);
}
}