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