app/assets/stylesheets/components/playlists.scss
// Layouts of ul.playlists are handled by responsive_grid.scss
ul.playlists {
display: flex;
flex-wrap: wrap;
&.no_artist_name_playlists {
li.playlist {
a.small_playlist_title {
padding: 0 8px 8px 8px;
}
}
}
li.playlist {
&.private {
background-color: $card-private-background;
position: relative;
.private_playlist_padlock {
display: block;
content: '';
background-image: image-url("svg/icon_lock.svg");
background-size: 30px 30px;
margin-left: 4px;
height: 26px;
width: 26px;
position: absolute;
top: 6px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}
a.small_playlist_title {
color: $card-private-text;
position: relative;
}
}
font-size: 11px;
padding-bottom: $baseline / 4;
text-align: center;
background-color: $card-background;
border-radius: 6px;
box-shadow: 0px 1.5px 2.75px rgba(0, 0, 0, 0.15);
> a:first-child {
@media #{$one-column} {
height: auto;
}
}
a {
display: block;
img {
display: block;
width: 100%;
border-radius: 6px 6px 0 0;
}
svg {
display: block;
border-radius: 6px 6px 0 0;
}
}
a.small_playlist_title {
color: $card-title-text;
font-family: $card-title-font;
font-weight: $card-title-weight;
display: block;
overflow: hidden;
margin-top: 16px;
line-height: 11px;
padding: 0 6px;
text-align: center;
}
div.small_playlist_user {
color: $card-artist-text;
font-family: $medium-sans-font;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
a {
display: inline-block;
font-family: $card-artist-font;
font-weight: $card-artist-weight;
margin-top: 5px;
padding: 0 8px 9px 3px;
font-size: 9.6px;
}
span.by {
color: $card-by-text;
font-family: $card-by-font;
font-weight: $card-by-weight;
font-size: 9.6px;
}
}
}
}