mirror of
https://github.com/grafana/grafana.git
synced 2026-07-29 15:59:50 -05:00
even more work on light theme (#77)
This commit is contained in:
@@ -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'>
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+8
-26
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user