mirror of
https://github.com/grafana/grafana.git
synced 2025-01-18 12:33:37 -06:00
added switching between light/dark themes
This commit is contained in:
Rashid Khan
parent
58256acb81
commit
a6921ab2a7
2
common/css/bootstrap.dark.min.css
vendored
2
common/css/bootstrap.dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
common/css/bootstrap.light.min.css
vendored
2
common/css/bootstrap.light.min.css
vendored
File diff suppressed because one or more lines are too long
15
index.html
15
index.html
@ -9,15 +9,11 @@
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<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/animate.min.css">
|
||||
<link rel="stylesheet" href="common/css/normalize.min.css">
|
||||
<!-- project dependency libs -->
|
||||
<script src="common/lib/LAB.min.js"></script>
|
||||
<script src="common/lib/underscore.min.js"></script>
|
||||
@ -31,6 +27,11 @@
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<button type="button" class="close" ng-click="clear_alert(alert)" style="padding-right:50px">×</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>
|
||||
|
||||
@ -10,7 +10,8 @@ angular.module('kibana.controllers', [])
|
||||
title: "",
|
||||
editable: true,
|
||||
rows: [],
|
||||
last: null
|
||||
last: null,
|
||||
style: 'dark'
|
||||
};
|
||||
|
||||
// For
|
||||
|
||||
@ -435,6 +435,7 @@ angular.module('kibana.services', [])
|
||||
|
||||
var _dash = {
|
||||
title: "",
|
||||
style: "dark",
|
||||
editable: true,
|
||||
rows: [],
|
||||
services: {},
|
||||
|
||||
@ -7,10 +7,11 @@
|
||||
.panel-query-meta .pin {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
<a class="close" ng-click="render();dismiss();" href="">×</a>
|
||||
<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>
|
||||
<input class="input-medium input-query-alias" type="text" ng-model="querySrv.list[id].alias" placeholder='Alias...' />
|
||||
<div>
|
||||
|
||||
@ -14,6 +14,9 @@
|
||||
<div class="span1">
|
||||
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
|
||||
</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 class="row-fluid" ng-show="editor.index == 1">
|
||||
<h4>Index Settings</h4>
|
||||
@ -49,27 +52,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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> </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">
|
||||
<table class="table table-condensed table-striped">
|
||||
@ -87,7 +69,25 @@
|
||||
</table>
|
||||
</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 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>
|
||||
</div>
|
||||
@ -8,5 +8,5 @@
|
||||
|
||||
</div>
|
||||
<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>
|
||||
65
vendor/bootstrap/less/bootswatch.dark.less
vendored
65
vendor/bootstrap/less/bootswatch.dark.less
vendored
@ -37,7 +37,6 @@ hr {
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
border-right: none;
|
||||
}
|
||||
@ -144,10 +143,16 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.active > a, .active a:hover {
|
||||
border-bottom: 1px solid darken(@grayDark, 5%);;
|
||||
}
|
||||
}
|
||||
|
||||
div.subnav {
|
||||
|
||||
margin: 0 1px;
|
||||
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
|
||||
//#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
|
||||
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)');
|
||||
|
||||
@ -160,7 +165,7 @@ div.subnav {
|
||||
&:hover {
|
||||
color: @grayLighter;
|
||||
background-color: @grayDark;
|
||||
#gradient > .directional(@grayDarker, @grayDark, 280deg);
|
||||
//#gradient > .directional(@grayDarker, @grayDark, 280deg);
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
@ -211,7 +216,7 @@ div.subnav {
|
||||
}
|
||||
|
||||
& > 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)');
|
||||
border: none;
|
||||
color: @grayLight;
|
||||
@ -222,7 +227,6 @@ div.subnav {
|
||||
li.active > a,
|
||||
li.active > a:hover {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
border: 1px solid transparent;
|
||||
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
|
||||
|
||||
5
vendor/bootstrap/less/variables.dark.less
vendored
5
vendor/bootstrap/less/variables.dark.less
vendored
@ -46,7 +46,7 @@
|
||||
// -------------------------
|
||||
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
|
||||
@baseFontSize: 14px;
|
||||
@baseFontFamily: @sansFontFamily;
|
||||
@ -88,7 +88,7 @@
|
||||
@btnBackgroundHighlight: darken(@gray, 10%);
|
||||
@btnBorder: darken(@gray, 20%);
|
||||
|
||||
@btnPrimaryBackground: @grayLighter;
|
||||
@btnPrimaryBackground: @grayLight;
|
||||
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
|
||||
|
||||
@btnInfoBackground: @blue;
|
||||
@ -179,7 +179,6 @@
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 40px;
|
||||
@navbarBackground: @grayDarker;
|
||||
@navbarBackgroundHighlight: @grayDark;
|
||||
|
||||
19
vendor/bootstrap/less/variables.light.less
vendored
19
vendor/bootstrap/less/variables.light.less
vendored
@ -180,20 +180,19 @@
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 40px;
|
||||
@navbarBackgroundHighlight: #ffffff;
|
||||
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
|
||||
@navbarBackground: @grayDarker;
|
||||
@navbarBackgroundHighlight: @grayDark;
|
||||
@navbarBorder: darken(@navbarBackground, 12%);
|
||||
|
||||
@navbarText: #777;
|
||||
@navbarLinkColor: #777;
|
||||
@navbarLinkColorHover: @grayDark;
|
||||
@navbarLinkColorActive: @gray;
|
||||
@navbarLinkBackgroundHover: transparent;
|
||||
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
|
||||
@navbarText: @white;
|
||||
@navbarLinkColor: @textColor;
|
||||
@navbarLinkColorHover: @white;
|
||||
@navbarLinkColorActive: @navbarLinkColorHover;
|
||||
@navbarLinkBackgroundHover: @grayDark;
|
||||
@navbarLinkBackgroundActive: @navbarBackground;
|
||||
|
||||
@navbarBrandColor: @navbarLinkColor;
|
||||
@navbarBrandColor: @grayLighter;
|
||||
|
||||
// Inverted navbar
|
||||
@navbarInverseBackground: #111111;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user