Skip to content

N
nexpie-grafana-theme
Commit 2c414d8e by Torkel Ödegaard
Options

even more work on light theme (#77)

parent 9794c2eb
Showing with 127 additions and 100 deletions
src/app/panels/filtering/module.html
<div ng-controller='filtering' ng-init="init()"> <div ng-controller='filtering' ng-init="init()">
<style>
.filtering-container {
float: left;
}
.filtering-container label {
float: left;
}
.filtering-container input[type=checkbox] {
margin: 0;
}
.filter-panel-filter {
display:inline-block;
vertical-align: top;
padding: 4px 10px 3px 10px;
border-right: 1px solid #202020;
}
.filter-panel-filter:first-child {
padding-left: 0;
}
.filter-panel-filter ul {
margin-bottom: 0px;
}
.filter-deselected {
opacity: 0.5;
}
.filter-action {
float:right;
padding-right: 2px;
margin-bottom: 0px !important;
margin-left: 0px;
margin-top: 4px;
}
.add-filter-action {
padding: 3px 10px 0px 5px;
position: relative;
top: 4px;
}
.filter-mandate {
text-decoration: underline;
cursor: pointer;
}
.filter-apply {
float:right;
}
</style>
<div class='filtering-container'> <div class='filtering-container'>
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/bootswatch.light.less → src/css/less/bootswatch.light.less
...@@ -356,6 +356,11 @@ div.subnav { ...@@ -356,6 +356,11 @@ div.subnav {
} }
} }
legend, label {
color: @textColor;
border-bottom: 0px solid #222;
}
// TABLES // TABLES
// ----------------------------------------------------- // -----------------------------------------------------
...@@ -480,10 +485,6 @@ legend { ...@@ -480,10 +485,6 @@ legend {
} }
.label { .label {
min-width: 80px;
.border-radius(0);
font-weight: 300;
text-shadow: none;
&-success { &-success {
background-color: @green; background-color: @green;
...@@ -503,27 +504,8 @@ legend { ...@@ -503,27 +504,8 @@ legend {
} }
.badge { .badge {
border-radius: 0;
.border-radius(0); font-weight: 200;
font-weight: 300;
text-shadow: none;
color: @black;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @purple;
}
&-inverse {
background-color: @black;
}
} }
// MISC // MISC
...@@ -567,7 +549,7 @@ a.thumbnail { ...@@ -567,7 +549,7 @@ a.thumbnail {
.modal { .modal {
.border-radius(0); .border-radius(0);
background-color: @white; background-color: @bodyBackground;
&-header { &-header {
border-bottom: none; border-bottom: none;
} }
......
src/css/less/grafana.less
...@@ -113,10 +113,8 @@ ...@@ -113,10 +113,8 @@
position: fixed; position: fixed;
left: 0px; left: 0px;
right: 0px; right: 0px;
top: 49px; top: 54px;
bottom: 0px; bottom: 0px;
outline: 1px solid #101214;
border-top: 1px solid #3e444c;
padding: 0 10px; padding: 0 10px;
background: @kibanaPanelBackground; background: @kibanaPanelBackground;
} }
...@@ -189,13 +187,14 @@ ...@@ -189,13 +187,14 @@
min-height: 250px; min-height: 250px;
margin-left: -10px; margin-left: -10px;
margin-right: -10px; margin-right: -10px;
border-top: 1px solid black; background-color: @fullEditBackground;
border-top: 1px solid @fullEditBorder;
.tabs { .tabs {
.nav-tabs { .nav-tabs {
margin: 0; margin: 0;
background: @grayDark; background: @fullEditTabsBackground;
border-top: 1px solid #555; border-top: 1px solid @fullEditTabsBorder;
} }
.tab-content { .tab-content {
...@@ -215,26 +214,23 @@ ...@@ -215,26 +214,23 @@
} }
} }
/* Graphite Target Editor */
@grafanaTargetColor: #c8c8c8;
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
.grafana-target {
}
.grafana-target-inner-wrapper { .grafana-target-inner-wrapper {
//border-top: 1px solid #444444;
width: 100%; width: 100%;
} }
.grafana-target-inner { .grafana-target-inner {
border-top: 2px solid black; border-top: 2px solid @grafanaTargetBorder;
border-left: 2px solid black; border-left: 2px solid @grafanaTargetBorder;
border-right: 2px solid black; border-right: 2px solid @grafanaTargetBorder;
background: @grayDark; background: @grafanaTargetBackground;
width: 100%; width: 100%;
} }
.grafana-target-inner:last-child {
border-bottom: 2px solid @grafanaTargetBorder;
}
.grafana-target-onoff { .grafana-target-onoff {
display: inline-block; display: inline-block;
padding: 5px 7px; padding: 5px 7px;
...@@ -255,7 +251,7 @@ ...@@ -255,7 +251,7 @@
padding: 5px 7px; padding: 5px 7px;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
border-right: 2px solid #050505; border-right: 2px solid @grafanaTargetSegmentBorder;
color: @grafanaTargetColor; color: @grafanaTargetColor;
display: inline-block; display: inline-block;
...@@ -267,14 +263,14 @@ ...@@ -267,14 +263,14 @@
text-decoration: none; text-decoration: none;
} }
&:hover { &:hover {
background: #444; background: @grafanaTargetFuncBackground;
} }
} }
.grafana-target-function { .grafana-target-function {
background: #444; background: @grafanaTargetFuncBackground;
&:hover { &:hover {
background: #555; background: @grafanaTargetFuncHightlight;
} }
} }
......
src/css/less/overrides.less
...@@ -563,4 +563,59 @@ div.flot-text { ...@@ -563,4 +563,59 @@ div.flot-text {
.label-tag:hover { .label-tag:hover {
background-color: darken(@purple, 10%); background-color: darken(@purple, 10%);
color: lighten(@linkColor, 5%); color: lighten(@linkColor, 5%);
}
// Filter submenu
.filtering-container {
float: left;
}
.filtering-container label {
float: left;
}
.filtering-container input[type=checkbox] {
margin: 0;
}
.filter-panel-filter {
display:inline-block;
vertical-align: top;
padding: 4px 10px 3px 10px;
border-right: 1px solid @submenuBorder;
}
.filter-panel-filter:first-child {
padding-left: 0;
}
.filter-panel-filter ul {
margin-bottom: 0px;
}
.filter-deselected {
opacity: 0.5;
}
.filter-action {
float:right;
padding-right: 2px;
margin-bottom: 0px !important;
margin-left: 0px;
margin-top: 4px;
}
.add-filter-action {
padding: 3px 10px 0px 5px;
position: relative;
top: 4px;
}
.filter-mandate {
text-decoration: underline;
cursor: pointer;
}
.filter-apply {
float:right;
} }
\ No newline at end of file
src/css/less/submenu.less
.submenu-controls { .submenu-controls {
background: #292929; background: @submenuBackground;
font-size: inherit; font-size: inherit;
label { label {
margin: 0; margin: 0;
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.submenu-panel { .submenu-panel {
padding: 0 10px 0 17px; padding: 0 10px 0 17px;
border-right: 1px solid #202020; border-right: 1px solid @submenuBorder;
float: left; float: left;
} }
......
src/css/less/variables.dark.less
...@@ -29,6 +29,25 @@ ...@@ -29,6 +29,25 @@
// ------------------------- // -------------------------
@kibanaPanelBackground: @grayDarker; @kibanaPanelBackground: @grayDarker;
// Submenu
@submenuBackground: #292929;
@submenuBorder: #202020;
// Tabs
@fullEditTabsBackground: @grayDark;
@fullEditBorder: @black;
@fullEditBackground: transparent;
@fullEditTabsBorder: #555;
// Graphite Target Editor
@grafanaTargetBorder: @black;
@grafanaTargetBackground: @grayDark;
@grafanaTargetColor: #c8c8c8;
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
@grafanaTargetSegmentBorder: #050505;
@grafanaTargetFuncBackground: #444;
@grafanaTargetFuncHightlight: #555;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
......
src/css/less/variables.light.less
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
@black: #000; @black: #000;
@grayDarker: lighten(#000, 13.5%); // #222 @grayDarker: lighten(#000, 13.5%); // #222
@grayDark: lighten(#000, 20%); // #333 @grayDark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555 @gray: lighten(#000, 33.5%); // #555
@grayLight: lighten(#000, 60%); // #999 @grayLight: lighten(#000, 60%); // #999
@grayLighter: lighten(#000, 93.5%); // #eee @grayLighter: lighten(#000, 93.5%); // #eee
@white: #fff; @white: #fff;
...@@ -33,6 +33,26 @@ ...@@ -33,6 +33,26 @@
// ------------------------- // -------------------------
@kibanaPanelBackground: @white; @kibanaPanelBackground: @white;
// Submenu
@submenuBackground: rgb(218, 217, 217);
@submenuBorder: @white;
// Tabs
@fullEditTabsBackground: @white;
@fullEditBorder: @white;
@fullEditBackground: @navbarBackground;
@fullEditTabsBorder: @white;
// Graphite Target Editor
@grafanaTargetBorder: @submenuBackground;
@grafanaTargetBackground: @white;
@grafanaTargetColor: @textColor;
@grafanaTargetColorHide: lighten(@textColor, 25%);
@grafanaTargetSegmentBorder: @submenuBackground;
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: @grayLighter; @bodyBackground: @grayLighter;
...@@ -113,7 +133,7 @@ ...@@ -113,7 +133,7 @@
// Forms // Forms
// ------------------------- // -------------------------
@inputBackground: @white; @inputBackground: @white;
@inputBorder: @gray; @inputBorder: @grayLight;
@inputBorderRadius: @baseBorderRadius; @inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5; @formActionsBackground: #f5f5f5;
......
tasks/options/less.js
...@@ -16,9 +16,9 @@ module.exports = function(config) { ...@@ -16,9 +16,9 @@ module.exports = function(config) {
yuicompress:true yuicompress:true
}, },
files: { files: {
"<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.dark.less", "<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/css/less/bootstrap.dark.less",
"<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.light.less", "<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/css/less/bootstrap.light.less",
"<%= srcDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/vendor/bootstrap/less/grafana-responsive.less" "<%= srcDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/css/less/grafana-responsive.less"
} }
} }
}; };
......
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