Merge branch 'devel' of https://github.com/nophead/OctoPrint into nophead-appearance

src/octoprint/static/js/app/viewmodels/settings.js

@@ -23,7 +23,9 @@ $(function() {
             {key: "green", name: gettext("green")},
             {key: "blue", name: gettext("blue")},
             {key: "violet", name: gettext("violet")},
-            {key: "black", name: gettext("black")}
+            {key: "black", name: gettext("black")},
+            {key: "white", name: gettext("white")},
+            {key: "transparent", name: gettext("transparent")}
         ]);
 
         self.appearance_colorName = function(color) {
@@ -42,6 +44,10 @@ $(function() {
                     return gettext("violet");
                 case "black":
                     return gettext("black");
+                case "white":
+                    return gettext("white");
+                case "transparent":
+                    return gettext("transparent");
                 case "default":
                     return gettext("default");
                 default:

src/octoprint/static/less/octoprint.less

@@ -15,7 +15,7 @@ body {
   color: @text-color;
   @caret-color: average(@base, @text-color);
   @caret-hover-color: average(@caret-color, @text-color);
-  
+
   .caret {
     border-bottom-color: @caret-color;
     border-top-color: @caret-color;
@@ -68,7 +68,7 @@ body {
 .navbar-inner-color (@base) {
   @top: lighten(@base, 25%);
   @bottom: darken(@base, 15%);
-  
+
   @text-color-light: #f2f2f2;
   @text-color-dark: #333333;
   @text-color: contrast(@base, @text-color-dark, @text-color-light);
@@ -78,7 +78,7 @@ body {
   .brand, .nav>li>a {
     .navbar-inner-text(@base);
   }
-  
+
   .brand {
     .brand(@text-color, @text-color-dark, @text-color-light);
   }
@@ -123,7 +123,19 @@ body {
     @base: #383838;
     .navbar-inner-color(@base);
   }
-  
+  &.white {
+    @base: #ffffff;
+    .navbar-inner-color(@base);
+  }
+  &.transparent {
+    @base: #ffffff;
+
+    .navbar-inner-color(@base);
+    
+    background-image: url("../img/trans-background.png") ;
+    background-repeat: repeat-x;
+  }
+
   .brand span {
     background-size: 20px 20px;
     background-position: left center;