5 files changed, 94 insertions, 40 deletions
diff --git a/core/css/fixes.css b/core/css/fixes.css
index 38d2147f3e2..b274454329a 100644
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@@ -91,8 +91,9 @@ select {
 }
 
 /* fix background of navigation popup in IE8 */
-.ie8 #navigation {
-	background-color: #24282F;
+.ie8 #navigation,
+.ie8 #expanddiv {
+	background-color: #111;
 }
 
 /* needed else IE8 will randomly hide the borders... */
diff --git a/core/css/header.css b/core/css/header.css
index c2d485de323..6fd30f657b7 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -56,6 +56,17 @@
 	height: 45px; /* header height */
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
+}
+#owncloud:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+	opacity: .75;
+}
+#owncloud:hover,
+#owncloud:active {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
 }
 
 #header .logo {
@@ -140,18 +151,43 @@
 #navigation {
 	position: fixed;
 	top: 45px;
+	left: 10px;
 	width: 265px;
 	max-height: 85%;
 	margin-top: 0;
 	padding-bottom: 10px;
-	background-color: rgba(36, 40, 47, .97);
-	border-bottom-right-radius: 7px;
-	box-shadow: 0 0 7px rgba(29,45,68,.97);
+	background-color: rgba(0, 0, 0, .97);
+	box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
+	border-radius: 3px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
 	display: none;
-	overflow-y: auto;
-	overflow-x: hidden;
+	/*overflow-y: auto;
+	overflow-x: hidden;*/
 	z-index: 2000;
 }
+/* arrow look */
+#navigation:after, #expanddiv:after {
+	bottom: 100%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-color: rgba(0, 0, 0, 0);
+	border-bottom-color: rgba(0, 0, 0, .97);
+	border-width: 10px;
+	margin-left: -10px;
+}
+/* position of dropdown arrow */
+#navigation:after {
+	left: 47%;
+}
+#expanddiv:after {
+	right: 15px;
+}
+
 #navigation, #navigation * {
 	-moz-box-sizing:border-box;
 	box-sizing:border-box;
@@ -182,15 +218,15 @@
 	/* icon opacity and hover effect */
 	#navigation a img,
 	#navigation a span {
-		/* 50% opacity when inactive */
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-		opacity: .5;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+		opacity: .7;
 	}
-	#navigation a:hover img, #navigation a:focus img,
-	#navigation a:hover span, #navigation a:focus span,
+	#navigation a:hover img,
+	#navigation a:focus img,
+	#navigation a:hover span,
+	#navigation a:focus span,
 	#navigation a.active img,
 	#navigation a.active span {
-		 /* full opacity for the active app or when hovered/focused */
 		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 		opacity: 1;
 	}
@@ -248,7 +284,7 @@
 #header .avatardiv {
 	float: left;
 	display: inline-block;
-	margin-right: 5px;
+	margin-right: 8px;
 	cursor: pointer;
 	height: 32px;
 	width: 32px;
@@ -265,7 +301,7 @@
 }
 #expand {
 	display: block;
-	padding: 7px 12px 6px 7px;
+	padding: 7px 30px 6px 22px;
 	cursor: pointer;
 }
 #expand * {
@@ -276,26 +312,28 @@
 #expand:active {
 	color: #fff;
 }
-#expand img { 
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
+#expand img {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 	opacity: .7;
 	margin-bottom: -2px;
 }
-#expand:hover img, 
-#expand:focus img, 
-#expand:active img { 
+#expand:hover img,
+#expand:focus img,
+#expand:active img {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	opacity:1;
+	opacity: 1;
 }
 #expanddiv {
 	position: absolute;
-	right: 0;
+	right: 10px;
 	top: 45px;
 	z-index: 2000;
 	display: none;
-	background-color: #383c43;
-	border-bottom-left-radius: 7px;
-	box-shadow: 0 0 7px rgb(29,45,68);
+	background-color: rgba(0, 0, 0, .97);
+	box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
+	border-radius: 3px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
 	-moz-box-sizing: border-box; box-sizing: border-box;
 }
 	#expanddiv a {
diff --git a/core/css/mobile.css b/core/css/mobile.css
index 892612fc06a..874c42b92ef 100644
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -39,6 +39,8 @@
 	-moz-transition: all 100ms;
 	-o-transition: all 100ms;
 	transition: all 100ms;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+	opacity: .7;
 }
 .searchbox input[type="search"]:focus,
 .searchbox input[type="search"]:active {
@@ -47,12 +49,18 @@
 	cursor: text;
 	background-color: #fff;
 	background-image: url('../img/actions/search.svg');
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
 }
 
 /* do not show display name on mobile when profile picture is present */
 #header .avatardiv.avatardiv-shown + #expandDisplayName {
 	display: none;
 }
+#header #expand {
+	display: block;
+	padding: 7px 30px 6px 7px;
+}
 
 /* do not show update notification on mobile */
 #update-notification {
diff --git a/core/css/share.css b/core/css/share.css
index 94811100fcf..448f0bac239 100644
--- a/core/css/share.css
+++ b/core/css/share.css
@@ -3,17 +3,17 @@
  See the COPYING-README file. */
 
 #dropdown {
-	background:#eee;
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
-	box-shadow:0 1px 1px #777;
-	display:block;
+	background: #eee;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+	box-shadow: 0 2px 3px rgba(50, 50, 50, .4);
+	display: block;
 	margin-right: 0;
-	position:absolute;
-	right:0;
-	width:420px;
-	z-index:500;
-	padding:16px;
+	position: absolute;
+	right: 0;
+	width: 420px;
+	z-index: 500;
+	padding: 16px;
 }
 
 @media only screen and (min-width: 768px) and (max-width: 990px) {
diff --git a/core/css/styles.css b/core/css/styles.css
index 12b6bbe9efb..184345aca74 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -240,14 +240,21 @@ textarea:disabled {
 .searchbox input[type="search"] {
 	position: relative;
 	font-size: 1.2em;
-	padding-left: 1.5em;
-	background: #fff url('../img/actions/search.svg') no-repeat .5em center;
+	padding: 3px;
+	padding-left: 25px;
+	background: #fff url('../img/actions/search.svg') no-repeat 6px center;
 	border: 0;
-	border-radius: 2em;
+	border-radius: 3px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	opacity: .3;
+	margin-top: 9px;
+	float: right;
+}
+.searchbox input[type="search"]:hover,
+.searchbox input[type="search"]:focus,
+.searchbox input[type="search"]:active {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 	opacity: .7;
-	margin-top: 6px;
-	float: right;
 }
 
 input[type="submit"].enabled {