From 58d7f6ca1f7c58c68739a2fe216f76b7def3af76 Mon Sep 17 00:00:00 2001
From: bloodwiing <bloodwiing+git@alchemix.dev>
Date: Thu, 16 May 2024 10:04:16 +0300
Subject: [PATCH] Add: Better Base styling

---
 static/css/base.scss |  9 +++++++--
 static/css/form.scss | 35 ++++++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/static/css/base.scss b/static/css/base.scss
index 3c60879..c5a7727 100644
--- a/static/css/base.scss
+++ b/static/css/base.scss
@@ -3,6 +3,7 @@
 
   --background: #111118;
 
+  --accent-light: #9e8afa;
   --accent: #846bf7;
   --accent-dim: #846bf760;
   --accent-very-dim: #846bf716;
@@ -47,7 +48,7 @@ button.button {
   background: var(--accent-very-dim);
   border-radius: 4px;
 
-  &:hover {
+  &:hover, &:active {
     background: var(--accent-dim);
   }
 }
@@ -56,7 +57,11 @@ button.button.transparent {
   background: transparent;
   border-radius: 4px;
 
-  &:hover {
+  &:hover, &:active {
     background: var(--accent-dim);
   }
 }
+
+.noSelect {
+  user-select: none;
+}
diff --git a/static/css/form.scss b/static/css/form.scss
index 0f7156c..f970fde 100644
--- a/static/css/form.scss
+++ b/static/css/form.scss
@@ -1,9 +1,9 @@
-form {
+form.entryForm {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 32px;
   padding: 32px;
   background: #00000090;
   border-radius: 16px;
@@ -11,17 +11,26 @@ form {
 
   max-width: 350px;
   width: calc(20dvw + 150px);
-}
 
-button[type=submit] {
-  background: white;
-}
+  button[type=submit] {
+    background: var(--accent-dim);
+    border-radius: 4px;
+    padding: 0.3em 0.8em;
+    
+    color: white;
+  }
+  
+  input[type=text],
+  input[type=password] {
+    font-size: 1rem;
+    padding: 0.6em 1.5em;
+    background: #222;
+    border-radius: 8px;
+    border: none;
+    width: calc(100% - 3em);
+  }
 
-input[type=text],
-input[type=password] {
-  padding: 0.8em 1.5em;
-  background: #333;
-  border-radius: 8px;
-  border: none;
-  width: calc(100% - 3em);
+  label {
+    color: var(--accent-light);
+  }
 }