.sammy-audio-card {
background: #ffffff;
color: #111111;
border: 1px solid #dddddd;
border-radius: 0;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
padding: 18px;
max-width: 100%;
margin: 0 0 24px 0;
}
.sammy-audio-card__art {
display: flex;
justify-content: center;
align-items: center;
}
.sammy-audio-card__cover {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 0;
background: #f3f3f3;
}
.sammy-audio-card__body {
width: 100%;
}
.sammy-audio-card__meta-top {
text-align: left;
margin-bottom: 16px;
}
.sammy-audio-card__date {
font-size: 13px;
line-height: 1.4;
color: #7a7a7a;
margin-bottom: 8px;
}
.sammy-audio-card__title {
font-size: 30px;
line-height: 1.14;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.sammy-audio-card__series {
font-size: 16px;
line-height: 1.4;
color: #666666;
margin-bottom: 6px;
}
.sammy-audio-card__subtitle {
font-size: 15px;
line-height: 1.65;
color: #444444;
}
.sammy-audio-card__progress-wrap {
margin-bottom: 16px;
}
.sammy-audio-card__progress {
position: relative;
width: 100%;
height: 6px;
background: #d7d7d7;
border-radius: 999px;
overflow: visible;
cursor: pointer;
}
.sammy-audio-card__progress-bar {
position: absolute;
left: 0;
top: 0;
height: 6px;
width: 0%;
background: #d7d7d7;
border-radius: 999px;
}
.sammy-audio-card__progress-head {
position: absolute;
top: 50%;
left: 0%;
width: 14px;
height: 14px;
background: #85b82e;
border-radius: 50%;
transform: translate(-7px, -50%);
}
.sammy-audio-card__time-row {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 13px;
color: #6a6a6a;
line-height: 1;
}
.sammy-audio-card__controls {
display: grid;
grid-template-columns: 46px 46px 52px 46px 46px;
justify-content: center;
align-items: center;
column-gap: 14px;
}
.sammy-audio-card__speed,
.sammy-audio-card__skip-back,
.sammy-audio-card__skip-forward,
.sammy-audio-card__play,
.sammy-audio-card__like {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
color: #111111;
cursor: pointer;
outline: none;
padding: 0;
}
.sammy-audio-card__speed:focus,
.sammy-audio-card__skip-back:focus,
.sammy-audio-card__skip-forward:focus,
.sammy-audio-card__play:focus,
.sammy-audio-card__like:focus,
.sammy-audio-card__speed:active,
.sammy-audio-card__skip-back:active,
.sammy-audio-card__skip-forward:active,
.sammy-audio-card__play:active,
.sammy-audio-card__like:active {
outline: none;
box-shadow: none;
border: none;
}
.sammy-audio-card__speed {
width: 46px;
height: 36px;
font-size: 16px;
line-height: 36px;
text-align: center;
}
.sammy-audio-card__skip-back,
.sammy-audio-card__skip-forward,
.sammy-audio-card__like {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sammy-audio-card__skip-icon {
width: 34px;
height: 34px;
display: block;
color: #111111;
}
.sammy-audio-card__play {
width: 52px;
height: 52px;
position: relative;
flex: 0 0 52px;
}
.sammy-audio-card__play-icon {
position: absolute;
inset: 0;
margin: auto;
display: none;
}
.sammy-audio-card.is-paused .sammy-audio-card__play-icon--play,
.sammy-audio-card.is-playing .sammy-audio-card__play-icon--pause {
display: block;
}
.sammy-audio-card__play-icon--play {
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 19px solid #111111;
left: 4px;
}
.sammy-audio-card__play-icon--pause {
width: 16px;
height: 20px;
background:
linear-gradient(
to right,
#111111 0,
#111111 6px,
transparent 6px,
transparent 10px,
#111111 10px,
#111111 16px
);
}
.sammy-audio-card__like-icon {
width: 24px;
height: 24px;
display: block;
color: #8a8a8a;
transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
opacity: 0.9;
}
.sammy-audio-card__like.is-liked .sammy-audio-card__like-icon {
color: #85b82e;
transform: scale(1.16);
opacity: 1;
}
.sammy-audio-card__like.is-bounce .sammy-audio-card__like-icon {
animation: sammyLikeBounce 0.28s ease;
}
@keyframes sammyLikeBounce {
0% { transform: scale(1); }
40% { transform: scale(1.22); }
100% { transform: scale(1.16); }
}
.sammy-audio-card-error {
color: #b00020;
background: #fff3f3;
border: 1px solid #f0d0d0;
padding: 12px 14px;
}
@media (min-width: 768px) {
.sammy-audio-card {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 24px;
align-items: center;
}
.sammy-audio-card__cover {
max-width: 200px;
}
.sammy-audio-card__title {
font-size: 28px;
}
}
@media (max-width: 767px) {
.sammy-audio-card {
display: block;
padding: 16px;
max-width: 90vw;
}
.sammy-audio-card__art {
margin-bottom: 16px;
}
.sammy-audio-card__cover {
max-width: 100%;
}
.sammy-audio-card__meta-top {
margin-bottom: 16px;
}
.sammy-audio-card__title {
font-size: 20px;
margin-bottom: 10px;
}
.sammy-audio-card__series {
font-size: 15px;
}
.sammy-audio-card__subtitle {
font-size: 14px;
line-height: 1.6;
}
.sammy-audio-card__progress-wrap {
margin-bottom: 18px;
}
.sammy-audio-card__controls {
grid-template-columns: 42px 42px 48px 42px 42px;
column-gap: 8px;
}
.sammy-audio-card__speed {
width: 42px;
height: 34px;
font-size: 15px;
line-height: 34px;
}
.sammy-audio-card__skip-back,
.sammy-audio-card__skip-forward,
.sammy-audio-card__like {
width: 42px;
height: 42px;
}
.sammy-audio-card__skip-icon {
width: 30px;
height: 30px;
}
.sammy-audio-card__like-icon {
width: 22px;
height: 22px;
}
.sammy-audio-card__play {
width: 48px;
height: 48px;
flex-basis: 48px;
}
.sammy-audio-card__play-icon--play {
border-top-width: 10px;
border-bottom-width: 10px;
border-left-width: 17px;
}
.sammy-audio-card__play-icon--pause {
width: 14px;
height: 18px;
background:
linear-gradient(
to right,
#111111 0,
#111111 5px,
transparent 5px,
transparent 9px,
#111111 9px,
#111111 14px
);
}
}