wip

public/css/index.css

@@ -1,3 +1,30 @@
+:root {
+  --black: #030B12;
+  --darkdark: #0C1D2E;
+  --dark: #203A53;
+  --lightdark: #425F7C;
+  --light: #93A9BE;
+  --lightlight: #B6C5D5;
+  --white: #F0F3F7;
+  --orange: ##F5B97D;
+  --yellow: #F5F57D;
+  --green: #B9F57D;
+  --turquoise: #7DF5B9;
+  --blue: #7DB9F5;
+  --purple: #B97DF5;
+  --pink: #F57DB9;
+  --red: #F57D7D;
+
+  --pri: var(--blue);
+  --alt: var(--pink);
+  --valid: var(--green);
+  --error: var(--red);
+  --warn: var(--orange);
+  --info: var(--yellow);
+  --bg: var(--darkdark);
+  --fg: var(--white);
+}
+
 /**
  *  SETTINGS
  */
@@ -8,66 +35,66 @@
  *  BACKGROUND
  */
 .bg-primary {
-  background-color: #03a9f4;
+  background-color: var(--blue);
 }
 
 .bg-dark {
-  background-color: #18232f;
+  background-color: var(--darkdark);
 }
 
 .bg-secondary {
-  background-color: #e91e63;
+  background-color: var(--pink);
 }
 
 .bg-white {
-  background-color: #fff;
+  background-color: var(--white);
 }
 
 .bg-success {
-  background-color: #4caf50;
+  background-color: var(--green);
 }
 
 .bg-info {
-  background-color: #5bc0de;
+  background-color: var(--yellow);
 }
 
 .bg-warning {
-  background-color: #f0ad4e;
+  background-color: var(--orange);
 }
 
 .bg-error {
-  background-color: #e74c3c;
+  background-color: var(--red);
 }
 
 .bg-gray {
-  background-color: #969da6;
+  background-color: var(--lightdark);
 }
 
 .bg-gray-light {
-  background-color: #eceff1;
+  background-color: var(--lightlight);
 }
 
 /**
  *  BORDER
  */
 .border {
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
 }
 
 .border-bottom {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
 }
 
 .border-left {
-  border-left: 1px solid #d5d9db;
+  border-left: 1px solid var(--white);
 }
 
 .border-right {
-  border-right: 1px solid #d5d9db;
+  border-right: 1px solid var(--white);
 }
 
 .border-top {
-  border-top: 1px solid #d5d9db;
+  border-top: 1px solid var(--white);
 }
 
 /**
@@ -313,16 +340,16 @@ body {
 }
 
 a {
-  color: #03a9f4;
+  color: var(--blue);
   text-decoration: none;
 }
 
 a:hover {
-  color: rgba(3, 169, 244, 0.8);
+  color: color-mix(in srgb, var(--color-primary), #FFF 15%);
 }
 
 a:focus {
-  color: #03a9f4;
+  color: var(--blue);
 }
 
 .text-huge,
@@ -647,7 +674,7 @@ button {
 
 .button--outlined {
   background-color: transparent;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   color: #03a9f4;
 }
 
@@ -708,7 +735,7 @@ input:-webkit-autofill {
 .textarea,
 .input,
 .select {
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-radius: 3px;
   box-shadow: none;
   display: inline-block;
@@ -876,7 +903,7 @@ input:-webkit-autofill {
 
 .checkbox input[type="checkbox"]+label::before {
   background-color: #eceff1;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-radius: 3px;
   content: "";
   display: inline-block;
@@ -929,7 +956,7 @@ input:-webkit-autofill {
 
 .radio input[type="radio"]+label::before {
   background-color: #eceff1;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-radius: 20px;
   content: "";
   display: inline-block;
@@ -1580,7 +1607,7 @@ input:-webkit-autofill {
  */
 .table {
   background-color: #eceff1;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-collapse: collapse;
   color: #272727;
   max-width: 100%;
@@ -1589,13 +1616,13 @@ input:-webkit-autofill {
 
 .table th,
 .table td {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
   padding: 8px;
   position: relative;
 }
 
 .table thead {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
 }
 
 .table th {
@@ -1670,7 +1697,7 @@ input:-webkit-autofill {
 }
 
 .table--responsive td:first-child {
-  border-top: 1px solid #d5d9db;
+  border-top: 1px solid var(--white);
 }
 
 .table--responsive th,
@@ -1682,7 +1709,7 @@ input:-webkit-autofill {
 
   .table--responsive th,
   .table--responsive td {
-    border-top: 1px solid #d5d9db;
+    border-top: 1px solid var(--white);
     display: table-cell;
   }
 }
@@ -1700,7 +1727,7 @@ input:-webkit-autofill {
  *
  */
 .tabs {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
   text-align: center;
 }
 
@@ -3178,7 +3205,7 @@ li {
 }
 
 .map-menu-item {
-  background-color: darkslategrey;
+  background-color: var(--darkdark);
   padding: 5px;
   border-radius: 50%;
   cursor: pointer;
@@ -3195,11 +3222,10 @@ li {
 
 .spinner {
   position: absolute;
-  right: 1px;
-  top: 1px;
+  right: 0;
+  top: 0;
   width: 40px;
-  height: 38px;
-  background: #fff;
+  height: 40px;
   display: block
 }
 
@@ -3209,14 +3235,12 @@ li {
   content: "";
   top: 50%;
   left: 50%;
-  margin: -8px 0 0 -8px;
-  width: 16px;
-  height: 16px;
+  margin: -12px 0 0 -12px;
+  width: 24px;
+  height: 24px;
   border-radius: 100%;
-  border: 2px solid transparent;
-  border-top-color: #41b883;
-  -webkit-box-shadow: 0 0 0 1px transparent;
-  box-shadow: 0 0 0 1px transparent
+  border: 3px solid transparent;
+  border-top-color: var(--blue);
 }
 
 .spinner:before {