IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-23 09:26:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'light-theme-tweaks' of github.com:bulletfactory/grafana into css-tweaks

Browse Source 
Conflicts:
	src/css/less/sidemenu.less
This commit is contained in:
Torkel Ödegaard 2015-02-28 11:37:38 +01:00
commit ba56535fa6
6 changed files with 67 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/less/bootswatch.light.less
View File

@ -317,6 +317,9 @@ div.subnav {
}
}
.btn-inverse {
}
.btn-large {
padding: 22px 30px;
}

9
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;
@ -75,7 +76,7 @@
&:hover {
background: @grafanaTargetFuncHightlight;
.fa {
color: @linkColorHover
color: @linkColorHover;
}
}
}

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;

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

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

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

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

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