Skip to content

N
nexpie-grafana-theme
Commit a6921ab2 by Rashid Khan
Options

added switching between light/dark themes

parent 58256acb
Showing with 57 additions and 100 deletions
common/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
...@@ -9,15 +9,11 @@ ...@@ -9,15 +9,11 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Kibana 3</title> <title>Kibana 3</title>
<link rel="stylesheet" href="common/css/bootstrap.light.min.css" title="Light">
<link rel="stylesheet" href="common/css/normalize.min.css">
<link rel="stylesheet" href="common/css/bootstrap.dark.min.css" title="Dark">
<link rel="alternate stylesheet" href="common/css/bootstrap.light.min.css" title="Light">
<link rel="stylesheet" href="common/css/animate.min.css">
<link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="common/css/font-awesome.min.css">
<link rel="stylesheet" href="common/css/timepicker.css"> <link rel="stylesheet" href="common/css/timepicker.css">
<link rel="stylesheet" href="common/css/animate.min.css">
<link rel="stylesheet" href="common/css/normalize.min.css">
<!-- project dependency libs --> <!-- project dependency libs -->
<script src="common/lib/LAB.min.js"></script> <script src="common/lib/LAB.min.js"></script>
<script src="common/lib/underscore.min.js"></script> <script src="common/lib/underscore.min.js"></script>
...@@ -31,6 +27,11 @@ ...@@ -31,6 +27,11 @@
</head> </head>
<body ng-controller="DashCtrl" ng-cloak> <body ng-controller="DashCtrl" ng-cloak>
<link rel="stylesheet" href="common/css/bootstrap.{{dashboard.current.style}}.min.css">
<link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="common/css/font-awesome.min.css">
<div ng-repeat='alert in global_alert' class="alert-{{alert.severity}} dashboard-notice" ng-show="$last"> <div ng-repeat='alert in global_alert' class="alert-{{alert.severity}} dashboard-notice" ng-show="$last">
<button type="button" class="close" ng-click="clear_alert(alert)" style="padding-right:50px">&times;</button> <button type="button" class="close" ng-click="clear_alert(alert)" style="padding-right:50px">&times;</button>
<strong>{{alert.title}}</strong> <span ng-bind-html-unsafe='alert.text'></span> <div style="padding-right:10px" class='pull-right small'> {{$index + 1}} alert(s) </div> <strong>{{alert.title}}</strong> <span ng-bind-html-unsafe='alert.text'></span> <div style="padding-right:10px" class='pull-right small'> {{$index + 1}} alert(s) </div>
......
js/controllers.js
...@@ -10,7 +10,8 @@ angular.module('kibana.controllers', []) ...@@ -10,7 +10,8 @@ angular.module('kibana.controllers', [])
title: "", title: "",
editable: true, editable: true,
rows: [], rows: [],
last: null last: null,
style: 'dark'
}; };
// For // For
......
js/services.js
...@@ -435,6 +435,7 @@ angular.module('kibana.services', []) ...@@ -435,6 +435,7 @@ angular.module('kibana.services', [])
var _dash = { var _dash = {
title: "", title: "",
style: "dark",
editable: true, editable: true,
rows: [], rows: [],
services: {}, services: {},
......
panels/query/meta.html
...@@ -7,10 +7,11 @@ ...@@ -7,10 +7,11 @@
.panel-query-meta .pin { .panel-query-meta .pin {
text-decoration: underline; text-decoration: underline;
} }
</style> </style>
<a class="close" ng-click="render();dismiss();" href="">×</a> <a class="close" ng-click="render();dismiss();" href="">×</a>
<i ng-click="toggle_pin(id);dismiss();" class="small pointer icon-pushpin"></i> <i ng-click="toggle_pin(id);dismiss();" class="small pointer icon-pushpin"></i>
<span class="strong small">Query Alias</span> <label class="strong small ">Query Alias</label>
<form> <form>
<input class="input-medium input-query-alias" type="text" ng-model="querySrv.list[id].alias" placeholder='Alias...' /> <input class="input-medium input-query-alias" type="text" ng-model="querySrv.list[id].alias" placeholder='Alias...' />
<div> <div>
......
partials/dasheditor.html
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
<div class="span1"> <div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" /> <label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
</div> </div>
<div class="span3">
<label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options='f for f in ["dark","light"]'></select>
</div>
</div> </div>
<div class="row-fluid" ng-show="editor.index == 1"> <div class="row-fluid" ng-show="editor.index == 1">
<h4>Index Settings</h4> <h4>Index Settings</h4>
...@@ -50,27 +53,6 @@ ...@@ -50,27 +53,6 @@
</div> </div>
</div> </div>
<div class="row-fluid" ng-show="editor.index == 2"> <div class="row-fluid" ng-show="editor.index == 2">
<h4>Rows</h4>
<form>
<div class="span5">
<label class="small">Title</label>
<input type="text" class="input-large" ng-model='row.title'></input>
</div>
<div class="span2">
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
</div>
<div class="span1">
<label class="small"> Editable </label>
<input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
</div>
<div class="span4">
<label>&nbsp</label>
<button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-primary">Create Row</button>
</div>
</form>
</div>
<div class="row-fluid" ng-show="editor.index == 2">
<div class="span12"> <div class="span12">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<thead> <thead>
...@@ -87,7 +69,25 @@ ...@@ -87,7 +69,25 @@
</table> </table>
</div> </div>
</div> </div>
<div class="row-fluid" ng-show="editor.index == 2">
<form>
<div class="span5">
<label class="small">Title</label>
<input type="text" class="input-large" ng-model='row.title' placeholder="New row"></input>
</div>
<div class="span2">
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
</div>
<div class="span1">
<label class="small"> Editable </label>
<input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
</div>
</form>
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 2">Create Row</button>
<button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button> <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
</div> </div>
\ No newline at end of file
partials/modal.html
...@@ -8,5 +8,5 @@ ...@@ -8,5 +8,5 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss()">Close</button> <button type="button" class="btn btn-danger" ng-click="dismiss()">Close</button>
</div> </div>
\ No newline at end of file
vendor/bootstrap/less/bootswatch.dark.less
...@@ -37,7 +37,6 @@ hr { ...@@ -37,7 +37,6 @@ hr {
} }
.brand { .brand {
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: none; border-right: none;
} }
...@@ -144,10 +143,16 @@ hr { ...@@ -144,10 +143,16 @@ hr {
} }
} }
.nav-tabs {
.active > a, .active a:hover {
border-bottom: 1px solid darken(@grayDark, 5%);;
}
}
div.subnav { div.subnav {
margin: 0 1px; margin: 0 1px;
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); //#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
border: 1px solid transparent; border: 1px solid transparent;
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
...@@ -160,7 +165,7 @@ div.subnav { ...@@ -160,7 +165,7 @@ div.subnav {
&:hover { &:hover {
color: @grayLighter; color: @grayLighter;
background-color: @grayDark; background-color: @grayDark;
#gradient > .directional(@grayDarker, @grayDark, 280deg); //#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
} }
...@@ -211,7 +216,7 @@ div.subnav { ...@@ -211,7 +216,7 @@ div.subnav {
} }
& > li > a { & > li > a {
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); //#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
border: none; border: none;
color: @grayLight; color: @grayLight;
...@@ -222,7 +227,6 @@ div.subnav { ...@@ -222,7 +227,6 @@ div.subnav {
li.active > a, li.active > a,
li.active > a:hover { li.active > a:hover {
background-color: transparent; background-color: transparent;
border: none;
color: @white; color: @white;
} }
...@@ -238,57 +242,6 @@ div.subnav { ...@@ -238,57 +242,6 @@ div.subnav {
} }
.nav-list {
background-color: @grayDark;
li > a {
background-image: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.nav-header {
color: @gray;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.divider {
border-bottom: 1px solid darken(@grayDarker, 5%);
background-color: transparent;
}
}
.nav-tabs {
border-bottom: none;
}
.tabs-below .nav-tabs {
border-top: none;
}
.tabs-left .nav-tabs {
border-right: none;
}
.tabs-right .nav-tabs {
border-left: none;
}
.nav-tabs.nav-stacked {
li > a,
li > a:hover {
border: 1px solid darken(@grayDarker, 5%);
background-image: none;
}
li > a:hover,
.active > a,
.active > a:hover {
background-color: @wellBackground;
color: @white;
}
}
.breadcrumb { .breadcrumb {
border: 1px solid transparent; border: 1px solid transparent;
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
......
vendor/bootstrap/less/variables.dark.less
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
// ------------------------- // -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @baseFontSize: 14px;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
@btnBackgroundHighlight: darken(@gray, 10%); @btnBackgroundHighlight: darken(@gray, 10%);
@btnBorder: darken(@gray, 20%); @btnBorder: darken(@gray, 20%);
@btnPrimaryBackground: @grayLighter; @btnPrimaryBackground: @grayLight;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnInfoBackground: @blue; @btnInfoBackground: @blue;
...@@ -179,7 +179,6 @@ ...@@ -179,7 +179,6 @@
// ------------------------- // -------------------------
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px; @navbarHeight: 40px;
@navbarBackground: @grayDarker; @navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark; @navbarBackgroundHighlight: @grayDark;
......
vendor/bootstrap/less/variables.light.less
...@@ -180,20 +180,19 @@ ...@@ -180,20 +180,19 @@
// ------------------------- // -------------------------
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px; @navbarHeight: 40px;
@navbarBackgroundHighlight: #ffffff; @navbarBackground: @grayDarker;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBackgroundHighlight: @grayDark;
@navbarBorder: darken(@navbarBackground, 12%); @navbarBorder: darken(@navbarBackground, 12%);
@navbarText: #777; @navbarText: @white;
@navbarLinkColor: #777; @navbarLinkColor: @textColor;
@navbarLinkColorHover: @grayDark; @navbarLinkColorHover: @white;
@navbarLinkColorActive: @gray; @navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundHover: @grayDark;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); @navbarLinkBackgroundActive: @navbarBackground;
@navbarBrandColor: @navbarLinkColor; @navbarBrandColor: @grayLighter;
// Inverted navbar // Inverted navbar
@navbarInverseBackground: #111111; @navbarInverseBackground: #111111;
......
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