124 lines
2.2 KiB
SCSS
124 lines
2.2 KiB
SCSS
.discovery-audio-tool-card {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.discovery-audio-tool-card.is-pressed {
|
|
opacity: 0.94;
|
|
}
|
|
|
|
.audio-visual {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex: 0 0 88px;
|
|
width: 88px;
|
|
height: 88px;
|
|
overflow: hidden;
|
|
border-radius: 28px;
|
|
background: #c8f4ab;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.audio-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 88px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px;
|
|
border-radius: 28px;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.audio-title {
|
|
display: block;
|
|
max-width: 100%;
|
|
color: #123737;
|
|
font-size: 19px;
|
|
line-height: 25px;
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.audio-subtitle {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin-top: 2px;
|
|
color: #9aa4b4;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.audio-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.audio-cover-fallback {
|
|
background:
|
|
radial-gradient(circle at 58% 12%, rgba(255, 255, 255, 0.38) 0 14px, transparent 15px),
|
|
linear-gradient(115deg, rgba(11, 41, 26, 0.12), rgba(14, 55, 36, 0.42)),
|
|
linear-gradient(145deg, #578a3e 0%, #99bb67 36%, #eff7ff 37%, #cadbcb 44%, #1a6d58 45%, #2c7966 100%);
|
|
}
|
|
|
|
.audio-play {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 52px;
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: rgba(24, 31, 43, 0.38);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.audio-play-triangle {
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: 4px;
|
|
border-top: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
border-left: 15px solid #ffffff;
|
|
}
|
|
|
|
.audio-progress-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.audio-progress-track {
|
|
flex: 1 1 auto;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: #edf2f7;
|
|
}
|
|
|
|
.audio-progress-fill {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, $theme-color-500 0%, #12b981 100%);
|
|
}
|
|
|
|
.audio-time {
|
|
flex: 0 0 90px;
|
|
max-width: 90px;
|
|
margin-left: 10px;
|
|
color: #94a0b2;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
letter-spacing: 0;
|
|
}
|