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

This commit is contained in:
Jan-Christoph Borchardt 2015-08-26 11:07:29 +02:00
parent 898243a5ee
commit c11ea056d0
3 changed files with 56 additions and 31 deletions

View File

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

View File

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

View File

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