aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/plyr.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/plyr.scss')
-rw-r--r--src/sass/plyr.scss32
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 {