even more work on light theme (#77)

This commit is contained in:
Torkel Ödegaard
2014-02-14 07:40:41 +01:00
parent 9794c2ebbb
commit 2c414d8e45
13 changed files with 128 additions and 102 deletions
-46
View File
@@ -1,50 +1,4 @@
<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'>
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
@@ -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;
}
+17 -21
View File
@@ -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;
}
}
+55
View File
@@ -564,3 +564,58 @@ div.flot-text {
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;
}
+2 -2
View File
@@ -1,5 +1,5 @@
.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;
}
+19
View File
@@ -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
// -------------------------
+22 -2
View File
@@ -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;
+3 -3
View File
@@ -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"
}
}
};