SCSS rewrite

src/styles/_content.scss

@@ -100,14 +100,13 @@
 	.photo .overlay {
 		position: absolute;
 		width: 200px;
-		height: 60px;
-		margin: 142px 2px 0;
-		//background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%);
-		background: rgba(0, 0, 0, .6);
+		height: 200px;
+		margin: 2px;
+		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%);
 	}
 
 	.album img[data-type^='nonretina'] + .overlay {
-		background: rgba(0, 0, 0, 0);
+		background: rgba(0, 0, 0, 0.2);
 	}
 
 	.photo .overlay {
@@ -123,7 +122,7 @@
 	.photo .overlay h1 {
 		min-height: 19px;
 		width: 185px;
-		margin: 13px 0 3px 15px;
+		margin: 152px 0 3px 15px;
 		color: #fff;
 		font-size: 16px;
 		font-weight: bold;

src/styles/_contextmenu.scss

@@ -10,7 +10,7 @@
 	border: 1px solid rgba(0, 0, 0, .5);
 	border-bottom: 1px solid rgba(0, 0, 0, .6);
 	border-radius: 5px;
-	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px rgba(255, 255, 255, .08);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, .15), inset 0px 1px 0px rgba(255, 255, 255, .08);
 
 	/* Item ------------------------------------------------*/
 	tr {

src/styles/_header.scss

@@ -50,7 +50,7 @@ header {
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 
 		&.editable { cursor: pointer; }
 	}

src/styles/_imageview.scss

@@ -3,6 +3,7 @@
  */
 
 #imageview {
+
 	position: fixed;
 	display: none;
 	width: 100%;

src/styles/_infobox.scss

@@ -66,7 +66,7 @@
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 	}
 
 	.header a {
@@ -75,7 +75,7 @@
 		color: #fff;
 		font-size: 20px;
 		font-weight: bold;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		opacity: .5;
 		cursor: pointer;
 
@@ -99,7 +99,7 @@
 			color: #fff;
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+			text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		}
 	}
 

src/styles/_message.scss

@@ -6,203 +6,203 @@
 	position: fixed;
 	width: 100%;
 	height: 100%;
-	top: 0px;
-	left: 0px;
-	background-color: rgba(0,0,0,.85);
+	top: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, .85);
 	z-index: 1000;
 }
+
 .message {
+
 	position: absolute;
 	display: inline-block;
 	width: 500px;
 	margin-left: -250px;
 	margin-top: -95px;
-	background-color: #444;
 	background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
 	border-radius: 5px;
-	box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08);
+	box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
 
 	/* Animation */
 	animation-name: moveUp;
 	animation-duration: .3s;
-	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
-}
+	animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
 
 	/* Header ------------------------------------------------*/
-	.message h1 {
+	h1 {
 		float: left;
 		width: 100%;
-		padding: 12px 0px;
+		padding: 12px 0;
 		color: #fff;
 		font-size: 16px;
 		font-weight: bold;
-		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		text-align: center;
 	}
-	.message .close {
+
+	.close {
 		position: absolute;
-		top: 0px;
-		right: 0px;
+		top: 0;
+		right: 0;
 		padding: 12px 14px 6px 7px;
 		color: #aaa;
 		font-size: 20px;
-		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		cursor: pointer;
-	}
-	.message .close:hover {
-		color: #fff;
+
+		&:hover { color: #fff; }
 	}
 
 	/* Text ------------------------------------------------*/
-	.message p {
+	p {
 		float: left;
 		width: 90%;
 		margin-top: 1px;
 		padding: 12px 5% 15px 5%;
 		color: #eee;
 		font-size: 14px;
-		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		line-height: 20px;
-	}
-	.message p b {
-		font-weight: bold;
-		color: #fff;
-	}
-	.message p a {
-		color: #eee;
-		text-decoration: none;
-		border-bottom: 1px dashed #888;
+
+		b {
+			font-weight: bold;
+			color: #fff;
+		}
+
+		a {
+			color: #eee;
+			text-decoration: none;
+			border-bottom: 1px dashed #888;
+		}
 	}
 
 	/* Button ------------------------------------------------*/
-	.message .button {
+	.button {
 		float: right;
-		margin: 15px 15px 15px 0px;
+		margin: 15px 15px 15px 0;
 		padding: 7px 10px 8px 10px;
 		color: #ccc;
 		font-size: 14px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0px -1px 0px #222;
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		border-radius: 5px;
 		border: 1px solid rgba(0,0,0,.4);
-		box-shadow: inset 0px 1px 0px rgba(255,255,255,.08), 0px 1px 0px rgba(255,255,255,.05);
+		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05);
 		cursor: pointer;
-	}
-	.message .button:first-of-type {
-		margin: 15px 5% 18px 0px !important;
-	}
-	.message .button.active {
-		color: #fff;
-		box-shadow: inset 0px 1px 0px rgba(255,255,255,.08), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 4px #005ecc;
-	}
-	.message .button:hover {
-		background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57));
-	}
-	.message .button:active,
-	.message .button.pressed {
-		background-color: #393939;
-		background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60));
-	}
 
-	/* Sign in ------------------------------------------------*/
-	.sign_in {
-		float: left;
-		width: 100%;
-		margin-top: 1px;
-		padding: 5px 0px;
-		color: #eee;
-		font-size: 14px;
-		text-shadow: 0px -1px 0px #222;
-		line-height: 20px;
-	}
-	.sign_in input {
-		float: left;
-		width: 88%;
-		padding: 7px 1% 9px 1%;
-		margin: 0px 5%;
-		background-color: transparent;
-		color: #fff;
-		text-shadow: 0px -1px 0px #222;
-		border: none;
-		border-bottom: 1px solid #222;
-		box-shadow: 0px 1px 0px rgba(255,255,255,.1);
-		border-radius: 0px;
-		outline: none;
-	}
-	.sign_in input:first-of-type {
-		margin-bottom: 10px;
-	}
-	.sign_in input.error:focus {
-		box-shadow: 0px 1px 0px rgba(204, 0, 7, 0.6);
-	}
-	.message #version {
-		display: inline-block;
-		margin-top: 23px;
-		margin-left: 5%;
-		color: #888;
-		text-shadow: 0px -1px 0px #111;
-	}
-	.message #version span {
-		display: none;
-	}
-	.message #version span a {
-		color: #888;
+		&:first-of-type { margin: 15px 5% 18px 0; }
+
+		&.active {
+			color: #fff;
+			box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .1), 0 0 4px #005ecc;
+		}
+
+		&:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); }
+
+		&:active,
+		&.pressed { background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60)); }
 	}
 
-	/* Input Misc ------------------------------------------------*/
-	.message input.text {
+	/* Input ------------------------------------------------*/
+	input.text {
 		float: left;
 		width: calc(100% - 10px);
 		padding: 17px 5px 9px 5px;
 		margin-top: 10px;
 		background-color: transparent;
 		color: #fff;
-		text-shadow: 0px -1px 0px #222;
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		border: none;
-		box-shadow: 0px 1px 0px rgba(255,255,255,.1);
+		box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
 		border-bottom: 1px solid #222;
 		border-radius: 0px;
 		outline: none;
 	}
-	.message input.less {
-		margin-bottom: -10px;
-	}
-	.message input.more {
-		margin-bottom: 30px;
-	}
-	.message .copylink {
-		margin-bottom: 20px;
-	}
+
+	input.less { margin-bottom: -10px; }
+
+	input.more { margin-bottom: 30px; }
+
+	.copylink { margin-bottom: 20px; }
 
 	/* Radio Buttons ------------------------------------------------*/
-	.message .choice {
+	.choice {
 		float: left;
 		margin: 12px 5%;
 		width: 90%;
 		color: #fff;
-	}
 
-		.message .choice input {
-			float: left;
-		}
-		.message .choice h2 {
+		input { float: left; }
+
+		h2 {
 			float: left;
-			margin: 1px 0px 0px 8px;
+			margin: 1px 0 0 8px;
 			color: #fff;
 			font-size: 14px;
 			font-weight: 700;
 			text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		}
-		.message .choice p {
+
+		p {
 			margin-top: 2px;
-			padding: 0px 5% 0px 25px;
+			padding: 0 5% 0 25px;
 			color: #aaa;
 			font-size: 13px;
 		}
 
-			.message .choice p input {
-				width: 100%;
-				padding: 10px 1px 9px;
-				margin-top: 10px;
-			}
+		p input {
+			width: 100%;
+			padding: 10px 1px 9px;
+			margin-top: 10px;
+		}
+	}
+
+	/* Version ------------------------------------------------*/
+	#version {
+		display: inline-block;
+		margin-top: 23px;
+		margin-left: 5%;
+		color: #888;
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+
+		span { display: none; }
+
+		span a { color: #888; }
+	}
+
+}
+
+/* Sign in ------------------------------------------------*/
+.sign_in {
+
+	float: left;
+	width: 100%;
+	margin-top: 1px;
+	padding: 5px 0;
+	color: #eee;
+	font-size: 14px;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+	line-height: 20px;
+
+	/* Input ------------------------------------------------*/
+	input {
+		float: left;
+		width: 88%;
+		padding: 7px 1% 9px 1%;
+		margin: 0 5%;
+		background-color: transparent;
+		color: #fff;
+		text-shadow: 0 -1px 0 #222;
+		border: none;
+		border-bottom: 1px solid #222;
+		box-shadow: 0 1px 0 rgba(255,255,255,.1);
+		border-radius: 0;
+		outline: none;
+
+		&:first-of-type { margin-bottom: 10px; }
+
+		&.error:focus { box-shadow: 0 1px 0 rgba(204, 0, 7, .6); }
+	}
+
+}

src/styles/_upload.scss

@@ -5,16 +5,19 @@
 #upload {
 	display: none;
 }
+
 .upload_overlay {
 	position: fixed;
 	width: 100%;
 	height: 100%;
-	top: 0px;
-	left: 0px;
-	background-color: rgba(0,0,0,.85);
+	top: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, .85);
 	z-index: 1000;
 }
+
 .upload_message {
+
 	position: absolute;
 	display: inline-block;
 	width: 450px;
@@ -22,40 +25,39 @@
 	margin-top: -170px;
 	background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
 	border-radius: 5px;
-	box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08), inset 1px 0px 0px rgba(255,255,255,.03), inset -1px 0px 0px rgba(255,255,255,.03);
+	box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
 	animation-name: moveUp;
 	animation-duration: .3s;
 	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
-}
 
 	/* Header ------------------------------------------------*/
-	.upload_message h1 {
+	h1 {
 		float: left;
 		width: 100%;
-		padding: 12px 0px;
+		padding: 12px 0;
 		color: #fff;
 		font-size: 16px;
 		font-weight: bold;
-		text-shadow: 0px -1px 0px #222;
+		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
 		text-align: center;
 	}
-	.upload_message .close {
+
+	.close {
 		display: none;
 		position: absolute;
-		top: 0px;
-		right: 0px;
+		top: 0;
+		right: 0;
 		padding: 11px 14px 6px 7px;
 		color: #aaa;
 		font-size: 20px;
-		text-shadow: 0px -1px 0px #222;
+		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
 		cursor: pointer;
-	}
-	.upload_message .close:hover {
-		color: #fff;
+
+		&:hover { color: #fff; }
 	}
 
 	/* Rows ------------------------------------------------*/
-	.upload_message .rows {
+	.rows {
 		float: left;
 		margin: 3px 8px 8px 8px;
 		width: calc(100% - 16px);
@@ -64,23 +66,20 @@
 		overflow: hidden;
 		overflow-y: scroll;
 		border-radius: 3px;
-		box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .8);
+		box-shadow: inset 0 0 3px rgba(0, 0, 0, .8);
 	}
 
 	/* Row ------------------------------------------------*/
-	.upload_message .rows .row {
+	.rows .row {
 		float: left;
 		display: inline-block;
-		padding: 8px 0px;
+		padding: 8px 0;
 		width: 100%;
 		background-color: rgba(255, 255, 255, .02);
-	}
 
-	.upload_message .rows .row:nth-child(2n) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+		&:nth-child(2n) { background-color: rgba(255, 255, 255, 0); }
 
-		.upload_message .rows .row a.name {
+		a.name {
 			float: left;
 			padding: 5px 10px;
 			width: calc(70% - 20px);
@@ -90,42 +89,37 @@
 			overflow: hidden;
 		}
 
-		.upload_message .rows .row a.status {
+		a.status {
 			float: left;
 			padding: 5px 10px;
 			width: calc(30% - 20px);
 			color: rgba(255, 255, 255, .5);
 			font-size: 14px;
 			text-align: right;
-		}
 
-		.upload_message .rows .row a.status {
 			animation-name: pulse;
 			animation-duration: 2s;
 			animation-timing-function: ease-in-out;
 			animation-iteration-count: infinite;
-		}
 
-			.upload_message .rows .row a.status.error,
-			.upload_message .rows .row a.status.success {
-				animation: none;
-			}
+			&.error,
+			&.success { animation: none; }
 
-			.upload_message .rows .row a.status.error {
-				color: rgb(213, 24, 24);
-			}
+			&.error { color: rgb(213, 24, 24); }
 
-			.upload_message .rows .row a.status.success {
-				color: rgb(42, 213, 0);
-			}
+			&.success { color: rgb(42, 213, 0); }
+		}
 
-		.upload_message .rows .row p.notice {
+		p.notice {
 			display: none;
 			float: left;
 			padding: 2px 10px 5px;
 			width: calc(100% - 20px);
-			color: rgba(255,255,255,.5);
+			color: rgba(255, 255, 255, .5);
 			font-size: 12px;
 			overflow: hidden;
 			line-height: 16px;
-		}
+		}
+	}
+
+}