From eb1cd50ebbb78d74a326d7ccc63403c5bc25ff9a Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Sat, 16 Sep 2017 16:56:03 +0530
Subject: [PATCH] refactor code for light version mode. fixes #172

---
 src/index.html | 8 ++++----
 src/script.js  | 8 ++++----
 src/style.css  | 3 ++-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/index.html b/src/index.html
index db4c0fe..bcda82d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -460,7 +460,7 @@
 							</label>
 						</div>
 					</div>
-          <div class="ml-2">
+          			<div class="ml-2">
 						<label class="line" title="Your Preview will refresh when you resize the preview split">
 							<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
 						</label>
@@ -482,9 +482,9 @@
 						<label class="line" title="Preserves the console logs across your preview refreshes">
 							<input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
 						</label>
-            <label class="line">
-						  <input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Toggle fast/light version (needs restart)
-					  </label>
+            			<label class="line" title="Switch to lighter version for better performance. Removes things like blur etc.">
+						  <input type="checkbox" d-change="updateSetting" data-setting="lightVersion"> Fast/light version (needs refresh)
+						</label>
 					</div>
 				</div>
         
diff --git a/src/script.js b/src/script.js
index 71de9b1..ab8ae4f 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1619,10 +1619,6 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 		$('[data-setting=autoComplete]').checked = prefs.autoComplete;
 		$('[data-setting=preserveConsoleLogs]').checked = prefs.preserveConsoleLogs;
 		$('[data-setting=lightVersion]').checked = prefs.lightVersion;
-
-		if (!prefs.lightVersion) {
-			document.body.classList.add('blur');
-		}
 	}
 
 	/**
@@ -1707,6 +1703,10 @@ customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea
 			clearInterval(autoSaveInterval);
 			autoSaveInterval = null;
 		}
+
+		document.body.classList[prefs.lightVersion ? 'add' : 'false'](
+			'light-version'
+		);
 	};
 
 	scope.onNewBtnClick = function() {
diff --git a/src/style.css b/src/style.css
index dc4ebcf..4483607 100644
--- a/src/style.css
+++ b/src/style.css
@@ -118,10 +118,11 @@ select, input[type="text"], input[type="number"],  textarea {
 	will-change: -webkit-filter;
 	transition: 0.10s ease 0.2s;
 }
-.blur.overlay-visible .main-container {
+body:not(.light-version).overlay-visible .main-container {
 	transition-duration: 0.5s;
 	transition-delay: 0.4s;
 	-webkit-filter: blur(3px);
+	filter: blur(3px);
 }
 .code-side,
 .demo-side {