IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-18 20:43:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

CSS tweaks to link styles for sidebar, nav bar, search pane. Also the nav bar height seemed off from the sidebar, so made that consistent. Variables were created when colors were hard-coded for both dark and light. This meant that both variables.light.less and variables.dark.less were updated.

Browse Source
This commit is contained in:
Trent White 2015-02-26 12:37:35 -05:00
parent 5b2715515f
commit 708ddf5387
5 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/less/navbar.less
View File

@ -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;

2
src/css/less/panel.less
View File

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

25
src/css/less/sidemenu.less
View File

@ -50,6 +50,10 @@
font-size: 14px;
.icon-circle {
border-radius: 50%;
background: @iconContainerBackground;
box-shadow: @iconContainerShadow;
border: @iconContainerBorder;
width: 28px;
height: 28px;
i {
@ -60,7 +64,7 @@
}
.sidemenu-item {
color: @textColor;
// color: @textColor;
line-height: 28px;
}
}
@ -88,10 +92,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;
}
@ -99,14 +104,11 @@
padding-right: 5px;
padding-top: 5px;
font-size: 170%;
color: @gray;
color: @textColor;
}
}
.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;
@ -115,8 +117,8 @@
opacity: .7;
position: relative;
left: 7px;
top: 2px;
font-size: 125%;
top: 3px;
font-size: 150%;
}
}
@ -124,17 +126,18 @@
}
.sidemenu-item {
color: #f80;
color: @grayLight;
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;
}
}
}

13
src/css/less/variables.dark.less
View File

@ -27,7 +27,9 @@
// grafana Variables
// -------------------------
@grafanaPanelBackground: @grayDarker;
@grafanaPanelBackground: @grayDarker;
@grafanaPanelBorder: solid 1px @grayDark;
@grafanaTriggerBorder: solid 1px #555;
// Graphite Target Editor
@grafanaTargetBorder: @black;
@ -128,6 +130,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 +209,10 @@
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 50px;
@navbarHeight: 52px;
@navbarBackgroundHighlight: @grayDarker;
@navbarBackground: @grayDarker;
@navbarBorder: darken(@navbarBackground, 20%);
@navbarBorder: none;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;

28
src/css/less/variables.light.less
View File

@ -32,7 +32,9 @@
// grafana Variables
// -------------------------
@grafanaPanelBackground: @white;
@grafanaPanelBackground: @white;
@grafanaPanelBorder: solid 1px @grayLight;
@grafanaTriggerBorder: solid 1px @grayLight;
// Submenu
@submenuBackground: rgb(218, 217, 217);
@ -61,7 +63,7 @@
// -------------------------
@linkColor: darken(@textColor, 20%);
@linkColorDisabled: lighten(@linkColor,30%);
@linkColorHover: @blue;
@linkColorHover: @gray;
// Typography
@ -97,11 +99,11 @@
@borderRadiusSmall: 2px;
// Lists
@grafanaListBackground: transparent;
@grafanaListBackground: lighten(@grayLight,35%);
@grafanaListAccent: @grayLighter;
@grafanaListBorderTop: #eee;
@grafanaListBorderBottom: #efefef;
@grafanaListHighlight: @blue;
@grafanaListHighlight: lighten(@grayLight,20%);
@grafanaListHighlightContrast: #ddd;
@grafanaListMainLinkColor: @textColor;
@ -142,6 +144,12 @@
@btnInverseBackground: lighten(@black, 5%);
@btnInverseBackgroundHighlight: darken(@black, 5%);
@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
// -------------------------
@ -164,8 +172,8 @@
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @blue;
@dropdownLinkBackgroundHover: @blue;
@dropdownLinkBackgroundActive: lighten(@grayLight,20%);
@dropdownLinkBackgroundHover: lighten(@grayLight,20%);
@ -216,14 +224,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 +294,7 @@
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipBackground: #333;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@tooltipLinkColor: darken(@white,11%);