diff options
| author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-08-25 20:35:43 +0300 |
|---|---|---|
| committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-08-28 10:31:41 +0300 |
| commit | bf87c25fa46fe4ae1a39ecfe9fea308d0e720e0e (patch) | |
| tree | 343047503ea7d6e94c7d5cbd01da5afa661902d4 /css | |
| parent | 9692378f6fd42c3d4514e86dcba3d6d2b6b9b6df (diff) | |
Fix avatars of participants with contacts menu not focusable
The avatar is a div, so it is not focusable by default. However, if it
were focused it could not be properly "highlighted" with a border; the
whole avatar is dimmed for offline participants, so the border colour
would be different when "highlighting" the avatar of online and offline
participants. Due to this the avatar is now wrapped in another div which
is the focusable one (provided the avatar has a contacts menu) and the
one that gets the border. Finally, when the Enter or space keys are
pressed on the wrapper a click is triggered in the avatar, which shows
the contacts menu.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Diffstat (limited to 'css')
| -rw-r--r-- | css/style.scss | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/css/style.scss b/css/style.scss index d3411b966..8b9779fe6 100644 --- a/css/style.scss +++ b/css/style.scss @@ -199,7 +199,6 @@ input[type="password"] { padding: 0; } -.participantWithList .avatar, #app-navigation .app-navigation-entry-link > .avatar { position: absolute; left: 6px; @@ -737,6 +736,26 @@ input[type="password"] { background: no-repeat 14px center; } +.participantWithList > li > span > .avatar-wrapper { + position: absolute; + top: 6px; + left: 6px; + + &:focus, + &:active { + border: 1px solid var(--color-border-dark); + border-radius: 50%; + + /* Separate the border slightly from the avatar to make it more + * noticeable. */ + padding: 3px; + + /* Compensate position for the border and the increased size. */ + top: 2px; + left: 2px; + } +} + body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.guestUser) { .avatar, .avatar img { |