From c11ea056d06be7859071eb3176462a9d4d56964e Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 26 Aug 2015 11:07:29 +0200 Subject: [PATCH] properly shade file actions and menu items, don't differentiate between mobile and desktop --- apps/files/css/files.css | 41 +++++++++++++++++++++++++++++++++------ apps/files/css/mobile.css | 16 +-------------- core/css/apps.css | 30 ++++++++++++++++++---------- 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 {