diff options
Diffstat (limited to 'src/sass/components')
-rw-r--r-- | src/sass/components/badges.scss | 2 | ||||
-rw-r--r-- | src/sass/components/captions.scss | 30 | ||||
-rw-r--r-- | src/sass/components/menus.scss | 18 | ||||
-rw-r--r-- | src/sass/components/sliders.scss | 4 |
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; |