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 track cover image render

Browse Source
This commit is contained in:
SrGooglo 2025-02-10 22:26:37 +00:00
parent 54c7c3c59d
commit 06dcf0b961
1 changed files with 168 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
packages/app/src/components/Music/Track/index.less
View File

@ -1,239 +1,242 @@
html { html {
&.mobile { &.mobile {
.music-track { .music-track {
&:active { &:active {
animation: press 150ms ease-in-out; animation: press 150ms ease-in-out;
} }
&.loading { &.loading {
// TODO: create a bottom line svg to animate stroke width // TODO: create a bottom line svg to animate stroke width
} }
} }
} }
} }
@keyframes press { @keyframes press {
0% { 0% {
transform: scale(1); transform: scale(1);
} }
100% { 100% {
transform: scale(0.95); transform: scale(0.95);
} }
} }
.music-track { .music-track {
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
overflow: hidden; overflow: hidden;
isolation: isolate; isolation: isolate;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
&:hover { &:hover {
.music-track_actions { .music-track_actions {
&.withOrder { &.withOrder {
.music-track_action { .music-track_action {
.ant-btn { .ant-btn {
opacity: 1; opacity: 1;
} }
.music-track_orderIndex { .music-track_orderIndex {
opacity: 0; opacity: 0;
} }
} }
} }
} }
} }
&.current { &.current {
.music-track_actions { .music-track_actions {
.music-track_action { .music-track_action {
.ant-btn { .ant-btn {
background-color: var(--colorPrimary) !important; background-color: var(--colorPrimary) !important;
border: unset; border: unset;
opacity: 1 !important; opacity: 1 !important;
} }
.music-track_orderIndex { .music-track_orderIndex {
opacity: 0 !important; opacity: 0 !important;
} }
} }
} }
.music-track_background { .music-track_background {
background: background: linear-gradient(
linear-gradient(to right, rgba(var(--cover_average-color)), transparent), to right,
url(https://grainy-gradients.vercel.app/noise.svg); rgba(var(--cover_average-color)),
} transparent
} ),
url(https://grainy-gradients.vercel.app/noise.svg);
}
}
.music-track_background { .music-track_background {
position: absolute; position: absolute;
z-index: 50; z-index: 50;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
opacity: 0.2; opacity: 0.2;
} }
.music-track_content { .music-track_content {
position: relative; position: relative;
z-index: 55; z-index: 55;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 6px; padding: 6px;
} }
.music-track_actions { .music-track_actions {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 10px; margin-right: 10px;
&.withOrder { &.withOrder {
.music-track_action { .music-track_action {
.ant-btn { .ant-btn {
opacity: 0; opacity: 0;
} }
} }
} }
.music-track_action { .music-track_action {
position: relative; position: relative;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
cursor: pointer; cursor: pointer;
.music-track_orderIndex { .music-track_orderIndex {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 5px 13px; padding: 5px 13px;
line-height: 22px; line-height: 22px;
opacity: 1; opacity: 1;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
text-align: center; text-align: center;
font-family: "DM Mono", monospace; font-family: "DM Mono", monospace;
svg { svg {
margin: 0; margin: 0;
} }
} }
.ant-btn { .ant-btn {
svg { svg {
margin: 0 !important; margin: 0 !important;
background-color: transparent; background-color: transparent;
fill: var(--text-color); fill: var(--text-color);
stroke: var(--text-color); stroke: var(--text-color);
} }
color: var(--text-color); color: var(--text-color);
background-color: transparent !important; background-color: transparent !important;
border: 1px solid var(--text-color); border: 1px solid var(--text-color);
} }
} }
} }
.music-track_cover { .music-track_cover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: black; background-color: black;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
width: 35px; width: 35px;
height: 35px; height: 35px;
min-width: 35px; min-width: 35px;
min-height: 35px; min-height: 35px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
} }
} }
.music-track_details { .music-track_details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 10px; margin-left: 10px;
color: var(--text-color); color: var(--text-color);
.music-track_title { .music-track_title {
font-size: 1rem; font-size: 1rem;
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
} }
.music-track_artist { .music-track_artist {
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
.music-track_right_actions { .music-track_right_actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
margin-left: auto; margin-left: auto;
color: var(--text-color); color: var(--text-color);
} }
.music-track_info { .music-track_info {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
.music-track_duration { .music-track_duration {
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
} }