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()">
<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'>
......
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 {
}
}
legend, label {
color: @textColor;
border-bottom: 0px solid #222;
}
// TABLES
// -----------------------------------------------------
......@@ -480,10 +485,6 @@ legend {
}
.label {
min-width: 80px;
.border-radius(0);
font-weight: 300;
text-shadow: none;
&-success {
background-color: @green;
......@@ -503,27 +504,8 @@ legend {
}
.badge {
.border-radius(0);
font-weight: 300;
text-shadow: none;
color: @black;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @purple;
}
&-inverse {
background-color: @black;
}
border-radius: 0;
font-weight: 200;
}
// MISC
......@@ -567,7 +549,7 @@ a.thumbnail {
.modal {
.border-radius(0);
background-color: @white;
background-color: @bodyBackground;
&-header {
border-bottom: none;
}
......
src/css/less/grafana.less
......@@ -113,10 +113,8 @@
position: fixed;
left: 0px;
right: 0px;
top: 49px;
top: 54px;
bottom: 0px;
outline: 1px solid #101214;
border-top: 1px solid #3e444c;
padding: 0 10px;
background: @kibanaPanelBackground;
}
......@@ -189,13 +187,14 @@
min-height: 250px;
margin-left: -10px;
margin-right: -10px;
border-top: 1px solid black;
background-color: @fullEditBackground;
border-top: 1px solid @fullEditBorder;
.tabs {
.nav-tabs {
margin: 0;
background: @grayDark;
border-top: 1px solid #555;
background: @fullEditTabsBackground;
border-top: 1px solid @fullEditTabsBorder;
}
.tab-content {
......@@ -215,26 +214,23 @@
}
}
/* Graphite Target Editor */
@grafanaTargetColor: #c8c8c8;
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
.grafana-target {
}
.grafana-target-inner-wrapper {
//border-top: 1px solid #444444;
width: 100%;
}
.grafana-target-inner {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
background: @grayDark;
border-top: 2px solid @grafanaTargetBorder;
border-left: 2px solid @grafanaTargetBorder;
border-right: 2px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
}
.grafana-target-inner:last-child {
border-bottom: 2px solid @grafanaTargetBorder;
}
.grafana-target-onoff {
display: inline-block;
padding: 5px 7px;
......@@ -255,7 +251,7 @@
padding: 5px 7px;
display: inline-block;
font-weight: normal;
border-right: 2px solid #050505;
border-right: 2px solid @grafanaTargetSegmentBorder;
color: @grafanaTargetColor;
display: inline-block;
......@@ -267,14 +263,14 @@
text-decoration: none;
}
&:hover {
background: #444;
background: @grafanaTargetFuncBackground;
}
}
.grafana-target-function {
background: #444;
background: @grafanaTargetFuncBackground;
&:hover {
background: #555;
background: @grafanaTargetFuncHightlight;
}
}
......
src/css/less/overrides.less
......@@ -563,4 +563,59 @@ div.flot-text {
.label-tag:hover {
background-color: darken(@purple, 10%);
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 {
background: #292929;
background: @submenuBackground;
font-size: inherit;
label {
margin: 0;
......@@ -13,7 +13,7 @@
.submenu-panel {
padding: 0 10px 0 17px;
border-right: 1px solid #202020;
border-right: 1px solid @submenuBorder;
float: left;
}
......
src/css/less/variables.dark.less
......@@ -29,6 +29,25 @@
// -------------------------
@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
// -------------------------
......
src/css/less/variables.light.less
......@@ -12,7 +12,7 @@
@black: #000;
@grayDarker: lighten(#000, 13.5%); // #222
@grayDark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray: lighten(#000, 33.5%); // #555
@grayLight: lighten(#000, 60%); // #999
@grayLighter: lighten(#000, 93.5%); // #eee
@white: #fff;
......@@ -33,6 +33,26 @@
// -------------------------
@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
// -------------------------
@bodyBackground: @grayLighter;
......@@ -113,7 +133,7 @@
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: @gray;
@inputBorder: @grayLight;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
......
tasks/options/less.js
......@@ -16,9 +16,9 @@ module.exports = function(config) {
yuicompress:true
},
files: {
"<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.dark.less",
"<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.light.less",
"<%= srcDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/vendor/bootstrap/less/grafana-responsive.less"
"<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/css/less/bootstrap.dark.less",
"<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/css/less/bootstrap.light.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