diff options
Diffstat (limited to 'src/sass/components/control.scss')
-rw-r--r-- | src/sass/components/control.scss | 40 |
1 files changed, 32 insertions, 8 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 52716805..1c9aab2b 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -33,15 +33,25 @@ } } +// Remove any link styling +a.plyr__control { + text-decoration: none; + + &::after, + &::before { + display: none; + } +} + // Change icons on state change -.plyr__control[aria-pressed='false'] .icon--pressed, -.plyr__control[aria-pressed='true'] .icon--not-pressed, -.plyr__control[aria-pressed='false'] .label--pressed, -.plyr__control[aria-pressed='true'] .label--not-pressed { +.plyr__control:not(.plyr__control--pressed) .icon--pressed, +.plyr__control.plyr__control--pressed .icon--not-pressed, +.plyr__control:not(.plyr__control--pressed) .label--pressed, +.plyr__control.plyr__control--pressed .label--not-pressed { display: none; } -// Audio styles +// Audio control .plyr--audio .plyr__control { &.plyr__tab-focus, &:hover, @@ -51,6 +61,21 @@ } } +// 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: $plyr-video-control-bg-hover; + color: $plyr-video-control-color-hover; + } +} + // Large play button (video only) .plyr__control--overlaid { background: rgba($plyr-video-control-bg-hover, 0.8); @@ -66,11 +91,10 @@ transform: translate(-50%, -50%); z-index: 2; + // Offset icon to make the play button look right svg { - height: $plyr-control-icon-size-large; - left: 2px; // Offset to make the play button look right + left: 2px; position: relative; - width: $plyr-control-icon-size-large; } &:hover, |