mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(css): migrated from less to saas
This commit is contained in:
Torkel Ödegaard
@@ -1,28 +0,0 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: @baseFontFamily;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @textColor;
|
||||
background-color: @bodyBackground;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
|
||||
a {
|
||||
color: @linkColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: @linkColorHover;
|
||||
}
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
//
|
||||
// Code (inline and blocK)
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Inline and block code styles
|
||||
code,
|
||||
pre {
|
||||
.font-family-monospace();
|
||||
font-size: @baseFontSize - 2;
|
||||
background-color: @codeTagBackground;
|
||||
color: @textColor;
|
||||
border: 1px solid darken(@codeTagBackground, 15%);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
color: #d14;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
font-size: @baseFontSize - 1; // 14px to 13px
|
||||
line-height: @baseLineHeight;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
// Make prettyprint styles more spaced out for readability
|
||||
&.prettyprint {
|
||||
margin-bottom: @baseLineHeight;
|
||||
}
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,168 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'grafana-icons';
|
||||
src: url('../fonts/grafana-icons.eot?h6rv8b');
|
||||
src: url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'),
|
||||
url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'),
|
||||
url('../fonts/grafana-icons.woff?h6rv8b') format('woff'),
|
||||
url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.icon-gf {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'grafana-icons' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-gf-raintank_wordmark:before {
|
||||
content: "\e600";
|
||||
}
|
||||
.icon-gf-raintank_icn:before {
|
||||
content: "\e601";
|
||||
}
|
||||
.icon-gf-raintank_r-icn:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-gf-check-alt:before {
|
||||
content: "\e603";
|
||||
}
|
||||
.icon-gf-check:before {
|
||||
content: "\e604";
|
||||
}
|
||||
.icon-gf-collector:before {
|
||||
content: "\e605";
|
||||
}
|
||||
.icon-gf-dashboard:before {
|
||||
content: "\e606";
|
||||
}
|
||||
.icon-gf-panel:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-gf-datasources:before {
|
||||
content: "\e607";
|
||||
}
|
||||
.icon-gf-endpoint-tiny:before {
|
||||
content: "\e608";
|
||||
}
|
||||
.icon-gf-endpoint:before {
|
||||
content: "\e609";
|
||||
}
|
||||
.icon-gf-filter:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
.icon-gf-status:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
.icon-gf-monitoring:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
.icon-gf-monitoring-tiny:before {
|
||||
content: "\e620";
|
||||
}
|
||||
.icon-gf-jump-to-dashboard:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
.icon-gf-warn:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
.icon-gf-nodata:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
.icon-gf-critical:before {
|
||||
content: "\e610";
|
||||
}
|
||||
.icon-gf-online:before {
|
||||
content: "\e611";
|
||||
}
|
||||
.icon-gf-event-error:before {
|
||||
content: "\e623";
|
||||
}
|
||||
.icon-gf-event:before {
|
||||
content: "\e624";
|
||||
}
|
||||
.icon-gf-private-collector:before {
|
||||
content: "\e612";
|
||||
}
|
||||
.icon-gf-alert:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
.icon-gf-alert-disabled:before {
|
||||
content: "\e621";
|
||||
}
|
||||
.icon-gf-refresh:before {
|
||||
content: "\e613";
|
||||
}
|
||||
.icon-gf-save:before {
|
||||
content: "\e614";
|
||||
}
|
||||
.icon-gf-settings:before {
|
||||
content: "\e615";
|
||||
}
|
||||
.icon-gf-share:before {
|
||||
content: "\e616";
|
||||
}
|
||||
.icon-gf-star:before {
|
||||
content: "\e617";
|
||||
}
|
||||
.icon-gf-search:before {
|
||||
content: "\e618";
|
||||
}
|
||||
.icon-gf-tag-add:before {
|
||||
content: "\e619";
|
||||
}
|
||||
.icon-gf-tag-remove:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
.icon-gf-video:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
.icon-gf-bulk_action:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
.icon-gf-users:before {
|
||||
content: "\e622";
|
||||
}
|
||||
.icon-gf-globe:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
.icon-gf-snapshot:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
.icon-gf-play-grafana-icon:before {
|
||||
content: "\e629";
|
||||
}
|
||||
.icon-gf-grafana-icon:before {
|
||||
content: "\e625";
|
||||
}
|
||||
.icon-gf-email:before {
|
||||
content: "\e628";
|
||||
}
|
||||
.icon-gf-stopwatch:before {
|
||||
content: "\e626";
|
||||
}
|
||||
.icon-gf-skull:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-gf-probe:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-gf-apps:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-gf-litmus:before {
|
||||
content: "\e627";
|
||||
}
|
||||
.icon-gf-grafana_wordmark:before {
|
||||
content: "\e903";
|
||||
}
|
||||
|
||||
@@ -1,294 +0,0 @@
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// GENERAL STYLES
|
||||
// --------------
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin: 0 0 @baseLineHeight;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: @baseFontSize * 1.5;
|
||||
line-height: @baseLineHeight * 2;
|
||||
color: @grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: @baseLineHeight * .75;
|
||||
color: @grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
// Set font for forms
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
.font-shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
}
|
||||
|
||||
// Identify controls by their labels
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Form controls
|
||||
// -------------------------
|
||||
|
||||
// Shared size and type resets
|
||||
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 {
|
||||
display: inline-block;
|
||||
height: @baseLineHeight;
|
||||
padding: 4px 6px;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @inputText;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 206px; // plus 12px padding and 2px border
|
||||
}
|
||||
// Reset height since textareas have rows
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Everything else
|
||||
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 {
|
||||
background-color: @inputBackground;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
.transition(~"border linear .2s, box-shadow linear .2s");
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
border-color: rgba(82,168,236, .8);
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
||||
}
|
||||
}
|
||||
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Reset width of input images, buttons, radios, checkboxes
|
||||
input[type="file"],
|
||||
input[type="image"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; // Override of generic input selector
|
||||
}
|
||||
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: @inputHeight;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid @inputBorder;
|
||||
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
// -------------------------
|
||||
|
||||
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
|
||||
input,
|
||||
textarea {
|
||||
.placeholder();
|
||||
}
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
// General classes for quick sizes
|
||||
.input-mini { width: 60px; }
|
||||
.input-small { width: 90px; }
|
||||
.input-medium { width: 150px; }
|
||||
.input-large { width: 210px; }
|
||||
.input-xlarge { width: 270px; }
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
// Grid sizes
|
||||
#grid > .input(@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: @inputDisabledBackground;
|
||||
}
|
||||
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
&:focus {
|
||||
border-color: darken(#ee5f5b, 10%);
|
||||
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text].input-fluid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
-moz-box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input[type="checkbox"].cr1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editor-option label.cr1 {
|
||||
display: inline-block;
|
||||
margin: 5px 0 1px 0;
|
||||
}
|
||||
|
||||
label.cr1 {
|
||||
display: inline-block;
|
||||
height: 19px;
|
||||
position: relative;
|
||||
clear: none;
|
||||
text-indent: 2px;
|
||||
margin: 0 0 0px 0;
|
||||
padding: 0 0 0 20px;
|
||||
vertical-align: top;
|
||||
background: url(@checkboxImageUrl) left top no-repeat;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label {
|
||||
background: url(@checkboxImageUrl) 0px -21px no-repeat;
|
||||
}
|
||||
|
||||
.gf-fluid-input {
|
||||
border: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-right: 10px;
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
padding: 5px 6px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 5px 6px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
425
public/less/base/normalize.less
vendored
425
public/less/base/normalize.less
vendored
@@ -1,425 +0,0 @@
|
||||
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
//
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default margin.
|
||||
//
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
// and Firefox.
|
||||
// Correct `block` display not defined for `main` in IE 11.
|
||||
//
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
//
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent modern browsers from displaying `audio` without controls.
|
||||
// Remove excess height in iOS 5 devices.
|
||||
//
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
//
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the gray background color from active links in IE 10.
|
||||
//
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Improve readability of focused elements when they are also in an
|
||||
// active/hover state.
|
||||
//
|
||||
|
||||
a {
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
//
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
//
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in Safari and Chrome.
|
||||
//
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
//
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address styling not present in IE 8/9.
|
||||
//
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
//
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
//
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
//
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Address margin not present in IE 8/9 and Safari.
|
||||
//
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
//
|
||||
// Address differences between Firefox and other browsers.
|
||||
//
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Contain overflow in all browsers.
|
||||
//
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address odd `em`-unit font size rendering in all browsers.
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
//
|
||||
|
||||
//
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; // 1
|
||||
font: inherit; // 2
|
||||
margin: 0; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
//
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
//
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
//
|
||||
|
||||
button,
|
||||
html input[type="button"], // 1
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
|
||||
//
|
||||
// Re-set default cursor for disabled elements.
|
||||
//
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and border in Firefox 4+.
|
||||
//
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
//
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
//
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
//
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
//
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
//
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Define consistent border, margin, and padding.
|
||||
//
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
//
|
||||
|
||||
legend {
|
||||
border: 0; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
//
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
//
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove most spacing between table cells.
|
||||
//
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,243 +0,0 @@
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 @baseLineHeight / 2;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-size: @baseFontSize * 1.5;
|
||||
font-weight: 200;
|
||||
line-height: @baseLineHeight * 1.5;
|
||||
}
|
||||
|
||||
// Emphasis & misc
|
||||
|
||||
// -------------------------
|
||||
|
||||
// Ex: 14px base font * 85% = about 12px
|
||||
.small, small { font-size: 85%; }
|
||||
.large { font-size: 120%; }
|
||||
|
||||
strong { font-weight: bold; }
|
||||
em { font-style: italic; color: @headingsColor; }
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Utility classes
|
||||
.muted { color: @grayLight; }
|
||||
a.muted:hover,
|
||||
a.muted:focus { color: darken(@grayLight, 10%); }
|
||||
|
||||
.text-warning { color: @warningText; }
|
||||
a.text-warning:hover,
|
||||
a.text-warning:focus { color: darken(@warningText, 10%); }
|
||||
|
||||
.text-error { color: @errorText; }
|
||||
a.text-error:hover,
|
||||
a.text-error:focus { color: darken(@errorText, 10%); }
|
||||
|
||||
.text-info { color: @infoText; }
|
||||
a.text-info:hover,
|
||||
a.text-info:focus { color: darken(@infoText, 10%); }
|
||||
|
||||
.text-success { color: @successText; }
|
||||
a.text-success:hover,
|
||||
a.text-success:focus { color: darken(@successText, 10%); }
|
||||
a { cursor: pointer; }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: (@baseLineHeight / 2) 0;
|
||||
font-family: @headingsFontFamily;
|
||||
font-weight: @headingsFontWeight;
|
||||
line-height: @baseLineHeight;
|
||||
color: @headingsColor;
|
||||
text-rendering: optimizelegibility; // Fix the character spacing for headings
|
||||
font-style: @headingsFontStyle;
|
||||
small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 { line-height: @baseLineHeight * 2; }
|
||||
|
||||
h1 { font-size: @baseFontSize * 2.00; } // ~38px
|
||||
h2 { font-size: @baseFontSize * 1.75; } // ~32px
|
||||
h3 { font-size: @baseFontSize * 1.50; } // ~24px
|
||||
h4 { font-size: @baseFontSize * 1.25; } // ~18px
|
||||
h5 { font-size: @baseFontSize; }
|
||||
h6 { font-size: @baseFontSize * 0.85; } // ~12px
|
||||
|
||||
h1 small { font-size: @baseFontSize * 1.75; } // ~24px
|
||||
h2 small { font-size: @baseFontSize * 1.25; } // ~18px
|
||||
h3 small { font-size: @baseFontSize; }
|
||||
h4 small { font-size: @baseFontSize; }
|
||||
|
||||
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: 0 0 @baseLineHeight / 2 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li {
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
|
||||
// Remove default list styles
|
||||
ul.unstyled,
|
||||
ol.unstyled {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Single-line list items
|
||||
ul.inline,
|
||||
ol.inline {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
> li {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-bottom: @baseLineHeight;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: @baseLineHeight / 2;
|
||||
}
|
||||
|
||||
// MISC
|
||||
// ----
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: @baseLineHeight 0;
|
||||
border: 0;
|
||||
border-top: 1px solid @hrBorder;
|
||||
border-bottom: 1px solid @white;
|
||||
}
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted @grayLight;
|
||||
}
|
||||
abbr.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0 0 @baseLineHeight;
|
||||
border-left: 5px solid @grayLighter;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: @baseFontSize * 1.25;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayLight;
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
// Float right with text-align: right
|
||||
&.pull-right {
|
||||
float: right;
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid @grayLighter;
|
||||
border-left: 0;
|
||||
p,
|
||||
small {
|
||||
text-align: right;
|
||||
}
|
||||
small {
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
&:after {
|
||||
content: '\00A0 \2014';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Quotes
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Addresses
|
||||
address {
|
||||
display: block;
|
||||
margin-bottom: @baseLineHeight;
|
||||
font-style: normal;
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
|
||||
a.external-link {
|
||||
color: @blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.link {
|
||||
color: @linkColor;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: @linkColorHover;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
//
|
||||
// Grid system
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Fixed (940px)
|
||||
#grid > .core(@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
// Fluid (940px)
|
||||
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
|
||||
|
||||
// Reset utility classes due to specificity
|
||||
[class*="span"].hide,
|
||||
.row-fluid [class*="span"].hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*="span"].pull-right,
|
||||
.row-fluid [class*="span"].pull-right {
|
||||
float: right;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
//
|
||||
// Responsive: Large desktop and up
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
// Fixed grid
|
||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
|
||||
|
||||
// Fluid grid
|
||||
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
|
||||
|
||||
// Input grid
|
||||
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
|
||||
|
||||
// Thumbnails
|
||||
.thumbnails {
|
||||
margin-left: -@gridGutterWidth1200;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: @gridGutterWidth1200;
|
||||
}
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,176 +0,0 @@
|
||||
//
|
||||
// Responsive: Landscape phone to desktop/tablet
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
// TYPOGRAPHY
|
||||
// ----------
|
||||
// Reset horizontal dl
|
||||
.dl-horizontal {
|
||||
dt {
|
||||
float: none;
|
||||
clear: none;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// GRID & CONTAINERS
|
||||
// -----------------
|
||||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
// Fluid rows
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
// Undo negative margin on rows and thumbnails
|
||||
.row,
|
||||
.thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
.thumbnails > li {
|
||||
float: none;
|
||||
margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
|
||||
}
|
||||
// Make all grid-sized elements block level again
|
||||
[class*="span"],
|
||||
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
|
||||
.row-fluid [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
.span12,
|
||||
.row-fluid .span12 {
|
||||
width: 100%;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
.row-fluid [class*="offset"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// FORM FIELDS
|
||||
// -----------
|
||||
// Make span* classes full width
|
||||
.input-large,
|
||||
.input-xlarge,
|
||||
.input-xxlarge,
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
.input-block-level();
|
||||
}
|
||||
// But don't let it screw up prepend/append inputs
|
||||
.input-prepend input,
|
||||
.input-append input,
|
||||
.input-prepend input[class*="span"],
|
||||
.input-append input[class*="span"] {
|
||||
display: inline-block; // redeclare so they don't wrap to new lines
|
||||
width: auto;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Modals
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
&.fade { top: -100px; }
|
||||
&.fade.in { top: 20px; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// UP TO LANDSCAPE PHONE
|
||||
// ---------------------
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
// Smooth out the collapsing/expanding nav
|
||||
.nav-collapse {
|
||||
-webkit-transform: translate3d(0, 0, 0); // activate the GPU
|
||||
}
|
||||
|
||||
// Block level the page header small tag for readability
|
||||
.page-header h1 small {
|
||||
display: block;
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
|
||||
// Update checkboxes for iOS
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
// Remove the horizontal form styles
|
||||
.form-horizontal {
|
||||
.control-label {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
// Move the options list down to align with labels
|
||||
.control-list {
|
||||
padding-top: 0; // has to be padding because margin collaspes
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-actions {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Medias
|
||||
// Reset float and spacing to stack
|
||||
.media .pull-left,
|
||||
.media .pull-right {
|
||||
float: none;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
// Remove side margins since we stack instead of indent
|
||||
.media-object {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Modals
|
||||
.modal {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.modal-header .close {
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel-caption {
|
||||
position: static;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
//
|
||||
// Responsive: Tablet to desktop
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
|
||||
// Fixed grid
|
||||
#grid > .core(@gridColumnWidth768, @gridGutterWidth768);
|
||||
|
||||
// Fluid grid
|
||||
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
|
||||
|
||||
// Input grid
|
||||
#grid > .input(@gridColumnWidth768, @gridGutterWidth768);
|
||||
|
||||
// No need to reset .thumbnails here since it's the same @gridGutterWidth
|
||||
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
//
|
||||
// Responsive: Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// IE10 Metro responsive
|
||||
// Required for Windows 8 Metro split-screen snapping with IE10
|
||||
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
|
||||
@-ms-viewport{
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
// Credit: HTML5 Boilerplate
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Visibility utilities
|
||||
|
||||
// For desktops
|
||||
.visible-phone { display: none !important; }
|
||||
.visible-tablet { display: none !important; }
|
||||
.hidden-phone { }
|
||||
.hidden-tablet { }
|
||||
.hidden-desktop { display: none !important; }
|
||||
.visible-desktop { display: inherit !important; }
|
||||
|
||||
// Tablets & small desktops only
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
// Hide everything else
|
||||
.hidden-desktop { display: inherit !important; }
|
||||
.visible-desktop { display: none !important ; }
|
||||
// Show
|
||||
.visible-tablet { display: inherit !important; }
|
||||
// Hide
|
||||
.hidden-tablet { display: none !important; }
|
||||
}
|
||||
|
||||
// Phones only
|
||||
@media (max-width: 767px) {
|
||||
// Hide everything else
|
||||
.hidden-desktop { display: inherit !important; }
|
||||
.visible-desktop { display: none !important; }
|
||||
// Show
|
||||
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
|
||||
// Hide
|
||||
.hidden-phone { display: none !important; }
|
||||
}
|
||||
|
||||
// Print utilities
|
||||
.visible-print { display: none !important; }
|
||||
.hidden-print { }
|
||||
|
||||
@media print {
|
||||
.visible-print { display: inherit !important; }
|
||||
.hidden-print { display: none !important; }
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap Responsive v2.3.2
|
||||
*
|
||||
* Copyright 2013 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world by @mdo and @fat.
|
||||
*/
|
||||
|
||||
|
||||
// Responsive.less
|
||||
// For phone and tablet devices
|
||||
// -------------------------------------------------------------
|
||||
|
||||
|
||||
// REPEAT VARIABLES & MIXINS
|
||||
// -------------------------
|
||||
// Required since we compile the responsive stuff separately
|
||||
|
||||
@import "../mixins/mixins.less";
|
||||
@import "responsive-utilities.less";
|
||||
@import "responsive-1200px-min.less";
|
||||
@import "responsive-768px-979px.less";
|
||||
@import "responsive-767px-max.less";
|
||||
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
//
|
||||
// Alerts
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base styles
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
padding: 8px 35px 13px 14px;
|
||||
margin-bottom: @baseLineHeight;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
background-color: @warningBackground;
|
||||
position: relative;
|
||||
color: @white;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// Alternate styles
|
||||
// -------------------------
|
||||
|
||||
.alert-success {
|
||||
background-color: @successBackground;
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
background-color: @errorBackground;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: @infoBackground;
|
||||
}
|
||||
.alert-warning {
|
||||
background-color: @warningBackground;
|
||||
}
|
||||
|
||||
.page-alert-list {
|
||||
z-index: 8000;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 56px;
|
||||
}
|
||||
|
||||
.alert-close {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
background: @white;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
font-size: 1.1rem;
|
||||
color: @grayDarker;
|
||||
.fa {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: @fontWeightSemi;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Core
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
margin-right: 10px;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
|
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
|
||||
|
||||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Focus state for keyboard and accessibility
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active,
|
||||
&:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
}
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.btn-large {
|
||||
padding: 6px 20px;
|
||||
font-size: @fontSizeLarge;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
font-size: @fontSizeSmall;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 2px 6px;
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
font-size: @fontSizeMini;
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
// -------------------------
|
||||
.btn-primary {
|
||||
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
|
||||
}
|
||||
// Warning appears are orange
|
||||
.btn-warning {
|
||||
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
.btn-info {
|
||||
.buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
|
||||
}
|
||||
// Inverse appears as dark gray
|
||||
.btn-inverse {
|
||||
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight, @btnInverseText);
|
||||
box-shadow: none;
|
||||
border: 1px solid @grafanaTargetFuncHightlight;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
color: @btnText;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
|
||||
.sp-replacer {
|
||||
background: inherit;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sp-container {
|
||||
border-radius: 0;
|
||||
background-color: @heroUnitBackground;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sp-palette-container, .sp-picker-container {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sp-dd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-preview {
|
||||
position: relative;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -1,285 +0,0 @@
|
||||
.template-variable {
|
||||
color: @variable;
|
||||
}
|
||||
|
||||
.grafana-row {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-tab {
|
||||
.dropdown-menu-right {
|
||||
top: 0;
|
||||
left: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.row-tab-button {
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
background: @btnSuccessBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
}
|
||||
|
||||
.row-button {
|
||||
width: 24px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
line-height: 31px;
|
||||
background-color: @blueDark;
|
||||
}
|
||||
|
||||
.row-text {
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
line-height: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.row-close {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: @grafanaPanelBackground;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row-close-buttons {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.row-open {
|
||||
margin-top: 5px;
|
||||
left: -28px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
transition: .10s left;
|
||||
transition-delay: .10s;
|
||||
|
||||
&:hover {
|
||||
left: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.row-control-inner {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.hide-controls {
|
||||
padding: 0;
|
||||
.row-tab {
|
||||
display: none;
|
||||
}
|
||||
.add-row-panel-hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-active {
|
||||
.add-row-panel-hint,
|
||||
.dashnav-refresh-action,
|
||||
.dashnav-zoom-out,
|
||||
.dashnav-action-icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grafana-menu-stop-playlist {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
|
||||
div.flot-text {
|
||||
color: @textColor !important;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel-margin {
|
||||
margin: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-container {
|
||||
background-color: @grafanaPanelBackground;
|
||||
position: relative;
|
||||
border: @grafanaPanelBorder;
|
||||
&:hover {
|
||||
.panel-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.panel-transparent {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 0px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.panel-title-container {
|
||||
min-height: 5px;
|
||||
padding-top: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
border: 0px;
|
||||
font-weight: @fontWeightSemi;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-links-btn {
|
||||
margin-left: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-loading {
|
||||
position:absolute;
|
||||
top: -3px;
|
||||
right: 0px;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
color: @white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 0px 17px 6px 5px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
i {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-error-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
border-left: 31px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-bottom: 27px solid @grafanaPanelBackground;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.panel-fullscreen {
|
||||
.panel-title-container {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-full-edit {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.panel-menu {
|
||||
z-index: 500;
|
||||
position: absolute;
|
||||
background: @grafanaTargetFuncBackground;
|
||||
border: 1px solid black;
|
||||
|
||||
.panel-menu-row {
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid black;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-menu-link, .panel-menu-icon {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.panel-menu-link {
|
||||
display: inline-block;
|
||||
border-right: 1px solid black;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-highlight {
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
|
||||
}
|
||||
|
||||
.on-drag-hover {
|
||||
.panel-container {
|
||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
|
||||
}
|
||||
}
|
||||
|
||||
.panel-drop-zone {
|
||||
display: none;
|
||||
.panel-container {
|
||||
border: 1px solid @grayDark;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-time-info {
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
color: @blue;
|
||||
font-size: 85%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.resize-panel-handle {
|
||||
cursor: se-resize;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
font-family: "grafana-icons";
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
|
||||
border-image-slice: 1;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 1.2rem .2rem .4rem .2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,236 +0,0 @@
|
||||
//
|
||||
// Dropdown menus
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
// The caret makes the toggle a bit too tall in IE7
|
||||
*margin-bottom: -3px;
|
||||
}
|
||||
.dropdown-toggle:active,
|
||||
.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Dropdown arrow/caret
|
||||
// --------------------
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: top;
|
||||
border-top: 4px solid @black;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Place the caret
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
// ----------------------
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: @zindexDropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
float: left;
|
||||
min-width: 140px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; // override default ul
|
||||
list-style: none;
|
||||
background-color: @dropdownBackground;
|
||||
border: 1px solid #ccc; // Fallback for IE7-8
|
||||
border: 1px solid @dropdownBorder;
|
||||
|
||||
// Aligns the dropdown menu to right
|
||||
&.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
> li > a {
|
||||
display: block;
|
||||
padding: 3px 20px 3px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: @baseLineHeight;
|
||||
color: @dropdownLinkColor;
|
||||
white-space: nowrap;
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
color: @linkColorDisabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover/Focus state
|
||||
// -----------
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus,
|
||||
.dropdown-submenu:hover > a,
|
||||
.dropdown-submenu:focus > a {
|
||||
text-decoration: none;
|
||||
color: @dropdownLinkColorHover;
|
||||
background-color: @grafanaListHighlight;
|
||||
}
|
||||
|
||||
// Active state
|
||||
// ------------
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
color: @dropdownLinkColorActive;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: @grafanaListHighlight;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
// --------------
|
||||
// Gray out text and ensure the hover/focus state remains gray
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
.dropdown-menu > .disabled > a:focus {
|
||||
color: @grayLight;
|
||||
}
|
||||
// Nuke hover/focus effects
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
.dropdown-menu > .disabled > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
background-image: none; // Remove CSS gradient
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
// ---------------------------
|
||||
.open {
|
||||
& > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Backdrop to catch body clicks on mobile, etc.
|
||||
// ---------------------------
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: @zindexDropdown - 10;
|
||||
}
|
||||
|
||||
// Right aligned dropdowns
|
||||
// ---------------------------
|
||||
.pull-right > .dropdown-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
// ------------------------------------------------------
|
||||
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
||||
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
||||
.dropup,
|
||||
.navbar-fixed-bottom .dropdown {
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid @black;
|
||||
content: "";
|
||||
}
|
||||
// Different positioning for bottom up menu
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menus
|
||||
// ---------------------------
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
// Default dropdowns
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
.border-radius(0 6px 6px 6px);
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropups
|
||||
.dropup .dropdown-submenu > .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: -2px;
|
||||
.border-radius(5px 5px 5px 0);
|
||||
}
|
||||
|
||||
// Caret to indicate there is a submenu
|
||||
.dropdown-submenu > a:after {
|
||||
display: block;
|
||||
content: " ";
|
||||
float: right;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: darken(@dropdownBackground, 20%);
|
||||
margin-top: 5px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.dropdown-submenu:hover > a:after {
|
||||
border-left-color: @dropdownLinkColorHover;
|
||||
}
|
||||
|
||||
// Left aligned submenus
|
||||
.dropdown-submenu.pull-left {
|
||||
// Undo the float
|
||||
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
|
||||
float: none;
|
||||
|
||||
// Positioning the submenu
|
||||
> .dropdown-menu {
|
||||
left: -100%;
|
||||
margin-left: 10px;
|
||||
.border-radius(6px 0 6px 6px);
|
||||
}
|
||||
}
|
||||
|
||||
// Tweak nav headers
|
||||
// -----------------
|
||||
// Increase padding from 15px to 20px on sides
|
||||
.dropdown .dropdown-menu .nav-header {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// Typeahead
|
||||
// ---------
|
||||
.typeahead {
|
||||
z-index: 1051;
|
||||
margin-top: 2px; // give it some space to breathe
|
||||
.border-radius(@baseBorderRadius);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
// ==========================================================================
|
||||
// FILTER CONTROLS
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
|
||||
// Filters
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-controls-filters {
|
||||
display: inline-block;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tab-pane > .filter-controls-filters {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Actions
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-controls-actions {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.filter-controls-actions > li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filter-controls-actions-selected {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
// ==========================================================================
|
||||
// FILTER LIST
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
|
||||
// List
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.filter-list > li {
|
||||
padding: 10px;
|
||||
margin-bottom: 2px;
|
||||
background: @grafanaPanelBackground;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Card
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-list-card {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.filter-list-card > li {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.filter-list-card-select {
|
||||
width: 23px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.filter-list-card-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.filter-list-card-image {
|
||||
width: 50px;
|
||||
padding: 5px 50px 5px 5px;
|
||||
}
|
||||
|
||||
|
||||
.filter-list-card-status {
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-list-card-state {
|
||||
display: inline-block;
|
||||
padding: 5px 0 0 28px;
|
||||
background: 0 bottom no-repeat;
|
||||
background-size: 24px auto;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.online {
|
||||
background-image: url('/img/online.svg');
|
||||
color: @online;
|
||||
}
|
||||
|
||||
&.warn {
|
||||
background-image: url('/img/warn-tiny.svg');
|
||||
color: @warn;
|
||||
}
|
||||
|
||||
&.critical {
|
||||
background-image: url('/img/critical.svg');
|
||||
color: @critical;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list-card-controls {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.filter-list-card-links,
|
||||
.filter-list-card-config,
|
||||
.filter-list-card-expand {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.filter-list-card-link {
|
||||
display: block;
|
||||
color: #777;
|
||||
text-align: right;
|
||||
|
||||
> a {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list-card-config {
|
||||
padding: 8px 8px 8px 16px;
|
||||
color: #777;
|
||||
font-size: 25px;
|
||||
|
||||
> a {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list-card-expand {
|
||||
width: 20px;
|
||||
padding: 8px 0 8px 8px;
|
||||
color: #aaa;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-list-card-details {
|
||||
padding: 20px 0 0 30px;
|
||||
}
|
||||
|
||||
.filter-list-card-details-heading {
|
||||
font-weight: normal;
|
||||
|
||||
> a {
|
||||
float: right;
|
||||
color: @blue;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
// ==========================================================================
|
||||
// FILTER TABLE
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
|
||||
// Table
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
.filter-table * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
// table-layout: fixed;
|
||||
}
|
||||
|
||||
.filter-table tr {
|
||||
background: @grafanaListBackground;
|
||||
border-bottom: 2px solid @pageBackground;
|
||||
}
|
||||
|
||||
.filter-table th {
|
||||
width: auto;
|
||||
padding: 10px 15px 10px 0;
|
||||
text-align: left;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-table td {
|
||||
padding: 15px 15px 15px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-table .ellipsis {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.filter-table .expanded {
|
||||
border-color: @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
.filter-table .expanded > td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.grafana-version-info {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 3px;
|
||||
font-size: 80%;
|
||||
color: darken(@gray, 25%);
|
||||
a { color: darken(@gray, 25%); }
|
||||
}
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
.gf-form {
|
||||
margin-top: 3px;
|
||||
margin-right: 3px;
|
||||
display: inline-block;
|
||||
|
||||
.checkbox-label {
|
||||
display: inline;
|
||||
padding: 8px 7px 8px 4px;
|
||||
}
|
||||
.cr1 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.gf-form-flow {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.gf-form-button-row {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gf-form-label {
|
||||
background-color: @labelBackground;
|
||||
display: inline-block;
|
||||
padding: 8px 7px;
|
||||
.small;
|
||||
}
|
||||
|
||||
[type=text],
|
||||
[type=email],
|
||||
[type=number],
|
||||
[type=password], {
|
||||
&.gf-form-input {
|
||||
border: none;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
padding: 8px 6px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox].gf-form-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select.gf-form-input {
|
||||
padding: 2px 3px;
|
||||
font-size: 15px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.gf-size-xs { width: 60px; }
|
||||
.gf-size-s { width: 80px; }
|
||||
.gf-size-ms { width: 100px;}
|
||||
.gf-size-m { width: 110px; }
|
||||
.gf-size-l { width: 120px; }
|
||||
.gf-size-xl { width: 150px; }
|
||||
.gf-size-xxl { width: 200px; }
|
||||
.gf-size-xxxl { width: 300px; }
|
||||
.gf-size-auto { width: auto; }
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
background-color: $labelBackground;
|
||||
display: inline-block;
|
||||
padding: 8px 7px;
|
||||
@include small;
|
||||
font-size: $fontSizeSmall;
|
||||
}
|
||||
|
||||
[type=text],
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
.gf-box {
|
||||
margin: 10px 5px;
|
||||
background-color: @grafanaPanelBackground;
|
||||
position: relative;
|
||||
border: 1px solid @grafanaTargetFuncBackground;
|
||||
}
|
||||
|
||||
.gf-box-no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gf-box-header-close-btn {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
i {
|
||||
font-size: 120%;
|
||||
}
|
||||
color: @textColor;
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-box-header-save-btn {
|
||||
padding: 7px 0;
|
||||
float: right;
|
||||
color: @grayLight;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gf-box-body {
|
||||
padding: 20px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.gf-box-footer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gf-box-header {
|
||||
border-bottom: 1px solid @grafanaTargetFuncBackground;
|
||||
overflow: hidden;
|
||||
background-color: @grafanaTargetBackground;
|
||||
.tabs {
|
||||
float: left;
|
||||
}
|
||||
.nav {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-box-title {
|
||||
padding-right: 20px;
|
||||
padding-left: 10px;
|
||||
float: left;
|
||||
color: @linkColor;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 38px;
|
||||
margin: 0;
|
||||
.fa {
|
||||
padding: 0 8px 0 5px;
|
||||
color: @textColor;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.grafana-info-box:before {
|
||||
content: "\f05a";
|
||||
font-family:'FontAwesome';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
font-size: 20px;
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
.grafana-info-box {
|
||||
position: relative;
|
||||
padding: 5px 15px;
|
||||
background-color: @grafanaTargetBackground;
|
||||
border: 1px solid @grafanaTargetBorder;
|
||||
h5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,149 +0,0 @@
|
||||
//
|
||||
// Modals
|
||||
// --------------------------------------------------
|
||||
|
||||
// Background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindexModalBackdrop;
|
||||
background-color: @black;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.fade.in {
|
||||
.opacity(70);
|
||||
}
|
||||
|
||||
// Base modal
|
||||
.modal {
|
||||
position: fixed;
|
||||
z-index: @zindexModal;
|
||||
width: 100%;
|
||||
background-color: @grafanaPanelBackground;
|
||||
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
||||
.background-clip(padding-box);
|
||||
outline: none;
|
||||
|
||||
max-width: 800px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 9px 15px;
|
||||
border-bottom: 1px solid @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
// Body (where all modal content resides)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Remove bottom margin if need be
|
||||
.modal-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
padding: 14px 15px 15px;
|
||||
border-top: 1px solid @grafanaPanelBackground;
|
||||
background-color: @grafanaPanelBackground;
|
||||
text-align: right; // right align buttons
|
||||
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||
}
|
||||
|
||||
.modal-no-header {
|
||||
border: 1px solid @grafanaTargetFuncBackground;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
float: right;
|
||||
font-size: 140%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.modal-tagline {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-modal {
|
||||
max-width: 500px;
|
||||
|
||||
.confirm-modal-icon {
|
||||
padding-top: 41px;
|
||||
font-size: 280%;
|
||||
color: @green;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.confirm-modal-title {
|
||||
font-size: 18px;
|
||||
color: @linkColor;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.confirm-modal-buttons {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 35px;
|
||||
button {
|
||||
margin-right: 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-modal-body {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.tight-form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.share-modal-options {
|
||||
margin: 11px 20px 33px 20px;
|
||||
}
|
||||
|
||||
.share-modal-big-icon {
|
||||
.fa, .icon-gf {
|
||||
font-size: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.share-snapshot-info-text {
|
||||
margin: 10px 105px;
|
||||
strong {
|
||||
color: @headingsColor;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.share-snapshot-header {
|
||||
margin: 20px 0 22px 0;
|
||||
}
|
||||
|
||||
.tight-form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.share-snapshot-link {
|
||||
max-width: 716px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@@ -1,178 +0,0 @@
|
||||
|
||||
|
||||
.navbar {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
min-height: @navbarHeight;
|
||||
padding-right: 20px;
|
||||
background-color: @navbarBackground;
|
||||
border-bottom: @navbarBorder;
|
||||
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
position: relative;
|
||||
left: 0;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar .nav.pull-right {
|
||||
float: right; // redeclare due to specificity
|
||||
margin-right: 0; // remove margin on float right nav
|
||||
}
|
||||
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Links
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
padding: 17px 13px 13px;
|
||||
color: @navbarLinkColor;
|
||||
text-decoration: none;
|
||||
|
||||
.fa { font-size: 115%; }
|
||||
}
|
||||
|
||||
// Hover/focus
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover {
|
||||
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
|
||||
color: @navbarLinkColorHover;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Active nav items
|
||||
.navbar .nav > .active > a,
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus {
|
||||
color: @navbarLinkColorActive;
|
||||
text-decoration: none;
|
||||
background-color: @navbarLinkBackgroundActive;
|
||||
}
|
||||
|
||||
|
||||
.fa.top-nav-breadcrumb-icon {
|
||||
margin: 18px 0 6px 5px;
|
||||
float: left;
|
||||
font-size: 120%;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.top-nav-btn {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
border-right: 1px solid @grafanaTargetBorder;
|
||||
|
||||
.fa-caret-down {
|
||||
font-size: 55%;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 23px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken(@linkColor, 5%);
|
||||
background-color: @navbarButtonBackground;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
background: @navbarButtonBackgroundHighlight;
|
||||
color: @linkColor;
|
||||
// border-bottom: 1px solid @blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-nav-menu-btn {
|
||||
a {
|
||||
padding: 7px 20px 6px 13px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.top-nav-logo-background {
|
||||
display: inline-block;
|
||||
border: 1px solid @bodyBackground;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
background: @iconContainerBackground;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
font-size: 21px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
padding-left: 5px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dashnav-dashboards-btn {
|
||||
a {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 16px 17px 16px 13px;
|
||||
}
|
||||
|
||||
.fa-th-large {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.icon-gf {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size: 20px;
|
||||
line-height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
padding: 0px 6px 5px 5px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.top-nav-icon {
|
||||
margin: 5px 0px 0 11px;
|
||||
line-height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top-nav-section {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 19px 9px 8px 0;
|
||||
font-weight: bold;
|
||||
i {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-nav-title {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 17px;
|
||||
padding: 18px 10px 10px 13px;
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,200 +0,0 @@
|
||||
//
|
||||
// Navs
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// BASE CLASS
|
||||
// ----------
|
||||
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: @baseLineHeight;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Make links block level
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
|
||||
// Redeclare pull classes because of specifity
|
||||
.nav > .pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Nav headers (for dropdowns and lists)
|
||||
.nav-header {
|
||||
display: block;
|
||||
padding: 3px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayLight;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
// Space them out when they follow another list item (link)
|
||||
.nav li + .nav-header {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// NAV LIST
|
||||
// --------
|
||||
|
||||
.nav-list {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav-list > li > a,
|
||||
.nav-list .nav-header {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.nav-list > li > a {
|
||||
padding: 3px 15px;
|
||||
}
|
||||
.nav-list > .active > a,
|
||||
.nav-list > .active > a:hover,
|
||||
.nav-list > .active > a:focus {
|
||||
color: @white;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
||||
background-color: @linkColor;
|
||||
}
|
||||
.nav-list [class^="icon-"],
|
||||
.nav-list [class*=" icon-"] {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
// TABS AND PILLS
|
||||
// -------------
|
||||
|
||||
// Common styles
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
.clearfix();
|
||||
}
|
||||
.nav-tabs > li,
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-tabs > li > a,
|
||||
.nav-pills > li > a {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px; // keeps the overall height an even number
|
||||
}
|
||||
|
||||
// TABS
|
||||
// ----
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
// Make the list-items overlay the bottom border
|
||||
.nav-tabs > li {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
// Actual tabs (as links)
|
||||
.nav-tabs > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
line-height: @baseLineHeight;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(4px 4px 0 0);
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @grayLighter @grayLighter #ddd;
|
||||
}
|
||||
}
|
||||
// Active state, and it's :hover/:focus to override normal :hover/:focus
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus {
|
||||
color: @gray;
|
||||
background-color: @bodyBackground;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
// Default dropdown links
|
||||
// -------------------------
|
||||
// Make carets use linkColor to start
|
||||
.nav .dropdown-toggle .caret {
|
||||
border-top-color: @linkColor;
|
||||
border-bottom-color: @linkColor;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.nav .dropdown-toggle:hover .caret,
|
||||
.nav .dropdown-toggle:focus .caret {
|
||||
border-top-color: @linkColorHover;
|
||||
border-bottom-color: @linkColorHover;
|
||||
}
|
||||
/* move down carets for tabs */
|
||||
.nav-tabs .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// Active dropdown links
|
||||
// -------------------------
|
||||
.nav .active .dropdown-toggle .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.nav-tabs .active .dropdown-toggle .caret {
|
||||
border-top-color: @gray;
|
||||
border-bottom-color: @gray;
|
||||
}
|
||||
|
||||
// Active:hover/:focus dropdown links
|
||||
// -------------------------
|
||||
.nav > .dropdown.active > a:hover,
|
||||
.nav > .dropdown.active > a:focus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
// -------------------------
|
||||
.nav-tabs .open .dropdown-toggle,
|
||||
.nav-pills .open .dropdown-toggle,
|
||||
.nav > li.dropdown.open.active > a:hover,
|
||||
.nav > li.dropdown.open.active > a:focus {
|
||||
color: @white;
|
||||
background-color: @grayLight;
|
||||
border-color: @grayLight;
|
||||
}
|
||||
.nav li.dropdown.open .caret,
|
||||
.nav li.dropdown.open.active .caret,
|
||||
.nav li.dropdown.open a:hover .caret,
|
||||
.nav li.dropdown.open a:focus .caret {
|
||||
border-top-color: @white;
|
||||
border-bottom-color: @white;
|
||||
.opacity(100);
|
||||
}
|
||||
|
||||
// Dropdowns in stacked tabs
|
||||
.tabs-stacked .open > a:hover,
|
||||
.tabs-stacked .open > a:focus {
|
||||
border-color: @grayLight;
|
||||
}
|
||||
|
||||
// Show/hide tabbable areas
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content > .active {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
|
||||
div.editor-row {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div.editor-row div.section {
|
||||
margin-right: 20px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.editor-option {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
div.editor-option label {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
.pagination {
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
.border-radius(@baseBorderRadius);
|
||||
.box-shadow(0 1px 2px rgba(0,0,0,.05));
|
||||
}
|
||||
.pagination ul > li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
}
|
||||
.pagination ul > li > a,
|
||||
.pagination ul > li > span {
|
||||
float: left; // Collapse white-space
|
||||
padding: 4px 12px;
|
||||
line-height: @baseLineHeight;
|
||||
text-decoration: none;
|
||||
background-color: @paginationBackground;
|
||||
border: 1px solid @paginationBorder;
|
||||
border-left-width: 0;
|
||||
}
|
||||
.pagination ul > li > a:hover,
|
||||
.pagination ul > li > a:focus,
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
background-color: @paginationActiveBackground;
|
||||
}
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
color: @grayLight;
|
||||
cursor: default;
|
||||
}
|
||||
.pagination ul > .disabled > span,
|
||||
.pagination ul > .disabled > a,
|
||||
.pagination ul > .disabled > a:hover,
|
||||
.pagination ul > .disabled > a:focus {
|
||||
color: @grayLight;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.pagination ul > li:first-child > a,
|
||||
.pagination ul > li:first-child > span {
|
||||
border-left-width: 1px;
|
||||
.border-left-radius(@baseBorderRadius);
|
||||
}
|
||||
.pagination ul > li:last-child > a,
|
||||
.pagination ul > li:last-child > span {
|
||||
.border-right-radius(@baseBorderRadius);
|
||||
}
|
||||
|
||||
|
||||
// Alignment
|
||||
// --------------------------------------------------
|
||||
|
||||
.pagination-centered {
|
||||
text-align: center;
|
||||
}
|
||||
.pagination-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.pagination-large {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: @paddingLarge;
|
||||
font-size: @fontSizeLarge;
|
||||
}
|
||||
ul > li:first-child > a,
|
||||
ul > li:first-child > span {
|
||||
.border-left-radius(@borderRadiusLarge);
|
||||
}
|
||||
ul > li:last-child > a,
|
||||
ul > li:last-child > span {
|
||||
.border-right-radius(@borderRadiusLarge);
|
||||
}
|
||||
}
|
||||
|
||||
// Small and mini
|
||||
.pagination-mini,
|
||||
.pagination-small {
|
||||
ul > li:first-child > a,
|
||||
ul > li:first-child > span {
|
||||
.border-left-radius(@borderRadiusSmall);
|
||||
}
|
||||
ul > li:last-child > a,
|
||||
ul > li:last-child > span {
|
||||
.border-right-radius(@borderRadiusSmall);
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-small {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: @paddingSmall;
|
||||
font-size: @fontSizeSmall;
|
||||
}
|
||||
}
|
||||
// Mini
|
||||
.pagination-mini {
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: @paddingMini;
|
||||
font-size: @fontSizeMini;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.dashlist-item {
|
||||
|
||||
}
|
||||
|
||||
.dashlist-link {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
padding: 7px;
|
||||
background-color: @grafanaTargetBackground;
|
||||
border: 1px solid @grafanaTargetBorder;
|
||||
.fa {
|
||||
float: right;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.fa-star {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @grafanaTargetFuncBackground;
|
||||
}
|
||||
}
|
||||
@@ -1,298 +0,0 @@
|
||||
.graph-canvas-wrapper {
|
||||
position: relative;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.histogram-chart {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.datapoints-warning {
|
||||
pointer: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
margin-top: -50px;
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
cursor: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
|
||||
.popover-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-icon {
|
||||
position: relative;
|
||||
padding-right: 4px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-legend-icon,
|
||||
.graph-legend-alias,
|
||||
.graph-legend-value {
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
font-size: 85%;
|
||||
text-align: left;
|
||||
&.current:before {
|
||||
content: "Current: "
|
||||
}
|
||||
&.max:before {
|
||||
content: "Max: "
|
||||
}
|
||||
&.min:before {
|
||||
content: "Min: "
|
||||
}
|
||||
&.total:before {
|
||||
content: "Total: "
|
||||
}
|
||||
&.avg:before {
|
||||
content: "Avg: "
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-icon .fa {
|
||||
font-size: 135%;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.graph-legend-series {
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.graph-legend-table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
.graph-legend-series {
|
||||
display: table-row;
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
&.pull-right {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
padding: 2px 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.graph-legend-icon {
|
||||
width: 5px;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
.fa {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.graph-legend-alias {
|
||||
padding-left: 7px;
|
||||
text-align: left;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.graph-legend-series:nth-child(odd) {
|
||||
background-color: @grafanaListAccent;
|
||||
}
|
||||
|
||||
.graph-legend-value {
|
||||
&.current, &.max, &.min, &.total, &.avg {
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: right;
|
||||
padding: 0px 10px 1px 0;
|
||||
font-weight: bold;
|
||||
color: @blue;
|
||||
font-size: 85%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-rightside {
|
||||
|
||||
&.graph-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph-canvas-wrapper {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-legend-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.graph-legend-series {
|
||||
display: block;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.graph-legend-table .graph-legend-series {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-series-hidden {
|
||||
a {
|
||||
color: @linkColorDisabled;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-legend-popover {
|
||||
width: 200px;
|
||||
min-height: 100px;
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn {
|
||||
padding: 1px 3px;
|
||||
margin-right: 0px;
|
||||
line-height: initial;
|
||||
}
|
||||
.close {
|
||||
margin-right: 5px;
|
||||
color: @linkColor;
|
||||
opacity: 0.7;
|
||||
text-shadow: none;
|
||||
}
|
||||
.editor-row {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.annotation-tags {
|
||||
color: @purple;
|
||||
}
|
||||
|
||||
.graph-series-override {
|
||||
input {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.graph-series-override-option {
|
||||
float: left;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.graph-series-override-selector {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-tooltip {
|
||||
white-space: nowrap;
|
||||
|
||||
.graph-tooltip-time {
|
||||
text-align: center;
|
||||
font-weight: @fontWeightSemi;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.tone-down {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.label-tag {
|
||||
margin-right: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.graph-tooltip-list-item {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.graph-tooltip-series-name {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.graph-tooltip-value {
|
||||
display: table-cell;
|
||||
font-weight: bold;
|
||||
padding-left: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.left-yaxis-label {
|
||||
top: 50%;
|
||||
left: -5px;
|
||||
transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform-origin: left top;
|
||||
-o-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
-webkit-transform-origin: left top;
|
||||
}
|
||||
|
||||
.right-yaxis-label {
|
||||
top: 50%;
|
||||
right: -5px;
|
||||
|
||||
-webkit-transform: rotate(90deg);
|
||||
-webkit-transform-origin: right top;
|
||||
-moz-transform: rotate(90deg);
|
||||
-moz-transform-origin: right top;
|
||||
-ms-transform: rotate(90deg);
|
||||
-ms-transform-origin: right top;
|
||||
-o-transform: rotate(90deg);
|
||||
-o-transform-origin: right top;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
.axisLabel {
|
||||
color: @textColor;
|
||||
font-size: @fontSizeSmall;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.graph-legend-fixed-height {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.singlestat-panel {
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.singlestat-panel-value-container {
|
||||
padding: 20px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.singlestat-panel-prefix {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.singlestat-panel-table {
|
||||
width: 100%;
|
||||
td {
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid @grafanaListBorderBottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: right;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
color: @blue
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) td {
|
||||
background-color: @grafanaListAccent;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
.table-panel-wrapper {
|
||||
.panel-content {
|
||||
padding: 0;
|
||||
}
|
||||
.panel-title-container {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-panel-scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.table-panel-container {
|
||||
padding-top: 2.2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-panel-footer {
|
||||
text-align: center;
|
||||
font-size: 90%;
|
||||
line-height: 2px;
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul > li {
|
||||
display: inline; // Remove list-style and block-level defaults
|
||||
}
|
||||
ul > li > a {
|
||||
float: left; // Collapse white-space
|
||||
padding: 4px 12px;
|
||||
text-decoration: none;
|
||||
border-left-width: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: @grafanaTargetFuncBackground;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-panel-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
th {
|
||||
padding: 0;
|
||||
|
||||
&:first-child {
|
||||
.table-panel-table-header-inner {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
border-bottom: 2px solid @bodyBackground;
|
||||
border-right: 2px solid @bodyBackground;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-panel-header-bg {
|
||||
background: @grafanaListAccent;
|
||||
border-top: 2px solid @bodyBackground;
|
||||
border-bottom: 2px solid @bodyBackground;
|
||||
height: 2.0em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.table-panel-table-header-inner {
|
||||
padding: 0.45em 0 0.45em 1.1em;
|
||||
text-align: left;
|
||||
color: @blue;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.table-panel-width-hack {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
line-height: 0px;
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
//
|
||||
// Popovers
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: @zindexPopover;
|
||||
display: none;
|
||||
max-width: 480px;
|
||||
padding: 1px;
|
||||
text-align: left; // Reset given new insertion method
|
||||
background-color: @popoverBackground;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
|
||||
// Overrides for proper insertion
|
||||
white-space: normal;
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
&.top { margin-top: -10px; }
|
||||
&.right { margin-left: 10px; }
|
||||
&.bottom { margin-top: 10px; }
|
||||
&.left { margin-left: -10px; }
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
margin: 0; // reset heading margin
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
background-color: @popoverTitleBackground;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
//
|
||||
// .arrow is outer, .arrow:after is inner
|
||||
|
||||
.popover .arrow,
|
||||
.popover .arrow:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.popover .arrow {
|
||||
border-width: @popoverArrowOuterWidth;
|
||||
}
|
||||
.popover .arrow:after {
|
||||
border-width: @popoverArrowWidth;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.popover {
|
||||
&.top .arrow {
|
||||
left: 50%;
|
||||
margin-left: -@popoverArrowOuterWidth;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #999; // IE8 fallback
|
||||
border-top-color: @popoverArrowOuterColor;
|
||||
bottom: -@popoverArrowOuterWidth;
|
||||
&:after {
|
||||
bottom: 1px;
|
||||
margin-left: -@popoverArrowWidth;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.right .arrow {
|
||||
top: 50%;
|
||||
left: -@popoverArrowOuterWidth;
|
||||
margin-top: -@popoverArrowOuterWidth;
|
||||
border-left-width: 0;
|
||||
border-right-color: #999; // IE8 fallback
|
||||
border-right-color: @popoverArrowOuterColor;
|
||||
&:after {
|
||||
left: 1px;
|
||||
bottom: -@popoverArrowWidth;
|
||||
border-left-width: 0;
|
||||
border-right-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
&.bottom .arrow {
|
||||
left: 50%;
|
||||
margin-left: -@popoverArrowOuterWidth;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #999; // IE8 fallback
|
||||
border-bottom-color: @popoverArrowOuterColor;
|
||||
top: -@popoverArrowOuterWidth;
|
||||
&:after {
|
||||
top: 1px;
|
||||
margin-left: -@popoverArrowWidth;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popoverArrowColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.left .arrow {
|
||||
top: 50%;
|
||||
right: -@popoverArrowOuterWidth;
|
||||
margin-top: -@popoverArrowOuterWidth;
|
||||
border-right-width: 0;
|
||||
border-left-color: #999; // IE8 fallback
|
||||
border-left-color: @popoverArrowOuterColor;
|
||||
&:after {
|
||||
right: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-color: @popoverArrowColor;
|
||||
bottom: -@popoverArrowWidth;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.query-keyword {
|
||||
font-weight: bold;
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
.query-segment-key {
|
||||
border-right: none;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.query-segment-operator {
|
||||
padding-right: 1px;
|
||||
border-right: none;
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
//
|
||||
// Srollbars
|
||||
//
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:hover {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:start:decrement,
|
||||
::-webkit-scrollbar-button:end:increment { display: none; }
|
||||
::-webkit-scrollbar-button:horizontal:decrement { display: none; }
|
||||
::-webkit-scrollbar-button:horizontal:increment { display: none; }
|
||||
::-webkit-scrollbar-button:vertical:decrement { display: none; }
|
||||
::-webkit-scrollbar-button:vertical:increment { display: none; }
|
||||
::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; }
|
||||
::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; }
|
||||
::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; }
|
||||
::-webkit-scrollbar-button:vertical:increment:active {background-image: none; }
|
||||
::-webkit-scrollbar-track-piece { background-color: transparent; }
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
height: 50px;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2));
|
||||
border: 1px solid @scrollbarBorder;
|
||||
border-top: 1px solid @scrollbarBorder;
|
||||
border-left: 1px solid @scrollbarBorder;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
width: 50px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2));
|
||||
border: 1px solid @scrollbarBorder;
|
||||
border-top: 1px solid @scrollbarBorder;
|
||||
border-left: 1px solid @scrollbarBorder;
|
||||
}
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
.search-container {
|
||||
left: 72px;
|
||||
top: 39px;
|
||||
margin: 16px 0 0 2px;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
width: 700px;
|
||||
box-shadow: @searchShadow;
|
||||
padding: 10px;
|
||||
background-color: @grafanaPanelBackground;
|
||||
border: @grafanaPanelBorder;
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
.search-field-wrapper {
|
||||
padding-bottom: 10px;
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-container {
|
||||
height: 450px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
|
||||
.search-item:hover, .search-item.selected {
|
||||
background-color: @grafanaListHighlight;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.search-result-tag {
|
||||
opacity: 0.70;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-star, .fa-star-o {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
.search-result-link {
|
||||
color: @grafanaListMainLinkColor;
|
||||
.fa {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
white-space: nowrap;
|
||||
background-color: @grafanaListBackground;
|
||||
margin-bottom: 4px;
|
||||
.search-result-icon:before {
|
||||
content: "\f009";
|
||||
}
|
||||
|
||||
&.search-item-dash-home .search-result-icon:before {
|
||||
content: "\f015";
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-tags {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.search-result-actions {
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-switches {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 21px;
|
||||
}
|
||||
|
||||
.search-button-row {
|
||||
padding-top: 20px;
|
||||
button, a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
.shortcut-table {
|
||||
td { padding: 3px; }
|
||||
th:last-child { text-align: left; }
|
||||
td:first-child { text-align: right; }
|
||||
}
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
@sideMenuWidth: 220px;
|
||||
|
||||
.sidemenu-canvas {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidemenu-wrapper {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
width: @sideMenuWidth;
|
||||
background-color: @bodyBackground;
|
||||
z-index: 101;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
visibility: hidden;
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
.sidemenu-wrapper {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-pinned {
|
||||
.sidemenu-wrapper {
|
||||
min-height: 100%;
|
||||
}
|
||||
.dashboard-container {
|
||||
padding-left: @sideMenuWidth;
|
||||
}
|
||||
.page-container {
|
||||
margin-left: 195px;
|
||||
padding-left: 77px;
|
||||
}
|
||||
.top-nav-menu-btn {
|
||||
a {
|
||||
background-color: @pageBackground;
|
||||
padding-right: 67px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
display: inline-block;
|
||||
}
|
||||
.fa {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sidemenu-org {
|
||||
box-shadow: none;
|
||||
}
|
||||
.search-container {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu {
|
||||
font-weight: @baseFontWeight;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
top: 0px;
|
||||
left: @sideMenuWidth;
|
||||
background-color: @bodyBackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-main-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidemenu-item-text {
|
||||
width: 110px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
i {
|
||||
color: @linkColor;
|
||||
opacity: .7;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
top: 5px;
|
||||
font-size: 150%;
|
||||
}
|
||||
img {
|
||||
left: 7px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-item {
|
||||
color: @linkColor;
|
||||
line-height: 47px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: @sideMenuBackgroundHighlight;
|
||||
}
|
||||
|
||||
.sidemenu-item-text {
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-section-tagline {
|
||||
font-style: italic;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.sidemenu-section-text-wrapper {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.sidemenu-org-section .dropdown-menu-title {
|
||||
margin: 0 10px 0 6px;
|
||||
padding: 7px 0 7px;
|
||||
overflow: hidden;
|
||||
color: @dropdownTitle;
|
||||
}
|
||||
|
||||
.sidemenu-org-section .dropdown-menu-title > span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 100%;
|
||||
width: 200px;
|
||||
height: 1px;
|
||||
margin-left: 5px;
|
||||
background: @dropdownDivider;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-org {
|
||||
padding: 17px 10px 15px 14px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: @sideMenuBackgroundHighlight;
|
||||
}
|
||||
display: table;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidemenu .fa-caret-right {
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
right: 25px;
|
||||
font-size: 14px;
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
.sidemenu-org-avatar,
|
||||
.sidemenu-org-details {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sidemenu-org-avatar {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.sidemenu-org-avatar > img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sidemenu-org-details {
|
||||
padding-left: 10px;
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
.sidemenu-org-name {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: @linkColorDisabled;
|
||||
}
|
||||
|
||||
.sidemenu-org-user {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
.submenu-controls {
|
||||
margin: 10px 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.annotation-disabled, .annotation-disabled a {
|
||||
color: @linkColorDisabled;
|
||||
}
|
||||
|
||||
.annotation-segment {
|
||||
label.cr1 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
padding: 8px 7px;
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
background-color: @grafanaPanelBackground;
|
||||
border: @grafanaPanelBorder;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
|
||||
.fa-caret-down {
|
||||
font-size: 75%;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.variable-value-link {
|
||||
font-size: 16px;
|
||||
padding-right: 10px;
|
||||
.label-tag {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.variable-link-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.variable-value-dropdown {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
min-width: 150px;
|
||||
max-height: 400px;
|
||||
min-height: 150px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: @dropdownBackground;
|
||||
box-shadow: 0 0 25px 0 rgba(0,0,0,0.4);
|
||||
z-index: 1000;
|
||||
font-size: @baseFontSize;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid @grafanaTargetFuncBackground;
|
||||
|
||||
&.multi {
|
||||
.selected {
|
||||
.variable-option-icon{
|
||||
background: url(@checkboxImageUrl) 0px -18px no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.single {
|
||||
.variable-option-icon {
|
||||
display: none;
|
||||
}
|
||||
.selected {
|
||||
background-color: @grafanaTargetFuncHightlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.variable-options-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.variable-options-column {
|
||||
max-height: 350px;
|
||||
display: table-cell;
|
||||
line-height: 26px;
|
||||
&:nth-child(2) {
|
||||
border-left: 1px solid @grafanaTargetFuncBackground;
|
||||
}
|
||||
}
|
||||
|
||||
.variable-option-tag,
|
||||
.variable-option,
|
||||
.variable-options-column-header {
|
||||
display: block;
|
||||
padding: 2px 27px 0 8px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
min-width: 115px;
|
||||
}
|
||||
|
||||
.variable-options-column-header {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
&.many-selected {
|
||||
.variable-option-icon {
|
||||
background: url(@checkboxImageUrl) 0px -36px no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.variable-option-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
background: url(@checkboxImageUrl) left top no-repeat;
|
||||
}
|
||||
|
||||
.variable-option {
|
||||
&:hover, &.highlighted {
|
||||
background-color: @blueDark;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-nav-link {
|
||||
padding: 8px 7px;
|
||||
display: inline-block;
|
||||
color: @textColor;
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
.grafana-options-table {
|
||||
width: 100%;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 4px solid @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
tr td {
|
||||
background-color: @grafanaListBackground;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 4px solid @grafanaPanelBackground;
|
||||
&.nobg {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.max-width-btns {
|
||||
padding-right: 0px;
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.max-width {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.grafana-list-item {
|
||||
display: block;
|
||||
padding: 1px 10px;
|
||||
line-height: 34px;
|
||||
background-color: @grafanaTargetBackground;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
|
||||
.nav-tabs-alt {
|
||||
border-bottom: @grafanaTriggerBorder;
|
||||
padding-left: 10px;
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
& > li > a {
|
||||
color: darken(@linkColor, 20%);
|
||||
}
|
||||
|
||||
li > a:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
li.active > a,
|
||||
li.active > a:focus,
|
||||
li.active > a:hover {
|
||||
.border-radius(3px);
|
||||
border: @grafanaTriggerBorder;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid @grafanaPanelBackground;
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
li.disabled > a {
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.open .dropdown-toggle {
|
||||
background-color: #060606;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 10px;
|
||||
background-color: @grafanaPanelBackground;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
// Base classes
|
||||
.label,
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
font-size: @baseFontSize * .846;
|
||||
font-weight: bold;
|
||||
line-height: 14px; // ensure proper line-height if floated
|
||||
color: @white;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-color: @grayLight;
|
||||
}
|
||||
|
||||
|
||||
// Labels & Badges
|
||||
.label-tag {
|
||||
background-color: @purple;
|
||||
color: darken(@white, 5%);
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
padding: 2px 6px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
.icon-tag {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-tag:hover {
|
||||
opacity: 0.85;
|
||||
background-color: darken(@purple, 10%);
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
.bootstrap-tagsinput {
|
||||
display: inline-block;
|
||||
padding: 0 0 0 6px;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
line-height: 22px;
|
||||
background-color: @inputBackground;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
padding: 8px 6px;
|
||||
height: 100%;
|
||||
width: 5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-right: 2px;
|
||||
color: white;
|
||||
|
||||
[data-role="remove"] {
|
||||
margin-left:8px;
|
||||
cursor:pointer;
|
||||
&:after{
|
||||
content: "x";
|
||||
padding:0px 2px;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
&:active {
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,236 +0,0 @@
|
||||
.tight-form {
|
||||
border-top: 1px solid @grafanaTargetBorder;
|
||||
border-left: 1px solid @grafanaTargetBorder;
|
||||
border-right: 1px solid @grafanaTargetBorder;
|
||||
background: @grafanaTargetBackground;
|
||||
|
||||
&.last {
|
||||
border-bottom: 1px solid @grafanaTargetBorder;
|
||||
}
|
||||
|
||||
&.borderless {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: inline;
|
||||
padding-right: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-container-no-item-borders {
|
||||
border: 1px solid @grafanaTargetBorder;
|
||||
border-bottom: none;
|
||||
|
||||
.tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spaced-form {
|
||||
.tight-form {
|
||||
margin: 7px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.borderless {
|
||||
.tight-form-item,
|
||||
.tight-form-input {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-container {
|
||||
border-bottom: 1px solid @grafanaTargetBorder;
|
||||
}
|
||||
|
||||
.tight-form-btn {
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
.tight-form-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
>li {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-flex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
.grafana-metric-options {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.tight-form-item {
|
||||
padding: 8px 7px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
color: @grafanaTargetColor;
|
||||
display: inline-block;
|
||||
|
||||
.has-open-function & {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.tight-form-disabled & {
|
||||
color: @grafanaTargetColorHide;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&a:hover {
|
||||
background: @grafanaTargetFuncBackground;
|
||||
}
|
||||
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tight-form-item-icon {
|
||||
i {
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-func {
|
||||
background: @grafanaTargetFuncBackground;
|
||||
> a {
|
||||
color: @grafanaTargetColor;
|
||||
}
|
||||
> a:hover {
|
||||
color: @linkColor;
|
||||
}
|
||||
|
||||
&.show-function-controls {
|
||||
padding-top: 5px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text].tight-form-func-param {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type=text].tight-form-clear-input {
|
||||
padding: 8px 7px;
|
||||
border: none;
|
||||
margin: 0px;
|
||||
background: transparent;
|
||||
color: @grafanaTargetColor;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
}
|
||||
|
||||
[type=text],
|
||||
[type=email],
|
||||
[type=number],
|
||||
[type=password] {
|
||||
&.tight-form-input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
padding: 8px 6px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox].tight-form-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tight-form-textarea {
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
select.tight-form-input {
|
||||
border: none;
|
||||
border-right: 1px solid @grafanaTargetSegmentBorder;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
padding: 9px 3px;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-func-controls {
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
||||
.fa-arrow-left {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-arrow-right {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.fa-remove {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-radio {
|
||||
input[type=radio] {
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-section {
|
||||
margin-bottom: 20px;
|
||||
margin-right: 40px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
.tight-form {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tight-form-align {
|
||||
padding-left: 66px;
|
||||
}
|
||||
|
||||
.tight-form-item-large { width: 115px; }
|
||||
.tight-form-item-xlarge { width: 150px; }
|
||||
.tight-form-item-xxlarge { width: 200px; }
|
||||
|
||||
.tight-form-input.tight-form-item-xxlarge {
|
||||
width: 215px;
|
||||
}
|
||||
|
||||
.tight-form-inner-box {
|
||||
margin: 20px 0 20px 148px;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
.nav.gf-timepicker-nav {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.timepicker-timestring {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.gf-timepicker-nav-btn {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gf-timepicker-dropdown {
|
||||
margin: -5px -10px 10px 5px;
|
||||
padding: 10px 20px;
|
||||
float: right;
|
||||
background-color: @grafanaPanelBackground;
|
||||
.box-shadow(@navbarDropdownShadow);
|
||||
}
|
||||
|
||||
.gf-timepicker-absolute-section {
|
||||
width: 300px;
|
||||
float: left;
|
||||
border-right: @grafanaTriggerBorder;
|
||||
padding: 0 0 0 20px;
|
||||
select {
|
||||
width: 183px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-timepicker-btn-apply {
|
||||
margin: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.gf-timepicker-utc {
|
||||
background-color: @grafanaTargetFuncBackground;
|
||||
color: @orange;
|
||||
font-size: 75%;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.gf-timepicker-relative-section {
|
||||
padding: 0 20px 0 30px;
|
||||
min-height: 258px;
|
||||
float: left;
|
||||
ul {
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin: 0 30px 10px 0px;
|
||||
li {
|
||||
line-height: 22px;
|
||||
}
|
||||
li.active {
|
||||
border-bottom: 1px solid @blue;
|
||||
margin: 3px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-timepicker-component {
|
||||
margin-bottom: 10px;
|
||||
button.btn-sm {
|
||||
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
|
||||
background-image: none;
|
||||
border: none;
|
||||
padding: 6px 9px;
|
||||
color: @textColor;
|
||||
&.active span {
|
||||
color: @blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-info {
|
||||
color: @orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faMixin {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.glyphicon-chevron-right:before {
|
||||
.faMixin;
|
||||
content: "\f054";
|
||||
}
|
||||
|
||||
.glyphicon-chevron-left:before {
|
||||
.faMixin;
|
||||
content: "\f053";
|
||||
}
|
||||
|
||||
.input-datetime-format {
|
||||
color: @linkColorDisabled
|
||||
}
|
||||
@@ -83,25 +83,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.faMixin {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.glyphicon-chevron-right:before {
|
||||
@include faMixin;
|
||||
content: "\f054";
|
||||
}
|
||||
|
||||
.glyphicon-chevron-left:before {
|
||||
@include faMixin;
|
||||
content: "\f053";
|
||||
}
|
||||
|
||||
.input-datetime-format {
|
||||
color: $linkColorDisabled
|
||||
}
|
||||
|
||||
@@ -1,102 +0,0 @@
|
||||
//
|
||||
// Tooltips
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: @zindexTooltip;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
.opacity(0);
|
||||
&.in { .opacity(100); }
|
||||
&.top { margin-top: -3px; padding: 5px 0; }
|
||||
&.right { margin-left: 3px; padding: 0 5px; }
|
||||
&.bottom { margin-top: 3px; padding: 5px 0; }
|
||||
&.left { margin-left: -3px; padding: 0 5px; }
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: 400px;
|
||||
padding: 8px;
|
||||
color: @tooltipColor;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltipBackground;
|
||||
.border-radius(@baseBorderRadius);
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.tooltip {
|
||||
&.top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -@tooltipArrowWidth;
|
||||
border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
|
||||
border-top-color: @tooltipArrowColor;
|
||||
}
|
||||
&.right .tooltip-arrow {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -@tooltipArrowWidth;
|
||||
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
|
||||
border-right-color: @tooltipArrowColor;
|
||||
}
|
||||
&.left .tooltip-arrow {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -@tooltipArrowWidth;
|
||||
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
|
||||
border-left-color: @tooltipArrowColor;
|
||||
}
|
||||
&.bottom .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -@tooltipArrowWidth;
|
||||
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
|
||||
border-bottom-color: @tooltipArrowColor;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-tooltip {
|
||||
position : absolute;
|
||||
top: -1000;
|
||||
left: 0;
|
||||
color: @tooltipColor;
|
||||
padding: 10px;
|
||||
font-size: 11pt;
|
||||
font-weight : 200;
|
||||
background-color: @tooltipBackground;
|
||||
border-radius: 5px;
|
||||
z-index: 9999;
|
||||
max-width: 800px;
|
||||
max-height: 600px;
|
||||
overflow: hidden;
|
||||
line-height: 14px;
|
||||
a {
|
||||
color: @tooltipLinkColor;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-tooltip hr {
|
||||
padding: 2px;
|
||||
color: #c8c8c8;
|
||||
margin: 0px;
|
||||
border-bottom: 0px solid #c8c8c8;
|
||||
}
|
||||
|
||||
.grafana-tip {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
@include opacity(0);
|
||||
&.in { .opacity(100); }
|
||||
&.in { @include opacity(100); }
|
||||
&.top { margin-top: -3px; padding: 5px 0; }
|
||||
&.right { margin-left: 3px; padding: 0 5px; }
|
||||
&.bottom { margin-top: 3px; padding: 5px 0; }
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
|
||||
// typeahead max height
|
||||
.typeahead {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.typeahead strong {
|
||||
color: @yellow;
|
||||
}
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
@import "variables.dark.less";
|
||||
@import "bootstrap/responsive.less";
|
||||
|
||||
@gridColumnWidth: 70px;
|
||||
@gridGutterWidth: 10px;
|
||||
|
||||
@gridColumnWidth768: 52px;
|
||||
@gridGutterWidth768: 10px;
|
||||
|
||||
@gridColumnWidth1200: 90px;
|
||||
@gridGutterWidth1200: 10px;
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
|
||||
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
|
||||
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
|
||||
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
|
||||
|
||||
@screen-xs: 320px;
|
||||
@screen-sm: 768px;
|
||||
@screen-md: 992px;
|
||||
@screen-lg: 1200px;
|
||||
|
||||
@screen-xs-max: (@screen-sm - 1);
|
||||
@screen-sm-max: (@screen-md - 1);
|
||||
@screen-md-max: (@screen-lg - 1);
|
||||
|
||||
@breakpoint-xs-up: ~"only screen and (min-width: @{screen-xs})";
|
||||
@breakpoint-xs: ~"only screen and (min-width: @{screen-xs}) and (max-width: @{screen-xs-max})";
|
||||
@breakpoint-sm-up: ~"only screen and (min-width: @{screen-sm})";
|
||||
@breakpoint-sm: ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
|
||||
@breakpoint-md-up: ~"only screen and (min-width: @{screen-md})";
|
||||
@breakpoint-md: ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})";
|
||||
@breakpoint-lg: ~"only screen and (min-width: @{screen-lg})";
|
||||
|
||||
.dashnav-back-to-dashboard {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Media queries
|
||||
// ---------------------
|
||||
@media @breakpoint-xs {
|
||||
div.panel {
|
||||
width: 100% !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.panel-margin {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: 200px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: 120px;
|
||||
}
|
||||
.dashnav-zoom-out,
|
||||
.dashnav-action-icons {
|
||||
display: none;
|
||||
}
|
||||
.page-container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// form styles
|
||||
@media @breakpoint-sm-up {
|
||||
.gf-size-m { width: 120px; }
|
||||
.gf-size-l { width: 150px; }
|
||||
.gf-size-xl { width: 200px; }
|
||||
.gf-size-xxl { width: 300px; }
|
||||
.gf-size-xxxl { width: 400px; }
|
||||
}
|
||||
|
||||
@media @breakpoint-sm-up {
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: 200px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: 120px;
|
||||
}
|
||||
.panel-in-fullscreen {
|
||||
.dashnav-action-icons {
|
||||
display: none;
|
||||
}
|
||||
.dashnav-back-to-dashboard {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media @breakpoint-md-up {
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: 290px;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: 250px;
|
||||
}
|
||||
.dashnav-zoom-out {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media @breakpoint-lg {
|
||||
.panel-in-fullscreen {
|
||||
.dashnav-action-icons {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dashnav-dashboards-btn a {
|
||||
max-width: none;
|
||||
}
|
||||
.gf-timepicker-nav-btn {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "variables.dark.less";
|
||||
@import "grafana.less";
|
||||
@@ -1,69 +0,0 @@
|
||||
|
||||
// BASE
|
||||
@import "./base/normalize.less";
|
||||
@import "./base/base.less";
|
||||
@import "./base/type.less";
|
||||
@import "./base/forms.less";
|
||||
@import "./base/fonts.less";
|
||||
@import "./base/code.less";
|
||||
|
||||
// UTILS
|
||||
@import "./utils/utils.less";
|
||||
@import "./utils/validation.less";
|
||||
@import "./utils/angular.less";
|
||||
|
||||
// MIXINS
|
||||
@import "./mixins/mixins.less";
|
||||
@import "./mixins/buttons.less";
|
||||
|
||||
// LAYOUTS
|
||||
// @import "./bootstrap/grid.less";
|
||||
@import "./layout/page.less";
|
||||
|
||||
// COMPONENTS
|
||||
@import "./components/panel_graph.less";
|
||||
@import "./components/submenu.less";
|
||||
@import "./components/panel_dashlist.less";
|
||||
@import "./components/panel_singlestat.less";
|
||||
@import "./components/panel_table.less";
|
||||
@import "./components/tagsinput.less";
|
||||
@import "./components/tables_lists.less";
|
||||
@import "./components/search.less";
|
||||
@import "./components/dashboard.less";
|
||||
@import "./components/tightform.less";
|
||||
@import "./components/gf-form.less";
|
||||
@import "./components/sidemenu.less";
|
||||
@import "./components/navbar.less";
|
||||
@import "./components/gfbox.less";
|
||||
@import "./components/pagination.less";
|
||||
@import "./components/tabs.less";
|
||||
@import "./components/timepicker.less";
|
||||
@import "./components/filter-controls.less";
|
||||
@import "./components/filter-list.less";
|
||||
@import "./components/filter-table.less";
|
||||
@import "./components/scrollbar.less";
|
||||
@import "./components/old_stuff.less";
|
||||
@import "./components/navbar.less";
|
||||
@import "./components/popovers.less";
|
||||
@import "./components/alerts.less";
|
||||
@import "./components/typeahead.less";
|
||||
@import "./components/tags.less";
|
||||
@import "./components/modals.less";
|
||||
@import "./components/dropdown.less";
|
||||
@import "./components/color_picker.less";
|
||||
@import "./components/tooltip.less";
|
||||
@import "./components/buttons.less";
|
||||
@import "./components/footer.less";
|
||||
@import "./components/infobox.less";
|
||||
@import "./components/shortcuts.less";
|
||||
@import "./components/query_editor.less";
|
||||
@import "./components/navs.less";
|
||||
|
||||
// PAGES
|
||||
@import "./pages/login.less";
|
||||
@import "./pages/playlist.less";
|
||||
@import "./pages/admin.less";
|
||||
@import "./pages/alerting.less";
|
||||
@import "./pages/apps.less";
|
||||
@import "./pages/signup.less";
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "variables.light.less";
|
||||
@import "grafana.less";
|
||||
@@ -1,4 +1,8 @@
|
||||
|
||||
// MIXINS
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./mixins/buttons.scss";
|
||||
|
||||
// BASE
|
||||
@import "./base/normalize.scss";
|
||||
@import "./base/base.scss";
|
||||
@@ -12,10 +16,6 @@
|
||||
@import "./utils/validation.scss";
|
||||
@import "./utils/angular.scss";
|
||||
|
||||
// MIXINS
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./mixins/buttons.scss";
|
||||
|
||||
// LAYOUTS
|
||||
// @import "./bootstrap/grid.scss";
|
||||
@import "./layout/page.scss";
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
.grafana-app {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
padding: 5px 5px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-view {
|
||||
// background-image: url(/img/grafana_pattern.png);
|
||||
// background-position: 100% -550px;
|
||||
// background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-dashboard {
|
||||
.main-view {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: @pageBackground;
|
||||
position: relative;
|
||||
padding: 25px 56px 10px 56px;
|
||||
max-width: 1060px;
|
||||
margin-left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
padding: 10px 0 39px 0px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
flex-wrap: wrap-reverse;
|
||||
background: transparent url(../img/page_header_line.png) no-repeat left 60px;
|
||||
h1 {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-page {
|
||||
max-width: 800px;
|
||||
margin-left: 10px;
|
||||
.gf-box {
|
||||
margin-top: 0;
|
||||
}
|
||||
.gf-box-body {
|
||||
min-height: 0;
|
||||
}
|
||||
h2 {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0px;
|
||||
font-size: @fontSizeLarge;
|
||||
color: @textColor;
|
||||
i {
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
|
||||
// Button backgrounds
|
||||
// ------------------
|
||||
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
||||
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
|
||||
|
||||
box-shadow: inset 0 -4px rgba(0,0,0,0.3);
|
||||
|
||||
// in these cases the gradient won't cover the background, so we override
|
||||
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
|
||||
color: @textColor;
|
||||
background-image: none;
|
||||
background-color: darken(@endColor, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,484 +0,0 @@
|
||||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// UTILITY MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Clearfix
|
||||
// --------
|
||||
// For clearing floats like a boss h5bp.com/q
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
// Fixes Opera/contenteditable bug:
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-focus() {
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
// -------------------------
|
||||
.size(@height, @width) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.square(@size) {
|
||||
.size(@size, @size);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
.placeholder(@color: @placeholderText) {
|
||||
&:-moz-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
// -------------------------
|
||||
// Requires inline-block or block for proper styling
|
||||
.text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
// -------------------------
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
||||
.hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// FONTS
|
||||
// --------------------------------------------------
|
||||
|
||||
.font-family-serif() {
|
||||
font-family: @serifFontFamily;
|
||||
}
|
||||
.font-family-sans-serif() {
|
||||
font-family: @sansFontFamily;
|
||||
}
|
||||
.font-family-monospace() {
|
||||
font-family: @monoFontFamily;
|
||||
}
|
||||
.font-shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
||||
font-size: @size;
|
||||
font-weight: @weight;
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
.font-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
||||
.font-family-serif();
|
||||
.font-shorthand(@size, @weight, @lineHeight);
|
||||
}
|
||||
.font-sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
||||
.font-family-sans-serif();
|
||||
.font-shorthand(@size, @weight, @lineHeight);
|
||||
}
|
||||
.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
||||
.font-family-monospace;
|
||||
.font-shorthand(@size, @weight, @lineHeight);
|
||||
}
|
||||
|
||||
|
||||
// FORMS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Block level inputs
|
||||
.input-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
}
|
||||
|
||||
|
||||
// CSS3 PROPERTIES
|
||||
// --------------------------------------------------
|
||||
|
||||
// Border Radius
|
||||
.border-radius(@radius) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// Single Corner Border Radius
|
||||
.border-top-left-radius(@radius) {
|
||||
-webkit-border-top-left-radius: @radius;
|
||||
-moz-border-radius-topleft: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
.border-top-right-radius(@radius) {
|
||||
-webkit-border-top-right-radius: @radius;
|
||||
-moz-border-radius-topright: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
}
|
||||
.border-bottom-right-radius(@radius) {
|
||||
-webkit-border-bottom-right-radius: @radius;
|
||||
-moz-border-radius-bottomright: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
}
|
||||
.border-bottom-left-radius(@radius) {
|
||||
-webkit-border-bottom-left-radius: @radius;
|
||||
-moz-border-radius-bottomleft: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
||||
|
||||
// Single Side Border Radius
|
||||
.border-top-radius(@radius) {
|
||||
.border-top-right-radius(@radius);
|
||||
.border-top-left-radius(@radius);
|
||||
}
|
||||
.border-right-radius(@radius) {
|
||||
.border-top-right-radius(@radius);
|
||||
.border-bottom-right-radius(@radius);
|
||||
}
|
||||
.border-bottom-radius(@radius) {
|
||||
.border-bottom-right-radius(@radius);
|
||||
.border-bottom-left-radius(@radius);
|
||||
}
|
||||
.border-left-radius(@radius) {
|
||||
.border-top-left-radius(@radius);
|
||||
.border-bottom-left-radius(@radius);
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
.box-shadow(@shadow) {
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.transition(@transition) {
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
.transition-delay(@transition-delay) {
|
||||
transition-delay: @transition-delay;
|
||||
}
|
||||
|
||||
.transition-duration(@transition-duration) {
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
.rotate(@degrees) {
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
|
||||
.scale(@ratio) {
|
||||
transform: scale(@ratio);
|
||||
}
|
||||
|
||||
.translate(@x, @y) {
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
|
||||
.skew(@x, @y) {
|
||||
transform: skew(@x, @y);
|
||||
-webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
|
||||
}
|
||||
|
||||
.translate3d(@x, @y, @z) {
|
||||
transform: translate3d(@x, @y, @z);
|
||||
}
|
||||
|
||||
.backface-visibility(@visibility){
|
||||
backface-visibility: @visibility;
|
||||
}
|
||||
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
||||
.background-clip(@clip) {
|
||||
background-clip: @clip;
|
||||
}
|
||||
|
||||
// Background sizing
|
||||
.background-size(@size) {
|
||||
background-size: @size;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
.box-sizing(@boxmodel) {
|
||||
box-sizing: @boxmodel;
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
.user-select(@select) {
|
||||
user-select: @select;
|
||||
}
|
||||
|
||||
// Resize anything
|
||||
.resizable(@direction) {
|
||||
resize: @direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Safari fix
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
|
||||
-webkit-column-count: @columnCount;
|
||||
-moz-column-count: @columnCount;
|
||||
column-count: @columnCount;
|
||||
-webkit-column-gap: @columnGap;
|
||||
-moz-column-gap: @columnGap;
|
||||
column-gap: @columnGap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
.hyphens(@mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: @mode;
|
||||
-moz-hyphens: @mode;
|
||||
-ms-hyphens: @mode;
|
||||
-o-hyphens: @mode;
|
||||
hyphens: @mode;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity / 100;
|
||||
}
|
||||
|
||||
// BACKGROUNDS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
||||
#translucent {
|
||||
.background(@color: @white, @alpha: 1) {
|
||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
||||
}
|
||||
.border(@color: @white, @alpha: 1) {
|
||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
||||
.background-clip(padding-box);
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient Bar Colors for buttons and alerts
|
||||
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
color: @textColor;
|
||||
text-shadow: @textShadow;
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
.horizontal(@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.vertical(@startColor: #555, @endColor: #333) {
|
||||
background-color: mix(@startColor, @endColor, 60%);
|
||||
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
|
||||
}
|
||||
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
|
||||
background-color: mix(@midColor, @endColor, 80%);
|
||||
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
|
||||
background-color: mix(@midColor, @endColor, 80%);
|
||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.radial(@innerColor: #555, @outerColor: #333) {
|
||||
background-color: @outerColor;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
|
||||
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
|
||||
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
|
||||
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.striped(@color: #555, @angle: 45deg) {
|
||||
background-color: @color;
|
||||
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
// Grid System
|
||||
// -----------
|
||||
|
||||
// Centered container element
|
||||
.container-fixed() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.makeColumn(@columns: 1, @offset: 0) {
|
||||
float: left;
|
||||
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
|
||||
// The Grid
|
||||
#grid {
|
||||
|
||||
.core (@gridColumnWidth, @gridGutterWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
.span@{index} { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX (0) {}
|
||||
|
||||
.offsetX (@index) when (@index > 0) {
|
||||
.offset@{index} { .offset(@index); }
|
||||
.offsetX(@index - 1);
|
||||
}
|
||||
.offsetX (0) {}
|
||||
|
||||
.offset (@columns) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
|
||||
}
|
||||
|
||||
.span (@columns) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px; // prevent collapsing columns
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container { .span(@gridColumns); }
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
.spanX (@gridColumns);
|
||||
.offsetX (@gridColumns);
|
||||
|
||||
}
|
||||
|
||||
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
.span@{index} { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX (0) {}
|
||||
|
||||
.offsetX (@index) when (@index > 0) {
|
||||
.offset@{index} { .offset(@index); }
|
||||
.offset@{index}:first-child { .offsetFirstChild(@index); }
|
||||
.offsetX(@index - 1);
|
||||
}
|
||||
.offsetX (0) {}
|
||||
|
||||
.offset (@columns) {
|
||||
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
|
||||
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
|
||||
.offsetFirstChild (@columns) {
|
||||
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
|
||||
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
|
||||
.span (@columns) {
|
||||
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
|
||||
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
.clearfix();
|
||||
[class*="span"] {
|
||||
.input-block-level();
|
||||
float: left;
|
||||
margin-left: @fluidGridGutterWidth;
|
||||
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
[class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: @fluidGridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
.spanX (@gridColumns);
|
||||
.offsetX (@gridColumns);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input(@gridColumnWidth, @gridGutterWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX (0) {}
|
||||
|
||||
.span(@columns) {
|
||||
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0; // override margin-left from core grid system
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX
|
||||
.spanX (@gridColumns);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted;
|
||||
@@ -221,11 +226,6 @@
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@mixin box-sizing($boxmodel) {
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
@mixin user-select($select) {
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
|
||||
.admin-settings-section {
|
||||
color: @variable;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td.admin-settings-key {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
.copy-query {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-state {
|
||||
display: inline-block;
|
||||
padding-left: 30px;
|
||||
background: 0 50% no-repeat;
|
||||
background-size: 20px auto;
|
||||
}
|
||||
|
||||
.alert-state-online {
|
||||
background-image: url('/img/online.svg');
|
||||
}
|
||||
|
||||
.alert-state-warning {
|
||||
background-image: url('/img/warn-tiny.svg');
|
||||
}
|
||||
|
||||
.alert-state-critical {
|
||||
background-image: url('/img/critical.svg');
|
||||
}
|
||||
|
||||
.alert-notify-emails {
|
||||
width: 400px;
|
||||
border-right: 1px solid @black;
|
||||
}
|
||||
|
||||
.alert-notify-emails .bootstrap-tagsinput {
|
||||
width: 394px; // offset for 8px left padding and border width
|
||||
}
|
||||
|
||||
.alert-notify-emails .bootstrap-tagsinput input {
|
||||
border: 0;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
|
||||
.app-edit-logo-box {
|
||||
padding: 1.2rem;
|
||||
background: @grafanaPanelBackground;
|
||||
text-align: center;
|
||||
img {
|
||||
max-width: 7rem;
|
||||
}
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.app-edit-links {
|
||||
list-style: none;
|
||||
margin: 0 0 0 2rem;
|
||||
|
||||
li {
|
||||
background: @grafanaPanelBackground;
|
||||
margin-top: 4px;
|
||||
padding: 0.2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.app-edit-description {
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
|
||||
.login-form {
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 700px;
|
||||
margin: 70px auto 0 auto;
|
||||
}
|
||||
|
||||
.login-box-logo {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 125px;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
color: @linkColor;
|
||||
position: relative;
|
||||
top: -90px;
|
||||
font-size: 3rem;
|
||||
text-shadow: 3px 3px 5px black;
|
||||
}
|
||||
}
|
||||
|
||||
.login-inner-box {
|
||||
background: @grafanaPanelBackground;
|
||||
}
|
||||
|
||||
.login-tab-header {
|
||||
background: @grafanaTargetBackground;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-login-tab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
padding: 10px 10px;
|
||||
|
||||
&.active {
|
||||
background: darken(@grafanaTargetBackground, 5%);
|
||||
color: @white;
|
||||
}
|
||||
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 170px;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
display: block;
|
||||
width: 15%;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
padding-top: 3px;
|
||||
color: darken(@textColor, 20%);
|
||||
border-top: 3px solid @red;
|
||||
&.password-strength-ok {
|
||||
width: 40%;
|
||||
border-top: 3px solid lighten(@yellow, 10%);
|
||||
}
|
||||
&.password-strength-good {
|
||||
width: 100%;
|
||||
border-top: 3px solid lighten(@green, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.login-submit-button-row {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
button {
|
||||
padding: 14px 23px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
min-width: 150px;
|
||||
display: inline-block;
|
||||
border: 1px solid lighten(@btnInverseBackground, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.login-oauth {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.btn {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background: #dd4b39;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
background: #555;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.password-recovery {
|
||||
background: @grafanaTargetBackground;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
a {
|
||||
color: @grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin: 5px 25% 25px 25%;
|
||||
|
||||
.login-divider-line {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-bottom: 1px solid @gray;
|
||||
|
||||
.login-divider-text {
|
||||
background-color: @grayDarker;
|
||||
color: @grayLight;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signup-page-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(../img/background_tease.jpg);
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.invite-box {
|
||||
text-align: center;
|
||||
border: 1px solid @grafanaTargetFuncBackground;
|
||||
background-color: @grafanaPanelBackground;
|
||||
width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.tight-form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
float: right;
|
||||
font-size: 140%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.modal-tagline {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
.playlist-search-container {
|
||||
// margin: 15px;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
width: 700px;
|
||||
box-shadow: 0px 0px 55px 0px black;
|
||||
background-color: @grafanaPanelBackground;
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-switches {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.playlist-search-field-wrapper {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-results-container {
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
|
||||
.search-item:hover, .search-item.selected {
|
||||
background-color: @grafanaListHighlight;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.search-result-tag {
|
||||
opacity: 0.70;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-star, .fa-star-o {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
.search-result-link {
|
||||
color: @grafanaListMainLinkColor;
|
||||
.fa {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
white-space: nowrap;
|
||||
background-color: @grafanaListBackground;
|
||||
margin-bottom: 4px;
|
||||
.search-result-icon:before {
|
||||
content: "\f009";
|
||||
}
|
||||
|
||||
&.search-item-dash-home .search-result-icon:before {
|
||||
content: "\f015";
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-tags {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.search-result-actions {
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.signup-page-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(/img/background_tease.jpg);
|
||||
|
||||
.signup-logo-container {
|
||||
width: 150px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
|
||||
[ng\:cloak], [ng-cloak], .ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
.highlight-word {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
// Close icons
|
||||
// --------------------------------------------------
|
||||
.close {
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: @baseLineHeight;
|
||||
color: @black;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.opacity(40);
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Utility classes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Quick floats
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// Toggling content
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Visibility
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// For Affix plugin
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
input[type=text].ng-dirty.ng-invalid {
|
||||
box-shadow: inset 0 0px 7px @red;
|
||||
}
|
||||
|
||||
form input.ng-invalid {
|
||||
color: @errorText;
|
||||
}
|
||||
@@ -1,342 +0,0 @@
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
@black: #000;
|
||||
@gray: #bbb;
|
||||
@grayDark: #262626;
|
||||
@grayDarker: #1f1f1f;
|
||||
|
||||
@grayLight: #ADAFAE;
|
||||
@grayLighter: #BBBFC2;
|
||||
@white: #fff;
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
@blue: #33B5E5;
|
||||
@blueDark: #005f81;
|
||||
@green: #669900;
|
||||
@red: #CC3900;
|
||||
@yellow: #ECBB13;
|
||||
@orange: #FF8800;
|
||||
@pink: #FF4444;
|
||||
@purple: #9933CC;
|
||||
@variable: #32D1DF;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
@online: #10a345;
|
||||
@warn: #ffc03c;
|
||||
@critical: #ed2e18;
|
||||
|
||||
// grafana Variables
|
||||
// -------------------------
|
||||
@grafanaPanelBackground: @grayDarker;
|
||||
@grafanaPanelBorder: solid 1px @grayDark;
|
||||
@grafanaTriggerBorder: solid 1px #555;
|
||||
|
||||
// Graphite Target Editor
|
||||
@grafanaTargetBorder: @black;
|
||||
@grafanaTargetBackground: @grayDark;
|
||||
@grafanaTargetColor: #c8c8c8;
|
||||
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
|
||||
@grafanaTargetSegmentBorder: #050505;
|
||||
|
||||
@grafanaTargetFuncBackground: #333;
|
||||
@grafanaTargetFuncHightlight: #444;
|
||||
|
||||
@grafanaSelectBackground: @grafanaTargetFuncBackground;
|
||||
|
||||
@modalBackground: @black;
|
||||
@codeTagBackground: #444;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@bodyBackground: rgb(20,20,20);
|
||||
@pageBackground: @grayDarker;
|
||||
@textColor: @grayLighter;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@linkColor: darken(@white,11%);
|
||||
@linkColorDisabled: darken(@linkColor,30%);
|
||||
@linkColorHover: @white;
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
@baseFontSize: 14px;
|
||||
@baseFontWeight: 400;
|
||||
@baseFontFamily: @sansFontFamily;
|
||||
@baseLineHeight: 20px;
|
||||
@altFontFamily: @serifFontFamily;
|
||||
@fontWeightSemi: 600;
|
||||
|
||||
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
|
||||
@headingsFontWeight: 400; // instead of browser default, bold
|
||||
@headingsFontStyle: normal;
|
||||
@headingsColor: darken(@white,11%); // empty to use BS default, @textColor
|
||||
@inputText: @grayLight;
|
||||
|
||||
|
||||
// Component sizing
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
|
||||
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
|
||||
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
|
||||
@fontSizeMini: @baseFontSize * 0.75; // ~11px
|
||||
|
||||
@paddingLarge: 11px 19px; // 44px
|
||||
@paddingSmall: 2px 10px; // 26px
|
||||
@paddingMini: 0px 6px; // 22px
|
||||
|
||||
@baseBorderRadius: 3px;
|
||||
@borderRadiusLarge: 4px;
|
||||
@borderRadiusSmall: 2px;
|
||||
|
||||
// Lists
|
||||
@grafanaListBackground: @grayDark;
|
||||
@grafanaListAccent: lighten(@grayDarker, 2%);
|
||||
@grafanaListBorderTop: @grayDark;
|
||||
@grafanaListBorderBottom: @black;
|
||||
@grafanaListHighlight: #333;
|
||||
@grafanaListMainLinkColor: @textColor;
|
||||
|
||||
// Scrollbars
|
||||
@scrollbarBackground: #3a3a3a;
|
||||
@scrollbarBackground2: #3a3a3a;
|
||||
@scrollbarBorder: black;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@tableBackground: transparent; // overall background-color
|
||||
@tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping
|
||||
@tableBackgroundHover: @grayDark; // for hover
|
||||
@tableBorder: @grayDark; // table and cell border
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
@btnBackground: @grayDark;
|
||||
@btnBackgroundHighlight: darken(@grayLight, 15%);
|
||||
@btnBackgroundShadow: darken(@grayLight, 15%);
|
||||
@btnBorder: #bbb;
|
||||
|
||||
@btnPrimaryBackground: @blueDark;
|
||||
@btnPrimaryBackgroundHighlight: lighten(@blueDark, 5%);
|
||||
|
||||
@btnInfoBackground: lighten(@purple, 3%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 3%);
|
||||
|
||||
@btnSuccessBackground: lighten(@green, 3%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 3%);
|
||||
|
||||
@btnWarningBackground: lighten(@orange, 3%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 3%);
|
||||
|
||||
@btnDangerBackground: lighten(@red, 3%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 3%);
|
||||
|
||||
@btnInverseBackground: @grayDark;
|
||||
@btnInverseBackgroundHighlight: lighten(@grayDark, 1%);
|
||||
@btnInverseText: @textColor;
|
||||
@btnInverseBorder: #333;
|
||||
|
||||
@btnText: @gray;
|
||||
|
||||
@iconContainerBackground: @black;
|
||||
@iconContainerBackgroundHighlight: lighten(@black, 5%);
|
||||
@iconContainerBorder: 1px solid transparent;
|
||||
@iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
@inputBackground: lighten(@grayDark,5%);
|
||||
@inputBorder: lighten(@grayDark,5%);
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputDisabledBackground: #555;
|
||||
@formActionsBackground: transparent;
|
||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
@labelBackground: @grayDark;
|
||||
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
@sideMenuTopShadow: @navbarDropdownShadow;
|
||||
@sideMenuBackground: @grayDark;
|
||||
@sideMenuBackgroundHighlight: lighten(@grayDark, 4%);
|
||||
@sideMenuShadow: 0 0 35px 0 @bodyBackground;
|
||||
|
||||
// Search
|
||||
@searchShadow: 0 0 35px 0 @bodyBackground;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
@dropdownBackground: @heroUnitBackground;
|
||||
@dropdownBorder: rgba(0,0,0,.2);
|
||||
@dropdownDividerTop: transparent;
|
||||
@dropdownDividerBottom: #444;
|
||||
@dropdownDivider: @dropdownDividerBottom;
|
||||
@dropdownTitle: @linkColorDisabled;
|
||||
|
||||
@dropdownLinkColor: @textColor;
|
||||
@dropdownLinkColorHover: @white;
|
||||
@dropdownLinkColorActive: @white;
|
||||
|
||||
@dropdownLinkBackgroundActive: @blueDark;
|
||||
@dropdownLinkBackgroundHover: @blueDark;
|
||||
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Z-index master list
|
||||
// -------------------------
|
||||
// Used for a bird's eye view of components dependent on the z-axis
|
||||
// Try to avoid customizing these :)
|
||||
@zindexDropdown: 1000;
|
||||
@zindexPopover: 1010;
|
||||
@zindexTooltip: 1020;
|
||||
@zindexFixedNavbar: 1030;
|
||||
@zindexModalBackdrop: 1040;
|
||||
@zindexModal: 1050;
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
@iconSpritePath: "../img/glyphicons-halflings.png";
|
||||
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
@placeholderText: darken(@textColor, 25%);
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
@hrBorder: @grayDark;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
@horizontalComponentOffset: 180px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
@wellBackground: #131517;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 52px;
|
||||
@navbarBackgroundHighlight: @grayDark;
|
||||
@navbarBackground: @grayDark;
|
||||
@navbarBorder: 1px solid @bodyBackground;
|
||||
|
||||
@navbarText: @grayLight;
|
||||
@navbarLinkColor: @grayLight;
|
||||
@navbarLinkColorHover: @white;
|
||||
@navbarLinkColorActive: @navbarLinkColorHover;
|
||||
@navbarLinkBackgroundHover: transparent;
|
||||
@navbarLinkBackgroundActive: @navbarBackground;
|
||||
@navbarBrandColor: @linkColor;
|
||||
@navbarDropdownShadow: inset 0px 4px 10px -4px @bodyBackground;
|
||||
|
||||
@navbarButtonBackground: lighten(@navbarBackground, 3%);
|
||||
@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%);
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
@paginationBackground: @bodyBackground;
|
||||
@paginationBorder: transparent;
|
||||
@paginationActiveBackground: @blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
@heroUnitBackground: @grayDark;
|
||||
@heroUnitHeadingColor: inherit;
|
||||
@heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
@warningText: darken(#c09853, 10%);
|
||||
@warningBackground: @orange;
|
||||
|
||||
@errorText: #b94a48;
|
||||
@errorBackground: @btnDangerBackground;
|
||||
|
||||
@successText: #468847;
|
||||
@successBackground: @btnSuccessBackground;
|
||||
|
||||
@infoText: @blueDark;
|
||||
@infoBackground: @btnInfoBackground;
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
@tooltipColor: @white;
|
||||
@tooltipBackground: rgb(58, 57, 57);
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: @tooltipBackground;
|
||||
@tooltipLinkColor: @linkColor;
|
||||
|
||||
@popoverBackground: @heroUnitBackground;
|
||||
@popoverArrowWidth: 10px;
|
||||
@popoverArrowColor: @popoverBackground;
|
||||
@popoverTitleBackground: @popoverBackground;
|
||||
|
||||
// Special enhancement for popovers
|
||||
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
|
||||
@popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
// images
|
||||
@checkboxImageUrl: '../img/checkbox.png';
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Default 940px grid
|
||||
// -------------------------
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 60px;
|
||||
@gridGutterWidth: 20px;
|
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// 1200px min
|
||||
@gridColumnWidth1200: 70px;
|
||||
@gridGutterWidth1200: 30px;
|
||||
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
|
||||
|
||||
// 768px-979px
|
||||
@gridColumnWidth768: 42px;
|
||||
@gridGutterWidth768: 20px;
|
||||
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
|
||||
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
|
||||
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
|
||||
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
|
||||
@@ -155,6 +155,11 @@ $iconContainerBackgroundHighlight: lighten($black, 5%);
|
||||
$iconContainerBorder: 1px solid transparent;
|
||||
$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
$heroUnitBackground: $grayDark;
|
||||
$heroUnitHeadingColor: inherit;
|
||||
$heroUnitLeadColor: inherit;
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
@@ -167,13 +172,6 @@ $inputHeight: $baseLineHeight + 10px; // base line-height + 8p
|
||||
$labelBackground: $grayDark;
|
||||
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$sideMenuTopShadow: $navbarDropdownShadow;
|
||||
$sideMenuBackground: $grayDark;
|
||||
$sideMenuBackgroundHighlight: lighten($grayDark, 4%);
|
||||
$sideMenuShadow: 0 0 35px 0 $bodyBackground;
|
||||
|
||||
// Search
|
||||
$searchShadow: 0 0 35px 0 $bodyBackground;
|
||||
|
||||
@@ -194,7 +192,6 @@ $dropdownLinkBackgroundActive: $blueDark;
|
||||
$dropdownLinkBackgroundHover: $blueDark;
|
||||
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -210,13 +207,6 @@ $zindexFixedNavbar: 1030;
|
||||
$zindexModalBackdrop: 1040;
|
||||
$zindexModal: 1050;
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
$iconSpritePath: "../img/glyphicons-halflings.png";
|
||||
$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
$placeholderText: darken($textColor, 25%);
|
||||
|
||||
@@ -235,12 +225,6 @@ $horizontalComponentOffset: 180px;
|
||||
// -------------------------
|
||||
$wellBackground: #131517;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarCollapseWidth: 979px;
|
||||
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
|
||||
|
||||
$navbarHeight: 52px;
|
||||
$navbarBackgroundHighlight: $grayDark;
|
||||
$navbarBackground: $grayDark;
|
||||
@@ -258,20 +242,19 @@ $navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground;
|
||||
$navbarButtonBackground: lighten($navbarBackground, 3%);
|
||||
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$sideMenuTopShadow: $navbarDropdownShadow;
|
||||
$sideMenuBackground: $grayDark;
|
||||
$sideMenuBackgroundHighlight: lighten($grayDark, 4%);
|
||||
$sideMenuShadow: 0 0 35px 0 $bodyBackground;
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
$paginationBackground: $bodyBackground;
|
||||
$paginationBorder: transparent;
|
||||
$paginationActiveBackground: $blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
$heroUnitBackground: $grayDark;
|
||||
$heroUnitHeadingColor: inherit;
|
||||
$heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warningText: darken(#c09853, 10%);
|
||||
|
||||
@@ -1,359 +0,0 @@
|
||||
// Cosmo 2.3.2
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
@black: #000;
|
||||
@grayDarker: lighten(#000, 11.5%); // #222
|
||||
@grayDark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@grayLight: lighten(#000, 60%); // #999
|
||||
@grayLighter: lighten(#000, 97.5%); // #eee
|
||||
@white: #fff;
|
||||
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
@blueOrig: #007FFF;
|
||||
@blue: #2AB2E4;
|
||||
@blueDark: #75CAEB;
|
||||
@green: #28B62C;
|
||||
@red: #FF4136;
|
||||
@yellow: #FF851B;
|
||||
@orange: #FF7518;
|
||||
@pink: #E671B8;
|
||||
@purple: #9954BB;
|
||||
@variable: #2AB2E4;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
@online: #01A64F;
|
||||
@warn: #F79520;
|
||||
@critical: #EC2128;
|
||||
|
||||
// grafana Variables
|
||||
// -------------------------
|
||||
@grafanaPanelBackground: @grayLighter;
|
||||
@grafanaPanelBorder: solid 1px #ddd;
|
||||
@grafanaTriggerBorder: solid 1px @grayLight;
|
||||
|
||||
// Submenu
|
||||
@submenuBackground: rgb(218, 217, 217);
|
||||
@submenuBorder: @white;
|
||||
|
||||
// Tabs
|
||||
@fullEditBorder: @grayLighter;
|
||||
|
||||
// Graphite Target Editor
|
||||
@grafanaTargetBorder: #ddd;
|
||||
@grafanaTargetBackground: #efefef;
|
||||
@grafanaTargetColor: @textColor;
|
||||
@grafanaTargetColorHide: lighten(@textColor, 25%);
|
||||
@grafanaTargetSegmentBorder: #ddd;
|
||||
|
||||
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
|
||||
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
|
||||
|
||||
@grafanaSelectBackground: @grafanaTargetFuncBackground;
|
||||
|
||||
@modalBackground: @bodyBackground;
|
||||
@codeTagBackground: #ddd;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@bodyBackground: #EFEFEF;
|
||||
@pageBackground: @white;
|
||||
@textColor: @gray;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@linkColor: @gray;
|
||||
@linkColorDisabled: lighten(@linkColor,30%);
|
||||
@linkColorHover: darken(@linkColor, 20%);
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
@baseFontSize: 14px;
|
||||
@baseFontWeight: 400;
|
||||
@fontWeightSemi: 600;
|
||||
@baseFontFamily: @sansFontFamily;
|
||||
@baseLineHeight: 20px;
|
||||
@altFontFamily: @serifFontFamily;
|
||||
|
||||
@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily
|
||||
@headingsFontWeight: normal; // instead of browser default, bold
|
||||
@headingsFontStyle: normal;
|
||||
@headingsColor: @textColor; // empty to use BS default, @textColor
|
||||
|
||||
|
||||
// Component sizing
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
|
||||
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
|
||||
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
|
||||
@fontSizeMini: @baseFontSize * 0.75; // ~11px
|
||||
|
||||
@paddingLarge: 22px 30px; // 66px
|
||||
@paddingSmall: 2px 10px; // 26px
|
||||
@paddingMini: 2px 6px; // 24px
|
||||
|
||||
@baseBorderRadius: 3px;
|
||||
@borderRadiusLarge: 4px;
|
||||
@borderRadiusSmall: 2px;
|
||||
|
||||
// Lists
|
||||
@grafanaListBackground: darken(@grayLighter,5%);
|
||||
@grafanaListAccent: darken(@grayLighter,8%);
|
||||
@grafanaListBorderTop: #eee;
|
||||
@grafanaListBorderBottom: #eee;
|
||||
@grafanaListHighlight: darken(@grayLighter,10%);
|
||||
@grafanaListHighlightContrast: #ddd;
|
||||
@grafanaListMainLinkColor: @textColor;
|
||||
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@tableBackground: transparent; // overall background-color
|
||||
@tableBackgroundAccent: #f9f9f9; // for striping
|
||||
@tableBackgroundHover: #E8F8FD; // for hover
|
||||
@tableBorder: #ddd; // table and cell border
|
||||
|
||||
// Scrollbars
|
||||
@scrollbarBackground: @grayLighter;
|
||||
@scrollbarBackground2: @grayLighter;
|
||||
@scrollbarBorder: @grayLight;
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
@btnBackground: @grayLighter;
|
||||
@btnBackgroundHighlight: darken(@grayLighter, 15%);
|
||||
@btnBorder: #bbb;
|
||||
|
||||
@btnPrimaryBackground: lighten(@blue, 3%);
|
||||
@btnPrimaryBackgroundHighlight: darken(@blue, 3%);
|
||||
|
||||
@btnInfoBackground: lighten(@purple, 3%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 3%);
|
||||
|
||||
@btnSuccessBackground: lighten(@green, 3%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 3%);
|
||||
|
||||
@btnWarningBackground: lighten(@orange, 3%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 3%);
|
||||
|
||||
@btnDangerBackground: lighten(@red, 3%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 3%);
|
||||
|
||||
@btnInverseBackground: @grayLighter;
|
||||
@btnInverseBackgroundHighlight: darken(@grayLighter, 5%);
|
||||
@btnInverseText: @black;
|
||||
@btnInverseBorder: @grayLight;
|
||||
|
||||
@btnText: @grayLighter;
|
||||
|
||||
@iconContainerBackground: @white;
|
||||
@iconContainerBackgroundHighlight: lighten(@white, 5%);
|
||||
@iconContainerBorder: 1px solid rgba(0,0,0, 0.05);
|
||||
@iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
@inputBackground: @white;
|
||||
@inputBorder: @grayLight;
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputDisabledBackground: @grayLighter;
|
||||
@formActionsBackground: #f5f5f5;
|
||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
@inputText: #020202;
|
||||
@labelBackground: #f8f8f8;
|
||||
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
@sideMenuBackground: @grafanaPanelBackground;
|
||||
@sideMenuBackgroundHighlight: darken(@sideMenuBackground, 4%);
|
||||
|
||||
// search
|
||||
@searchShadow: 0 5px 30px 0 lighten(@grayLight, 30%);
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
@dropdownBackground: @white;
|
||||
@dropdownBorder: @grafanaTargetBorder;
|
||||
@dropdownDividerTop: #e5e5e5;
|
||||
@dropdownDividerBottom: @white;
|
||||
@dropdownDivider: @dropdownDividerTop;
|
||||
@dropdownTitle: #333;
|
||||
|
||||
@dropdownLinkColor: @grayDark;
|
||||
@dropdownLinkColorHover: @white;
|
||||
@dropdownLinkColorActive: @white;
|
||||
|
||||
@dropdownLinkBackgroundActive: @blue;
|
||||
@dropdownLinkBackgroundHover: @blue;
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Z-index master list
|
||||
// -------------------------
|
||||
// Used for a bird's eye view of components dependent on the z-axis
|
||||
// Try to avoid customizing these :)
|
||||
@zindexDropdown: 1000;
|
||||
@zindexPopover: 1010;
|
||||
@zindexTooltip: 1030;
|
||||
@zindexFixedNavbar: 1030;
|
||||
@zindexModalBackdrop: 1040;
|
||||
@zindexModal: 1050;
|
||||
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
@iconSpritePath: "../img/glyphicons-halflings.png";
|
||||
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
@placeholderText: @grayLight;
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
@hrBorder: @grayLighter;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
@horizontalComponentOffset: 180px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
@wellBackground: @grayLighter;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 52px;
|
||||
@navbarBackgroundHighlight: #f8f8f8;
|
||||
@navbarBackground: #f8f8f8;
|
||||
@navbarBorder: 1px solid @grafanaTargetBorder;
|
||||
|
||||
@navbarText: #666;
|
||||
@navbarLinkColor: #666;
|
||||
@navbarLinkColorHover: #333;
|
||||
@navbarLinkColorActive: #555;
|
||||
@navbarLinkBackgroundHover: transparent;
|
||||
@navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%);
|
||||
@navbarDropdownShadow: inset 0px 4px 7px -4px darken(@bodyBackground, 20%);
|
||||
|
||||
@navbarBrandColor: @navbarLinkColor;
|
||||
|
||||
@navbarButtonBackground: lighten(@navbarBackground, 3%);
|
||||
@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%);
|
||||
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
@paginationBackground: @grayLight;
|
||||
@paginationBorder: transparent;
|
||||
@paginationActiveBackground: @blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
@heroUnitBackground: @grayLighter;
|
||||
@heroUnitHeadingColor: inherit;
|
||||
@heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
@warningText: lighten(@orange, 10%);
|
||||
@warningBackground: @orange;
|
||||
@warningBorder: transparent;
|
||||
|
||||
@errorText: lighten(@red, 10%);
|
||||
@errorBackground: @red;
|
||||
@errorBorder: transparent;
|
||||
|
||||
@successText: lighten(@green, 10%);
|
||||
@successBackground: @green;
|
||||
@successBorder: transparent;
|
||||
|
||||
@infoText: lighten(@purple,10%);
|
||||
@infoBackground: @purple;
|
||||
@infoBorder: transparent;
|
||||
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
@tooltipColor: @white;
|
||||
@tooltipBackground: @grayDark;
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: @tooltipBackground;
|
||||
@tooltipLinkColor: darken(@white,11%);
|
||||
|
||||
@popoverBackground: @white;
|
||||
@popoverArrowWidth: 15px;
|
||||
@popoverArrowColor: @white;
|
||||
@popoverTitleBackground: @white;
|
||||
|
||||
// Special enhancement for popovers
|
||||
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
|
||||
@popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
// images
|
||||
@checkboxImageUrl: '../img/checkbox_white.png';
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default 940px grid
|
||||
// -------------------------
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 60px;
|
||||
@gridGutterWidth: 20px;
|
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// 1200px min
|
||||
@gridColumnWidth1200: 70px;
|
||||
@gridGutterWidth1200: 30px;
|
||||
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
|
||||
|
||||
// 768px-979px
|
||||
@gridColumnWidth768: 42px;
|
||||
@gridGutterWidth768: 20px;
|
||||
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
|
||||
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
|
||||
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
|
||||
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
|
||||
@@ -43,13 +43,16 @@ $grafanaPanelBackground: $grayLighter;
|
||||
$grafanaPanelBorder: solid 1px #ddd;
|
||||
$grafanaTriggerBorder: solid 1px $grayLight;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$bodyBackground: #EFEFEF;
|
||||
$pageBackground: $white;
|
||||
$textColor: $gray;
|
||||
|
||||
// Submenu
|
||||
$submenuBackground: rgb(218, 217, 217);
|
||||
$submenuBorder: $white;
|
||||
|
||||
// Tabs
|
||||
$fullEditBorder: $grayLighter;
|
||||
|
||||
// Graphite Target Editor
|
||||
$grafanaTargetBorder: #ddd;
|
||||
$grafanaTargetBackground: #efefef;
|
||||
@@ -65,12 +68,6 @@ $grafanaSelectBackground: $grafanaTargetFuncBackground;
|
||||
$modalBackground: $bodyBackground;
|
||||
$codeTagBackground: #ddd;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$bodyBackground: #EFEFEF;
|
||||
$pageBackground: $white;
|
||||
$textColor: $gray;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$linkColor: $gray;
|
||||
@@ -221,12 +218,6 @@ $zindexModalBackdrop: 1040;
|
||||
$zindexModal: 1050;
|
||||
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
$iconSpritePath: "../img/glyphicons-halflings.png";
|
||||
$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
|
||||
// Input placeholder text color
|
||||
// -------------------------
|
||||
$placeholderText: $grayLight;
|
||||
@@ -249,8 +240,6 @@ $wellBackground: $grayLighter;
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarCollapseWidth: 979px;
|
||||
$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1;
|
||||
|
||||
$navbarHeight: 52px;
|
||||
$navbarBackgroundHighlight: #f8f8f8;
|
||||
|
||||
@@ -4,8 +4,8 @@ module.exports = function(config) {
|
||||
src:{
|
||||
options: {},
|
||||
files: {
|
||||
"<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss",
|
||||
"<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss",
|
||||
"<%= genDir %>/css/grafana.dark.min.css": "<%= srcDir %>/less/grafana.dark.scss",
|
||||
"<%= genDir %>/css/grafana.light.min.css": "<%= srcDir %>/less/grafana.light.scss",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user