aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/components/control.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/components/control.scss')
-rw-r--r--src/sass/components/control.scss40
1 files changed, 32 insertions, 8 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 52716805..1c9aab2b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -33,15 +33,25 @@
}
}
+// 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,
@@ -51,6 +61,21 @@
}
}
+// 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: $plyr-video-control-bg-hover;
+ color: $plyr-video-control-color-hover;
+ }
+}
+
// Large play button (video only)
.plyr__control--overlaid {
background: rgba($plyr-video-control-bg-hover, 0.8);
@@ -66,11 +91,10 @@
transform: translate(-50%, -50%);
z-index: 2;
+ // Offset icon to make the play button look right
svg {
- height: $plyr-control-icon-size-large;
- left: 2px; // Offset to make the play button look right
+ left: 2px;
position: relative;
- width: $plyr-control-icon-size-large;
}
&:hover,