rearrange CSS, remove duplicate code

3 files changed, 109 insertions, 154 deletions

diff --git a/core/css/header.css b/core/css/header.css
index 0fe20325d8f..d48b6eab06b 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -1,3 +1,17 @@
+/* prevent ugly selection effect on accidental selection */
+#header,
+#navigation,
+#expanddiv {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+
+
+
+/* LOGO and APP NAME -------------------------------------------------------- */
+
 #header .logo {
 	background-image: url(../img/logo.svg);
 	background-repeat: no-repeat;
@@ -64,28 +78,30 @@
 }
 
 
-/* toggle navigation */
+
+/* NAVIGATION --------------------------------------------------------------- */
+
 #content-wrapper {
 	padding-left: 0;
 }
 
 #navigation {
+	position: fixed;
 	top: 45px;
-	bottom: initial;
 	width: 265px;
 	max-height: 85%;
 	margin-top: 0;
-	top: 45px;
 	background-color: rgba(36, 40, 47, .97);
-	overflow-x: initial;
 	border-bottom-right-radius: 7px;
-	border-bottom: 1px #333 solid;
-	border-right: 1px #333 solid;
 	box-shadow: 0 0 7px rgba(29,45,68,.97);
 	display: none;
+	overflow-y: auto;
+	overflow-x: hidden;
+	z-index: 150;
 }
 #navigation, #navigation * {
-	box-sizing:border-box; -moz-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
 }
 #navigation li {
 	display: inline-block;
@@ -104,21 +120,48 @@
 	padding-bottom: 0;
 	padding-left: 0;
 	width: 80px;
-}
-#navigation .icon {
+	text-align: center;
+	color: #fff;
+	white-space:nowrap;
+	overflow:hidden;
+	text-overflow:ellipsis;
+}
+	/* icon opacity and hover effect */
+	#navigation a img,
+	#navigation a span {
+		/* 50% opacity when inactive */
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+		filter: alpha(opacity=50);
+		opacity: .5;
+	}
+	#navigation a:hover img, #navigation a:focus img,
+	#navigation a:hover span, #navigation a:focus span {
+		/* 80% opacity when hovered or focused */
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+		filter: alpha(opacity=80);
+		opacity: .8;
+	}
+	#navigation a.active img,
+	#navigation a.active span {
+		 /* full opacity for the active app */
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+		filter: alpha(opacity=100);
+		opacity: 1;
+	}
+
+#navigation .app-icon {
 	margin: 0 auto;
 	padding: 0;
 }
-#navigation li:first-child .icon {
-	padding-top: 0;
-}
-/* Apps management as sticky footer */
-#navigation .wrapper {
-	min-height: initial;
-	margin: 0;
-}
+
+/* Apps management */
 #apps-management {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+	filter: alpha(opacity=60);
+	opacity: .6;
+	min-height: initial;
 	height: initial;
+	margin: 0;
 }
 
 
@@ -133,15 +176,56 @@
 	background-color: rgba(0, 0, 0, .2);
 	border-radius: 50%;
 }
-#navigation .app-loading .icon {
+#navigation .app-loading .app-icon {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
 	filter: alpha(opacity=20);
 	opacity: .2;
 }
 
 
-/* shift to account for missing navigation */
-#body-user #controls,
-#body-settings #controls {
-	padding-left: 0;
-}
+
+
+/* USER MENU */
+#settings {
+	float: right;
+	color: #bbb;
+}
+#expand {
+	display: block;
+	padding: 7px 12px 6px 7px;
+	cursor: pointer;
+}
+#expand:hover, #expand:focus, #expand:active { color:#fff; }
+#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
+#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
+#expanddiv {
+	position: absolute;
+	right: 0;
+	top: 45px;
+	z-index: 150;
+	display: none;
+	background-color: #383c43;
+	border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
+	box-shadow:0 0 7px rgb(29,45,68);
+	-moz-box-sizing: border-box; box-sizing: border-box;
+}
+	#expanddiv a {
+		display: block;
+		height: 40px;
+		color: #fff;
+		padding: 4px 12px 0;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+		filter: alpha(opacity=70);
+		opacity: .7;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+	#expanddiv a img {
+		margin-bottom: -3px;
+		margin-right: 6px;
+	}
+	#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active {
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+		filter: alpha(opacity=100);
+		opacity: 1;
+	}
diff --git a/core/css/styles.css b/core/css/styles.css
index 4deabebaa76..ed15d614664 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -210,16 +210,6 @@ input img, button img, .button img {
 }
 
 
-/* prevent ugly selection effect on accidental selection */
-#header,
-#navigation,
-#expanddiv {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-}
-
-
 /* SCROLLING */
 ::-webkit-scrollbar {
 	width: 8px;
@@ -324,11 +314,6 @@ input[type="submit"].enabled {
 	border-bottom: 1px solid #e7e7e7;
 	z-index: 50;
 }
-/* account for shift of controls bar due to app navigation */
-#body-user #controls,
-#body-settings #controls {
-	padding-left: 80px;
-}
 #controls .button,
 #controls button,
 #controls input[type='submit'],
@@ -716,120 +701,6 @@ label.infield {
 
 
 
-/* NAVIGATION ------------------------------------------------------------- */
-#navigation {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 80px;
-	margin-top:45px;
-	z-index: 75;
-	background-color: #383c43;
-	overflow-y: auto;
-	overflow-x: hidden;
-	-moz-box-sizing:border-box; box-sizing:border-box;
-}
-#apps {
-	height: 100%;
-}
-#navigation a span {
-	display: block;
-	text-decoration: none;
-	font-size: 11px;
-	text-align: center;
-	color: #fff;
-	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */
-	padding-bottom: 10px;
-	/* prevent shift caused by scrollbar */
-	padding-left: 8px;
-	width: 64px;
-}
-
-	/* icon opacity and hover effect */
-	#navigation a img,
-	#navigation a span {
-		/* 50% opacity when inactive */
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-		filter: alpha(opacity=50);
-		opacity: .5;
-	}
-	#navigation a:hover img, #navigation a:focus img,
-	#navigation a:hover span, #navigation a:focus span {
-		/* 80% opacity when hovered or focused */
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-		filter: alpha(opacity=80);
-		opacity: .8;
-	}
-	#navigation a.active img,
-	#navigation a.active span {
-		 /* full opacity for the active app */
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-		filter: alpha(opacity=100);
-		opacity: 1;
-	}
-	#navigation .icon {
-		display: block;
-		width: 32px;
-		height: 32px;
-		margin-left: 24px;
-		padding: 10px 0 4px;
-	}
-	#navigation li:first-child .icon { /* special rule for Files icon as it's first */
-		padding-top: 20px;
-	}
-
-/* Apps management as sticky footer, less obtrusive in the list */
-#apps-management {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-	filter: alpha(opacity=60);
-	opacity: .6;
-}
-
-
-
-
-/* USER MENU */
-#settings {
-	float: right;
-	color: #bbb;
-}
-#expand {
-	display: block;
-	padding: 7px 12px 6px 7px;
-	cursor: pointer;
-}
-#expand:hover, #expand:focus, #expand:active { color:#fff; }
-#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
-#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
-#expanddiv {
-	position:absolute; right:0; top:45px; z-index:76; display:none;
-	background-color: #383c43;
-	border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
-	box-shadow:0 0 7px rgb(29,45,68);
-	-moz-box-sizing: border-box; box-sizing: border-box;
-}
-	#expanddiv a {
-		display: block;
-		height: 40px;
-		color: #fff;
-		padding: 4px 12px 0;
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-		filter: alpha(opacity=70);
-		opacity: .7;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-	}
-	#expanddiv a img {
-		margin-bottom: -3px;
-		margin-right: 6px;
-	}
-	#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-		filter: alpha(opacity=100);
-		opacity: 1;
-	}
-
-
 /* VARIOUS REUSABLE SELECTORS */
 .hidden { display:none; }
 .bold { font-weight:bold; }
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 5ecb3d2ed5e..e39bb94ed98 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -98,7 +98,7 @@
 					<li data-id="<?php p($entry['id']); ?>">
 						<a href="<?php print_unescaped($entry['href']); ?>" title=""
 							<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
-							<img class="icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
+							<img class="app-icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
 							<div class="icon-loading-dark" style="display:none;"></div>
 							<span>
 								<?php p($entry['name']); ?>
@@ -112,7 +112,7 @@
 					<li id="apps-management">
 						<a href="<?php print_unescaped(OC_Helper::linkToRoute('settings_apps').'?installed'); ?>" title=""
 							<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
-							<img class="icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>"/>
+							<img class="app-icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>"/>
 							<span>
 								<?php p($l->t('Apps')); ?>
 							</span>