icingaweb2/modules/monitoring/public/css/tables.less

/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */

@border-left-width: 6px;

// Icon images in list and detail views
.host-icon-image,
.service-icon-image {
  max-width: 2em;
  vertical-align: middle;
}

// Check source reachable information in the host and service detail views
.check-source-meta {
  font-size: @font-size-small;
}

// Object link and comment author in the comment overview
.comment-author {
  margin-bottom: 0.25em;

  > a {
    font-weight: bold;
  }
}

// Comment icons, e.g. persistent in the comment overview
.comment-icons {
  float: right;
}

.caption {
  height: 3em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  img {
    max-height: 1em;
  }
}

// Type information for backends in the monitoring config
.config-label-meta {
  font-size: @font-size-small;
}

// Column for counts, e.g. host group members
.count-col {
  width: 4em;
}

// Custom variables in the host and service detail view
.custom-variables > ul {
  list-style-type: none;
  margin: 0;
}

// Host name and IP addresses in the host and service detail view
.host-meta {
  color: @text-color-light;
  font-size: @font-size-small;
}

// Notification recipient in the notifications overview
.notification-recipient {
  color: @text-color-light;
  float: right;
  font-size: @font-size-small;
}


// Container for plugin output and performance data in overviews
.overview-plugin-output-container {
  .clearfix();
}

// Performance data pies in overviews
.overview-performance-data {
  float: right;
  font-size: @font-size-small;
}

// Plugin output in detail views
.plugin-output,
// Plugin output in overviews
.overview-plugin-output {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;

  overflow-wrap: break-word;
  word-wrap: break-word;
}

// Plugin output in overviews
.overview-plugin-output {
  color: @text-color-light;
  font-family: @font-family-fixed;
  font-size: @font-size-small;
  margin: 0;
  white-space: pre-wrap;
  // Long text in table cells overflows the table's width if the table's layout is not fixed.
  // Thus overflow-wrap will not have any effect. But w/ the following we set a width of any value
  // plus a min-width of 100% to consume the full width nonetheless which seems to always
  // instruct browsers to not overflow the table. Ridiculous.
  min-width: 100%;
  width: 1em;
}

// Table for performance data in detail views
.performance-data-table {
  display: block;
  overflow-x: auto;
  position: relative;

  > thead > tr > th {
    text-align: left;
  }

  > thead > tr > th:first-child,
  > tbody > tr > td:first-child {
    // Reset base padding
    padding-left: 0;
  }

  > thead > tr > th,
  > tbody > tr > td {
    white-space: nowrap;
  }
}

// Performance data table column for sparkline pie charts in detail views
.sparkline-col {
  width: 2em;
}

// Service description if in the service detail view
.service-meta {
  color: @text-color-light;
  font-size: @font-size-small;
}

// State column for label and duration in overviews
.state-col {
  &.state-ok,
  &.state-up {
    border-left: @border-left-width solid @color-ok;
  }

  &.state-pending {
    border-left: @border-left-width solid @color-pending;
  }

  &.state-critical,
  &.state-down {
    background-color: @color-critical;
    color: @text-color-inverted;

    &.handled {
      background-color: inherit;
      color: inherit;
      border-left: @border-left-width solid @color-critical-handled;
    }
  }

  &.state-warning {
    background-color: @color-warning;
    color: @text-color-inverted;

    &.handled {
      background-color: inherit;
      color: inherit;
      border-left: @border-left-width solid @color-warning-handled;
    }
  }

  &.state-unknown {
    background-color: @color-unknown;
    color: @text-color-inverted;

    &.handled {
      background-color: inherit;
      color: inherit;
      border-left: @border-left-width solid @color-unknown-handled;
    }
  }

  &.state-unreachable {
    background-color: @color-unreachable;
    color: @text-color-inverted;

    &.handled {
      background-color: inherit;
      color: inherit;
      border-left: @border-left-width solid @color-unreachable-handled;
    }
  }

  // State class for history events
  &.state-no-state {
    border-left: @border-left-width solid @text-color-light;
  }

  * {
    color: inherit;
  }

  text-align: center;
  width: 8em;
}

// Wraps links, icons and meta in overviews
.state-header {
  .clearfix();

  > a {
    font-weight: bold;
  }
}

// State icons, e.g. acknowledged in overviews
.state-icons {
  float: right;
}

// State labels in overviews
.state-label {
  font-family: @font-family-wide;
  font-size: @font-size-small;
  letter-spacing: 1px;
}

// State duration and state type information in overviews
.state-meta {
  font-size: @font-size-small;
}

.state-table {
  border-collapse: separate;
  border-spacing: 0 1px;
  width: 100%;

  tr[href] {
    -webkit-transform: translate3d(0,0,0); /* Without this, hovering in Safari is broken in history table rows */
    -moz-transform: none; /* Firefox collapses border spacing due to the above */
  }

  tr[href]:hover {
    background-color: @tr-hover-color;
    cursor: pointer;
  }

  tr[href].active {
    background-color: @tr-active-color;
  }

  tr[href].state-outdated:not(:hover):not(.active) td:not(.state-col) {
    opacity: 0.7;
  }
}

// Event history
.history-message-container {
  display: flex;
  align-items: center;
  justify-content: center;

  > .history-message-icon {
    padding: 0.25em;
  }

  > .history-message-output {
    flex: 1;

    > a {
      font-weight: bold;
    }
  }
}