From 72afe3153cfaf0f8aaa0a4db115fea62959ff6d1 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 4 Jun 2014 15:29:37 +0200 Subject: Use tags for table headers as suggested by the WCAG 2.0 Guidelines --- skins/larry/mail.css | 137 ++++++++++++++++++++++++++------------------------- 1 file changed, 69 insertions(+), 68 deletions(-) (limited to 'skins/larry/mail.css') diff --git a/skins/larry/mail.css b/skins/larry/mail.css index c5919ffe3..a0b66d9be 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -477,66 +477,66 @@ table.messagelist.fixedcopy { z-index: 2; } -.messagelist thead td:first-child { +.messagelist thead th:first-child { border-radius: 4px 0 0 0; /* for Chrome */ } -.messagelist tr td.attachment, -.messagelist tr td.threads, -.messagelist tr td.status, -.messagelist tr td.flag, -.messagelist tr td.priority { +.messagelist tr > .attachment, +.messagelist tr > .threads, +.messagelist tr > .status, +.messagelist tr > .flag, +.messagelist tr > .priority { width: 20px; padding: 2px 3px; } -.webkit .messagelist tr td.attachment, -.webkit .messagelist tr td.threads, -.webkit .messagelist tr td.status, -.webkit .messagelist tr td.flag, -.webkit .messagelist tr td.priority { +.webkit .messagelist tr > .attachment, +.webkit .messagelist tr > .threads, +.webkit .messagelist tr > .status, +.webkit .messagelist tr > .flag, +.webkit .messagelist tr > .priority { width: 26px; } -.messagelist tr td.threads { +.messagelist tr > .threads { width: 26px; } -.webkit .messagelist tr td.threads { +.webkit .messagelist tr > .threads { width: 30px; } -.messagelist tr td.threads, -.messagelist tr td.threads + td { +.messagelist tr > .threads, +.messagelist tr > .threads + td { border-left: 0; } -.messagelist tr td.size { +.messagelist tr > .size { width: 60px; text-align: right; } -.messagelist thead tr td.size { +.messagelist thead tr th.size { text-align: left; } -.messagelist tr td.fromto, -.messagelist tr td.from, -.messagelist tr td.to, -.messagelist tr td.cc, -.messagelist tr td.replyto { +.messagelist tr > .fromto, +.messagelist tr > .from, +.messagelist tr > .to, +.messagelist tr > .cc, +.messagelist tr > .replyto { width: 200px; } -.messagelist tr td.date { +.messagelist tr > .date { width: 155px; } -.messagelist tr td.folder { +.messagelist tr > .folder { width: 135px; } -.messagelist tr td.hidden { +.messagelist tr > .hidden { display: none; } @@ -553,13 +553,14 @@ table.messagelist.fixedcopy { /* background-color: #fff; */ } +.messagelist tr.flagged th, .messagelist tr.flagged td, .messagelist tr.flagged td a { color: #f30; } -.messagelist thead tr td.sortedASC a, -.messagelist thead tr td.sortedDESC a { +.messagelist thead tr th.sortedASC a, +.messagelist thead tr th.sortedDESC a { color: #004458; text-decoration: underline; background-image: url(images/listicons.png); @@ -567,7 +568,7 @@ table.messagelist.fixedcopy { background-position: right -912px; } -.messagelist thead tr td.sortedASC a { +.messagelist thead tr th.sortedASC a { background-position: right -944px; } @@ -589,39 +590,39 @@ table.messagelist.fixedcopy { cursor: pointer; } -.messagelist tr td.flag span, -.messagelist tr td.status span, -.messagelist tr td.attachment span, -.messagelist tr td.priority span { +.messagelist tr > .flag span, +.messagelist tr > .status span, +.messagelist tr > .attachment span, +.messagelist tr > .priority span { display: block; width: 20px; } .messagelist tr td div.collapsed, .messagelist tr td div.expanded, -.messagelist tr td.threads .listmenu, -.messagelist tr td.attachment span.attachment, -.messagelist tr td.attachment span.report, -.messagelist tr td.priority span.priority, -.messagelist tr td.priority span.prio1, -.messagelist tr td.priority span.prio2, -.messagelist tr td.priority span.prio3, -.messagelist tr td.priority span.prio4, -.messagelist tr td.priority span.prio5, -.messagelist tr td.flag span.flagged, -.messagelist tr td.flag span.unflagged, -.messagelist tr td.flag span.unflagged:hover, -.messagelist tr td.status span.status, -.messagelist tr td.status span.msgicon, -.messagelist tr td.status span.deleted, -.messagelist tr td.status span.unread, -.messagelist tr td.status span.unreadchildren, -.messagelist tr td.subject span.msgicon, -.messagelist tr td.subject span.deleted, -.messagelist tr td.subject span.unread, -.messagelist tr td.subject span.replied, -.messagelist tr td.subject span.forwarded, -.messagelist tr td.subject span.unreadchildren { +.messagelist tr > .threads .listmenu, +.messagelist tr > .attachment span.attachment, +.messagelist tr > .attachment span.report, +.messagelist tr > .priority span.priority, +.messagelist tr > .priority span.prio1, +.messagelist tr > .priority span.prio2, +.messagelist tr > .priority span.prio3, +.messagelist tr > .priority span.prio4, +.messagelist tr > .priority span.prio5, +.messagelist tr > .flag span.flagged, +.messagelist tr > .flag span.unflagged, +.messagelist tr > .flag span.unflagged:hover, +.messagelist tr > .status span.status, +.messagelist tr > .status span.msgicon, +.messagelist tr > .status span.deleted, +.messagelist tr > .status span.unread, +.messagelist tr > .status span.unreadchildren, +.messagelist tr > .subject span.msgicon, +.messagelist tr > .subject span.deleted, +.messagelist tr > .subject span.unread, +.messagelist tr > .subject span.replied, +.messagelist tr > .subject span.forwarded, +.messagelist tr > .subject span.unreadchildren { display: inline-block; vertical-align: middle; height: 18px; @@ -634,7 +635,7 @@ table.messagelist.fixedcopy { background-position: 0 -996px; } -.messagelist thead tr td.attachment span.attachment { +.messagelist thead tr th.attachment span.attachment { background-position: -24px -997px; } @@ -642,7 +643,7 @@ table.messagelist.fixedcopy { background-position: -24px -1116px; } -.messagelist thead tr td.priority span.priority { +.messagelist thead tr th.priority span.priority { background-position: -24px -1845px; } @@ -666,15 +667,15 @@ table.messagelist.fixedcopy { background-position: 0 -1036px; } -.messagelist thead tr td.flag span.flagged { +.messagelist thead tr th.flag span.flagged { background-position: -22px -1036px; } -.messagelist tr td.status span.msgicon:hover { - background-position: -23px -1056px; +.messagelist tr:hover td.status span.msgicon { + background-position: -23px -1057px; } -.messagelist tr td.flag span.unflagged:hover { +.messagelist tr:hover td.flag span.unflagged { background-position: -23px -1076px; } @@ -717,10 +718,10 @@ table.messagelist.fixedcopy { .messagelist tr td.status span.unread, .messagelist tr td.subject span.unread, .messagelist tr td.status span.unread:hover { - background-position: 0 -1016px; + background-position: 0 -1017px; } -.messagelist thead tr td.status span.status { +.messagelist thead tr th.status span.status { background-position: -23px -1017px; } @@ -734,10 +735,10 @@ table.messagelist.fixedcopy { cursor: pointer; } -.messagelist tr td.threads .listmenu { - background-position: 6px -972px; +.messagelist tr th.threads .listmenu { + background-position: 4px -972px; cursor: pointer; - width: 26px; + width: 24px; height: 21px; overflow: hidden; text-indent: -5000px; @@ -745,12 +746,12 @@ table.messagelist.fixedcopy { padding: 3px 5px 2px 6px; } -.messagelist tr td.threads .listmenu:focus { +.messagelist tr th.threads .listmenu:focus { background-color: rgba(73,180,210,0.7); outline: none; } -.messagelist thead tr td.subject, +.messagelist thead tr th.subject, .messagelist tbody tr td.subject { width: 99%; white-space: nowrap; -- cgit v1.2.3