mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 19:14:16 +00:00
improve playlist item style
This commit is contained in:
parent
2702db8365
commit
05428959ff
@ -1,161 +1,154 @@
|
|||||||
@playlist_cover_maxSize: 200px;
|
@playlist_cover_maxSize: 200px;
|
||||||
|
|
||||||
.playlist {
|
.playlist {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
width: 100%;
|
width: @playlist_cover_maxSize;
|
||||||
max-width: 230px;
|
max-width: @playlist_cover_maxSize;
|
||||||
|
|
||||||
gap: 8px;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
transition: all 150ms ease-in-out;
|
transition: all 150ms ease-in-out;
|
||||||
|
|
||||||
&.cover-hovering {
|
&.cover-hovering {
|
||||||
.playlist_cover {
|
.playlist_cover {
|
||||||
.playlist_cover_mask {
|
.playlist_cover_mask {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist_cover {
|
.playlist_cover {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
width: 100%;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
max-width: @playlist_cover_maxSize;
|
width: 100%;
|
||||||
max-height: @playlist_cover_maxSize;
|
//max-height: 150px;
|
||||||
|
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
|
|
||||||
overflow: hidden;
|
img {
|
||||||
|
width: @playlist_cover_maxSize;
|
||||||
|
height: @playlist_cover_maxSize;
|
||||||
|
|
||||||
border-radius: 12px;
|
object-fit: cover;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.image-wrapper {
|
.playlist_cover_mask {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
top: 0;
|
||||||
width: @playlist_cover_maxSize;
|
left: 0;
|
||||||
height: @playlist_cover_maxSize;
|
|
||||||
|
|
||||||
object-fit: cover;
|
display: flex;
|
||||||
}
|
|
||||||
|
|
||||||
.playlist_cover_mask {
|
align-items: center;
|
||||||
position: absolute;
|
justify-content: center;
|
||||||
|
|
||||||
top: 0;
|
width: 100%;
|
||||||
left: 0;
|
height: 100%;
|
||||||
|
|
||||||
display: flex;
|
opacity: 0;
|
||||||
|
|
||||||
align-items: center;
|
transition: all 0.2s ease-in-out;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 100%;
|
z-index: 55;
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
opacity: 0;
|
background-color: rgba(var(--layoutBackgroundColor), 0.6);
|
||||||
|
color: var(--text-color);
|
||||||
|
|
||||||
transition: all 0.2s ease-in-out;
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
z-index: 55;
|
.playlist_info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
background-color: rgba(var(--layoutBackgroundColor), 0.6);
|
width: 100%;
|
||||||
color: var(--text-color);
|
transition: all 150ms ease-in-out;
|
||||||
|
|
||||||
font-size: 3rem;
|
&:hover {
|
||||||
}
|
.playlist_info_title {
|
||||||
}
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.playlist_info {
|
.playlist_info_title {
|
||||||
display: flex;
|
font-size: 0.7rem;
|
||||||
flex-direction: column;
|
font-weight: 600;
|
||||||
|
|
||||||
width: 100%;
|
color: var(--background-color-contrast);
|
||||||
transition: all 150ms ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
overflow: hidden;
|
||||||
.playlist_info_title {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist_info_title {
|
h1,
|
||||||
font-size: 0.7rem;
|
h4 {
|
||||||
font-weight: 600;
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
color: var(--background-color-contrast);
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
overflow: hidden;
|
.playlist_info_subtitle {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
|
||||||
h1,
|
p {
|
||||||
h4 {
|
overflow: hidden;
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
margin: 0;
|
text-overflow: ellipsis;
|
||||||
}
|
white-space: nowrap;
|
||||||
}
|
|
||||||
|
|
||||||
.playlist_info_subtitle {
|
margin: 0;
|
||||||
color: var(--text-color);
|
}
|
||||||
font-size: 0.7rem;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
.playlist_actions {
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
text-overflow: ellipsis;
|
align-self: flex-end;
|
||||||
white-space: nowrap;
|
justify-self: flex-end;
|
||||||
|
|
||||||
margin: 0;
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist_actions {
|
height: 100%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
align-self: flex-end;
|
padding: 10px;
|
||||||
justify-self: flex-end;
|
|
||||||
|
|
||||||
justify-content: center;
|
.ant-btn {
|
||||||
align-items: center;
|
svg {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
height: 100%;
|
.playlist_bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
padding: 10px;
|
gap: 8px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
|
||||||
.ant-btn {
|
text-transform: uppercase;
|
||||||
svg {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist_bottom {
|
svg,
|
||||||
display: flex;
|
p {
|
||||||
flex-direction: row;
|
margin: 0;
|
||||||
|
}
|
||||||
gap: 8px;
|
}
|
||||||
font-size: 0.7rem;
|
|
||||||
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
svg,
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
@ -1,3 +1,5 @@
|
|||||||
|
@min-item-size: 200px;
|
||||||
|
|
||||||
.music-releases-list {
|
.music-releases-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -31,6 +33,9 @@
|
|||||||
|
|
||||||
.music-releases-list-items {
|
.music-releases-list-items {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(@min-item-size, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
/* display: grid;
|
||||||
|
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
@ -53,11 +58,17 @@
|
|||||||
|
|
||||||
@media (min-width: 1920px) {
|
@media (min-width: 1920px) {
|
||||||
grid-template-columns: repeat(9, 1fr);
|
grid-template-columns: repeat(9, 1fr);
|
||||||
}
|
} */
|
||||||
|
|
||||||
.playlist {
|
.playlist {
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
//min-width: 372px !important;
|
//min-width: 372px !important;
|
||||||
|
|
||||||
|
width: unset;
|
||||||
|
height: unset;
|
||||||
|
|
||||||
|
min-width: @min-item-size;
|
||||||
|
min-height: @min-item-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user