Skip to content

N
nexpie-grafana-theme
Commit 24e624ba by Torkel Ödegaard
Options

Merge branch 'master' of github.com:elasticsearch/kibana 

Conflicts:
	docs/kibana/configuration/config.js.asciidoc
	src/app/directives/configModal.js
	src/app/directives/kibanaPanel.js
	src/app/panels/filtering/module.html
	src/app/panels/query/module.html
	src/app/panels/query/query.css
	src/app/panels/table/editor.html
	src/app/panels/table/module.js
	src/app/partials/dashLoader.html
	src/app/partials/dashboard.html
	src/app/services/querySrv.js
	src/css/bootstrap.dark.min.css
	src/index.html
	tasks/docs_task.js
parents 3f9cb803 a13f6e0e
Showing with 1203 additions and 197 deletions
sample/lighttpd_basic.conf 0 → 100644
$HTTP["host"] =~ "kibana" {
server.document-root = "/var/ww/kibana/src"
auth.backend = "plain"
auth.backend.plain.userfile = "/etc/lighttpd/kibanapassword"
index-file.names = ( "index.html", "index.htm" )
auth.require = ( "/" => (
"method" => "basic",
"realm" => "Password Protected",
"require" => "valid-user"
)
)
$HTTP["url"] =~ "^/kibana-int/(dashboard/|temp).*$" {
proxy.balance = "hash"
proxy.server = ( "" => ( ( "host" => "127.0.0.1", "port" => "9200" ) ) )
}
$HTTP["url"] =~ "^.*/_(mapping|search|nodes|aliases)$" {
proxy.balance = "hash"
proxy.server = ( "" => ( ( "host" => "127.0.0.1", "port" => "9200" ) ) )
}
}
src/app/controllers/dash.js
...@@ -77,7 +77,7 @@ function (angular, $, config, _) { ...@@ -77,7 +77,7 @@ function (angular, $, config, _) {
$rootScope.$emit('open-search', evt); $rootScope.$emit('open-search', evt);
}, { inputDisabled: true }); }, { inputDisabled: true });
keyboardManager.bind('ctrl+h', function(evt) { keyboardManager.bind('ctrl+h', function() {
var current = dashboard.current.hideControls; var current = dashboard.current.hideControls;
dashboard.current.hideControls = !current; dashboard.current.hideControls = !current;
dashboard.current.panel_hints = !current; dashboard.current.panel_hints = !current;
...@@ -87,7 +87,7 @@ function (angular, $, config, _) { ...@@ -87,7 +87,7 @@ function (angular, $, config, _) {
$rootScope.$emit('save-dashboard', evt); $rootScope.$emit('save-dashboard', evt);
}, { inputDisabled: true }); }, { inputDisabled: true });
keyboardManager.bind('ctrl+r', function(evt) { keyboardManager.bind('ctrl+r', function() {
dashboard.refresh(); dashboard.refresh();
}, { inputDisabled: true }); }, { inputDisabled: true });
...@@ -162,6 +162,12 @@ function (angular, $, config, _) { ...@@ -162,6 +162,12 @@ function (angular, $, config, _) {
} }
}; };
$scope.pulldownTabStyle = function(i) {
var classes = ['bgPrimary','bgSuccess','bgWarning','bgDanger','bgInverse','bgInfo'];
i = i%classes.length;
return classes[i];
};
$scope.setEditorTabs = function(panelMeta) { $scope.setEditorTabs = function(panelMeta) {
$scope.editorTabs = ['General','Panel']; $scope.editorTabs = ['General','Panel'];
if(!_.isUndefined(panelMeta.editorTabs)) { if(!_.isUndefined(panelMeta.editorTabs)) {
......
src/app/controllers/dashLoader.js
define([ define([
'angular', 'angular',
'underscore' 'underscore',
'moment'
], ],
function (angular, _) { function (angular, _, moment) {
'use strict'; 'use strict';
var module = angular.module('kibana.controllers'); var module = angular.module('kibana.controllers');
...@@ -160,7 +161,6 @@ function (angular, _) { ...@@ -160,7 +161,6 @@ function (angular, _) {
type:'time', type:'time',
from:moment.utc(_from).toDate(), from:moment.utc(_from).toDate(),
to:moment.utc(_to).toDate(), to:moment.utc(_to).toDate(),
field:"@timestamp"
}); });
}; };
......
src/app/controllers/graphiteTarget.js
...@@ -15,7 +15,6 @@ function (angular, _, config, graphiteFuncs, Parser) { ...@@ -15,7 +15,6 @@ function (angular, _, config, graphiteFuncs, Parser) {
$scope.init = function() { $scope.init = function() {
$scope.funcCategories = graphiteFuncs.getCategories(); $scope.funcCategories = graphiteFuncs.getCategories();
parseTarget(); parseTarget();
i = 10;
}; };
function parseTarget() { function parseTarget() {
......
src/app/directives/configModal.js
define([ define([
'angular', 'angular',
'app', 'underscore'
], ],
function (angular) { function (angular,_) {
'use strict'; 'use strict';
angular angular
...@@ -11,6 +11,7 @@ function (angular) { ...@@ -11,6 +11,7 @@ function (angular) {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem) { link: function(scope, elem) {
// create a new modal. Can't reuse one modal unforunately as the directive will not // create a new modal. Can't reuse one modal unforunately as the directive will not
// re-render on show. // re-render on show.
elem.bind('click',function(){ elem.bind('click',function(){
...@@ -20,11 +21,23 @@ function (angular) { ...@@ -20,11 +21,23 @@ function (angular) {
return; return;
} }
// Create a temp scope so we can discard changes to it if needed
var tmpScope = scope.$new();
tmpScope.panel = angular.copy(scope.panel);
tmpScope.editSave = function(panel) {
// Correctly set the top level properties of the panel object
_.each(panel,function(v,k) {
scope.panel[k] = panel[k];
});
};
var panelModal = $modal({ var panelModal = $modal({
template: './app/partials/paneleditor.html', template: './app/partials/paneleditor.html',
persist: true, persist: true,
show: false, show: false,
scope: scope, scope: tmpScope,
keyboard: false keyboard: false
}); });
......
src/app/directives/kibanaPanel.js
...@@ -30,9 +30,6 @@ function (angular) { ...@@ -30,9 +30,6 @@ function (angular) {
'onStop:\'panelMoveStop\''+ 'onStop:\'panelMoveStop\''+
'}" ng-model="row.panels"><i class="icon-move"></i></span>'+ '}" ng-model="row.panels"><i class="icon-move"></i></span>'+
'</span>' + '</span>' +
'<span class="extra row-button" ng-show="panel.draggable == false">' +
'<span class="row-text">{{panel.type}}</span>'+
'</span>' +
'<span class="row-button extra" ng-show="panel.editable != false">' + '<span class="row-button extra" ng-show="panel.editable != false">' +
'<span config-modal class="pointer">'+ '<span config-modal class="pointer">'+
...@@ -51,7 +48,7 @@ function (angular) { ...@@ -51,7 +48,7 @@ function (angular) {
'</span>' + '</span>' +
'<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' + '<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +
'<span class="pointer dropdown-toggle row-text row-button panel-title pointer" data-toggle="dropdown" tabindex="1">' + '<span class="dropdown-toggle panel-text panel-title pointer" data-toggle="dropdown" tabindex="1">' +
'{{panel.title}}' + '{{panel.title}}' +
'</span>' + '</span>' +
'<ul class="dropdown-menu" role="menu">' + '<ul class="dropdown-menu" role="menu">' +
...@@ -59,7 +56,7 @@ function (angular) { ...@@ -59,7 +56,7 @@ function (angular) {
'</ul>' + '</ul>' +
'</span>'+ '</span>'+
'<span ng-if="!panelMeta.menuItems" class="row-button row-text panel-title pointer" ng-show="panel.title">' + '<span ng-if="!panelMeta.menuItems" class="panel-text panel-title" ng-show="panel.title">' +
'{{panel.title}}' + '{{panel.title}}' +
'</span>'+ '</span>'+
......
src/app/panels/filtering/module.html
...@@ -8,23 +8,14 @@ ...@@ -8,23 +8,14 @@
vertical-align: top; vertical-align: top;
width: 220px; width: 220px;
padding: 5px 5px 0px 5px; padding: 5px 5px 0px 5px;
border: #555 1px solid;
margin: 5px 5px 5px 0px; margin: 5px 5px 5px 0px;
color: #fff;
background-color: #444;
} }
.filter-panel-filter ul { .filter-panel-filter ul {
margin-bottom: 3px; margin-bottom: 3px;
} }
.filter-must {
border-top: #7EB26D 3px solid;
}
.filter-mustNot {
border-top: #E24D42 3px solid;
}
.filter-either {
border-top: #EF843C 3px solid;
}
.filter-deselected { .filter-deselected {
opacity: 0.5; opacity: 0.5;
} }
...@@ -39,7 +30,6 @@ ...@@ -39,7 +30,6 @@
} }
.filter-apply { .filter-apply {
float:right; float:right;
margin-bottom: 5px;
} }
</style> </style>
......
src/app/panels/filtering/module.js
...@@ -44,7 +44,7 @@ function (angular, app, _) { ...@@ -44,7 +44,7 @@ function (angular, app, _) {
dashboard.refresh(); dashboard.refresh();
}; };
$scope.add = function(query) { $scope.add = function() {
filterSrv.set({ filterSrv.set({
editing : true, editing : true,
type : 'filter', type : 'filter',
...@@ -74,6 +74,24 @@ function (angular, app, _) { ...@@ -74,6 +74,24 @@ function (angular, app, _) {
return !_.contains(['type','id','active','editing', 'name', 'query', 'value'],key); return !_.contains(['type','id','active','editing', 'name', 'query', 'value'],key);
}; };
$scope.getFilterClass = function(filter) {
if(filter.active !== true) {
return 'muted';
} else {
switch (filter.mandate)
{
case 'must':
return 'text-success';
case 'mustNot':
return 'text-error';
case 'either':
return 'text-warning';
default:
return 'text-info';
}
}
};
$scope.isEditable = function(filter) { $scope.isEditable = function(filter) {
var uneditable = ['time']; var uneditable = ['time'];
if(_.contains(uneditable,filter.type)) { if(_.contains(uneditable,filter.type)) {
......
src/app/panels/histogram/module.html
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
</style> </style>
<div> <div>
<span ng-show='panel.options'> <span ng-show='panel.options'>
<a class="link underline small" ng-show='panel.options' ng-click="options=!options"> <a class="link small" ng-show='panel.options' ng-click="options=!options">
<i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i> View View <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i>
</a> |&nbsp </a> |&nbsp
</span> </span>
<span ng-show='panel.zoomlinks && data'> <span ng-show='panel.zoomlinks && data'>
......
src/app/panels/timepicker/editor.html
<div class="row-fluid"> <div class="editor-row">
<div class="span4"> <div class="section">
<label class="small">Relative time options <small>comma seperated</small></label> <div class="editor-option">
<input type="text" array-join class="input-large" ng-model="panel.time_options"> <label class="small">Relative time options <small>comma seperated</small></label>
</div> <input type="text" array-join class="input-large" ng-model="panel.time_options">
<div class="span4"> </div>
<label class="small">Auto-refresh options <small>comma seperated</small></label> <div class="editor-option">
<input type="text" array-join class="input-large" ng-model="panel.refresh_intervals"> <label class="small">Auto-refresh options <small>comma seperated</small></label>
</div> <input type="text" array-join class="input-large" ng-model="panel.refresh_intervals">
<div class="span2"> </div>
<label class="small">Time Field</label> <div class="editor-option">
<input type="text" class="input-small" ng-model="panel.timefield"> <label class="small">Time Field</label>
<input type="text" class="input-small" ng-model="panel.timefield">
</div>
</div> </div>
</div> </div>
src/app/partials/dashboard.html
<!-- is there a better way to repeat without actually affecting the page? --> <!-- is there a better way to repeat without actually affecting the page? -->
<nil ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable"> <nil ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
<div class="top-row-close pointer pull-left" ng-class="pulldownTabStyle($index)" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
<span class="small">{{pulldown.type}}</span>
<i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-right':!pulldown.collapse}"></i>
<i class="small icon-star" ng-show="row.notice && pulldown.collapse"></i>
</div>
<div class="clearfix bgNav" ng-hide="pulldown.collapse"></div>
<div class="top-row-open" ng-hide="pulldown.collapse"> <div class="top-row-open" ng-hide="pulldown.collapse">
<kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel> <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
</div> </div>
<div class="top-row-close pointer" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
<span class="small row-text">{{pulldown.type}}</span>
<i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-up':!pulldown.collapse}"></i>
<i class="small icon-star text-warning" ng-show="row.notice && pulldown.collapse"></i>
</div>
</nil> </nil>
<div class="clearfix bgNav" ></div>
<div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}"> <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
<div class="row-fluid"> <div class="row-fluid">
<div class="row-fluid container" style="margin-top:10px; width:98%"> <div class="row-fluid container" style="margin-top:10px; width:98%">
...@@ -21,32 +22,28 @@ ...@@ -21,32 +22,28 @@
<div class="row-fluid grafana-row" style="padding:0px;margin:0px;position:relative;"> <div class="row-fluid grafana-row" style="padding:0px;margin:0px;position:relative;">
<div class="row-close span12" ng-show="row.collapse" data-placement="bottom" > <div class="row-close span12" ng-show="row.collapse" data-placement="bottom" >
<span class="row-button" bs-modal="'app/partials/roweditor.html'" class="pointer"> <span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i> <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
</span> </span>
<span class="row-button" ng-click="toggle_row(row)" ng-show="row.collapsable"> <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
<i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-right pointer" ></i> <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-left pointer" ></i>
</span> </span>
<span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span> <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
</div> </div>
<div style="text-align:center" class="row-open" ng-show="!row.collapse"> <div style="text-align:center" class="row-open" ng-show="!row.collapse">
<span ng-show="row.collapsable"> <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
<i bs-tooltip="'Hide row'" data-placement="right" class="icon-caret-up" ng-click="toggle_row(row)"></i> <i bs-tooltip="'Hide row'" data-placement="right" class="icon-caret-right" ></i>
<br> <br>
</span> </div>
<span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable"> <div bs-modal="'app/partials/roweditor.html'" class='row-tab bgWarning' ng-show="row.editable">
<i bs-tooltip="'Configure row'" data-placement="right" class="icon-cog pointer"></i> <i bs-tooltip="'Configure row'" data-placement="right" class="icon-cog pointer"></i>
<br> <br>
</span> </div>
<span ng-show="rowSpan(row) == 12 && row.editable"> <div ng-show="rowSpan(row) > 12" class='row-tab bgDanger'>
<i bs-tooltip="'Row full. Create a new row to add more panels'" data-placement="right" class="icon-columns"></i> <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign"></i>
<br>
</span>
<span ng-show="rowSpan(row) > 12">
<i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign text-warning"></i>
<br> <br>
</span> </div>
</div> </div>
</div> </div>
......
src/app/partials/dasheditor.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span8"> <div class="span8">
<h4>Rows</h4> <h4>Rows</h4>
<table class="table table-condensed table-bordered"> <table class="table table-striped">
<thead> <thead>
<th width="1%"></th> <th width="1%"></th>
<th width="1%"></th> <th width="1%"></th>
......
src/app/partials/paneleditor.html
...@@ -19,5 +19,6 @@ ...@@ -19,5 +19,6 @@
<div class="modal-footer"> <div class="modal-footer">
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss --> <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button type="button" class="btn btn-danger" ng-click="editor.index=0;close_edit();dismiss()">Close</button> <button type="button" class="btn btn-success" ng-click="editor.index=0;editSave(panel);close_edit();dismiss()">Save</button>
<button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss()">Cancel</button>
</div> </div>
\ No newline at end of file
src/app/partials/roweditor.html
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
<div class="row-fluid" ng-if="editor.index == 1"> <div class="row-fluid" ng-if="editor.index == 1">
<div class="span12"> <div class="span12">
<h4>Panels <i class="icon-plus-sign link" bs-tooltip="'Add panel'" ng-click="editor.index = 2"></i></h4> <h4>Panels</h4>
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<thead> <thead>
<th>Title</th> <th>Title</th>
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button ng-show="panel.type &amp;&amp; editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index == 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button> <button ng-show="editor.index == 1" ng-click="editor.index = 2;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<button ng-show="panel.type && editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button> <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
</div> </div>
\ No newline at end of file
src/app/services/dashboard.js
...@@ -115,7 +115,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) { ...@@ -115,7 +115,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
// as their default // as their default
if (Modernizr.localstorage) { if (Modernizr.localstorage) {
if(!(_.isUndefined(window.localStorage['dashboard'])) && window.localStorage['dashboard'] !== '') { if(!(_.isUndefined(window.localStorage['dashboard'])) && window.localStorage['dashboard'] !== '') {
console.log(window.localStorage['dashboard']);
$location.path(config.default_route); $location.path(config.default_route);
alertSrv.set('Saving to browser storage has been replaced',' with saving to Elasticsearch.'+ alertSrv.set('Saving to browser storage has been replaced',' with saving to Elasticsearch.'+
' Click <a href="#/dashboard/local/deprecated">here</a> to load your old dashboard anyway.'); ' Click <a href="#/dashboard/local/deprecated">here</a> to load your old dashboard anyway.');
...@@ -215,7 +214,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) { ...@@ -215,7 +214,6 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
}; };
this.set_default = function(route) { this.set_default = function(route) {
console.log(route);
if (Modernizr.localstorage) { if (Modernizr.localstorage) {
// Purge any old dashboards // Purge any old dashboards
if(!_.isUndefined(window.localStorage['dashboard'])) { if(!_.isUndefined(window.localStorage['dashboard'])) {
......
src/app/services/filterSrv.js
...@@ -236,7 +236,9 @@ define([ ...@@ -236,7 +236,9 @@ define([
var idCount = dashboard.current.services.filter.ids.length; var idCount = dashboard.current.services.filter.ids.length;
if(idCount > 0) { if(idCount > 0) {
// Make a sorted copy of the ids array // Make a sorted copy of the ids array
var ids = _.clone(dashboard.current.services.filter.ids).sort(); var ids = _.sortBy(_.clone(dashboard.current.services.filter.ids),function(num){
return num;
});
return kbn.smallestMissing(ids); return kbn.smallestMissing(ids);
} else { } else {
// No ids currently in list // No ids currently in list
......
src/app/services/graphite/graphiteSrv.js
...@@ -57,7 +57,7 @@ function (angular, _, $, config) { ...@@ -57,7 +57,7 @@ function (angular, _, $, config) {
}; };
}); });
}); });
} };
function buildGraphitePostParams(options) { function buildGraphitePostParams(options) {
......
src/config.js
...@@ -18,7 +18,7 @@ function (Settings) { ...@@ -18,7 +18,7 @@ function (Settings) {
* The URL to your elasticsearch server. You almost certainly don't * The URL to your elasticsearch server. You almost certainly don't
* want +http://localhost:9200+ here. Even if Kibana and Elasticsearch are on * want +http://localhost:9200+ here. Even if Kibana and Elasticsearch are on
* the same host. By default this will attempt to reach ES at the same host you have * the same host. By default this will attempt to reach ES at the same host you have
* elasticsearch installed on. You probably want to set it to the FQDN of your * kibana installed on. You probably want to set it to the FQDN of your
* elasticsearch host * elasticsearch host
*/ */
elasticsearch: "http://"+window.location.hostname+":9200", elasticsearch: "http://"+window.location.hostname+":9200",
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/index.html
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<body ng-cloak> <body ng-cloak>
<!--<link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">-->
<link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css"> <link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css">
......
src/vendor/bootstrap/less/bak/variables.dark.less 0 → 100644
// Slate 2.3.2
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@black: #000;
@grayDarker: #272B30;
@grayDark: #3A3F44;
@gray: #52575C;
@grayLight: #7A8288;
@grayLighter: #BBBFC2;
@white: #fff;
// Accent colors
// -------------------------
@blue: #5bc0de;
@blueDark: #108CBB;
@green: #62c462;
@red: #ee5f5b;
@yellow: #F6D30D;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Scaffolding
// -------------------------
@bodyBackground: @grayDarker;
@textColor: #C8C8C8;
// Links
// -------------------------
@linkColor: @white;
@linkColorHover: @white;
// Typography
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 21px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 0px 6px; // 22px
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: darken(@grayDark, 5%); // for striping
@tableBackgroundHover: @grayDark; // for hover
@tableBorder: lighten(@grayDark, 2%); // table and cell border
// Buttons
// -------------------------
@btnBackground: @gray;
@btnBackgroundHighlight: darken(@gray, 10%);
@btnBorder: darken(@gray, 20%);
@btnPrimaryBackground: @grayLight;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnInfoBackground: @blue;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: @green;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: @red;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms
// -------------------------
@inputText: @white;
@inputBackground: @gray;
@inputBorder: @grayLight;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: darken(@grayDarker, 3%);
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns
// -------------------------
@dropdownBackground: @grayDark;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: transparent;
@dropdownDividerBottom: darken(@grayDarker, 5%);
@dropdownLinkColor: @grayLight;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @grayDarker;
@dropdownLinkBackgroundHover: @grayDarker;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: darken(@grayDarker, 5%);
// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;
// Wells
// -------------------------
@wellBackground: darken(@grayDarker, 3%);
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @textColor;
@navbarLinkColor: @textColor;
@navbarLinkColorHover: @white;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkBackgroundHover: @grayDark;
@navbarLinkBackgroundActive: @navbarBackground;
@navbarBrandColor: @grayLighter;
// Inverted navbar
@navbarInverseBackground: darken(@grayDarker, 10%);
@navbarInverseBackgroundHighlight: @grayDarker;
@navbarInverseBorder: #252525;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Pagination
// -------------------------
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
// Hero unit
// -------------------------
@heroUnitBackground: darken(@grayDarker, 3%);
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: @dropdownBackground;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: @dropdownBackground;
@popoverArrowWidth: 10px;
@popoverArrowColor: @dropdownBackground;
@popoverTitleBackground: lighten(@popoverBackground, 3%);
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 10px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 10px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 10px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@gridGutterWidth: 10px;
//@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@gridGutterWidth: 10px;
//@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@gridGutterWidth: 10px;
//@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
src/vendor/bootstrap/less/bootswatch.light.less
// Cosmo 2.3.2
// Bootswatch
// -----------------------------------------------------
// KIBANA
.panelCont { // TYPOGRAPHY
outline: 1px solid darken(@bodyBackground, 10%); // -----------------------------------------------------
border-top: 1px solid lighten(@bodyBackground, 10%);
padding: 0px 10px 10px 10px; body {
background: darken(@bodyBackground, 5%); font-weight: 300;
margin: 0px; background: @bodyBackground;
//url('../img/light.png') repeat right top;
}
h1 {
font-size: 50px;
}
h2, h3 {
font-size: 26px;
}
h4 {
font-size: 14px;
}
h5, h6 {
font-size: 11px;
}
blockquote {
padding: 10px 15px;
background-color: @grayLighter;
border-left-color: @gray;
&.pull-right {
padding: 10px 15px;
border-right-color: @gray;
}
small {
color: @gray;
}
}
.muted {
color: @gray;
}
.text-warning { color: @orange; }
a.text-warning:hover { color: darken(@orange, 10%); }
.text-error { color: @red; }
a.text-error:hover { color: darken(@red, 10%); }
.text-info { color: @purple; }
a.text-info:hover { color: darken(@purple, 10%); }
.text-success { color: @green; }
a.text-success:hover { color: darken(@green, 10%); }
// SCAFFOLDING
// -----------------------------------------------------
// NAVBAR
// -----------------------------------------------------
.navbar {
.navbar-inner {
background-image: none;
.box-shadow(none);
.border-radius(0);
}
.brand {
&:hover {
color: @navbarLinkColorHover;
}
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
background-color: @navbarLinkBackgroundHover;
}
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
color: @white;
&:hover {
color: @grayLighter;
}
}
.navbar-search .search-query {
line-height: normal;
}
&-inverse {
.brand,
.nav > li > a {
text-shadow: none;
}
.brand:hover,
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
background-color: @navbarInverseLinkBackgroundHover;
.box-shadow(none);
color: @white;
}
.navbar-search .search-query {
color: @grayDarker;
}
}
}
div.subnav {
margin: 0 1px;
background: @grayLight none;
.box-shadow(none);
border: none;
.border-radius(0);
.nav {
background-color: transparent;
}
.nav > li > a {
border-color: transparent;
}
.nav > .active > a,
.nav > .active > a:hover {
border-color: transparent;
background-color: @black;
color: @white;
.box-shadow(none);
}
&-fixed {
top: @navbarHeight + 1;
margin: 0;
}
}
// NAV
// -----------------------------------------------------
.nav {
.open .dropdown-toggle,
& > li.dropdown.open.active > a:hover {
color: @blue;
}
}
.nav-tabs {
& > li > a {
.border-radius(0);
}
li > a:hover,
li.active > a,
li.active > a:hover {
border-color: transparent;
background-color: @blue;
color: @white;
}
li.disabled > a {
color: @textColor;
}
.open .dropdown-toggle {
background-color: #060606;
border-color: transparent;
}
}
.tabs-below,
.tabs-left,
.tabs-right {
& > .nav-tabs > li > a{
.border-radius(0);
border: 0px;
}
}
.nav-pills {
& > li > a {
//background-color: @grayLight;
.border-radius(0);
color: @black;
&:hover {
background-color: @black;
color: @white;
}
}
& > .disabled > a,
& > .disabled > a:hover {
background-color: @grayLighter;
color: @grayDark;
}
}
.nav-list {
& > li > a {
color: @grayDarker;
&:hover {
background-color: @blue;
color: @white;
text-shadow: none;
}
}
.nav-header {
color: @grayDarker;
}
.divider {
background-color: @gray;
border-bottom: none;
}
}
.pagination {
ul {
.box-shadow(none);
& > li > a,
& > li > span {
margin-right: 6px;
color: @grayDarker;
&:hover {
background-color: @grayDarker;
color: @white;
}
}
& > li:last-child > a,
& > li:last-child > span {
margin-right: 0;
}
& > .active > a,
& > .active > span {
color: @white;
}
& > .disabled > span,
& > .disabled > a,
& > .disabled > a:hover {
background-color: @grayLighter;
color: @grayDark;
}
}
}
.pager {
li > a,
li > span {
background-color: @grayLight;
border: none;
.border-radius(0);
color: @grayDarker;
&:hover {
background-color: @grayDarker;
color: @white;
}
}
.disabled > a,
.disabled > a:hover,
.disabled > span {
background-color: @grayLighter;
color: @grayDark;
}
}
.breadcrumb {
background-color: @grayLight;
li {
text-shadow: none;
}
.divider,
.active {
color: @grayDarker;
text-shadow: none;
}
}
// BUTTONS
// -----------------------------------------------------
.btn {
padding: 5px 12px;
background-image: none;
.box-shadow(none);
border: none;
.border-radius(0);
text-shadow: none;
&.disabled {
box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
}
}
.btn-large {
padding: 22px 30px;
}
.btn-small {
padding: 2px 10px;
}
.btn-mini {
padding: 2px 6px;
} }
.btn-group {
& > .btn:first-child,
& > .btn:last-child,
& > .dropdown-toggle {
.border-radius(0);
}
& > .btn + .dropdown-toggle {
.box-shadow(none);
}
}
// TABLES
// -----------------------------------------------------
.table {
tbody tr.success td {
color: @white;
}
tbody tr.error td {
color: @white;
}
tbody tr.info td {
color: @white;
}
&-bordered {
.border-radius(0);
thead:first-child tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
.border-radius(0);
}
thead:last-child tr:last-child th:first-child,
tbody:last-child tr:last-child td:first-child,
tfoot:last-child tr:last-child td:first-child {
.border-radius(0);
}
}
}
// FORMS
// -----------------------------------------------------
select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"] {
color: @grayDarker;
}
.control-group {
&.warning {
.control-label,
.help-block,
.help-inline {
color: @orange;
}
input,
select,
textarea {
border-color: @orange;
color: @grayDarker;
}
}
&.error {
.control-label,
.help-block,
.help-inline {
color: @red;
}
input,
select,
textarea {
border-color: @red;
color: @grayDarker;
}
}
&.success {
.control-label,
.help-block,
.help-inline {
color: @green;
}
input,
select,
textarea {
border-color: @green;
color: @grayDarker;
}
}
}
legend {
border-bottom: none;
color: @grayDarker;
}
.form-actions {
border-top: none;
background-color: @grayLighter;
}
// DROPDOWNS
// -----------------------------------------------------
.dropdown-menu {
.border-radius(0);
}
// ALERTS, LABELS, BADGES
// -----------------------------------------------------
.alert {
.border-radius(0);
text-shadow: none;
&-heading, h1, h2, h3, h4, h5, h6 {
color: @white;
}
}
.label {
min-width: 80px;
min-height: 80px;
.border-radius(0);
font-weight: 300;
text-shadow: none;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @purple;
}
&-inverse {
background-color: @black;
}
}
.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;
}
}
// MISC
// -----------------------------------------------------
a:hover {
text-decoration: none;
}
.hero-unit {
border: none;
.border-radius(0);
.box-shadow(none);
}
.well {
border: none;
.border-radius(0);
.box-shadow(none);
}
[class^="icon-"], [class*=" icon-"] {
margin: 0 2px;
vertical-align: -2px;
}
a.thumbnail {
background-color: @grayLight;
&:hover {
background-color: @gray;
border-color: transparent;
}
}
.progress {
background-color: @grayLighter;
background-image: none;
.border-radius(0);
}
.modal {
.border-radius(0);
&-header {
border-bottom: none;
}
&-footer {
border-top: none;
background-color: transparent;
}
}
.popover {
.border-radius(0);
&-title {
border-bottom: none;
color: @white;
}
}
// MEDIA QUERIES
// -----------------------------------------------------
src/vendor/bootstrap/less/modals.less
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
.modal-body { .modal-body {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
max-height: 700px; //max-height: 700px;
padding: 15px; padding: 15px;
} }
// Remove bottom margin if need be // Remove bottom margin if need be
......
src/vendor/bootstrap/less/overrides.less
// Containers
// ---------------------
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
// Backgrounds
// ---------------------
.bgNav {
background: @navbarBackground;
}
.bgPrimary {
background: @btnPrimaryBackground;
color: rgba(255,255,255,.90);
}
.bgInfo {
background: @btnInfoBackground;
color: rgba(255,255,255,.90);
}
.bgSuccess {
background: @btnSuccessBackground;
color: rgba(255,255,255,.90);
}
.bgWarning {
background: @btnWarningBackground;
color: rgba(255,255,255,.90);
}
.bgDanger {
background: @btnDangerBackground;
color: rgba(255,255,255,.90);
}
.bgInverse {
background: @btnInverseBackground;
color: rgba(255,255,255,.90);
}
code, pre {
background-color: @grayLighter;
}
// KIBANA
.panelCont {
padding: 0px 10px 10px 10px;
background: @kibanaPanelBackground;
//box-shadow: 0px 0px 8px rgba(30, 30, 30, 0.75);
margin: 0px;
border: 1px solid rgba(100, 100, 100, 0.25);
}
div.editor-row { div.editor-row {
vertical-align: top; vertical-align: top;
} }
div.editor-row div.section { div.editor-row div.section {
margin-right: 20px; margin-right: 20px;
vertical-align: top; vertical-align: top;
...@@ -73,63 +137,66 @@ form input.ng-invalid { ...@@ -73,63 +137,66 @@ form input.ng-invalid {
.navbar-inner { .navbar-inner {
border-width: 0 0 0px; border-width: 0 0 0px;
padding-left: 0px;
padding-right: 0px;
} }
.kibana-row { .kibana-row {
margin-bottom: 10px; margin-bottom: 10px;
} }
.row-tab {
padding: 0px;
cursor: pointer;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: middle;
}
.row-button { .row-button {
border-left: 1px solid lighten(@bodyBackground, 10%); width: 30px;
border-right: 1px solid darken(@bodyBackground, 10%); text-align: center;
padding: 2px 7px 0px 7px;
float: left; float: left;
cursor: pointer;
} }
.row-text { .row-text {
white-space: nowrap;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
margin: 0px 10px;
} }
.row-close { .row-close {
outline: 1px solid darken(@bodyBackground, 10%);
border-top: 1px solid lighten(@bodyBackground, 10%);
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
min-height: 24px !important; min-height: 30px !important;
line-height: 24px; line-height: 30px;
background: darken(@bodyBackground, 3%); background: @kibanaPanelBackground;
}
.row-open {
text-align: right;
left:-18px;
position: absolute;
font-size: 13pt;
font-weight: 200;
} }
.top-row-open { .top-row-open {
background: darken(@bodyBackground, 3%); background: @navbarBackground;
padding: 5px 25px 5px 25px; padding: 5px 25px 5px 25px;
} }
.top-row-close { .top-row-close {
outline: 1px solid darken(@bodyBackground, 10%); padding: 5px 10px;
border-top: 1px solid lighten(@bodyBackground, 10%); text-transform: uppercase;
padding: 0px; margin: 0px;
margin: 1px 0px 0px 0px; text-align: left;
text-align: center;
min-height: 16px !important; min-height: 16px !important;
line-height: 16px; line-height: 16px;
background: darken(@bodyBackground, 3%);
} }
.row-open i { .row-open {
font-size: 10pt; left:-34px;
position: absolute;
z-index: 100;
}
.row-open:hover {
left:-12px;
} }
.odd { .odd {
...@@ -165,11 +232,13 @@ form input.ng-invalid { ...@@ -165,11 +232,13 @@ form input.ng-invalid {
.panel-title { .panel-title {
border: 0px; border: 0px;
margin-left: -11px; text-transform: uppercase;
font-weight: bold;
} }
.panel div.panel-extra div.panel-extra-container { .panel div.panel-extra div.panel-extra-container {
margin-right: -11px; margin-right: 0px;
margin-top: 7px;
} }
.panel div.panel-extra { .panel div.panel-extra {
...@@ -179,7 +248,7 @@ form input.ng-invalid { ...@@ -179,7 +248,7 @@ form input.ng-invalid {
.panel div.panel-extra .extra { .panel div.panel-extra .extra {
float:right !important; float:right !important;
border-bottom: 1px solid lighten(@bodyBackground, 5%); //border-bottom: 1px solid lighten(@bodyBackground, 5%);
} }
.dragInProgress { .dragInProgress {
...@@ -196,11 +265,6 @@ form input.ng-invalid { ...@@ -196,11 +265,6 @@ form input.ng-invalid {
color: @linkColorHover; color: @linkColorHover;
} }
.pointer:hover {
color: @linkColorHover;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
...@@ -279,12 +343,12 @@ div.flot-text { ...@@ -279,12 +343,12 @@ div.flot-text {
margin-left:0px; margin-left:0px;
padding:3px 0px 3px 0px; padding:3px 0px 3px 0px;
width:100%; width:100%;
color: @textColor;
padding-left:20px; padding-left:20px;
color: @white;
} }
.panel-error { .panel-error {
color: @textColor; color: @white;
padding: 3px 10px 0px 10px; padding: 3px 10px 0px 10px;
} }
......
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