Fixed problem with settings per site

Author: adokseo

manifest.json

@@ -1,7 +1,7 @@
 {
    "manifest_version": 2,
    "name": "Dark Mode",
-   "version": "2.1.0",
+   "version": "2.1.1",
    "description": "Dark Mode, read at night. Bluelight filter for every website. Relax your eyes at night and day.",
    "default_locale": "en",
    "icons": {

popup.js

@@ -161,6 +161,8 @@ var current_domain,
 									beforerender: function (target) {
 										var item = (current_domain || '...');
 
+										console.log(current_domain);
+
 										target.items = ['global', item];
 
 										if (satus.storage.get('websites/' + current_domain + '/filters/global') === false) {
@@ -1576,6 +1578,8 @@ satus.storage.import(function (items) {
 						variant: 'error'
 					};
 				} else {
+					current_domain = response;
+					
 					skeleton.layers.toolbar = {
 						component: 'switch',
 						class: 'satus-switch--domain',

satus.css

@@ -36,7 +36,7 @@ body {
     --satus-text-field--background: #e8e8e3;
     --satus-text-field--border: #d6d6cd;
     --satus-text-field--text: #848471;
-    --satus-switch-track: #b8b8b8;
+    --satus-switch-track: #e0e0e0;
     --satus-switch-track--active: var(--satus-primary);
     --satus-switch-thumb: #fff;
     --satus-tabs: #fff;
@@ -471,6 +471,11 @@ body[theme=black] {
 	width: 20px;
 	margin: 2px 16px 0 0;
 	color: var(--satus-primary);
+}
+
+.satus-section--card>.satus-span {
+	display: flex;
+	align-items: center;
 }
 /*--------------------------------------------------------------
 # SCROLLBAR
@@ -767,12 +772,12 @@ body[theme=black] {
 --------------------------------------------------------------*/
 
 .satus-switch>i {
-    width: 38px;
-    height: 20px;
+    width: 32px;
+    height: 18px;
     transition: background-color 150ms;
-    border-radius: 20px;
+    border-radius: 18px;
     background-color: var(--satus-switch-track);
-    flex: 0 0 38px;
+    flex: 0 0 32px;
 }
 
 .satus-section--card .satus-switch>i {
@@ -790,8 +795,8 @@ body[theme=black] {
 
 .satus-switch>i::before {
     display: block;
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     margin: 2px;
     content: '';
     transition: transform 150ms cubic-bezier(.4, 0, .2, 1);
@@ -801,7 +806,7 @@ body[theme=black] {
 }
 
 .satus-switch[data-value='true']>i::before {
-    transform: translateX(18px);
+    transform: translateX(14px);
 }
 /*--------------------------------------------------------------
 >>> SLIDER
@@ -1199,7 +1204,7 @@ body[theme=black] {
     padding: 0 12px;
     color: var(--satus-header-text);
     background: var(--satus-header-background);
-    box-shadow: 0 1px 2px rgb(47, 41, 34, .16);
+    box-shadow: 0 0 3px rgb(0, 0, 0, .1);
     align-items: center;
     justify-content: space-between;
 }
@@ -1213,16 +1218,19 @@ body[theme=black] {
     border-radius: 50%;
 }
 
-.satus-header .satus-section--align-start>* {
+.satus-header .satus-section--align-start > * {
     margin-right: 8px;
 }
 
 .satus-header .satus-span--title {
+    font-size: 15px;
     overflow: hidden;
     white-space: nowrap;
+    letter-spacing: .0125em;
     text-overflow: ellipsis;
     flex: 1;
-}
+}
+
 /*--------------------------------------------------------------
 >>> ALERT
 --------------------------------------------------------------*/
@@ -1286,7 +1294,6 @@ body[theme=black] {
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    padding: 0;
     padding: 0 8px;
     color: var(--satus-text-field--text, inherit);
     border: none;
@@ -1295,7 +1302,6 @@ body[theme=black] {
     appearance: none;
     font-size: 16px;
     margin: 8px 0;
-    padding: 4px 8px;
     border: 1px solid var(--satus-text-field--border);
     border-radius: 4px;
     background-color: var(--satus-text-field--background);

satus.js

@@ -146,9 +146,13 @@ satus.class = function (element, string) {
 # EMPTY
 --------------------------------------------------------------*/
 
-satus.empty = function (element) {
+satus.empty = function (element, exclude = []) {
     for (var i = element.childNodes.length - 1; i > -1; i--) {
-        element.childNodes[i].remove();
+        var child = element.childNodes[i];
+
+        if (exclude.indexOf(child) === -1) {
+            child.remove();
+        }
     }
 };
 
@@ -293,6 +297,17 @@ satus.storage.set = function (name, value) {
 };
 
 
+/*--------------------------------------------------------------
+# REMOVE
+--------------------------------------------------------------*/
+
+satus.storage.remove = function (name) {
+    delete this.data[name];
+
+    chrome.storage.local.remove(name);
+};
+
+
 /*--------------------------------------------------------------
 # IMPORT
 --------------------------------------------------------------*/
@@ -1347,6 +1362,7 @@ satus.components.slider = function (skeleton) {
 					component.values[handle_index] = value;
 
 					component.storageValue = component.values.length === 1 ? component.values[0] : component.values;
+					component.value = component.storageValue;
 
 					component.storageChange();
 				}