From ed8dd1e20584bdfe8cb2d5fc36d19850434a52d1 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Fri, 16 Feb 2018 12:21:15 -0700
Subject: [PATCH] Add theming to range sliders

---
 pages.php            |  1 +
 pages/content.php    |  5 +--
 static/css/range.css | 92 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 static/css/range.css

diff --git a/pages.php b/pages.php
index e677f83..4648738 100644
--- a/pages.php
+++ b/pages.php
@@ -37,6 +37,7 @@ define("PAGES", [
         "icon" => "fas fa-edit",
         "styles" => [
             "static/css/summernote-lite.css",
+            "static/css/range.css",
             "static/css/content.css",
         ],
         "scripts" => [
diff --git a/pages/content.php b/pages/content.php
index daf67fa..a8b6151 100644
--- a/pages/content.php
+++ b/pages/content.php
@@ -1,5 +1,4 @@
 <?php
-
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -65,7 +64,7 @@ if ($pub === false) {
                     <div class="modal-body">
                         <div class="form-group">
                             <label for="width" class="control-label"><i class="fas fa-text-width"></i> <?php lang("width"); ?></label>
-                            <input type="range" class="form-control" id="width" min="1" max="4" step="1">
+                            <input type="range" class="form-control-range" id="width" min="1" max="4" step="1">
                         </div>
                         <div class="form-group">
                             <label for="order" class="control-label"><i class="fas fa-sort"></i> <?php lang("order"); ?></label>
@@ -108,7 +107,7 @@ if ($pub === false) {
                     <div class="modal-body">
                         <div class="form-group">
                             <label for="width" class="control-label"><i class="fas fa-text-width"></i> <?php lang("width"); ?></label>
-                            <input type="range" class="form-control" id="newwidth" value="1" min="1" max="4" step="1">
+                            <input type="range" class="form-control-range" id="newwidth" value="1" min="1" max="4" step="1">
                         </div>
                         <div class="form-group">
                             <label for="order" class="control-label"><i class="fas fa-sort"></i> <?php lang("order"); ?></label>
diff --git a/static/css/range.css b/static/css/range.css
new file mode 100644
index 0000000..f077623
--- /dev/null
+++ b/static/css/range.css
@@ -0,0 +1,92 @@
+input[type=range].form-control-range {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 6.5px 0;
+}
+input[type=range].form-control-range:focus {
+    outline: none;
+}
+input[type=range].form-control-range::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
+    background: #bbbbbb;
+    border-radius: 0px;
+    border: 0px solid rgba(255, 255, 255, 0);
+}
+input[type=range].form-control-range::-webkit-slider-thumb {
+    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
+    border: 0px solid rgba(227, 242, 253, 0.7);
+    height: 16px;
+    width: 16px;
+    border-radius: 7px;
+    background: #2196f3;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -6.5px;
+}
+input[type=range].form-control-range:focus::-webkit-slider-runnable-track {
+    background: #bbbbbb;
+}
+input[type=range].form-control-range::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
+    background: #bbbbbb;
+    border-radius: 0px;
+    border: 0px solid rgba(255, 255, 255, 0);
+}
+input[type=range].form-control-range::-moz-range-thumb {
+    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
+    border: 0px solid rgba(227, 242, 253, 0.7);
+    height: 16px;
+    width: 16px;
+    border-radius: 7px;
+    background: #2196f3;
+    cursor: pointer;
+}
+input[type=range].form-control-range::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+}
+input[type=range].form-control-range::-ms-fill-lower {
+    background: #bbbbbb;
+    border: 0px solid rgba(255, 255, 255, 0);
+    border-radius: 0px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
+}
+input[type=range].form-control-range::-ms-fill-upper {
+    background: #bbbbbb;
+    border: 0px solid rgba(255, 255, 255, 0);
+    border-radius: 0px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
+}
+input[type=range].form-control-range::-ms-thumb {
+    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
+    border: 0px solid rgba(227, 242, 253, 0.7);
+    height: 16px;
+    width: 16px;
+    border-radius: 7px;
+    background: #2196f3;
+    cursor: pointer;
+    height: 3px;
+}
+input[type=range].form-control-range:focus::-ms-fill-lower {
+    background: #bbbbbb;
+}
+input[type=range].form-control-range:focus::-ms-fill-upper {
+    background: #bbbbbb;
+}
+
+
+
+
+input[type=range].form-control-range::-moz-focus-outer {
+    border: 0;
+}
\ No newline at end of file