From eede93ee7782d308a7f05ce82254fe16ff0802dd Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Sun, 4 Dec 2016 03:18:14 +0530
Subject: [PATCH] some more styling.

---
 src/index.html | 58 ++++++++++++++++++++++++++++++++------------------
 src/script.js  |  4 ++--
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/index.html b/src/index.html
index ee5bf47..879d485 100644
--- a/src/index.html
+++ b/src/index.html
@@ -232,8 +232,17 @@
 			border-bottom: 1px solid rgba(255,255,255,0.14);
 		}
 		.main-header__btn-wrap > a {
+			font-size: 0.8em;
+			color: #9297B3;
+			border-radius: 3px;
+			border: 1px solid rgba(146, 151, 179, 0.33);
 			margin-left: 15px;
-
+			padding: 0px 5px;
+			text-transform: uppercase;
+		}
+		.main-header__btn-wrap > a > svg {
+			fill: #9297B3;
+			margin-right: 4px;
 		}
 		.logo {
 			display: inline-block;
@@ -379,10 +388,15 @@
 			border-radius: 50%;
 			padding: 10px 14px;
 			background: crimson;
-			transition: 0.25s ease;
+			transform: scale(0);
+			will-change: transform, opacity;
+			transition: 0.3s ease;
+			transition-delay: 0;
 		}
 		.saved-items-pane.is-open .saved-items-pane__close-btn {
 			opacity: 1;
+			transition-delay: 0.4s;
+			transform: scale(1);
 			visibility: visible;
 		}
 		.saved-item-tile {
@@ -407,11 +421,12 @@
 		.saved-item-tile:nth-child(5) { animation-delay: 0.5s; }
 		.saved-item-tile:nth-child(6) { animation-delay: 0.6s; }
 		.saved-item-tile:nth-child(7) { animation-delay: 0.7s; }
-		.saved-item-tile:nth-child(9) { animation-delay: 0.8s; }
-		.saved-item-tile:nth-child(10) { animation-delay: 0.9s; }
-		.saved-item-tile:nth-child(11) { animation-delay: 1s; }
-		.saved-item-tile:nth-child(12) { animation-delay: 1.1s; }
-		.saved-item-tile:nth-child(13) { animation-delay: 1.2s; }
+		.saved-item-tile:nth-child(8) { animation-delay: 0.8s; }
+		.saved-item-tile:nth-child(9) { animation-delay: 0.9s; }
+		.saved-item-tile:nth-child(10) { animation-delay: 1s; }
+		.saved-item-tile:nth-child(11) { animation-delay: 1.1s; }
+		.saved-item-tile:nth-child(12) { animation-delay: 1.2s; }
+		.saved-item-tile:nth-child(n+12) { animation-delay: 1.3s; }
 		@keyframes slide-left {
 			from {
 				opacity: 0;
@@ -564,16 +579,16 @@
 		}
 
 		.error-gutter {
-			width: 16px;
+			width: 8px;
 		}
 		.gutter-error-marker {
-			width: 10px;
-			height: 10px;
+			width: 8px;
+			height: 20px;
 			background: red;
-			border-radius: 50%;
+			border-radius: 0;
 			position: relative;
-			top: 4px;
-			left: 3px;
+			top: 0;
+			left: 1px;
 		}
 		.gutter-error-marker:after {
 			content: attr(data-title);
@@ -583,7 +598,7 @@
 			opacity: 0;
 			visibility: hidden;
 			position: absolute;
-			top: 12px;
+			top: 14px;
 			left: 0px;
 			white-space: nowrap;
 			transform: translateX(-10px);
@@ -596,10 +611,11 @@
 			transform: translateX(0);
 		}
 		.count-label {
-			color: rgba(255,255,255,0.5);
-			background: rgba(255,255,255,0.13);
+			color: rgba(0,0,0,0.8);
+			background: rgba(255,255,255,0.53);
 			border-radius: 5px;
 			padding: 1px 6px;
+			font-weight: bold;
 		}
 		</style>
 	</head>
@@ -608,22 +624,22 @@
 		<div class="main-container">
 			<div class="main-header">
 				<div class="main-header__btn-wrap  fr flex  flex-v-center">
-					<a id="js-add-library-btn" class="flex  flex-v-center">
-						Add library <span id="js-external-lib-count" style="visibility:hidden;" class="count-label"></span>
+					<a id="js-add-library-btn" class="fleex-v-center">
+						Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
 					</a>
 
 					<a id="js-new-btn" class="flex  flex-v-center">
 						<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
-    						<path fill="crimson" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
+    						<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
 						</svg>New
 					</a>
 					<a id="js-save-btn" class="flex  flex-v-center">
 						<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
-    						<path fill="crimson" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
+    						<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
 						</svg>Save</a>
 					<a id="js-open-btn" class="flex  flex-v-center">
 						<svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
-						    <path fill="crimson" 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" />
+						    <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>
 				</div>
diff --git a/src/script.js b/src/script.js
index f9f0ee3..4c4b2aa 100644
--- a/src/script.js
+++ b/src/script.js
@@ -174,9 +174,9 @@
 		noOfExternalLibs += externalCssTextarea.value.split('\n').filter(lib => !!lib).length;
 		if (noOfExternalLibs) {
 			$('#js-external-lib-count').textContent = noOfExternalLibs;
-			$('#js-external-lib-count').style.visibility = 'visible';
+			$('#js-external-lib-count').style.display = 'inline';
 		} else {
-			$('#js-external-lib-count').style.visibility = 'hidden';
+			$('#js-external-lib-count').style.display = 'none';
 		}
 	}