Mirrors/go-inbucket
1
0
Fork 0
mirror of https://github.com/jhillyerd/inbucket.git synced 2025-12-17 09:37:02 +00:00
Code Issues Releases Wiki Activity

ui: Keyboard accessibility focus highlights (#180)

Browse Source 
* Focus indication for mailbox message list
* Add focus for monitor message list
This commit is contained in:
James Hillyerd
2020-09-22 14:11:06 -07:00
committed by GitHub
parent 407ae87a3b
commit 361bbec293
2 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/mailbox.css
View File

@@ -98,9 +98,14 @@
border-width: 1px;
border-style: none solid solid solid;
cursor: pointer;
outline: none;
padding: 5px 8px;
}
.message-list-entry:focus {
background-color: var(--focused-bg-color) !important;
}
.message-list-entry.selected {
background-color: var(--selected-color);
}
@@ -109,6 +114,10 @@
border-style: solid;
}
.message-list-entry:focus .subject {
color: var(--focused-color);
}
.message-list-entry .subject {
color: var(--high-color);
}
@@ -117,6 +126,12 @@
font-weight: bold;
}
.message-list-entry:focus .from,
.message-list-entry:focus .date {
color: var(--focused-color);
opacity: 0.8;
}
.message-list-entry .from,
.message-list-entry .date {
color: var(--low-color);

8
ui/src/main.css
View File

@@ -9,6 +9,8 @@
--border-color: #ddd;
--placeholder-color: #9f9f9f;
--selected-color: #eee;
--focused-color: #fff;
--focused-bg-color: #337ab7;
}
html, body, div, span, applet, object, iframe,
@@ -352,3 +354,9 @@ h3 {
background-color: var(--selected-color);
cursor: pointer;
}
.monitor tr:focus {
color: var(--focused-color);
background-color: var(--focused-bg-color);
outline: none;
}