Commit 2c414d8e by Torkel Ödegaard

even more work on light theme (#77)

parent 9794c2eb
<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'>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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;
}
......
......@@ -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;
}
}
......
......@@ -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
.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;
}
......
......@@ -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
// -------------------------
......
......@@ -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;
......
......@@ -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