icingaweb2-module-graphite/public/css/module.less

div.images {
    h3 {
        clear: both;
    }

    img.svg {
        float: left;
        border: none;
    }

}

div.images.monitored-object-detail-view {
  display: block;

  img.graphiteImg {
    width: 100%;
    display: block;
  }
}

.timerangepicker-container {
  display: flex;
  padding: .25em 0;

  .button-link {
    line-height: 1.75;
    width: 2.25em;

    i {
      display: inline-block;
      width: 100%;
      text-align: center;
    }

    i:before {
      margin-right: 0;
    }
  }
}

form[name=form_timerangepickercommon_graphite] {
  display: inline-flex;
  flex: 1 1 auto;
  width: 0;
  max-width: 43.25em;

  &:not(:last-child) {
    margin-right: .25em;
  }

  select {
    min-width: 3.5em;
    max-width: 7em;
    flex: 1 1 auto;
    width: auto;

    &:not(:last-of-type) {
      margin-right: .25em;
    }
  }
}

form[name=form_timerangepickercustom_graphite] {
  min-width: 21em;

  .control-label-group {
    text-align: left;
  }

  input[type=date] {
    min-width: 11em;
  }

  input[type=time] {
    min-width: 5em;
  }
}

.flyover[id^="graphite-customrange-"] {
  display: inline-block;
}

.grid {
  margin-right: -1em;
  margin-bottom: -1em;
}

.grid-item {
  display: inline-block;
  border-radius: .25em;
  border: 1px solid @gray-lighter;
  min-width: 302px;
  vertical-align: top;
  margin-right: 1em;
  margin-bottom: 1em;
}

.grid-item  h2 {
  margin-top: 0;
  background: @gray-lightest;
  border-bottom: 1px solid @gray-lighter;
  padding:.25em .5em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-item > .images:not(:last-child) {
  margin-right: 1em;
  display: inline-block;
}

.grid-item .graphiteImg {
  margin-right: 1px;
}

.grid-item > p {
  padding: .5em;
  margin-bottom: 0;
}

p.load-more {
  margin-right: 1em;
  text-align: right;
}

/* Graph colors */

@graphite-graph-bg-color: @body-bg-color;
@graphite-graph-fg-color: @text-color;
@graphite-graph-major-grid-color: @gray-light;
@graphite-graph-minor-grid-color: @graphite-graph-bg-color;

@light-mode: {
  --graphite-graph-bg-color: var(--body-bg-color);
  --graphite-graph-fg-color: var(--text-color);
  --graphite-graph-major-grid-color: var(--gray-light);
  --graphite-graph-minor-grid-color: var(--graphite-graph-bg-color);
};

.graphite-graph-color-registry {
  display: none;

  background-color: @graphite-graph-bg-color;
  color: @graphite-graph-fg-color;
  border-top-color: @graphite-graph-major-grid-color;
  border-bottom-color: @graphite-graph-minor-grid-color;
}