.mp3-listing-container {
width: 100% !important;
max-width: 100% !important;
margin: var(--sp-4) auto !important;
padding: 0 !important;
font-family: var(--sm-font) !important;
color: var(--sm-foreground) !important;
box-sizing: border-box !important;
} .mp3-search-container {
position: relative !important;
margin: 0 0 var(--sp-5) 0 !important;
padding: 0 !important;
border-bottom: none !important;
}
.mp3-search-input {
width: 100% !important;
padding: 13px 44px 13px 18px !important;
font-family: var(--sm-font) !important;
font-size: var(--text-sm) !important;
font-weight: 500 !important;
color: var(--sm-foreground) !important;
background-color: var(--sm-surface) !important;
border: 1px solid var(--sm-border) !important;
border-radius: var(--sm-radius) !important;
box-shadow: var(--sm-shadow-sm) !important;
outline: none !important;
box-sizing: border-box !important;
transition: border-color var(--sm-transition-fast), box-shadow var(--sm-transition-fast), background-color var(--sm-transition-fast) !important;
}
.mp3-search-input::placeholder {
color: var(--sm-muted) !important;
font-size: var(--text-xs) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-wide) !important;
opacity: 1 !important;
}
.mp3-search-input:focus {
border-color: var(--sm-accent) !important;
box-shadow: 0 0 0 3px var(--sm-accent-soft) !important;
background-color: var(--sm-surface) !important;
}
.mp3-search-input::-webkit-search-decoration,
.mp3-search-input::-webkit-search-cancel-button,
.mp3-search-input::-webkit-search-results-button,
.mp3-search-input::-webkit-search-results-decoration {
-webkit-appearance: none !important;
display: none !important;
}
.mp3-search-icon {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--sm-muted) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
width: 18px !important;
height: 18px !important;
}
.mp3-search-icon svg {
width: 18px !important;
height: 18px !important;
stroke: var(--sm-muted) !important;
} .mp3-title .highlight {
background-color: var(--sm-accent-soft) !important;
color: var(--sm-accent) !important;
padding: 1px 4px !important;
border-radius: 3px !important;
font-weight: 700 !important;
} .mp3-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--sp-2) !important;
} .mp3-list li::before {
display: none !important;
content: "" !important;
}
.mp3-list li {
list-style: none !important;
position: relative !important;
margin: 0 !important;
padding: 14px 18px !important;
background-color: var(--sm-surface) !important;
border: 1px solid var(--sm-border) !important;
border-radius: var(--sm-radius) !important;
box-shadow: var(--sm-shadow-sm) !important;
color: var(--sm-foreground) !important;
box-sizing: border-box !important;
transition: border-color var(--sm-transition-fast), box-shadow var(--sm-transition-fast), transform var(--sm-transition-fast), background-color var(--sm-transition-fast) !important;
z-index: 1;
}
.mp3-list li:hover {
border-color: var(--sm-border-dark) !important;
box-shadow: var(--sm-shadow-md) !important;
transform: translateY(-1px) !important;
z-index: 5;
} .mp3-list li:focus-within,
.mp3-list li:has(.share-dropdown[style*="block"]),
.mp3-list li:has(.share-dropdown.open) {
z-index: 50 !important;
}
.mp3-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--sp-3) !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
} .mp3-title {
font-family: var(--sm-font) !important;
font-size: var(--text-base) !important;
font-weight: 600 !important;
color: var(--sm-foreground) !important;
line-height: var(--leading-snug) !important;
letter-spacing: var(--tracking-tight) !important;
flex: 1 1 auto !important;
min-width: 0 !important;
word-break: break-word !important;
margin: 0 !important;
transition: color var(--sm-transition-fast) !important;
}
.mp3-list li:hover .mp3-title {
color: var(--sm-accent) !important;
} .mp3-actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
flex-shrink: 0 !important;
} .mp3-audio {
width: 220px !important;
height: 36px !important;
border-radius: var(--sm-radius-full) !important;
background-color: #f5f5f5 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
transition: opacity var(--sm-transition-fast) !important;
}
.mp3-audio:focus {
outline: none !important;
box-shadow: none !important;
} .mp3-audio::-webkit-media-controls-panel {
background-color: #f5f5f5 !important;
}
.mp3-audio::-webkit-media-controls-play-button {
background-color: #2cdbdb !important; filter: invert(1) !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: transform var(--sm-transition-fast) !important;
}
.mp3-audio::-webkit-media-controls-play-button:hover {
transform: scale(1.05) !important;
}
.mp3-audio::-webkit-media-controls-mute-button {
background-color: transparent !important;
border-radius: 50% !important;
transition: background-color var(--sm-transition-fast) !important;
}
.mp3-audio::-webkit-media-controls-mute-button:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
} .mp3-list li .download-button,
.mp3-list li .share-button {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: var(--sm-radius) !important;
background-color: var(--sm-surface) !important;
border: 1px solid var(--sm-border) !important;
color: var(--sm-muted) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
cursor: pointer !important;
text-decoration: none !important;
box-shadow: none !important;
transform: none !important;
transition: background-color var(--sm-transition-fast), border-color var(--sm-transition-fast), color var(--sm-transition-fast), transform var(--sm-transition-fast), box-shadow var(--sm-transition-fast) !important;
}
.mp3-list li .download-button svg,
.mp3-list li .share-button svg {
width: 16px !important;
height: 16px !important;
vertical-align: middle !important;
fill: currentColor !important;
stroke: none !important;
}
.mp3-list li .download-button svg path,
.mp3-list li .share-button svg path {
fill: currentColor !important;
stroke: none !important;
}
.mp3-list li .download-button:hover,
.mp3-list li .share-button:hover {
background-color: var(--sm-surface-alt) !important;
border-color: var(--sm-border-dark) !important;
color: var(--sm-accent) !important;
transform: translateY(-1px) !important;
box-shadow: var(--sm-shadow-sm) !important;
}
.mp3-list li .download-button:focus,
.mp3-list li .share-button:focus {
outline: none !important;
border-color: var(--sm-accent) !important;
box-shadow: 0 0 0 2px var(--sm-accent-soft) !important;
} .share-button-wrapper {
position: relative !important;
}
.share-dropdown {
position: absolute !important;
top: calc(100% + 6px) !important;
right: 0 !important;
background-color: var(--sm-surface) !important;
border: 1px solid var(--sm-border) !important;
border-radius: var(--sm-radius) !important;
box-shadow: var(--sm-shadow-md) !important;
padding: 6px !important;
z-index: 100 !important;
min-width: 165px !important;
box-sizing: border-box !important;
white-space: nowrap !important;
text-align: left !important;
}
.share-dropdown a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
padding: 7px 10px !important;
font-family: var(--sm-font) !important;
font-size: var(--text-xs) !important;
font-weight: 500 !important;
color: var(--sm-foreground) !important;
text-decoration: none !important;
border-radius: 4px !important;
box-sizing: border-box !important;
transition: background-color var(--sm-transition-fast), color var(--sm-transition-fast) !important;
}
.share-dropdown a:hover {
background-color: var(--sm-surface-alt) !important;
color: var(--sm-accent) !important;
}
.share-dropdown img {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
flex-shrink: 0 !important;
} .view-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 4px 10px !important;
font-family: var(--sm-font) !important;
font-size: var(--text-xs) !important;
font-weight: 500 !important;
font-variant-numeric: tabular-nums !important;
color: var(--sm-muted) !important;
background-color: var(--sm-surface-alt) !important;
border: 1px solid var(--sm-border) !important;
border-radius: var(--sm-radius-full) !important;
min-width: auto !important;
margin: 0 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
line-height: normal !important;
} .load-more-container {
text-align: center !important;
margin-top: var(--sp-6) !important;
margin-bottom: var(--sp-6) !important;
}
.load-more-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
padding: 10px 24px !important;
margin: 0 !important;
box-sizing: border-box !important;
font-family: var(--sm-font) !important;
font-size: var(--text-sm) !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-transform: none !important;
background-color: var(--sm-surface) !important;
border: 1px solid var(--sm-border) !important;
color: var(--sm-foreground) !important;
border-radius: var(--sm-radius) !important;
box-shadow: var(--sm-shadow-sm) !important;
cursor: pointer !important;
transition: all var(--sm-transition-fast) !important;
}
.load-more-button:hover {
background-color: var(--sm-surface-alt) !important;
border-color: var(--sm-border-dark) !important;
color: var(--sm-accent) !important;
transform: translateY(-1px) !important;
box-shadow: var(--sm-shadow-md) !important;
}
.load-more-button:focus {
outline: none !important;
border-color: var(--sm-accent) !important;
box-shadow: 0 0 0 3px var(--sm-accent-soft) !important;
}
.load-more-button:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
}
.load-more-button.is-loading::after {
border-color: var(--sm-accent) !important;
border-right-color: transparent !important;
} @media (max-width: 768px) {
.mp3-list {
gap: 8px !important;
}
.mp3-list li {
padding: 14px 14px !important;
}
.mp3-item {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.mp3-title {
font-size: var(--text-sm) !important;
line-height: var(--leading-normal) !important;
}
.mp3-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
} .mp3-audio {
width: 100% !important;
height: 38px !important;
order: 1 !important;
} .view-count {
order: 2 !important;
margin-right: auto !important;
padding: 4px 8px !important;
font-size: 11px !important;
} .download-button {
order: 3 !important;
width: 36px !important;
height: 36px !important;
}
.share-button-wrapper {
order: 4 !important;
}
.share-button {
width: 36px !important;
height: 36px !important;
}
.share-dropdown {
position: absolute !important;
right: 0 !important;
top: calc(100% + 4px) !important;
left: auto !important;
transform: none !important;
width: auto !important;
min-width: 160px !important;
max-width: 260px !important;
}
}