More improvements to list focus styles:

- display focused row also when selected
- background-position-x doesn't work on Firefox, use full background-position properties
pull/156/head
Thomas Bruederli 11 years ago
parent 72dc3c0faf
commit 1670b3e1d3

@ -233,13 +233,13 @@
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
#contacts-table tbody tr.focused > td:first-child { #contacts-table tbody tr.focused > td:first-child {
border-left: 4px solid #ddd; border-left: 2px solid #d4d4d4;
padding-left: 4px; padding-left: 6px;
} }
#contacts-table tbody tr.selected.focused > td:first-child { #contacts-table tbody tr.selected.focused > td:first-child {
border-left: 0; border-left: 1px solid #ccc;
padding-left: 8px; padding-left: 7px;
} }
#contacts-table .contact.readonly td #contacts-table .contact.readonly td

@ -958,18 +958,22 @@ table.messagelist.fixedcopy
color: #CC0000; color: #CC0000;
} }
/* This padding-left minus the focused padding left should be half of the focused border-left */
.messagelist thead tr td:first-child,
.messagelist tbody tr td:first-child {
border-left: 0;
padding-left: 6px;
}
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.messagelist tbody tr.focused > td:first-child { .messagelist tbody tr.focused > td:first-child {
border-left: 6px solid #ddd; border-left: 4px solid #d4d4d4;
padding-left: 3px; padding-left: 4px;
} }
/* This padding-left minus the focused padding left should be half of the focused border-left */
.messagelist thead tr td:first-child,
.messagelist tbody tr td:first-child,
.messagelist tbody tr.selected.focused > td:first-child { .messagelist tbody tr.selected.focused > td:first-child {
border-left: 0; border-left: 2px solid #ccc;
padding-left: 6px; padding-left: 5px;
} }
.messagelist tr.selected td .messagelist tr.selected td

@ -149,41 +149,59 @@
background: url(images/listicons.png) -2px -1180px no-repeat; background: url(images/listicons.png) -2px -1180px no-repeat;
} }
/* This padding-left should be equal to the focused border-left + the focused padding-left */
#contacts-table thead tr td:first-child,
#contacts-table tbody tr td:first-child {
border-left: 0;
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 */
#contacts-table tbody tr.focused > td:first-child {
border-left: 2px solid #b0ccd7;
padding-left: 34px;
}
#contacts-table tbody tr.selected.focused > td:first-child {
border-left-color: #9ec2d0;
}
#contacts-table .contact td.name { #contacts-table .contact td.name {
background-position: 6px -1603px; background-position: 6px -1603px;
} }
#contacts-table .contact.focused td.name {
background-position: 4px -1603px;
}
#contacts-table .contact.selected td.name, #contacts-table .contact.selected td.name,
#contacts-table .contact.unfocused td.name { #contacts-table .contact.unfocused td.name {
background-position: 6px -1627px; background-position: 6px -1627px;
font-weight: bold; font-weight: bold;
} }
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ #contacts-table .contact.selected.focused td.name {
#contacts-table tbody tr.focused > td:first-child { background-position: 4px -1627px;
border-left: 2px solid #b0ccd7;
padding-left: 34px;
background-position-x: 4px;
}
/* This padding-left should be equal to the focused border-left + the focused padding-left */
#contacts-table thead tr td:first-child,
#contacts-table tbody tr td:first-child,
#contacts-table tbody tr.selected.focused > td:first-child {
border-left: 0;
padding-left: 36px;
} }
#contacts-table .group td.name { #contacts-table .group td.name {
background-position: 6px -1555px; background-position: 6px -1555px;
} }
#contacts-table .group.focused td.name {
background-position: 4px -1555px;
}
#contacts-table .group.selected td.name, #contacts-table .group.selected td.name,
#contacts-table .group.unfocused td.name { #contacts-table .group.unfocused td.name {
background-position: 6px -1579px; background-position: 6px -1579px;
font-weight: bold; font-weight: bold;
} }
#contacts-table .group.selected.focused td.name {
background-position: 4px -1579px;
}
#addresslist .boxtitle { #addresslist .boxtitle {
padding-right: 95px; padding-right: 95px;
overflow: hidden; overflow: hidden;

@ -1378,18 +1378,21 @@ table.records-table {
background-color: #fff; background-color: #fff;
} }
/* This padding-left minus the focused padding left should be half of the focused border-left */
.records-table thead tr td:first-child,
.records-table tbody tr td:first-child {
border-left: 0;
padding-left: 6px;
}
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.records-table tbody tr.focused > td:first-child { .records-table tbody tr.focused > td:first-child {
border-left: 4px solid #b0ccd7; border-left: 2px solid #b0ccd7;
padding-left: 2px; padding-left: 4px;
} }
/* This padding-left minus the focused padding left should be half of the focused border-left */
.records-table thead tr td:first-child,
.records-table tbody tr td:first-child,
.records-table tbody tr.selected.focused > td:first-child { .records-table tbody tr.selected.focused > td:first-child {
border-left: 0; border-left-color: #49b3d2;
padding-left: 6px;
} }
.records-table tr.selected td { .records-table tr.selected td {

Loading…
Cancel
Save