aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components/control.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components/control.scss')
-rw-r--r--src/sass/components/control.scss70
1 files changed, 5 insertions, 65 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index ee24604e..2940897b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -5,21 +5,22 @@
.plyr__control {
background: transparent;
border: 0;
- border-radius: var(--plyr-control-radius);
+ 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);
+ padding: var(--plyr-control-padding, $plyr-control-padding);
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
- height: var(--plyr-control-icon-size);
+ height: var(--plyr-control-icon-size, $plyr-control-icon-size);
pointer-events: none;
- width: var(--plyr-control-icon-size);
+ width: var(--plyr-control-icon-size, $plyr-control-icon-size);
}
// Default focus
@@ -50,64 +51,3 @@ a.plyr__control {
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
-
-// Audio control
-.plyr--audio .plyr__control {
- &.plyr__tab-focus,
- &:hover,
- &[aria-expanded='true'] {
- background: $plyr-audio-control-bg-hover;
- color: $plyr-audio-control-color-hover;
- }
-}
-
-// Video control
-.plyr--video .plyr__control {
- svg {
- filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
- }
-
- // Hover and tab focus
- &.plyr__tab-focus,
- &:hover,
- &[aria-expanded='true'] {
- background: var(--plyr-video-control-bg-hover);
- color: var(--plyr-video-control-color-hover);
- }
-}
-
-// Large play button (video only)
-.plyr__control--overlaid {
- background: var(--plyr-video-control-bg-hover);
- border: 0;
- border-radius: 100%;
- box-shadow: 0 1px 1px rgba(#000, 0.15);
- color: var(--plyr-video-control-color-hover);
- display: none;
- left: 50%;
- padding: ceil($plyr-control-spacing * 1.5);
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- z-index: 2;
-
- // Offset icon to make the play button look right
- svg {
- left: 2px; // Offset to make the play button look right
- position: relative;
- }
-
- &:hover,
- &:focus {
- background: var(--plyr-video-control-bg-hover);
- }
-}
-
-.plyr--playing .plyr__control--overlaid {
- opacity: 0;
- visibility: hidden;
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
- display: block;
-}