RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +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

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

@ -7,10 +7,9 @@
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;
@ -27,27 +26,21 @@
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;
border-radius: 12px;
.image-wrapper {
width: 100%;
}
img { img {
width: @playlist_cover_maxSize; width: @playlist_cover_maxSize;
height: @playlist_cover_maxSize; height: @playlist_cover_maxSize;
object-fit: cover; object-fit: cover;
border-radius: 12px;
} }
.playlist_cover_mask { .playlist_cover_mask {

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