Style adjustments

- black() and white() functions
- Added vars

src/styles/_animations.scss

@@ -7,28 +7,28 @@
 	animation-name: fadeIn;
 	animation-duration: .3s;
 	animation-fill-mode: forwards;
-	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
+	animation-timing-function: $timingBounce;
 }
 
 .fadeOut {
 	animation-name: fadeOut;
 	animation-duration: .3s;
 	animation-fill-mode: forwards;
-	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
+	animation-timing-function: $timingBounce;
 }
 
 .contentZoomIn {
 	animation-name: zoomIn;
 	animation-duration: .2s;
 	animation-fill-mode: forwards;
-	animation-timing-function: cubic-bezier(0.51,.92,.24,1);
+	animation-timing-function: $timing;
 }
 
 .contentZoomOut {
 	animation-name: zoomOut;
 	animation-duration: .2s;
 	animation-fill-mode: forwards;
-	animation-timing-function: cubic-bezier(0.51,.92,.24,1);
+	animation-timing-function: $timing;
 }
 
 /* moveUp ------------------------------------------------*/
@@ -115,7 +115,7 @@
 		opacity: 1;
 	}
 	50% {
-		opacity: 0.3;
+		opacity: .3;
 	}
 	100% {
 		opacity: 1;

src/styles/_content.scss

@@ -14,7 +14,7 @@
 		position: absolute;
 		width: 100%;
 		height: 1px;
-		border-top: 1px solid rgba(255, 255, 255, .02);
+		border-top: 1px solid white(.02);
 	}
 }
 
@@ -33,14 +33,14 @@
 			width: 200px;
 			height: 200px;
 			background-color: #222;
-			box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-			border: 1px solid rgba(255, 255, 255, .5);
+			box-shadow: 0 2px 5px black(.5);
+			border: 1px solid white(.5);
 			transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
 		}
 
 		&:hover img,
 		&.active img {
-			border-color: #2293EC;
+			border-color: $colorBlue;
 		}
 	}
 
@@ -72,7 +72,7 @@
 		position: absolute;
 		margin: 0 1px;
 		width: 200px;
-		background: rgba(0, 0, 0, .6);
+		background: black(.6);
 		bottom: 1px;
 	}
 
@@ -117,14 +117,14 @@
 		position: absolute;
 		margin: -1px 0 0 12px;
 		padding: 12px 7px 3px 7px;
-		box-shadow: 0 0 2px rgba(0, 0, 0, .6);
-		background: #d02a32;
+		box-shadow: 0 0 2px black(.6);
+		background: $colorRed;
 		border-radius: 0 0 5px 5px;
 		border: 1px solid #fff;
 		border-top: none;
 		color: #fff;
 		font-size: 24px;
-		text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
+		text-shadow: 0 1px 0 black(.4);
 		opacity: .9;
 
 		&:nth-child(2n) { margin-left: 57px; }
@@ -132,7 +132,7 @@
 		.iconic {
 			fill: #fff;
 			width: 21px;
-			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .1) );
+			filter: drop-shadow( 0 -1px 0 black(.1) );
 		}
 	}
 
@@ -143,8 +143,8 @@
 		padding: 10px 0 0;
 		width: 100%;
 		opacity: 0;
-		border-top: 1px solid rgba(255, 255, 255, .02);
-		box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2);
+		border-top: 1px solid white(.02);
+		box-shadow: 0 -1px 0 0 black(.2);
 
 		&:first-child {
 			margin-top: 10px;
@@ -155,10 +155,10 @@
 		h1 {
 			float: left;
 			margin: 0 0 0 30px;
-			color: rgba(255, 255, 255, .6);
+			color: white(.6);
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
+			text-shadow: 0 -1px 0 black(.1);
 		}
 	}
 
@@ -173,7 +173,7 @@
 		margin-left: -90px;
 		padding-top: 20px;
 		color: rgba(15, 15, 15, 1);
-		text-shadow: 0 1px 0 rgba(255, 255, 255, .01);
+		text-shadow: 0 1px 0 white(.01);
 		text-align: center;
 
 		.icon { font-size: 80px; }

src/styles/_contextmenu.scss

@@ -7,21 +7,21 @@
 
 	padding: 5px 0 6px;
 	background: linear-gradient(to bottom, #333, #252525);
-	border: 1px solid rgba(0, 0, 0, .7);
-	border-bottom: 1px solid rgba(0, 0, 0, .8);
+	border: 1px solid black(.7);
+	border-bottom: 1px solid black(.8);
 	border-radius: 5px;
-	box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
+	box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
 
 	/* Item ------------------------------------------------*/
 	tr {
 		margin-bottom: 2px;
 		color: #eee;
 		font-size: 14px;
-		text-shadow: 0 -1px 0px rgba(0, 0, 0, .1);
+		text-shadow: 0 -1px 0px black(.1);
 
 		&.separator {
-			background-color: rgba(0, 0, 0, .2);
-			border-bottom: 1px solid rgba(255, 255, 255, .06);
+			background: black(.2);
+			border-bottom: 1px solid white(.06);
 		}
 	}
 
@@ -32,12 +32,12 @@
 			border-radius: 0;
 			transition: none;
 
-			&:hover { background: linear-gradient(to bottom, #2293EC, darken(#2293EC, 5%)); }
+			&:hover { background: linear-gradient(to bottom, $colorBlue, darken($colorBlue, 5%)); }
 		}
 
 			tr td .albumCover {
 				border-radius: 2px;
-				box-shadow: 0 0 0 1px rgba(0,0,0,.5);
+				box-shadow: 0 0 0 1px black(.5);
 				position: absolute;
 			}
 
@@ -51,10 +51,10 @@
 		width: 100%;
 		margin: -2px 0 -1px -2px;
 		padding: 5px 7px 6px 7px;
-		background-color: #333;
+		background: #333;
 		color: #fff;
-		border: 1px solid rgba(0, 0, 0, .4);
-		box-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
+		border: 1px solid black(.4);
+		box-shadow: 0px 1px 0px white(.05);
 		outline: none;
 		border-radius: 3px;
 	}

src/styles/_etc.scss

@@ -0,0 +1,21 @@
+/**
+ * @copyright   2014 by Tobias Reich
+ */
+
+/* Functions ------------------------------------------------*/
+@function black($opacity) {
+	@return rgba(0, 0, 0, $opacity);
+}
+
+@function white($opacity) {
+	@return rgba(255, 255, 255, $opacity);
+}
+
+/* Vars ------------------------------------------------*/
+// Colors
+$colorBlue:		#2293EC;
+$colorRed:		#d02a32;
+
+// Animations
+$timing:		cubic-bezier(.51, .92, .24, 1);
+$timingBounce:	cubic-bezier(.51, .92, .24, 1.15);

src/styles/_header.scss

@@ -42,19 +42,19 @@ header {
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+		text-shadow: 0 -1px 0 black(.2);
 		z-index: 1;
 
 		.iconic {
 			display: none;
 			margin: 0 0 0 10px;
 			width: 10px;
-			fill: rgba(255, 255, 255, .5);
-			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
-			transition: fill .2s ease;
+			fill: white(.5);
+			filter: drop-shadow(0 -1px 0 black(.2));
+			transition: fill .2s ease-out;
 		}
 
-		&:hover .iconic { fill: rgba(255, 255, 255, 1); }
+		&:hover .iconic { fill: white(1); }
 
 		&.editable { cursor: pointer; }
 
@@ -83,12 +83,12 @@ header {
 		&--right { float: right; }
 
 		.iconic {
-			fill: rgba(255, 255, 255, .5);
-			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
-			transition: fill .2s ease;
+			fill: white(.5);
+			filter: drop-shadow(0 -1px 0 black(.2));
+			transition: fill .2s ease-out;
 		}
 
-		&:hover .iconic { fill: rgba(255, 255, 255, 1); }
+		&:hover .iconic { fill: white(1); }
 
 		&--star.active .iconic { fill: #f0ef77; }
 
@@ -118,7 +118,7 @@ header {
 		outline: none;
 		border-radius: 50px;
 		opacity: .6;
-		transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
+		transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s ease-out, width .2s ease-out;
 
 		&:focus { width: 140px; }
 
@@ -149,12 +149,12 @@ header {
 		margin: 13px 9px;
 		color: #888;
 		font-size: 13px;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+		text-shadow: 0 -1px 0 black(.2);
 		border-radius: 100px;
 		display: none;
 		cursor: pointer;
 
-		&:hover { background-color: rgba(0, 0, 0, .3); }
+		&:hover { background-color: black(.3); }
 	}
 
 }

src/styles/_imageview.scss

@@ -14,7 +14,7 @@
 	/* Modes ------------------------------------------------*/
 	&.view { background-color: inherit; }
 
-	&.full { background-color: rgba(0, 0, 0, 1); }
+	&.full { background-color: black(1); }
 
 	/* ImageView ------------------------------------------------*/
 	#image {
@@ -26,10 +26,10 @@
 		background-repeat: no-repeat;
 		background-position: 50% 50%;
 		background-size: contain;
-		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(.51, .92, .24, 1.15);
+		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
 		animation-name: zoomIn;
 		animation-duration: .3s;
-		animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
+		animation-timing-function: $timingBounce;
 
 		&.small {
 			top: 50%;
@@ -68,7 +68,7 @@
 			// The background-image will be styled dynamically via JS
 			// background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('');
 			background-size: 100% 100%;
-			border: 1px solid rgba(255, 255, 255, .8);
+			border: 1px solid white(.8);
 			cursor: pointer;
 			opacity: .6;
 			z-index: 2;
@@ -91,8 +91,8 @@
 		a:hover { opacity: 1; }
 
 		.iconic {
-			fill: rgba(255, 255, 255, .8);
-			filter: drop-shadow( 0 1px 0 rgba(0, 0, 0, .4) );
+			fill: white(.8);
+			filter: drop-shadow(0 1px 0 black(.4));
 		}
 	}
 

src/styles/_infobox.scss

@@ -9,7 +9,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, .8);
+	background-color: black(.8);
 }
 
 #infobox {
@@ -20,9 +20,9 @@
 	width: 350px;
 	height: 100%;
 	background-color: rgba(30, 30, 30, .98);
-	box-shadow: -1px 0 2px rgba(0, 0, 0, .7);
+	box-shadow: -1px 0 2px black(.7);
 	transform: translateX(0);
-	transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
+	transition: transform .3s $timingBounce;
 
 	&.active { transform: translateX(-92%); }
 
@@ -66,7 +66,7 @@
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+		text-shadow: 0 -1px 0 black(.2);
 	}
 
 	.header .close {
@@ -77,8 +77,8 @@
 
 		.iconic {
 			fill: #888;
-			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
-			transition: fill .2s ease;
+			filter: drop-shadow(0 -1px 0 black(.2));
+			transition: fill .2s ease-out;
 		}
 
 		&:hover .iconic { fill: #fff; }
@@ -90,12 +90,12 @@
 		float: left;
 		padding: 12px 0 8px;
 		width: 100%;
-		border-top: 1px solid rgba(255, 255, 255, .02);
-		box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2);
+		border-top: 1px solid white(.02);
+		box-shadow: 0 -1px 0 0 black(.2);
 
 		h1 {
 			margin: 0 0 0 20px;
-			color: rgba(255, 255, 255, .6);
+			color: white(.6);
 			font-size: 14px;
 			font-weight: bold;
 		}
@@ -147,12 +147,12 @@
 		float: left;
 		padding: 6px 10px;
 		margin: 0 6px 8px 0;
-		background-color: rgba(0, 0, 0, .5);
+		background-color: black(.5);
 		border-radius: 100px;
 		font-size: 12px;
 		transition: background-color .3s;
 
-		&:hover { background-color: rgba(0, 0, 0, .3); }
+		&:hover { background-color: black(.3); }
 	}
 
 	#tags .tag span {

src/styles/_loading.scss

@@ -9,7 +9,7 @@
 	height: 3px;
 	background-size: 100px 3px;
 	background-repeat: repeat-x;
-	border-bottom: 1px solid rgba(0, 0, 0, .3);
+	border-bottom: 1px solid black(.3);
 	display: none;
 	animation-name: moveBackground;
 	animation-duration: .3s;
@@ -29,11 +29,11 @@
 
 	/* Content ------------------------------------------------*/
 	h1 {
-		margin: 13px 13px 0px 13px;
+		margin: 13px 13px 0 13px;
 		color: #ddd;
 		font-size: 14px;
 		font-weight: bold;
-		text-shadow: 0px 1px 0px #000;
+		text-shadow: 0 1px 0 black(1);
 		text-transform: capitalize;
 
 		span {

src/styles/_mediaquery.scss

@@ -5,11 +5,11 @@
 @media only screen and (max-width: 900px) {
 
 	#title {
-		margin: 0px 20% !important;
+		margin: 0 20% !important;
 		width: 40% !important;
 	}
 	#title.view {
-		margin: 0px 20% !important;
+		margin: 0 20% !important;
 		width: 60% !important;
 	}
 	#title span {
@@ -25,19 +25,19 @@
 	#title.view {
 		display: block !important;
 		width: 70% !important;
-		margin: 0px 20% 0px 10% !important;
+		margin: 0 20% 0 10% !important;
 	}
 	#button_move {
 		display: none !important;
 	}
 
 	.center {
-		top: 0px !important;
-		left: 0px !important;
+		top: 0 !important;
+		left: 0 !important;
 	}
 
 	.album, .photo {
-		margin: 40px 0px 0px 50px !important;
+		margin: 40px 0 0 50px !important;
 	}
 
 	#imageview .arrow_wrapper {
@@ -48,16 +48,16 @@
 		position: fixed !important;
 		width: 100% !important;
 		height: 100% !important;
-		margin: 1px 0px 0px 0px !important;
-		border-radius: 0px !important;
+		margin: 1px 0 0 0 !important;
+		border-radius: 0 !important;
 
 		/* Animation */
 		animation: moveUp .3s !important;
 	}
 
 	.upload_message {
-		margin-top: 0px !important;
-		margin-left: 0px !important;
+		margin-top: 0 !important;
+		margin-left: 0 !important;
 		width: 100% !important;
 	}
 

src/styles/_message.scss

@@ -8,7 +8,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, .85);
+	background-color: black(.85);
 	z-index: 1000;
 }
 
@@ -21,12 +21,12 @@
 	margin-top: -95px;
 	background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
 	border-radius: 5px;
-	box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
+	box-shadow: 0 0 5px black(1), inset 0 1px 0 white(.08);
 
 	/* Animation */
 	animation-name: moveUp;
 	animation-duration: .3s;
-	animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
+	animation-timing-function: $timingBounce;
 
 	/* Header ------------------------------------------------*/
 	h1 {
@@ -36,7 +36,7 @@
 		color: #fff;
 		font-size: 16px;
 		font-weight: bold;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 black(.3);
 		text-align: center;
 	}
 
@@ -47,10 +47,10 @@
 		padding: 12px 14px 6px 7px;
 		color: #aaa;
 		font-size: 20px;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 black(.3);
 		cursor: pointer;
 
-		&:hover { color: #fff; }
+		&:hover { color: white(1); }
 	}
 
 	/* Text ------------------------------------------------*/
@@ -61,12 +61,12 @@
 		padding: 12px 5% 15px 5%;
 		color: #eee;
 		font-size: 14px;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 black(.3);
 		line-height: 20px;
 
 		b {
 			font-weight: bold;
-			color: #fff;
+			color: white(1);
 		}
 
 		a {
@@ -85,17 +85,17 @@
 		font-size: 14px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 black(.3);
 		border-radius: 5px;
-		border: 1px solid rgba(0,0,0,.4);
-		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05);
+		border: 1px solid black(.4);
+		box-shadow: inset 0 1px 0 white(.08), 0 1px 0 white(.05);
 		cursor: pointer;
 
 		&: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;
+			box-shadow: inset 0 1px 0 white(.08), 0 1px 0 white(.1), 0 0 4px #005ecc;
 		}
 
 		&:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); }
@@ -112,9 +112,9 @@
 		margin-top: 10px;
 		background-color: transparent;
 		color: #fff;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 black(.3);
 		border: none;
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
+		box-shadow: 0 1px 0 white(.1);
 		border-bottom: 1px solid #222;
 		border-radius: 0px;
 		outline: none;
@@ -141,7 +141,7 @@
 			color: #fff;
 			font-size: 14px;
 			font-weight: 700;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+			text-shadow: 0 -1px 0 black(.3);
 		}
 
 		p {
@@ -164,7 +164,7 @@
 		margin-top: 23px;
 		margin-left: 5%;
 		color: #888;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 black(.3);
 
 		span { display: none; }
 
@@ -182,7 +182,7 @@
 	padding: 5px 0;
 	color: #eee;
 	font-size: 14px;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+	text-shadow: 0 -1px 0 black(.3);
 	line-height: 20px;
 
 	/* Input ------------------------------------------------*/
@@ -196,7 +196,7 @@
 		text-shadow: 0 -1px 0 #222;
 		border: none;
 		border-bottom: 1px solid #222;
-		box-shadow: 0 1px 0 rgba(255,255,255,.1);
+		box-shadow: 0 1px 0 white(.1);
 		border-radius: 0;
 		outline: none;
 

src/styles/_upload.scss

@@ -12,7 +12,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, .85);
+	background-color: black(.85);
 	z-index: 1000;
 }
 
@@ -25,10 +25,10 @@
 	margin-top: -170px;
 	background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
 	border-radius: 5px;
-	box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
+	box-shadow: 0 0 5px #000, inset 0 1px 0 white(.08);
 	animation-name: moveUp;
 	animation-duration: .3s;
-	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
+	animation-timing-function: $timingBounce;
 
 	/* Header ------------------------------------------------*/
 	h1 {
@@ -38,7 +38,7 @@
 		color: #fff;
 		font-size: 16px;
 		font-weight: bold;
-		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
+		text-shadow: 0px -1px 0px black(.3);
 		text-align: center;
 	}
 
@@ -50,7 +50,7 @@
 		padding: 11px 14px 6px 7px;
 		color: #aaa;
 		font-size: 20px;
-		text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
+		text-shadow: 0px -1px 0px black(.3);
 		cursor: pointer;
 
 		&:hover { color: #fff; }
@@ -62,11 +62,11 @@
 		margin: 3px 8px 8px 8px;
 		width: calc(100% - 16px);
 		height: 300px;
-		background-color: rgba(0, 0, 0, .5);
+		background-color: black(.5);
 		overflow: hidden;
 		overflow-y: scroll;
 		border-radius: 3px;
-		box-shadow: inset 0 0 3px rgba(0, 0, 0, .8);
+		box-shadow: inset 0 0 3px black(.8);
 	}
 
 	/* Row ------------------------------------------------*/
@@ -75,9 +75,9 @@
 		display: inline-block;
 		padding: 8px 0;
 		width: 100%;
-		background-color: rgba(255, 255, 255, .02);
+		background-color: white(.02);
 
-		&:nth-child(2n) { background-color: rgba(255, 255, 255, 0); }
+		&:nth-child(2n) { background-color: white(0); }
 
 		a.name {
 			float: left;
@@ -93,7 +93,7 @@
 			float: left;
 			padding: 5px 10px;
 			width: calc(30% - 20px);
-			color: rgba(255, 255, 255, .5);
+			color: white(.5);
 			font-size: 14px;
 			text-align: right;
 
@@ -115,7 +115,7 @@
 			float: left;
 			padding: 2px 10px 5px;
 			width: calc(100% - 20px);
-			color: rgba(255, 255, 255, .5);
+			color: white(.5);
 			font-size: 12px;
 			overflow: hidden;
 			line-height: 16px;

src/styles/main.scss

@@ -2,6 +2,7 @@
  * @copyright   2014 by Tobias Reich
  */
 
+@import 'etc';
 @import 'reset';
 
 * {