105 lines
1.6 KiB
Plaintext
105 lines
1.6 KiB
Plaintext
.player-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
// background-color: var(--ant-color-fill-quaternary);
|
|
border-radius: 6px;
|
|
|
|
.player-ui {
|
|
padding: 8px 16px;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.controls {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.play-btn {
|
|
margin-inline: 30px;
|
|
height: 22px;
|
|
width: 22px;
|
|
overflow: hidden;
|
|
|
|
.ant-btn {
|
|
height: 22px;
|
|
width: 22px;
|
|
}
|
|
}
|
|
|
|
.backward,
|
|
.forward {
|
|
background: none !important;
|
|
}
|
|
|
|
.slider {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.slider-inner {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.play-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.time {
|
|
width: 52px;
|
|
text-align: right;
|
|
|
|
&.current {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
margin-inline: 10px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
.slider {
|
|
width: 100%;
|
|
}
|
|
|
|
.file-name {
|
|
margin-bottom: 6px;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
justify-content: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-slider-horizontal {
|
|
margin-block: 5px;
|
|
}
|
|
}
|
|
|
|
.speaker {
|
|
margin-left: 10px;
|
|
position: relative;
|
|
|
|
.volume-slider {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
}
|
|
}
|
|
}
|