Sfoglia il codice sorgente

improvements to light theme (Issue #77)

Torkel Ödegaard 12 anni fa
parent
commit
9794c2ebbb

+ 0 - 4
src/css/less/grafana.less

@@ -1,10 +1,6 @@
 @import "submenu.less";
 @import "submenu.less";
 @import "bootstrap-tagsinput.less";
 @import "bootstrap-tagsinput.less";
 
 
-.navbar-static-top {
-  border-bottom: 1px solid black;
-}
-
 .grafana-dashboard-hide-controls {
 .grafana-dashboard-hide-controls {
   padding: 0;
   padding: 0;
   .grafana-row {
   .grafana-row {

+ 1 - 1
src/css/less/variables.dark.less

@@ -185,7 +185,7 @@
 @navbarHeight:                    50px;
 @navbarHeight:                    50px;
 @navbarBackgroundHighlight:       @grayDarker;
 @navbarBackgroundHighlight:       @grayDarker;
 @navbarBackground:                @grayDarker;
 @navbarBackground:                @grayDarker;
-@navbarBorder:                    darken(@navbarBackground, 12%);
+@navbarBorder:                    darken(@navbarBackground, 20%);
 
 
 @navbarText:                      @grayLight;
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;
 @navbarLinkColor:                 @grayLight;

+ 20 - 20
src/css/less/variables.light.less

@@ -10,21 +10,21 @@
 // Grays
 // Grays
 // -------------------------
 // -------------------------
 @black:                 #000;
 @black:                 #000;
-@grayDarker:            #080808;
-@grayDark:              #999;
-@gray:                  #bbb;
-@grayLight:             #dfdfdf;
-@grayLighter:           #eee;
+@grayDarker:            lighten(#000, 13.5%); // #222
+@grayDark:              lighten(#000, 20%);   // #333
+@gray:                   lighten(#000, 33.5%); // #555
+@grayLight:             lighten(#000, 60%);   // #999
+@grayLighter:           lighten(#000, 93.5%); // #eee
 @white:                 #fff;
 @white:                 #fff;
 
 
 
 
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
-@blue:                  #007FFF;
-@blueDark:              #1F26B6;
-@green:                 #3FB618;
-@red:                   #FF0039;
-@yellow:                #FFA500;
+@blue:                  #158CBA;
+@blueDark:              #75CAEB;
+@green:                 #28B62C;
+@red:                   #FF4136;
+@yellow:                #FF851B;
 @orange:                #FF7518;
 @orange:                #FF7518;
 @pink:                  #E671B8;
 @pink:                  #E671B8;
 @purple:                #9954BB;
 @purple:                #9954BB;
@@ -184,16 +184,16 @@
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
 
 @navbarHeight:                    50px;
 @navbarHeight:                    50px;
-@navbarBackgroundHighlight:       @grayDarker;
-@navbarBackground:                @grayDarker;
-@navbarBorder:                    transparent;
-
-@navbarText:                      @white;
-@navbarLinkColor:                 @white;
-@navbarLinkColorHover:            @gray;
-@navbarLinkColorActive:           @white;
-@navbarLinkBackgroundHover:       rgba(0, 0, 0, 0.05);
-@navbarLinkBackgroundActive:      transparent;
+@navbarBackgroundHighlight:       #f8f8f8;
+@navbarBackground:                #f8f8f8;
+@navbarBorder:                    darken(@navbarBackground, 6.5%);
+
+@navbarText:                      #666;
+@navbarLinkColor:                 #666;
+@navbarLinkColorHover:            #333;
+@navbarLinkColorActive:           #555;
+@navbarLinkBackgroundHover:       transparent;
+@navbarLinkBackgroundActive:      darken(@navbarBackground, 6.5%);
 
 
 @navbarBrandColor:                @navbarLinkColor;
 @navbarBrandColor:                @navbarLinkColor;
 
 

+ 0 - 1
src/vendor/bootstrap/less/bootswatch.dark.less

@@ -53,7 +53,6 @@ hr {
 	.navbar-inner {
 	.navbar-inner {
 		.border-radius(0);
 		.border-radius(0);
 		.box-shadow(none);
 		.box-shadow(none);
-		border-bottom: 0px solid @grayDark;
 	}
 	}
 
 
 	.brand {
 	.brand {

+ 2 - 2
src/vendor/bootstrap/less/bootswatch.light.less

@@ -91,7 +91,7 @@ a.text-success:hover { color: darken(@green, 10%); }
 	.nav li.dropdown.open > .dropdown-toggle,
 	.nav li.dropdown.open > .dropdown-toggle,
 	.nav li.dropdown.active > .dropdown-toggle,
 	.nav li.dropdown.active > .dropdown-toggle,
 	.nav li.dropdown.open.active > .dropdown-toggle {
 	.nav li.dropdown.open.active > .dropdown-toggle {
-		color: @white;
+		color: @navbarLinkColorActive;
 
 
 		&:hover {
 		&:hover {
 			color: @grayLighter;
 			color: @grayLighter;
@@ -567,7 +567,7 @@ a.thumbnail {
 
 
 .modal {
 .modal {
 	.border-radius(0);
 	.border-radius(0);
-
+	background-color: @white;
 	&-header {
 	&-header {
 		border-bottom: none;
 		border-bottom: none;
 	}
 	}