Adding LESS settings

- Added setting to be able to disable the border-box if you already defined that in your own css
- Added setting to be able to disable touch-action if you already defined that in your own css
- Added setting to choose not to use !important for sr-only class

src/less/plyr.less

@@ -21,6 +21,7 @@
     min-width: 200px;
     font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
+    & when (@plyr-border-box = true) {
         // border-box everything
         // http://paulirish.com/2012/box-sizing-border-box-ftw/
         &,
@@ -29,11 +30,14 @@
         *::before {
             box-sizing: border-box;
         }
+    }
 
+    & when (@plyr-touch-action = true) {
         // Fix 300ms delay
         a, button, input, label {
             touch-action: manipulation;
         }
+    }
 
     // Media elements
     video,
@@ -138,13 +142,24 @@
 
 // Screen reader only elements
 .plyr__sr-only {
-    position: absolute !important;
     clip: rect(1px, 1px, 1px, 1px);
+    overflow: hidden;
+
+    // !important is not always needed
+    & when (@plyr-sr-only-important = true) {
+        position: absolute !important;
         padding: 0 !important;
         border: 0 !important;
         height: 1px !important;
         width: 1px !important;
-    overflow: hidden;
+    }
+    & when (@plyr-sr-only-important = false) {
+        position: absolute;
+        padding: 0;
+        border: 0;
+        height: 1px;
+        width: 1px;
+    }
 }
 
 // Video

src/less/variables.less

@@ -3,6 +3,11 @@
 // https://github.com/selz/plyr
 // ==========================================================================
 
+// Settings
+@plyr-border-box:                       true;
+@plyr-touch-action:                     true;
+@plyr-sr-only-important:                true;
+
 // Colors
 @plyr-color-main:                       #3498db;