Work on outline/focus styles
This commit is contained in:
@ -71,8 +71,8 @@ a.plyr__control {
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: var(--plyr-audio-control-bg-hover);
|
||||
color: var(--plyr-audio-control-color-hover);
|
||||
background: var(--plyr-video-control-bg-hover);
|
||||
color: var(--plyr-video-control-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4,9 +4,13 @@
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
|
||||
box-shadow: 0 0 0 5px rgba($color, 0.5);
|
||||
outline: 0;
|
||||
@mixin plyr-tab-focus() {
|
||||
// box-shadow: 0 0 0 5px rgba($color, 0.5);
|
||||
// outline: 0;
|
||||
outline-color: var(--plyr-color-main);
|
||||
outline-offset: 2px;
|
||||
outline-style: dotted;
|
||||
outline-width: 3px;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
|
@ -20,7 +20,6 @@ $plyr-audio-control-bg-hover: var(--plyr-color-main) !default;
|
||||
@include css-vars(
|
||||
(
|
||||
--plyr-control-icon-size: $plyr-control-icon-size,
|
||||
--plyr-control-icon-size-large: $plyr-control-icon-size-large,
|
||||
--plyr-control-spacing: $plyr-control-spacing,
|
||||
--plyr-control-padding: $plyr-control-padding,
|
||||
--plyr-control-radius: $plyr-control-radius,
|
||||
|
Reference in New Issue
Block a user