even more work on light theme (#77)

src/app/panels/filtering/module.html

@@ -1,50 +1,4 @@
 <div ng-controller='filtering' ng-init="init()">
-  <style>
-    .filtering-container {
-      float: left;
-    }
-    .filtering-container label {
-      float: left;
-    }
-    .filtering-container input[type=checkbox] {
-      margin: 0;
-    }
-    .filter-panel-filter {
-      display:inline-block;
-      vertical-align: top;
-      padding: 4px 10px 3px 10px;
-      border-right: 1px solid #202020;
-    }
-    .filter-panel-filter:first-child {
-      padding-left: 0;
-    }
-    .filter-panel-filter ul {
-      margin-bottom: 0px;
-    }
-
-    .filter-deselected {
-      opacity: 0.5;
-    }
-    .filter-action {
-      float:right;
-      padding-right: 2px;
-      margin-bottom: 0px !important;
-      margin-left: 0px;
-      margin-top: 4px;
-    }
-    .add-filter-action {
-      padding: 3px 10px 0px 5px;
-      position: relative;
-      top: 4px;
-    }
-    .filter-mandate {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-    .filter-apply {
-      float:right;
-    }
-  </style>
 
   <div class='filtering-container'>
 

src/css/less/bootswatch.light.less

@@ -356,6 +356,11 @@ div.subnav {
 	}
 }
 
+legend, label {
+	color: @textColor;
+	border-bottom: 0px solid #222;
+}
+
 // TABLES
 // -----------------------------------------------------
 
@@ -480,10 +485,6 @@ legend {
 }
 
 .label {
-	min-width: 80px;
-	.border-radius(0);
-	font-weight: 300;
-	text-shadow: none;
 
 	&-success {
 		background-color: @green;
@@ -503,27 +504,8 @@ legend {
 }
 
 .badge {
-
-	.border-radius(0);
-	font-weight: 300;
-	text-shadow: none;
-	color: @black;
-
-	&-success {
-		background-color: @green;
-	}
-
-	&-important {
-		background-color: @red;
-	}
-
-	&-info {
-		background-color: @purple;
-	}
-
-	&-inverse {
-		background-color: @black;
-	}
+	border-radius: 0;
+	font-weight: 200;
 }
 
 // MISC
@@ -567,7 +549,7 @@ a.thumbnail {
 
 .modal {
 	.border-radius(0);
-	background-color: @white;
+	background-color: @bodyBackground;
 	&-header {
 		border-bottom: none;
 	}

src/css/less/grafana.less

@@ -113,10 +113,8 @@
   position: fixed;
   left: 0px;
   right: 0px;
-  top: 49px;
+  top: 54px;
   bottom: 0px;
-  outline: 1px solid #101214;
-  border-top: 1px solid #3e444c;
   padding: 0 10px;
   background: @kibanaPanelBackground;
 }
@@ -189,13 +187,14 @@
   min-height: 250px;
   margin-left: -10px;
   margin-right: -10px;
-  border-top: 1px solid black;
+  background-color: @fullEditBackground;
+  border-top: 1px solid @fullEditBorder;
 
   .tabs {
     .nav-tabs {
       margin: 0;
-      background: @grayDark;
-      border-top: 1px solid #555;
+      background: @fullEditTabsBackground;
+      border-top: 1px solid @fullEditTabsBorder;
     }
 
     .tab-content {
@@ -215,26 +214,23 @@
   }
 }
 
-/* Graphite Target Editor */
-@grafanaTargetColor:       #c8c8c8;
-@grafanaTargetColorHide:   darken(#c8c8c8, 25%);
-
-.grafana-target {
-}
 
 .grafana-target-inner-wrapper {
-  //border-top: 1px solid #444444;
   width: 100%;
 }
 
 .grafana-target-inner {
-  border-top: 2px solid black;
-  border-left: 2px solid black;
-  border-right: 2px solid black;
-  background: @grayDark;
+  border-top: 2px solid @grafanaTargetBorder;
+  border-left: 2px solid @grafanaTargetBorder;
+  border-right: 2px solid @grafanaTargetBorder;
+  background: @grafanaTargetBackground;
   width: 100%;
 }
 
+.grafana-target-inner:last-child {
+  border-bottom: 2px solid @grafanaTargetBorder;
+}
+
 .grafana-target-onoff {
   display: inline-block;
   padding: 5px 7px;
@@ -255,7 +251,7 @@
   padding: 5px 7px;
   display: inline-block;
   font-weight: normal;
-  border-right: 2px solid #050505;
+  border-right: 2px solid @grafanaTargetSegmentBorder;
   color: @grafanaTargetColor;
   display: inline-block;
 
@@ -267,14 +263,14 @@
     text-decoration: none;
   }
   &:hover {
-    background: #444;
+    background: @grafanaTargetFuncBackground;
   }
 }
 
 .grafana-target-function {
-  background: #444;
+  background: @grafanaTargetFuncBackground;
   &:hover {
-    background: #555;
+    background: @grafanaTargetFuncHightlight;
   }
 }
 

src/css/less/overrides.less

@@ -564,3 +564,58 @@ div.flot-text {
   background-color: darken(@purple, 10%);
   color: lighten(@linkColor, 5%);
 }
+
+// Filter submenu
+.filtering-container {
+  float: left;
+}
+
+.filtering-container label {
+  float: left;
+}
+
+.filtering-container input[type=checkbox] {
+  margin: 0;
+}
+
+.filter-panel-filter {
+  display:inline-block;
+  vertical-align: top;
+  padding: 4px 10px 3px 10px;
+  border-right: 1px solid @submenuBorder;
+}
+
+.filter-panel-filter:first-child {
+  padding-left: 0;
+}
+
+.filter-panel-filter ul {
+  margin-bottom: 0px;
+}
+
+.filter-deselected {
+  opacity: 0.5;
+}
+
+.filter-action {
+  float:right;
+  padding-right: 2px;
+  margin-bottom: 0px !important;
+  margin-left: 0px;
+  margin-top: 4px;
+}
+
+.add-filter-action {
+  padding: 3px 10px 0px 5px;
+  position: relative;
+  top: 4px;
+}
+
+.filter-mandate {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.filter-apply {
+  float:right;
+}

src/css/less/submenu.less

@@ -1,5 +1,5 @@
 .submenu-controls {
-  background: #292929;
+  background: @submenuBackground;
   font-size: inherit;
   label {
     margin: 0;
@@ -13,7 +13,7 @@
 
 .submenu-panel {
   padding: 0 10px 0 17px;
-  border-right: 1px solid #202020;
+  border-right: 1px solid @submenuBorder;
   float: left;
 }
 

src/css/less/variables.dark.less

@@ -29,6 +29,25 @@
 // -------------------------
 @kibanaPanelBackground: @grayDarker;
 
+// Submenu
+@submenuBackground: #292929;
+@submenuBorder: #202020;
+
+// Tabs
+@fullEditTabsBackground:  @grayDark;
+@fullEditBorder:          @black;
+@fullEditBackground:      transparent;
+@fullEditTabsBorder:      #555;
+
+// Graphite Target Editor
+@grafanaTargetBorder:         @black;
+@grafanaTargetBackground:     @grayDark;
+@grafanaTargetColor:          #c8c8c8;
+@grafanaTargetColorHide:      darken(#c8c8c8, 25%);
+@grafanaTargetSegmentBorder:  #050505;
+
+@grafanaTargetFuncBackground: #444;
+@grafanaTargetFuncHightlight: #555;
 
 // Scaffolding
 // -------------------------

src/css/less/variables.light.less

@@ -12,7 +12,7 @@
 @black:                 #000;
 @grayDarker:            lighten(#000, 13.5%); // #222
 @grayDark:              lighten(#000, 20%);   // #333
-@gray:                   lighten(#000, 33.5%); // #555
+@gray:                  lighten(#000, 33.5%); // #555
 @grayLight:             lighten(#000, 60%);   // #999
 @grayLighter:           lighten(#000, 93.5%); // #eee
 @white:                 #fff;
@@ -33,6 +33,26 @@
 // -------------------------
 @kibanaPanelBackground: @white;
 
+// Submenu
+@submenuBackground:     rgb(218, 217, 217);
+@submenuBorder:         @white;
+
+// Tabs
+@fullEditTabsBackground:  @white;
+@fullEditBorder:          @white;
+@fullEditBackground:      @navbarBackground;
+@fullEditTabsBorder:      @white;
+
+// Graphite Target Editor
+@grafanaTargetBorder:         @submenuBackground;
+@grafanaTargetBackground:     @white;
+@grafanaTargetColor:          @textColor;
+@grafanaTargetColorHide:      lighten(@textColor, 25%);
+@grafanaTargetSegmentBorder:  @submenuBackground;
+
+@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
+@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
+
 // Scaffolding
 // -------------------------
 @bodyBackground:        @grayLighter;
@@ -113,7 +133,7 @@
 // Forms
 // -------------------------
 @inputBackground:               @white;
-@inputBorder:                   @gray;
+@inputBorder:                   @grayLight;
 @inputBorderRadius:             @baseBorderRadius;
 @inputDisabledBackground:       @grayLighter;
 @formActionsBackground:         #f5f5f5;

tasks/options/less.js

@@ -16,9 +16,9 @@ module.exports = function(config) {
         yuicompress:true
       },
       files: {
-        "<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.dark.less",
-        "<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.light.less",
-        "<%= srcDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/vendor/bootstrap/less/grafana-responsive.less"
+        "<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/css/less/bootstrap.dark.less",
+        "<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/css/less/bootstrap.light.less",
+        "<%= srcDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/css/less/grafana-responsive.less"
       }
     }
   };