further cleanup of styles to make sidebar more readable for light theme. This tweaked link colors, dropdown colors and table tweaks for things like Add API to make them feel a little more organized through shades of gray.

This commit is contained in:
Trent White
2015-02-26 15:22:15 -05:00
parent 708ddf5387
commit 4e607876ea
4 changed files with 23 additions and 19 deletions
+1 -1
View File
@@ -76,7 +76,7 @@
&:hover {
background: @grafanaTargetFuncHightlight;
.fa {
color: @linkColorHover
color: @linkColorHover;
}
}
}
+4 -3
View File
@@ -38,6 +38,7 @@
.sidemenu {
font-size: 16px;
font-weight: @baseFontWeight;
list-style: none;
margin: 0;
padding: 0;
@@ -104,7 +105,7 @@
padding-right: 5px;
padding-top: 5px;
font-size: 170%;
color: @textColor;
color: @linkColor;
}
}
@@ -113,7 +114,7 @@
height: 40px;
display: inline-block;
i {
color: @textColor;
color: @linkColor;
opacity: .7;
position: relative;
left: 7px;
@@ -126,7 +127,7 @@
}
.sidemenu-item {
color: @grayLight;
color: @linkColor;
line-height: 40px;
padding: 0px 10px 0px 20px;
display: block;
+1
View File
@@ -61,6 +61,7 @@
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
+17 -15
View File
@@ -20,7 +20,8 @@
// Accent colors
// -------------------------
@blue: #007FFF;
@blueOrig: #007FFF;
@blue: #2AB2E4;
@blueDark: #75CAEB;
@green: #28B62C;
@red: #FF4136;
@@ -44,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%);
@@ -56,14 +57,14 @@
// Scaffolding
// -------------------------
@bodyBackground: #EAEAEA;
@textColor: #666;
@textColor: @gray;
// Links
// -------------------------
@linkColor: darken(@textColor, 20%);
@linkColor: @gray;
@linkColorDisabled: lighten(@linkColor,30%);
@linkColorHover: @gray;
@linkColorHover: @grayDarker;
// Typography
@@ -73,6 +74,7 @@
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@@ -99,13 +101,13 @@
@borderRadiusSmall: 2px;
// Lists
@grafanaListBackground: lighten(@grayLight,35%);
@grafanaListAccent: @grayLighter;
@grafanaListBorderTop: #eee;
@grafanaListBorderBottom: #efefef;
@grafanaListHighlight: lighten(@grayLight,20%);
@grafanaListBackground: lighten(@grayLight,20%);
@grafanaListAccent: lighten(@grayLight,10%);
@grafanaListBorderTop: #eee;
@grafanaListBorderBottom: #eee;
@grafanaListHighlight: lighten(@grayLight,10%);
@grafanaListHighlightContrast: #ddd;
@grafanaListMainLinkColor: @textColor;
@grafanaListMainLinkColor: @textColor;
// Tables
@@ -172,8 +174,8 @@
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: lighten(@grayLight,20%);
@dropdownLinkBackgroundHover: lighten(@grayLight,20%);
@dropdownLinkBackgroundActive: @blue;
@dropdownLinkBackgroundHover: @blue;