.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; }