2 lines
2.8 KiB
CSS
2 lines
2.8 KiB
CSS
.speaking-upload{margin-top:12px!important;padding:14px!important;border:1px solid #dae5f2!important;border-radius:14px!important;background:linear-gradient(145deg,#fbfdff,#f3f8ff)!important}.speaking-upload>label{margin-bottom:13px!important}.speaking-recorder{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #e0e8f3;border-radius:13px;background:#fff;box-shadow:0 6px 16px rgba(16,33,62,.045)}.speaking-record-button{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;padding:0;border:0;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ff6975,#d93847);box-shadow:0 6px 13px rgba(217,56,71,.26);font-size:.96rem;cursor:pointer}.speaking-record-button:hover{background:linear-gradient(145deg,#ff7882,#ca2637);transform:scale(1.05)}.speaking-record-button.is-recording{background:#d93847;box-shadow:0 0 0 5px rgba(217,56,71,.13),0 7px 15px rgba(217,56,71,.28)}.speaking-record-button.is-recording i{animation:record-pulse .9s ease-in-out infinite}.speaking-recorder__center{display:grid;min-width:0;gap:5px;flex:1}.speaking-waveform{display:flex;height:18px;align-items:center;gap:2px}.speaking-waveform span{width:3px;height:5px;border-radius:5px;background:#b8c8dc}.speaking-waveform span:nth-child(2n){height:9px}.speaking-waveform span:nth-child(3n){height:13px}.speaking-recorder:has(.is-recording) .speaking-waveform span{background:#e34a58;animation:voice-wave .78s ease-in-out infinite alternate}.speaking-recorder:has(.is-recording) .speaking-waveform span:nth-child(2n){animation-delay:.16s}.speaking-recorder:has(.is-recording) .speaking-waveform span:nth-child(3n){animation-delay:.31s}.speaking-record-status{overflow:hidden;color:#64758c;font-size:.61rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.speaking-record-status.is-recording{color:#ce3443}.speaking-record-time{min-width:39px;color:#263850;font-size:.66rem;font-variant-numeric:tabular-nums;font-weight:700;text-align:right}.speaking-recorder:has(.is-recording) .speaking-record-time{color:#d93847}.speaking-record-preview{display:block;width:100%;height:37px;margin:11px 0 4px;border-radius:9px}.speaking-upload__divider{display:flex;align-items:center;gap:9px;margin:12px 0 9px;color:#8b9aaf;font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.speaking-upload__divider:before,.speaking-upload__divider:after{height:1px;background:#e4ebf3;content:"";flex:1}@keyframes record-pulse{50%{opacity:.55;transform:scale(.84)}}@keyframes voice-wave{to{height:18px;transform:translateY(-1px)}}@media(max-width:520px){.speaking-upload{padding:12px!important}.speaking-recorder{gap:9px;padding:10px}.speaking-record-button{width:39px;height:39px;flex-basis:39px}.speaking-waveform{gap:1px}.speaking-waveform span{width:2px}.speaking-record-time{min-width:34px}}
|