Skip to content

N
nexpie-grafana-theme
Commit 708ddf53 by Trent White
Options

CSS tweaks to link styles for sidebar, nav bar, search pane. Also the nav bar… 

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.
parent 5b271551
Showing with 47 additions and 28 deletions
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;
......
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
......@@ -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;
}
}
}
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;
......@@ -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;
......
src/css/less/variables.light.less
......@@ -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%);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment