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

add relevant focus styles to the existing hover styles

This commit is contained in:
Jan-Christoph Borchardt 2014-11-06 16:22:57 +01:00
parent af743efff0
commit a410055291
3 changed files with 81 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/files/css/files.css
View File

@ -6,7 +6,11 @@
.actions { padding:5px; height:32px; display: inline-block; float: left; }
.actions input, .actions button, .actions .button { margin:0; float:left; }
.actions .button a { color: #555; }
.actions .button a:hover, .actions .button a:active { color: #333; }
.actions .button a:hover,
.actions .button a:focus,
.actions .button a:active {
color: #333;
}
.actions.hidden { display: none; }
#new {
@ -99,7 +103,9 @@
}
#filestable tbody tr { background-color:#fff; height:40px; }
#filestable tbody tr:hover, tbody tr:active {
#filestable tbody tr:hover,
#filestable tbody tr:focus,
#filestable tbody tr:active {
background-color: rgb(240,240,240);
}
#filestable tbody tr.selected {
@ -123,7 +129,8 @@ span.extension {
transition: opacity 300ms;
vertical-align: top;
}
tr:hover span.extension {
tr:hover span.extension,
tr:focus span.extension {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
@ -166,7 +173,8 @@ table th .sort-indicator {
.sort-indicator.hidden {
visibility: hidden;
}
table th:hover .sort-indicator.hidden {
table th:hover .sort-indicator.hidden,
table th:focus .sort-indicator.hidden {
visibility: visible;
}
@ -252,8 +260,10 @@ table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-chi
width: 90%;
}
/* ellipsize long modified dates to make room for showing delete button */
#fileList tr:hover .modified, #fileList tr:hover .column-last>span:first-child,
#fileList tr:focus .modified, #fileList tr:focus .column-last>span:first-child {
#fileList tr:hover .modified,
#fileList tr:focus .modified,
#fileList tr:hover .column-last>span:first-child,
#fileList tr:focus .column-last>span:first-child {
width: 75%;
}
@ -280,7 +290,8 @@ table td.filename .nametext .innernametext {
max-width: 760px;
}
table tr:hover td.filename .nametext .innernametext {
table tr:hover td.filename .nametext .innernametext,
table tr:focus td.filename .nametext .innernametext {
max-width: 480px;
}
}
@ -290,7 +301,8 @@ table td.filename .nametext .innernametext {
max-width: 600px;
}
table tr:hover td.filename .nametext .innernametext {
table tr:hover td.filename .nametext .innernametext,
table tr:focus td.filename .nametext .innernametext {
max-width: 320px;
}
}
@ -300,7 +312,8 @@ table td.filename .nametext .innernametext {
max-width: 400px;
}
table tr:hover td.filename .nametext .innernametext {
table tr:hover td.filename .nametext .innernametext,
table tr:focus td.filename .nametext .innernametext {
max-width: 120px;
}
}
@ -310,7 +323,8 @@ table td.filename .nametext .innernametext {
max-width: 320px;
}
table tr:hover td.filename .nametext .innernametext {
table tr:hover td.filename .nametext .innernametext,
table tr:focus td.filename .nametext .innernametext {
max-width: 40px;
}
}
@ -344,11 +358,13 @@ table td.filename .uploadtext {
}
/* Show checkbox when hovering, checked, or selected */
#fileList tr:hover td.filename>input[type="checkbox"]:first-child,
#fileList tr:focus td.filename>input[type="checkbox"]:first-child,
#fileList tr td.filename>input[type="checkbox"]:checked:first-child,
#fileList tr.selected td.filename>input[type="checkbox"]:first-child {
opacity: 1;
}
.lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
.lte9 #fileList tr:focus td.filename>input[type="checkbox"]:first-child,
.lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
.lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
@ -469,13 +485,15 @@ a.action>img {
position: relative;
top: -21px;
}
#fileList tr:hover a.action, #fileList a.action.permanent {
#fileList tr:hover a.action, #fileList a.action.permanent
#fileList tr:focus a.action, #fileList a.action.permanent {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
display:inline;
}
#fileList tr:hover a.action:hover {
#fileList tr:hover a.action:hover,
#fileList tr:focus a.action:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
@ -489,7 +507,10 @@ a.action>img {
height: 70px;
}
.summary:hover, .summary, table tr.summary td {
.summary:hover,
.summary:focus,
.summary,
table tr.summary td {
background-color: transparent;
}

13
core/css/apps.css
View File

@ -55,6 +55,7 @@
}
#app-navigation li:hover > a,
#app-navigation li:focus > a,
#app-navigation .selected,
#app-navigation .selected a {
background-color: #ddd;
@ -96,10 +97,12 @@
outline: none !important;
box-shadow: none;
}
#app-navigation .collapsible:hover > a {
#app-navigation .collapsible:hover > a,
#app-navigation .collapsible:focus > a {
background-image: none;
}
#app-navigation .collapsible:hover > .collapse {
#app-navigation .collapsible:hover > .collapse,
#app-navigation .collapsible:focus > .collapse {
display: block;
}
@ -139,7 +142,8 @@
background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
}
#app-navigation > ul .collapsible.open:hover {
#app-navigation > ul .collapsible.open:hover,
#app-navigation > ul .collapsible.open:focus {
box-shadow: inset 0 0 3px #ddd;
}
@ -179,7 +183,8 @@
opacity: .5;
}
#app-navigation .app-navigation-entry-deleted-button:hover {
#app-navigation .app-navigation-entry-deleted-button:hover,
#app-navigation .app-navigation-entry-deleted-button:focus {
opacity: 1;
}

44
core/css/styles.css
View File

@ -731,12 +731,44 @@ label.infield {
margin-left: 1em;
}
tr .action:not(.permanent), .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; }
tr:hover .action, tr .action.permanent, .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; }
tr .action { width:16px; height:16px; }
.header-action { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
tr:hover .action:hover, .selectedActions a:hover, .header-action:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
tbody tr:hover, tr:active { background-color:#f8f8f8; }
tr .action:not(.permanent),
.selectedActions a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
tr:hover .action,
tr:focus .action,
tr .action.permanent,
.selectedActions a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
tr .action {
width: 16px;
height: 16px;
}
.header-action {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: .8;
}
tr:hover .action:hover,
tr:focus .action:focus,
.selectedActions a:hover,
.selectedActions a:focus,
.header-action:hover,
.header-action:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
tbody tr:hover,
tbody tr:focus,
tbody tr:active {
background-color: #f8f8f8;
}
code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; }