IE & Edge fixes, Storage & Console classes

1 files changed, 89 insertions, 0 deletions

diff --git a/src/less/components/control.less b/src/less/components/control.less
new file mode 100644
index 00000000..48b73e0f
--- /dev/null
+++ b/src/less/components/control.less
@@ -0,0 +1,89 @@
+// --------------------------------------------------------------
+// Control buttons
+// --------------------------------------------------------------
+
+.plyr__control {
+    position: relative;
+    flex-shrink: 0;
+    overflow: visible; // IE11
+    padding: @plyr-control-padding;
+    border: 0;
+    background: transparent;
+    border-radius: @plyr-control-radius;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: inherit;
+
+    svg {
+        width: @plyr-control-icon-size;
+        height: @plyr-control-icon-size;
+        display: block;
+        fill: currentColor;
+        pointer-events: none;
+    }
+
+    // Default focus
+    &:focus {
+        outline: 0;
+    }
+
+    // Tab focus
+    &.plyr__tab-focus {
+        .plyr-tab-focus();
+    }
+}
+
+// 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 {
+    display: none;
+}
+
+// Audio styles
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: @plyr-audio-control-bg-hover;
+        color: @plyr-audio-control-color-hover;
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    display: none;
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: ceil(@plyr-control-spacing * 1.5);
+    background: fade(@plyr-video-control-bg-hover, 80%);
+    border: 0;
+    border-radius: 100%;
+    box-shadow: 0 1px 1px fade(#000, 15%);
+    color: @plyr-video-control-color;
+
+    svg {
+        position: relative;
+        left: 2px; // Offset to make the play button look right
+        width: @plyr-control-icon-size-large;
+        height: @plyr-control-icon-size-large;
+    }
+
+    &:hover,
+    &:focus {
+        background: @plyr-video-control-bg-hover;
+    }
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: block;
+}
+
+.plyr--playing .plyr__control--overlaid {
+    opacity: 0;
+    visibility: hidden;
+}