diff options
Diffstat (limited to 'src/sass/plyr.scss')
-rw-r--r-- | src/sass/plyr.scss | 32 |
1 files changed, 13 insertions, 19 deletions
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 998398bb..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,18 +302,9 @@ $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 - // Specificty is for bootstrap compatibility + // Specificity is for bootstrap compatibility &-volume[type=range] { vertical-align: middle; -webkit-appearance: none; @@ -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 { |