Final version 1.2.2.8

I hope you all enjoy the new version.

_locales/de/messages.json

@@ -35,7 +35,7 @@
     },
 
     "check_os_log": {
-        "message": "ClearURLs: Protokoll-Listener wurde hinzugefügt.",
+        "message": "[ClearURLs]: Protokoll-Listener wurde hinzugefügt.",
         "description": ""
     },
 
@@ -69,6 +69,11 @@
         "description": ""
     },
 
+    "log_html_reset_button_title": {
+        "message": "Setzt das globale Protokoll zurück",
+        "description": ""
+    },
+
     "popup_html_configs_head": {
         "message": "Einstellungen",
         "description": ""
@@ -85,7 +90,7 @@
     },
 
     "popup_html_configs_switch_log_title": {
-        "message": "Das Protokoll wird nur lokal gespeichert. Wir empfehlen diese Funktion deaktiviert zulassen, wenn Sie sie nicht benötigen.",
+        "message": "Das Protokoll wird nur lokal gespeichert. Wir empfehlen diese Funktion deaktiviert zulassen, wenn Sie sie nicht benötigen",
         "description": ""
     },
 
@@ -110,7 +115,7 @@
     },
 
     "popup_html_statistics_percentage": {
-        "message": "Prozentualer Anteil",
+        "message": "Anteil",
         "description": ""
     },
 
@@ -147,5 +152,55 @@
     "core_error": {
         "message": "[ClearURLs]: Das Addon konnte nicht gestartet werden.",
         "description": ""
+    },
+
+    "configs_switch_statistics": {
+        "message": "Statistiken",
+        "description": ""
+    },
+
+    "configs_switch_statistics_title": {
+        "message": "Aktiviert oder deaktiviert die Statistikfunktion",
+        "description": ""
+    },
+
+    "settings_html_page_title": {
+        "message": "Einstellungen von ClearURLs",
+        "description": ""
+    },
+
+    "badged_color_label": {
+        "message": "Zählerfarbe",
+        "description": ""
+    },
+
+    "setting_html_reset_button": {
+        "message": "Zurücksetzen",
+        "description": ""
+    },
+
+    "setting_html_reset_button_title": {
+        "message": "Setzt alle Einstellungen zurück",
+        "description": ""
+    },
+
+    "setting_rule_url_label": {
+        "message": "Die Url zu der data.json Datei (Regeln)",
+        "description": ""
+    },
+
+    "settings_html_save_button": {
+        "message": "Speichern & Addon neustarten",
+        "description": ""
+    },
+
+    "settings_html_save_button_title": {
+        "message": "Speichert die Einstellungen",
+        "description": ""
+    },
+
+    "setting_hash_url_label": {
+        "message": "Die Url zu der rules.hash Datei (Hash)",
+        "description": ""
     }
 }

_locales/en/messages.json

@@ -35,7 +35,7 @@
     },
 
     "check_os_log": {
-        "message": "ClearURLs: Log listener is added.",
+        "message": "[ClearURLs]: Log listener is added.",
         "description": ""
     },
 
@@ -69,6 +69,11 @@
         "description": ""
     },
 
+    "log_html_reset_button_title": {
+        "message": "Reset the global log",
+        "description": ""
+    },
+
     "popup_html_configs_head": {
         "message": "Configs",
         "description": ""
@@ -85,7 +90,7 @@
     },
 
     "popup_html_configs_switch_log_title": {
-        "message": "The log is saved only locally. We advise against this feature if you do not need it.",
+        "message": "The log is saved only locally. We advise against this feature if you do not need it",
         "description": ""
     },
 
@@ -147,5 +152,55 @@
     "core_error": {
         "message": "[ClearURLs]: The addon could not started.",
         "description": ""
+    },
+
+    "configs_switch_statistics": {
+        "message": "Statistics",
+        "description": ""
+    },
+
+    "configs_switch_statistics_title": {
+        "message": "Activate or deactivate the statistics function",
+        "description": ""
+    },
+
+    "settings_html_page_title": {
+        "message": "Settings from ClearURLs",
+        "description": ""
+    },
+
+    "badged_color_label": {
+        "message": "Badged color",
+        "description": ""
+    },
+
+    "setting_html_reset_button": {
+        "message": "Reset",
+        "description": ""
+    },
+
+    "setting_html_reset_button_title": {
+        "message": "Reset everything",
+        "description": ""
+    },
+
+    "setting_rule_url_label": {
+        "message": "The url to the data.json file (rules)",
+        "description": ""
+    },
+
+    "settings_html_save_button": {
+        "message": "Save & reload addon",
+        "description": ""
+    },
+
+    "settings_html_save_button_title": {
+        "message": "Saves the settings",
+        "description": ""
+    },
+
+    "setting_hash_url_label": {
+        "message": "The url to the rules.hash file (hash)",
+        "description": ""
     }
 }

clearurls.js

@@ -11,8 +11,6 @@ var siteBlockedAlert = 'javascript:void(0)';
 var dataHash;
 var localDataHash;
 var os;
-var rule_url = "https://raw.githubusercontent.com/KevinRoebert/ClearUrls/master/data/data.json?flush_cache=true";
-var hash_url = "https://raw.githubusercontent.com/KevinRoebert/ClearUrls/master/data/rules.hash?flush_cache=true";
 
 var storage = [];
 
@@ -78,13 +76,12 @@ function start(items)
         }
 
         /**
-        * Convert the external data to JSON Objects and
+        * Convert the external data to Objects and
         * call the create provider function.
         *
         * @param  {String} retrievedText - pure data form github
         */
-        function toJSON(retrievedText) {
+        function toObject(retrievedText) {
-            storage.ClearURLsData = JSON.parse(retrievedText);
             getKeys(storage.ClearURLsData.providers);
             createProviders();
         }
@@ -95,7 +92,7 @@ function start(items)
         */
         function loadOldDataFromStore()
         {
-            localDataHash = $.sha256(storage.ClearURLsData);
+            localDataHash = storage.dataHash;
         }
 
         /**
@@ -131,7 +128,7 @@ function start(items)
         function getHash()
         {
             //Get the target hash from github
-            fetch(hash_url)
+            fetch(storage.hashURL)
             .then(function(response){
                 var responseTextHash = response.clone().text().then(function(responseTextHash){
                     if(response.ok)
@@ -143,7 +140,7 @@ function start(items)
                             fetchFromURL();
                         }
                         else {
-                            toJSON(storage.ClearURLsData);
+                            toObject(storage.ClearURLsData);
                             storeHashStatus(1);
                         }
                     }
@@ -159,7 +156,7 @@ function start(items)
         */
         function fetchFromURL()
         {
-            fetch(rule_url)
+            fetch(storage.ruleURL)
             .then(checkResponse);
 
             function checkResponse(response)
@@ -172,12 +169,14 @@ function start(items)
                         if($.trim(downloadedFileHash) === $.trim(dataHash))
                         {
                             storage.ClearURLsData = responseText;
+                            storage.dataHash = downloadedFileHash;
                             storeHashStatus(2);
                         }
                         else {
                             storeHashStatus(3);
                         }
-                        toJSON(storage.ClearURLsData);
+                        storage.ClearURLsData = JSON.parse(storage.ClearURLsData);
+                        toObject(storage.ClearURLsData);
                     }
                 });
             }
@@ -374,7 +373,8 @@ function start(items)
                         {
                             badges[tabid] = 0;
                         }
-                        storage.globalCounter++;
+
+                        increaseURLCounter();
 
                         if(!checkOSAndroid())
                         {
@@ -398,7 +398,7 @@ function start(items)
                         badges[tabid] = 0;
                     }
 
-                    storage.globalCounter++;
+                    increaseURLCounter();
 
                     if(!checkOSAndroid())
                     {
@@ -452,8 +452,7 @@ function start(items)
             var URLbeforeReplaceCount = countFields(request.url);
 
             //Add Fields form Request to global url counter
-
+            increaseGlobalURLCounter(URLbeforeReplaceCount);
-            storage.globalurlcounter += URLbeforeReplaceCount;
 
             if(storage.globalStatus){
 
@@ -531,34 +530,6 @@ function start(items)
             }
         }
 
-        /**
-        * Get the badged status from the browser storage and put the value
-        * into a local variable.
-        *
-        */
-        function setBadgedStatus() {
-            if(!checkOSAndroid() && storage.badgedStatus){
-                browser.browserAction.setBadgeBackgroundColor({
-                    'color': 'orange'
-                });
-            }
-        }
-
-        /**
-        * Check if it is an android device.
-        * @return bool
-        */
-        function checkOSAndroid()
-        {
-            if(os == "android")
-            {
-                return true;
-            }
-            else{
-                return false;
-            }
-        }
-
         /**
         * Call loadOldDataFromStore, getHash, counter, status and log functions
         */
@@ -642,6 +613,71 @@ function start(items)
  */
 setInterval(saveOnExit, 60000);
 
+/**
+* Get the badged status from the browser storage and put the value
+* into a local variable.
+*
+*/
+function setBadgedStatus()
+{
+    if(!checkOSAndroid() && storage.badgedStatus){
+        browser.browserAction.setBadgeBackgroundColor({
+            'color': '#'+storage.badged_color
+        });
+    }
+}
+
+/**
+ * Change the icon.
+ */
+function changeIcon()
+{
+    if(storage.globalStatus){
+        browser.browserAction.setIcon({path: "img/icon128.png"});
+    } else{
+        browser.browserAction.setIcon({path: "img/icon128_g.png"});
+    }
+}
+
+/**
+* Check if it is an android device.
+* @return bool
+*/
+function checkOSAndroid()
+{
+    if(os == "android")
+    {
+        return true;
+    }
+    else{
+        return false;
+    }
+}
+
+/**
+ * Increase by {number} the GlobalURLCounter
+ * @param  {int} number
+ */
+function increaseGlobalURLCounter(number)
+{
+    if(storage.statisticsStatus)
+    {
+        storage.globalurlcounter += number;
+    }
+}
+
+/**
+ * Increase by one the URLCounter
+ */
+function increaseURLCounter()
+{
+    if(storage.statisticsStatus)
+    {
+        storage.globalCounter++;
+    }
+}
+
+
 /**
 * Writes the storage variable to the disk.
 */
@@ -732,8 +768,23 @@ function error()
 * @param  {Object} items
 */
 function initStorage(items)
+{
+    initSettings();
+
+    if(!isEmpty(items)) {
+        Object.entries(items).forEach(([key, value]) => {
+            setData(key, value);
+        });
+    }
+}
+
+/**
+ * Set default values for the settings.
+ */
+function initSettings()
 {
     storage.ClearURLsData = [];
+    storage.dataHash = "";
     storage.badgedStatus = true;
     storage.globalStatus = true;
     storage.globalurlcounter = 0;
@@ -741,12 +792,18 @@ function initStorage(items)
     storage.hashStatus = "error";
     storage.loggingStatus = false;
     storage.log = {"log": []};
+    storage.statisticsStatus = true;
+    storage.badged_color = "ffa500";
+    storage.hashURL = "https://raw.githubusercontent.com/KevinRoebert/ClearUrls/master/data/rules.hash?flush_cache=true";
+    storage.ruleURL = "https://raw.githubusercontent.com/KevinRoebert/ClearUrls/master/data/data.json?flush_cache=true";
+}
 
-    if(!isEmpty(items)) {
+/**
-        Object.entries(items).forEach(([key, value]) => {
+ * Reloads the extension.
-            setData(key, value);
+ */
-        });
+function reload()
-    }
+{
+    browser.runtime.reload();
 }
 
 /**

core_js/log.js

@@ -82,6 +82,7 @@ function setText()
     document.title = translate('log_html_page_title');
     $('#page_title').text(translate('log_html_page_title'));
     $('#reset_log_btn').text(translate('log_html_reset_button'));
+    $('#log_html_reset_button').prop('title', translate('log_html_reset_button_title'));
     $('#head_1').text(translate('log_html_table_head_1'));
     $('#head_2').text(translate('log_html_table_head_2'));
     $('#head_3').text(translate('log_html_table_head_3'));

core_js/popup_new.js

@@ -10,9 +10,10 @@ var globalStatus;
 var badgedStatus;
 var hashStatus;
 var loggingStatus;
+var statisticsStatus;
 
 var core = function (func) {
-        return browser.runtime.getBackgroundPage().then(func);
+    return browser.runtime.getBackgroundPage().then(func);
 };
 
 function getData()
@@ -24,6 +25,7 @@ function getData()
         badgedStatus = ref.getData('badgedStatus');
         hashStatus = ref.getData('hashStatus');
         loggingStatus = ref.getData('loggingStatus');
+        statisticsStatus = ref.getData('statisticsStatus');
     });
 }
 
@@ -33,18 +35,20 @@ function getData()
 */
 function init()
 {
+    setSwitchButton("globalStatus", "globalStatus");
+    setSwitchButton("tabcounter", "badgedStatus");
+    setSwitchButton("logging", "loggingStatus");
+    setSwitchButton("statistics", "statisticsStatus");
     setHashStatus();
-    setGlobalStatus();
     changeStatistics();
-    setTabcounter();
-    setLogging();
 }
 
 /**
 * Get the globalCounter value from the browser storage
 * @param  {(data){}    Return value form browser.storage.local.get
 */
-function changeStatistics(){
+function changeStatistics()
+{
     globalPercentage = ((globalCounter/globalurlcounter)*100).toFixed(3);
 
     if(isNaN(Number(globalPercentage))) globalPercentage = 0;
@@ -57,64 +61,8 @@ function changeStatistics(){
 }
 
 /**
-* Change the value of the globalStatus.
+* Set the value for the hashStatus on startUp.
-* Call by onChange()
-*
 */
-function changeGlobalStatus() {
-    var element = $('#globalStatus').is(':checked');
-
-    core(function (ref){
-        ref.setData('globalStatus', element);
-        ref.saveOnExit();
-    });
-}
-
-/**
-* Set the values for the global status switch
-*/
-function setGlobalStatus() {
-    var element = $('#globalStatus');
-    element.prop('checked', globalStatus);
-}
-
-/**
-* Change the value of the badgedStatus.
-* Call by onChange()
-*
-*/
-function changeTabcounter() {
-    var element = $('#tabcounter').is(':checked');
-
-    core(function (ref){
-        ref.setData('badgedStatus', element);
-        ref.saveOnExit();
-    });
-}
-
-/**
-* Set the values for the tabcounter switch
-*/
-function setTabcounter() {
-    var element = $('#tabcounter');
-    element.prop('checked', badgedStatus);
-}
-
-/**
-* Change the value of the logging switch
-*/
-function changeLogging()
-{
-    var element = $('#logging').is(':checked');
-    core(function (ref){
-        ref.setData('loggingStatus', element);
-        ref.saveOnExit();
-    });
-}
-
-/**
- * Set the value for the hashStatus on startUp.
- */
 function setHashStatus()
 {
     var element = $('#hashStatus');
@@ -130,12 +78,33 @@ function setHashStatus()
 }
 
 /**
-* Set the value for the logging switch
+* Change the value of a switch button.
+* @param  {string} id        HTML id
+* @param  {string} storageID storage internal id
 */
-function setLogging()
+function changeSwitchButton(id, storageID)
 {
-    var element = $('#logging');
+    var element = $('#'+id);
-    element.prop('checked', loggingStatus);
+
+    element.on('change', function(){
+        core(function (ref){
+            ref.setData(storageID, element.is(':checked'));
+            if(storageID == "globalStatus") ref.changeIcon();
+
+            ref.saveOnExit();
+        });
+    });
+}
+
+/**
+ * Set the value of a switch button.
+ * @param {string} id      HTML id
+ * @param {string} varname js internal variable name
+ */
+function setSwitchButton(id, varname)
+{
+    var element = $('#'+id);
+    element.prop('checked', this[varname]);
 }
 
 /**
@@ -147,26 +116,28 @@ function resetGlobalCounter(){
         globalCounter = 0;
         ref.setData('globalCounter', 0);
         ref.setData('globalurlcounter', 0);
+        ref.saveOnExit();
+
+        changeStatistics();
     });
 }
 
 getData();
 $(document).ready(function(){
     init();
-    $("#globalStatus").on("change", changeGlobalStatus);
     $('#reset_counter_btn').on("click", resetGlobalCounter);
-    $('#tabcounter').on('change', changeTabcounter);
+    changeSwitchButton("globalStatus", "globalStatus");
-    $('#logging').on('change', changeLogging);
+    changeSwitchButton("tabcounter", "badgedStatus");
+    changeSwitchButton("logging", "loggingStatus");
+    changeSwitchButton("statistics", "statisticsStatus");
     $('#loggingPage').attr('href', browser.extension.getURL('./html/log.html'));
-
+    $('#settings').attr('href', browser.extension.getURL('./html/settings.html'));
     setText();
-
-    browser.storage.onChanged.addListener(changeStatistics);
 });
 
 /**
- * Set the text for the UI.
+* Set the text for the UI.
- */
+*/
 function setText()
 {
     $('#loggingPage').text(translate('popup_html_log_head'));
@@ -183,6 +154,8 @@ function setText()
     $('#configs_switch_log').prop('title', translate('popup_html_configs_switch_log_title'));
     $('#configs_switch_filter').text(translate('popup_html_configs_switch_filter'));
     $('#configs_head').text(translate('popup_html_configs_head'));
+    $('#configs_switch_statistics').text(translate('configs_switch_statistics'));
+    $('#configs_switch_statistics').prop('title', translate('configs_switch_statistics_title'));
 }
 
 /**

core_js/settings.js

@@ -0,0 +1,96 @@
+var settings = [];
+
+var core = function (func) {
+        return browser.runtime.getBackgroundPage().then(func);
+};
+
+getData();
+
+/**
+* Load only when document is ready
+*/
+$(document).ready(function(){
+    setText();
+    $(".pick-a-color").pickAColor();
+    $('#reset_settings_btn').on("click", reset);
+    $('#save_settings_btn').on("click", save);
+
+    $("#badged_color input").on("change", function () {
+        settings.badged_color = $(this).val();
+        core(function (ref){
+            ref.setData('badged_color', settings.badged_color);
+            ref.setBadgedStatus();
+            ref.saveOnExit();
+        });
+    });
+});
+
+/**
+ * Reset everything.
+ * Set everthing to the default values.
+ */
+function reset()
+{
+    core(function (ref){
+        ref.initSettings();
+        ref.saveOnExit();
+        ref.reload();
+    });
+}
+
+/**
+ * Saves the settings.
+ */
+function save()
+{
+
+    core(function (ref){
+        ref.setData('ruleURL', $('input[name=rule_url]').val());
+        ref.setData('hashURL', $('input[name=hash_url]').val());
+        ref.saveOnExit();
+        ref.reload();
+    });
+
+    location.reload();
+}
+
+/**
+* Translate a string with the i18n API.
+*
+* @param {string} string Name of the attribute used for localization
+*/
+function translate(string)
+{
+    return browser.i18n.getMessage(string);
+}
+
+/**
+ * Get the data.
+ */
+function getData()
+{
+    core(function (ref){
+        settings.badged_color = ref.getData('badged_color');
+        settings.rule_url = ref.getData('ruleURL');
+        settings.hash_url = ref.getData('hashURL');
+    });
+}
+
+/**
+ * Set the text for the UI.
+ */
+function setText()
+{
+    document.title = translate('settings_html_page_title');
+    $('#page_title').text(translate('settings_html_page_title'));
+    $('#badged_color_label').text(translate('badged_color_label'));
+    $('input[name=badged_color]').val(settings.badged_color);
+    $('#reset_settings_btn').text(translate('setting_html_reset_button'));
+    $('#reset_settings_btn').prop('title', translate('setting_html_reset_button_title'));
+    $('#rule_url_label').text(translate('setting_rule_url_label'));
+    $('input[name=rule_url]').val(settings.rule_url);
+    $('#hash_url_label').text(translate('setting_hash_url_label'));
+    $('input[name=hash_url]').val(settings.hash_url);
+    $('#save_settings_btn').text(translate('settings_html_save_button'));
+    $('#save_settings_btn').prop('title', translate('settings_html_save_button_title'));
+}

css/pick-a-color-1.2.3.min.css

@@ -0,0 +1,86 @@
+
+.pick-a-color-markup *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+.pick-a-color-markup .hex-pound{padding-left:8px;padding-right:8px}@media screen and (max-width:991px){.pick-a-color-markup .hex-pound{padding:3px 5px 0px 5px;min-height:30px}}
+.pick-a-color-markup .pick-a-color{padding:5px}@media screen and (max-width:991px){.pick-a-color-markup .pick-a-color{width:100%;font-size:18px;padding:9px;min-width:222px;height:47px}}
+.pick-a-color-markup .input-group-btn .color-dropdown{padding:6px 5px}.pick-a-color-markup .input-group-btn .color-dropdown.no-hex{border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .input-group-btn .color-dropdown:focus{background-color:#fff}
+@media screen and (max-width:991px){.pick-a-color-markup .input-group-btn .color-dropdown{height:47px}}
+.pick-a-color-markup .color-preview{border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 0 2px 2px rgba(0,0,0,0.075);box-shadow:inset 0 0 2px 2px rgba(0,0,0,0.075);height:1.429em;width:1.429em;display:inline-block;cursor:pointer;margin-right:5px}.pick-a-color-markup .color-preview.current-color{margin-bottom:-5px}
+@media screen and (max-width:991px){.pick-a-color-markup .color-preview{height:1.875em;width:1.875em}}
+.pick-a-color-markup .color-menu{text-align:left;padding:5px 0px;width:330px;font-size:14px;left:auto;}.pick-a-color-markup .color-menu.color-menu--inline{left:-285px}@media screen and (max-width:991px){.pick-a-color-markup .color-menu.color-menu--inline{left:-242px}}
+@media screen and (max-width:991px){.pick-a-color-markup .color-menu{left:-242px;width:293px}}.pick-a-color-markup .color-menu.small{width:100px}@media screen and (max-width:991px){.pick-a-color-markup .color-menu.small{left:-105px}}
+.pick-a-color-markup .color-menu.no-hex{left:0px}
+.pick-a-color-markup .color-menu ul{padding:0px;margin:0px}
+.pick-a-color-markup .color-menu li{list-style-type:none;padding:5px 0px;margin:0px}
+.pick-a-color-markup .color-menu .color-preview{vertical-align:middle;margin:0px}@media screen and (max-width:991px){.pick-a-color-markup .color-menu .color-preview{height:35px;width:35px}}.pick-a-color-markup .color-menu .color-preview.current-color,.pick-a-color-markup .color-menu .color-preview.white{background-color:#fff}
+.pick-a-color-markup .color-menu .color-preview.red{background-color:#f00}
+.pick-a-color-markup .color-menu .color-preview.orange{background-color:#f60}
+.pick-a-color-markup .color-menu .color-preview.yellow{background-color:#ff0}
+.pick-a-color-markup .color-menu .color-preview.green{background-color:#008000}
+.pick-a-color-markup .color-menu .color-preview.blue{background-color:#00f}
+.pick-a-color-markup .color-menu .color-preview.indigo{background-color:#4a0080}
+.pick-a-color-markup .color-menu .color-preview.violet{background-color:#ee81ee}
+.pick-a-color-markup .color-menu .color-preview.purple{background-color:#80007f}
+.pick-a-color-markup .color-menu .color-preview.black{background-color:#000}
+.pick-a-color-markup .color-menu .basicColors-content li>a,.pick-a-color-markup .color-menu .savedColors-content li>a{padding:5px 15px 3px 15px;cursor:default;min-height:25px;color:#333}.pick-a-color-markup .color-menu .basicColors-content li>a:hover,.pick-a-color-markup .color-menu .savedColors-content li>a:hover{background-color:#fff}
+@media screen and (max-width:991px){.pick-a-color-markup .color-menu .basicColors-content li>a,.pick-a-color-markup .color-menu .savedColors-content li>a{min-height:40px}}
+.pick-a-color-markup .color-menu .basicColors-content li:hover a,.pick-a-color-markup .color-menu .savedColors-content li:hover a{color:#333;background-image:none;filter:none;text-decoration:none;font-weight:bold}@media screen and (max-width:991px){.pick-a-color-markup .color-menu .basicColors-content li:hover a,.pick-a-color-markup .color-menu .savedColors-content li:hover a{background-color:#fff;font-weight:normal}}
+.pick-a-color-markup .color-menu .btn.color-select{margin:0px 5px;height:20px;padding:0px 5px;margin-top:0px;line-height:1.5px;border-radius:4px}@media screen and (max-width:991px){.pick-a-color-markup .color-menu .btn.color-select{height:35px}}
+.pick-a-color-markup .caret{margin-bottom:3px}
+.pick-a-color-markup .color-menu-instructions,.pick-a-color-markup .advanced-instructions{text-align:center;padding:0px 6px;margin:0px;font-size:14px;font-weight:normal}@media screen and (min-width:992px){.pick-a-color-markup .color-menu-instructions,.pick-a-color-markup .advanced-instructions{display:none}}
+.pick-a-color-markup .color-label{vertical-align:middle;margin:0px;margin-left:10px;cursor:pointer}@media screen and (max-width:991px){.pick-a-color-markup .color-label{margin-left:8px}}
+.pick-a-color-markup .color-box{height:20px;width:200px;position:absolute;left:115px;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 0 2px 2px rgba(0,0,0,0.075);box-shadow:inset 0 0 2px 2px rgba(0,0,0,0.075);cursor:pointer}@media screen and (max-width:991px){.pick-a-color-markup .color-box{width:160px;height:35px}}
+.pick-a-color-markup .black .highlight-band-stripe{background-color:#fff}
+.pick-a-color-markup .spectrum-white{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#fff), to(#808080));background-image:-webkit-linear-gradient(left, color-stop(#fff 0), color-stop(#808080 100%));background-image:-moz-linear-gradient(left, #fff 0, #808080 100%);background-image:linear-gradient(to right, #fff 0, #808080 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff808080', GradientType=1)}.pick-a-color-markup .spectrum-white .highlight-band{left:0px}
+.pick-a-color-markup .spectrum-red{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(.5, #f00), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #fff 0, #f00 50%, #000 100%);background-image:-webkit-linear-gradient(left, #fff 0, #f00 50%, #000 100%);background-image:-o-linear-gradient(left, #fff 0, #f00 50%, #000 100%);background-image:linear-gradient(to right, #fff 0, #f00 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .spectrum-orange{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(.5, #f60), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #fff 0, #f60 50%, #000 100%);background-image:-webkit-linear-gradient(left, #fff 0, #f60 50%, #000 100%);background-image:-o-linear-gradient(left, #fff 0, #f60 50%, #000 100%);background-image:linear-gradient(to right, #fff 0, #f60 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .spectrum-yellow{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(.5, #ff0), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #fff 0, #ff0 50%, #000 100%);background-image:-webkit-linear-gradient(left, #fff 0, #ff0 50%, #000 100%);background-image:-o-linear-gradient(left, #fff 0, #ff0 50%, #000 100%);background-image:linear-gradient(to right, #fff 0, #ff0 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .spectrum-green{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #80ff80), color-stop(.5, #008000), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #80ff80 0, #008000 50%, #000 100%);background-image:-webkit-linear-gradient(left, #80ff80 0, #008000 50%, #000 100%);background-image:-o-linear-gradient(left, #80ff80 0, #008000 50%, #000 100%);background-image:linear-gradient(to right, #80ff80 0, #008000 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .spectrum-blue{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(.5, #00f), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #fff 0, #00f 50%, #000 100%);background-image:-webkit-linear-gradient(left, #fff 0, #00f 50%, #000 100%);background-image:-o-linear-gradient(left, #fff 0, #00f 50%, #000 100%);background-image:linear-gradient(to right, #fff 0, #00f 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .spectrum-purple{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #ff80ff), color-stop(.5, #80007f), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #ff80ff 0, #80007f 50%, #000 100%);background-image:-webkit-linear-gradient(left, #ff80ff 0, #80007f 50%, #000 100%);background-image:-o-linear-gradient(left, #ff80ff 0, #80007f 50%, #000 100%);background-image:linear-gradient(to right, #ff80ff 0, #80007f 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .spectrum-black{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#000), to(#808080));background-image:-webkit-linear-gradient(left, color-stop(#000 0), color-stop(#808080 100%));background-image:-moz-linear-gradient(left, #000 0, #808080 100%);background-image:linear-gradient(to right, #000 0, #808080 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ff808080', GradientType=1)}.pick-a-color-markup .spectrum-black .highlight-band{left:0px;border:1px solid #808080}
+.pick-a-color-markup .ie-spectrum{height:20px;width:100px;display:inline-block;top:-1}.pick-a-color-markup .ie-spectrum.hue{width:50.5px}@media screen and (max-width:991px){.pick-a-color-markup .ie-spectrum.hue{width:45.5px}}
+@media screen and (max-width:991px){.pick-a-color-markup .ie-spectrum{width:80px;height:35px}}
+.pick-a-color-markup .red-spectrum-0,.pick-a-color-markup .lightness-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#fff), to(#f00));background-image:-webkit-linear-gradient(left, color-stop(#fff 0), color-stop(#f00 100%));background-image:-moz-linear-gradient(left, #fff 0, #f00 100%);background-image:linear-gradient(to right, #fff 0, #f00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffff0000', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .red-spectrum-1,.pick-a-color-markup .lightness-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#f00), to(#000));background-image:-webkit-linear-gradient(left, color-stop(#f00 0), color-stop(#000 100%));background-image:-moz-linear-gradient(left, #f00 0, #000 100%);background-image:linear-gradient(to right, #f00 0, #000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff0000', endColorstr='#ff000000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px}
+.pick-a-color-markup .lightness-spectrum-0,.pick-a-color-markup .lightness-spectrum-1{width:150px}@media screen and (max-width:991px){.pick-a-color-markup .lightness-spectrum-0,.pick-a-color-markup .lightness-spectrum-1{width:135px}}
+.pick-a-color-markup .orange-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#fff), to(#f60));background-image:-webkit-linear-gradient(left, color-stop(#fff 0), color-stop(#f60 100%));background-image:-moz-linear-gradient(left, #fff 0, #f60 100%);background-image:linear-gradient(to right, #fff 0, #f60 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffff6600', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .orange-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#f60), to(#000));background-image:-webkit-linear-gradient(left, color-stop(#f60 0), color-stop(#000 100%));background-image:-moz-linear-gradient(left, #f60 0, #000 100%);background-image:linear-gradient(to right, #f60 0, #000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff6600', endColorstr='#ff000000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px}
+.pick-a-color-markup .yellow-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#fff), to(#ff0));background-image:-webkit-linear-gradient(left, color-stop(#fff 0), color-stop(#ff0 100%));background-image:-moz-linear-gradient(left, #fff 0, #ff0 100%);background-image:linear-gradient(to right, #fff 0, #ff0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffff00', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .yellow-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#ff0), to(#000));background-image:-webkit-linear-gradient(left, color-stop(#ff0 0), color-stop(#000 100%));background-image:-moz-linear-gradient(left, #ff0 0, #000 100%);background-image:linear-gradient(to right, #ff0 0, #000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ff000000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px}
+.pick-a-color-markup .green-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#80ff80), to(#008000));background-image:-webkit-linear-gradient(left, color-stop(#80ff80 0), color-stop(#008000 100%));background-image:-moz-linear-gradient(left, #80ff80 0, #008000 100%);background-image:linear-gradient(to right, #80ff80 0, #008000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff80ff80', endColorstr='#ff008000', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .green-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#008000), to(#000));background-image:-webkit-linear-gradient(left, color-stop(#008000 0), color-stop(#000 100%));background-image:-moz-linear-gradient(left, #008000 0, #000 100%);background-image:linear-gradient(to right, #008000 0, #000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008000', endColorstr='#ff000000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px}
+.pick-a-color-markup .blue-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#fff), to(#00f));background-image:-webkit-linear-gradient(left, color-stop(#fff 0), color-stop(#00f 100%));background-image:-moz-linear-gradient(left, #fff 0, #00f 100%);background-image:linear-gradient(to right, #fff 0, #00f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff0000ff', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .blue-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#00f), to(#000));background-image:-webkit-linear-gradient(left, color-stop(#00f 0), color-stop(#000 100%));background-image:-moz-linear-gradient(left, #00f 0, #000 100%);background-image:linear-gradient(to right, #00f 0, #000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000ff', endColorstr='#ff000000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px}
+.pick-a-color-markup .purple-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#ff80ff), to(#80007f));background-image:-webkit-linear-gradient(left, color-stop(#ff80ff 0), color-stop(#80007f 100%));background-image:-moz-linear-gradient(left, #ff80ff 0, #80007f 100%);background-image:linear-gradient(to right, #ff80ff 0, #80007f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff80ff', endColorstr='#ff80007f', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .purple-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#80007f), to(#000));background-image:-webkit-linear-gradient(left, color-stop(#80007f 0), color-stop(#000 100%));background-image:-moz-linear-gradient(left, #80007f 0, #000 100%);background-image:linear-gradient(to right, #80007f 0, #000 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff80007f', endColorstr='#ff000000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px}
+.pick-a-color-markup .saturation-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#808080), to(#bf4040));background-image:-webkit-linear-gradient(left, color-stop(#808080 0), color-stop(#bf4040 100%));background-image:-moz-linear-gradient(left, #808080 0, #bf4040 100%);background-image:linear-gradient(to right, #808080 0, #bf4040 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff808080', endColorstr='#ffbf4040', GradientType=1);border-bottom-left-radius:4px;border-top-left-radius:4px;width:150px}@media screen and (max-width:991px){.pick-a-color-markup .saturation-spectrum-0{width:135px}}
+.pick-a-color-markup .saturation-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#bf4040), to(#f00));background-image:-webkit-linear-gradient(left, color-stop(#bf4040 0), color-stop(#f00 100%));background-image:-moz-linear-gradient(left, #bf4040 0, #f00 100%);background-image:linear-gradient(to right, #bf4040 0, #f00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbf4040', endColorstr='#ffff0000', GradientType=1);border-bottom-right-radius:4px;border-top-right-radius:4px;width:150px}@media screen and (max-width:991px){.pick-a-color-markup .saturation-spectrum-1{width:135px}}
+.pick-a-color-markup .hue-spectrum-0{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#f00), to(#ff0));background-image:-webkit-linear-gradient(left, color-stop(#f00 0), color-stop(#ff0 100%));background-image:-moz-linear-gradient(left, #f00 0, #ff0 100%);background-image:linear-gradient(to right, #f00 0, #ff0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff0000', endColorstr='#ffffff00', GradientType=1)}
+.pick-a-color-markup .hue-spectrum-1{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#ff0), to(#0f0));background-image:-webkit-linear-gradient(left, color-stop(#ff0 0), color-stop(#0f0 100%));background-image:-moz-linear-gradient(left, #ff0 0, #0f0 100%);background-image:linear-gradient(to right, #ff0 0, #0f0 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ff00ff00', GradientType=1)}
+.pick-a-color-markup .hue-spectrum-2{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#0f0), to(#0ff));background-image:-webkit-linear-gradient(left, color-stop(#0f0 0), color-stop(#0ff 100%));background-image:-moz-linear-gradient(left, #0f0 0, #0ff 100%);background-image:linear-gradient(to right, #0f0 0, #0ff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff00', endColorstr='#ff00ffff', GradientType=1);left:-1px;position:relative}
+.pick-a-color-markup .hue-spectrum-3{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#0ff), to(#00f));background-image:-webkit-linear-gradient(left, color-stop(#0ff 0), color-stop(#00f 100%));background-image:-moz-linear-gradient(left, #0ff 0, #00f 100%);background-image:linear-gradient(to right, #0ff 0, #00f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ffff', endColorstr='#ff0000ff', GradientType=1);left:-1px;position:relative}
+.pick-a-color-markup .hue-spectrum-4{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#00f), to(#f0f));background-image:-webkit-linear-gradient(left, color-stop(#00f 0), color-stop(#f0f 100%));background-image:-moz-linear-gradient(left, #00f 0, #f0f 100%);background-image:linear-gradient(to right, #00f 0, #f0f 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000ff', endColorstr='#ffff00ff', GradientType=1);left:-1px;position:relative}
+.pick-a-color-markup .hue-spectrum-5{background-image:-webkit-gradient(linear, 0 top, 100% top, from(#f0f), to(#f00));background-image:-webkit-linear-gradient(left, color-stop(#f0f 0), color-stop(#f00 100%));background-image:-moz-linear-gradient(left, #f0f 0, #f00 100%);background-image:linear-gradient(to right, #f0f 0, #f00 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00ff', endColorstr='#ffff0000', GradientType=1);left:-2px;position:relative}
+.pick-a-color-markup .highlight-band{border:1px solid #222;border-radius:2px;-webkit-box-shadow:1px 1px 1px #333;box-shadow:1px 1px 1px #333;height:19px;width:11px;display:inline-block;cursor:pointer;cursor:-webkit-grab;cursor:-moz-grab;position:absolute;top:-1px;left:94.5px;text-align:center}@media screen and (max-width:991px){.pick-a-color-markup .highlight-band{width:21px;left:69.5px;height:34px}}
+.pick-a-color-markup .highlight-band-stripe{min-height:80%;min-width:1px;background-color:#000;opacity:0.40;margin:2px 1px;display:inline-block;-webkit-box-shadow:1px 0 2px 0 #fff;box-shadow:1px 0 2px 0 #fff}@media screen and (max-width:991px){.pick-a-color-markup .highlight-band-stripe{margin:4px 2px}}
+.pick-a-color-markup .color-menu-tabs{padding:5px 3px 3px 10px;font-size:12px;color:#333;border-bottom:1px solid #ccc;margin-bottom:5px}.pick-a-color-markup .color-menu-tabs .tab{padding:4px 5px;margin:5px;border-left:1px solid #fff;border-right:1px solid #fff;cursor:pointer;background-color:#fff}.pick-a-color-markup .color-menu-tabs .tab:hover{padding-bottom:6px;border-top:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;border-top-right-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .color-menu-tabs a{color:#333;text-decoration:none}
+.pick-a-color-markup .color-menu-tabs .tab-active{border-bottom:3px solid #fff;padding-bottom:5px;border-top:1px solid #ccc;border-right:1px solid #ccc;border-left:1px solid #ccc;border-top-right-radius:4px;border-top-left-radius:4px}
+.pick-a-color-markup .active-content{display:block}
+.pick-a-color-markup .inactive-content{display:none}
+.pick-a-color-markup .savedColors-content{padding:5px 15px;white-space:normal}.pick-a-color-markup .savedColors-content li.color-item>a{margin-left:7px;padding-left:8px;border-radius:4px}
+.pick-a-color-markup .saved-color-col{position:relative;left:-15px;float:left;width:149px}@media screen and (max-width:991px){.pick-a-color-markup .saved-color-col{width:130px}}
+.pick-a-color-markup .advanced-content ul{margin-top:10px}
+.pick-a-color-markup .advanced-content li{padding:5px 15px 3px 15px;cursor:default;min-height:25px;height:50px;position:relative}@media screen and (max-width:991px){.pick-a-color-markup .advanced-content li{min-height:70px}}
+.pick-a-color-markup .advanced-content .color-preview{height:50px;width:300px;float:left;margin:0px 0px 10px 0px;background-color:#f00;text-align:center}.pick-a-color-markup .advanced-content .color-preview .color-select.btn.advanced{margin-top:15px;display:none}@media screen and (max-width:991px){.pick-a-color-markup .advanced-content .color-preview .color-select.btn.advanced{display:inline;margin-top:7px}}
+.pick-a-color-markup .advanced-content .color-preview:hover .color-select.btn.advanced{display:inline}
+@media screen and (max-width:991px){.pick-a-color-markup .advanced-content .color-preview{width:270px;margin-left:-10px}}
+.pick-a-color-markup .advanced-content .spectrum-hue{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(17%, #ff0), color-stop(34%, #0f0), color-stop(51%, #0ff), color-stop(68%, #00f), color-stop(85%, #f0f), color-stop(100%, #f00));background-image:-moz-linear-gradient(left center, #f00 0, #ff0 17%, #0f0 24%, #0ff 51%, #00f 68%, #f0f 85%, #f00 100%);background-image:-webkit-linear-gradient(left, #f00 0, #ff0 17%, #0f0 24%, #0ff 51%, #00f 68%, #f0f 85%, #f00 100%);background-image:-o-linear-gradient(left, #f00 0, #ff0 17%, #0f0 24%, #0ff 51%, #00f 68%, #f0f 85%, #f00 100%);background-image:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 24%, #0ff 51%, #00f 68%, #f0f 85%, #f00 100%);background-repeat:repeat-x}.pick-a-color-markup .advanced-content .spectrum-hue .highlight-band{left:0px}
+.pick-a-color-markup .advanced-content .spectrum-lightness{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #fff), color-stop(.5, #f00), color-stop(1, #000));background-image:-moz-linear-gradient(left center, #fff 0, #f00 50%, #000 100%);background-image:-webkit-linear-gradient(left, #fff 0, #f00 50%, #000 100%);background-image:-o-linear-gradient(left, #fff 0, #f00 50%, #000 100%);background-image:linear-gradient(to right, #fff 0, #f00 50%, #000 100%);background-repeat:repeat-x}
+.pick-a-color-markup .advanced-content .spectrum-saturation{background-image:-webkit-gradient(linear, left top, right top, color-stop(0, #808080), color-stop(.5, #f00), color-stop(1, #f00));background-image:-moz-linear-gradient(left center, #808080 0, #f00 50%, #f00 100%);background-image:-webkit-linear-gradient(left, #808080 0, #f00 50%, #f00 100%);background-image:-o-linear-gradient(left, #808080 0, #f00 50%, #f00 100%);background-image:linear-gradient(to right, #808080 0, #f00 50%, #f00 100%);background-repeat:repeat-x}.pick-a-color-markup .advanced-content .spectrum-saturation .highlight-band{left:287px}@media screen and (max-width:991px){.pick-a-color-markup .advanced-content .spectrum-saturation .highlight-band{left:247px}}
+.pick-a-color-markup .advanced-content .spectrum-lightness .highlight-band{left:143.5px}@media screen and (max-width:991px){.pick-a-color-markup .advanced-content .spectrum-lightness .highlight-band{left:123.5px}}
+.pick-a-color-markup .advanced-content .lightness-text,.pick-a-color-markup .advanced-content .hue-text,.pick-a-color-markup .advanced-content .saturation-text,.pick-a-color-markup .advanced-content .preview-text{vertical-align:middle;text-align:center;display:block}
+.pick-a-color-markup .advanced-content .color-box{left:15px;top:25px;width:300px}@media screen and (max-width:991px){.pick-a-color-markup .advanced-content .color-box{width:270px;left:10px}}
+.pick-a-color-markup .advanced-content .preview-item{height:80px}
+@-moz-document url-prefix(){@media screen and (max-width:991px){div.pick-a-color-markup .color-menu{left:0px}}}

html/popup.html

@@ -34,6 +34,7 @@
 
         <div class="row">
             <div class="col-sm-1">
+                <a id="settings" target="_blank"><span class="pull-right glyphicon glyphicon-cog"></span></a>
                 <h5><b id="configs_head"></b></h5>
                 <label class="switch">
                     <input type="checkbox" id="globalStatus">
@@ -52,6 +53,12 @@
                     <span class="slider round"></span>
                     <label id="configs_switch_badges"></label>
                 </label>
+                <br>
+                <label class="switch">
+                    <input type="checkbox" id="statistics">
+                    <span class="slider round"></span>
+                    <label id="configs_switch_statistics"></label>
+                </label>
                 <div class="clearfix"></div>
                 <br />
             </div>

html/settings.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Settings from ClearURLs</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/core.css">
+    <link rel="stylesheet" href="../css/pick-a-color-1.2.3.min.css">
+    <style>
+    td {
+        word-wrap: break-word;
+        max-width: 200px;
+    }
+    </style>
+</head>
+<body>
+
+    <nav class="navbar navbar-inverse">
+        <div class="container">
+            <div class="navbar-header">
+                <span class="navbar-brand">
+                    <span class="pull-left"><img src="../img/icon38.png"
+                        width="30" height="30" alt=""></span>
+                    <span style="color: #FF7800;" class="pull-right" id="page_title"></span><br />
+                    <span class="label label-warning pull-left small-version"
+                    id="version"></span>
+                </span>
+            </div>
+        </div>
+    </nav>
+
+    <div class="row">
+        <div class="col-md-4 col-md-offset-4">
+            <p class="text-center">
+                <button type="button" id="reset_settings_btn"
+                class="btn btn-danger" title="Reset everything settings"></button>
+            </p>
+            <br />
+            <p>
+                <label id="badged_color_label"></label><br />
+                <input type="text" id="badged_color" value="" name="badged_color" class="pick-a-color form-control">
+            </p>
+            <br />
+            <p>
+                <label id="rule_url_label"></label><br />
+                <input type="url" id="rule_url" value="" name="rule_url" class="form-control" />
+            </p>
+            <br />
+            <p>
+                <label id="hash_url_label"></label><br />
+                <input type="url" id="hash_url" value="" name="hash_url" class="form-control" />
+            </p>
+            <br />
+            <p class="text-center">
+                <button type="button" id="save_settings_btn"
+                class="btn btn-success" title="Save the settings"></button>
+            </p>
+        </div>
+    </div>
+
+    <!-- Optional JavaScript -->
+    <script src="../external_js/jquery-3.2.1.min.js"></script>
+    <script src="../external_js/bootstrap.min.js"></script>
+    <script src="../external_js/tinycolor-0.9.15.min.js"></script>
+    <script src="../external_js/pick-a-color-1.2.3.min.js"></script>
+    <script src="../core_js/settings.js"></script>
+    <script src="../core_js/write_version.js"></script>
+</body>
+</html>

manifest.json

@@ -1,42 +1,48 @@
 {
-  "manifest_version": 2,
+    "manifest_version": 2,
-  "name": "ClearURLs",
+    "name": "ClearURLs",
-  "version": "1.2.2.0",
+    "version": "1.2.2.8",
-  "author": "Kevin R.",
+    "author": "Kevin R.",
-  "description": "Remove tracking elements form URLs.",
+    "description": "Remove tracking elements form URLs.",
-  "homepage_url": "https://github.com/KevinRoebert/ClearUrls",
+    "homepage_url": "https://github.com/KevinRoebert/ClearUrls",
-  "icons": {
+    "default_locale": "en",
-    "32": "img/icon32.png",
+    "applications": {
-    "48": "img/icon48.png",
+        "gecko": {
-    "64": "img/icon64.png",
+            "id":   "{74145f27-f039-47ce-a470-a662b129930a}"
-    "96": "img/icon96.png"
+        }
-  },
-  "browser_action": {
-    "browser_style": true,
-    "default_icon": {
-      "19": "img/icon19.png",
-      "38": "img/icon38.png"
     },
-    "default_title": "ClearURLs Add-on",
+    "icons": {
-    "default_popup": "html/popup.html"
+        "32": "img/icon32.png",
-  },
+        "48": "img/icon48.png",
-  "permissions": [
+        "64": "img/icon64.png",
-    "*://*/*",
+        "96": "img/icon96.png"
-    "webRequest",
+    },
-    "webRequestBlocking",
+    "browser_action": {
-    "storage",
+        "browser_style": true,
-    "tabs"
+        "default_icon": {
-  ],
+            "19": "img/icon19.png",
-  "background": {
+            "38": "img/icon38.png"
-    "scripts": [
+        },
-      "external_js/jquery-3.2.1.min.js",
+        "default_title": "ClearURLs Add-on",
-      "external_js/sha256.jquery.js",
+        "default_popup": "html/popup.html"
-      "clearurls.js"
+    },
+    "permissions": [
+        "*://*/*",
+        "webRequest",
+        "webRequestBlocking",
+        "storage",
+        "tabs"
+    ],
+    "background": {
+        "scripts": [
+            "external_js/jquery-3.2.1.min.js",
+            "external_js/sha256.jquery.js",
+            "clearurls.js"
+        ]
+    },
+    "content_scripts": [
+        {
+            "matches": ["<all_urls>"]
+        }
     ]
-  },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"]
-    }
-  ]
 }