Improve menu CSS

* fix mess with menus and actions in the files app
* reduces amount of !important usages
* keeps the behaviour on mobile as well as on desktop

Signed-off-by: Morris Jobke <hey@morrisjobke.de>

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index f38adc4645f096fcbdd61025f8ef82ae03330dde..5e1f15c1cc11f9d4e76c32ed4543433eb53a476d 100644 (file)
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -575,7 +575,6 @@ a.action > img {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
-       display:none;
 }
 #fileList a.action.action-share {
        padding: 17px 14px;
@@ -588,80 +587,45 @@ a.action > img {
        padding-right: 14px;
 }
 
-#fileList tr:hover a.action,
-#fileList a.action.permanent,
-#fileList tr:focus a.action,
-#fileList tr:hover a.action.no-permission:hover,
-#fileList tr:focus a.action.no-permission:focus,
+#fileList a.action,
+#fileList a.action.no-permission:hover,
+#fileList a.action.no-permission:focus,
 /* also enforce the low opacity for disabled links that are hovered/focused */
-#fileList tr:hover a.action.disabled:hover,
-#fileList tr:focus a.action.disabled:focus,
-#fileList .name:focus a.action.disabled:focus,
+#fileList a.action.disabled:hover,
+#fileList a.action.disabled:focus,
 #fileList a.action.disabled img {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        opacity: .3;
 }
-#fileList tr a.action.disabled.action-download,
-#fileList tr:hover a.action.disabled.action-download:hover,
-#fileList tr:focus a.action.disabled.action-download:focus,
-#fileList tr:hover a.action:hover,
-#fileList tr:focus a.action:focus,
-#fileList .name:focus a.action:focus {
+
+#fileList a.action.disabled.action-download,
+#fileList a.action.disabled.action-download:hover,
+#fileList a.action.disabled.action-download:focus,
+#fileList a.action:hover,
+#fileList a.action:focus,
+#fileList .fileActionsMenu a.action,
+/* show share action of shared items darker to distinguish from non-shared */
+#fileList a.action.action-share.shared-style {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        opacity: .7;
-       display:inline;
 }
 
-#fileList .fileActionsMenu a.action.permanent {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
-       filter: alpha(opacity=70) !important;
-       opacity: .7 !important;
-}
-#fileList .fileActionsMenu a.action.permanent:hover,
-#fileList .fileActionsMenu a.action.permanent:focus {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
-       filter: alpha(opacity=100) !important;
-       opacity: 1 !important;
+#fileList .fileActionsMenu a.action:hover,
+#fileList .fileActionsMenu a.action:focus,
+/* show share action of shared items darker to distinguish from non-shared */
+#fileList a.action.action-share.shared-style:hover,
+#fileList a.action.action-share.shared-style:focus {
+       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+       filter: alpha(opacity=100);
+       opacity: 1;
 }
 
 #fileList tr a.action.disabled {
        background: none;
 }
 
-/* show share action of shared items darker to distinguish from non-shared */
-#fileList a.action.action-share.permanent.shared-style,
-/* show hovered permanent entries darker */
-#fileList tr a.action.permanent:hover,
-#fileList tr a.action.permanent:focus {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
-       filter: alpha(opacity=70) !important;
-       opacity: .7 !important;
-       display:inline;
-}
-/* always show actions on mobile, not only on hover */
-#fileList a.action.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 .popovermenu .action {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
-       filter: alpha(opacity=50) !important;
-       opacity: .5 !important;
-}
-#fileList .popovermenu .action:hover,
-#fileList .popovermenu .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_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss
index f24ada1898afdfa096a104d416a8ddb7b2db5f5f..8e58aa439c6e627c3edee2d0d99a4eda0d05ff00 100644 (file)
--- a/apps/files_sharing/css/mobile.scss
+++ b/apps/files_sharing/css/mobile.scss
@@ -34,13 +34,6 @@ table td.filename .nametext {
        margin-top: 32px;
 }
 
-/* always show actions on mobile */
-#fileList a.action {
-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
-       filter: alpha(opacity=20) !important;
-       opacity: .2 !important;
-       display: inline !important;
-}
 /* some padding for better clickability */
 #fileList a.action img {
        padding: 0 6px 0 12px;

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 399d630538cf2ccd8b330480e27f48abb3205e2b..e11e6a319b3170f7414c386e72e8dc6a8af3fe04 100644 (file)
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -694,13 +694,13 @@ kbd {
                }
                .menuitem {
                        width: 100%;
-                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)' !important;
-                       filter: alpha(opacity = 50) !important;
-                       opacity: .5 !important;
+                       -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
+                       filter: alpha(opacity = 50);
+                       opacity: .5;
                        &:hover, &:focus, &.active {
-                               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)' !important;
-                               filter: alpha(opacity = 100) !important;
-                               opacity: 1 !important;
+                               -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+                               filter: alpha(opacity = 100);
+                               opacity: 1;
                        }
                }
                [class^='icon-'],

diff --git a/core/css/share.scss b/core/css/share.scss
index de545955aa9875298433a91c1fcaaaa3e8441d42..552e20c80cccf62a7e86ad8fc9bf741cfcfac15e 100644 (file)
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -106,7 +106,6 @@
        .shareOption {
                white-space: nowrap;
                display: inline-block;
-               opacity: 1 !important;
        }
        .unshare img,
        .showCruds img {