Improve keyboard navigation on compose screen: define tabindex groups + enable keyboard controls of contacts list widget

1 files changed, 30 insertions, 0 deletions

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index cbff87bec..e1dbeeaa9 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1190,6 +1190,36 @@ a.iconlink.upload {
 	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,