icingadb-web/public/css/common.less

/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */

@exports: {
  @iplWebAssets: "../lib/icinga/icinga-php-library";
};

& > .content.full-height {
  padding-top: 0;
  padding-bottom: 0;
}

.plugin-output {
  .monospace();
  word-break: break-word;
}

div.show-more {
  .clearfix();
  float: right;
}

.state-ball.state-not-available {
  .ball-solid(@gray-light);
  .animate(pulse 1.5s infinite both);
}

.icon-ball {
  .ball();
  .ball-outline(@gray);
  text-align: center;

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

.user-ball {
  .ball-solid(@gray-semilight);
  font-weight: bold;
  text-transform: uppercase;
  vertical-align: top; // Avoid the bottom margin of the ball to affect the line height
}

.usergroup-ball {
  .ball-outline(@gray);
  text-transform: uppercase;
  vertical-align: top; // Avoid the bottom margin of the ball to affect the line height
}

.ack-badge {
  text-transform: uppercase;
  line-height: 1;
  margin-top: -.25em;
  align-self: flex-start;

  i {
    vertical-align: baseline;
  }
}

.controls {
  .box-shadow(0, 0, 0, 1px, @gray-lighter);
  flex-shrink: 0;
  position: relative; // Required for the host meta info control
  z-index: 1; // The content may clip, this ensures the separator is always visible

  > :not(:only-child) {
    margin-bottom: .5em;
  }

  #object-meta-info {
    margin-bottom: 0;

    .object-meta-info {
      margin-bottom: .5em;
    }
  }

  &.overdue,
  &.overdue .tabs li.active a,
  &.overdue .object-meta-info-control {
    background-color: @gray-lighter;
  }

  .limit-control,
  .view-mode-switcher,
  .sort-control {
    margin-left: .5em;
    float: right;
  }

  .toggle-switch {
    margin-top: 0;
    margin-bottom: 0;
  }

  .search-controls .continue-with {
    margin-right: -.5em;
    margin-left: .5em;
  }

  .show-more {
    margin-top: .25em;
  }

  .notice {
    display: none;
  }

  // TODO: Remove once ipl-web v0.7.0 is required
  &:not(.default-layout) {
    .pagination-control {
      float: left;
    }

    .sort-control {
      display: flex;
      justify-content: flex-end;

      :not(.form-element) > label {
        margin-right: 0;
      }

      .control-button {
        margin: 0;
      }
    }

    > :not(:only-child) {
      margin-bottom: 0.5em;
    }

    .search-suggestions {
      margin-bottom: 2.5em;
    }

    .search-controls {
      clear: both;
      display: flex;
      min-width: 100%;

      .search-bar {
        flex: 1 1 auto;

        & ~ .control-button:last-child {
          margin-right: -.5em;
        }

        & ~ .control-button {
          margin-left: .5em;
        }
      }
    }
  }
}

.content > h2:first-child,
.object-detail > h2:first-child {
  margin-top: 0;
}

.content.full-width > h2 {
  margin-left: 1em / 1.333em; // 1em / h2 font size
}

.object-detail :not(.caption) > .plugin-output {
  .rounded-corners(.25em);
  background-color: @gray-lighter;
  padding: .5em;
}

.object-detail .item-list {
  &.action-list .list-item {
    margin-right: -1em;
    margin-left: -1em;
    padding-right: 1em;
    padding-left: 1em;
  }

  .list-item:last-of-type .caption {
    min-height: 1.5em;
    max-height: 3em;
    height: auto;
  }
}

.perfdata-wrapper {
  svg {
    width: 100%;
  }

  svg:not(:last-child) {
    margin-bottom: 1em;
  }
}

.text-center {
  text-align: center;
}

.text-muted {
  color: @gray;
}

.accompanying-text {
  color: @text-color-light;

  .subject {
    color: @text-color;
    .user-select(all);
  }
}

.comment-detail {
  > form,
  > h2:not(:first-child) {
    margin-top: 1em;
  }
}

.downtime-detail {
  .downtime-progress {
    margin-bottom: 1em;
  }
}

.content + .footer {
  display: flex;
  .box-shadow(0, -1px, 0, 0, @gray-lighter);
  color: @text-color-light;

  .selection-count {
    flex: 1 1 auto;

    .selected-items {
      font-size: 1.25em;

      &.hint {
        opacity: 0.75;
      }
    }
  }

  .status-bar, .selection-count {
    font-size: .857em;
    padding: .25em 1em;
    line-height: 1.7;
  }
}

.status-bar {
  margin-left: auto;

  .item-count {
    font-size: 1.25em;
  }

  .state-badges {
    display: inline-block;
    margin: 0 0 0 .417em;
  }
}

.multiselect-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  // Donut
  > div:first-child {
    height: 4em;
    width: 4em;

    > svg {
      height: auto;
      max-width: 100%;
    }
  }

  > .vertical-key-value {
    padding: 0 .5em;
  }
}

.header-item-layout.host,
.header-item-layout.service,
.item-layout.history {
  .visual.small-state-change .state-change {
    padding-top: .25em;
  }
}

// user, usergroup and comment balls
.header-item-layout .visual:has(.ball.ball-size-xl) {
  padding-top: 0;
  padding-bottom: 0;
}

form[name="form_confirm_removal"] {
  text-align: center;
}

.affected-objects {
  display: inline-flex;
  align-items: baseline;
  color: @state-critical;

  .icon {
    opacity: .9;
  }
}