More comprehensive changes, UI tweaking

app/less/app.less

@@ -9,7 +9,6 @@
 @import 'outfit';
 @import 'select';
 @import 'charts';
-@import 'meters';
 @import 'error';
 
 
@@ -24,24 +23,26 @@ body {
   padding: 0;
   font-family: @fStandard;
   overflow-x: hidden;
-}
-
-#bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  opacity: 0.3;
-  background-image: url(images/docking-bay.jpg);
+  background-image: none;
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
   background-size: cover;
+
+  &.deep-space {
+     background-image: url(images/deep-space.jpg);
+  }
+
+  &.docking-bay {
+    background-image: url(images/bay-1920x1080.jpg);
+  }
 }
 
 #main {
-  margin: 10px;
+  margin: 0;
+  padding: 0.5em 0.25em;
   min-height: 800px;
   clear: both;
 }
@@ -71,22 +72,14 @@ a, a:visited {
 }
 
 footer {
+  clear: both;
   font-size: 0.6em;
   color: #999;
-  padding: 10px 0;
-  width: 100%;
+  padding: 1em;
   overflow: hidden;
-}
 
-footer {
   .right {
     float: right;
     text-align: right;
-    margin-right: 10px;
-  }
-  .left {
-    float: left;
-    text-align: left;
-    margin-left: 10px;
   }
 }

app/less/colors.less

@@ -1,20 +1,21 @@
-@fg: #fff;
-@bg: #333;
-@primary: #FF8C0D; // Light Orange
-@secondary: #32DBDB;  // Light blue
-@warning: #FF3B00;  // Dark Orange
-
+// Constants for calculations
 @bgDarken: 40%;
 @disabledDarken: 15%;
 @bgTransparency: 10%;
 
-@disabled: #888;
+// Foreground colors
+@fg: #fff;
+@primary: #FF8C0D; // Light Orange
+@secondary: #1FB0FF;  // Light blue
+@warning: #FF3B00;  // Dark Orange
+@disabled: #888;    // Light grey
 @primary-disabled: darken(@primary, @disabledDarken);
 @secondary-disabled: darken(@secondary, @disabledDarken);
 @warning-disabled: darken(@warning, @disabledDarken);
 
+// Background colors
+@bg: rgba(70,70,70,0.95);
 @bgBlack: rgba(0,0,0,0.9);
-
-@primary-bg: fadeout(darken(@primary, 45%), 30%);
+@primary-bg: fadeout(darken(@primary, 45%), 20%);
 @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
 @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red

app/less/header.less

@@ -37,19 +37,19 @@ header {
   }
 
   .menu-list {
-    width: 200%;
+    width: 250%;
     font-family: @fStandard;
     position: absolute;
-    padding: 0 1em 1em 0;
+    margin-right: 1em;
+    padding: 0 0 1em 1em;
     overflow: hidden;
     background-color: @bgBlack;
     font-size: 0.8em;
   }
 
   ul {
-    margin: 0;
+    margin: 0.5em 1em 0 0;
     padding: 0;
-    margin-top: 0.5em;
     line-height: 2em;
   }
 
@@ -76,6 +76,11 @@ header {
     }
   }
 
+  .block {
+    display: block;
+    line-height: 1.5em;
+  }
+
   .title {
     font-size: 1.3em;
     display: inline-block;

app/less/meters.less

@@ -1,18 +0,0 @@
-
-svg.meter {
-  text {
-    fill: @warning;
-    font-size: 15px;
-    font-family: @fStandard;
-    text-transform:uppercase;
-    alignment-baseline: middle;
-  }
-
-  rect {
-    fill: @disabled;
-
-    &.active {
-      fill: @warning;
-    }
-  }
-}

app/less/outfit.less

@@ -1,8 +1,13 @@
 
+#outfit {
+  //width: 62em;
+  //margin: 0 auto;
+}
+
 #overview {
   h1 {
     font-family: @fTitle;
-    margin: 5px 0;
+    margin: 0.2em 0;
     color: @primary;
     float: left;
   }
@@ -14,18 +19,22 @@
 
   input {
     background: @primary-bg;
-    color: @fg;
+    color: @secondary;
+    outline: none;
     border: none;
     font-size: 0.8em;
     line-height: 2em;
-    text-transform: uppercase;
+    text-align: right;
+    &:hover, &:focus {
+      background-color: @secondary-bg;
+    }
   }
 }
 
 #hardpoints {
   .slot:nth-child(2n) {
     clear: left;
-    margin-right: 10px;
+    margin-right: 0.5em;
   }
 }
 
@@ -41,34 +50,21 @@
   }
 }
 
+u { // Unit (Mj, Km, etc)
+  font-size: 0.8em;
+  text-decoration: none;
+}
+
 #summary {
   .user-select-none();
   float: right;
-  width: 40%;
+  min-width: 40em;
+  margin: 0.25em;
   border-top: 2px solid @primary;
   border-bottom: 2px solid @primary;
   background-color: @primary-bg;
 }
 
-legend {
-  text-transform: uppercase;
-  padding: 0 5px;
-  color: @warning;
-  font-family: @fTitle;
-}
-
-fieldset {
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  cursor: default;
-  border: 2px solid @warning-bg;
-  .border-radius(5px);
-  margin: 5px;
-  padding: 1px 5px 5px;
-}
-
 .toggle {
   cursor: pointer;
 }

app/less/shipyard.less

@@ -1,10 +1,12 @@
 
+#shipyard {
+  vertical-align: top;
+}
+
 a.ship {
-  display: block;
-  float: left;
+  display: inline-block;
   width: 22%;
-  height: 30%;
-  margin: 1% 1%;
+  margin: 1%;
   background-color: @bg;
   padding: 0.5%;
   text-decoration: none;

app/less/slot.less

@@ -1,7 +1,7 @@
 
 .slot-group {
   float: left;
-  margin: 0 5px;
+  margin: 0.25em;
   .user-select-none();
   cursor: default;
 
@@ -10,7 +10,7 @@
     color: @bgBlack;
     background-color: @primary-disabled;
     text-transform: uppercase;
-    margin: 2px 0;
+    margin: 0.1em 0;
     font-size: 0.8em;
     padding-left: 0.5em;
   }
@@ -18,9 +18,9 @@
 
 .slot {
   float: left;
-  width: 230px;
+  width: 20.5em;
   font-size: 0.75em;
-  margin-top: 3px;
+  margin-top: 0.5em;
   position: relative;
   z-index: 0;
   padding-right: 0.4em;
@@ -34,6 +34,7 @@
     overflow: hidden;
     height: 100%;
     cursor: pointer;
+    text-transform: none;
   }
 
   .cb {

app/less/utilities.less

@@ -22,7 +22,7 @@
 }
 
 .user-select-none (){
-   -webkit-touch-callout: none;
+  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;