styles and blast

client/assets/styles/colours.less

@@ -4,9 +4,12 @@
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 
-@darkgray: #222;
-@gray: #333;
-
+@gray: #222;
+@gray-box: #222;
+@gray-exists: #444;
+@gray-hint: #666;
+@gray-hover: #888;
+@gray-focus: whitesmoke;
 
 svg {
     stroke: none;

client/assets/styles/instance.less

@@ -1,6 +1,4 @@
-/*
-    INSTANCE
-*/
+@import 'colours.less';
 
 .instance {
     overflow-x: hidden;
@@ -92,7 +90,7 @@
 }
 
 .vbox-combiner-arrow {
-    color: #444;
+    color: @gray-hint;
     grid-area: carrow;
     display: block;
     text-align: center;
@@ -109,7 +107,7 @@
     margin: 1em 0.25em 0 0.25em;
     grid-area: varrow;
     font-size: 2em;
-    color: #444;
+    color: @gray-hint;
 }
 
 .vbox-combiner button {
@@ -134,7 +132,7 @@
 
 .arrow {
     grid-area: arrow;
-    color: #444;
+    color: @gray-hint;
 }
 
 @keyframes action {
@@ -350,8 +348,7 @@
 
 .equipping, .receiving {
     transition: border-color 0.5s ease-in;
-    border-color: whitesmoke;
-    border-width: 2px;
+    border: 2px dashed @gray-hint;
 }
 
 .thresholds {

client/assets/styles/styles.less

@@ -1,3 +1,5 @@
+@import 'colours.less';
+
 /*
     GLOBAL
 */
@@ -6,7 +8,7 @@ html, body, #mnml {
     /*width: 100%;*/
     margin: 0;
 
-    background-color: #000000;
+    background-color: black;
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 14pt;
@@ -146,7 +148,7 @@ button, input {
     color: whitesmoke;
     height: auto;
     border-width: 2px;
-    border-color: #333;
+    border-color: @gray-exists;
     border-radius: 0;
     letter-spacing: 0.25em;
     box-sizing: border-box;
@@ -162,13 +164,13 @@ button, input {
 
 button:hover {
     color: whitesmoke;
-    border-color: #888;
+    border-color: @gray-hover;
 }
 
 button:focus {
     /*colour necesary to bash skellington*/
-    color: whitesmoke;
-    border-color: whitesmoke;
+    color: @gray-focus;
+    border-color: @gray-focus;
 }
 
 a {

client/assets/styles/vbox.less

@@ -3,10 +3,6 @@
 .vbox {
     margin-bottom: 2em;
 
-    .vbox-section {
-        // border: 2px solid #444;
-    }
-
     .vbox-hdr {
         margin-bottom: 1em;
         height: 2em;
@@ -35,7 +31,7 @@
     .vbox-btn {
         width: 100%;
         margin: 0;
-        background-color: @gray;
+        background-color: @gray-box;
         border-width: 0;
 
         height: 3em;