diff --git a/src/css/less/bootswatch.light.less b/src/css/less/bootswatch.light.less index 2e59e80769d..9d9b075113e 100644 --- a/src/css/less/bootswatch.light.less +++ b/src/css/less/bootswatch.light.less @@ -317,6 +317,9 @@ div.subnav { } } +.btn-inverse { +} + .btn-large { padding: 22px 30px; } diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less index 0eb59d2391f..f69b7b91e5a 100644 --- a/src/css/less/navbar.less +++ b/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; } } } diff --git a/src/css/less/panel.less b/src/css/less/panel.less index e0b01ed43dc..e8c683ab371 100644 --- a/src/css/less/panel.less +++ b/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; diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less index f5338b6a190..35e97d85882 100644 --- a/src/css/less/sidemenu.less +++ b/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; } diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 9dfcabf53eb..6cfc7b0b6ca 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -27,7 +27,9 @@ // grafana Variables // ------------------------- -@grafanaPanelBackground: @grayDarker; +@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; diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index a745fafd978..6a8ba33b24e 100644 --- a/src/css/less/variables.light.less +++ b/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; +@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,13 +101,13 @@ @borderRadiusSmall: 2px; // Lists -@grafanaListBackground: transparent; -@grafanaListAccent: @grayLighter; -@grafanaListBorderTop: #eee; -@grafanaListBorderBottom: #efefef; -@grafanaListHighlight: @blue; +@grafanaListBackground: lighten(@grayLight,20%); +@grafanaListAccent: lighten(@grayLight,10%); +@grafanaListBorderTop: #eee; +@grafanaListBorderBottom: #eee; +@grafanaListHighlight: lighten(@grayLight,10%); @grafanaListHighlightContrast: #ddd; -@grafanaListMainLinkColor: @textColor; +@grafanaListMainLinkColor: @textColor; // Tables @@ -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%);