aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components')
-rw-r--r--src/sass/components/badges.scss2
-rw-r--r--src/sass/components/captions.scss30
-rw-r--r--src/sass/components/menus.scss18
-rw-r--r--src/sass/components/sliders.scss4
4 files changed, 27 insertions, 27 deletions
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 83d045a6..3acb3cc4 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -5,7 +5,7 @@
.plyr__badge {
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
- color: $plyr-badge-color;
+ color: $plyr-badge-text-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 eb3c9389..2acab086 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -19,21 +19,6 @@
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;
}
@@ -56,3 +41,18 @@
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(calc(#{$plyr-control-spacing} * -4));
}
+
+.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;
+ }
+}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 49cec6f5..fccf303e 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -44,12 +44,12 @@
// Arrow
&::after {
- border: 4px solid transparent;
+ border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
- right: 15px;
+ right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
top: 100%;
width: 0;
}
@@ -87,7 +87,7 @@
}
&::after {
- border: 4px solid transparent;
+ border: $plyr-menu-item-arrow-size solid transparent;
content: '';
position: absolute;
top: 50%;
@@ -98,8 +98,8 @@
padding-right: calc(#{$plyr-control-padding} * 4);
&::after {
- border-left-color: $plyr-menu-arrow-color;
- right: 5px;
+ border-left-color: $plyr-menu-item-arrow-color;
+ right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&.plyr__tab-focus::after,
@@ -117,13 +117,13 @@
width: calc(100% - (#{$plyr-control-padding} * 2));
&::after {
- border-right-color: $plyr-menu-arrow-color;
- left: $plyr-control-padding;
+ border-right-color: $plyr-menu-item-arrow-color;
+ left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&::before {
- background: $plyr-menu-border-color;
- box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+ background: $plyr-menu-back-border-color;
+ box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
content: '';
height: 1px;
left: 0;
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b7872bcb..b90e7229 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -8,10 +8,10 @@
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
- // color is used in JS to populate lower fill for WebKit
+ // `color` property is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
- height: $plyr-range-max-height;
+ height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;