Version 1.0.0 - Frontend

src/assets/Global.scss

@@ -7,37 +7,43 @@
     
 
     --primary: #111210;
+    --primary-inverse: #FFFFFF;
     --primary-hover: #ececec;
     --secondary: #2A2B28;
     --tertiary: #404040;
+    --quaternary: #636363;
     --text: #FFFFFF;
     --text-inverse: #111210;
     --text-secondary: #C5c3c3;
     --text-tertiary: #A5A5A5;
     --text-error: #ff2b2b;
-
+    --text-success: #00ff00;
+    --text-warning: #FFA500;
+  
   
 }
 
 [data-theme='light'] {
 
     --primary: #FFFFFF;
+    --primary-inverse: #111210;
     --primary-hover: #292b26;
     --secondary: #EAEAEA;
     --tertiary: #d3d3d3;
+    --quaternary: #b8b8b8;
     --text: #111210;
     --text-inverse: #FFFFFF;
     --text-secondary: #404040;
     --text-tertiary: #C5c3c3;
     --text-error: #CD034F;  
+    --text-success: #00a900;
+    --text-warning: #FFA500;
 }
 
 :root {
     --main: #CD034F;
-    --main-hover: #A0023F;
-    --main-active: #7A002F;
-
-    --text-success: #00ff00;
+    --main-hover: color-mix(in srgb, var(--main) 90%, black);
+    --main-active: color-mix(in srgb, var(--main) 70%, black);
 
     --admin-color: #209AFE;
     --owner-color: #FFAA32;
@@ -87,6 +93,7 @@ a {
 ::-webkit-scrollbar {
     width: 5px;
     margin-right: 20px;
+    margin-left: 20px;
   }
 ::-webkit-scrollbar-track {
     border-radius: 12px;
@@ -143,6 +150,7 @@ textarea:focus {
     }
 }
 
+
 input[type="checkbox"] {
     background-color: #FFFFFF !important;
 }
@@ -153,4 +161,24 @@ input[type="checkbox"]:checked {
 
 input[type="checkbox"]:hover {
     background-color: var(--main-active) !important;
+}
+
+input[type="text"] {
+    background-color: var(--tertiary);
+    border: none;
+    border-radius: 5px;
+    padding: 7px;
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+    outline: none;
+}
+
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(var(--scroll-distance));
+    }
 }