.spotify-now-playing {
padding: 20px;
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.spotify-now-playing .track-info {
display: flex;
align-items: center;
gap: 20px;
}
.spotify-now-playing .track-artwork {
flex-shrink: 0;
}
.spotify-now-playing .track-artwork img {
width: 100px;
height: 100px;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.spotify-now-playing .track-details {
flex-grow: 1;
min-width: 0;
position: relative;
}
.spotify-now-playing .track-name {
font-size: 1.4em;
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spotify-now-playing .track-artist {
font-size: 1.1em;
margin-bottom: 3px;
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spotify-now-playing .track-album {
font-size: 0.9em;
opacity: 0.7;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spotify-now-playing .progress-bar {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 10px;
}
.spotify-now-playing .progress-bar .progress {
height: 100%;
background: #1DB954;
transition: width 0.5s ease;
}
.spotify-now-playing .no-track-playing {
text-align: center;
padding: 30px;
font-size: 1.1em;
opacity: 0.7;
}
.spotify-now-playing .listen-now {
display: inline-block;
background: #1DB954;
color: white;
text-decoration: none;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.8em;
font-weight: 600;
transition: background-color 0.2s ease;
margin-top: 8px;
}
.spotify-now-playing .listen-now:hover {
background: #1ed760;
color: white;
}
.spotify-now-playing .listen-now svg {
width: 12px;
height: 12px;
margin-right: 4px;
vertical-align: middle;
fill: currentColor;
}
.ruthless-promo-banner {
background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%);
color: white;
padding: 12px 15px;
margin-bottom: 15px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ruthless-promo-icon {
font-size: 20px;
flex-shrink: 0;
}
.ruthless-promo-content {
flex-grow: 1;
line-height: 1.4;
}
.ruthless-promo-content p {
margin: 0;
}
.ruthless-promo-content a {
color: #fbd38d;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.ruthless-promo-content a:hover {
color: #f6ad55;
}
.ruthless-promo-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
font-size: 24px;
line-height: 1;
padding: 0;
cursor: pointer;
flex-shrink: 0;
transition: color 0.2s ease;
}
.ruthless-promo-close:hover {
color: white;
}.spotify-artist-widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
} .spotify-artist-widget.layout-horizontal {
display: flex;
align-items: center;
gap: 30px;
}
.spotify-artist-widget.layout-vertical {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.spotify-artist-widget.layout-compact {
display: flex;
align-items: center;
gap: 15px;
}
.spotify-artist-widget.layout-compact .artist-image img {
width: 80px !important;
height: 80px !important;
} .artist-image {
flex-shrink: 0;
}
.artist-image img {
display: block;
object-fit: cover;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
} .artist-info {
flex-grow: 1;
min-width: 0;
}
.artist-name {
margin: 0 0 15px;
font-size: 2em;
font-weight: bold;
line-height: 1.2;
} .artist-stats {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.layout-vertical .artist-stats {
justify-content: center;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-value {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9em;
opacity: 0.7;
} .popularity-bar {
width: 100px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
margin-bottom: 5px;
}
.popularity-fill {
height: 100%;
background: #1DB954;
transition: width 0.3s ease;
} .artist-genres {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.layout-vertical .artist-genres {
justify-content: center;
}
.genre-tag {
background: rgba(255, 255, 255, 0.1);
padding: 4px 12px;
border-radius: 15px;
font-size: 0.9em;
} .follow-button {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
padding: 10px 20px;
transition: all 0.2s ease;
}
.follow-button .spotify-icon {
width: 16px;
height: 16px;
fill: currentColor;
} .spotify-artist-widget-error {
padding: 20px;
background: rgba(255, 0, 0, 0.1);
color: #ff0000;
border-radius: 8px;
text-align: center;
} @media (max-width: 767px) {
.spotify-artist-widget.layout-horizontal {
flex-direction: column;
text-align: center;
}
.artist-stats {
justify-content: center;
}
.artist-genres {
justify-content: center;
}
} .artist-top-tracks {
margin-top: 20px;
margin-bottom: 20px;
}
.artist-top-tracks h4 {
margin: 0 0 10px;
font-size: 1.1em;
opacity: 0.9;
}
.tracks-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.track-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
transition: background-color 0.2s ease;
}
.track-item:hover {
background: rgba(255, 255, 255, 0.15);
}
.track-item .track-name {
font-weight: 500;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-item .track-album {
font-size: 0.9em;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-vertical .tracks-list {
text-align: left;
width: 100%;
max-width: 400px;
margin: 0 auto;
} .spotify-widget-premium-notice {
text-align: center;
padding: 30px;
background: #f7f7f7;
border-radius: 8px;
border: 1px solid #ddd;
}
.spotify-widget-premium-notice h3 {
margin: 0 0 15px;
color: #1DB954;
font-size: 1.4em;
}
.spotify-widget-premium-notice p {
margin: 0 0 20px;
color: #666;
}
.spotify-widget-premium-notice .button {
display: inline-block;
padding: 10px 20px;
background: #1DB954;
color: white;
text-decoration: none;
border-radius: 20px;
font-weight: 500;
transition: background-color 0.2s ease;
}
.spotify-widget-premium-notice .button:hover {
background: #1ed760;
}