audio-recorder.component.scss 2.08 KB
.d-flex{
  display: flex;
}
.p-btn-record {
  font-size: 0.9rem;
  color: #555;
  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

  .btn-record, .btn-upload {
    cursor: pointer;
    text-align: center;
    width: 130px;
    height: 33px;
    line-height: 33px;
    border-radius: 0.5rem 0 0 0.5rem;
    border: 1px solid #ddd;
    border-right: 0.5px;
    &:hover {
      color: rgb(64, 169, 255);
    }
  }
  .btn-record.has-clear, .btn-upload.has-clear{
    border-radius:0;
    border-left: 0;
  }
  .btn-clear{
    text-align: center;
    color: #aaa;
    padding: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem 0 0 0.5rem;
    height: 33px;
    line-height: 33px;
  }
  .btn-switch {
    text-align: center;
    color: #aaa;
    padding: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0 0.5rem 0.5rem 0;
    height: 33px;
    line-height: 33px;
    &:hover {
      color: rgb(64, 169, 255);
    }
  }
  .btn-delete {
    text-align: center;
    color: #aaa;
    padding: 0 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0 0.5rem 0.5rem 0;
    height: 33px;
    line-height: 33px;
    &:hover {
      color: #ec5b56;
    }
  }
}

.p-recording {
  background: orangered;
  color: white !important;
}

.p-upload-progress-bg {
  position: relative;
  width: 130px;
  height: 33px;
  line-height: 33px;
  & .i-text {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 0.5rem 0 0 0.5rem;
    border: 1px solid #ddd;
    border-right: 0.5px;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, .85);
  }
  & .i-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #27b43f;
    border-radius: 0.5rem 0 0 0.5rem;
  }
}

.p-progress {
  margin-top: 2px;
  position: relative;
  line-height: 26px;
  .p-btn-play {
    position: absolute;
    left: 10px;
    top: 3px;
    color: #555;
  }
}

:host ::ng-deep nz-upload {
  line-height: 33px;
}