more work on annotations
This commit is contained in:
Torkel Odegaard
@@ -0,0 +1,36 @@
|
||||
@import "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);
|
||||
|
||||
|
||||
// Media queries
|
||||
// ---------------------
|
||||
@media (max-width: 767px) {
|
||||
div.panel {
|
||||
width: 100% !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,418 @@
|
||||
@import "submenu.less";
|
||||
|
||||
.navbar-static-top {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.grafana-dashboard-hide-controls {
|
||||
padding: 0;
|
||||
.grafana-row {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-search-panel {
|
||||
padding: 6px 10px;
|
||||
|
||||
.search-field-wrapper {
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected td, tr.selected:nth-child(odd)>td {
|
||||
background: @blue;
|
||||
color: white;
|
||||
text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-button {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
margin: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.grafana-search-metric-actions {
|
||||
visibility: hidden;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.grafana-search-metric-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.grafana-search-metric-result:hover {
|
||||
.grafana-search-metric-actions {
|
||||
visibility: visible;
|
||||
}
|
||||
.grafana-search-metric-name {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
.yaxisLabel {
|
||||
top: 50%;
|
||||
left: -20px;
|
||||
transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform-origin: 0 0;
|
||||
-o-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.axisLabel {
|
||||
color: @textColor;
|
||||
font-size: @fontSizeSmall;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hidden-series {
|
||||
a {
|
||||
color: darken(@linkColor, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-fullscreen {
|
||||
z-index: 1500;
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 49px;
|
||||
bottom: 0px;
|
||||
outline: 1px solid #101214;
|
||||
border-top: 1px solid #3e444c;
|
||||
padding: 0 10px;
|
||||
background: @kibanaPanelBackground;
|
||||
}
|
||||
|
||||
.dashboard-fullscreen .container-fluid.main {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
position: fixed;
|
||||
right: -10000px;
|
||||
}
|
||||
|
||||
// Graphite Graph Legends
|
||||
|
||||
.grafana-legend-container {
|
||||
margin: 4px 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.grafana-legend-container .popover-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.histogram-legend {
|
||||
display:inline-block;
|
||||
padding: 0 4px;
|
||||
i {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.histogram-legend-dot {
|
||||
display:inline-block;
|
||||
height:10px;
|
||||
width:10px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.histogram-legend-item {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.histogram-chart {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.histogram-legend-popover {
|
||||
width: 200px;
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn {
|
||||
padding: 1px 3px;
|
||||
margin-right: 0px;
|
||||
line-height: initial;
|
||||
}
|
||||
.close {
|
||||
margin-right: 5px;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
text-shadow: none;
|
||||
}
|
||||
.editor-row {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-full-edit-tabs {
|
||||
margin-top: 10px;
|
||||
min-height: 250px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
border-top: 1px solid black;
|
||||
|
||||
.tabs {
|
||||
.nav-tabs {
|
||||
margin: 0;
|
||||
background: @grayDark;
|
||||
border-top: 1px solid #555;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
overflow: visible;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
line-height: 15px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Graphite Target Editor */
|
||||
@grafanaTargetColor: #c8c8c8;
|
||||
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
|
||||
|
||||
.grafana-target {
|
||||
}
|
||||
|
||||
.grafana-target-inner-wrapper {
|
||||
//border-top: 1px solid #444444;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grafana-target-inner {
|
||||
border-top: 2px solid black;
|
||||
border-left: 2px solid black;
|
||||
border-right: 2px solid black;
|
||||
background: @grayDark;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grafana-target-onoff {
|
||||
display: inline-block;
|
||||
padding: 5px 7px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.grafana-segment-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
margin-right: 90px;
|
||||
margin-left: 30px;
|
||||
>li {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target-segment {
|
||||
padding: 5px 7px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
border-right: 2px solid #050505;
|
||||
color: @grafanaTargetColor;
|
||||
display: inline-block;
|
||||
|
||||
.grafana-target-hidden & {
|
||||
color: @grafanaTargetColorHide;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
background: #444;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target-function {
|
||||
background: #444;
|
||||
&:hover {
|
||||
background: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target-controls-left {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 30px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.grafana-target-controls {
|
||||
width: 120px;
|
||||
float: right;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
|
||||
>li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 5px 7px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
color: @grafanaTargetColor;
|
||||
|
||||
.grafana-target-hidden & {
|
||||
color: @grafanaTargetColorHide;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text].grafana-target-text-input {
|
||||
padding: 5px 7px;
|
||||
border: 1px solid #050505;
|
||||
margin: 0px;
|
||||
background: transparent;
|
||||
width: 80%;
|
||||
float: left;
|
||||
color: @grafanaTargetColor;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.grafana-target .dropdown {
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
|
||||
input[type=text].func-param {
|
||||
border: none;
|
||||
background: inherit;
|
||||
width: 30px;
|
||||
border-radius: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grafana-target {
|
||||
.popover-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-func-editor {
|
||||
min-width: 140px;
|
||||
.grafana-func-editor-header {
|
||||
background: #41474c;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #353a3e;
|
||||
padding: 3px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.editor-row {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// 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: grayDark; }
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
height: 50px;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3a3a3a), color-stop(100%, #222222));
|
||||
border: 1px solid #0d0d0d;
|
||||
border-top: 1px solid #666666;
|
||||
border-left: 1px solid #666666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
width: 50px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3a3a), color-stop(100%, #222222));
|
||||
border: 1px solid #1f1f1f;
|
||||
border-top: 1px solid #666666;
|
||||
border-left: 1px solid #666666;
|
||||
}
|
||||
|
||||
|
||||
// SPECTRUM CSS overrides
|
||||
|
||||
.sp-replacer {
|
||||
background: inherit;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,545 @@
|
||||
// Media queries
|
||||
// ---------------------
|
||||
@media (max-width: 767px) {
|
||||
div.panel {
|
||||
width: 100% !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
// ---------------------
|
||||
.container-fluid {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.container.grafana-container {
|
||||
padding: 5px 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Backgrounds
|
||||
// ---------------------
|
||||
|
||||
.bgNav {
|
||||
background: @navbarBackground;
|
||||
}
|
||||
|
||||
.bgPrimary {
|
||||
background: @btnPrimaryBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
}
|
||||
|
||||
.bgInfo {
|
||||
background: @btnInfoBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
|
||||
}
|
||||
|
||||
.bgSuccess {
|
||||
background: @btnSuccessBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
|
||||
}
|
||||
|
||||
.bgWarning {
|
||||
background: @btnWarningBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
}
|
||||
|
||||
.bgDanger {
|
||||
background: @btnDangerBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
|
||||
}
|
||||
|
||||
.bgInverse {
|
||||
background: @btnInverseBackground;
|
||||
color: rgba(255,255,255,.90);
|
||||
|
||||
}
|
||||
|
||||
code, pre {
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: inline-table;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.panel-container {
|
||||
padding: 0px 0px 0px 0px;
|
||||
background: @kibanaPanelBackground;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
border: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.panel-loading {
|
||||
position:absolute;
|
||||
top: 0px;
|
||||
right: 4px;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
.panel div.panel-extra div.panel-extra-container {
|
||||
margin-right: -10px;
|
||||
margin-top: 3px;
|
||||
text-align: center;
|
||||
ul {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.panel div.panel-extra {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.panel div.panel-extra .extra {
|
||||
float:right !important;
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
color: @white;
|
||||
padding: 3px 10px 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#events {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.legend {
|
||||
color: @black;
|
||||
}
|
||||
|
||||
div.fake-input {
|
||||
background-color: @inputBackground;
|
||||
border: 1px solid @inputBorder;
|
||||
.border-radius(@inputBorderRadius @inputBorderRadius @inputBorderRadius @inputBorderRadius);
|
||||
}
|
||||
|
||||
hr.small {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
form input.ng-invalid {
|
||||
color: @errorText;
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
margin-right: 10px;
|
||||
font-size: 1.7em;
|
||||
font-weight: bold;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
.editor-title small {
|
||||
opacity: 0.5;
|
||||
font-size: 0.7em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 1px solid @tableBorder;
|
||||
}
|
||||
|
||||
.table-unpadded {
|
||||
th,
|
||||
td {
|
||||
padding: 0px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.spy {
|
||||
position:absolute;
|
||||
right:0px;
|
||||
top:0px;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
border-width: 0 0 0px;
|
||||
}
|
||||
|
||||
.kibana-row {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-tab {
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.row-button {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.row-text {
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.row-open {
|
||||
margin-top: 5px;
|
||||
left:-34px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
transition: .25s left;
|
||||
transition-delay: .25s;
|
||||
-webkit-transition-delay: .25s;
|
||||
}
|
||||
|
||||
.row-open:hover {
|
||||
left:-12px;
|
||||
}
|
||||
|
||||
.odd {
|
||||
background-color: @tableBackgroundAccent;
|
||||
}
|
||||
|
||||
.nomargin {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
[ng\:cloak], [ng-cloak], .ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table tbody + tbody {
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.ui-draggable-dragging {
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.dragInProgress .panel-container {
|
||||
border: 3px solid rgba(100,100,100,0.50);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: @linkColor;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: @linkColorHover;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.tiny {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.smaller {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.input-smaller {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.string {color:lighten(@textColor, 5%)}
|
||||
.number {color:lighten(@infoText, 5%)}
|
||||
.boolean {color:lighten(@warningText, 5%)}
|
||||
.key {color:lighten(@errorText, 5%)}
|
||||
|
||||
.btn-active {
|
||||
background-color: #E6E6E6;
|
||||
background-image: none;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
outline: 0 none
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
background-color: @btnDangerBackgroundHighlight;
|
||||
}
|
||||
|
||||
.faded {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
div.flot-text {
|
||||
color: @textColor !important;
|
||||
}
|
||||
|
||||
.dashboard-notice {
|
||||
z-index:8000;
|
||||
margin-left:0px;
|
||||
padding:3px 0px 3px 0px;
|
||||
width:100%;
|
||||
padding-left:20px;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
|
||||
.alert-warning {
|
||||
background-color: @warningBackground;
|
||||
border-color: @warningBorder;
|
||||
color: @warningText;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
* popover-extra-placements.css v0.1
|
||||
* http://twitter.github.com/bootstrap-popover-extra-placements
|
||||
* ===================================================
|
||||
* Copyright 2012 Daniel Kleehammer
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================== */
|
||||
|
||||
|
||||
/*************************
|
||||
* Top Positions
|
||||
*************************/
|
||||
|
||||
/** Top Left **/
|
||||
.popover.topLeft {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.topLeft .arrow {
|
||||
bottom: -10px;
|
||||
left: 25%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0;
|
||||
border-top-color: @popoverTitleBackground;
|
||||
}
|
||||
|
||||
.popover.topLeft .arrow:after {
|
||||
border-width: 11px 11px 0;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
/** Top Right **/
|
||||
.popover.topRight {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.topRight .arrow {
|
||||
bottom: -10px;
|
||||
left: 75%;
|
||||
margin-left: -10px;
|
||||
border-width: 10px 10px 0;
|
||||
border-top-color: @popoverTitleBackground;;
|
||||
}
|
||||
|
||||
.popover.topRight .arrow:after {
|
||||
border-width: 11px 11px 0;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -1px;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
|
||||
/*************************
|
||||
* Right Positions
|
||||
*************************/
|
||||
|
||||
.popover {
|
||||
&.rightTop .arrow {
|
||||
top: 10%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.rightBottom .arrow {
|
||||
top: 90%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.bottomLeft .arrow {
|
||||
left: 10%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.bottomRight .arrow {
|
||||
left: 90%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.leftTop .arrow {
|
||||
top: 10%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.leftBottom .arrow {
|
||||
top: 90%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.topLeft .arrow {
|
||||
left: 10%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.topRight .arrow {
|
||||
left: 90%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.submenu-controls {
|
||||
background: #292929;
|
||||
font-size: inherit;
|
||||
label {
|
||||
margin: 0;
|
||||
padding-right: 4px;
|
||||
display: inline;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-panel {
|
||||
padding: 0 10px 0 17px;
|
||||
border-right: 1px solid #202020;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.submenu-panel-title {
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 10px 0 0;
|
||||
}
|
||||
|
||||
.submenu-panel-wrapper {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.submenu-toggle {
|
||||
padding: 4px 0 0 4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.submenu-toggle:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.annotation-disabled, .annotation-disabled a {
|
||||
color: darken(@textColor, 25%);
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
@black: #000;
|
||||
@gray: #bbb;
|
||||
@grayDark: #303030;
|
||||
@grayDarker: #1f1f1f;
|
||||
|
||||
@grayLight: #ADAFAE;
|
||||
@grayLighter: #BBBFC2;
|
||||
@white: #fff;
|
||||
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
@blue: #33B5E5;
|
||||
@blueDark: #0099CC;
|
||||
@green: #669900;
|
||||
@red: #CC0000;
|
||||
@yellow: #ECBB13;
|
||||
@orange: #FF8800;
|
||||
@pink: #FF4444;
|
||||
@purple: #9933CC;
|
||||
|
||||
// Kibana Variables
|
||||
// -------------------------
|
||||
@kibanaPanelBackground: @grayDarker;
|
||||
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@bodyBackground: rgb(22,22,22);
|
||||
@textColor: @grayLighter;
|
||||
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@linkColor: darken(@white,5%);
|
||||
@linkColorHover: @white;
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
@baseFontSize: 14px;
|
||||
@baseFontFamily: @sansFontFamily;
|
||||
@baseLineHeight: 20px;
|
||||
@altFontFamily: @serifFontFamily;
|
||||
|
||||
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
|
||||
@headingsFontWeight: bold; // instead of browser default, bold
|
||||
@headingsColor: @white; // empty to use BS default, @textColor
|
||||
@inputText: @black;
|
||||
|
||||
// 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;
|
||||
|
||||
|
||||
// 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: @grayLight;
|
||||
@btnBackgroundHighlight: darken(@grayLight, 15%);
|
||||
@btnBorder: #bbb;
|
||||
|
||||
@btnPrimaryBackground: lighten(@blue, 5%);
|
||||
@btnPrimaryBackgroundHighlight: darken(@blue, 5%);
|
||||
|
||||
@btnInfoBackground: lighten(@purple, 5%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 5%);
|
||||
|
||||
@btnSuccessBackground: lighten(@green, 5%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 5%);
|
||||
|
||||
@btnWarningBackground: lighten(@orange, 5%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 5%);
|
||||
|
||||
@btnDangerBackground: lighten(@red, 5%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 5%);
|
||||
|
||||
@btnInverseBackground: lighten(@black, 5%);
|
||||
@btnInverseBackgroundHighlight: darken(@black, 5%);
|
||||
|
||||
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
@inputBackground: lighten(@grayDark,10%);
|
||||
@inputBorder: lighten(@grayDark,20%);
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputDisabledBackground: #555;
|
||||
@formActionsBackground: transparent;
|
||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
@dropdownBackground: @heroUnitBackground;
|
||||
@dropdownBorder: rgba(0,0,0,.2);
|
||||
@dropdownDividerTop: transparent;
|
||||
@dropdownDividerBottom: #222;
|
||||
|
||||
@dropdownLinkColor: @textColor;
|
||||
@dropdownLinkColorHover: @white;
|
||||
@dropdownLinkColorActive: @white;
|
||||
|
||||
@dropdownLinkBackgroundActive: @linkColor;
|
||||
@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: 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: @grayLight;
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
@hrBorder: @grayDark;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
@horizontalComponentOffset: 180px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
@wellBackground: #131517;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 50px;
|
||||
@navbarBackgroundHighlight: @grayDarker;
|
||||
@navbarBackground: @grayDarker;
|
||||
@navbarBorder: darken(@navbarBackground, 12%);
|
||||
|
||||
@navbarText: @grayLight;
|
||||
@navbarLinkColor: @grayLight;
|
||||
@navbarLinkColorHover: @white;
|
||||
@navbarLinkColorActive: @navbarLinkColorHover;
|
||||
@navbarLinkBackgroundHover: transparent;
|
||||
@navbarLinkBackgroundActive: @navbarBackground;
|
||||
|
||||
@navbarBrandColor: @navbarLinkColor;
|
||||
|
||||
// Inverted navbar
|
||||
@navbarInverseBackground: #252A30;
|
||||
@navbarInverseBackgroundHighlight: #252A30;
|
||||
@navbarInverseBorder: transparent;
|
||||
|
||||
@navbarInverseText: @grayLight;
|
||||
@navbarInverseLinkColor: @grayLight;
|
||||
@navbarInverseLinkColorHover: @white;
|
||||
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
|
||||
@navbarInverseLinkBackgroundHover: #242A31;
|
||||
@navbarInverseLinkBackgroundActive: @navbarInverseLinkBackgroundHover;
|
||||
|
||||
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
|
||||
@navbarInverseSearchBackgroundFocus: @white;
|
||||
@navbarInverseSearchBorder: @navbarInverseBackground;
|
||||
@navbarInverseSearchPlaceholderColor: @white;
|
||||
|
||||
@navbarInverseBrandColor: @navbarInverseLinkColor;
|
||||
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
@paginationBackground: @bodyBackground;
|
||||
@paginationBorder: transparent;
|
||||
@paginationActiveBackground: @blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
@heroUnitBackground: @grayDark;
|
||||
@heroUnitHeadingColor: inherit;
|
||||
@heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
@warningText: darken(#c09853, 10%);
|
||||
@warningBackground: @grayLighter;
|
||||
@warningBorder: transparent;
|
||||
|
||||
@errorText: #b94a48;
|
||||
@errorBackground: @grayLighter;
|
||||
@errorBorder: darken(spin(@errorBackground, -10), 3%);
|
||||
|
||||
@successText: #468847;
|
||||
@successBackground: @grayLighter;
|
||||
@successBorder: darken(spin(@successBackground, -10), 5%);
|
||||
|
||||
@infoText: @blueDark;
|
||||
@infoBackground: @grayLighter;
|
||||
@infoBorder: darken(spin(@infoBackground, -10), 7%);
|
||||
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
@tooltipColor: #fff;
|
||||
@tooltipBackground: @heroUnitBackground;
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: @tooltipBackground;
|
||||
|
||||
@popoverBackground: @heroUnitBackground;
|
||||
@popoverArrowWidth: 10px;
|
||||
@popoverArrowColor: @popoverBackground;
|
||||
@popoverTitleBackground: @popoverBackground;
|
||||
|
||||
// Special enhancement for popovers
|
||||
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
|
||||
@popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
@@ -0,0 +1,304 @@
|
||||
// Cosmo 2.3.2
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
@black: #000;
|
||||
@grayDarker: #080808;
|
||||
@grayDark: #999;
|
||||
@gray: #bbb;
|
||||
@grayLight: #dfdfdf;
|
||||
@grayLighter: #eee;
|
||||
@white: #fff;
|
||||
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
@blue: #007FFF;
|
||||
@blueDark: #1F26B6;
|
||||
@green: #3FB618;
|
||||
@red: #FF0039;
|
||||
@yellow: #FFA500;
|
||||
@orange: #FF7518;
|
||||
@pink: #E671B8;
|
||||
@purple: #9954BB;
|
||||
|
||||
// Kibana Variables
|
||||
// -------------------------
|
||||
@kibanaPanelBackground: @white;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@bodyBackground: @grayLighter;
|
||||
@textColor: #555;
|
||||
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@linkColor: @blue;
|
||||
@linkColorHover: darken(@linkColor, 10%);
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
|
||||
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
@baseFontSize: 14px;
|
||||
@baseFontFamily: @sansFontFamily;
|
||||
@baseLineHeight: 20px;
|
||||
@altFontFamily: @serifFontFamily;
|
||||
|
||||
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
|
||||
@headingsFontWeight: bold; // instead of browser default, bold
|
||||
@headingsColor: @grayDarker; // 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;
|
||||
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@tableBackground: transparent; // overall background-color
|
||||
@tableBackgroundAccent: #f9f9f9; // for striping
|
||||
@tableBackgroundHover: #E8F8FD; // for hover
|
||||
@tableBorder: #ddd; // table and cell border
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
@btnBackground: @grayLighter;
|
||||
@btnBackgroundHighlight: darken(@grayLighter, 15%);
|
||||
@btnBorder: #bbb;
|
||||
|
||||
@btnPrimaryBackground: lighten(@blue, 5%);
|
||||
@btnPrimaryBackgroundHighlight: darken(@blue, 5%);
|
||||
|
||||
@btnInfoBackground: lighten(@purple, 5%);
|
||||
@btnInfoBackgroundHighlight: darken(@purple, 5%);
|
||||
|
||||
@btnSuccessBackground: lighten(@green, 5%);
|
||||
@btnSuccessBackgroundHighlight: darken(@green, 5%);
|
||||
|
||||
@btnWarningBackground: lighten(@orange, 5%);
|
||||
@btnWarningBackgroundHighlight: darken(@orange, 5%);
|
||||
|
||||
@btnDangerBackground: lighten(@red, 5%);
|
||||
@btnDangerBackgroundHighlight: darken(@red, 5%);
|
||||
|
||||
@btnInverseBackground: lighten(@black, 5%);
|
||||
@btnInverseBackgroundHighlight: darken(@black, 5%);
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
@inputBackground: @white;
|
||||
@inputBorder: @gray;
|
||||
@inputBorderRadius: @baseBorderRadius;
|
||||
@inputDisabledBackground: @grayLighter;
|
||||
@formActionsBackground: #f5f5f5;
|
||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
@inputText: #020202;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
@dropdownBackground: @white;
|
||||
@dropdownBorder: rgba(0,0,0,.2);
|
||||
@dropdownDividerTop: #e5e5e5;
|
||||
@dropdownDividerBottom: @white;
|
||||
|
||||
@dropdownLinkColor: @grayDark;
|
||||
@dropdownLinkColorHover: @white;
|
||||
@dropdownLinkColorActive: @white;
|
||||
|
||||
@dropdownLinkBackgroundActive: @blue;
|
||||
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
|
||||
|
||||
|
||||
|
||||
// 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: @gray;
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
@hrBorder: @grayLighter;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
@horizontalComponentOffset: 180px;
|
||||
|
||||
|
||||
// Wells
|
||||
// -------------------------
|
||||
@wellBackground: @grayLighter;
|
||||
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
@navbarCollapseWidth: 979px;
|
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
|
||||
|
||||
@navbarHeight: 50px;
|
||||
@navbarBackgroundHighlight: @grayDarker;
|
||||
@navbarBackground: @grayDarker;
|
||||
@navbarBorder: transparent;
|
||||
|
||||
@navbarText: @white;
|
||||
@navbarLinkColor: @white;
|
||||
@navbarLinkColorHover: @gray;
|
||||
@navbarLinkColorActive: @white;
|
||||
@navbarLinkBackgroundHover: rgba(0, 0, 0, 0.05);
|
||||
@navbarLinkBackgroundActive: transparent;
|
||||
|
||||
@navbarBrandColor: @navbarLinkColor;
|
||||
|
||||
// Inverted navbar
|
||||
@navbarInverseBackground: @blue;
|
||||
@navbarInverseBackgroundHighlight: @navbarInverseBackground;
|
||||
@navbarInverseBorder: transparent;
|
||||
|
||||
@navbarInverseText: @white;
|
||||
@navbarInverseLinkColor: @white;
|
||||
@navbarInverseLinkColorHover: @white;
|
||||
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
|
||||
@navbarInverseLinkBackgroundHover: rgba(0, 0, 0, 0.05);
|
||||
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
|
||||
|
||||
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
|
||||
@navbarInverseSearchBackgroundFocus: @white;
|
||||
@navbarInverseSearchBorder: @navbarInverseBackground;
|
||||
@navbarInverseSearchPlaceholderColor: @grayDark;
|
||||
|
||||
@navbarInverseBrandColor: @navbarInverseLinkColor;
|
||||
|
||||
|
||||
// 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: #fff;
|
||||
@tooltipBackground: #000;
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: @tooltipBackground;
|
||||
|
||||
@popoverBackground: @white;
|
||||
@popoverArrowWidth: 15px;
|
||||
@popoverArrowColor: @white;
|
||||
@popoverTitleBackground: @white;
|
||||
|
||||
// Special enhancement for popovers
|
||||
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
|
||||
@popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
Reference in New Issue
Block a user