mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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>
This commit is contained in:
Morris Jobke 2017-04-18 21:30:56 -05:00
parent ac9d0fd14c
commit 4be923e459
No known key found for this signature in database
GPG Key ID: 9CE5ED29E7FCD38A
4 changed files with 28 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
apps/files/css/files.scss
View File

@ -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;

7
apps/files_sharing/css/mobile.scss
View File

@ -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;

12
core/css/apps.scss
View File

@ -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-'],

1
core/css/share.scss
View File

@ -106,7 +106,6 @@
.shareOption {
white-space: nowrap;
display: inline-block;
opacity: 1 !important;
}
.unshare img,
.showCruds img {