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

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

@ -1,161 +1,154 @@
@playlist_cover_maxSize: 200px;
.playlist {
position: relative;
display: flex;
flex-direction: column;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
cursor: pointer;
width: 100%;
max-width: 230px;
width: @playlist_cover_maxSize;
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 {
.playlist_cover {
.playlist_cover_mask {
opacity: 1;
}
}
}
&.cover-hovering {
.playlist_cover {
.playlist_cover_mask {
opacity: 1;
}
}
}
.playlist_cover {
display: flex;
position: relative;
.playlist_cover {
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
max-width: @playlist_cover_maxSize;
max-height: @playlist_cover_maxSize;
width: 100%;
//max-height: 150px;
transition: all 0.2s ease-in-out;
z-index: 50;
transition: all 0.2s ease-in-out;
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 {
width: 100%;
}
.playlist_cover_mask {
position: absolute;
img {
width: @playlist_cover_maxSize;
height: @playlist_cover_maxSize;
top: 0;
left: 0;
object-fit: cover;
}
display: flex;
.playlist_cover_mask {
position: absolute;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
opacity: 0;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
width: 100%;
height: 100%;
z-index: 55;
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);
color: var(--text-color);
width: 100%;
transition: all 150ms ease-in-out;
font-size: 3rem;
}
}
&:hover {
.playlist_info_title {
text-decoration: underline;
}
}
.playlist_info {
display: flex;
flex-direction: column;
.playlist_info_title {
font-size: 0.7rem;
font-weight: 600;
width: 100%;
transition: all 150ms ease-in-out;
color: var(--background-color-contrast);
&:hover {
.playlist_info_title {
text-decoration: underline;
}
}
overflow: hidden;
.playlist_info_title {
font-size: 0.7rem;
font-weight: 600;
h1,
h4 {
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,
h4 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
p {
overflow: hidden;
margin: 0;
}
}
text-overflow: ellipsis;
white-space: nowrap;
.playlist_info_subtitle {
color: var(--text-color);
font-size: 0.7rem;
margin: 0;
}
}
}
p {
overflow: hidden;
.playlist_actions {
display: flex;
flex-direction: column;
text-overflow: ellipsis;
white-space: nowrap;
align-self: flex-end;
justify-self: flex-end;
margin: 0;
}
}
}
justify-content: center;
align-items: center;
.playlist_actions {
display: flex;
flex-direction: column;
height: 100%;
align-self: flex-end;
justify-self: flex-end;
padding: 10px;
justify-content: center;
align-items: center;
.ant-btn {
svg {
margin: 0 !important;
}
}
}
height: 100%;
.playlist_bottom {
display: flex;
flex-direction: row;
padding: 10px;
gap: 8px;
font-size: 0.7rem;
.ant-btn {
svg {
margin: 0 !important;
}
}
}
text-transform: uppercase;
.playlist_bottom {
display: flex;
flex-direction: row;
gap: 8px;
font-size: 0.7rem;
text-transform: uppercase;
svg,
p {
margin: 0;
}
}
}
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 {
display: flex;
flex-direction: column;
@ -31,6 +33,9 @@
.music-releases-list-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(@min-item-size, 1fr));
gap: 10px;
/* display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
@ -53,11 +58,17 @@
@media (min-width: 1920px) {
grid-template-columns: repeat(9, 1fr);
}
} */
.playlist {
justify-self: center;
//min-width: 372px !important;
width: unset;
height: unset;
min-width: @min-item-size;
min-height: @min-item-size;
}
}
}