From 06dcf0b96170c509342d3a5e3be6c1da6bc62705 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Mon, 10 Feb 2025 22:26:37 +0000 Subject: [PATCH] improve track cover image render --- .../app/src/components/Music/Track/index.less | 333 +++++++++--------- 1 file changed, 168 insertions(+), 165 deletions(-) diff --git a/packages/app/src/components/Music/Track/index.less b/packages/app/src/components/Music/Track/index.less index 043694e2..1a840efc 100755 --- a/packages/app/src/components/Music/Track/index.less +++ b/packages/app/src/components/Music/Track/index.less @@ -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; - } - } -} \ No newline at end of file + .music-track_duration { + font-size: 0.8rem; + } + } +}