character selection work

src/assets/scss/_variables.scss

@@ -0,0 +1,11 @@
+// Colors
+$white: #fff;
+$black: #000;
+$purple: #4741e6;
+$lilac: #7B76FF;
+$light-blue: #00c2ff;
+$red: #ff0000;
+$gray: #7f7f7f;
+$gray-2: #696969;
+$dark-gray: #454545;
+$light-gray: #b1b2b5;

src/assets/scss/login.scss

@@ -1,3 +1,5 @@
+@import '@/assets/scss/main';
+
 #bg-img {
   height: 100vh;
   width: 100%;
@@ -33,14 +35,14 @@
         .form-field {
           display: flex;
           flex-direction: column;
-          background-color: rgba(255, 255, 255, 0.5);
+          background-color: rgba($white, 0.5);
           border-radius: 3px;
           min-width: 25rem;
           margin: 0 auto;
 
           label {
-            color: #000;
-            background-color: rgba(255, 255, 255, 0.5);
+            color: $black;
+            background-color: rgba($white, 0.5);
             padding: 0.25rem 0.25rem;
             font-size: 0.875rem;
             border-top-left-radius: 3px;
@@ -71,17 +73,17 @@
         text-align: center;
         position: relative;
         font-size: 0.65rem;
-        background-color: rgba(71, 65, 230, 0.75);
-        border: rgba(255, 255, 255, 0.35) 1px solid;
+        background-color: rgba($purple, 0.75);
+        border: rgba($white, 0.35) 1px solid;
         border-radius: 5px;
 
         span {
-          color: white;
+          color: $white;
           margin: auto;
         }
 
         &:hover {
-          background-color: rgba(123, 118, 255, 0.75);
+          background-color: rgba($lilac, 0.75);
           cursor: pointer;
         }
       }
@@ -93,13 +95,13 @@
   margin-top: 7rem;
   text-align: center;
   font-size: 3rem;
-  color: #FFF;
-  text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
+  color: $white;
+  text-shadow: -1px -1px 0 $gray, 1px -1px 0 $gray, -1px 1px 0 $gray, 1px 1px 0 $gray;
 }
 
 p, a, li, label {
   font-family: Arial, sans-serif;
-  color: #FFF;
+  color: $white;
 }
 
 button {

src/assets/scss/main.scss

@@ -1,3 +1,6 @@
+@import "@/assets/scss/_variables";
+
+// Fonts
 @font-face {
     font-family: GentiumPlus;
     src: url('@/assets/fonts/Gentium_plus.ttf');
@@ -6,7 +9,7 @@
 body {
     -ms-overflow-style: none;
     scrollbar-width: none;
-    background: black;
+    background: $black;
 
     // Disable selection, might wanna comment when debugging
     -webkit-user-select: none; /* Safari */