ux(forms): minor upgrade to new form design

public/less/bootswatch.dark.less

@@ -31,10 +31,7 @@ html {
 
 body {
 	height: 100%;
-	//#gradient > .vertical (@bodyBackground, #252A30);
+	background: @bodyBackground;
-	//background: @bodyBackground;
-	background: @nonDashBodyBackground;
-	// url('../img/cubes.png') repeat right top;
 }
 
 .page-header {

public/less/filter-table.less

@@ -19,7 +19,7 @@
 
 .filter-table tr {
   background: @grafanaListBackground;
-  border-bottom: 2px solid @nonDashBodyBackground;
+  border-bottom: 2px solid @pageBackground;
 }
 
 .filter-table th {

public/less/gfbox.less

@@ -69,6 +69,7 @@
 }
 
 .page-container {
+  background-color: @pageBackground;
   position: relative;
   padding: 20px 20px 60px 81px;
 }

public/less/normform.less

@@ -1,11 +1,11 @@
 .norm-form {
-  border-top: 3px solid @nonDashBodyBackground;
+  border-top: 3px solid @pageBackground;
-  border-left: 3px solid @nonDashBodyBackground;
+  border-left: 3px solid @pageBackground;
-  border-right: 3px solid @nonDashBodyBackground;
+  border-right: 3px solid @pageBackground;
   background: transparent;
 
   &.last {
-    border-bottom: 1px solid @nonDashBodyBackground;
+    border-bottom: 1px solid @pageBackground;
   }
 
   &.borderless {
@@ -21,7 +21,7 @@
 }
 
 .norm-form-container-no-item-borders {
-  border: 1px solid @nonDashBodyBackground;
+  border: 1px solid @pageBackground;
   border-bottom: none;
 
   .norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input  {
@@ -44,7 +44,7 @@
 }
 
 .norm-form-container {
-  border-bottom: 1px solid @nonDashBodyBackground;
+  border-bottom: 1px solid @pageBackground;
 }
 
 .norm-form-btn {
@@ -74,7 +74,7 @@
   padding: 8px 7px;
   display: inline-block;
   font-weight: normal;
-  border-right: 3px solid @nonDashBodyBackground;
+  border-right: 3px solid @pageBackground;
   color: @grayLighter;
   display: inline-block;
   .small;
@@ -139,7 +139,7 @@ input[type=text].norm-form-clear-input {
   background: transparent;
   color: @grafanaTargetColor;
   border-radius: 0;
-  border-right: 2px solid @nonDashBodyBackground;
+  border-right: 2px solid @pageBackground;
 }
 
 [type=text],
@@ -148,7 +148,7 @@ input[type=text].norm-form-clear-input {
 [type=password] {
   &.norm-form-input {
     border: none;
-    border-right: 2px solid @nonDashBodyBackground;
+    border-right: 3px solid @pageBackground;
     margin: 0px;
     border-radius: 0;
     padding: 8px 6px;
@@ -172,7 +172,7 @@ input[type=checkbox].norm-form-checkbox {
 
 select.norm-form-input {
   border: none;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
+  border-right: 3px solid @pageBackground;
   margin: 0px;
   border-radius: 0;
   height: 36px;
@@ -182,25 +182,6 @@ select.norm-form-input {
   }
 }
 
-.norm-form-func-controls {
-  display: none;
-  text-align: center;
-
-  .fa-arrow-left {
-    float: left;
-    position: relative;
-    top: 2px;
-  }
-  .fa-arrow-right {
-    float: right;
-    position: relative;
-    top: 2px;
-  }
-  .fa-remove {
-    margin-left: 10px;
-  }
-}
-
 .norm-form-radio {
   input[type=radio] {
     margin: 0;
@@ -209,21 +190,6 @@ select.norm-form-input {
     display: inline;
   }
 }
-
-.norm-form-section {
-  margin-bottom: 20px;
-  margin-right: 40px;
-  vertical-align: top;
-  display: inline-block;
-  .norm-form {
-    margin-left: 20px;
-  }
-}
-
-.norm-form-align {
-  padding-left: 66px;
-}
-
 .norm-form-item-large { width: 115px; }
 .norm-form-item-xlarge { width: 150px; }
 .norm-form-item-xxlarge { width: 200px; }

public/less/variables.dark.less

@@ -52,9 +52,9 @@
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        rgb(22,22,22);
+@bodyBackground:  rgb(20,20,20);
-@nonDashBodyBackground: @grayDarker;
+@pageBackground:  @grayDarker;
-@textColor:             @grayLighter;
+@textColor:       @grayLighter;
 
 // Links
 // -------------------------
@@ -105,8 +105,6 @@
 @grafanaListHighlight:      #333;
 @grafanaListMainLinkColor: @textColor;
 
-@pageContainerBorderColor: @grayDark;
-
 // Scrollbars
 @scrollbarBackground: #3a3a3a;
 @scrollbarBackground2: #3a3a3a;

public/less/variables.light.less

@@ -10,7 +10,7 @@
 // Grays
 // -------------------------
 @black:                 #000;
-@grayDarker:            lighten(#000, 13.5%); // #222
+@grayDarker:            lighten(#000, 11.5%); // #222
 @grayDark:              lighten(#000, 20%);   // #333
 @gray:                  lighten(#000, 33.5%); // #555
 @grayLight:             lighten(#000, 60%);   // #999
@@ -65,9 +65,9 @@
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        #EFEFEF;
+@bodyBackground:      #EFEFEF;
-@nonDashBodyBackground: @grayLighter;
+@pageBackground:      @grayDarker;
-@textColor:             @gray;
+@textColor:           @gray;
 
 // Links
 // -------------------------
@@ -117,8 +117,6 @@
 @grafanaListHighlightContrast: #ddd;
 @grafanaListMainLinkColor:     @textColor;
 
-@pageContainerBorderColor: darken(@grafanaTargetBackground, 5%);
-
 
 // Tables
 // -------------------------