fix: fix media button focus outline (#1103)

fixes #1037
2019-03-17 12:37:19 -07:00 · 2019-03-17 12:37:19 -07:00 · 8b0dd86605
parent 4751791dcc
commit 8b0dd86605
1 changed files with 15 additions and 0 deletions
--- a/src/routes/_components/status/Media.html
+++ b/src/routes/_components/status/Media.html
@ -73,6 +73,21 @@
    position: relative;
  }

+  /* the actual focus outline is not very visible, so use an ::after pseudo-element */
+  .play-video-button:focus, .show-image-button:focus {
+    outline: none;
+  }
+
+  .play-video-button:focus::after, .show-image-button:focus::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    border: 2px solid var(--focus-outline);
+  }
+
  .show-image-button {
    cursor: zoom-in;
  }