icingaweb2/public/css/icinga/dashboards.less

.welcome-view {
  position: relative;
}

.dashboard-introduction {
  top: 40%;
  right: 50%;
  position: absolute;
  transform: translate(50%, -50%);
  color: @text-color;

  h1, p {
    color: inherit;
    text-align: center;
  }

  h1 {
    border-bottom: none;
  }

  p {
    opacity: .9;
    width: 58em;
    font-size: 1.1em;
    line-height: 1.5em;
  }

  // Welcome page form controls
  form.icinga-form .form-controls {
    margin-left: 13em;
    margin-top: 1.8em;
    justify-content: center;
  }
}

// Collapse/Expand icons wrapper
.dashboard-list-info, .dashlets-list-info {
  float: left;
  width: 1.5%;
  height: 6%;
  cursor: pointer;

  .collapse-icon, .expand-icon {
    top: 0;
    position: absolute;

    &:before {
      font-size: 2em;
    }
  }

  .collapse-icon {
    display: block;
  }

  .expand-icon {
    display: none;
  }
}

.collapsed .dashboard-list-info, .collapsed .dashlets-list-info {
  .collapse-icon {
    display: none;
  }

  .expand-icon {
    display: block;
  }
}

.collapsed .dashlet-list-item {
  margin-top: 1.3em;
}

// All the dashboard item lists
.dashboard-item-list, .dashlet-item-list {
  padding: 0;
  margin: 1em 0 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;

  label {
    width: 49.5%; // (100% % 2) - .5em aka (margin-right)
    margin-bottom: .5em;
  }

  label:nth-child(odd) {
    margin-right: .5em;
  }

  .dashlet-list-item {
    display: flex;
    flex-direction: column;
    background: @gray-lightest;
    border: 1px solid @gray-light;
    .rounded-corners();

    section.caption, h1 {
      padding-left: .5em;
      font-weight: 500;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    h1 {
      border-bottom: 1px solid @gray-light;
      -webkit-line-clamp: 1;
    }

    .caption {
      height: 3em;
      font-size: 1.1em;
      color: @text-color-light;
      -webkit-line-clamp: 2;
    }
  }

  .dashlet-list-item:hover {
    background-color: @tr-hover-color;
    cursor: pointer;
  }

  // Simulate a multiselect based on the checkbox state
  input[type="checkbox"]:checked + li {
    outline-offset: -2px;
    outline: 2px solid @icinga-blue;
    background-color: @tr-active-color;
  }
}

.dashlet-item-list.empty-list {
  margin: 0 0 .9em;
}

// Dashboard manager
:not(.dashboard) > .container > .content.dashboard-manager {
  padding-top: 0;
}

.dashboard-manager-controls {
  padding-bottom: .5em;
}

.dashboard-settings {
  display: flex;
  flex-direction: column;
  margin-top: .6em;
  margin-right: 1em;
}

.dashboard-manager-controls,
.home-list-control .collapsible-header,
.dashboard-list-control .collapsible-header {
  border-bottom: 1px solid @gray-light;
}

// Add new home button of the dashboard manager
.controls .add-home {
  .button();
  float: right;
  margin-right: 1.15em;
  font-size: 1.2em;
  font-weight: 500;
  color: @text-color-on-icinga-blue;
  background-color: @icinga-blue;
}

.collapsed .action-link.add-dashlet, .collapsed .action-link.add-dashboard {
  display: none;
}

.action-link.add-dashboard {
  margin: .5em 0 0;
}

.action-link.add-dashlet, .action-link.add-dashboard {
  .rounded-corners();
  order: 1;
  font-size: 1.2em;
  font-weight: 500;
  padding: .6em 1em;
  text-decoration: none;
  background-color: @low-sat-blue;
}

.dashboard-list-control .dashlet-item-list {
  display: flex;
  margin-left: 2.2em;
  width: 97.8%; // 100% - 2.2em margin-left

  .dashlet-list-item {
    width: 49.7%;
    cursor: default;
    margin-bottom: .5em;
    background: transparent;
  }

  .dashlet-list-item:nth-child(odd) {
    margin-right: .5em;
  }
}

.dashboard-list-control {
  width: inherit;

  h1.collapsible-header {
    margin-left: 1.5em;
  }

  .action-link.add-dashlet {
    width: 97.8%;
    margin-left: 1.8em;
  }
}

.home-list-control, .dashboard-list-control {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  h1.collapsible-header a:not(.dashlet-title), h1.dashlet-header a:not(.dashlet-title) {
    margin-left: .3em;
    font-weight: normal;
    color: @icinga-blue;
  }

  h1.dashlet-header a.dashlet-title {
    color: @text-color;
  }

  h1.collapsible-header {
    margin-right: .3em;
  }

  .dashlets-list-info, .dashboard-list-info {
    .expand-icon {
      margin-top: .9em;
    }

    .collapse-icon {
      margin-top: .6em;
    }
  }
}

// Dashboard home list controls only
.home-list-control {
  width: 100%;

  & > h1.collapsible-header {
    margin-left: 1.5em;
    margin-bottom: -1em;
  }

  .dashboard-list-control, .action-link.add-dashboard {
    margin-left: 1.4em;
  }

  .dashboard-list-control {
    .dashboard-item-list, .dashlet-item-list {
      margin-bottom: 0;
      margin-top: 0;
    }

    .dashlet-item-list {
      width: inherit;
      margin-left: 2em;
      padding-right: 2em;
    }

    .action-link.add-dashlet {
      margin-left: 1.6em;
      width: calc((49.74% * 2) - 1.2em); // 2x flex columns - own size
    }
  }
}

// Add dashlets mini wizard
.form-list-control {
  span {
    font-size: 1.3em;
    opacity: .8;
    font-weight: 500;
  }
}

.form-list-control.multi-dashlets {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 2px solid @gray-light;

  .control-group {
    width: 100%;
  }
}

.form-list-control.multi-dashlets:not(.collapsed) span {
  margin-left: 1.4em;
}

// Drag and drop
.draggable-widget-chosen {
  .box-shadow();
  background: fade(@icinga-blue, 20);
  border: .5em @body-bg-color dashed;
}

// Handle icon
.widget-drag-initiator {
  cursor: grab;
  float: right;
  font-size: 1.4em;
  margin-top: -.05em;
  display: none;

  &:before {
    color: @base-gray-light;
  }
}

h1.collapsible-header:hover .widget-drag-initiator,
.dashlet-list-item:hover .widget-drag-initiator {
  display: block;
}