Added pin input field(s)

3 files changed, 42 insertions, 3 deletions

diff --git a/public/styles/main.sass b/public/styles/main.sass
index d7377ab..a6f0d2e 100644
--- a/public/styles/main.sass
+++ b/public/styles/main.sass
@@ -1,3 +1,4 @@
 // Normal input doesn't work here for npm packages!
 @import "../../node_modules/bulma/bulma"
 @import "style"
+@import "pin"
diff --git a/public/styles/pin.sass b/public/styles/pin.sass
new file mode 100644
index 0000000..3aea4fc
--- /dev/null
+++ b/public/styles/pin.sass
@@ -0,0 +1,38 @@
+.columns
+    min-height: 100%
+
+.enter-pin
+    position: relative
+    top: 50%
+    transform: translateY(-50%)
+
+.pin-wrapper
+    padding: 0
+    margin: 0
+    align-items: center
+    justify-content: center
+
+.pin-wrapper > .column
+    align-items: center
+    justify-content: center
+
+.pin-wrapper > .column input
+    width: 15vw
+    height: 15vw
+    font-size: 15vw
+    background-color: #2d3338
+    color: transparent
+    text-shadow: 0 0 0 #000
+    border: none
+    border-radius: 10px
+    text-align: center
+
+.pin-wrapper > .column input::-webkit-outer-spin-button, .pin-wrapper > .column input::-webkit-inner-spin-button
+    -webkit-appearance: none
+    margin: 0
+
+.pin-wrapper > .column input:focus
+    border-color: inherit
+    -webkit-box-shadow: none
+    box-shadow: none
+    outline: none
diff --git a/public/styles/style.sass b/public/styles/style.sass
index 16ce7fe..4d38d4b 100644
--- a/public/styles/style.sass
+++ b/public/styles/style.sass
@@ -4,6 +4,9 @@ html, body
     overflow: hidden !important
     background-color: #23272a !important
 
+.chat
+    display: none
+
 .main
     align-items: flex-start
 
@@ -26,6 +29,3 @@ html, body
     width: 100%
     bottom: 0
     left: 0
-
-.columns
-    min-height: 100%