From 03e7113bb90c11a43021b76d06c2ae210ccf0a69 Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Sun, 4 Jan 2015 20:27:07 +0100
Subject: [PATCH] Style adjustments

- black() and white() functions
- Added vars
---
 dist/main.css                | Bin 34664 -> 34695 bytes
 src/styles/_animations.scss  |  10 +++++-----
 src/styles/_content.scss     |  28 +++++++++++++--------------
 src/styles/_contextmenu.scss |  22 ++++++++++-----------
 src/styles/_etc.scss         |  21 ++++++++++++++++++++
 src/styles/_header.scss      |  24 +++++++++++------------
 src/styles/_imageview.scss   |  12 ++++++------
 src/styles/_infobox.scss     |  22 ++++++++++-----------
 src/styles/_loading.scss     |   6 +++---
 src/styles/_mediaquery.scss  |  20 +++++++++----------
 src/styles/_message.scss     |  36 +++++++++++++++++------------------
 src/styles/_upload.scss      |  22 ++++++++++-----------
 src/styles/main.scss         |   1 +
 13 files changed, 123 insertions(+), 101 deletions(-)
 create mode 100644 src/styles/_etc.scss

diff --git a/dist/main.css b/dist/main.css
index 5a5961f4e74159bddf2d998f14c9f1b60bc860d0..df0acb5aa50a68d189202f5ad3b945eefff23259 100644
GIT binary patch
delta 142
zcmaFS$JE}>v>{$;a-|gS<Uhe&n`@M;m^SZGnWHgTL`-0^w=XY?ZhmRW=0aa%CRCBV
z{@)md6jBq5Q$Y%J$}>|+G8FWTCi988ObX)Rgv)H^391u7(K`8lqQvIiN!8q}NjZth
Q*_-ofco;Xk<ts@50JR@5Q2+n{

delta 87
zcmZqgXL`}cv>{$;az=>o<{Tv#CN|yV{G9xv%^OtaXiN_9mE4@`Ys>^@9Q6OjIQc+e
lB%4loW=cuM<OE-_&2~Xa0uafh$=sVeYXlfKr{*h3006NyAlCo@

diff --git a/src/styles/_animations.scss b/src/styles/_animations.scss
index 91d7e0c..d58e591 100755
--- a/src/styles/_animations.scss
+++ b/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;
diff --git a/src/styles/_content.scss b/src/styles/_content.scss
index 8d72e76..5d6d99a 100644
--- a/src/styles/_content.scss
+++ b/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; }
diff --git a/src/styles/_contextmenu.scss b/src/styles/_contextmenu.scss
index 74ce2d9..ce1e003 100644
--- a/src/styles/_contextmenu.scss
+++ b/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;
 	}
diff --git a/src/styles/_etc.scss b/src/styles/_etc.scss
new file mode 100644
index 0000000..fffa722
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
index 8e82ec8..bd15322 100644
--- a/src/styles/_header.scss
+++ b/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); }
 	}
 
 }
\ No newline at end of file
diff --git a/src/styles/_imageview.scss b/src/styles/_imageview.scss
index 367e6e5..7af66c8 100644
--- a/src/styles/_imageview.scss
+++ b/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));
 		}
 	}
 
diff --git a/src/styles/_infobox.scss b/src/styles/_infobox.scss
index 057b2b5..a523e59 100644
--- a/src/styles/_infobox.scss
+++ b/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 {
diff --git a/src/styles/_loading.scss b/src/styles/_loading.scss
index f19e9e9..9739f9a 100644
--- a/src/styles/_loading.scss
+++ b/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 {
diff --git a/src/styles/_mediaquery.scss b/src/styles/_mediaquery.scss
index f96472e..50324f4 100644
--- a/src/styles/_mediaquery.scss
+++ b/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;
 	}
 
diff --git a/src/styles/_message.scss b/src/styles/_message.scss
index c49a874..a5b0695 100644
--- a/src/styles/_message.scss
+++ b/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;
 
diff --git a/src/styles/_upload.scss b/src/styles/_upload.scss
index d98e350..2ad76d6 100644
--- a/src/styles/_upload.scss
+++ b/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;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6f8a31d..9708f09 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,6 +2,7 @@
  * @copyright   2014 by Tobias Reich
  */
 
+@import 'etc';
 @import 'reset';
 
 * {