diff --git a/ui/src/mailbox.css b/ui/src/mailbox.css index c0207b4..af26a8f 100644 --- a/ui/src/mailbox.css +++ b/ui/src/mailbox.css @@ -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); diff --git a/ui/src/main.css b/ui/src/main.css index 57e8bd3..46cd7f0 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -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; +}