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

8
ui/src/main.css
View File

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