grafana/public/sass/pages/_alerting.scss

.alert-state-paused,
.alert-state-pending {
  color: $text-muted;
}

.alert-state-ok {
  color: $online;
}

.alert-state-warning {
  color: $warn;
}

.alert-state-critical {
  color: $critical;
}

.alert-notify-emails {
  width: 400px;
  border-right: 1px solid $black;
}

.alert-notify-emails .bootstrap-tagsinput {
  width: 394px; // offset for 8px left padding and border width
}

.alert-notify-emails .bootstrap-tagsinput input {
  border: 0;
}

.panel-alert-icon {
  display: none;
}

.panel-has-alert {
  .panel-alert-icon {
    display: inline-block;
  }

  .panel-alert-icon:before {
    content: '\e611';
    position: relative;
    top: 1px;
    left: -3px;
  }
}

.panel-alert-state {
  &--alerting {
    box-shadow: 0 0 10px rgba($critical, 0.5);

    .panel-alert-icon:before {
      color: $critical;
      content: '\e610';
    }
  }

  &--alerting::after {
    content: '';
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px rgba($critical, 1);
    opacity: 0;
    animation: alerting-panel 1.6s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite alternate;
  }

  &--ok {
    .panel-alert-icon:before {
      color: $online;
      content: '\e611';
    }
  }

  &--pending {
    .panel-alert-icon:before {
      color: $warn;
      content: '\e611';
    }
  }
}

@keyframes alerting-panel {
  100% {
    opacity: 1;
  }
}

// Alert List
// Alert List

.alert-rule-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
}

.alert-rule-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: $card-background;
  box-shadow: $card-shadow;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.alert-rule-item__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  overflow: hidden;
}

.alert-rule-item__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  //margin-right: 8px;
  padding: 0 4px 0 2px;
  .icon-gf,
  .fa {
    font-size: 200%;
    position: relative;
    top: 2px;
  }
}

.alert-rule-item__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.alert-rule-item__name {
  font-size: $font-size-base;
  margin: 0;
  font-weight: $font-weight-semi-bold;
}

.alert-list__btn {
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-rule-item__text {
  font-weight: bold;
  font-size: $font-size-sm;
  margin: 0;
}

.alert-rule-item__time {
  color: $text-color-weak;
  font-weight: normal;
  white-space: nowrap;
}

.alert-rule-item__info {
  //color: $text-color;
  font-weight: normal;
  flex-grow: 2;
  display: flex;
  align-items: flex-end;
}

.alert-rule-item__actions {
  display: flex;
  align-items: center;
}

.alert-tesint {
  display: flex;
}