pgadmin4/web/pgadmin/static/scss/_alertify.overrides.scss

/* Overrides alertify js headers */
.alertify {
  .ajs-header {
    padding: 6px 10px !important;
    //margin is calculated with -$alertify-borderremove-margin, adjust the header
    min-height: $title-height + $alertify-borderremove-margin !important;
    max-height: $title-height + $alertify-borderremove-margin !important;
    background-color: $color-primary;
    font-size: $font-size-base;
    font-weight: bold;
    color: $color-primary-fg;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 0rem;
    border-top-left-radius: $panel-border-radius;
    border-top-right-radius: $panel-border-radius;
    border-bottom: none;
    margin: -24px - $alertify-borderremove-margin; //-24px is default by alertify
    margin-bottom: 0px;
    &:hover {
      background-color: $color-primary;
    }
  }

  .ajs-body {
    background-color: $color-bg !important;
    color: $color-fg !important;
  }

  &.ajs-resizable,
  &.ajs-maximized {
    & .ajs-body {
      & .ajs-content {
        top: $title-height;
      }
    }

    & .ajs-header{
      //default is 0, to override the borders
      margin: -$alertify-borderremove-margin;
    }

    & .ajs-handle {
      z-index: 5;
    }
  }
  &.ajs-frameless,
  &.ajs-frameless {
    & .ajs-body {
      & .ajs-content {
        top: 0 !important;
        padding: 0px;
      }
    }
  }
  &:not(.ajs-frameless) .ajs-body .ajs-content {
    top: $title-height !important;
  }
  .ajs-body .ajs-content {
    bottom: $footer-height-calc !important;
  }
  .ajs-wrap-text {
    word-break: normal;
    word-wrap: break-word;
  }
  /* Removes padding from alertify footer */
  .ajs-footer {
    padding: 0;
    min-height: $footer-min-height;
    border-top: $panel-border;
    background-color: $color-bg !important;
    color: $color-fg !important;
    & .ajs-buttons {
      border: none;
      border-radius: 0rem;
      border-bottom-left-radius: $panel-border-radius;
      border-bottom-right-radius: $panel-border-radius;
      padding: $footer-padding;

      &.ajs-auxiliary .ajs-button,
      &.ajs-primary .ajs-button {
        margin: 0px 2px;
      }

      & .ajs-button {
        font-family: $font-family-primary;
        font-size: $font-size-base;
        -webkit-font-smoothing: auto;
        min-width: 0;
        min-height: 0;
      }
    }
  }

  .ajs-commands {
    margin: -22px 4px 0 0;
  }

  /* Replaces alertify button icons */
  .ajs-commands button {
    margin-left: 5px;
  }

  /* Prevent text blur in the runtime */
  .ajs-dimmer,
  .ajs-modal {
    -webkit-transform: none;
  }

  .ajs-commands button.ajs-maximize {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZklEQVQ4jcWTuw2AMAxEn5jBs7B/e0gpmAiKEGRS5QDBSS7v+Q8fSsCWQgDTA+DsGgJYuypumTNkWCWZg9q/HIAOSDim/xTUcu0exXXaxQG0teRVWQPLx2Gbe8B55yNqv7C4GV/TDq//J11odoZgAAAAAElFTkSuQmCC);
    background-size: 14px;
  }

  .ajs-commands button.ajs-close {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4jd2SwQnAIAxF36GH0pOTFHEgF3IkR5LO0F4SCGJVEHroAy/f/E+igV+yAa6hO7nrcgAZuIBg9CBalppXEnDL0RA1q556ASdQqhBrLlLTxVch1uxHZiU2AuKs2Vdt23GGHSy/wfIvzOzBPhpjaRO/5wG/szevJ+ZXzAAAAABJRU5ErkJggg==);
  }

  /* Restyling alertify dialogue panel boundaries */
  .ajs-dialog {
    border: $panel-border;
    border-radius: $panel-border-radius;
    box-shadow: $dialog-box-shadow;
    background-color: $color-bg !important;
    color: $color-fg !important;
  }
  .ajs-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.alertify.ajs-frameless .ajs-body .ajs-content {
  bottom: 0px !important;
}

.alertify.ajs-maximized .ajs-commands,
.alertify.ajs-resizable .ajs-commands {
  margin: 2px 0px 0 0;
}

.ajs-commands {
  position: absolute;
  width: auto !important;
}

.ajs-pin, .ajs-maximize, .ajs-close {
  width: 20px;
  height: 20px;
  border: $input-btn-border-width solid $btn-secondary-border !important;
  background-color: $color-secondary !important;
  font-size: 12px;
  border-radius: $btn-border-radius;
  position: relative;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

.ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
  background-color: $btn-secondary-hover-bg !important;
}

.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkElEQVQ4jWNkwAR8DAwMBxkYGMTQxF8xMDDYMzAwfMKiBwMYMDAw3GRgYPgPxTehYiSBKCQDonApYiLV1KFjABsDA4MpEt8UKkYUkGBgYDjPgAhAGD4PlSPooqNYNMPwUXRXM+IwBAbaoXQlktg/ZMUsWAxAVvASmyZCBiCDNwTkCRrwasANIOgFQoADinECAAtnIEoWoODLAAAAAElFTkSuQmCC);
  background-size: 13px;
}

.alertify.ajs-maximized .ajs-commands button.ajs-maximize {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8klEQVQ4jZ3QMUpDQRCH8V+ewULQE4iERTyCrQiDCpbaCKKljbV4A89gqVgGrCMDWlpaWwVPoFYiIjYv8hBJXjLN7s7u9+3wZ4aKiOWI2IJOi8dHuM7MXxj3WMHe3CRBKeUGvVJKllJG8CrmoNty6jMsYKeGoY/jtgI4bez7OMjMr2oKwaieRzDMIljDRUSgXQZPeG2cv7GOffQ7ETGPcyw2HozWQWY+jLN3M/MzIu4wwNKf+zeMFVSQmY/YbfzeuiqIiAonZgi1quErHNa9F7xPM8FlAx5iA9ttJRVu8VHDm5k5rDNpLRERWxHR+6c/MZMfLIJDwzY66IkAAAAASUVORK5CYII=);
}

/* Restyling alertify query results messages */
.alertify-notifier.ajs-right {
  min-width: 250px;
  width: auto;
  width: initial;
  max-width: 800px;
}

.alertify-notifier.ajs-right .ajs-message.ajs-visible {
  padding: 0;
  right: 0;
  width: auto;
  width: initial;
}

.alertify-notifier .ajs-message {
  border-radius: $card-border-radius;
  width: 100%;
}

.pg-alertify-button:before {
  font-size: $font-size-base;
  @at-root .ajs-button#{&} {
    font-family: $font-family-icon;
    margin-right: 5px;
  }
}

.pg-alertify-icon-button {
  &:before {
    font-size: 1.1em !important;
    line-height: 1.2;
    font-family: $font-family-icon;
  }
}

.ajs-text-smoothing {
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}

.ajs-message.ajs-error.ajs-visible {
  background: $color-danger-lighter;
  border: $border-width solid $color-danger;
  @extend .ajs-text-smoothing;
}

.ajs-message.ajs-success.ajs-visible {
  background: $color-success-light;
  border: $border-width solid $color-success;
  @extend .ajs-text-smoothing;
}

.ajs-message.ajs-visible {
  background: $color-primary-light;
  border: $border-width solid $color-primary;
  @extend .ajs-text-smoothing;
}

.ajs-message > .media > .media-body.media-middle {
  display: flex;
}

.alertify .ajs-dimmer {
  background-color: $loading-bg;
}

/* It sometimes is applied to dialog and blocks the dialog from editing */
.alertify .ajs-dialog.ajs-capture:before {
  display: none;
}

.alertify-no-animation {
  .alertify .ajs-dimmer,
  .alertify .ajs-modal,
  .alertify-notifier,
  .alertify-notifier .ajs-message.ajs-visible,
  .alertify-notifier .ajs-message,
  .alertify-notifier.ajs-center .ajs-message.ajs-visible,
  .alertify-notifier.ajs-center .ajs-message
  {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none;
  }

  .alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog {
    -webkit-animation-name: ajs-noanimate;
    animation-name: ajs-noanimate;
  }
  .alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog {
    -webkit-animation-name: ajs-noanimate;
    animation-name: ajs-noanimate;
  }

  @-webkit-keyframes ajs-noanimate {
    -webkit-transform: none;
    transform: none;
  }
  @keyframes ajs-noanimate {
    -webkit-transform: none;
    transform: none;
  }
}