style: Adjust AudioPlayer component CSS for improved layout and consistency

This commit is contained in:
2026-03-06 13:30:00 +08:00
parent cf83811277
commit c35bf0ed00

View File

@@ -6,17 +6,20 @@
border-radius: var(--radius); border-radius: var(--radius);
padding: 0.75rem; padding: 0.75rem;
background: transparent; background: transparent;
width: 100%;
} }
.waveformContainer { .waveformContainer {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
width: 100%;
} }
.audioPlayerWrapper :global(.waveform-player) { .audioPlayerWrapper :global(.waveform-player) {
background: transparent; background: transparent;
border: none; border: none;
padding: 0; padding: 0;
width: 100%;
} }
.audioPlayerWrapper :global(.waveform-btn) { .audioPlayerWrapper :global(.waveform-btn) {
@@ -35,42 +38,35 @@
border-radius: 3px; border-radius: 3px;
} }
.audioPlayerWrapper :global(.waveform-info) {
position: relative;
justify-content: center;
}
.audioPlayerWrapper :global(.waveform-text) {
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audioPlayerWrapper :global(.waveform-title) { .audioPlayerWrapper :global(.waveform-title) {
display: none; display: none;
} }
.audioPlayerWrapper :global(.waveform-body) { .audioPlayerWrapper :global(.waveform-body) {
display: flex; width: 100%;
justify-content: center; align-items: center;
} }
.audioPlayerWrapper :global(.waveform-track) { .audioPlayerWrapper :global(.waveform-track) {
flex-shrink: 0; width: 100%;
}
.audioPlayerWrapper :global(.waveform-info) {
justify-content: center;
}
.audioPlayerWrapper :global(.waveform-text) {
display: none;
} }
.audioPlayerWrapper :global(.waveform-time) { .audioPlayerWrapper :global(.waveform-time) {
color: hsl(var(--muted-foreground)); color: hsl(var(--muted-foreground));
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
position: absolute;
right: 0;
} }
.downloadButton { .downloadButton {
flex-shrink: 0;
min-height: 40px; min-height: 40px;
min-width: 40px; min-width: 40px;
} }