add zoom indicator in lower left corner (#39)

it looks like this:

  - 3200% +

I'm giving up on the 100% zoom button from the original idea, because rkgk's scaling curve makes it easy to go back to 100% if you need to.

static/index.css

@@ -54,6 +54,21 @@ main {
             pointer-events: all;
         }
 
+        & > .left {
+            display: flex;
+            flex-direction: column;
+
+            pointer-events: none;
+
+            & > * {
+                pointer-events: auto;
+            }
+
+            & > rkgk-zoom-indicator {
+                margin-block-start: auto;
+            }
+        }
+
         & > .right {
             grid-column: right / right;
             min-height: 0;
@@ -439,6 +454,38 @@ rkgk-brush-cost-gauges.rkgk-panel {
     }
 }
 
+/* Zoom indicator */
+
+rkgk-zoom-indicator,
+rkgk-zoom-indicator.rkgk-panel {
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    width: min-content;
+
+    overflow: clip; /* corners */
+
+    & > button {
+        width: 24px;
+        height: 24px;
+    }
+
+    & > p {
+        margin: 0;
+        padding: 0 4px;
+        line-height: 1;
+        width: 6ch;
+
+        user-select: none;
+
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+    }
+}
+
 /* Welcome screen */
 
 rkgk-welcome {