diff options
Diffstat (limited to 'src/sass/components/control.scss')
| -rw-r--r-- | src/sass/components/control.scss | 38 |
1 files changed, 31 insertions, 7 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index d93a6f34..d5a9847e 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -33,19 +33,44 @@ } } +// 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, &[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-audio-control-bg-hover); color: var(--plyr-audio-control-color-hover); } @@ -66,11 +91,10 @@ transform: translate(-50%, -50%); z-index: 2; + // Offset icon to make the play button look right svg { - height: var(--plyr-control-icon-size-large); left: 2px; // Offset to make the play button look right position: relative; - width: var(--plyr-control-icon-size-large); } &:hover, |