energylink/src/css/less/overrides.less

// 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: @grafanaPanelBackground;
  margin: 5px;
}

.panel-content {
  padding: 0px 10px 5px 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: 5px 10px 0px 10px;
  position: absolute;
  left: 5px;
  padding: 0px 17px 6px 5px;
  top: 0;
  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;
}

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;
}

.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;
}

.row-button {
  width: 30px;
  float: left;
  cursor: pointer;
  line-height: 31px;
}

.row-text {
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.9em;
  text-align: center;
  line-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:-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;
    }
  }
}


// Labels & Badges

.label-tag {
  background-color: @purple;
  color: darken(@white, 5%);
}

.label-tag:hover {
  background-color: darken(@purple, 10%);
  color: @white;
}

.annotation-editor-table {
  td {
    white-space: nowrap;
  }
}

// Top menu

.save-dashboard-dropdown {
  padding: 10px;
  li>a {
    padding-left: 5px;
  }
}

.save-dashboard-dropdown-save-form {
  margin-bottom: 5px;
}


// inspector
.inspector-request-table {
  td {
     padding: 5px;
  }

  td:first-child {
    white-space: nowrap;
  }
}

// pre
code, pre {
  background-color: @grafanaPanelBackground;
  color: @textColor;
}