icingadb-web/public/css/common.less

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

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

& > .content.full-width {
  padding-left: 0;
  padding-right: 0;

  .list-item,
  .table-layout .table-row {
    padding-left: 1em;
    padding-right: 1em;
  }
}

& > .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();
  .ball-size-xl();
  .ball-solid(@gray-semilight);
  font-weight: bold;
  line-height: 1.75;
  text-transform: uppercase;
}

.usergroup-ball {
  .ball();
  .ball-outline(@gray);
  .ball-size-xl();
  line-height: 1.75;
  text-transform: uppercase;
}

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

  .item-list {
    width: 100%;

    .list-item .main {
      border-top: none;
    }

    .list-item .visual {
      width: auto;
      margin-top: 0;
    }

    .list-item .visual,
    .list-item .main {
      padding-bottom: .25em;
      padding-top: .25em;
    }
  }

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

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

.item-table {
  &.table-layout {
    &.hostgroup-table {
      --columns: 2;
    }

    &.servicegroup-table {
      --columns: 1;
    }

    &.user-table, // TODO: make them lists.....
    &.usergroup-table {
      --columns: 0;
    }
  }
}

.hostgroup-table,
.servicegroup-table,
.usergroup-table,
.user-table {
  .title .content > * {
    display: block;
    max-width: fit-content;
  }

  .object-statistics-total {
    width: 3.75em;
  }
}

.controls .hostgroup-table-row,
.controls .servicegroup-table-row,
.controls .usergroup-table-row,
.controls .user-table-row {
  .title .content {
    display: inline-flex;
    align-items: center;

    > :first-child {
      flex: 0 1 auto;
    }

    > :last-child {
      flex: 1 1 auto;
    }

    .subject {
      margin-right: .5em;
    }
  }

  .vertical-key-value {
    br {
      display: none;
    }

    .key {
      padding-left: .417em;
    }

    .value {
      vertical-align: middle;
    }
  }
}

.history-list,
.objectHeader {
  .visual.small-state-change .state-change {
    padding-top: .25em;
  }
}

.comment-popup {
  .comment-list .main {
    // This is necessary to limit the visible comment lines
    // because the popup is shown in detailed list mode only
    .caption {
      height: 3em;
    }
  }
}

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