geekai/web/src/assets/css/image-mj.styl

.page-mj {
  background-color: #282c34;

  .inner {
    display: flex;

    .mj-box {
      margin 10px
      background-color #262626
      border 1px solid #454545
      min-width 300px
      max-width 300px
      padding 10px
      border-radius 10px
      color #ffffff;
      font-size 14px

      h2 {
        font-weight: bold;
        font-size 20px
        text-align center
        color #47fff1
      }

      // 隐藏滚动条

      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }

      .mj-params {
        margin-top 10px
        overflow auto


        .param-line {
          padding 0 10px

          .el-icon {
            position relative
          }

          .grid-content {
            background-color #383838
            border-radius 5px
            padding 8px 14px
            display flex
            cursor pointer
            margin-bottom: 10px;

            &:hover {
              background-color #585858
            }

            .icon {
              width 20px
              height 20px
              margin-bottom 5px
            }

            .shape {
              width 16px
              height 16px
              margin-bottom 5px
              border 1px solid #C4C4C4
              border-radius 3px
            }

            .shape.size9-16 {
              width 9px
              height 16px
            }

            .shape.size16-9 {
              height 9px
              width 16px
              position relative
              margin 4px 0 7px
            }

            .shape.size3-4 {
              width 12px
              height 16px
            }

            .shape.size4-3 {
              height 12px
              width 16px
              position relative
              margin 4px 0 4px
            }

            .shape.size2-3 {
              width 11px
              height 16px
            }

            .shape.size3-2 {
              height 11px
              width 16px
              position relative
              margin 4px 0 5px
            }

            .shape.size1-2 {
              width 8px
              height 16px
            }

            .shape.size2-1 {
              height 8px
              width 16px
              position relative
              margin 4px 0 8px
            }
          }


          .grid-content.active {
            color #47fff1
            background-color #585858

            .shape {
              border 1px solid #47fff1
            }
          }

          .model {
            background-color #383838
            border 1px solid #454545
            border-radius 5px
            padding 10px
            margin-bottom 10px
            display flex
            flex-flow column
            align-items center
            cursor pointer

            &:hover {
              background-color #585858
            }

            .el-image {
              height 60px
              width 100%
            }

            .text {
              margin-top 6px
            }

          }

          .model.active {
            color #47fff1
            background-color #585858
            border 1px solid #47fff1
          }

          .form-item-inner {
            display flex
            align-items: center

            .el-select {
              --el-select-input-focus-border-color: #47FFF1;
              --el-input-focus-border-color: #47FFF1;
            }

            .el-input__wrapper {
              background: #383838;
            }

            .el-input__inner {
              color: #fff
            }

            .el-icon {
              margin-left 10px
            }
          }

          .img-uploader {
            .el-upload {
              border: 1px dashed var(--el-border-color);
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              width 100%
              transition: var(--el-transition-duration-fast);

              &:hover {
                border-color: var(--el-color-primary);
              }

              .el-icon.uploader-icon {
                font-size: 28px
                color: #8c939d
                width 100%
                height: 120px
                text-align: center
              }
            }
          }

        }

        .param-line.pt {
          display: flex
          align-items: center
          padding-top 5px
          padding-bottom 5px
        }
      }
    }

    .el-form {
      .el-form-item__label {
        color #ffffff
      }

      .el-input, .el-slider {
        width 180px
      }
    }

    @import "task-list.styl"
  }

}

.mj-list-item-prompt {
  .el-icon {
    margin-left 10px
    cursor pointer
    position relative
  }
}