Merge pull request #18514 from owncloud/app-navigation-style

reduce grey tones in app navigation

apps/files/css/files.css

@@ -133,7 +133,7 @@
 	position: fixed !important;
 	bottom: 44px;
 	width: inherit !important;
-	background-color: #f5f5f5;
+	background-color: #fff;
 }
 /* double padding to account for Deleted files entry, issue with Firefox */
 .app-files #app-navigation > ul li:nth-last-child(2) {

apps/files/img/delete.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <path opacity=".5" d="m6.5 1-0.5 1h-3c-0.554 0-1 0.446-1 1v1h12v-1c0-0.554-0.446-1-1-1h-3l-0.5-1zm-3.5 4 0.875 9c0.061 0.549 0.5729 1 1.125 1h6c0.55232 0 1.064-0.45102 1.125-1l0.875-9z" fill-rule="evenodd"/>
+ <path d="m6.5 1-0.5 1h-3c-0.554 0-1 0.446-1 1v1h12v-1c0-0.554-0.446-1-1-1h-3l-0.5-1zm-3.5 4 0.875 9c0.061 0.549 0.5729 1 1.125 1h6c0.55232 0 1.064-0.45102 1.125-1l0.875-9z" fill-rule="evenodd"/>
 </svg>

apps/files/img/external.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <path opacity=".5" d="m7.4515 1.6186 2.3806 2.2573-3.5709 3.386 2.3806 2.2573 3.5709-3.386 2.3806 2.2573v-6.7725h-7.1422zm-4.7612 1.1286c-0.65945 0-1.1903 0.5034-1.1903 1.1286v9.029c0 0.6253 0.53085 1.1286 1.1903 1.1286h9.522c0.6594 0 1.1903-0.5034 1.1903-1.1286v-3.386l-1.19-1.1287v4.5146h-9.5217v-9.029h4.761l-1.1905-1.1287h-3.5707z"/>
+ <path d="m7.4515 1.6186 2.3806 2.2573-3.5709 3.386 2.3806 2.2573 3.5709-3.386 2.3806 2.2573v-6.7725h-7.1422zm-4.7612 1.1286c-0.65945 0-1.1903 0.5034-1.1903 1.1286v9.029c0 0.6253 0.53085 1.1286 1.1903 1.1286h9.522c0.6594 0 1.1903-0.5034 1.1903-1.1286v-3.386l-1.19-1.1287v4.5146h-9.5217v-9.029h4.761l-1.1905-1.1287h-3.5707z"/>
 </svg>

apps/files/img/folder.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <g opacity=".5" fill-rule="evenodd" transform="matrix(.86667 0 0 .86667 -172.04 -864.43)">
-  <path d="m200.2 998.57c-0.28913 0-0.53125 0.24212-0.53125 0.53125v13.938c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53125-0.2327 0.53125-0.5312l0.0004-8.1661c0-0.289-0.24212-0.5338-0.53125-0.5338h-12.161l-0.0004 6.349c0 0.2771-0.30237 0.5638-0.57937 0.5638s-0.57447-0.2867-0.57447-0.5638l0.0004-7.0055c0-0.2771 0.23357-0.4974 0.51057-0.4974h2.6507l8.3774 0.0003-0.0004-1.7029c0-0.3272-0.24549-0.6047-0.57258-0.6047h-7.5043v-1.7764c0-0.28915-0.23415-0.53125-0.52328-0.53125z" fill-rule="evenodd"/>
+ <g transform="matrix(.86667 0 0 .86667 -172.04 -864.43)" fill-rule="evenodd">
+  <path style="" d="m200.2 998.57c-0.28913 0-0.53125 0.24212-0.53125 0.53125v13.938c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53125-0.2327 0.53125-0.5312l0.0004-8.1661c0-0.289-0.24212-0.5338-0.53125-0.5338h-12.161l-0.0004 6.349c0 0.2771-0.30237 0.5638-0.57937 0.5638s-0.57447-0.2867-0.57447-0.5638l0.0004-7.0055c0-0.2771 0.23357-0.4974 0.51057-0.4974h2.6507l8.3774 0.0003-0.0004-1.7029c0-0.3272-0.24549-0.6047-0.57258-0.6047h-7.5043v-1.7764c0-0.28915-0.23415-0.53125-0.52328-0.53125z" fill-rule="evenodd"/>
  </g>
 </svg>

apps/files/img/public.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <g opacity=".5" transform="matrix(.67042 -.67042 .67042 .67042 .62542 93.143)">
-  <path style="block-progression:tb;color:#000000;text-transform:none;text-indent:0" d="m69.5-61.5c-1.9217 0-3.5 1.5783-3.5 3.5 0 0.17425 0.0062 0.33232 0.03125 0.5h2.0625c-0.053-0.156-0.094-0.323-0.094-0.5 0-0.8483 0.6517-1.5 1.5-1.5h5c0.8483 0 1.5 0.6517 1.5 1.5s-0.6517 1.5-1.5 1.5h-1.6875c-0.28733 0.79501-0.78612 1.4793-1.4375 2h3.125c1.9217 0 3.5-1.5783 3.5-3.5s-1.5783-3.5-3.5-3.5h-5z"/>
-  <path style="block-progression:tb;color:#000000;text-transform:none;text-indent:0" d="m68.5-54.5c1.9217 0 3.5-1.5783 3.5-3.5 0-0.17425-0.0062-0.33232-0.03125-0.5h-2.0625c0.053 0.156 0.094 0.323 0.094 0.5 0 0.8483-0.6517 1.5-1.5 1.5h-5c-0.8483 0-1.5-0.6517-1.5-1.5s0.6517-1.5 1.5-1.5h1.6875c0.28733-0.79501 0.78612-1.4793 1.4375-2h-3.125c-1.9217 0-3.5 1.5783-3.5 3.5s1.5783 3.5 3.5 3.5h5z"/>
+ <g transform="matrix(.67042 -.67042 .67042 .67042 .62542 93.143)">
+  <path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none" d="m69.5-61.5c-1.9217 0-3.5 1.5783-3.5 3.5 0 0.17425 0.0062 0.33232 0.03125 0.5h2.0625c-0.053-0.156-0.094-0.323-0.094-0.5 0-0.8483 0.6517-1.5 1.5-1.5h5c0.8483 0 1.5 0.6517 1.5 1.5s-0.6517 1.5-1.5 1.5h-1.6875c-0.28733 0.79501-0.78612 1.4793-1.4375 2h3.125c1.9217 0 3.5-1.5783 3.5-3.5s-1.5783-3.5-3.5-3.5h-5z"/>
+  <path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none" d="m68.5-54.5c1.9217 0 3.5-1.5783 3.5-3.5 0-0.17425-0.0062-0.33232-0.03125-0.5h-2.0625c0.053 0.156 0.094 0.323 0.094 0.5 0 0.8483-0.6517 1.5-1.5 1.5h-5c-0.8483 0-1.5-0.6517-1.5-1.5s0.6517-1.5 1.5-1.5h1.6875c0.28733-0.79501 0.78612-1.4793 1.4375-2h-3.125c-1.9217 0-3.5 1.5783-3.5 3.5s1.5783 3.5 3.5 3.5h5z"/>
  </g>
 </svg>

apps/files/img/share.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <g opacity=".5" transform="translate(0 -1036.4)">
+ <g transform="translate(0 -1036.4)">
   <path d="m12.228 1037.4c-1.3565 0-2.4592 1.0977-2.4592 2.4542 0 0.075 0.0084 0.1504 0.0149 0.2236l-4.7346 2.4145c-0.4291-0.3667-0.98611-0.5863-1.5947-0.5863-1.3565 0-2.4542 1.0977-2.4542 2.4543 0 1.3565 1.0977 2.4542 2.4542 2.4542 0.54607 0 1.0528-0.1755 1.4606-0.477l4.8637 2.4741c-0.0024 0.044-0.0099 0.089-0.0099 0.1342 0 1.3565 1.1027 2.4542 2.4592 2.4542s2.4542-1.0977 2.4542-2.4542-1.0977-2.4592-2.4542-2.4592c-0.63653 0-1.218 0.2437-1.6544 0.6409l-4.6953-2.4c0.01892-0.1228 0.03478-0.2494 0.03478-0.3775 0-0.072-0.0089-0.1437-0.0149-0.2137l4.7395-2.4145c0.42802 0.3627 0.98488 0.5813 1.5898 0.5813 1.3565 0 2.4542-1.1027 2.4542-2.4592s-1.0977-2.4542-2.4542-2.4542z"/>
  </g>
 </svg>

apps/files/img/star.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <g opacity=".5" transform="matrix(.049689 0 0 .049689 -7.3558 -36.792)">
-  <path d="m330.36 858.43 43.111 108.06 117.64 9.2572-89.445 74.392 27.55 114.75-98.391-62.079-100.62 61.66 28.637-112.76-89.734-76.638 116.09-7.6094z" transform="translate(-21.071,-112.5)"/>
+ <g transform="matrix(.049689 0 0 .049689 -7.3558 -36.792)">
+  <path style="" d="m330.36 858.43 43.111 108.06 117.64 9.2572-89.445 74.392 27.55 114.75-98.391-62.079-100.62 61.66 28.637-112.76-89.734-76.638 116.09-7.6094z" transform="translate(-21.071,-112.5)"/>
  </g>
 </svg>

core/css/apps.css

@@ -22,7 +22,7 @@
 	height: 100%;
 	float: left;
 	-moz-box-sizing: border-box; box-sizing: border-box;
-	background-color: #f5f5f5;
+	background-color: #fff;
 	padding-bottom: 44px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -42,10 +42,6 @@
 	width: 100%;
 	-moz-box-sizing: border-box; box-sizing: border-box;
 }
-#app-navigation .active,
-#app-navigation .active a {
-	background-color: #ddd;
-}
 
 #app-navigation .active.with-menu > a,
 #app-navigation .with-counter > a {
@@ -56,14 +52,6 @@
 	padding-right: 90px;
 }
 
-#app-navigation li:hover > a,
-#app-navigation li:focus > a,
-#app-navigation a:focus,
-#app-navigation .selected,
-#app-navigation .selected a {
-	background-color: #ddd;
-}
-
 #app-navigation .with-icon a,
 #app-navigation .app-navigation-entry-loading a {
 	padding-left: 44px;
@@ -82,7 +70,17 @@
 	-moz-box-sizing: border-box; box-sizing: border-box;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	color: #333;
+	color: #000;
+	opacity: .5;
+}
+#app-navigation .active,
+#app-navigation .active a,
+#app-navigation li:hover > a,
+#app-navigation li:focus > a,
+#app-navigation a:focus,
+#app-navigation .selected,
+#app-navigation .selected a {
+	opacity: 1;
 }
 
 #app-navigation .collapse {
@@ -296,7 +294,7 @@
 .bubble,
 #app-navigation .app-navigation-entry-menu {
 	position: absolute;
-	background-color: #eee;
+	background-color: #fff;
 	color: #333;
 	border-radius: 3px;
 	border-top-right-radius: 0;
@@ -324,7 +322,7 @@
 .bubble:after,
 #app-navigation .app-navigation-entry-menu:after {
 	border-color: rgba(238, 238, 238, 0);
-	border-bottom-color: #eee;
+	border-bottom-color: #fff;
 	border-width: 10px;
 	margin-left: -10px;
 }
@@ -473,13 +471,10 @@
 #app-settings.opened #app-settings-content {
 	display: block;
 }
-#app-settings-header {
-	background-color: #eee;
-}
 #app-settings-content {
 	display: none;
 	padding: 10px;
-	background-color: #eee;
+	background-color: #fff;
 }
 #app-settings.open #app-settings-content {
 	display: block;
@@ -499,7 +494,7 @@
 	width: 100%;
 	padding: 0;
 	margin: 0;
-	background-color: transparent;
+	background-color: #fff;
 	background-image: url('../img/actions/settings.svg');
 	background-position: 14px center;
 	background-repeat: no-repeat;
@@ -512,11 +507,11 @@
 }
 .settings-button:hover,
 .settings-button:focus {
-	background-color: #ddd;
+	background-color: #fff;
 }
 .settings-button.opened:hover,
 .settings-button.opened:focus {
-	background-color: transparent;
+	background-color: #fff;
 }
 
 /* buttons */

core/css/styles.css

@@ -186,7 +186,7 @@ input img, button img, .button img {
 	background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-	background: #ccc;
+	background: #ddd;
 }