IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Make light and dark themes more similar

Browse Source
This commit is contained in:
Rashid Khan 2013-12-23 16:36:32 -07:00
parent 84062c9d57
commit a2c0df1e42
20 changed files with 1330 additions and 619 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/controllers/dash.js
View File

@ -104,6 +104,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)) {

5
src/app/directives/kibanaPanel.js
View File

@ -31,9 +31,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) {
'</span>'+ '</span>'+
'</span>' + '</span>' +
'<span class="row-button row-text panel-title" ng-show="panel.title">' + '<span class="panel-text panel-title" ng-show="panel.title">' +
'{{panel.title}}' + '{{panel.title}}' +
'</span>'+ '</span>'+

20
src/app/panels/filtering/module.html
View File

@ -8,23 +8,13 @@
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;
} }
@ -47,7 +37,7 @@
<span ng-show="filterSrv.ids.length == 0"> <span ng-show="filterSrv.ids.length == 0">
<h5>No filters available</h5> <h5>No filters available</h5>
</span> </span>
<div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter filter-{{filterSrv.list[id].mandate}}" ng-class="{'filter-deselected': !filterSrv.list[id].active}"> <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter">
<div> <div>
<strong>{{filterSrv.list[id].type}}</strong> <strong>{{filterSrv.list[id].type}}</strong>
<span ng-show="!filterSrv.list[id].editing && isEditable(filterSrv.list[id])" class="filter-mandate" ng-click="filterSrv.list[id].editing = true"> <span ng-show="!filterSrv.list[id].editing && isEditable(filterSrv.list[id])" class="filter-mandate" ng-click="filterSrv.list[id].editing = true">
@ -57,6 +47,8 @@
{{filterSrv.list[id].mandate}} {{filterSrv.list[id].mandate}}
</span> </span>
<i ng-class="getFilterClass(filterSrv.list[id])" class="icon-circle"></i>
<span ng-show="filterSrv.list[id].editing"> <span ng-show="filterSrv.list[id].editing">
<select class="input-small" ng-model="filterSrv.list[id].mandate" ng-options="f for f in ['must','mustNot','either']"></select> <select class="input-small" ng-model="filterSrv.list[id].mandate" ng-options="f for f in ['must','mustNot','either']"></select>
</span> </span>
@ -85,6 +77,6 @@
</div> </div>
</form> </form>
</div> </div>
<i class="link icon-plus-sign" ng-click="add()" bs-tooltip="'Add a query filter'" data-placement="right"></i> <i class="pointer icon-plus-sign" ng-click="add()" bs-tooltip="'Add a query filter'" data-placement="right"></i>
</div> </div>
</div> </div>

18
src/app/panels/filtering/module.js
View File

@ -67,6 +67,24 @@ function (angular, app, _) {
return !_.contains(['type','id','alias','mandate','active','editing'],key); return !_.contains(['type','id','alias','mandate','active','editing'],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)) {

2
src/app/panels/table/module.js
View File

@ -185,6 +185,8 @@ function (angular, app, _, kbn, moment) {
}); });
}; };
$scope.toggle_micropanel = function(field,groups) { $scope.toggle_micropanel = function(field,groups) {
var docs = _.map($scope.data,function(_d){return _d.kibana._source;}); var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
var topFieldValues = kbn.top_field_values(docs,field,10,groups); var topFieldValues = kbn.top_field_values(docs,field,10,groups);

8
src/app/panels/terms/module.js
View File

@ -231,6 +231,14 @@ function (angular, app, _, $, kbn) {
restrict: 'A', restrict: 'A',
link: function(scope, elem) { link: function(scope, elem) {
scope.$on('$destroy', function() {
console.log('destroy');
if($tooltip) {
console.log('destroyed tooltip');
$tooltip.remove();
}
});
// Receive render events // Receive render events
scope.$on('render',function(){ scope.$on('render',function(){
render_panel(); render_panel();

26
src/app/panels/timepicker/editor.html
View File

@ -1,14 +1,16 @@
<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>

2
src/app/partials/dashLoader.html
View File

@ -68,7 +68,7 @@
<li ng-show="dashboard.current.loader.save_elasticsearch"> <li ng-show="dashboard.current.loader.save_elasticsearch">
<form class="input-prepend nomargin"> <form class="input-prepend nomargin">
<button style="margin-top:-1px" class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button> <button class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
<input class='input-medium' ng-model="dashboard.current.title" type="text" ng-model="elasticsearch.title"/> <input class='input-medium' ng-model="dashboard.current.title" type="text" ng-model="elasticsearch.title"/>
</form> </form>
</li> </li>

41
src/app/partials/dashboard.html
View File

@ -1,15 +1,16 @@
<!-- 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 nav-shadow" ></div>
<div class="container-fluid main"> <div class="container-fluid main">
<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%">
@ -18,33 +19,29 @@
<div class="row-control"> <div class="row-control">
<div class="row-fluid" style="padding:0px;margin:0px;position:relative;"> <div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
<div class="row-close span12" ng-show="row.collapse" data-placement="bottom" > <div class="row-close shadow span12" ng-show="row.collapse" data-placement="bottom" >
<span class="row-button" bs-modal="'app/partials/roweditor.html'" class="pointer"> <span class="row-button bgInverse" 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 bgInverse' 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 bgWarning'>
<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> <br>
</span> </div>
<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>
</span>
</div> </div>
</div> </div>

2
src/app/partials/dasheditor.html
View File

@ -79,7 +79,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>

4
src/app/services/querySrv.js
View File

@ -243,7 +243,9 @@ function (angular, _, config, kbn) {
var idCount = dashboard.current.services.query.ids.length; var idCount = dashboard.current.services.query.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.query.ids).sort(); var ids = _.sortBy(_.clone(dashboard.current.services.query.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

4
src/css/bootstrap.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/css/bootstrap.light.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
src/index.html
View File

@ -23,6 +23,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">

698
src/vendor/bootstrap/less/bootswatch.dark.less vendored
View File

@ -1,35 +1,47 @@
// Slate 2.3.2 // Cyborg 2.3.2
// Bootswatch // Bootswatch
// ----------------------------------------------------- // -----------------------------------------------------
// KIBANA
.panelCont {
outline: 1px solid darken(@bodyBackground, 10%);
border-top: 1px solid lighten(@bodyBackground, 10%);
padding: 0px 10px 10px 10px;
background: darken(@bodyBackground, 3%);
margin: 0px;
}
// TYPOGRAPHY // TYPOGRAPHY
// ----------------------------------------------------- // -----------------------------------------------------
h1, h2, h3, h4, h5, h6 { @import url('//fonts.googleapis.com/css?family=Droid+Sans:400,700');
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
label, input, button, select, textarea,
.navbar .search-query:-moz-placeholder,
.navbar .search-query::-webkit-input-placeholder {
font-family: 'Droid Sans', sans-serif;
color: @gray;
} }
code, pre { code, pre {
background-color: #F7F7F7; background-color: @grayLighter;
border: 1px solid darken(@grayDarker, 5%); }
text-shadow: none;
blockquote {
border-left: 5px solid @grayDark;
&.pull-right {
border-right: 5px solid @grayDark;
}
} }
// SCAFFOLDING // SCAFFOLDING
// ----------------------------------------------------- // -----------------------------------------------------
legend, .page-header { html {
border-bottom: 1px solid @hrBorder; min-height: 100%;
}
body {
min-height: 100%;
//#gradient > .vertical (@bodyBackground, #252A30);
//background: @bodyBackground;
background: @bodyBackground url('../img/cubes.png') repeat right top;
}
.page-header {
border-bottom: 1px solid @grayDark
} }
hr { hr {
@ -42,73 +54,60 @@ hr {
.navbar { .navbar {
.navbar-inner { .navbar-inner {
#gradient > .vertical-three-colors(@grayDark, darken(@bodyBackground,3%), 70%, darken(@bodyBackground,3%)); .border-radius(0);
.box-shadow(none);
border-bottom: 0px solid @grayDark;
} }
.brand { .brand {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); padding: 15px 20px 15px;
border-right: none; color: @grayLighter;
font-weight: normal;
text-shadow: none;
}
.nav > li > a {
padding: 15px 15px 14px;
border-bottom: 1px solid transparent;
}
.nav > li > a:hover,
.nav > .active > a,
.nav > .active > a:hover {
border-bottom: 1px solid @blue;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
} }
.navbar-text { .navbar-text {
padding: 0 15px; margin-bottom: 1px;
font-weight: bold; padding: 15px 15px 14px;
} line-height: inherit;
.nav > li > a {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.1);
&:hover {
#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
}
.nav > li.active > a,
.nav > li.active > a:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(lighten(@grayDarker, 2%), lighten(@grayDark, 2%), 0deg);
border-right: 1px solid darken(@gray, 15%);
}
.navbar-search .search-query {
border: 1px solid darken(@gray, 15%);
}
.btn,
.btn-group {
margin: 4px 0;
} }
.divider-vertical { .divider-vertical {
background-color: transparent; margin: 0;
border-right: none; border-left: 1px solid @grayDark;
border-right-width: 0;
} }
.dropdown-menu::after { .search-query,
border-bottom: 6px solid @grayDark; .search-query:focus,
.search-query.focused {
.border-radius(1px);
background-color: @grayDark;
line-height: normal;
color: @grayLight;
text-shadow: none;
.placeholder(@gray);
} }
&-inverse { &-inverse {
.navbar-inner {
#gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
}
.nav li > a {
background-image: none;
background-color: transparent;
}
.nav li > a:hover,
.nav li.active > a,
.nav li.active > a:hover {
#gradient > .directional(darken(@grayDarker, 10%), darken(@grayDarker, 5%), 280deg);
}
} }
} }
@ -116,155 +115,202 @@ hr {
.navbar .nav-collapse { .navbar .nav-collapse {
.nav li > a, .nav li > a {
.nav li > a:hover, border: none;
.nav .active > a,
.nav .active > a:hover {
.box-shadow(none);
color: @grayLighter; color: @grayLighter;
border: 1px solid transparent; font-weight: normal;
background-color: transparent; text-shadow: none;
background-image: none;
&:hover {
border: none;
background-color: @blue;
}
} }
.nav li > a:hover, .nav .active > a {
.nav .active > a:hover { border: none;
background-color: @grayDarker; background-color: @blue;
}
.dropdown-menu a:hover {
background-color: @blue;
} }
.navbar-form, .navbar-form,
.navbar-search { .navbar-search {
border-color: transparent; border-top: none;
.box-shadow(none); border-bottom: none;
} }
.nav-header { .nav-header {
color: @grayLight; color: rgba(128, 128, 128, 0.6);
} }
} }
.navbar-inverse .nav-collapse { .navbar-inverse .nav-collapse {
.nav li > a:hover, .nav li > a:hover {
.nav .active > a:hover { background-color: #111;
background-color: @grayDarker !important;
} }
}
}
.nav-tabs { .nav .active > a {
.active > a, .active a:hover { background-color: #111;
border-bottom: 1px solid darken(@grayDark, 5%);; }
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: #111;
}
} }
} }
div.subnav { div.subnav {
margin: 0 1px; margin: 0 1px;
//#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); background-color: @grayDarker;
border: 1px solid transparent; background-image: none;
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); border: none;
border-bottom: 1px solid @grayDark;
.nav > li > a {
color: @grayLighter;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-right: 1px solid darken(@gray, 15%);
border-left: 1px solid @gray;
&:hover {
color: @grayLighter;
background-color: @grayDark;
//#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
}
.nav > li.active > a,
.nav > li.active > a:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
border-right: 1px solid darken(@gray, 15%);
}
.nav > li > a,
.nav > li:first-child > a, .nav > li:first-child > a,
.nav > li:first-child > a:hover { .nav > li:first-child > a:hover {
border-left: 1px solid transparent; padding: 11px 12px;
border: none;
background-color: @grayDarker;
color: @grayLight;
} }
.nav > li.active:last-child > a, .nav > li > a:hover,
.nav > li:last-child > a:hover { .nav > li.active > a,
border-right: 1px solid darken(@gray, 15%); .nav > li.active > a:hover,
.nav > li:first-child > a:hover {
padding: 11px 12px;
background: transparent;
border: none;
border-bottom: 1px solid @blue;
color: @white;
} }
.open .dropdown-toggle { .nav li.nav-header {
border-right: 1px solid darken(@gray, 15%); text-shadow: none;
border-left: 1px solid @gray;
} }
&.subnav-fixed {
&-fixed {
top: @navbarHeight; top: @navbarHeight;
margin: 0; margin: 0;
.box-shadow(none);
.nav > li.active:first-child > a,
.nav > li:first-child > a:hover {
border-left: 1px solid darken(@gray, 15%);
}
} }
} }
// NAV // NAV
// ----------------------------------------------------- // -----------------------------------------------------
.nav { .nav-tabs {
.nav-header { border-bottom: 1px solid @grayDark;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}
& > li > a { & > li > a {
//#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); .border-radius(0);
.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;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
} }
li > a:hover,
li.active > a, li.active > a,
li.active > a:hover { li.active > a:hover {
background-color: transparent; border-color: transparent;
background-color: @blue;
color: @white; color: @white;
} }
& > li.disabled > a, li.disabled > a {
& > li.disabled > a:hover { color: @textColor;
color: @gray; }
.open .dropdown-toggle {
background-color: #060606;
border-color: transparent;
}
}
.nav-pills {
li > a:hover {
background-color: @blue;
color: @white;
}
li.disabled > a {
color: @textColor;
}
.open .dropdown-toggle {
background-color: #060606;
}
.dropdown-menu li > a:hover {
border: none;
}
}
.nav-list {
li > a {
text-shadow: none;
} }
li > a:hover { li > a:hover {
background-color: transparent; background-color: @blue;
color: @grayLighter; color: @white;
} }
.nav-header {
text-shadow: none;
}
.divider {
background-color: transparent;
border-bottom: 1px solid @grayDark;
}
}
.nav-stacked {
li > a {
border: 1px solid @grayDark !important;
}
li > a:hover,
li.active > a {
background-color: @blue;
color: @white;
}
}
.tabbable {
.nav-tabs,
.nav-tabs li.active > a {
border-color: @grayDark;
}
} }
.breadcrumb { .breadcrumb {
border: 1px solid transparent;
#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)');
a { background-color: transparent;
color: @grayLighter; background-image: none;
font-weight: bold; border-width: 0;
} .box-shadow(none);
font-size: 14px;
li { li {
color: @grayLight; text-shadow: none;
font-weight: bold; }
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
li > a {
color: @blue;
text-shadow: none;
} }
} }
@ -274,43 +320,17 @@ div.subnav {
.box-shadow(none); .box-shadow(none);
} }
ul > li > a, ul > li > a:hover,
ul > li > span {
border-left: 1px solid @gray;
border-right: 1px solid darken(@gray, 15%);
border-top: none;
border-bottom: none;
#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)');
color: @grayLighter;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
&:hover {
#gradient > .directional(@grayDarker, @grayDark, 280deg);
border-left: 1px solid transparent;
}
}
ul > .active > a, ul > .active > a,
ul > .active > a:hover, ul > .active > span {
ul > .active > span, // color: @white;
ul > .active > span:hover {
color: @grayLighter;
background-color: @grayDark;
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
border-left: 1px solid transparent;
} }
ul > .disabled > a, ul > .disabled > a,
ul > .disabled > a:hover, ul > .disabled > a:hover,
ul > .disabled > span, ul > .disabled > span,
ul > .disabled > span:hover { ul > .disabled > span:hover {
border-left: 1px solid @gray; background-color: rgba(0, 0, 0, 0.2);
border-right: 1px solid darken(@gray, 15%);
border-top: none;
border-bottom: none;
#gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
} }
} }
@ -318,67 +338,108 @@ div.subnav {
li > a, li > a,
li > span { li > span {
background-color: @bodyBackground;
border: 1px solid transparent; border: none;
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
&:hover { &:hover {
#gradient > .directional(@grayDarker, @grayDark, 280deg); background-color: @blue;
border: 1px solid transparent;
} }
} }
.disabled a, .disabled a,
.disabled a:hover { .disabled a:hover {
background-color: transparent; background-color: @bodyBackground;
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
} }
} }
// BUTTONS // BUTTONS
// ----------------------------------------------------- // -----------------------------------------------------
.btn { .btn {
.buttonBackground(@gray, darken(@gray, 10%)); padding: 5px 12px;
.border-radius(3px); background-image: none;
border: 1px solid @grayDarker; .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, .btn:hover { .btn-large {
color: @white; padding: 22px 30px;
font-weight: bold;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
} }
.btn-primary { .btn-small {
.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20)); padding: 2px 10px;
color: @grayDark;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
} }
.btn-warning { .btn-mini {
.buttonBackground(lighten(@orange, 15%), @orange); padding: 2px 6px;
} }
.btn-danger { .btn-group {
.buttonBackground(@red, #bd362f);
& > .btn:first-child,
& > .btn:last-child,
& > .dropdown-toggle {
.border-radius(0);
}
& > .btn + .dropdown-toggle {
.box-shadow(none);
}
} }
.btn-success {
.buttonBackground(@green, #51a351); // FORMS
// -----------------------------------------------------
input, textarea, select {
border-width: 2px;
.border-radius(1px);
} }
.btn-info { select, textarea,
.buttonBackground(@blue, #2f96b4); 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"], .uneditable-input {
color: @grayLight;
} }
.btn-inverse { input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
.buttonBackground(@gray, @grayDarker); border-color: #444;
} }
.caret { input:focus,
border-top-color: @white; textarea:focus,
input.focused,
textarea.focused {
border-color: rgba(82,168,236,1);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none); // override for file inputs
.tab-focus();
}
legend, label {
color: @textColor;
border-bottom: 0px solid #222;
}
.form-actions {
border-top: 1px solid #222;
} }
// TABLES // TABLES
@ -386,170 +447,131 @@ div.subnav {
.table { .table {
.border-radius(1px);
tbody tr.success td { tbody tr.success td {
background-color: @successText; background-color: @green;
color: @white;
} }
tbody tr.error td { tbody tr.error td {
background-color: @errorText; background-color: @red;
color: @white;
} }
tbody tr.info td { tbody tr.info td {
background-color: @infoText; background-color: @blue;
color: @white;
} }
}
// FORMS
// -----------------------------------------------------
label, input, button, select, textarea, legend {
color: @textColor;
}
legend, label {
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.input-prepend .add-on,
.input-append .add-on {
vertical-align: top;
background-color: @gray;
border-top: 1px solid @grayLight;
border-left: 1px solid @grayLight;
border-bottom: 1px solid @grayDark;
border-right: 1px solid @grayDark;
text-shadow: none;
}
.input-append .btn,
.input-prepend .btn {
margin-top: -1px;
padding: 5px 14px;
}
.uneditable-input,
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
color: @gray;
background: @grayDarker;
}
.form-actions {
border-top: none;
} }
// DROPDOWNS // DROPDOWNS
// ----------------------------------------------------- // -----------------------------------------------------
.dropdown-menu { .dropdown-menu {
.box-shadow(0 5px 5px rgba(0, 0, 0, 0.2)); .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.dropdown.open .dropdown-toggle {
background-color: @grayDark;
color: @grayLighter;
}
.dropdown-submenu > a::after {
border-left-color: @white;
} }
// ALERTS, LABELS, BADGES // ALERTS, LABELS, BADGES
// ----------------------------------------------------- // -----------------------------------------------------
.label, .alert { .alert,
color: rgba(255, 255, 255, 0.9); .alert .alert-heading,
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); .alert-success,
.box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3)); .alert-success .alert-heading,
.alert-danger,
.alert-error,
.alert-danger .alert-heading,
.alert-error .alert-heading,
.alert-info,
.alert-info .alert-heading {
color: @grayLighter;
text-shadow: none;
border: none;
} }
.alert { .label {
background-color: @orange; color: @grayLighter;
border-color: @orange;
.alert-heading {
color: rgba(255, 255, 255, 0.9);
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
}
} }
.alert-success { .label, .alert { background-color: darken(@gray, 20%); }
background-color: @successText;
border-color: @successText;
}
.alert-error { .label:hover { background-color: darken(@gray, 30%); }
background-color: @errorText;
border-color: @errorText;
}
.alert-info { .label-important,
background-color: @infoText; .alert-danger,
border-color: @infoText; .alert-error { background-color: @red; }
}
.label-important:hover { background-color: darken(@red, 10%); }
.label-warning { background-color: darken(@orange, 10%); }
.label-warning:hover { background-color: darken(@orange, 20%); }
.label-success, .alert-success { background-color: darken(@green, 3%); }
.label-success:hover { background-color: darken(@green, 13%); }
.label-info, .alert-info { background-color: darken(@blueDark, 10%); }
.label-info:hover { background-color: darken(@blueDark, 20%); }
// MISC // MISC
// ----------------------------------------------------- // -----------------------------------------------------
.well, .hero-unit { .well, .hero-unit {
.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5)); .border-radius(1px);
} }
.thumbnail, .well, .hero-unit {
a.thumbnail:hover { border-top: solid 1px lighten(@grayDark, 5%);
border: 1px solid darken(@grayDarker, 5%); .box-shadow(0 2px 4px rgba(0,0,0,.8));
}
.thumbnail {
border-color: @grayDark;
} }
.progress { .progress {
background-color: darken(@grayDarker, 3%); background-color: #060606;
#gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%)); background-image: none;
.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5)); .border-radius(0);
}
.footer {
border-top: 1px solid darken(@grayDarker, 5%);
p {
color: @textColor;
}
} }
.modal { .modal {
.border-radius(1px);
border-top: solid 1px lighten(@grayDark, 5%);
background-color: @grayDark;
}
background-color: darken(@grayDark, 5%); .modal-header {
border-bottom: 1px solid @grayDark;
}
&-header { .modal-footer {
border-bottom: none; background-color: @grayDark;
} border-top: 1px solid @grayDark;
.border-radius(0 0 6px 6px);
.box-shadow(none);
}
&-body { .footer {
border-bottom: 1px solid #1C1E22; border-top: 1px solid @grayDark;
}
&-footer {
border-top: none;
background-color: @grayDarker;
.box-shadow(none);
}
} }
// MEDIA QUERIES // MEDIA QUERIES
// ----------------------------------------------------- // -----------------------------------------------------
@media (max-width: 979px) { @media (max-width: 768px) {
.navbar .brand { div.subnav .nav > li + li > a,
border-right: none; div.subnav .nav > li:first-child > a {
border-top: 1px solid @grayDark;
border-left: 1px solid @grayDark;
}
.subnav .nav > li + li > a:hover,
.subnav .nav > li:first-child > a:hover {
border-bottom: 0;
background-color: @blue;
} }
} }
@media (max-width: 768px) {
div.subnav .nav > li + li > a {
border-top: 1px solid transparent;
}
}

617
src/vendor/bootstrap/less/bootswatch.light.less vendored
View File

@ -1,9 +1,612 @@
// 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; //@import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
background: darken(@bodyBackground, 5%);
margin: 0px; body {
font-weight: 300;
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;
&-success {
background-color: @green;
}
&-important {
background-color: @red;
}
&-info {
background-color: @purple;
}
&-inverse {
background-color: @black;
}
}
// MISC
// -----------------------------------------------------
.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 {
height: 6px;
.border-radius(0);
.box-shadow(none);
background-color: @grayLighter;
background-image: none;
.bar {
//background-color: @blue;
background-image: none;
}
&-info {
background-color: @purple;
}
&-success {
background-color: @green;
}
&-warning {
background-color: @orange;
}
&-danger {
background-color: @red;
}
}
.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
// -----------------------------------------------------

2
src/vendor/bootstrap/less/modals.less vendored
View File

@ -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

137
src/vendor/bootstrap/less/overrides.less vendored
View File

@ -1,6 +1,58 @@
// 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);
}
// KIBANA
.panelCont {
padding: 0px 10px 10px 10px;
background: @kibanaPanelBackground;
box-shadow: 0px 0px 8px rgba(30, 30, 30, 0.75);
margin: 0px;
.border-radius(1);
}
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;
@ -81,55 +133,66 @@ form input.ng-invalid {
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 {
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;
}
.top-row-open {
background: @navbarBackground;
padding: 5px 25px 5px 25px;
}
.shadow {
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
.top-row-close {
padding: 5px 10px;
text-transform: uppercase;
margin: 0px;
text-align: left;
min-height: 16px !important;
line-height: 16px;
}
.nav-shadow {
box-shadow: 0 4px 2px -2px rgba(50, 50, 50, 0.75);
border-bottom: 1px solid lighten(@navbarBackground,20%);
} }
.row-open { .row-open {
text-align: right; text-align: right;
left:-18px; left:-32px;
position: absolute; position: absolute;
font-size: 13pt;
font-weight: 200; font-weight: 200;
} box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
.top-row-open {
background: darken(@bodyBackground, 3%);
padding: 5px 25px 5px 25px;
}
.top-row-close {
outline: 1px solid darken(@bodyBackground, 10%);
border-top: 1px solid lighten(@bodyBackground, 10%);
padding: 0px;
margin: 1px 0px 0px 0px;
text-align: center;
min-height: 16px !important;
line-height: 16px;
background: darken(@bodyBackground, 3%);
}
.row-open i {
font-size: 10pt;
} }
.odd { .odd {
@ -165,11 +228,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 +244,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 +261,6 @@ form input.ng-invalid {
color: @linkColorHover; color: @linkColorHover;
} }
.pointer:hover {
color: @linkColorHover;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
@ -279,7 +339,6 @@ 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;
} }

189
src/vendor/bootstrap/less/variables.dark.less vendored
View File

@ -1,8 +1,3 @@
// Slate 2.3.2
// Variables
// --------------------------------------------------
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------
@ -10,35 +5,40 @@
// Grays // Grays
// ------------------------- // -------------------------
@black: #000; @black: #000;
@grayDarker: #272B30; @gray: #bbb;
@grayDark: #3A3F44; @grayDark: #333;
@gray: #52575C; @grayDarker: #090909;
@grayLight: #7A8288;
@grayLighter: #BBBFC2; @grayLight: #ADAFAE;
@grayLighter: #eee;
@white: #fff; @white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
@blue: #5bc0de; @blue: #33B5E5;
@blueDark: #108CBB; @blueDark: #0099CC;
@green: #62c462; @green: #669900;
@red: #ee5f5b; @red: #CC0000;
@yellow: #F6D30D; @yellow: #ECBB13;
@orange: #f89406; @orange: #FF8800;
@pink: #c3325f; @pink: #FF4444;
@purple: #7a43b6; @purple: #9933CC;
// Kibana Variables
// -------------------------
@kibanaPanelBackground: @grayDarker;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: @grayDarker; @bodyBackground: lighten(@grayDark,20%);
@textColor: #C8C8C8; @textColor: @gray;
// Links // Links
// ------------------------- // -------------------------
@linkColor: @white; @linkColor: darken(@white,5%);
@linkColorHover: @white; @linkColorHover: @white;
@ -46,17 +46,17 @@
// ------------------------- // -------------------------
@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: Monaco, Menlo, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @baseFontSize: 14px;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
@baseLineHeight: 21px; @baseLineHeight: 20px;
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold @headingsFontWeight: normal; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor @headingsColor: @white; // empty to use BS default, @textColor
@inputText: @black;
// Component sizing // Component sizing
// ------------------------- // -------------------------
@ -70,66 +70,68 @@
@paddingSmall: 2px 10px; // 26px @paddingSmall: 2px 10px; // 26px
@paddingMini: 0px 6px; // 22px @paddingMini: 0px 6px; // 22px
@baseBorderRadius: 4px; @baseBorderRadius: 3px;
@borderRadiusLarge: 6px; @borderRadiusLarge: 4px;
@borderRadiusSmall: 3px; @borderRadiusSmall: 2px;
// Tables // Tables
// ------------------------- // -------------------------
@tableBackground: transparent; // overall background-color @tableBackground: transparent; // overall background-color
@tableBackgroundAccent: darken(@grayDark, 5%); // for striping @tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping
@tableBackgroundHover: @grayDark; // for hover @tableBackgroundHover: @grayDark; // for hover
@tableBorder: lighten(@grayDark, 2%); // table and cell border @tableBorder: @grayDark; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
@btnBackground: @gray; @btnBackground: @gray;
@btnBackgroundHighlight: darken(@gray, 10%); @btnBackgroundHighlight: darken(@gray, 2%);
@btnBorder: darken(@gray, 20%); @btnBorder: rgba(0, 0, 0, 0);
@btnPrimaryBackground: @grayLight; @btnPrimaryBackground: @blueDark;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); @btnPrimaryBackgroundHighlight: darken(@blueDark, 10%);
@btnInfoBackground: @blue; @btnInfoBackground: darken(@gray, 40%);
@btnInfoBackgroundHighlight: #2f96b4; @btnInfoBackgroundHighlight: darken(@gray, 50%);
@btnSuccessBackground: @green; @btnSuccessBackground: lighten(@green, 10%);
@btnSuccessBackgroundHighlight: #51a351; @btnSuccessBackgroundHighlight: @green;
@btnWarningBackground: lighten(@orange, 15%); @btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange; @btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: @red; @btnDangerBackground: lighten(@red, 10%);
@btnDangerBackgroundHighlight: #bd362f; @btnDangerBackgroundHighlight: @red;
@btnInverseBackground: lighten(@purple, 5%);
@btnInverseBackgroundHighlight: @purple;
@btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms // Forms
// ------------------------- // -------------------------
@inputText: @white; @inputBackground: lighten(@grayDark,10%);
@inputBackground: @gray; @inputBorder: lighten(@grayDark,20%);
@inputBorder: @grayLight;
@inputBorderRadius: @baseBorderRadius; @inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: #555;
@formActionsBackground: darken(@grayDarker, 3%); @formActionsBackground: transparent;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdownBackground: @grayDark; @dropdownBackground: @heroUnitBackground;
@dropdownBorder: rgba(0,0,0,.2); @dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: transparent; @dropdownDividerTop: transparent;
@dropdownDividerBottom: darken(@grayDarker, 5%); @dropdownDividerBottom: #222;
@dropdownLinkColor: @grayLight; @dropdownLinkColor: @textColor;
@dropdownLinkColorHover: @white; @dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white; @dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @grayDarker; @dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @grayDarker; @dropdownLinkBackgroundHover: @blue;
@ -143,7 +145,7 @@
// Try to avoid customizing these :) // Try to avoid customizing these :)
@zindexDropdown: 1000; @zindexDropdown: 1000;
@zindexPopover: 1010; @zindexPopover: 1010;
@zindexTooltip: 1030; @zindexTooltip: 1020;
@zindexFixedNavbar: 1030; @zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040; @zindexModalBackdrop: 1040;
@zindexModal: 1050; @zindexModal: 1050;
@ -162,7 +164,7 @@
// Hr border color // Hr border color
// ------------------------- // -------------------------
@hrBorder: darken(@grayDarker, 5%); @hrBorder: @grayDark;
// Horizontal forms & lists // Horizontal forms & lists
@ -172,92 +174,92 @@
// Wells // Wells
// ------------------------- // -------------------------
@wellBackground: darken(@grayDarker, 3%); @wellBackground: #131517;
// Navbar // Navbar
// ------------------------- // -------------------------
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarHeight: 50px;
@navbarBackgroundHighlight: @grayDarker;
@navbarBackground: @grayDarker; @navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarBorder: darken(@navbarBackground, 12%); @navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @textColor; @navbarText: @grayLight;
@navbarLinkColor: @textColor; @navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white; @navbarLinkColorHover: @white;
@navbarLinkColorActive: @navbarLinkColorHover; @navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkBackgroundHover: @grayDark; @navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: @navbarBackground; @navbarLinkBackgroundActive: @navbarBackground;
@navbarBrandColor: @grayLighter; @navbarBrandColor: @navbarLinkColor;
// Inverted navbar // Inverted navbar
@navbarInverseBackground: darken(@grayDarker, 10%); @navbarInverseBackground: #252A30;
@navbarInverseBackgroundHighlight: @grayDarker; @navbarInverseBackgroundHighlight: #252A30;
@navbarInverseBorder: #252525; @navbarInverseBorder: transparent;
@navbarInverseText: @grayLight; @navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight; @navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: @white; @navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; @navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent; @navbarInverseLinkBackgroundHover: #242A31;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground; @navbarInverseLinkBackgroundActive: @navbarInverseLinkBackgroundHover;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground; @navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc; @navbarInverseSearchPlaceholderColor: @white;
@navbarInverseBrandColor: @navbarInverseLinkColor; @navbarInverseBrandColor: @navbarInverseLinkColor;
// Pagination // Pagination
// ------------------------- // -------------------------
@paginationBackground: #fff; @paginationBackground: @bodyBackground;
@paginationBorder: #ddd; @paginationBorder: transparent;
@paginationActiveBackground: #f5f5f5; @paginationActiveBackground: @blue;
// Hero unit // Hero unit
// ------------------------- // -------------------------
@heroUnitBackground: darken(@grayDarker, 3%); @heroUnitBackground: @grayDark;
@heroUnitHeadingColor: inherit; @heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit; @heroUnitLeadColor: inherit;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
@warningText: #c09853; @warningText: darken(#c09853, 10%);
@warningBackground: #fcf8e3; @warningBackground: @grayLighter;
@warningBorder: darken(spin(@warningBackground, -10), 3%); @warningBorder: transparent;
@errorText: #b94a48; @errorText: #b94a48;
@errorBackground: #f2dede; @errorBackground: @grayLighter;
@errorBorder: darken(spin(@errorBackground, -10), 3%); @errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847; @successText: #468847;
@successBackground: #dff0d8; @successBackground: @grayLighter;
@successBorder: darken(spin(@successBackground, -10), 5%); @successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad; @infoText: @blueDark;
@infoBackground: #d9edf7; @infoBackground: @grayLighter;
@infoBorder: darken(spin(@infoBackground, -10), 7%); @infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
@tooltipColor: #fff; @tooltipColor: #fff;
@tooltipBackground: @dropdownBackground; @tooltipBackground: @heroUnitBackground;
@tooltipArrowWidth: 5px; @tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground; @tooltipArrowColor: @tooltipBackground;
@popoverBackground: @dropdownBackground; @popoverBackground: @heroUnitBackground;
@popoverArrowWidth: 10px; @popoverArrowWidth: 10px;
@popoverArrowColor: @dropdownBackground; @popoverArrowColor: @popoverBackground;
@popoverTitleBackground: lighten(@popoverBackground, 3%); @popoverTitleBackground: @popoverBackground;
// Special enhancement for popovers // Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterWidth: @popoverArrowWidth + 1;
@ -273,32 +275,29 @@
// ------------------------- // -------------------------
@gridColumns: 12; @gridColumns: 12;
@gridColumnWidth: 60px; @gridColumnWidth: 60px;
@gridGutterWidth: 10px; @gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min // 1200px min
@gridColumnWidth1200: 70px; @gridColumnWidth1200: 70px;
@gridGutterWidth1200: 10px; @gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px // 768px-979px
@gridColumnWidth768: 42px; @gridColumnWidth768: 42px;
@gridGutterWidth768: 10px; @gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid // Fluid grid
// ------------------------- // -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@gridGutterWidth: 10px; @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
//@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min // 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@gridGutterWidth: 10px; @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
//@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px // 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@gridGutterWidth: 10px; @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
//@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

165
src/vendor/bootstrap/less/variables.light.less vendored
View File

@ -1,4 +1,4 @@
// // Cosmo 2.3.2
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
@ -10,43 +10,46 @@
// Grays // Grays
// ------------------------- // -------------------------
@black: #000; @black: #000;
@grayDarker: #222; @grayDarker: #080808;
@grayDark: #333; @grayDark: #999;
@gray: #555; @gray: #bbb;
@grayLight: #999; @grayLight: #dfdfdf;
@grayLighter: #eee; @grayLighter: #eee;
@white: #fff; @white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
@blue: #049cdb; @blue: #007FFF;
@blueDark: #0064cd; @blueDark: #1F26B6;
@green: #46a546; @green: #3FB618;
@red: #9d261d; @red: #FF0039;
@yellow: #ffc40d; @yellow: #FFA500;
@orange: #f89406; @orange: #FF7518;
@pink: #c3325f; @pink: #E671B8;
@purple: #7a43b6; @purple: #9954BB;
// Kibana Variables
// -------------------------
@kibanaPanelBackground: @white;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: #ffffff; @bodyBackground: @white;
@textColor: @grayDark; @textColor: #555;
// Links // Links
// ------------------------- // -------------------------
@linkColor: #08c; @linkColor: @blue;
@linkColorHover: lighten(@linkColor, 15%); @linkColorHover: darken(@linkColor, 10%);
// Typography // Typography
// ------------------------- // -------------------------
@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: Monaco, Menlo, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @baseFontSize: 14px;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
@ -54,8 +57,8 @@
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold @headingsFontWeight: 300; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor @headingsColor: @grayDarker; // empty to use BS default, @textColor
// Component sizing // Component sizing
@ -66,57 +69,56 @@
@fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px @fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px @paddingLarge: 22px 30px; // 66px
@paddingSmall: 2px 10px; // 26px @paddingSmall: 2px 10px; // 26px
@paddingMini: 0 6px; // 22px @paddingMini: 2px 6px; // 24px
@baseBorderRadius: 4px; @baseBorderRadius: 3px;
@borderRadiusLarge: 6px; @borderRadiusLarge: 4px;
@borderRadiusSmall: 3px; @borderRadiusSmall: 2px;
// Tables // Tables
// ------------------------- // -------------------------
@tableBackground: transparent; // overall background-color @tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping @tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover @tableBackgroundHover: #E8F8FD; // for hover
@tableBorder: #ddd; // table and cell border @tableBorder: #ddd; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
@btnBackground: @white; @btnBackground: @grayLighter;
@btnBackgroundHighlight: darken(@white, 10%); @btnBackgroundHighlight: darken(@grayLighter, 15%);
@btnBorder: #ccc; @btnBorder: #bbb;
@btnPrimaryBackground: @linkColor; @btnPrimaryBackground: lighten(@blue, 5%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnPrimaryBackgroundHighlight: darken(@blue, 5%);
@btnInfoBackground: #5bc0de; @btnInfoBackground: lighten(@purple, 5%);
@btnInfoBackgroundHighlight: #2f96b4; @btnInfoBackgroundHighlight: darken(@purple, 5%);
@btnSuccessBackground: #62c462; @btnSuccessBackground: lighten(@green, 5%);
@btnSuccessBackgroundHighlight: #51a351; @btnSuccessBackgroundHighlight: darken(@green, 5%);
@btnWarningBackground: lighten(@orange, 15%); @btnWarningBackground: lighten(@orange, 5%);
@btnWarningBackgroundHighlight: @orange; @btnWarningBackgroundHighlight: darken(@orange, 5%);
@btnDangerBackground: #ee5f5b; @btnDangerBackground: lighten(@red, 5%);
@btnDangerBackgroundHighlight: #bd362f; @btnDangerBackgroundHighlight: darken(@red, 5%);
@btnInverseBackground: #444; @btnInverseBackground: lighten(@black, 5%);
@btnInverseBackgroundHighlight: @grayDarker; @btnInverseBackgroundHighlight: darken(@black, 5%);
// Forms // Forms
// ------------------------- // -------------------------
@inputBackground: @white; @inputBackground: @white;
@inputBorder: #ccc; @inputBorder: @gray;
@inputBorderRadius: @baseBorderRadius; @inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter; @inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5; @formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@inputText: @grayDarker; @inputText: #020202;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@ -129,7 +131,7 @@
@dropdownLinkColorHover: @white; @dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white; @dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundActive: @blue;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
@ -158,7 +160,7 @@
// Input placeholder text color // Input placeholder text color
// ------------------------- // -------------------------
@placeholderText: @grayLight; @placeholderText: @gray;
// Hr border color // Hr border color
@ -173,52 +175,53 @@
// Wells // Wells
// ------------------------- // -------------------------
@wellBackground: #f5f5f5; @wellBackground: @grayLighter;
// Navbar // Navbar
// ------------------------- // -------------------------
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarHeight: 50px;
@navbarBackgroundHighlight: @grayDarker;
@navbarBackground: @grayDarker; @navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark; @navbarBorder: transparent;
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @white; @navbarText: @white;
@navbarLinkColor: @white; @navbarLinkColor: @white;
@navbarLinkColorHover: @white; @navbarLinkColorHover: @gray;
@navbarLinkColorActive: @navbarLinkColorHover; @navbarLinkColorActive: @white;
@navbarLinkBackgroundHover: @grayDark; @navbarLinkBackgroundHover: rgba(0, 0, 0, 0.05);
@navbarLinkBackgroundActive: @navbarBackground; @navbarLinkBackgroundActive: transparent;
@navbarBrandColor: @grayLighter; @navbarBrandColor: @navbarLinkColor;
// Inverted navbar // Inverted navbar
@navbarInverseBackground: #111111; @navbarInverseBackground: @blue;
@navbarInverseBackgroundHighlight: #222222; @navbarInverseBackgroundHighlight: @navbarInverseBackground;
@navbarInverseBorder: #252525; @navbarInverseBorder: transparent;
@navbarInverseText: @grayLight; @navbarInverseText: @white;
@navbarInverseLinkColor: @grayLight; @navbarInverseLinkColor: @white;
@navbarInverseLinkColorHover: @white; @navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; @navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent; @navbarInverseLinkBackgroundHover: rgba(0, 0, 0, 0.05);
@navbarInverseLinkBackgroundActive: @navbarInverseBackground; @navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground; @navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc; @navbarInverseSearchPlaceholderColor: @grayDark;
@navbarInverseBrandColor: @navbarInverseLinkColor; @navbarInverseBrandColor: @navbarInverseLinkColor;
// Pagination // Pagination
// ------------------------- // -------------------------
@paginationBackground: #fff; @paginationBackground: @grayLight;
@paginationBorder: #ddd; @paginationBorder: transparent;
@paginationActiveBackground: #f5f5f5; @paginationActiveBackground: @blue;
// Hero unit // Hero unit
@ -230,21 +233,21 @@
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
@warningText: #c09853; @warningText: @white;
@warningBackground: #fcf8e3; @warningBackground: @orange;
@warningBorder: darken(spin(@warningBackground, -10), 3%); @warningBorder: transparent;
@errorText: #b94a48; @errorText: @white;
@errorBackground: #f2dede; @errorBackground: @red;
@errorBorder: darken(spin(@errorBackground, -10), 3%); @errorBorder: transparent;
@successText: #468847; @successText: @white;
@successBackground: #dff0d8; @successBackground: @green;
@successBorder: darken(spin(@successBackground, -10), 5%); @successBorder: transparent;
@infoText: #3a87ad; @infoText: @white;
@infoBackground: #d9edf7; @infoBackground: @purple;
@infoBorder: darken(spin(@infoBackground, -10), 7%); @infoBorder: transparent;
// Tooltips and popovers // Tooltips and popovers
@ -254,10 +257,10 @@
@tooltipArrowWidth: 5px; @tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground; @tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff; @popoverBackground: @bodyBackground;
@popoverArrowWidth: 10px; @popoverArrowWidth: 15px;
@popoverArrowColor: #fff; @popoverArrowColor: @bodyBackground;
@popoverTitleBackground: darken(@popoverBackground, 3%); @popoverTitleBackground: @bodyBackground;
// Special enhancement for popovers // Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterWidth: @popoverArrowWidth + 1;