1 files changed, 97 insertions, 0 deletions
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..08d7a44
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,97 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    /* width: 100%;
+    height: 100%; */
+    font-family: monospace;
+    overflow: hidden;
+    font-family: 'Kufam', 'Courier new', 'monospace';
+}
+
+body {
+    // margin: 10px;
+    background-color: $background-base;
+    color: $foreground-base;
+}
+
+.app-info {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    left: max(env(safe-area-inset-left, 10px), 10px);
+
+    h1 {
+        font-size: 14px;
+        margin: 0;
+        color: $foreground-base;
+    }
+
+    .version {
+        display: block;
+        font-size: 9px;
+    }
+}
+
+button:hover {
+    filter: brightness(80%);
+}
+button:active {
+    filter: brightness(70%);
+}
+
+.button-center {
+    position: absolute;
+    display: none;
+    margin-top: 5px;
+    border: none;
+    background-color: $background-z1;
+    color: $foreground-z1;
+    padding: 10px;
+    width: 140px;
+    height: 40px;
+    left: calc(50% - 70px);
+    font-weight: 400;
+    font-size: 15px;
+
+    .armed & { display: block; }
+    &-top    { top: 10px; }
+    &-bottom { bottom: 50px; }
+}
+
+#btn_connect { display: block; }
+.connected #btn_connect { display: none; }
+.connected #btn_disconnect { display: block; }
+.connected #btn_arm { display: block; }
+#btn_connect, #btn_disconnect {
+    text-shadow: 0 0 5px #c3c3c3, 0 0 10px #636363;
+}
+
+.settings-button {
+    position: absolute;
+    background: $background-base;
+    color: $foreground-z1;
+    border: none;
+    top: 15px;
+    font-size: 1.3em;
+    right: max(env(safe-area-inset-left, 10px), 10px);
+}
+.settings-button:hover {
+    color: $foreground-base;
+    filter: brightness(100%);
+}
+
+.button-states {
+    display: none;
+    position: absolute;
+    top: 60px;
+    left: calc(50% - 80px - 10px);
+    width: 160px;
+    text-align: center;
+    background-color: #272727;
+    padding: 0 10px;
+    border-radius: 10px;
+    font-size: 9px;
+
+    .connected & { display: block; }
+    .debug & { display: block; }
+}