style: update out of focus warning

frontend/src/html/pages/test.html

@@ -111,7 +111,7 @@
       <div class="burst hidden">1</div>
     </div>
     <div class="outOfFocusWarning hidden">
-      <i class="fas fa-mouse-pointer"></i>
+      <i class="fas fa-fw fa-mouse-pointer"></i>
       Click here or press any key to focus
     </div>
     <input

frontend/src/styles/test.scss

@@ -1091,9 +1091,10 @@
   .outOfFocusWarning {
     text-align: center;
     height: 0;
-    line-height: 150px;
+    font-size: 1rem;
     z-index: 999;
-    position: relative;
+    position: absolute;
+    width: 100%;
     -webkit-user-select: none;
     user-select: none;
     pointer-events: none;

frontend/src/ts/test/test-ui.ts

@@ -319,7 +319,10 @@ function updateWordsHeight(force = false): void {
     if (nh > wordsHeight) {
       nh = wordsHeight;
     }
-    $(".outOfFocusWarning").css("line-height", nh + "px");
+    $(".outOfFocusWarning").css(
+      "margin-top",
+      wordHeight + Misc.convertRemToPixels(1) / 2 + "px"
+    );
   } else {
     let finalWordsHeight: number, finalWrapperHeight: number;
 
@@ -370,7 +373,10 @@ function updateWordsHeight(force = false): void {
     $("#wordsWrapper")
       .css("height", finalWrapperHeight + "px")
       .css("overflow", "hidden");
-    $(".outOfFocusWarning").css("line-height", finalWrapperHeight + "px");
+    $(".outOfFocusWarning").css(
+      "margin-top",
+      finalWrapperHeight / 2 - Misc.convertRemToPixels(1) / 2 + "px"
+    );
   }
 
   if (Config.mode === "zen") {