Merge branch 'master' into extstorage-configclass

4 files changed, 69 insertions, 14 deletions

diff --git a/core/css/fixes.css b/core/css/fixes.css
index 4ee854addef..a33afd5cf77 100644
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@@ -54,11 +54,6 @@
 	background-color: #1B314D;
 }
 
-/* in IE9 the nav bar on the left side is too narrow and leave a white area - original width is 80px */
-.ie9 #navigation {
-	width: 100px;
-}
-
 /* IE8 isn't able to display transparent background. So it is specified using a gradient */
 .ie8 #nojavascript {
 	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c320000', endColorstr='#4c320000'); /* IE */
diff --git a/core/css/mobile.css b/core/css/mobile.css
new file mode 100644
index 00000000000..a63aa902d34
--- /dev/null
+++ b/core/css/mobile.css
@@ -0,0 +1,22 @@
+@media only screen and (max-width: 600px) {
+
+/* compress search box on mobile, expand when focused */
+.searchbox input[type="search"] {
+	width: 15%;
+	-webkit-transition: width 100ms;
+	-moz-transition: width 100ms;
+	-o-transition: width 100ms;
+	transition: width 100ms;
+}
+.searchbox input[type="search"]:focus,
+.searchbox input[type="search"]:active {
+	width: 155px;
+}
+
+/* do not show display name on mobile when profile picture is present */
+#header .avatardiv.avatardiv-shown + #expandDisplayName {
+	display: none;
+}
+
+
+}
diff --git a/core/css/multiselect.css b/core/css/multiselect.css
index 60f2f47e698..8d949e7cdb7 100644
--- a/core/css/multiselect.css
+++ b/core/css/multiselect.css
@@ -48,7 +48,7 @@ ul.multiselectoptions > li input[type='checkbox']:checked+label {
 	font-weight: bold;
 }
 
-div.multiselect {
+div.multiselect, select.multiselect {
 	display: inline-block;
 	max-width: 400px;
 	min-width: 150px;
@@ -58,6 +58,12 @@ div.multiselect {
 	vertical-align: bottom;
 }
 
+/* To make a select look like a multiselect until it's initialized */
+select.multiselect {
+	height: 30px;
+	min-width: 113px;
+}
+
 div.multiselect.active {
 	background-color: #fff;
 	position: relative;
diff --git a/core/css/styles.css b/core/css/styles.css
index bee44785f12..341a507ce37 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -37,11 +37,12 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari
 .header-right { float:right; vertical-align:middle; padding:0.5em; }
 .header-right > * { vertical-align:middle; }
 
+/* Profile picture in header */
 #header .avatardiv {
 	float: left;
 	display: inline-block;
+	margin-right: 5px;
 }
-
 #header .avatardiv img {
 	opacity: 1;
 }
@@ -74,6 +75,19 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari
 	color: #aaa;
 }
 
+#header .logo {
+	background-image: url(../img/logo.svg);
+	width: 250px;
+	height: 118px;
+	margin: 0 auto;
+}
+
+#header .logo-wide {
+	background-image: url(../img/logo-wide.svg);
+	width: 147px;
+	height: 32px;
+}
+
 /* INPUTS */
 input[type="text"],
 input[type="password"],
@@ -205,17 +219,19 @@ textarea:disabled {
 		color: #bbb;
 	}
 
-
+/* Searchbox */
 .searchbox input[type="search"] {
+	position: relative;
 	font-size: 1.2em;
-	padding: .2em .5em .2em 1.5em;
+	padding-left: 1.5em;
 	background: #fff url('../img/actions/search.svg') no-repeat .5em center;
 	border: 0;
-	border-radius: 1em;
+	border-radius: 2em;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .7;
-	margin-top: 10px;
+	margin-top: 6px;
 	float: right;
 }
+
 input[type="submit"].enabled {
 	background: #66f866;
 	border: 1px solid #5e5;
@@ -706,12 +722,11 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
 /* USER MENU */
 #settings {
 	float: right;
-	margin-top: 7px;
-	margin-left: 10px;
 	color: #bbb;
 }
 #expand {
-	padding: 15px 15px 15px 5px;
+	display: block;
+	padding: 7px 12px 6px 7px;
 	cursor: pointer;
 	font-weight: bold;
 }
@@ -933,3 +948,20 @@ div.crumb:active {
 	opacity:.7;
 }
 
+.appear {
+	opacity: 1;
+	transition: opacity 500ms ease 0s;
+	-moz-transition: opacity 500ms ease 0s;
+	-ms-transition: opacity 500ms ease 0s;
+	-o-transition: opacity 500ms ease 0s;
+	-webkit-transition: opacity 500ms ease 0s;
+}
+.appear.transparent {
+	opacity: 0;
+}
+
+/* for IE10 */
+@-ms-viewport {
+	width: device-width;
+}
+