RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 19:44:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve playlist item style

Browse Source
This commit is contained in:
SrGooglo 2025-02-20 02:41:49 +00:00
parent 2702db8365
commit 05428959ff
2 changed files with 120 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
packages/app/src/components/Music/Playlist/index.less
View File

@ -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;
}
}
} }

13
packages/app/src/pages/music/tabs/explore/components/ReleasesList/index.less
View File

@ -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;
} }
} }
} }