Fixing some color elements

app/frontend/static/assets/css/crafty.css

@@ -271,12 +271,6 @@ body {
     color: var(--red) !important;
 }
 
-/* Useless ?
-.input_motd {
-    max-width: 10px;
-    max-height: 10px;
-}*/
-
 /**************************************************************/
 
 /**************************************************************/

app/frontend/static/assets/css/internal/root.css

@@ -1,17 +1,4 @@
 :root {
-    --blue: #00aeef;
-    --indigo: #6610f2;
-    --purple: #ab8ce4;
-    --pink: #E91E63;
-    --red: var(--red);
-    --orange: #fb9678;
-    --yellow: #ffd500;
-    --green: #3bd949;
-    --teal: var(--teal);
-    --cyan: var(--cyan);
-    --white: var(--white);
-    --gray: var(--gray);
-    --gray-dark: #292b2c;
     --blue: #00aeef;
     --indigo: #6610f2;
     --purple: #ab8ce4;
@@ -25,6 +12,7 @@
     --white: var(--white);
     --white-smoke: var(--white-smoke);
     --gray: var(--gray);
+    --gray-dark: #292b2c;
     --gray-light: #8ba2b5;
     --gray-lightest: var(--gray-lightest);
     --primary: var(--primary);

app/frontend/static/assets/css/partial/crafty-footer.css

@@ -6,7 +6,7 @@ a:hover {
 }
 
 .blink-text {
-    color: #000;
+    color: var(--base-text);
     font-weight: bold;
     font-size: 2rem;
     animation: blinkingText 2s infinite;
@@ -14,15 +14,15 @@ a:hover {
 
 @keyframes blinkingText {
     0% {
-        color: grey;
+        color: var(--base-text);
     }
 
     50% {
-        color: red;
+        color: var(--red);
     }
 
     100% {
-        color: grey;
+        color: var(--base-text);
     }
 }
 

app/frontend/static/assets/css/partial/crafty-wizard.css

@@ -1,19 +1,15 @@
-/*#creation_wizard {
-    -webkit-filter: grayscale(1);
-}*/
-
 .api-alert {
     position: absolute;
     top: -5px;
     left: 0;
     font-size: 50px !important;
-    color: #fff;
-    background: rgb(0, 170, 170);
-    opacity: .4;
+    color: var(--white);
+    background: var(--blue);
+    /* rgb(0, 170, 170);*/
     width: 100%;
     height: 100%;
     z-index: 100;
-    opacity: .99;
+    opacity: .95;
 }
 
 .api-alert p {
@@ -25,12 +21,12 @@
     font-size: 20px;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    color: white !important;
+    color: var(--white) !important;
 }
 
 .api-alert p>i,
 .api-alert p>a {
-    color: red;
+    color: var(--red);
 }
 
 button>i.refresh-class {
@@ -124,24 +120,6 @@ button>i.refresh-class {
     overflow-y: auto;
 }
 
-.menu-btn {
-    font-size: 0.9em;
-    padding: 2px 10px;
-}
-
-.menu {
-    padding-top: 10px;
-    z-index: 200;
-    margin-top: 4px;
-    position: absolute;
-    background-color: #2a2c44;
-}
-
-.menu-option {
-    padding: 6px 20px 6px;
-    color: white;
-}
-
 #overlay {
     position: absolute;
     top: 0px;