Merge branch 'light-theme-tweaks' of github.com:bulletfactory/grafana into css-tweaks

Conflicts:
	src/css/less/sidemenu.less

src/css/less/bootswatch.light.less

@@ -317,6 +317,9 @@ div.subnav {
 	}
 }
 
+.btn-inverse {
+}
+
 .btn-large {
 	padding: 22px 30px;
 }

src/css/less/navbar.less

@@ -3,7 +3,7 @@
 }
 
 .navbar .nav>li>a {
-  padding: 17px 15px 11px;
+  padding: 17px 15px 13px;
   .fa { font-size: 115%; }
 }
 
@@ -20,8 +20,9 @@
 }
 
 .top-nav-menu-btn {
+  border: 1px solid @bodyBackground;
   border-radius: 50%;
-  background: black;
+  background: @iconContainerBackground;
   display: block;
   position: relative;
   float: left;
@@ -64,7 +65,7 @@
   font-size: 1.4em;
   font-weight: bold;
   color: #a2a2a2;
-  border: 1px solid #555;
+  border: @grafanaTriggerBorder;
   a {
     display: inline-block;
     background: @grafanaTargetFuncBackground;
@@ -75,7 +76,7 @@
     &:hover {
       background: @grafanaTargetFuncHightlight;
       .fa {
-        color: @linkColorHover
+        color: @linkColorHover;
       }
     }
   }

src/css/less/panel.less

@@ -13,7 +13,7 @@
 .panel-container {
   background: @grafanaPanelBackground;
   position: relative;
-  border: 1px solid @grayDark;
+  border: @grafanaPanelBorder;
   &:hover {
     .panel-actions {
       display: block;

src/css/less/sidemenu.less

@@ -38,6 +38,7 @@
 
 .sidemenu {
   font-size: 16px;
+  font-weight: @baseFontWeight;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -50,6 +51,10 @@
     font-size: 14px;
 
     .icon-circle {
+      border-radius: 50%;
+      background: @iconContainerBackground;
+      box-shadow: @iconContainerShadow;
+      border: @iconContainerBorder;
       width: 28px;
       height: 28px;
       i {
@@ -60,7 +65,7 @@
     }
 
     .sidemenu-item {
-      color: @textColor;
+      // color: @textColor;
       line-height: 28px;
       padding-left: 25px;
     }
@@ -83,10 +88,11 @@
   display: block;
   padding: 8px 0 4px 22px;
   background-color: @navbarBackground;
-  border-right: 3px solid black;
+  border-right: 3px solid @bodyBackground;
   img {
     border-radius: 50%;
-    background: black;
+    background: @iconContainerBackground;
+    border: 1px solid @bodyBackground;
     width: 30px;
     padding: 4px;
   }
@@ -94,24 +100,21 @@
     padding-right: 5px;
     padding-top: 5px;
     font-size: 170%;
-    color: @gray;
+    color: @linkColor;
   }
 }
 
 .icon-circle {
-  border-radius: 50%;
-  background: #000;
-  box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
   width: 40px;
   height: 40px;
   display: inline-block;
   i {
-    color: @textColor;
+    color: @linkColor;
     opacity: .7;
     position: relative;
     left: 7px;
-    top: 2px;
-    font-size: 125%;
+    top: 3px;
+    font-size: 150%;
   }
 }
 
@@ -119,13 +122,15 @@
 }
 
 .sidemenu-item {
-  color: #f80;
+  color: @linkColor;
   line-height: 40px;
 	padding: 0px 10px 0px 20px;
 	display: block;
 
   .sidemenu-item-text {
     padding-left: 15px;
+    transition: color 100ms ease-out;
+
     &.no-icon {
       padding-left: 59px;
     }

src/css/less/variables.dark.less

@@ -28,6 +28,8 @@
 // grafana Variables
 // -------------------------
 @grafanaPanelBackground: 	@grayDarker;
+@grafanaPanelBorder: 		solid 1px @grayDark;
+@grafanaTriggerBorder:		solid 1px #555;
 
 // Graphite Target Editor
 @grafanaTargetBorder:         @black;
@@ -59,6 +61,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
@@ -128,6 +131,11 @@
 @btnInverseBackground:              @grayDark;
 @btnInverseBackgroundHighlight:     lighten(@grayDark, 5%);
 
+@iconContainerBackground:			@black;
+@iconContainerBackgroundHighlight:	lighten(@black, 5%);
+@iconContainerBorder:				0 0 14px 2px rgba(255,255,255, 0.05);
+@iconContainerShadow:				0 0 14px 2px rgba(255,255,255, 0.05);
+
 
 // Forms
 // -------------------------
@@ -202,10 +210,10 @@
 @navbarCollapseWidth:             979px;
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
-@navbarHeight:                    50px;
+@navbarHeight:                    52px;
 @navbarBackgroundHighlight:       @grayDarker;
 @navbarBackground:                @grayDarker;
-@navbarBorder:                    darken(@navbarBackground, 20%);
+@navbarBorder:                    none;
 
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;

src/css/less/variables.light.less

@@ -20,7 +20,8 @@
 
 // Accent colors
 // -------------------------
-@blue:                  #007FFF;
+@blueOrig:              #007FFF;
+@blue:             		#2AB2E4; 
 @blueDark:              #75CAEB;
 @green:                 #28B62C;
 @red:                   #FF4136;
@@ -28,11 +29,13 @@
 @orange:                #FF7518;
 @pink:                  #E671B8;
 @purple:                #9954BB;
-@variable:              #32D1DF;
+@variable:              #2AB2E4;
 
 // grafana Variables
 // -------------------------
 @grafanaPanelBackground: 	@white;
+@grafanaPanelBorder: 		solid 1px @grayLight;
+@grafanaTriggerBorder:		solid 1px @grayLight;
 
 // Submenu
 @submenuBackground:     rgb(218, 217, 217);
@@ -42,11 +45,11 @@
 @fullEditBorder:          @grayLighter;
 
 // Graphite Target Editor
-@grafanaTargetBorder:         @submenuBackground;
-@grafanaTargetBackground:     @white;
+@grafanaTargetBorder:         #ddd;
+@grafanaTargetBackground:     #efefef;
 @grafanaTargetColor:          @textColor;
 @grafanaTargetColorHide:      lighten(@textColor, 25%);
-@grafanaTargetSegmentBorder:  @submenuBackground;
+@grafanaTargetSegmentBorder:  #ddd;
 
 @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
 @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
@@ -54,14 +57,14 @@
 // Scaffolding
 // -------------------------
 @bodyBackground:        #EAEAEA;
-@textColor:             #666;
+@textColor:             @gray;
 
 
 // Links
 // -------------------------
-@linkColor:             darken(@textColor, 20%);
+@linkColor:             @gray;
 @linkColorDisabled:     lighten(@linkColor,30%);
-@linkColorHover:        @blue;
+@linkColorHover:        @grayDarker;
 
 
 // Typography
@@ -71,6 +74,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
@@ -97,11 +101,11 @@
 @borderRadiusSmall:     2px;
 
 // Lists
-@grafanaListBackground:  transparent;
-@grafanaListAccent:         @grayLighter;
+@grafanaListBackground:  	   lighten(@grayLight,20%);
+@grafanaListAccent:            lighten(@grayLight,10%);
 @grafanaListBorderTop:         #eee;
-@grafanaListBorderBottom:   #efefef;
-@grafanaListHighlight:      @blue;
+@grafanaListBorderBottom:      #eee;
+@grafanaListHighlight:         lighten(@grayLight,10%);
 @grafanaListHighlightContrast: #ddd;
 @grafanaListMainLinkColor:     @textColor;
 
@@ -139,8 +143,14 @@
 @btnDangerBackground:               lighten(@red, 5%);
 @btnDangerBackgroundHighlight:      darken(@red, 5%);
 
-@btnInverseBackground:              lighten(@black, 5%);
-@btnInverseBackgroundHighlight:     darken(@black, 5%);
+@btnInverseBackground:              @gray;
+@btnInverseBackgroundHighlight:     darken(@gray, 10%);
+
+@iconContainerBackground:			@white;
+@iconContainerBackgroundHighlight:	lighten(@white, 5%);
+@iconContainerBorder:				solid 1px rgba(0,0,0, 0.05);
+@iconContainerShadow:				0 0 14px 2px rgba(0,0,0, 0.05);
+
 
 
 // Forms
@@ -216,14 +226,14 @@
 @navbarCollapseWidth:             979px;
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
-@navbarHeight:                    50px;
+@navbarHeight:                    52px;
 @navbarBackgroundHighlight:       #f8f8f8;
 @navbarBackground:                #f8f8f8;
-@navbarBorder:                    darken(@navbarBackground, 6.5%);
+@navbarBorder:                    none;
 
 @navbarText:                      #666;
 @navbarLinkColor:                 #666;
-@navbarLinkColorHover:            @blue;
+@navbarLinkColorHover:            #333;
 @navbarLinkColorActive:           #555;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 6.5%);
@@ -286,7 +296,7 @@
 // Tooltips and popovers
 // -------------------------
 @tooltipColor:            #fff;
-@tooltipBackground:       #000;
+@tooltipBackground:       #333;
 @tooltipArrowWidth:       5px;
 @tooltipArrowColor:       @tooltipBackground;
 @tooltipLinkColor:        darken(@white,11%);