Merge pull request #12070 from owncloud/accessibility-fixes
Accessibility fixes
This commit is contained in:
commit
8afb623f08
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -261,7 +261,7 @@
|
|||
}
|
||||
var html = '<a href="#" class="action action-' + name.toLowerCase() + '" data-action="' + name + '">';
|
||||
if (img) {
|
||||
html += '<img class ="svg" src="' + img + '" />';
|
||||
html += '<img class ="svg" alt="" src="' + img + '" />';
|
||||
}
|
||||
html += '<span> ' + actionText + '</span></a>';
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -48,6 +48,9 @@
|
|||
height: 120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#header .logo h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header .logo-wide {
|
||||
background-image: url(../img/logo-wide.svg);
|
||||
|
|
|
@ -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; }
|
||||
|
||||
|
|
|
@ -31,7 +31,9 @@
|
|||
<?php if ($_['bodyid'] === 'body-login' ): ?>
|
||||
<header>
|
||||
<div id="header">
|
||||
<div class="logo svg"></div>
|
||||
<div class="logo svg">
|
||||
<h1><?php p($theme->getName()); ?></h1>
|
||||
</div>
|
||||
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
@ -43,8 +43,8 @@
|
|||
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
|
||||
<div class="logo-icon svg"></div>
|
||||
</a>
|
||||
<a href="#" class="menutoggle">
|
||||
<div class="header-appname">
|
||||
<a href="#" class="menutoggle" tabindex="1">
|
||||
<h1 class="header-appname">
|
||||
<?php
|
||||
if(OC_Util::getEditionString() === '') {
|
||||
p(!empty($_['application'])?$_['application']: $l->t('Apps'));
|
||||
|
@ -52,12 +52,12 @@
|
|||
print_unescaped($theme->getHTMLName());
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="icon-caret svg"></div>
|
||||
</a>
|
||||
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
|
||||
<div id="settings" class="svg">
|
||||
<div id="expand" tabindex="0" role="link">
|
||||
<div id="expand" tabindex="3" role="link">
|
||||
<?php if ($_['enableAvatars']): ?>
|
||||
<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown"'); } else { print_unescaped('" style="display: none"'); } ?>>
|
||||
<?php if ($_['userAvatarSet']): ?>
|
||||
|
@ -92,7 +92,7 @@
|
|||
<form class="searchbox" action="#" method="post">
|
||||
<input id="searchbox" class="svg" type="search" name="query"
|
||||
value="<?php if(isset($_POST['query'])) {p($_POST['query']);};?>"
|
||||
autocomplete="off" />
|
||||
autocomplete="off" tabindex="2" />
|
||||
</form>
|
||||
</div></header>
|
||||
|
||||
|
|
|
@ -14,7 +14,8 @@
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
<p id="message" class="hidden">
|
||||
<img class="float-spinner" src="<?php p(\OCP\Util::imagePath('core', 'loading-dark.gif'));?>"/>
|
||||
<img class="float-spinner" alt=""
|
||||
src="<?php p(\OCP\Util::imagePath('core', 'loading-dark.gif'));?>" />
|
||||
<span id="messageText"></span>
|
||||
<!-- the following div ensures that the spinner is always inside the #message div -->
|
||||
<div style="clear: both;"></div>
|
||||
|
|
Loading…
Reference in New Issue