build

app/index.html

@@ -3,6 +3,21 @@
 		<meta charset="utf-8">
 		<title>Web Maker</title>
 
+		<style>
+			/* Critically acclaimed CSS */
+			.saved-items-pane {
+				position: fixed;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				width: 450px;
+				transform: translateX(100%);
+			}
+			.modal {
+				visibility: hidden;
+			}
+		</style>
+
 		<link rel="stylesheet" href="vendor.css">
 
 		<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
@@ -64,13 +79,13 @@
 						    <path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
 						</svg>Open
 					</a>
-					<a class="hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left" aria-label="Login/Signup" d-open-modal="loginModal">
+					<a class="show-when-app hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left" aria-label="Login/Signup" d-open-modal="loginModal">
 						Login/Signup
 					</a>
 					<a class="hide-on-logout flex  flex-v-center  hint--rounded  hint--bottom-left" aria-label="Logout" d-click="logout">
 						Logout
 					</a>
-					<img id="headerAvatarImg" width="20" src="https://www.gravatar.com/avatar/6be4e636e8aacd405bed5cd15124a875" class="main-header__avatar-img  hide-on-logout ml-1"/>
+					<img id="headerAvatarImg" width="20" src="" class="hide-on-logout main-header__avatar-img ml-1"/>
 				</div>
 			</div>
 			<div class="content-wrap  flex  flex-grow">
@@ -177,7 +192,7 @@
 						</svg>
 					</a>
 
-					<a href="" id="screenshotBtn" class="mode-btn  hint--rounded  hint--top-left" d-click="takeScreenshot" aria-label="Take screenshot of preview">
+					<a href="" id="screenshotBtn" class="mode-btn  hint--rounded  hint--top-left show-when-extension" d-click="takeScreenshot" aria-label="Take screenshot of preview">
 						<svg style="width:24px;height:24px" viewBox="0 0 24 24">
 							<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
 						</svg>
@@ -358,12 +373,12 @@
 							Default Preprocessors
 						</label>
 						<div class="flex line">
-							<select style="flex:1;margin:0 20px" data-setting="htmlMode" d-change="updateSetting">
+							<select style="flex:1;margin-left:20px" data-setting="htmlMode" d-change="updateSetting">
 								<option value="html">HTML</option>
 								<option value="markdown">Markdown</option>
 								<option value="jade">Pug</option>
 							</select>
-							<select style="flex:1;margin:0 20px" data-setting="cssMode" d-change="updateSetting">
+							<select style="flex:1;margin-left:20px" data-setting="cssMode" d-change="updateSetting">
 								<option value="css">CSS</option>
 								<option value="scss">SCSS</option>
 								<option value="sass">SASS</option>
@@ -371,7 +386,7 @@
 								<option value="stylus">Stylus</option>
 								<option value="acss">Atomic CSS</option>
 							</select>
-							<select style="flex:1;margin:0 20px" data-setting="jsMode" d-change="updateSetting">
+							<select style="flex:1;margin-left:20px" data-setting="jsMode" d-change="updateSetting">
 								<option value="js">JS</option>
 								<option value="coffee">CoffeeScript</option>
 								<option value="es6">ES6 (Babel)</option>
@@ -502,6 +517,12 @@
 			<symbol id="bug-icon" viewBox="0 0 24 24">
     			<path d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z" />
 			</symbol>
+			<symbol id="google-icon" viewBox="0 0 24 24">
+				<path d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z" />
+			</symbol>
+			<symbol id="fb-icon" viewBox="0 0 24 24">
+				<path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
+			</symbol>
 			<symbol id="github-icon" viewBox="0 0 24 24">
 			    <path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
 			</symbol>

app/lib/transpilers/sass.js

@@ -0,0 +1,202 @@
+/*! sass.js - v0.9.10 (9a781bf) - built 2016-04-24
+  providing libsass 3.3.6 (3ae9a20)
+  via emscripten 1.36.1 (d5085ed)
+ */
+
+(function (root, factory) {
+  'use strict';
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory();
+  } else {
+    root.Sass = factory();
+  }
+}(this, function () {/*global document*/
+// identify the path sass.js is located at in case we're loaded by a simple
+// <script src="path/to/sass.js"></script>
+// this path can be used to identify the location of
+// * sass.worker.js from sass.js
+// * libsass.js.mem from sass.sync.js
+// see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
+// see https://github.com/medialize/sass.js/issues/33
+var SASSJS_RELATIVE_PATH = (function() {
+  'use strict';
+
+  // in Node things are rather simple
+  if (typeof __dirname !== 'undefined') {
+    return __dirname;
+  }
+
+  // we can only run this test in the browser,
+  // so make sure we actually have a DOM to work with.
+  if (typeof document === 'undefined' || !document.getElementsByTagName) {
+    return null;
+  }
+
+  // http://www.2ality.com/2014/05/current-script.html
+  var currentScript = document.currentScript || (function() {
+    var scripts = document.getElementsByTagName('script');
+    return scripts[scripts.length - 1];
+  })();
+
+  var path = currentScript && currentScript.src;
+  if (!path) {
+    return null;
+  }
+
+  // [worker] make sure we're not running in some concatenated thing
+  if (path.slice(-8) === '/sass.js') {
+    return path.slice(0, -8);
+  }
+
+  // [sync] make sure we're not running in some concatenated thing
+  if (path.slice(-13) === '/sass.sync.js') {
+    return path.slice(0, -13);
+  }
+
+  return null;
+})() || '.';
+
+/*global Worker, SASSJS_RELATIVE_PATH*/
+'use strict';
+
+var noop = function(){};
+var slice = [].slice;
+// defined upon first Sass.initialize() call
+var globalWorkerUrl;
+
+function Sass(workerUrl) {
+  if (!workerUrl && !globalWorkerUrl) {
+    /*jshint laxbreak:true */
+    throw new Error(
+      'Sass needs to be initialized with the URL of sass.worker.js - '
+      + 'either via Sass.setWorkerUrl(url) or by new Sass(url)'
+    );
+    /*jshint laxbreak:false */
+  }
+
+  if (!globalWorkerUrl) {
+    globalWorkerUrl = workerUrl;
+  }
+
+  // bind all functions
+  // we're doing this because we used to have a single hard-wired instance that allowed
+  // [].map(Sass.removeFile) and we need to maintain that for now (at least until 1.0.0)
+  for (var key in this) {
+    if (typeof this[key] === 'function') {
+      this[key] = this[key].bind(this);
+    }
+  }
+
+  this._callbacks = {};
+  this._worker = new Worker(workerUrl || globalWorkerUrl);
+  this._worker.addEventListener('message', this._handleWorkerMessage, false);
+}
+
+// allow setting the workerUrl before the first Sass instance is initialized,
+// where registering the global workerUrl would've happened automatically
+Sass.setWorkerUrl = function(workerUrl) {
+  globalWorkerUrl = workerUrl;
+};
+
+Sass.style = {
+  nested: 0,
+  expanded: 1,
+  compact: 2,
+  compressed: 3
+};
+
+Sass.comments = {
+  'none': 0,
+  'default': 1
+};
+
+Sass.prototype = {
+  style: Sass.style,
+  comments: Sass.comments,
+
+  destroy: function() {
+    this._worker && this._worker.terminate();
+    this._worker = null;
+    this._callbacks = {};
+    this._importer = null;
+  },
+
+  _handleWorkerMessage: function(event) {
+    if (event.data.command) {
+      this[event.data.command](event.data.args);
+    }
+
+    this._callbacks[event.data.id] && this._callbacks[event.data.id](event.data.result);
+    delete this._callbacks[event.data.id];
+  },
+
+  _dispatch: function(options, callback) {
+    if (!this._worker) {
+      throw new Error('Sass worker has been terminated');
+    }
+
+    options.id = 'cb' + Date.now() + Math.random();
+    this._callbacks[options.id] = callback;
+    this._worker.postMessage(options);
+  },
+
+  _importerInit: function(args) {
+    // importer API done callback pushing results
+    // back to the worker
+    var done = function done(result) {
+      this._worker.postMessage({
+        command: '_importerFinish',
+        args: [result]
+      });
+    }.bind(this);
+
+    try {
+      this._importer(args[0], done);
+    } catch(e) {
+      done({ error: e.message });
+      throw e;
+    }
+  },
+
+  importer: function(importerCallback, callback) {
+    if (typeof importerCallback !== 'function' && importerCallback !== null) {
+      throw new Error('importer callback must either be a function or null');
+    }
+
+    // callback is executed in the main EventLoop
+    this._importer = importerCallback;
+    // tell worker to activate importer callback
+    this._worker.postMessage({
+      command: 'importer',
+      args: [Boolean(importerCallback)]
+    });
+
+    callback && callback();
+  },
+};
+
+var commands = 'writeFile readFile listFiles removeFile clearFiles lazyFiles preloadFiles options compile compileFile';
+commands.split(' ').forEach(function(command) {
+  Sass.prototype[command] = function() {
+    var callback = slice.call(arguments, -1)[0];
+    var args = slice.call(arguments, 0, -1);
+    if (typeof callback !== 'function') {
+      args.push(callback);
+      callback = noop;
+    }
+
+    this._dispatch({
+      command: command,
+      args: args
+    }, callback);
+  };
+});
+
+// automatically set the workerUrl in case we're loaded by a simple
+// <script src="path/to/sass.js"></script>
+// see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
+Sass.setWorkerUrl(SASSJS_RELATIVE_PATH + '/sass.worker.js');
+return Sass;
+}));

app/partials/help-modal.html

@@ -4,7 +4,7 @@
 	</svg>
 </a>
 
-<h1>Web Maker<small style="font-size:14px;"> v2.9.6</small></h1>
+<h1><div class="web-maker-with-tag">Web Maker</div><small style="font-size:14px;"> v2.9.6</small></h1>
 
 <div>
 	<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>

app/partials/login-modal.html

@@ -4,13 +4,25 @@
     </svg>
 </a>
 
-<h2>Login</h2>
+<h2>Login / Signup</h2>
 
-<div class="flex">
+<div>
     <p>
-        <button class="btn social-login-btn--google">Login with Google</button>
+        <button class="btn btn-icon btn--big full-width social-login-btn--github" data-auth-provider="github">
+            <svg><use xlink:href="#github-icon"></use></svg>Login with Github
+        </button>
     </p>
     <p>
-        <button d-click="login" class="btn social-login-btn--github">Login with Github</button>
+        <button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--google" data-auth-provider="google">
+            <svg><use xlink:href="#google-icon"></use></svg>Login with Google
+        </button>
+    </p>
+    <p class="mb-2">
+        <button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--facebook" data-auth-provider="facebook">
+            <svg><use xlink:href="#fb-icon"></use></svg>Login with Facebook
+        </button>
+    </p>
+    <p>
+        Join a community of 50,000+ Developers
     </p>
 </div>

app/script.js

@@ -282,6 +282,11 @@ if ('serviceWorker' in navigator) {
 	window.chrome.i18n = { getMessage: () => {} };
 
 	window.IS_EXTENSION = !!window.chrome.extension;
+	if (window.IS_EXTENSION) {
+		document.body.classList.add('is-extension');
+	} else {
+		document.body.classList.add('is-app');
+	}
 })();
 
 (() => {
@@ -430,7 +435,7 @@ window.logout = function logout() {
 };
 function login(providerName) {
 	var provider;
-	if (providerName === 'fb') {
+	if (providerName === 'facebook') {
 		provider = new firebase.auth.FacebookAuthProvider();
 	} else if (providerName === 'twitter') {
 		provider = new firebase.auth.TwitterAuthProvider();
@@ -444,49 +449,11 @@ function login(providerName) {
 	return firebase
 		.auth()
 		.signInWithPopup(provider)
-		.then(function(result) {
+		.then(function() {})
-			return;
-			// Save this user in the store
-			firebase
-				.database()
-				.ref('users/' + result.user.uid)
-				.update({
-					displayName: result.user.displayName,
-					email: result.user.email,
-					photoURL: result.user.providerData[0].photoURL,
-					signedUpOn: Date.now()
-				})
-				.then(function() {
-					// Port items in localstorage to user account
-					if (window.localStorage.prototyp) {
-						var items = JSON.parse(window.localStorage.prototyp);
-						var newItemKey;
-						items.forEach(function(localItem) {
-							itemService.fetchItem(localItem.id).then(function(item) {
-								newItemKey = firebase.database().ref('pens').push().key;
-								item.createdBy = result.user.uid;
-								delete item.uid;
-								firebase.database().ref('pens/' + newItemKey).set(item);
-								firebase
-									.database()
-									.ref('users/' + result.user.uid)
-									.child('items')
-									.child(newItemKey)
-									.set(true);
-							});
-						});
-						delete localStorage.prototyp;
-					}
-				});
-		})
 		.catch(function(error) {
-			// Handle Errors here.
+			alert(
-			var errorCode = error.code;
+				'You have already signed up with the same email using different social login'
-			var errorMessage = error.message;
+			);
-			// The email of the user's account used.
-			var email = error.email;
-			// The firebase.auth.AuthCredential type that was used.
-			var credential = error.credential;
 			utils.log(error);
 		});
 }
@@ -1198,6 +1165,8 @@ loginModal
 
 	const AUTO_SAVE_INTERVAL = 15000; // 15 seconds
 	const BASE_PATH = chrome.extension ? '/' : '/app';
+	const DEFAULT_PROFILE_IMG =
+		'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAXtJREFUSMfVlT1KQ0EUhc+NiTaxSaUiBBG0133kV+x0CbEza/BnE4JYJxvQFcRaibESXYAKSVQ+i0zkMZn3E7DJgYHHzLnnzj0z74606LCkRWBZUl1SVdKepE239CKpJ6krqWNm47kzA01gQDqegPo8wkvAZQZhH2dALkuCkPgIOAU23Gi7uZkkWWwJoR3gtmO49TjxZednCOsB/loM9xlYmfKintUlbccUF7ptcX5vSaqESNUE944Cc8cJ/Fkt4DHhhoyc52mHPMXDTOnAu6Si/gcfZrbqW0SGwE830vCnFU3wFiAOJV1JakgqmVnRzIqSSpKabm0YiHsNncGN52MPKKduFcrAvRd7HSIeeqSdrIYDu17sQYhUAPoRUmuOBCeRuAGTLhwkNiLEb6AFWIKwOfGfSFzS/yQBF165t0AFyEc4eTd353GTm50LzgHngZ9n7MofuG8f2dp1JFHNO5M49JNsSXsyC5JqmvSWfc0+mR1JXTP7yrzzhcMvKuvFJdN+wSwAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMTNUMDU6NDg6MDYrMDA6MDBnRzN5AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTEzVDA1OjQ4OjA2KzAwOjAwFhqLxQAAACh0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vdG1wL21hZ2ljay1MLWhFV0FISOqcDjwAAAAASUVORK5CYII=';
 
 	var updateTimer,
 		updateDelay = 500,
@@ -1756,6 +1725,7 @@ loginModal
 	 * Loaded the code comiler based on the mode selected
 	 */
 	function handleModeRequirements(mode) {
+		const baseTranspilerPath = 'lib/transpilers';
 		// Exit if already loaded
 		var d = deferred();
 		if (modes[mode].hasLoaded) {
@@ -1769,26 +1739,26 @@ loginModal
 		}
 
 		if (mode === HtmlModes.JADE) {
-			loadJS('lib/jade.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/jade.js`).then(setLoadedFlag);
 		} else if (mode === HtmlModes.MARKDOWN) {
-			loadJS('lib/marked.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/marked.js`).then(setLoadedFlag);
 		} else if (mode === CssModes.LESS) {
-			loadJS('lib/less.min.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/less.min.js`).then(setLoadedFlag);
 		} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
-			loadJS('lib/sass.js').then(function() {
+			loadJS(`${baseTranspilerPath}/sass.js`).then(function() {
-				sass = new Sass('lib/sass.worker.js');
+				sass = new Sass(`${baseTranspilerPath}/sass.worker.js`);
 				setLoadedFlag();
 			});
 		} else if (mode === CssModes.STYLUS) {
-			loadJS('lib/stylus.min.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/stylus.min.js`).then(setLoadedFlag);
 		} else if (mode === CssModes.ACSS) {
-			loadJS('lib/atomizer.browser.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/atomizer.browser.js`).then(setLoadedFlag);
 		} else if (mode === JsModes.COFFEESCRIPT) {
-			loadJS('lib/coffee-script.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/coffee-script.js`).then(setLoadedFlag);
 		} else if (mode === JsModes.ES6) {
-			loadJS('lib/babel.min.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/babel.min.js`).then(setLoadedFlag);
 		} else if (mode === JsModes.TS) {
-			loadJS('lib/typescript.js').then(setLoadedFlag);
+			loadJS(`${baseTranspilerPath}/typescript.js`).then(setLoadedFlag);
 		} else {
 			d.resolve();
 		}
@@ -2103,7 +2073,7 @@ loginModal
 		if (jsMode === JsModes.ES6) {
 			contents +=
 				'<script src="' +
-				chrome.extension.getURL('lib/babel-polyfill.min.js') +
+				chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js') +
 				'"></script>';
 		}
 
@@ -3082,7 +3052,7 @@ loginModal
 	scope.updateProfileUi = () => {
 		if (window.user) {
 			document.body.classList.add('is-logged-in');
-			headerAvatarImg.src = window.user.photoURL;
+			headerAvatarImg.src = window.user.photoURL || DEFAULT_PROFILE_IMG;
 		} else {
 			document.body.classList.remove('is-logged-in');
 			headerAvatarImg.src = '';
@@ -3090,16 +3060,12 @@ loginModal
 	};
 
 	scope.login = e => {
-		firebase.auth().signInAnonymously().then().catch(function(error) {
+		const provider = e.target.dataset.authProvider;
-			// Handle Errors here.
+		window.login(provider);
-			utils.log(error);
-		});
-
 		if (e) {
 			e.preventDefault();
 		}
 	};
-	scope.login = window.login;
 	scope.logout = window.logout;
 
 	function init() {

app/style.css

@@ -1,6 +1,6 @@
 :root {
 	--color-bg: #252637;
-	--color-sidebar: #3A2B63;
+	--color-sidebar: #3a2b63;
 	--code-font-size: 16px;
 }
 body {
@@ -8,32 +8,72 @@ body {
 	padding: 0;
 	background: rgba(0, 0, 0, 0.5);
 	background: var(--color-bg);
-	color: rgba(255,255,255,0.9);
+	color: rgba(255, 255, 255, 0.9);
 	min-height: 100vh;
 	font-size: 87.5%;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+		sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 h1 {
 	margin-top: 0;
 }
-a { text-decoration: none; color: crimson; cursor: pointer; }
+a {
-/*a:hover { text-decoration: underline; }*/
+	text-decoration: none;
+	color: crimson;
+	cursor: pointer;
+}
 
-.hide { display: none!important; }
+.hide {
-.flex { display: flex; }
+	display: none !important;
-.flex-grow { flex-grow: 1; }
+}
-.flex-v-center { align-items: center; }
+.flex {
-.fr { float: right; }
+	display: flex;
-.relative { position: relative; }
+}
-.tac { text-align: center; }
+.flex-grow {
-.tar { text-align: right; }
+	flex-grow: 1;
-.va-m { vertical-align: middle; }
+}
-.full-width { width: 100%; }
+.flex-v-center {
-.opacity--30 { opacity: 0.3; }
+	align-items: center;
-.opacity--70 { opacity: 0.7; }
+}
-.pointer-none { pointer-events: none; }
+.fr {
-.ml-1 { margin-left: 1rem; }
+	float: right;
-.ml-2 { margin-left: 2rem; }
+}
+.relative {
+	position: relative;
+}
+.tac {
+	text-align: center;
+}
+.tar {
+	text-align: right;
+}
+.va-m {
+	vertical-align: middle;
+}
+.full-width {
+	width: 100%;
+}
+.opacity--30 {
+	opacity: 0.3;
+}
+.opacity--70 {
+	opacity: 0.7;
+}
+.pointer-none {
+	pointer-events: none;
+}
+.ml-1 {
+	margin-left: 1rem;
+}
+.ml-2 {
+	margin-left: 2rem;
+}
+.mb-1 {
+	margin-bottom: 1rem;
+}
+.mb-2 {
+	margin-bottom: 2rem;
+}
 hr {
 	background: 0;
 	border: 0;
@@ -42,7 +82,7 @@ hr {
 label {
 	cursor: pointer;
 }
-[class*="hint--"]:after {
+[class*='hint--']:after {
 	text-transform: none;
 	font-weight: normal;
 	letter-spacing: 0.5px;
@@ -62,9 +102,12 @@ label {
 	margin-left: 8px;
 }
 a > svg {
-	fill: rgba(255, 255, 255, 0.2)
+	fill: rgba(255, 255, 255, 0.2);
 }
-select, input[type="text"], input[type="number"],  textarea {
+select,
+input[type='text'],
+input[type='number'],
+textarea {
 	padding: 3px 5px;
 	font-size: inherit;
 }
@@ -85,7 +128,11 @@ select, input[type="text"], input[type="number"],  textarea {
 	border-radius: 3px;
 	padding: 7px 15px;
 	cursor: pointer;
-	transition: 0.2s ease;
+	transition: box-shadow 0.2s ease;
+}
+.btn--big {
+	padding: 15px 30px;
+	border-radius: 3px;
 }
 .btn-icon {
 	display: inline-flex;
@@ -93,32 +140,49 @@ select, input[type="text"], input[type="number"],  textarea {
 }
 .btn:hover {
 	text-decoration: none;
-	box-shadow: 0 3px 5px 0 rgba(0,0,0,0.15);
+	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
+}
+.btn:focus {
+	outline-width: 4px;
+	outline-color: #b76b29;
+	outline-style: solid;
+	outline-offset: 1px;
 }
 .btn-icon > svg {
 	width: 20px;
 	height: 20px;
-	fill: white;
+	fill: currentColor;
 	vertical-align: middle;
 	margin-right: 8px;
 }
+.btn--big > svg {
+	width: 25px;
+	height: 25px;
+	margin-right: 12px;
+}
 .star:after {
 	content: '★';
 	color: #eee333;
 }
 /* used to show keyboard specific content when something is keyboard focused */
-.show-when-selected { display: none; }
+.show-when-selected {
-.selected .show-when-selected { display: inline-block; }
+	display: none;
+}
+.selected .show-when-selected {
+	display: inline-block;
+}
 
 .main-container {
 	position: absolute;
-	left: 0; right: 0;
+	left: 0;
-	top: 0; bottom: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
 	will-change: -webkit-filter;
-	transition: 0.10s ease 0.2s;
+	transition: 0.1s ease 0.2s;
 }
 body:not(.light-version).overlay-visible .main-container {
 	transition-duration: 0.5s;
@@ -176,7 +240,7 @@ body:not(.light-version).overlay-visible .main-container {
 	overflow: hidden;
 	position: relative;
 	background: var(--color-bg);
-	transition: height 0.30s ease, width 0.30s ease;
+	transition: height 0.3s ease, width 0.3s ease;
 	will-change: height;
 }
 .layout-2 .code-wrap.is-minimized {
@@ -202,9 +266,9 @@ body:not(.light-version).overlay-visible .main-container {
 	justify-content: space-between;
 	align-items: center;
 	padding: 5px 10px;
-	background: rgba(0,0,0,0.20);
+	background: rgba(0, 0, 0, 0.2);
 	color: #888;
-	border-bottom: 1px solid rgba(0,0,0,0.3);
+	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 	font-weight: bold;
 	user-select: none;
 }
@@ -231,12 +295,11 @@ body:not(.light-version).overlay-visible .main-container {
 	margin-left: 8px;
 }
 .code-wrap__header-btn,
-.code-wrap__header-btn > svg  {
+.code-wrap__header-btn > svg {
 	width: 18px;
 	height: 18px;
 }
 .code-wrap__collapse-btn:before {
-
 	/* maximize icon */
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
 }
@@ -245,8 +308,14 @@ body:not(.light-version).overlay-visible .main-container {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
 }
 @keyframes pop-in {
-	from { transform: scale(0.9); opacity: 0; }
+	from {
-	to { transform: scale(1); opacity: 1; }
+		transform: scale(0.9);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
 }
 
 /* Codemirror */
@@ -262,7 +331,7 @@ body:not(.light-version).overlay-visible .main-container {
 	font-variant-ligatures: contextual;
 }
 .cm-s-monokai .CodeMirror-linenumber {
-	color:rgba(255,255,255,0.2);
+	color: rgba(255, 255, 255, 0.2);
 }
 .cm-s-monokai.CodeMirror,
 .cm-s-monokai .CodeMirror-gutters {
@@ -271,8 +340,9 @@ body:not(.light-version).overlay-visible .main-container {
 .cm-s-monokai .CodeMirror-guttermarker-subtle {
 	opacity: 0.4;
 }
-.cm-s-monokai .CodeMirror-activeline-background, .cm-s-monokai .CodeMirror-activeline-gutter {
+.cm-s-monokai .CodeMirror-activeline-background,
-	background: rgba(0,0,0,0.1) !important;
+.cm-s-monokai .CodeMirror-activeline-gutter {
+	background: rgba(0, 0, 0, 0.1) !important;
 }
 .CodeMirror-guttermarker-subtle {
 	/*visibility: hidden !important;*/
@@ -310,7 +380,7 @@ body > #demo-frame {
 	padding: 5px 10px;
 	background-color: rgb(18, 19, 27);
 	color: rgba(255, 255, 255, 0.45);
-	border-top: 1px solid rgba(255,255,255,0.14);
+	border-top: 1px solid rgba(255, 255, 255, 0.14);
 	/*line-height: 20px;*/
 }
 .footer {
@@ -320,7 +390,7 @@ body > #demo-frame {
 	display: flex;
 	flex-wrap: nowrap;
 	border: 0;
-	border-bottom: 1px solid rgba(255,255,255,0.14);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
 }
 .main-header__btn-wrap > a {
 	font-size: 0.8em;
@@ -328,18 +398,22 @@ body > #demo-frame {
 	line-height: 20px;
 	height: 20px;
 	letter-spacing: 0.6px;
-	color: #9297B3;
+	color: #9297b3;
 	border-radius: 3px;
 	margin-left: 10px;
 	padding: 0px 8px;
-	border: 1px solid rgba(0,0,0,.9);
+	border: 1px solid rgba(0, 0, 0, 0.9);
-	background: linear-gradient(180deg, rgba(0,0,0,0.5) 0, rgba(255,255,255,0.1) 100%);
+	background: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0.5) 0,
+		rgba(255, 255, 255, 0.1) 100%
+	);
 	/*text-shadow: 0px 1px 1px rgba(0,0,0,1);*/
-	box-shadow: 0 -1px 0px 0 rgba(255,255,255,0.15);
+	box-shadow: 0 -1px 0px 0 rgba(255, 255, 255, 0.15);
 	text-transform: uppercase;
 }
 .main-header__btn-wrap > a > svg {
-	fill: #9297B3;
+	fill: #9297b3;
 	margin-right: 4px;
 }
 .main-header__btn-wrap > a.is-marked > svg {
@@ -375,7 +449,7 @@ body > #demo-frame {
 	display: inline-block;
 	height: 24px;
 	margin: 0 10px 0 20px;
-	border-left: 1px solid rgba(255,255,255,0.2);
+	border-left: 1px solid rgba(255, 255, 255, 0.2);
 }
 .mode-btn {
 	margin-left: 10px;
@@ -392,10 +466,10 @@ body > #demo-frame {
 }
 .footer a > svg {
 	transition: 0.3s ease;
-	fill: rgba(255, 255, 255, 0.2)
+	fill: rgba(255, 255, 255, 0.2);
 }
 .footer a:hover svg {
-	fill: rgba(255, 255, 255, 0.45)
+	fill: rgba(255, 255, 255, 0.45);
 }
 .mode-btn svg {
 	width: 24px;
@@ -417,7 +491,7 @@ body > #demo-frame {
 .item-title-input {
 	background: none;
 	border: 0;
-	color: rgba(255,255,255,0.6);
+	color: rgba(255, 255, 255, 0.6);
 	flex: 1;
 }
 .search-input {
@@ -431,19 +505,23 @@ body > #demo-frame {
 }
 .modal {
 	position: fixed;
-	top: 5vh;
+	top: 0;
-	left: 50%;
+	left: 0;
-	width: 68vw;
+	width: 100vw;
-	margin-left: -34vw;
+	height: 100vh;
-	max-width: 90vw;
+	display: flex;
-	height: auto;
+	align-items: center;
+	justify-content: center;
 	z-index: 2000;
 	visibility: hidden;
+
+	/* So that modal overlay gets pointer events */
+	pointer-events: none;
 }
 @media screen and (max-width: 900px) {
 	.modal {
-		width: 90vw;
+		/* width: 90vw; */
-		margin-left: -45vw;
+		/* margin-left: -45vw; */
 	}
 }
 .modal__close-btn {
@@ -451,11 +529,12 @@ body > #demo-frame {
 	right: 10px;
 	top: 10px;
 	opacity: 0.3;
-transition: 0.25s ease;
+	transition: 0.25s ease;
 }
 .modal__close-btn > svg {
 	fill: black;
-	width:30px; height:30px;
+	width: 30px;
+	height: 30px;
 }
 .modal__close-btn:hover {
 	opacity: 0.7;
@@ -464,8 +543,8 @@ transition: 0.25s ease;
 	background: #fdfdfd;
 	color: #444;
 	position: relative;
-	border-radius: 3px;
+	border-radius: 8px;
-	margin: 0 auto;
+	/* margin: 0 auto; */
 	opacity: 0;
 	padding: 2em;
 	font-size: 1.1em;
@@ -473,6 +552,7 @@ transition: 0.25s ease;
 	max-height: 90vh;
 	box-sizing: border-box;
 	overflow-y: auto;
+	pointer-events: auto;
 	transition-property: transform, opacity;
 	transition-duration: 0.19s;
 	transform: translateY(-50px) scale(0.7);
@@ -495,7 +575,7 @@ transition: 0.25s ease;
 	z-index: 5;
 	opacity: 0;
 	will-change: opacity;
-	background: rgba(0,0,0,0.6);
+	background: rgba(0, 0, 0, 0.6);
 	transition: opacity 0.3s;
 }
 /* Make settings modal smaller */
@@ -515,6 +595,7 @@ transition: 0.25s ease;
 	z-index: 6;
 	background-color: var(--color-sidebar);
 	transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87);
+	transition-property: transform;
 	will-change: transform;
 	transform: translateX(100%);
 }
@@ -559,22 +640,48 @@ transition: 0.25s ease;
 	opacity: 0;
 	transform: translateX(50px);
 	will-change: opacity, transform;
-	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 	animation: slide-left 0.35s ease forwards;
 }
-.saved-item-tile:nth-child(1) { animation-delay: 0.2s; }
+.saved-item-tile:nth-child(1) {
-.saved-item-tile:nth-child(2) { animation-delay: 0.25s; }
+	animation-delay: 0.2s;
-.saved-item-tile:nth-child(3) { animation-delay: 0.3s; }
+}
-.saved-item-tile:nth-child(4) { animation-delay: 0.35s; }
+.saved-item-tile:nth-child(2) {
-.saved-item-tile:nth-child(5) { animation-delay: 0.4s; }
+	animation-delay: 0.25s;
-.saved-item-tile:nth-child(6) { animation-delay: 0.45s; }
+}
-.saved-item-tile:nth-child(7) { animation-delay: 0.5s; }
+.saved-item-tile:nth-child(3) {
-.saved-item-tile:nth-child(8) { animation-delay: 0.55s; }
+	animation-delay: 0.3s;
-.saved-item-tile:nth-child(9) { animation-delay: 0.6s; }
+}
-.saved-item-tile:nth-child(10) { animation-delay: 0.65s; }
+.saved-item-tile:nth-child(4) {
-.saved-item-tile:nth-child(11) { animation-delay: 0.7s; }
+	animation-delay: 0.35s;
-.saved-item-tile:nth-child(12) { animation-delay: 0.75s; }
+}
-.saved-item-tile:nth-child(n+12) { animation-delay: 0.8s; }
+.saved-item-tile:nth-child(5) {
+	animation-delay: 0.4s;
+}
+.saved-item-tile:nth-child(6) {
+	animation-delay: 0.45s;
+}
+.saved-item-tile:nth-child(7) {
+	animation-delay: 0.5s;
+}
+.saved-item-tile:nth-child(8) {
+	animation-delay: 0.55s;
+}
+.saved-item-tile:nth-child(9) {
+	animation-delay: 0.6s;
+}
+.saved-item-tile:nth-child(10) {
+	animation-delay: 0.65s;
+}
+.saved-item-tile:nth-child(11) {
+	animation-delay: 0.7s;
+}
+.saved-item-tile:nth-child(12) {
+	animation-delay: 0.75s;
+}
+.saved-item-tile:nth-child(n + 12) {
+	animation-delay: 0.8s;
+}
 @keyframes slide-left {
 	from {
 		opacity: 0;
@@ -587,7 +694,7 @@ transition: 0.25s ease;
 }
 .saved-item-tile:hover,
 .saved-item-tile.selected {
-	background: rgba(255,255,255,0.1);
+	background: rgba(255, 255, 255, 0.1);
 }
 .saved-item-tile__btns {
 	position: absolute;
@@ -605,14 +712,14 @@ transition: 0.25s ease;
 }
 .saved-item-tile__btn {
 	padding: 7px 10px;
-	color: rgba(255,255,255,0.3);
+	color: rgba(255, 255, 255, 0.3);
 	border-radius: 20px;
 	margin-left: 2px;
-	background: rgba(255,255,255,0.05);
+	background: rgba(255, 255, 255, 0.05);
 	text-transform: uppercase;
 }
 .saved-item-tile__btn:hover {
-	background: rgba(255,255,255,0.8);
+	background: rgba(255, 255, 255, 0.8);
 	color: #555;
 }
 .saved-item-tile__title {
@@ -633,16 +740,21 @@ transition: 0.25s ease;
 	position: relative;
 }
 @keyframes shake {
-	2%, 22% {
+	2%,
+	22% {
 		transform: translate3d(-1px, 0, 0);
 	}
-	5%,20% {
+	5%,
+	20% {
 		transform: translate3d(2px, 0, 0);
 	}
-	7%, 12%, 17% {
+	7%,
+	12%,
+	17% {
 		transform: translate3d(-4px, 0, 0);
 	}
-	10%, 15% {
+	10%,
+	15% {
 		transform: translate3d(4px, 0, 0);
 	}
 }
@@ -695,9 +807,9 @@ transition: 0.25s ease;
 	font-size: 5px;
 	position: relative;
 	text-indent: -9999em;
-	border-top: 1.1em solid rgba(118,57,229, 0.2);
+	border-top: 1.1em solid rgba(118, 57, 229, 0.2);
-	border-right: 1.1em solid rgba(118,57,229, 0.2);
+	border-right: 1.1em solid rgba(118, 57, 229, 0.2);
-	border-bottom: 1.1em solid rgba(118,57,229, 0.2);
+	border-bottom: 1.1em solid rgba(118, 57, 229, 0.2);
 	border-left: 1.1em solid #7639e5;
 	transform: translateZ(0);
 	animation: load8 1.1s infinite linear;
@@ -746,7 +858,7 @@ transition: 0.25s ease;
 	color: white;
 }
 .dropdown__menu > li:not(:last-child) {
-	border-bottom: 1px solid rgba(0,0,0,0.05);
+	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .open > .dropdown__menu,
@@ -764,7 +876,7 @@ transition: 0.25s ease;
 	background: white;
 	border: 1px solid #eee;
 	color: #333;
-	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
 	/*color: #333;*/
 	font-size: 1rem;
 	border-radius: 3px;
@@ -809,8 +921,8 @@ transition: 0.25s ease;
 	transform: translateX(0);
 }
 .count-label {
-	color: rgba(0,0,0,0.8);
+	color: rgba(0, 0, 0, 0.8);
-	background: rgba(255,255,255,0.53);
+	background: rgba(255, 255, 255, 0.53);
 	border-radius: 5px;
 	padding: 1px 6px;
 	font-weight: bold;
@@ -835,7 +947,7 @@ transition: 0.25s ease;
 	animation-delay: 0.4s;
 }
 .onboard-step__icon {
-	fill: transparent!important;
+	fill: transparent !important;
 	stroke-width: 0.3px;
 	stroke: #eeb096;
 	width: 150px;
@@ -859,7 +971,7 @@ transition: 0.25s ease;
 	right: 0;
 	max-height: 200px;
 	overflow-y: auto;
-	border: 1px solid rgba(0,0,0,0.5);
+	border: 1px solid rgba(0, 0, 0, 0.5);
 	z-index: 2001;
 }
 .autocomplete__loader {
@@ -869,31 +981,31 @@ transition: 0.25s ease;
 }
 @keyframes wobble {
 	from {
-	transform: none;
+		transform: none;
 	}
 
 	15% {
-	transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 	}
 
 	30% {
-	transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 	}
 
 	45% {
-	transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 	}
 
 	60% {
-	transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 	}
 
 	75% {
-	transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 	}
 
 	to {
-	transform: none;
+		transform: none;
 	}
 }
 .animated {
@@ -925,7 +1037,7 @@ transition: 0.25s ease;
 	padding: 5px;
 	font-size: 1.3em;
 	flex: 1;
-	background: rgba(0,0,0,0.3);
+	background: rgba(0, 0, 0, 0.3);
 	color: white;
 	border: 0;
 	outline: 0;
@@ -948,7 +1060,7 @@ transition: 0.25s ease;
 }
 
 .kbd-shortcut__keys {
-	background: rgba(0,0,0,0.1);
+	background: rgba(0, 0, 0, 0.1);
 	border-radius: 3px;
 	padding: 3px 8px;
 	margin-right: 5px;
@@ -964,60 +1076,118 @@ transition: 0.25s ease;
 	display: inline-block;
 }
 .web-maker-with-tag:after {
-    content: 'BETA';
+	content: 'BETA';
-    position: relative;
+	position: relative;
-    left: 3px;
+	left: 3px;
-    top: -10px;
+	top: -10px;
-    border-radius: 4px;
+	border-radius: 4px;
-    background: #b76b29;
+	background: #b76b29;
-    color: white;
+	color: white;
-    letter-spacing: 0.6px;
+	letter-spacing: 0.6px;
-    padding: 2px;
+	padding: 2px;
-    font-size: 10px;
+	font-size: 10px;
+}
+.is-extension .web-maker-with-tag:after {
+	display: none;
+}
+.social-login-btn--github {
+	background: #656b6f;
+}
+.social-login-btn--facebook {
+	background: #4e62c0;
+}
+.social-login-btn--google {
+	background: white;
+	border: 2px solid currentColor;
+	color: inherit;
 }
 
 body.is-logged-in .hide-on-login,
-body:not(.is-logged-in) .hide-on-logout {
+body:not(.is-logged-in) .hide-on-logout,
+body:not(.is-extension) .show-when-extension,
+body:not(.is-app) .show-when-app {
 	display: none;
 }
 
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */
-.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
+.cm-s-paraiso-dark.CodeMirror {
-.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
+	background: #2f1e2e;
-.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
+	color: #b9b6b0;
+}
+.cm-s-paraiso-dark .CodeMirror-gutters {
+	background: #2f1e2e;
+	border-right: 0px;
+}
+.cm-s-paraiso-dark .CodeMirror-activeline-background {
+	background: #4d344a;
+}
 
-.cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }
+.cm-s-monokai.CodeMirror {
-.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }
+	background: #272822;
-.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
+	color: #f8f8f2;
+}
+.cm-s-monokai .CodeMirror-gutters {
+	background: #272822;
+	border-right: 0px;
+}
+.cm-s-monokai .CodeMirror-activeline-background {
+	background: #373831;
+}
 
-.cm-s-3024-day.CodeMirror { background: #f7f7f7; color: #3a3432; }
+.cm-s-3024-day.CodeMirror {
-.cm-s-3024-day .CodeMirror-gutters { background: #f7f7f7; border-right: 0px; }
+	background: #f7f7f7;
-.cm-s-3024-day .CodeMirror-activeline-background { background: #e8f2ff; }
+	color: #3a3432;
+}
+.cm-s-3024-day .CodeMirror-gutters {
+	background: #f7f7f7;
+	border-right: 0px;
+}
+.cm-s-3024-day .CodeMirror-activeline-background {
+	background: #e8f2ff;
+}
 
 .cm-s-material.CodeMirror {
-  background-color: #263238;
+	background-color: #263238;
-  color: rgba(233, 237, 237, 1);
+	color: rgba(233, 237, 237, 1);
 }
 .cm-s-material .CodeMirror-gutters {
-  background: #263238;
+	background: #263238;
-  color: rgb(83,127,126);
+	color: rgb(83, 127, 126);
 }
-.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
+.cm-s-material .CodeMirror-activeline-background {
-
+	background: rgba(0, 0, 0, 0);
-.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
-  background-color: #282a36 !important;
-  color: #f8f8f2 !important;
 }
-.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
 
-.cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
+.cm-s-dracula.CodeMirror,
-.cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; }
+.cm-s-dracula .CodeMirror-gutters {
-.cm-s-blackboard .CodeMirror-activeline-background { background: #3C3636; }
+	background-color: #282a36 !important;
+	color: #f8f8f2 !important;
+}
+.cm-s-dracula .CodeMirror-activeline-background {
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.cm-s-blackboard.CodeMirror {
+	background: #0c1021;
+	color: #f8f8f8;
+}
+.cm-s-blackboard .CodeMirror-gutters {
+	background: #0c1021;
+	border-right: 0;
+}
+.cm-s-blackboard .CodeMirror-activeline-background {
+	background: #3c3636;
+}
 
 .cm-s-midnight.CodeMirror {
-    background: #0F192A;
+	background: #0f192a;
-    color: #D1EDFF;
+	color: #d1edff;
+}
+.cm-s-midnight .CodeMirror-gutters {
+	background: #0f192a;
+	border-right: 1px solid;
+}
+.cm-s-midnight .CodeMirror-activeline-background {
+	background: #253540;
 }
-.cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; }
-.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }