even more work on light theme (#77)
This commit is contained in:
Torkel Ödegaard
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
@import "bootstrap.less";
|
||||
@import "bootswatch.dark.less";
|
||||
@import "overrides.less";
|
||||
@import "variables.dark.less";
|
||||
@import "grafana.less";
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
@import "bootstrap.less";
|
||||
@import "bootswatch.light.less";
|
||||
@import "overrides.less";
|
||||
@import "variables.light.less";
|
||||
@import "grafana.less";
|
||||
@@ -0,0 +1,576 @@
|
||||
// Cyborg 2.3.2
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
// TYPOGRAPHY
|
||||
// -----------------------------------------------------
|
||||
|
||||
label, input, button, select, textarea,
|
||||
.navbar .search-query:-moz-placeholder,
|
||||
.navbar .search-query::-webkit-input-placeholder {
|
||||
font-family: 'Droid Sans', sans-serif;
|
||||
color: @gray;
|
||||
}
|
||||
|
||||
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid @grayDark;
|
||||
|
||||
&.pull-right {
|
||||
border-right: 5px solid @grayDark;
|
||||
}
|
||||
}
|
||||
|
||||
// SCAFFOLDING
|
||||
// -----------------------------------------------------
|
||||
|
||||
html {
|
||||
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 {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// NAVBAR
|
||||
// -----------------------------------------------------
|
||||
|
||||
.navbar {
|
||||
|
||||
.navbar-inner {
|
||||
.border-radius(0);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.brand {
|
||||
padding: 15px 20px 15px;
|
||||
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 {
|
||||
margin-bottom: 1px;
|
||||
padding: 15px 15px 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
margin: 0;
|
||||
border-left: 1px solid @grayDark;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.search-query,
|
||||
.search-query:focus,
|
||||
.search-query.focused {
|
||||
.border-radius(1px);
|
||||
background-color: @grayDark;
|
||||
line-height: normal;
|
||||
color: @grayLight;
|
||||
text-shadow: none;
|
||||
.placeholder(@gray);
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @navbarCollapseWidth) {
|
||||
|
||||
.navbar .nav-collapse {
|
||||
|
||||
.nav li > a {
|
||||
border: none;
|
||||
color: @grayLighter;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background-color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
.nav .active > a {
|
||||
border: none;
|
||||
background-color: @blue;
|
||||
}
|
||||
|
||||
.dropdown-menu a:hover {
|
||||
background-color: @blue;
|
||||
}
|
||||
|
||||
.navbar-form,
|
||||
.navbar-search {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
color: rgba(128, 128, 128, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse {
|
||||
|
||||
.nav li > a:hover {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.nav .active > a {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.nav li.dropdown.open > .dropdown-toggle,
|
||||
.nav li.dropdown.active > .dropdown-toggle,
|
||||
.nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background-color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
|
||||
div.subnav {
|
||||
|
||||
margin: 0 1px;
|
||||
background-color: @grayDarker;
|
||||
background-image: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid @grayDark;
|
||||
|
||||
.nav > li > a,
|
||||
.nav > li:first-child > a,
|
||||
.nav > li:first-child > a:hover {
|
||||
padding: 11px 12px;
|
||||
border: none;
|
||||
background-color: @grayDarker;
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
.nav > li > a:hover,
|
||||
.nav > li.active > a,
|
||||
.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;
|
||||
}
|
||||
|
||||
.nav li.nav-header {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
&-fixed {
|
||||
top: @navbarHeight;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// NAV
|
||||
// -----------------------------------------------------
|
||||
|
||||
.nav-tabs {
|
||||
|
||||
border-bottom: 1px solid @grayDark;
|
||||
|
||||
& > 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;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: @blue;
|
||||
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 {
|
||||
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-width: 0;
|
||||
.box-shadow(none);
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: @blue;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
||||
ul {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
ul > li > a:hover,
|
||||
ul > .active > a,
|
||||
ul > .active > span {
|
||||
// color: @white;
|
||||
}
|
||||
|
||||
ul > .disabled > a,
|
||||
ul > .disabled > a:hover,
|
||||
ul > .disabled > span,
|
||||
ul > .disabled > span:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
|
||||
li > a,
|
||||
li > span {
|
||||
background-color: @bodyBackground;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled a,
|
||||
.disabled a:hover {
|
||||
background-color: @bodyBackground;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FORMS
|
||||
// -----------------------------------------------------
|
||||
|
||||
input, textarea, select {
|
||||
border-width: 2px;
|
||||
.border-radius(1px);
|
||||
}
|
||||
|
||||
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"], .uneditable-input {
|
||||
color: @grayLight;
|
||||
}
|
||||
|
||||
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
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
|
||||
// -----------------------------------------------------
|
||||
|
||||
.table {
|
||||
|
||||
.border-radius(1px);
|
||||
|
||||
tbody tr.success td {
|
||||
background-color: @green;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
tbody tr.error td {
|
||||
background-color: @red;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
tbody tr.info td {
|
||||
background-color: @blue;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
// ALERTS, LABELS, BADGES
|
||||
// -----------------------------------------------------
|
||||
|
||||
.alert,
|
||||
.alert .alert-heading,
|
||||
.alert-success,
|
||||
.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;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @grayLighter;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 0;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.label, .alert { background-color: darken(@gray, 20%); }
|
||||
|
||||
.label:hover { background-color: darken(@gray, 30%); }
|
||||
|
||||
.label-important,
|
||||
.alert-danger,
|
||||
.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
|
||||
// -----------------------------------------------------
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.well, .hero-unit {
|
||||
.border-radius(0px);
|
||||
}
|
||||
|
||||
.well, .hero-unit {
|
||||
border-top: solid 1px lighten(@grayDark, 5%);
|
||||
.box-shadow(0 2px 4px rgba(0,0,0,.8));
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
border-color: @grayDark;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: #060606;
|
||||
background-image: none;
|
||||
.border-radius(0);
|
||||
}
|
||||
|
||||
.modal {
|
||||
.border-radius(1px);
|
||||
border-top: solid 1px lighten(@grayDark, 5%);
|
||||
background-color: @grayDark;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid @grayDark;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: @grayDark;
|
||||
border-top: 1px solid @grayDark;
|
||||
.border-radius(0 0 0px 0px);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.popover {
|
||||
.border-radius(0);
|
||||
|
||||
&-title {
|
||||
border-bottom: none;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid @grayDark;
|
||||
}
|
||||
|
||||
// MEDIA QUERIES
|
||||
// -----------------------------------------------------
|
||||
@@ -0,0 +1,574 @@
|
||||
// Cosmo 2.3.2
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
|
||||
// TYPOGRAPHY
|
||||
// -----------------------------------------------------
|
||||
|
||||
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: @navbarLinkColorActive;
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
legend, label {
|
||||
color: @textColor;
|
||||
border-bottom: 0px solid #222;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
|
||||
&-success {
|
||||
background-color: @green;
|
||||
}
|
||||
|
||||
&-important {
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: @purple;
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
background-color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 0;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
// 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);
|
||||
background-color: @bodyBackground;
|
||||
&-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
.border-radius(0);
|
||||
|
||||
&-title {
|
||||
border-bottom: none;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// MEDIA QUERIES
|
||||
// -----------------------------------------------------
|
||||
+17
-21
@@ -113,10 +113,8 @@
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 49px;
|
||||
top: 54px;
|
||||
bottom: 0px;
|
||||
outline: 1px solid #101214;
|
||||
border-top: 1px solid #3e444c;
|
||||
padding: 0 10px;
|
||||
background: @kibanaPanelBackground;
|
||||
}
|
||||
@@ -189,13 +187,14 @@
|
||||
min-height: 250px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
border-top: 1px solid black;
|
||||
background-color: @fullEditBackground;
|
||||
border-top: 1px solid @fullEditBorder;
|
||||
|
||||
.tabs {
|
||||
.nav-tabs {
|
||||
margin: 0;
|
||||
background: @grayDark;
|
||||
border-top: 1px solid #555;
|
||||
background: @fullEditTabsBackground;
|
||||
border-top: 1px solid @fullEditTabsBorder;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@@ -215,26 +214,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Graphite Target Editor */
|
||||
@grafanaTargetColor: #c8c8c8;
|
||||
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
|
||||
|
||||
.grafana-target {
|
||||
}
|
||||
|
||||
.grafana-target-inner-wrapper {
|
||||
//border-top: 1px solid #444444;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grafana-target-inner {
|
||||
border-top: 2px solid black;
|
||||
border-left: 2px solid black;
|
||||
border-right: 2px solid black;
|
||||
background: @grayDark;
|
||||
border-top: 2px solid @grafanaTargetBorder;
|
||||
border-left: 2px solid @grafanaTargetBorder;
|
||||
border-right: 2px solid @grafanaTargetBorder;
|
||||
background: @grafanaTargetBackground;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grafana-target-inner:last-child {
|
||||
border-bottom: 2px solid @grafanaTargetBorder;
|
||||
}
|
||||
|
||||
.grafana-target-onoff {
|
||||
display: inline-block;
|
||||
padding: 5px 7px;
|
||||
@@ -255,7 +251,7 @@
|
||||
padding: 5px 7px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
border-right: 2px solid #050505;
|
||||
border-right: 2px solid @grafanaTargetSegmentBorder;
|
||||
color: @grafanaTargetColor;
|
||||
display: inline-block;
|
||||
|
||||
@@ -267,14 +263,14 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
background: #444;
|
||||
background: @grafanaTargetFuncBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target-function {
|
||||
background: #444;
|
||||
background: @grafanaTargetFuncBackground;
|
||||
&:hover {
|
||||
background: #555;
|
||||
background: @grafanaTargetFuncHightlight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -563,4 +563,59 @@ div.flot-text {
|
||||
.label-tag:hover {
|
||||
background-color: darken(@purple, 10%);
|
||||
color: lighten(@linkColor, 5%);
|
||||
}
|
||||
|
||||
// Filter submenu
|
||||
.filtering-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.filtering-container label {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.filtering-container input[type=checkbox] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-panel-filter {
|
||||
display:inline-block;
|
||||
vertical-align: top;
|
||||
padding: 4px 10px 3px 10px;
|
||||
border-right: 1px solid @submenuBorder;
|
||||
}
|
||||
|
||||
.filter-panel-filter:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.filter-panel-filter ul {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.filter-deselected {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.filter-action {
|
||||
float:right;
|
||||
padding-right: 2px;
|
||||
margin-bottom: 0px !important;
|
||||
margin-left: 0px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.add-filter-action {
|
||||
padding: 3px 10px 0px 5px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.filter-mandate {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-apply {
|
||||
float:right;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.submenu-controls {
|
||||
background: #292929;
|
||||
background: @submenuBackground;
|
||||
font-size: inherit;
|
||||
label {
|
||||
margin: 0;
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
.submenu-panel {
|
||||
padding: 0 10px 0 17px;
|
||||
border-right: 1px solid #202020;
|
||||
border-right: 1px solid @submenuBorder;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
@@ -29,6 +29,25 @@
|
||||
// -------------------------
|
||||
@kibanaPanelBackground: @grayDarker;
|
||||
|
||||
// Submenu
|
||||
@submenuBackground: #292929;
|
||||
@submenuBorder: #202020;
|
||||
|
||||
// Tabs
|
||||
@fullEditTabsBackground: @grayDark;
|
||||
@fullEditBorder: @black;
|
||||
@fullEditBackground: transparent;
|
||||
@fullEditTabsBorder: #555;
|
||||
|
||||
// Graphite Target Editor
|
||||
@grafanaTargetBorder: @black;
|
||||
@grafanaTargetBackground: @grayDark;
|
||||
@grafanaTargetColor: #c8c8c8;
|
||||
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
|
||||
@grafanaTargetSegmentBorder: #050505;
|
||||
|
||||
@grafanaTargetFuncBackground: #444;
|
||||
@grafanaTargetFuncHightlight: #555;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
@black: #000;
|
||||
@grayDarker: lighten(#000, 13.5%); // #222
|
||||
@grayDark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@grayLight: lighten(#000, 60%); // #999
|
||||
@grayLighter: lighten(#000, 93.5%); // #eee
|
||||
@white: #fff;
|
||||
@@ -33,6 +33,26 @@
|
||||
// -------------------------
|
||||
@kibanaPanelBackground: @white;
|
||||
|
||||
// Submenu
|
||||
@submenuBackground: rgb(218, 217, 217);
|
||||
@submenuBorder: @white;
|
||||
|
||||
// Tabs
|
||||
@fullEditTabsBackground: @white;
|
||||
@fullEditBorder: @white;
|
||||
@fullEditBackground: @navbarBackground;
|
||||
@fullEditTabsBorder: @white;
|
||||
|
||||
// Graphite Target Editor
|
||||
@grafanaTargetBorder: @submenuBackground;
|
||||
@grafanaTargetBackground: @white;
|
||||
@grafanaTargetColor: @textColor;
|
||||
@grafanaTargetColorHide: lighten(@textColor, 25%);
|
||||
@grafanaTargetSegmentBorder: @submenuBackground;
|
||||
|
||||
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
|
||||
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@bodyBackground: @grayLighter;
|
||||
@@ -113,7 +133,7 @@
|
||||
// Forms
|
||||
// -------------------------
|
||||
@inputBackground: @white;
|
||||
@inputBorder: @gray;
|
||||
@inputBorder: @grayLight;
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputDisabledBackground: @grayLighter;
|
||||
@formActionsBackground: #f5f5f5;
|
||||
|
||||
Reference in New Issue
Block a user