.vefm-track-list,
.vefm-album,
.vefm-concerts {
font-family: var( --vefm-font-family, inherit );
color: inherit;
} .vefm-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
}   .vefm-track-list,
.vefm-album-tracklist {
display: flex;
flex-direction: column;
gap: var( --vefm-track-gap, 14px );
}
.vefm-track {
display: flex;
align-items: center;
gap: 14px;
padding: var( --vefm-track-padding, 10px 16px );
border-radius: var( --vefm-track-radius, 10px );
background: var( --vefm-track-bg, rgba(0, 0, 0, 0.14) );
color: var( --vefm-track-text, inherit );
border: 1px solid rgba(0, 0, 0, 0.12);
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.vefm-track:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.vefm-track.is-playing {
background: var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) );
background: color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) ) 8%, transparent );
border-color: color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) ) 25%, transparent );
} .vefm-play {
flex: 0 0 auto;
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
color: var( --wp--preset--color--background, #fff );
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease, opacity 0.15s ease;
}
.vefm-play:hover {
transform: scale(1.06);
}
.vefm-play:active {
transform: scale(0.96);
}
.vefm-play--disabled {
background: transparent;
color: rgba(0, 0, 0, 0.2);
cursor: default;
}
.vefm-play .vefm-icon-play,
.vefm-play .vefm-icon-pause {
width: 18px;
height: 18px;
fill: currentColor;
}
.vefm-play--disabled .vefm-icon-play {
width: 16px;
height: 16px;
} .vefm-track-body {
flex: 0 1 260px;
max-width: 260px;
min-width: 0; display: flex;
flex-direction: column;
gap: 4px;
}
.vefm-track-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.vefm-track-title-row {
display: flex;
align-items: center;
gap: 0;
min-width: 0; flex: 1 1 auto;
}
.vefm-track-title {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vefm-track-album-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 9px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.08);
color: inherit;
font-size: max(1rem, 0.72em);
font-weight: 500;
letter-spacing: 0.02em;
vertical-align: middle;
opacity: 0.75;
}
.vefm-track-cover {
width: 26px;
height: 26px;
object-fit: cover;
border-radius: 4px;
margin-left: 8px;
flex: 0 0 auto;
vertical-align: middle;
} .vefm-equalizer {
display: none;
align-items: flex-end;
justify-content: center;
align-self: flex-end;
gap: 2px;
height: 56px;
flex: 1 1 auto;
margin: 0 14px;
}
.vefm-track.is-playing .vefm-equalizer {
display: flex;
}
.vefm-equalizer-bar {
width: 7px;
height: 15%;
border-radius: 1px; background-image:
repeating-linear-gradient( to top, transparent 0, transparent 3px, rgba(0, 0, 0, 0.45) 3px, rgba(0, 0, 0, 0.45) 4px ),
linear-gradient(
to top,
var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 0%,
color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 50%, var( --vefm-vu-peak, #ef4444 ) 50% ) 55%,
var( --vefm-vu-peak, #ef4444 ) 100%
); transition: height 0.03s linear;
}
.vefm-track-number {
flex: 0 0 auto;
width: 20px;
text-align: center;
font-variant-numeric: tabular-nums;
opacity: 0.45;
font-size: max(1rem, 0.9em);
}
.vefm-track-time {
flex: 0 0 auto;
font-size: max(1rem, 0.85em);
opacity: 0.65;
font-variant-numeric: tabular-nums;
}
.vefm-track-comment {
display: block;
font-size: max(1rem, 0.85em);
opacity: 0.7;
}
.vefm-lyrics-toggle {
display: inline-block;
margin: 4px 0;
padding: 0;
background: none;
border: none;
color: inherit;
text-decoration: underline;
opacity: 0.75;
font-size: max(0.95rem, 0.8em);
cursor: pointer;
}
.vefm-lyrics-toggle:hover,
.vefm-lyrics-toggle:focus-visible {
opacity: 1;
}
.vefm-lyrics-panel {
display: block;
white-space: normal;
font-size: max(1rem, 0.85em);
line-height: 1.6;
opacity: 0.85;
margin: 4px 0 8px;
padding: 8px 12px;
border-left: 3px solid currentColor;
border-radius: 2px;
background: rgba(128, 128, 128, 0.08);
}
.vefm-track-progress {
cursor: pointer;
padding: 5px 0; border-radius: 4px;
} .vefm-track-progress:focus-visible {
outline: 2px solid var( --vefm-accent-color, #2271b1 );
outline-offset: 3px;
}
.vefm-track-progress-track {
position: relative;
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.vefm-track-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
border-radius: 2px;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
transition: width 0.1s linear;
}
.vefm-track.is-playing .vefm-track-progress-fill {
background: currentColor;
} .vefm-track-volume {
flex: 0 0 auto;
display: none;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.06);
padding: 6px 12px;
border-radius: 999px;
opacity: 0;
transform: translateY(2px);
animation: vefm-fade-in 0.18s ease forwards;
}
@keyframes vefm-fade-in {
to {
opacity: 1;
transform: translateY(0);
}
}
.vefm-track.is-playing .vefm-track-volume {
display: flex;
}
.vefm-volume-toggle {
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.7;
display: flex;
align-items: center;
padding: 0;
flex: 0 0 auto;
}
.vefm-volume-toggle:hover {
opacity: 1;
}
.vefm-volume-toggle .vefm-icon {
width: 17px;
height: 17px;
fill: currentColor;
}
.vefm-volume-slider {
-webkit-appearance: none;
appearance: none;
width: 72px;
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.15);
outline: none;
cursor: pointer;
margin: 0;
} .vefm-volume-slider:focus-visible {
outline: 2px solid var( --vefm-accent-color, #2271b1 );
outline-offset: 2px;
}
.vefm-volume-slider::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.15);
}
.vefm-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
margin-top: -4px;
border-radius: 50%;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
border: 2px solid var( --wp--preset--color--background, #fff );
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.12s ease;
}
.vefm-volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.25);
}
.vefm-volume-slider::-moz-range-track {
height: 4px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.15);
}
.vefm-volume-slider::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
border: 2px solid var( --wp--preset--color--background, #fff );
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.12s ease;
}
.vefm-volume-slider::-moz-range-thumb:hover {
transform: scale(1.25);
} .vefm-track-shop {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
}
.vefm-track-price {
opacity: 0.8;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.vefm-add-to-cart,
.vefm-buy-album {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
color: var( --wp--preset--color--background, #fff );
border-radius: 20px;
padding: 8px 16px;
cursor: pointer;
font-size: max(1rem, 0.9em);
transition: opacity 0.15s ease;
}
.vefm-add-to-cart:hover,
.vefm-buy-album:hover {
opacity: 0.85;
}
.vefm-add-to-cart:disabled {
opacity: 0.6;
cursor: wait;
}
.vefm-add-to-cart .vefm-icon-cart {
width: 15px;
height: 15px;
fill: none;
}
.vefm-album-header {
display: flex;
gap: 20px;
margin-bottom: 24px;
align-items: flex-start;
} .vefm-album-header--compact {
gap: 14px;
margin-bottom: 12px;
align-items: center;
}
.vefm-album-header--compact .vefm-album-cover img {
max-width: 56px;
border-radius: 6px;
}
.vefm-album-header--compact .vefm-album-title {
font-size: 1.1em;
margin: 0;
}
.vefm-album-header--compact .vefm-album-price {
margin: 4px 0 0;
font-size: max(1rem, 0.9em);
}
.vefm-album-header + .vefm-album-tracklist-details {
margin-bottom: 32px;
}
.vefm-tracklist-other-heading {
margin: 24px 0 12px;
font-size: 1em;
opacity: 0.6;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vefm-album-cover img {
max-width: 160px;
height: auto;
border-radius: 8px;
} .vefm-album-tracklist-details {
margin-top: 4px;
}
.vefm-album-tracklist-summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
padding: 10px 16px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.05);
font-weight: 600;
font-size: max(1rem, 0.9em);
user-select: none;
}
.vefm-album-tracklist-summary::-webkit-details-marker {
display: none; }
.vefm-album-tracklist-summary:hover {
background: rgba(0, 0, 0, 0.08);
}
.vefm-album-tracklist-chevron {
width: 16px;
height: 16px;
transition: transform 0.15s ease;
}
.vefm-album-tracklist-details[open] .vefm-album-tracklist-chevron {
transform: rotate(180deg);
}
.vefm-album-tracklist-details .vefm-album-tracklist {
margin-top: 10px;
}
.vefm-album-discount-hint {
display: block;
font-size: max(1rem, 0.8em);
opacity: 0.65;
font-weight: 400;
} @media (max-width: 480px) {
.vefm-track {
flex-wrap: wrap;
}
.vefm-track-body {
flex-basis: 100%;
max-width: 100%;
order: 3;
}
.vefm-track-shop {
margin-left: auto;
}
}    .vefm-concert {
display: flex;
align-items: stretch;
gap: 16px;
padding: 14px 18px;
margin-bottom: var( --vefm-concert-gap, 10px );
border-radius: var( --vefm-concert-radius, 10px );
background: var( --vefm-concert-bg, var( --vefm-track-bg, rgba(0, 0, 0, 0.14) ) );
color: var( --vefm-concert-text, inherit );
border: var( --vefm-concert-border-width, 1px ) solid var( --vefm-concert-border-color, rgba(0, 0, 0, 0.12) );
transition: box-shadow 0.15s ease;
overflow: hidden;
}
.vefm-concert:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
} .vefm-concert--has-poster {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
padding: 0;
}
.vefm-concert-poster-wrap {
height: 100%;
max-height: 340px;
overflow: hidden;
}
.vefm-concert-poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vefm-concert--has-poster .vefm-concert-body,
.vefm-concert--has-poster .vefm-concert-ticket {
padding: 16px 20px;
}
@media (max-width: 480px) {
.vefm-concert--has-poster {
grid-template-columns: 100px minmax(0, 1fr);
}
} .vefm-concert-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 28px;
padding: 4px 0;
}
.vefm-concert-main {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 640px; } .vefm-concert-header {
display: flex;
align-items: center;
gap: 14px;
}
.vefm-concert-heading {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.vefm-concert-date-badge {
flex: 0 0 auto;
width: 64px;
height: 76px;
border-radius: 8px;
background: var( --vefm-concert-badge, #606060 );
color: var( --wp--preset--color--background, #fff );
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.2;
gap: 1px;
}
.vefm-concert-date-day {
font-size: 1.4em;
font-weight: 700;
}
.vefm-concert-date-month {
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.95;
}
.vefm-concert-date-year {
font-size: 1.2em;
opacity: 0.75;
font-variant-numeric: tabular-nums;
} @media ( min-width: 641px ) {
.vefm-concert-date-badge {
width: 76px;
height: 88px;
}
.vefm-concert-date-day {
font-size: 1.6em;
}
.vefm-concert-date-month,
.vefm-concert-date-year {
font-size: 1.3em;
}
}
.vefm-concert-eyebrow {
display: block;
font-size: max(1rem, 0.78em);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.65;
color: var( --vefm-concert-eyebrow-color, inherit );
}
.vefm-concert-title {
margin: 0;
font-size: var( --vefm-concert-title-size, max( 1rem, 1.15em ) );
font-weight: 700;
line-height: 1.25;
} .vefm-concert-countdown {
margin: 2px 0 0;
font-size: max( 1rem, 0.9em );
font-weight: 600;
color: var( --vefm-concert-countdown-color, var( --vefm-concert-text, inherit ) );
} .vefm-concert--past {
opacity: 0.7;
} .vefm-concerts-empty-social {
margin-top: 8px;
opacity: 0.85;
}
.vefm-concerts-empty-social a {
font-weight: 600;
}
.vefm-concert-venue {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 0;
font-size: var( --vefm-concert-venue-size, max( 1rem, 1.05em ) );
color: var( --vefm-concert-venue-color, inherit );
opacity: 0.85;
} .vefm-concert-price {
margin: 4px 0 0;
font-size: max( 0.95rem, 0.9em );
font-weight: 600;
opacity: 0.85;
}
.vefm-icon-pin {
width: 14px;
height: 14px;
flex: 0 0 auto;
opacity: 0.9;
fill: var( --vefm-concert-pin, #e2483d );
}
.vefm-concert-time {
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.vefm-concert-time::before {
content: '·';
margin-right: 8px;
}
.vefm-concert-description {
margin: 0;
font-size: max(1rem, 0.9em);
opacity: 0.8;
line-height: 1.4;
}
.vefm-concert-description p {
margin: 0 0 6px;
}
.vefm-concert-actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.vefm-concert-ticket-link {
flex: 0 0 auto;
padding: 10px 24px;
border-radius: 20px;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
color: var( --wp--preset--color--background, #fff );
text-decoration: none;
font-size: max(1rem, 0.9em);
font-weight: 600;
white-space: nowrap;
transition: opacity 0.15s ease;
}
.vefm-concert-ticket-link:hover {
opacity: 0.85;
color: var( --wp--preset--color--background, #fff );
}
@media (max-width: 640px) {
.vefm-concert-body {
flex-direction: column;
align-items: flex-start;
}
.vefm-concert-actions {
align-items: flex-start;
}
}
@media (max-width: 480px) {
.vefm-concert-header {
flex-wrap: wrap;
}
} .vefm-concert-ticket {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: stretch;
gap: 28px;
padding: 4px 0;
}
.vefm-concert-ticket-zone1 {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.vefm-concert-ticket-time {
font-size: max(1rem, 0.85em);
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.vefm-concert-ticket-venue-short {
font-size: max(1rem, 0.85em);
opacity: 0.75;
max-width: 90px;
} .vefm-concert-ticket-divider {
flex: 0 0 auto;
width: 1px;
align-self: stretch;
margin: -16px 0;
background-image: radial-gradient( circle, rgba(255, 255, 255, 0.9) 4.5px, transparent 5px );
background-size: 100% 18px;
background-repeat: repeat-y;
background-position: center top;
}
.vefm-concert-ticket-zone2 {
flex: 1 1 260px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
max-width: 360px;
}
.vefm-concert-ticket-zone2 .vefm-concert-venue {
margin-top: 4px;
}
.vefm-concert-ticket-address {
margin: 0 0 0 22px; font-size: max(1rem, 0.9em);
opacity: 0.7;
}
.vefm-concert-ticket-zone3 {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.vefm-concert-ticket-actions {
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 780px) { .vefm-concert--featured.vefm-concert--has-poster {
display: block;
padding: 16px 20px;
}
.vefm-concert--featured .vefm-concert-poster-wrap {
width: 100%;
height: auto;
max-height: 420px;
margin-bottom: 16px; display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
}
.vefm-concert--featured .vefm-concert-poster {
width: auto;
height: auto;
max-width: 100%;
max-height: 420px;
object-fit: contain;
}
.vefm-concert-ticket {
flex-direction: column;
align-items: stretch;
gap: 18px;
}
.vefm-concert-ticket-zone1 {
flex-direction: row;
justify-content: flex-start;
align-items: center;
text-align: left;
gap: 14px;
padding-bottom: 18px;
}
.vefm-concert-ticket-venue-short {
max-width: none;
} .vefm-concert-ticket-divider {
width: auto;
height: 1px;
align-self: stretch;
margin: 0 -20px;
background-image: radial-gradient( circle, rgba(255, 255, 255, 0.9) 4.5px, transparent 5px );
background-size: 18px 100%;
background-repeat: repeat-x;
background-position: left center;
} .vefm-concert-ticket-zone2,
.vefm-concert-ticket-zone3 {
max-width: none;
justify-content: flex-start; flex: 0 1 auto;
}
.vefm-concert-ticket-actions {
flex-wrap: wrap;
}
}  .vefm-playlist-toolbar {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 14px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.04);
}
.vefm-playlist-playpause {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
color: var( --wp--preset--color--background, #fff );
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.vefm-playlist-playpause .vefm-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.vefm-playlist-volume {
display: flex;
align-items: center;
gap: 8px;
}
.vefm-playlist-shuffle {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
background: none;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 999px;
padding: 6px 12px;
cursor: pointer;
color: inherit;
opacity: 0.75;
font-size: 0.85em;
}
.vefm-playlist-shuffle .vefm-icon {
width: 15px;
height: 15px;
}
.vefm-playlist-shuffle:hover {
opacity: 1;
}
.vefm-playlist-shuffle.is-active {
opacity: 1;
background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
color: var( --wp--preset--color--background, #fff );
border-color: transparent;
}