Prep work for theming

1 files changed, 95 insertions, 0 deletions

diff --git a/src/less/components/range.less b/src/less/components/range.less
new file mode 100644
index 00000000..36282761
--- /dev/null
+++ b/src/less/components/range.less
@@ -0,0 +1,95 @@
+// Range inputs
+// --------------------------------------------------------------
+
+// Specificity is for bootstrap compatibility
+.plyr input[type='range'] {
+    display: block;
+    height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
+    width: 100%;
+    margin: 0;
+    padding: 0; 
+    vertical-align: middle;
+    
+    appearance: none;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    
+    // WebKit
+    &::-webkit-slider-runnable-track {
+        .plyr-range-track();
+    }
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2);
+        .plyr-range-thumb();
+    }
+
+    // Mozilla
+    &::-moz-range-track {
+        .plyr-range-track();
+    }
+    &::-moz-range-thumb {
+        .plyr-range-thumb();
+    }
+    &::-moz-focus-outer {
+        border: 0;
+    }
+    
+    // Microsoft
+    &::-ms-track {
+        height: @plyr-range-track-height;
+        background: transparent;
+        border: 0;
+        color: transparent;
+    }
+    &::-ms-fill-upper {
+        .plyr-range-track();
+    }
+    &::-ms-fill-lower {
+        .plyr-range-track();
+        background: @plyr-range-selected-bg;
+    }
+    &::-ms-thumb {
+        .plyr-range-thumb();
+        // For some reason, Edge uses the -webkit margin above
+        margin-top: 0; 
+    }
+    &::-ms-tooltip {
+        display: none;
+    }
+
+    // Focus styles
+    &:focus {
+        outline: 0;
+    }
+    &::-moz-focus-outer {
+        border: 0;
+    }        
+    &.tab-focus:focus {
+        outline-offset: 3px;
+    }
+    
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            .plyr-range-thumb-active();
+        }
+        &::-moz-range-thumb {
+            .plyr-range-thumb-active();
+        }
+        &::-ms-thumb {
+            .plyr-range-thumb-active();
+        }
+    }
+}
+
+// Video range inputs
+.plyr--video input[type='range'].tab-focus:focus {
+    outline: 1px dotted fade(@plyr-video-control-color, 50%);
+}
+
+// Audio range inputs
+.plyr--audio input[type='range'].tab-focus:focus {
+    outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+}
\ No newline at end of file