feat(timeroverlaytouch): add timeroverlay with buttons

timeroverlaytouch/style.css

@@ -0,0 +1,86 @@
+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;
+}
+
+.buttoncontainer,
+.container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(255, 255, 255, 0.45);
+}
+
+.buttoncontainer {
+  padding: 2%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 10px;
+}
+
+.buttonelement {
+  display: flex;
+  padding: 1%;
+  border-radius: 10px;
+  width: 8%;
+  aspect-ratio: 1 / 1;
+  background-color: #1c1c1c;
+  justify-content: center;
+  align-items: center;
+  font-size: 100%;
+  color: #cfcfcf;
+  text-align: center;
+  user-select: none;
+}
+
+.buttonelement:active {
+  background-color: #101010;
+  outline-width: 0.5vw;
+}
+
+.redoutline {
+    outline: 1vw solid #e7625c;
+    outline-offset: -1vw;
+}
+.greenoutline {
+    outline: 1vw solid #4fbe4c;
+    outline-offset: -1vw;
+}
+
+.image,
+.timer {
+    position: absolute;
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.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;
+}