forgeplus-react/src/forge/SecuritySetting/Index.scss

.whiteBack{
  background-color: #fff;
  .boies{
    width: 1200px;
    margin:0px auto;
    padding:30px 0px 10px;
    .shortW{
      width: 198px;
      border: 1px solid rgba(153, 153, 153, 0.22);
      border-radius: 4px;
      min-height: 400px;
      margin-bottom: 30px;
      .userDetail{
        background: rgba(153, 153, 153, 0.05);
        border-radius: 4px 4px 0px 0px;
        padding:20px 25px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        img{
          height: 48px;
          width: 48px;
          border-radius: 50%;
          margin-right: 12px;
        }
        span{
          font-size: 16px;
          color: #333;
          max-width: 90px;
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .securityUl{
        padding:20px 16px;
        color: #333;
        margin-bottom: 0px;
        padding-bottom: 0px;
        li{
          margin-bottom: 10px;
          height: 27px;
          line-height: 27px;
          position: relative;
          cursor: pointer;
          a{
            color: #666;
            &:hover{
              color: #333;
            }
          }
          &.active a{
            color: #333;
          }
          &:first-child{
            font-size: 16px;
          }
          &.active::before{
            position: absolute;
            left: -16px;
            top:0px;
            height: 100%;
            width: 2px;
            content: "";
            background-color: #2A61FF;
          }
        }
      }
    }
    .sshHead{
      display: flex;
      align-items: center;
      padding:15px 20px;
      justify-content: space-between;
      border-bottom: 1px solid #EEEEEE;
      &>span{
        font-size: 18px;
      }
    }
    .ant-list-item{
      padding:20px;
      border-bottom: 1px solid #eee!important;
      &>img{
        margin-right: 24px;
      }
      &>div{
        flex:1;
        width: 0;
        margin-right: 20px;
        p{
          margin-bottom: 8px!important;
        }
        span{
          font-size: 12px;
        }
      }
      .ant-btn.ant-btn-danger{
        background-color: #fff;
        border-color: #D0D0D0;
        color: #DF0002;
        &:hover{
          background-color: #DF0002;
          color: #fff;
          border-color: #DF0002;
        }
      }
    }
    .questionLink{
      padding:15px 20px;
      a{
        color: #4B7AFF;
        &:hover{
          text-decoration: underline;
        }
      }
    }
    .sshForm{
      padding:15px 20px;
      .ant-col.ant-form-item-label{
        font-size: 16px;
        color:#333;
      }
    }
  }
}
.deleteBox{
  .ant-modal-header{
    border-bottom: none;
    .ant-modal-title{
      text-align: left;
      font-size: 20px;
    }
  }
  .ant-modal-body{
    padding:30px 50px;
    p{
      font-size: 16px;
      line-height: 26px;
      color:#666
    }
    .desc{
      .descMain{
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 10px;
        i{
          font-size: 38px!important;
          color:#DF0002
        }
      }
    }
  }
  .ant-modal-footer{
    border-top: none;
    text-align: center;
    padding-bottom: 40px;
    button{
      width: 120px;
      margin:0px 20px;
      &.ant-btn-danger{
        background-color: #fff;
        color: #DF0002;
        border-color: #D0D0D0;
      }
    }
  }
}
.descModal{
  .ant-modal-title{
    text-align: left;
    font-size: 20px;
  }
  .keyContent{
    border:1px solid #eee;
    border-radius: 4px;
    padding:10px 15px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
  }
  .keysTitle{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    span:last-child{
      word-break: break-all;
      flex:1;
    }
  }
}