From a5adb4f0bdfbd536abf6754a2bc9d0f826f19f5a Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Mon, 29 Dec 2014 01:50:57 +0100
Subject: [PATCH] New design

---
 dist/main.css                | Bin 35002 -> 33569 bytes
 dist/main.js                 | Bin 169466 -> 169544 bytes
 dist/view.js                 | Bin 96717 -> 96795 bytes
 index.html                   |   7 ++-
 src/scripts/build.coffee     |  12 ++---
 src/styles/_content.scss     |  88 ++++++++---------------------------
 src/styles/_contextmenu.scss |  19 +++-----
 src/styles/_header.scss      |  33 +++++--------
 src/styles/_infobox.scss     |  31 +++++-------
 src/styles/main.scss         |   2 +-
 10 files changed, 61 insertions(+), 131 deletions(-)

diff --git a/dist/main.css b/dist/main.css
index 3f19d66d586a1efc2470739156bd07549a39b047..da444a280b177ce20a9404d64bd065901befb6e0 100644
GIT binary patch
delta 881
zcmY*XPiWIn7$>RgWZgQ%>6n{cT<mP1EqMv;wnR@d^)Scg#Oh`2rTNon*MuZ>)zQgB
zWfu?Q13iesKs@L`A)e-h3W5j4yPiD?dJ%8K_tq6xetD4Zd++!C`+ZyM?8XE3&FyFu
z=@el-+UN<hM^@N~rfK2p{?BYoc556jNfYwq+3^0c^N~AB1`(G?fF!r3x>(okiltD4
z8zYAhRL!Yn{1VokC51kuSDvNel$fT-<^@&5#T%CAR4cl|>!O5ZiI6<q@G>6O?W(`a
z%Ml(qdp8Qr>q8^q!Wr&@%w_GOQ?ZNbtXpydhs$bMw~Ur|*|f`Lg*Q!8U9$C{q)3Df
ze>8Le34#hcT1qEB^{j5+v`N-wv+UqNDH~>>E@IEJD@slz=}7heJKS~bg+rp4R2>%=
z?ckOo?r&#*qX>3J=DO$zL{27j*uFc!<^@<;9EMH)UQ9G8)WE0(&@1pP5@0=Z82pou
zVzMl!c_~K$+kL6-eYOA_eu5nnVD@?v9w!dLGd~Ki>M?kq?2AZ38dif7Ob-4g7iho)
zGX&Mq<BSZA(U0+_l4%}Ij2nhVA`9_dZCf4zP--yzaq2}fCP@<UVhZ|>*e#Q09_Zwo
z)rY?>cCj!$^OTX`=S-u6?!Y*_)JC9E=!EaHS0Wf=GWjRr*GmgbKZ&XqowDOK#c7JJ
zh~e7hPb@qy9EI7!94iaqR^dyuQx?<ogNO4%WQ@r6p=S_&&v%61=BHTL98ScMNztl{
z4yw1^)mAFJ!*3ZWbTx;8DeE9iuMSQqZF=Q|I&W7@hb%Cc^$iz$IB-0!gqHWVqN%0S
nu4NcE&au%vX&i}g%{mS5EClFk9^$0|SSt)cx6vI=ma5!8-dY>t

delta 1905
zcmaJ?-EZ4e6qjAdMA^F0m7=7SICaMsh%Lu<KI(uF4+Sb%K?Mnob?UBTC%GfBBl~9Q
z7FFp3;%yS>Jirs8FbS~-Kr#;qBoy|9#D_GAM-YEN{{pl<aIcf*3m2Wly7!!WkAA<O
z&pAGLpa1?t{+pYz8C6w-{aEkRhFEqTVmrhzOuOQGcIRk+{(PzF`j}wXF_7uI^%k*9
zb-O|grPRh2sTo;CIajLLxLPBIs=#6VnUkWLXO<CZez>@ier2>xmrU2QY)>L?)5tb=
z1)36Df~aZQ-Vq4-I=0(GBo_9Yb#%jUT*nSxSm^RI<#IXrY4H~xlDj7!%Gq@HQT*i@
zDNHHRoTUcxs@Rc2m|2xNn#i)SQ#IH|DA2#ga4w2gUN?19P%<Ji)v{U^7#WKA!W)qh
z27XuaYshljh9W3}MpJoJ6J1a;%;e&bo`)>l@`r~s*j(;*4OAhvmyw$_m$-s#BCBc}
zedqrRJ|M(2lR`q{3?(&BDfVB6R;0_p%gE8CiOTO*J-6jphSY}p@kCry6pB1EhFVDv
zX|Em^OqbjyDr0iPkahTR`R%TZX@y8WK~r=_{?3Hx6c<x#PeygK)fjLe9UiDKDb0Vv
zogwWmEkH?KJ0@Wbd3Izf7MR3Er3>F8#TSW<-G~6!t=a>0V+Tg?7&?tsVpK|k8<F6c
ze-hh3Ga-Uzm#NQg2od0pu#Lwju^p$JXNS#sRFgxwLp}=QW8v$VwlDmB`3ZTfDswbA
zED<HL$AP=H5YxgIg5=6Fr@|x2H&3bbB5fqvN^}ADc9x*Aa~gV$81%d+`CJ-4O}-b)
z>dfGS<plheIs<PBU(V~g&e~S3FdNoyl)IEl!hJLgceWpcgmaS1!-IATK2I(1*&KYA
z61gJ$nYv2hJilVl=fQRY_-pfA7WT!*;nvF6b9q$MD{4m6*Ybsz6gC~ET*1D0_uQPe
z&Wu7TG7FDQxem6MV%a>i;9z5x-wfxRAQDXKcBW<{s%zgRn=L|IXVOPpx9)d{y-SWJ
z5Sxf8+-SNUK@Nf2uioY~*m$is%Zi#6PgaGq7jMEpS3U`z-Mq@hv?4S3cs0%E)6i%=
z%`160TulT&y#5sre_3bX*48@Ut;OJvtzTm&R3*cH@WrJxR}Ai5a(H+Lug<A2GRufr
zjT!XX^0bR-NTucrX}G)nEvE(TD=r6zmmgh-8vbEnsKdf2<kEX0b}BBNwSw&1P2?fs
zdPW6%K9R~bT(>&MrJ3)i85aoRJIT|7Dx(uoV9TjGO9p#8>-@tyjTYc%^xUk$J`>@G
siDElTMSXzQmcq^uWX&%T4>^NRVjl?nUVdtE0BUqs5D`MbXJ%LU7iDIB0{{R3

diff --git a/dist/main.js b/dist/main.js
index b73c1a02160d09edd5c0c71ad510583eef084acb..39fe93b6a12a4a752b4a2eb03d9a3534f9efdca9 100644
GIT binary patch
delta 3532
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

delta 3466
zcmaJ^du$v>9o9H$LY%krupJY}KHKNr+}`G1e%xI)wv&`7j^o6M(~w>-VSTgqZF;_&
z?Cm+Wd`_PrsFJ4QM79)(phBQ|Hu3#&fJ8%3K@AN}+ES3x($a?t6)i0w)Cg4In_b&9
zAdpToJ2SuEH{bkTGxyxN^1q!ezj$;GVTEIJ0)!TSJZIIS&oISI>RE{v-dcVcD@!Yv
zIc@RkiY>(c`~#tdPb#Bm!&P6y%=M}@Xg{oK^;5B1&YEK>P0%D$qA@crPKeRLj3H#|
z^mH8+Rb{I%*fAW-#3Mc_BeCLL)xGnfe5$dDu;TNLbC#fcDHJNh+}yVA8jz8PG_%Vz
z4SgVIYJy9rE>Y}ADy)!d>j#A^ZR1c;+HcKT%mi_KVlbCZn0f}A6*sT%n>CB!B#(D&
zh2&cu`+?fkS%Ws-89@73=W?{CIt8>ZbXL|dF+yXBxVXXVce{m5EEiYm1(kPfvg>04
zj9VM?Xmgu18}~PxzFEN(Uz93ZjCnlqsHhJLv~X<mS_plAv%J_@OiwM+;$Js!nT@@a
ztsz+3*xC%!7N5B1**O>;NIdV5^$z6$YDSsDV#5w(wu2R}u*z~pQ3fJ@w5;&j(Bt<}
zB^UF>G2G~O=VF1l#FV7lJtQZRdW!aDsFsZ-<G}HFFwO7-UOq2SC8_wte11@78JNr_
zZG*~b==6^<&F%JhDC7ZcisOlx7FS{$rKCjT(E&qK@12;?QdzC=m*m<;&cPp#@^Kya
zb5!{6{R&<B3Y;1zD5UjyF*dUgNYrB|a2kQV1r|HR`SDH}pAf~VeQ8{jSUsl#u2DlX
za|XQYRdk7hU?!iZO&NUn+-_QYNq=J=wwlcPVA;2`&+s^Ua-?|$lT%uH$V`gk@Q?w^
z!fvei`p7Bn)Q3kA48_uDYdNI<_+SIPQSs1ybC**S4D$JIIhWQC<upMDkK(CE_L0R*
zrg~N#K%9%>gv1I9kLG~z(9!33g7iH4z4=TY)D3N~ZYG7o#jma`EI-}|f$;J7s(IiP
zn@*>=WZ(Ikdc6Z+T1p#IP22VnCJ*Ro%H06-Bmv%czN+x<nSzfhDfknU@F4$EVsVMi
z=x)m7(x&2*n4E=$xVH<Z&u*K?WR=2|0xNuSHd0RIEKBJL4MEy<ZY7TX`E%RsNdE4*
zGd7>qYyLkQ1o!#grF6=gQN!zviV1}l-al^u?ZAcVp8sIv^@5S14QECWRnuQ`LQSPm
zA`<YZ>UP&p<8hv{si_9d98U8SJbU3C+g@j%zUA1fYKe}RfsmmO4QWO`&kENrHGuj@
zm+H}0Om=}r|70`T{A3XA#Ysd$;myh4)-w43)dtmE%H%|*zh#xN)R;hvZxr9-k#qG&
zNjNI-%&(U;GTXo~X;RUq51iaUqtxT!d9EYrX~BEl1Fe16-$mPbBZM}0!#9tjDCmeX
zTD)*$-7L^}{pFL0sw2OA`i|91$$9+<T@5iP4J+NUp8ecZ&4OFHZ`Q7czv{Oji?zhP
zn^KuH47c5cS+b@;MX_+~JF5yOZ>|F94{yEzu3vfeM3k^nT_veUFqbw~kskEc@oF-T
z;rvzPgR*KSjY?@zltz?80+U8CN{LdcLtxg@)#Ne4tS48K)74apC8U07G%iL4;j@EU
z!n7lpTC|qzSjnJ~hzuYbhyNYj)Vf+rP(Q6d*OF8>!*SGu>gaABg2MQOWQsT`lM|V=
zsg0U&7mPVGguCfXEkGK}2a#pQnAp)RQ0u8Rq#eh4a}D`2TyGt$C;wc)<eZUG1VICk
zm2(lHo2F5HJg#-?T*yt?MAG2G7}m^W22}+{!vth!W*iYnQq@#>ie*6<u`~=z{LV$-
zKI^j$q<W>jk!)sqGKV!|lbYpuE-`Cc16j4$-qP((q2QwGP|Iu}ULPidymq;grpY2M
zzQCDvxY~WLh$|Ed;?m*}_Qr@m>%|7LrfzzOsON;hg{g)LGWHM~E@>po;XG3s6{P?`
z$Hb}fHyX_;%u*UjyEb)frvv9bj7@XKen~aEi5nlap?)OoM3EyZN{CQy(A%VV{hcC-
z2)EZg3ar!BM3y0KI8BL{D^r_d&kvPQ5v-tB&#z5pEo&lPSQ09D7g%Z&IZ-){`DsGj
z42#_4PRR7T$=V)A#`X$QgD0t)NNCK=;>MWq7gpk^nEzwNBe>SOa8)qt=Wc=*h4qn}
zRH2*KOlsS(x296f$nq;biVQ}j)o^ENyS21kB0n{BDilScFl&D^xoat#R>~+nLVp_5
zKW!%dMU3A~vYH)BC-`w@3nYx7-5`+rE6`t#ke6rULDem2$OG$%4uXru`b7sxp^J2q
z!^qRgPJ#=^`c)?hlv5GaKatG}v{cbW9x3Ow&pNq{^e&@PPDx4$We|7#Fj7hv=!qUu
z2gUjxTmQ};;;N;R7Rz{oaVZdxynbIO)Dmb327NpSp<sOxGSGO+(YV$_8Zr7)4_SGK
zv%X-vy}oX{z0kj%)U9z4{r)M)aM%~}h5W67X~@EMd-syly}BJnrxxiYRe&_GWo@qw
z+0|={Y3OQfNZ|P-Z?G-c9&QWzY&b6dZAbiPy{Ki>`hBlWWZ@1{IRz)~uot%Nuou`4
z(y-cL*lq**{jI^4puffE=lnR}MMv@#NAF`O0Jml*sRp2m_3%!_D7E(Ov;mKxn*#KQ
zfEWbDmY^@(($dNSxx(e0HpJUbH@D9odHQAmxAxfwPW9PDAH}+JU{9-!*VgI_g#GQ|
zX}D{S_=kP={>yjG90;#DzI`|h2e!Ai*at#fSpB<fuje2M-e2Ek8~pMv+lPGprnB&m
zT{d9D?wP3IF7!*@fUhMK4g}i5HU+McfDE9%wA)5Jv)fj@zT0*oUw_|OU)*nR)zVK~
zn;n~n9mHTL7;0~6aVX-7;#W&jF@>a*6Qx0X4C0>0MP~}b5}SU%#c1gp{bU8N?3eZs
zJeNza?IGXd!->5F|13&B*h{)*VfgpEvC2yB7zyGnXWbnquYjy?Kk-25p8ceR#~5A`
z25Mwlj0kCkmRw&TRd@_o(Fe!}P!%5}dwx>QU*c^2%sr0RI={p5Y%f`x%j&`l>U7*u
z-mIw_%^R#2C(7i7Q!`1`&@feXq|Ce6nKHDDfii;014qg{70#ro4?}GII(36fv^pLr
bTUoktr0gAXJMQKC%LZ=8EkzzETeRX|i*;p=

diff --git a/dist/view.js b/dist/view.js
index 5e70f806a4f62ceff092fc8f9ab27b7e576eb508..8927bd8e4e90f2ba040e662de16aabc7c436e34f 100644
GIT binary patch
delta 203
zcmX^6nRWIT)`l&NorzNFc1qewrI|S?dYQ@jd6~%?O2s9KMM|35O4Fw%GU`cU%BNPQ
zf~7AcGU{T{o|9Qz0+#1VV$_z#)SjG^pPUU+u-rL`kqL_daQppJ7?W_@zkOc{BflsB
DCWb#<

delta 137
zcmbRJh4t)b)`l&NorydOnaTNiy2T}lMe26b7bi06@j^v15{puSLa!1Tb@?GeMXC8k
zDXAcJhDnUtLJ+}{%v_){8~sE(CC%xAsf=RVCnqsJVMH}|VhUpts=3>FQW^P00sL+)
Ap#T5?

diff --git a/index.html b/index.html
index 70df7bd..34d5dfc 100644
--- a/index.html
+++ b/index.html
@@ -45,8 +45,11 @@
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
 			</a>
 			<a class="button_divider"></a>
-			<input id="search" type="text" name="search" placeholder="Search …">
-			<a id="clearSearch">&times;</a>
+			<a class="button right" id="button_search" title="Search">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#magnifying-glass"></use></svg>
+			</a>
+			<!-- <input id="search" type="text" name="search" placeholder="Search …">
+			<a id="clearSearch">&times;</a> -->
 		</div>
 		<div class="toolbar" id="tools_album">
 			<a class="button left" id="button_back_home" title="Close Album">
diff --git a/src/scripts/build.coffee b/src/scripts/build.coffee
index bfae055..0aa0489 100644
--- a/src/scripts/build.coffee
+++ b/src/scripts/build.coffee
@@ -59,10 +59,10 @@ build.album = (data) ->
 
 	if lychee.publicMode is false
 
-		if data.star is '1' then		html += "<a class='badge icon-star'></a>"
-		if data.public is '1' then		html += "<a class='badge icon-share'></a>"
-		if data.unsorted is '1' then	html += "<a class='badge icon-reorder'></a>"
-		if data.recent is '1' then		html += "<a class='badge icon-time'></a>"
+		if data.star is '1' then		html += "<a class='badge'>#{ build.iconic('star') }</a>"
+		if data.public is '1' then		html += "<a class='badge'>#{ build.iconic('eye') }</a>"
+		if data.unsorted is '1' then	html += "<a class='badge'>#{ build.iconic('list') }</a>"
+		if data.recent is '1' then		html += "<a class='badge'>#{ build.iconic('clock') }</a>"
 
 	html += "</div>"
 
@@ -94,8 +94,8 @@ build.photo = (data) ->
 
 	html += "</div>"
 
-	if data.star is '1' then html += "<a class='badge icon-star'></a>"
-	if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge icon-share'></a>"
+	if data.star is '1' then html += "<a class='badge'>#{ build.iconic('star') }</a>"
+	if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge'>#{ build.iconic('eye') }</a>"
 
 	html += "</div>"
 
diff --git a/src/styles/_content.scss b/src/styles/_content.scss
index 6687499..9b476c4 100644
--- a/src/styles/_content.scss
+++ b/src/styles/_content.scss
@@ -8,22 +8,6 @@
 	width: 100%;
 	min-height: calc(100% - 90px);
 	-webkit-overflow-scrolling: touch;
-
- 	// Adds a gradient to the top
-	&::before {
-		content: '';
-		position: absolute;
-		left: 0px;
-		width: 100%;
-		height: 20px;
-		background: linear-gradient(to bottom, #262626, #222);
-		border-top: 1px solid #333;
-	}
-
-	// Removes the gradient when using the view
-	&.view::before {
-		display: none;
-	}
 }
 
 	/* Photo ------------------------------------------------*/
@@ -70,7 +54,7 @@
 			height: 200px;
 			background-color: #222;
 			border-radius: 2px;
-			border: 2px solid #ccc;
+			border: 2px solid #bbb;
 
 			&:first-child,
 			&:nth-child(2) {
@@ -91,7 +75,7 @@
 
 		&:hover img,
 		&.active img {
-			box-shadow: 0 0 5px #005ecc;
+			box-shadow: 0 0 3px #2293EC;
 		}
 	}
 
@@ -150,12 +134,11 @@
 	.album .badge,
 	.photo .badge {
 		position: absolute;
-		margin-top: -1px;
-		margin-left: 12px;
+		margin: -1px 0 0 12px;
 		padding: 12px 7px 3px 7px;
-		background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
-		box-shadow: 0 0 3px rgba(0, 0, 0, .8);
-		border-radius: 0 0 3px 3px;
+		box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+		background: #d02a32;
+		border-radius: 0 0 5px 5px;
 		border: 1px solid #fff;
 		border-top: none;
 		color: #fff;
@@ -163,55 +146,23 @@
 		text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
 		opacity: .9;
 
-		&::after {
-			content: '';
-			position: absolute;
-			margin-top: -12px;
-			margin-left: -26px;
-			width: 38px;
-			height: 5px;
-			background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
-			opacity: .4;
+		&:nth-child(2n) { margin-left: 57px; }
+
+		.iconic {
+			fill: #fff;
+			width: 21px;
+			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .1) );
 		}
-
-		&:nth-child(2n) {
-			margin-left: 57px;
-		}
-	}
-
-	.album .badge.icon-star,
-	.photo .badge.icon-star {
-		padding: 12px 8px 3px 8px;
-
-		&::after { margin-left: -29px; }
-	}
-
-	.album .badge.icon-share,
-	.photo .badge.icon-share {
-		padding: 12px 6px 3px 8px;
-
-		&::after { margin-left: -31px; }
-	}
-
-	.album .badge.icon-time,
-	.photo .badge.icon-time {
-		padding: 12px 8px 3px 9px;
-
-		::after { margin-left: -29px; }
-	}
-
-	.album .badge.icon-reorder::after {
-		margin-left: -30px;
 	}
 
 	/* Divider ------------------------------------------------*/
 	.divider {
 		float: left;
+		margin: 50px 0 0;
+		padding: 10px 0;
 		width: 100%;
-		margin-top: 50px;
 		opacity: 0;
-		border-top: 1px solid rgba(255, 255, 255, .03);
-		box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+		background: rgba(0, 0, 0, .15);
 
 		&:first-child {
 			margin-top: 0;
@@ -220,11 +171,10 @@
 
 		h1 {
 			float: left;
-			margin: 20px 0 0 30px;
-			color: #fff;
+			margin: 0 0 0 30px;
+			color: rgba(255, 255, 255, .6);
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
 		}
 	}
 
@@ -238,8 +188,8 @@
 		margin-top: -60px;
 		margin-left: -90px;
 		padding-top: 20px;
-		color: rgba(20, 20, 20, 1);
-		text-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
+		color: rgba(15, 15, 15, 1);
+		text-shadow: 0px 1px 0px rgba(255, 255, 255, .01);
 		text-align: center;
 
 		.icon {
diff --git a/src/styles/_contextmenu.scss b/src/styles/_contextmenu.scss
index f1965b0..a4c140e 100644
--- a/src/styles/_contextmenu.scss
+++ b/src/styles/_contextmenu.scss
@@ -6,23 +6,20 @@
 .basicContext {
 
 	padding: 5px 0 6px;
-	background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
-	border: 1px solid rgba(0, 0, 0, .5);
-	border-bottom: 1px solid rgba(0, 0, 0, .6);
+	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-radius: 5px;
-	box-shadow: 0 1px 4px rgba(0, 0, 0, .15), inset 0px 1px 0px rgba(255, 255, 255, .08);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
 
 	/* Item ------------------------------------------------*/
 	tr {
 		margin-bottom: 2px;
 		color: #eee;
 		font-size: 14px;
-		text-shadow: 0 -1px 0px rgba(0, 0, 0, .2);
+		text-shadow: 0 -1px 0px rgba(0, 0, 0, .1);
 
-		&.separator {
-			background-color: rgba(0, 0, 0, .2);
-			border-bottom: 1px solid rgba(255, 255, 255, .1);
-		}
+		&.separator { background-color: rgba(0, 0, 0, .3); }
 	}
 
 		tr td {
@@ -32,9 +29,7 @@
 			border-radius: 0;
 			transition: none;
 
-			&:hover {
-				background: linear-gradient(to bottom, #6a84f2, #4967F0);
-			}
+			&:hover { background: linear-gradient(to bottom, #2293EC, darken(#2293EC, 2%)); }
 		}
 
 			tr td .albumCover {
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
index cce3a85..d4faa07 100644
--- a/src/styles/_header.scss
+++ b/src/styles/_header.scss
@@ -7,8 +7,8 @@ header {
 	position: fixed;
 	height: 49px;
 	width: 100%;
-	background: linear-gradient(to bottom, #3E3E3E, #282828);
-	border-bottom: 1px solid #161616;
+	background: linear-gradient(to bottom, #222222, #1a1a1a);
+	border-bottom: 1px solid #0f0f0f;
 	z-index: 1;
 	transition: transform .3s ease-out;
 
@@ -29,15 +29,7 @@ header {
 		background: none;
 		border-bottom: none;
 
-		&.error {
-			background-color: rgba(10, 10, 10, .99);
-		}
-
-		.button,
-		#title,
-		.tools {
-			text-shadow: none !important;
-		}
+		&.error { background-color: rgba(10, 10, 10, .99); }
 	}
 
 	/* Title ------------------------------------------------*/
@@ -50,7 +42,7 @@ header {
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
 
 		&.editable { cursor: pointer; }
 	}
@@ -68,7 +60,7 @@ header {
 	/* Button ------------------------------------------------*/
 	.button {
 		display: inline-block;
-		padding: 16px 8px 12px;
+		padding: 17px 8px 15px;
 		width: 15px;
 		cursor: pointer;
 
@@ -77,7 +69,7 @@ header {
 		&.right { float: right; }
 
 		.iconic {
-			fill: #888;
+			fill: #aaa;
 			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
 			transition: fill .2s ease;
 		}
@@ -106,10 +98,9 @@ header {
 		width: 80px;
 		margin: 12px 12px 0 0;
 		padding: 5px 12px 6px 12px;
-		background-color: #383838;
+		background-color: #222;
 		color: #fff;
-		border: 1px solid rgba(0, 0, 0, .6);
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
+		border: 0;
 		outline: none;
 		border-radius: 50px;
 		opacity: .6;
@@ -144,14 +135,12 @@ header {
 		margin: 13px 9px;
 		color: #888;
 		font-size: 13px;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+		border-radius: 100px;
 		display: none;
 		cursor: pointer;
 
-		&:hover {
-			background-color: rgba(0, 0, 0, .2);
-			border-radius: 100px;
-		}
+		&:hover { background-color: rgba(0, 0, 0, .3); }
 	}
 
 }
\ No newline at end of file
diff --git a/src/styles/_infobox.scss b/src/styles/_infobox.scss
index 9c759f1..12caaab 100644
--- a/src/styles/_infobox.scss
+++ b/src/styles/_infobox.scss
@@ -19,8 +19,8 @@
 	right: -370px;
 	width: 350px;
 	height: 100%;
-	background-color: rgba(20, 20, 20, .98);
-	box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
+	background-color: rgba(30, 30, 30, .98);
+	box-shadow: -1px 0 2px rgba(0, 0, 0, .7);
 	transform: translateX(0);
 	transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
 
@@ -54,8 +54,8 @@
 		float: left;
 		height: 49px;
 		width: 100%;
-		background-image: linear-gradient(to bottom, #2A2A2A, #131313);
-		border-bottom: 1px solid rgba(0, 0, 0, .7);
+		background: linear-gradient(to bottom, #1f1f1f, #1a1a1a);
+		border-bottom: 1px solid #0f0f0f;
 	}
 
 	.header h1 {
@@ -66,7 +66,7 @@
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
 	}
 
 	.header .close {
@@ -88,21 +88,15 @@
 	/* Seperator ------------------------------------------------*/
 	.separator {
 		float: left;
+		padding: 8px 0;
 		width: 100%;
-		border-top: 1px solid rgba(255, 255, 255, .02);
-		box-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
-
-		&:first-child {
-			border-top: 1px solid rgba(255, 255, 255, .02);
-			box-shadow: none;
-		}
+		background: rgba(0, 0, 0, .15);
 
 		h1 {
-			margin: 20px 0 5px 20px;
-			color: #fff;
+			margin: 0 0 0 20px;
+			color: rgba(255, 255, 255, .6);
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		}
 	}
 
@@ -150,15 +144,14 @@
 
 	#tags .tag {
 		float: left;
-		padding: 4px 7px;
+		padding: 6px 10px;
 		margin: 0 6px 8px 0;
 		background-color: rgba(0, 0, 0, .5);
-		border: 2px solid rgba(255, 255, 255, .3);
 		border-radius: 100px;
 		font-size: 12px;
-		transition: border .3s;
+		transition: background-color .3s;
 
-		&:hover { border: 2px solid #aaa; }
+		&:hover { background-color: rgba(0, 0, 0, .3); }
 	}
 
 	#tags .tag span {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a6dab16..6f8a31d 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -17,7 +17,7 @@ body {
 }
 
 body {
-	background-color: #222;
+	background-color: #1d1d1d;
 	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-size: 12px;
 	-webkit-font-smoothing: antialiased;