Improve (message) list widget display and keyboard navigation to show sane ...

Thomas Bruederli

2014-05-28 8fd955eb1eb7b6e3a1e0275bf8481c287dd6afc0

 skins/larry/styles.css

@@ -1184,17 +1184,47 @@
   padding-bottom: 5px;
   height: auto;
   min-height: 14px;
   outline: none;
}

.webkit .listing tbody td {
   height: 14px;
}

/* This padding-left minus the focused padding left should be half of the focused border-left */
.listing thead tr td:first-child,
.listing tbody tr td:first-child {
   border-left: 0;
   padding-left: 6px;
}

.listing.iconized thead tr td:first-child,
.listing.iconized tbody tr td:first-child {
   padding-left: 36px;
}

/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.listing.focus tbody tr.focused > td:first-child {
   border-left: 2px solid #b0ccd7;
   padding-left: 4px;
}

.listing.iconized.focus tbody tr.focused > td:first-child {
   padding-left: 34px;
}

.listing.focus tbody tr.selected.focused > td:first-child {
   border-left-color: #9ec2d0;
}

.listing.inconized.focus tr.focused td:first-child {
   padding-left: 34px;
}

.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.unfocused td,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a {
@@ -1526,6 +1556,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   background-color: #fff;
   outline: none;
}

/* This padding-left minus the focused padding left should be half of the focused border-left */
@@ -1547,6 +1578,10 @@

.records-table tr.selected td {
   color: #fff !important;
   background-color: #4db0d2 !important;
}

.records-table.focus tr.selected td {
   background: #019bc6;
   background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4));
@@ -1557,16 +1592,6 @@

.records-table tr.selected td a,
.records-table tr.selected td span {
   color: #fff !important;
}

.records-table tr.unfocused td {
   color: #fff !important;
   background-color: #4db0d2 !important;
}

.records-table tr.unfocused td a,
.records-table tr.unfocused td span {
   color: #fff !important;
}

@@ -2678,6 +2703,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 20px;
   outline: none;
}

.attachmentslist li a.drop {
@@ -2689,6 +2715,15 @@
   right: 0;
   top: 0;
   padding: 0;
   overflow: hidden;
   text-indent: -5000px;
   outline: none;
}

.attachmentslist li a:focus,
.attachmentslist li a.drop:focus {
   background-color: rgba(30,150,192, 0.5);
   border-radius: 2px;
}

#compose-attachments ul li {