pgadmin4/web/pgadmin/tools/erd/static/scss/_erd.scss

.shortcut-key {
  padding: 0 0.25rem;
  border: 1px solid $border-color;
  margin-right: 0.125rem;
  border-radius: $btn-border-radius;
}

#erd-tool-container {
	width: 100%;
	height: 100%;

  .file-input-hidden {
    height: 0;
    width: 0;
    visibility: hidden;
  }

  .text-icon {
    font-weight: bold;
  }

  .erd-hint-bar {
    background: $sql-gutters-bg;
    padding: 0.25rem 0.5rem;
  }

  .diagram-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .floating-note {
    width: 250px;
    border: $panel-border;
    border-radius: $panel-border-radius;
    box-shadow: $dialog-box-shadow;
    background-color: $alert-dialog-body-bg !important;
    color: $color-fg !important;

    .note-header {
      padding: 0.25rem 0.5rem;
      background-color: $alert-header-bg;
      font-size: $font-size-base;
      font-weight: bold;
      color: $alert-header-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: -$alertify-borderremove-margin; //-24px is default by alertify
      margin-bottom: 0px;
    }

    .note-body {
      word-break: break-all;
      & textarea {
        width: 100%;
        border: none;
        border-bottom: $border-width solid $erd-node-border-color;
        border-top: $border-width solid $erd-node-border-color;
      }

      & .pg_buttons {
        padding: 0.25rem;
      }
    }
  }

  .html2canvas-reset {
    background-image: none !important;
    overflow: auto !important;
  }

  .diagram-canvas{
    width: 100%;
    height: 100%;
    color: $color-fg;
    font-family: sans-serif;
    background-color: $erd-canvas-bg;
    background-image: $erd-bg-grid;
    cursor: unset;

    .table-node {
      background-color: $input-bg;
      border: $border-width solid $erd-node-border-color;
      border-radius: $input-border-radius;
      position: relative;
      width: 175px;
      font-size: 0.8em;

      .table-icon {
        padding: 0rem 0.125rem;
      }

      &.selected {
        border-color: $input-focus-border-color;
        box-shadow: $input-btn-focus-box-shadow;
      }

      .table-toolbar {
        background: $editor-toolbar-bg;
        border-bottom: $border-width solid $erd-node-border-color;
        padding: 0.125rem;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        display: flex;

        .btn {
          &:not(:first-of-type) {
            margin-left: 0.125rem;
          }
        }
      }

      .table-schema-data {
        border-bottom: $border-width solid $erd-node-border-color;
        padding: $erd-row-padding;

        & .table-schema {
          font-weight: bold;
          word-break: break-all;
        }
      }

      .table-name-data {
        border-bottom: $border-width*2 solid $erd-node-border-color;
        padding: $erd-row-padding;

        & .table-name {
          font-weight: bold;
          word-break: break-all;
        }

        & .fetch-error {
          color: $color-danger;
        }
      }

      .table-cols {
        .col-row {
          border-bottom: $border-width solid $erd-node-border-color;
          .col-row-data {
            padding: $erd-row-padding;
            width: 100%;
            word-break: break-all;
          }
          .col-row-port {
            padding: 0;
            min-height: 0;
          }
        }
      }
    }

    .svg-link-ele {
      stroke: $erd-link-color;
    }

    .svg-link-ele.path {
      pointer-events: all;
      cursor: move;
    }

    @keyframes svg-link-ele-selected {
      from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; }
    }

    .svg-link-ele.selected {
      stroke: $erd-link-selected-color;
      stroke-dasharray: 10, 2;
      animation: svg-link-ele-selected 1s linear infinite;
    }

    .svg-link-ele.svg-otom-circle {
      fill: $erd-link-color;
    }

    .custom-node-color{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      transform: translate(-50%, -50%);
      border-radius: 10px;
    }

    .circle-port{
      width: 12px;
      height: 12px;
      margin: 2px;
      border-radius: 4px;
      background: darkgray;
      cursor: pointer;
    }

    .circle-port:hover{
      background: mediumpurple;
    }

    .port {
      display: inline-block;
      margin: auto;
    }
  }
}

.alertify {
  .erd-dialog {
    .ajs-body .ajs-content {
      bottom: 0!important;
    }
    .ajs-footer {
      display: none;
    }
  }
}