Ensure proper color contrast according to WCAG AA
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
0dc52bf1c9
commit
e7d6410f25
|
@ -100,7 +100,7 @@
|
|||
}
|
||||
|
||||
#app-sidebar .file-details {
|
||||
color: #999;
|
||||
color: $color-text-details;
|
||||
}
|
||||
|
||||
#app-sidebar .action-favorite {
|
||||
|
|
|
@ -147,10 +147,9 @@ table tr.mouseOver td {
|
|||
tbody a { color: $color-main-text; }
|
||||
|
||||
span.conflict-path, span.extension, span.uploading, td.date {
|
||||
color: #999;
|
||||
color: $color-text-details;
|
||||
}
|
||||
span.conflict-path, span.extension {
|
||||
opacity: .7;
|
||||
-webkit-transition: opacity 300ms;
|
||||
-moz-transition: opacity 300ms;
|
||||
-o-transition: opacity 300ms;
|
||||
|
@ -162,11 +161,11 @@ tr:focus span.conflict-path,
|
|||
tr:hover span.extension,
|
||||
tr:focus span.extension {
|
||||
opacity: 1;
|
||||
color: #777;
|
||||
color: $color-text-details;
|
||||
}
|
||||
|
||||
table th, table th a {
|
||||
color: #999;
|
||||
color: $color-text-details;
|
||||
}
|
||||
table.multiselect th a {
|
||||
color: #000;
|
||||
|
|
|
@ -1327,7 +1327,9 @@
|
|||
// size column
|
||||
if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) {
|
||||
simpleSize = humanFileSize(parseInt(fileData.size, 10), true);
|
||||
sizeColor = Math.round(160-Math.pow((fileData.size/(1024*1024)),2));
|
||||
// rgb(118, 118, 118) / #767676
|
||||
// min. color contrast for normal text on white background according to WCAG AA
|
||||
sizeColor = Math.round(118-Math.pow((fileData.size/(1024*1024)),2));
|
||||
} else {
|
||||
simpleSize = t('files', 'Pending');
|
||||
}
|
||||
|
@ -1342,8 +1344,10 @@
|
|||
// difference in days multiplied by 5 - brightest shade for files older than 32 days (160/5)
|
||||
var modifiedColor = Math.round(((new Date()).getTime() - mtime )/1000/60/60/24*5 );
|
||||
// ensure that the brightest color is still readable
|
||||
if (modifiedColor >= '160') {
|
||||
modifiedColor = 160;
|
||||
// rgb(118, 118, 118) / #767676
|
||||
// min. color contrast for normal text on white background according to WCAG AA
|
||||
if (modifiedColor >= '118') {
|
||||
modifiedColor = 118;
|
||||
}
|
||||
var formatted;
|
||||
var text;
|
||||
|
|
|
@ -7,6 +7,11 @@ $color-warning: #ffcc44;
|
|||
$color-success: #46ba61;
|
||||
$color-primary-element: $color-primary;
|
||||
|
||||
// rgb(118, 118, 118) / #767676
|
||||
// min. color contrast for normal text on white background according to WCAG AA
|
||||
// (Works as well: color: #000; opacity: 0.57;)
|
||||
$color-text-details: #767676;
|
||||
|
||||
@function nc-darken($color, $value) {
|
||||
@return darken($color, $value);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue