properly shade file actions and menu items, don't differentiate between mobile and desktop

3 files changed, 56 insertions, 31 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index ba82455c374..f8c1d03b666 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -594,9 +594,9 @@ a.action > img {
 #fileList tr:focus a.action.disabled:focus,
 #fileList .name:focus a.action.disabled:focus,
 #fileList a.action.disabled img {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	filter: alpha(opacity=30);
+	opacity: .3;
 	display:inline;
 }
 .ie8 #fileList a.action:hover img,
@@ -606,15 +606,44 @@ a.action > img {
 #fileList tr:hover a.action:hover,
 #fileList tr:focus a.action:focus,
 #fileList .name:focus a.action:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity=100);
-	opacity: 1;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+	filter: alpha(opacity=70);
+	opacity: 7;
 	display:inline;
 }
 #fileList tr a.action.disabled {
 	background: none;
 }
 
+/* show share action of shared items darker to distinguish from non-shared */
+#fileList a.action.permanent.shared-style {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
+	filter: alpha(opacity=70) !important;
+	opacity: .7 !important;
+}
+/* always show actions on mobile, not only on hover */
+#fileList a.action,
+#fileList a.action.action-menu.permanent {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
+	filter: alpha(opacity=30) !important;
+	opacity: .3 !important;
+	display: inline !important;
+}
+
+/* properly display actions in the popover menu */
+#fileList .fileActionsMenu .action {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
+	filter: alpha(opacity=50) !important;
+	opacity: .5 !important;
+}
+#fileList .fileActionsMenu .action:hover,
+#fileList .fileActionsMenu .action:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
+	filter: alpha(opacity=100) !important;
+	opacity: 1 !important;
+}
+
+
 #selectedActionsList a.download.disabled,
 #fileList tr a.action.action-download.disabled {
 	color: #000000;
diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css
index b43bd3cfce1..c5507a1e268 100644
--- a/apps/files/css/mobile.css
+++ b/apps/files/css/mobile.css
@@ -32,26 +32,12 @@ table td.filename .nametext {
 	width: 100%;
 }
 
-/* show share action of shared items darker to distinguish from non-shared */
-#fileList a.action.permanent.shared-style {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
-	filter: alpha(opacity=70) !important;
-	opacity: .7 !important;
-}
-/* always show actions on mobile, not only on hover */
-#fileList a.action,
-#fileList a.action.action-menu.permanent {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
-	filter: alpha(opacity=20) !important;
-	opacity: .2 !important;
-	display: inline !important;
-}
 #fileList a.action.action-menu img {
 	padding-left: 0;
 }
 
 #fileList .fileActionsMenu {
-	margin-right: 12px;
+	margin-right: 6px;
 }
 /* hide text of the share action on mobile */
 #fileList a.action-share span {
diff --git a/core/css/apps.css b/core/css/apps.css
index ee0f7516b1f..17595479ae2 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -292,6 +292,7 @@
 		list-style-type: none;
 	}
 
+/* menu bubble / popover */
 .bubble,
 #app-navigation .app-navigation-entry-menu {
 	position: absolute;
@@ -308,15 +309,6 @@
 	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 }
-
-#app-navigation .app-navigation-entry-menu {
-	display: none;
-}
-
-#app-navigation .app-navigation-entry-menu.open {
-	display: block;
-}
-
 /* miraculous border arrow stuff */
 .bubble:after,
 #app-navigation .app-navigation-entry-menu:after {
@@ -329,7 +321,6 @@
 	position: absolute;
 	pointer-events: none;
 }
-
 .bubble:after,
 #app-navigation .app-navigation-entry-menu:after {
 	border-color: rgba(238, 238, 238, 0);
@@ -337,6 +328,25 @@
 	border-width: 10px;
 	margin-left: -10px;
 }
+.bubble .action {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
+	filter: alpha(opacity=50) !important;
+	opacity: .5 !important;
+}
+.bubble .action:hover,
+.bubble .action:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
+	filter: alpha(opacity=100) !important;
+	opacity: 1 !important;
+}
+
+#app-navigation .app-navigation-entry-menu {
+	display: none;
+}
+
+#app-navigation .app-navigation-entry-menu.open {
+	display: block;
+}
 
 	/* list of options for an entry */
 	#app-navigation .app-navigation-entry-menu ul {