feat(overlay): add layoutimg display and border blink on readay

timeroverlay/style.css

@@ -0,0 +1,54 @@
+body {
+    margin: 0;
+    font-family: var(--font-family-override, "Open Sans", "Segoe UI", sans-serif);
+    font-size: 2vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(255, 255, 255, 0.45);
+}
+
+.redoutline {
+    outline: 1vw solid #e7625c;
+    outline-offset: -1vw;
+}
+.greenoutline {
+    outline: 1vw solid #4fbe4c;
+    outline-offset: -1vw;
+}
+
+.image,
+.timer {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+}
+
+.blink {
+  animation: blink 1s ease-in-out 3;
+}
+@keyframes blink {
+  0% {
+    outline-color: transparent;
+  }
+  50% {
+    outline-color: #4fbe4c
+  }
+  to {
+    outline-color: transparent
+  }
+}
+
+.hidden {
+    display: none;
+}