diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/sass/plyr.scss | 30 |
1 files changed, 12 insertions, 18 deletions
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 00e5c459..51eae73d 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -202,13 +202,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size transition: fill .3s ease; } } - input + label, - input.inverted:checked + label { + [type="checkbox"] + label, + .inverted:checked + label { color: $control-color-inactive; } button, - input.inverted + label, - input:checked + label { + .inverted + label, + [type="checkbox"]:checked + label { color: $control-color; } button { @@ -216,18 +216,19 @@ $bp-captions-large: 768px; // When captions jump to the larger font size background: transparent; overflow: hidden; } - input:focus + label, + [type="checkbox"]:focus + label, button:focus { @include tab-focus(); color: $control-color-focus; } button:hover, - input + label:hover { + [type="checkbox"] + label:hover { background: $control-bg-hover; color: $control-color-hover; } .icon-exit-fullscreen, - .icon-muted { + .icon-muted, + .icon-captions-on { display: none; } .player-time { @@ -301,15 +302,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size display: inline-block; } - // Muted - &.muted .player-controls .icon-muted { - display: block; - - & + svg { - display: none; - } - } - // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility @@ -412,8 +404,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size } } - // When true full screen, show exit fullscreen icon - &.fullscreen-active .icon-exit-fullscreen { + // Change icons on state change + &.fullscreen-active .icon-exit-fullscreen, + &.muted .player-controls .icon-muted, + &.captions-active .player-controls .icon-captions-on { display: block; & + svg { |