From 9fc4a59febca51d04874ced9ebeaaafbb9ed3499 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Mon, 14 Mar 2022 13:46:51 -0700 Subject: [PATCH] fix for top songs and latest release on artist page --- src/renderer/less/pages.less | 930 ++++++++++++++-------------- src/renderer/views/pages/artist.ejs | 6 +- 2 files changed, 483 insertions(+), 453 deletions(-) diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 41fc5ea4..823c85f9 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -1,63 +1,65 @@ // Helpers .content-inner { - position: absolute; - top: var(--navigationBarHeight); - left: 0; - padding: 32px; - width: 100%; + position : absolute; + top : var(--navigationBarHeight); + left : 0; + padding : 32px; + width : 100%; transition: zoom 1s; - zoom: 1; + zoom : 1; } .content-inner.centered { - height: 100%; - display: flex; - flex-flow: column; + height : 100%; + display : flex; + flex-flow : column; justify-content: center; - align-items: center; + align-items : center; } + // End Helpers // GitHub Themes .github-themes-page { - display: flex; + display : flex; flex-direction: column; - padding: 0px; - height: calc(100% - var(--navigationBarHeight)); + padding : 0px; + height : calc(100% - var(--navigationBarHeight)); .github-avatar { - height: 42px; - width: 42px; - margin: 6px; + height : 42px; + width : 42px; + margin : 6px; border-radius: 32px; } .repo-name { - margin:0px; - font-weight: 500; - overflow: hidden; + margin : 0px; + font-weight : 500; + overflow : hidden; text-overflow: ellipsis; - white-space: break-spaces; + white-space : break-spaces; } .repo-url { - color: var(--textColor); + color : var(--textColor); font-size: 0.8em; } .repo-preview-name { - margin:0px; + margin: 0px; } .repos-list { - height: 100%; + height : 100%; overflow-y: overlay; - width: 320px; - font-size: 14px; + width : 320px; + font-size : 14px; >.list-group { - margin:0px; + margin: 0px; } + .list-group-item { padding: 12px 6px; @@ -72,18 +74,18 @@ } .github-preview { - height: 100%; - flex: 1; + height : 100%; + flex : 1; background: var(--color2); - padding: 16px 32px; - overflow-y:overlay; + padding : 16px 32px; + overflow-y: overlay; } .gh-content { - display: flex; + display : flex; flex-direction: row; - flex: 1; - overflow: hidden; + flex : 1; + overflow : hidden; } .gh-header { @@ -96,16 +98,16 @@ padding: 0px; .library-header { - position: sticky; - top: 0; - left: 0; - border-bottom: 1px solid rgba(200, 200, 200, 0.05); - z-index: 6; - background: black; - padding: 0px 2em; + position : sticky; + top : 0; + left : 0; + border-bottom : 1px solid rgba(200, 200, 200, 0.05); + z-index : 6; + background : black; + padding : 0px 2em; backdrop-filter: blur(32px); - background: rgba(0, 0, 0, 0.25); - top: var(--navigationBarHeight); + background : rgba(0, 0, 0, 0.25); + top : var(--navigationBarHeight); } .well { @@ -116,7 +118,7 @@ // Podcast Page .content-inner.podcasts-page { display: flex; - height: calc(100% - var(--navigationBarHeight)); + height : calc(100% - var(--navigationBarHeight)); padding: 0px; .list-flat { @@ -124,45 +126,45 @@ } .podcast-artwork { - width: 200px; + width : 200px; margin: 16px auto; height: 200px; } .podcasts-list { - height: 100%; - width: 280px; - background: rgb(200 200 200 / 10%); - overflow-y: overlay; + height : 100%; + width : 280px; + background : rgb(200 200 200 / 10%); + overflow-y : overlay; border-right: 1px solid var(--color2); - flex: none; - overflow-x: hidden; + flex : none; + overflow-x : hidden; .podcast-list-header { - border-bottom: 1px solid var(--color2); - font-size: 0.7em; - padding: 6px; - background: #ffffff17; + border-bottom : 1px solid var(--color2); + font-size : 0.7em; + padding : 6px; + background : #ffffff17; text-transform: uppercase; - font-weight: 600; - opacity: 0.5; + font-weight : 600; + opacity : 0.5; } .podcasts-search { - padding: 10px; - position: sticky; - top: 0; - left: 0; - width: 100%; + padding : 10px; + position : sticky; + top : 0; + left : 0; + width : 100%; border-bottom: 1px solid var(--color2); - z-index: 2; - background: #303030; + z-index : 2; + background : #303030; } } .episodes-list { - height: 100%; - width: 100%; + height : 100%; + width : 100%; background: rgb(200 200 200 / 6%); overflow-y: overlay; overflow-x: hidden; @@ -171,20 +173,20 @@ padding: 14px 14px 0px 14px; .podcast-show-info { - display: flex; + display : flex; justify-content: center; - flex-direction: column; + flex-direction : column; } .podcast-show-description { - margin: 32px 6px; - font-size: 0.8rem; + margin : 32px 6px; + font-size : 0.8rem; white-space: pre-wrap; - display: block; + display : block; } .podcast-artwork { - width: 120px; + width : 120px; margin: 0px auto; height: 120px; } @@ -197,14 +199,14 @@ } .podcasts-details { - width: 300px; - flex: none; - background: rgb(255 255 255 / 5%); - overflow-y: overlay; - overflow-x: hidden; - top: 2%; - z-index: 2; - border-left: 1px solid var(--color2); + width : 300px; + flex : none; + background : rgb(255 255 255 / 5%); + overflow-y : overlay; + overflow-x : hidden; + top : 2%; + z-index : 2; + border-left : 1px solid var(--color2); padding-bottom: 1em; .meta-btn { @@ -212,27 +214,27 @@ } .podcasts-details-header { - display: flex; + display : flex; justify-content: end; - align-items: center; - position: sticky; - top: 0; - z-index: 2; + align-items : center; + position : sticky; + top : 0; + z-index : 2; } .close-btn { - width: 50px; - height: 42px; - background-image: var(--gfx-closeBtn); + width : 50px; + height : 42px; + background-image : var(--gfx-closeBtn); background-position: center; - background-repeat: no-repeat; - -webkit-app-region: no-drag; - appearance: none; - border: 0; - background-color: transparent; - position: absolute; - top: 0; - right: 0; + background-repeat : no-repeat; + -webkit-app-region : no-drag; + appearance : none; + border : 0; + background-color : transparent; + position : absolute; + top : 0; + right : 0; &:hover { background-color: rgb(196, 43, 28) @@ -240,17 +242,17 @@ } .podcast-genre { - text-align: center; - margin: 6px; - font-size: 0.8em; + text-align : center; + margin : 6px; + font-size : 0.8em; font-weight: 500; - opacity: 0.8; + opacity : 0.8; } .podcast-metainfo { text-align: center; - font-size: 0.7em; - opacity: 0.8; + font-size : 0.7em; + opacity : 0.8; } .podcast-header { @@ -258,17 +260,17 @@ } .podcast-play-btn { - width: 50%; + width : 50%; display: block; - margin: 0 auto; + margin : 0 auto; } .podcast-description { - margin: 12px; - font-size: 0.75em; + margin : 12px; + font-size : 0.75em; white-space: pre-wrap; - display: block; - line-break: anywhere; + display : block; + line-break : anywhere; } @@ -279,188 +281,188 @@ @media only screen and (max-width: 1230px) { .content-inner.podcasts-page { .podcasts-details { - height: 96%; - width: 300px; - flex: none; - background: rgb(20 20 20 / 97%); - overflow-y: overlay; - overflow-x: hidden; - position: absolute; - right: 2%; - top: 2%; + height : 96%; + width : 300px; + flex : none; + background : rgb(20 20 20 / 97%); + overflow-y : overlay; + overflow-x : hidden; + position : absolute; + right : 2%; + top : 2%; border-radius: 10px; - box-shadow: var(--ciderShadow-Generic); - z-index: 2; + box-shadow : var(--ciderShadow-Generic); + z-index : 2; } } } /* Album / Playlist Page */ .playlist-page { - --bgColor: transparent; - padding: 0px; + --bgColor : transparent; + padding : 0px; //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%); - top: 0; - padding-top: var(--navigationBarHeight); + top : 0; + padding-top : var(--navigationBarHeight); .playlist-body { - padding: var(--contentInnerPadding) 2em; + padding : var(--contentInnerPadding) 2em; margin-top: -75px; } .floating-header { - position: sticky; - top: 0; - left: 0; - border-bottom: 1px solid rgba(200, 200, 200, 0.05); - z-index: 6; - padding: 0px 1em; + position : sticky; + top : 0; + left : 0; + border-bottom : 1px solid rgba(200, 200, 200, 0.05); + z-index : 6; + padding : 0px 1em; backdrop-filter: blur(32px); - background: rgba(0, 0, 0, 0.25); - top: var(--navigationBarHeight); - transition: opacity 0.1s var(--appleEase); + background : rgba(0, 0, 0, 0.25); + top : var(--navigationBarHeight); + transition : opacity 0.1s var(--appleEase); } .playlist-display { - padding: var(--contentInnerPadding); + padding : var(--contentInnerPadding); min-height: 300px; - position: relative; + position : relative; .artworkContainer { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: 0; - margin-top: calc(var(--navigationBarHeight) * -1); - margin-bottom: -10px; - padding: 0; + position : absolute; + top : 0; + left : 0; + bottom : 0; + right : 0; + margin : 0; + margin-top : calc(var(--navigationBarHeight) * -1); + margin-bottom : -10px; + padding : 0; -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%); - opacity: .7; - animation: playlistArtworkFadeIn 1s var(--appleEase); + opacity : .7; + animation : playlistArtworkFadeIn 1s var(--appleEase); - .artworkMaterial > img { - filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + .artworkMaterial>img { + filter : brightness(100%) blur(80px) saturate(100%) contrast(1); object-position: center; - object-fit: cover; - width: 100%; - height: 100%; - transform: unset; + object-fit : cover; + width : 100%; + height : 100%; + transform : unset; } } .playlistInfo { - z-index: 1; - position: absolute; - bottom: 0; - left: 0; - right: 0; - top: 0; - display: flex; + z-index : 1; + position : absolute; + bottom : 0; + left : 0; + right : 0; + top : 0; + display : flex; justify-content: center; - align-items: center; - width: 100%; - height: 100%; + align-items : center; + width : 100%; + height : 100%; - > .row { + >.row { width: calc(100% - 32px); } .playlist-info { - flex-shrink: unset; - display: flex; - flex-flow: column; + flex-shrink : unset; + display : flex; + flex-flow : column; justify-content: flex-end; .playlist-name { - font-weight: 700; - font-size: 1.6rem; + font-weight : 700; + font-size : 1.6rem; //margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; + margin-right : 6px; + flex-shrink : unset; } .nameEdit { - font-weight: 700; - font-size: 1.6rem; + font-weight : 700; + font-size : 1.6rem; margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; - background: transparent; - border: 0px; - color: inherit; - font-family: inherit; + margin-right : 6px; + flex-shrink : unset; + background : transparent; + border : 0px; + color : inherit; + font-family : inherit; } .playlist-artist { - font-size: 20px; + font-size : 20px; margin-bottom: 6px; - margin-right: 6px; - flex-shrink: unset; + margin-right : 6px; + flex-shrink : unset; } .playlist-desc { - box-sizing: border-box; - font-size: 14px; - flex-shrink: unset; + box-sizing : border-box; + font-size : 14px; + flex-shrink : unset; margin-right: 5px; - max-height: 100px; - position: relative; + max-height : 100px; + position : relative; .content { - height: 100px; + height : 100px; -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } .more-btn { - appearance: none; - position: absolute; - right: 0; - bottom: 0; - padding: 0 5px; - font-size: 14px; - color: var(--keyColor); + appearance : none; + position : absolute; + right : 0; + bottom : 0; + padding : 0 5px; + font-size : 14px; + color : var(--keyColor); background-color: transparent; - border: 0px; - cursor: pointer; - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - justify-content: flex-end; - align-items: flex-end; - font-weight: 600; - font-family: inherit; - text-transform: uppercase; + border : 0px; + cursor : pointer; + width : 100%; + height : 100%; + overflow : hidden; + display : flex; + justify-content : flex-end; + align-items : flex-end; + font-weight : 600; + font-family : inherit; + text-transform : uppercase; } } .playlist-desc-expanded { box-sizing: border-box; - font-size: 14px; - position: relative; + font-size : 14px; + position : relative; .more-btn { - appearance: none; - position: absolute; - right: 0; - bottom: 0; - padding: 0 5px; - font-size: 14px; - color: var(--keyColor); + appearance : none; + position : absolute; + right : 0; + bottom : 0; + padding : 0 5px; + font-size : 14px; + color : var(--keyColor); background-color: transparent; - border: 0px; - cursor: pointer; - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - justify-content: flex-end; - align-items: flex-end; - font-weight: 600; - font-family: inherit; - text-transform: uppercase; + border : 0px; + cursor : pointer; + width : 100%; + height : 100%; + overflow : hidden; + display : flex; + justify-content : flex-end; + align-items : flex-end; + font-weight : 600; + font-family : inherit; + text-transform : uppercase; } } } @@ -470,21 +472,21 @@ } .friends-info { - display: flex; + display : flex; flex-flow: column; .badge-container { - display: flex; + display : flex; flex-flow: wrap; .socialBadge { - width: 40px; - height: 40px; + width : 40px; + height : 40px; border-radius: 100%; - overflow: hidden; - box-shadow: var(--mediaItemShadow-ShadowSubtle); - transition: transform .2s var(--appleEase); - margin: 6px; + overflow : hidden; + box-shadow : var(--mediaItemShadow-ShadowSubtle); + transition : transform .2s var(--appleEase); + margin : 6px; &:hover { transform: scale(1.2); @@ -494,54 +496,56 @@ .friends-name { text-align: center; - font-size: 0.9em; - margin: 8px; + font-size : 0.9em; + margin : 8px; } } .playlist-time { font-size: 0.9em; - margin: 6px; - opacity: 0.7; + margin : 6px; + opacity : 0.7; } &.inline-playlist { - overflow: hidden; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - display: flex; + overflow : hidden; + width : 100%; + height : 100%; + background : rgba(0, 0, 0, 0.5); + display : flex; justify-content: center; - align-items: center; - z-index: 6; - position: sticky; - margin-top: calc(var(--navigationBarHeight) * -1); + align-items : center; + z-index : 6; + position : sticky; + margin-top : calc(var(--navigationBarHeight) * -1); .floating-header { - opacity: 1; - top: 0px; - z-index: 6; - padding: 1em; + opacity : 1; + top : 0px; + z-index : 6; + padding : 1em; backdrop-filter: unset; - background: black; + background : black; + h3 { display: none; } } + .playlist-inner { - background: black; - width: 80%; - height: 100%; - overflow: overlay; - box-shadow: var(--ciderShadow-Generic); + background : black; + width : 80%; + height : 100%; + overflow : overlay; + box-shadow : var(--ciderShadow-Generic); border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px; .close-btn { - position: sticky; - top: 16px; - left: 16px; + position : sticky; + top : 16px; + left : 16px; margin-left: 16px; - z-index: 7; + z-index : 7; } } } @@ -551,6 +555,7 @@ 0% { opacity: 0; } + 100% { opacity: 0.7; } @@ -561,20 +566,20 @@ padding-bottom: 128px; .top-fab { - height: 52px; - width: 52px; - position: fixed; - bottom: 32px; - right: 32px; + height : 52px; + width : 52px; + position : fixed; + bottom : 32px; + right : 32px; border-radius: 100%; - background: rgb(60 60 60); - border: 0px; - appearance: none; - box-shadow: var(--ciderShadow-Generic); + background : rgb(60 60 60); + border : 0px; + appearance : none; + box-shadow : var(--ciderShadow-Generic); - > svg { - height: 50%; - color: #eee; + >svg { + height : 50%; + color : #eee; pointer-events: none; } @@ -596,88 +601,88 @@ .artist-page { padding: 0px; - top: 0; + top : 0; .floating-header { - position: sticky; - top: 0; - left: 0; - border-bottom: 1px solid rgba(200, 200, 200, 0.05); - z-index: 6; - padding: 0px 1em; + position : sticky; + top : 0; + left : 0; + border-bottom : 1px solid rgba(200, 200, 200, 0.05); + z-index : 6; + padding : 0px 1em; backdrop-filter: blur(32px); - background: rgba(0, 0, 0, 0.25); - top: var(--navigationBarHeight); - transition: opacity 0.1s var(--appleEase); + background : rgba(0, 0, 0, 0.25); + top : var(--navigationBarHeight); + transition : opacity 0.1s var(--appleEase); } &.animated .artist-header .more-btn-round { position: absolute; - bottom: 22px !important; - right: 28px; + bottom : 22px !important; + right : 28px; } .artist-header { //background: linear-gradient(45deg, var(--keyColor), #0e0e0e); - color: white; - display: flex; - align-items: center; + color : white; + display : flex; + align-items : center; justify-content: space-between; - min-height: 400px; - position: relative; - pointer-events: none; + min-height : 400px; + position : relative; + pointer-events : none; .header-content { - z-index: 1; + z-index : 1; margin-top: -16px; } .artworkContainer { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: 0; - padding: 0; + position : absolute; + top : 0; + left : 0; + bottom : 0; + right : 0; + margin : 0; + padding : 0; -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%); - opacity: .7; - animation: playlistArtworkFadeIn 1s var(--appleEase); + opacity : .7; + animation : playlistArtworkFadeIn 1s var(--appleEase); - .artworkMaterial > img { - filter: brightness(100%) blur(80px) saturate(100%) contrast(1); + .artworkMaterial>img { + filter : brightness(100%) blur(80px) saturate(100%) contrast(1); object-position: center; - object-fit: cover; - width: 100%; - height: 100%; - transform: unset; + object-fit : cover; + width : 100%; + height : 100%; + transform : unset; } } .more-btn-round { position: absolute; - bottom: 82px; - right: 28px; + bottom : 82px; + right : 28px; } .animated { - width: 100%; - height: 100%; + width : 100%; + height : 100%; align-self: center; - position: absolute; - overflow: hidden; + position : absolute; + overflow : hidden; box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; video { - overflow: hidden; - height: 100%; - width: 100%; + overflow : hidden; + height : 100%; + width : 100%; min-height: 56.25vw; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position : absolute; + top : 50%; + left : 50%; + transform : translate(-50%, -50%); } } @@ -687,29 +692,29 @@ } .artist-image { - width: 200px; - height: 200px; - margin: 32px; + width : 200px; + height : 200px; + margin : 32px; position: relative; .overlay-play { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - background: rgb(0 0 0 / 50%); - transition: opacity 0.1s var(--appleEase); - border-radius: 100%; - z-index: 1; - display: flex; - align-items: center; + position : absolute; + top : 0; + left : 0; + width : 100%; + height : 100%; + opacity : 0; + background : rgb(0 0 0 / 50%); + transition : opacity 0.1s var(--appleEase); + border-radius : 100%; + z-index : 1; + display : flex; + align-items : center; justify-content: center; - cursor: pointer; - appearance: none; - border: 0px; - padding: 0px; + cursor : pointer; + appearance : none; + border : 0px; + padding : 0px; &:hover { opacity: 1; @@ -719,32 +724,32 @@ background: var(--selected-click); } - > svg { + >svg { width: 70%; } } } .artist-play { - width: 32px; - height: 32px; - background: rgba(100, 100, 100, 0.5); - box-shadow: var(--ciderShadow-Generic); + width : 32px; + height : 32px; + background : rgba(100, 100, 100, 0.5); + box-shadow : var(--ciderShadow-Generic); border-radius: 100%; - box-shadow: var(--mediaItemShadow); - display: none; - cursor: pointer; - appearance: none; - border: 0px; - padding: 0px; + box-shadow : var(--mediaItemShadow); + display : none; + cursor : pointer; + appearance : none; + border : 0px; + padding : 0px; &:hover { filter: brightness(125%); } &:active { - filter: brightness(75%); - transform: scale(0.98); + filter : brightness(75%); + transform : scale(0.98); transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase); } } @@ -753,16 +758,16 @@ .artist-play { transform: translateY(3px); - margin: 14px; + margin : 14px; } &.artist-animation-on { - width: 100%; - flex: unset; + width : 100%; + flex : unset; margin-left: 0.5em; - color: whitesmoke; - position: absolute; - bottom: 0; + color : whitesmoke; + position : absolute; + bottom : 0; .artist-play { display: block; @@ -772,27 +777,43 @@ .artist-body { padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); - margin: -140px 20px; + margin : -140px 20px; + + .arow { + display : flex; + overflow: hidden; + padding : 16px 32px; + >.latestRelease { + width: 250px; + } + >.topSongs { + width: calc(100% - 250px); + } + + &.arowb>.topSongs { + width: 100%; + } + } } - &.animated > .artist-body { - padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); + &.animated>.artist-body { + padding : 0px var(--contentInnerPadding) 0px var(--contentInnerPadding); margin-top: -57px; } .showmoreless { - font-family: inherit; - font-size: 16px; - font-weight: 500; - background: transparent; - border: 0px; + font-family : inherit; + font-size : 16px; + font-weight : 500; + background : transparent; + border : 0px; border-radius: 6px; - appearance: none; - color: var(--keyColor); - padding: 8px 12px; - cursor: pointer; - margin-top: 12px; - float: right; + appearance : none; + color : var(--keyColor); + padding : 8px 12px; + cursor : pointer; + margin-top : 12px; + float : right; } .showmoreless:hover { @@ -807,12 +828,12 @@ padding: 0px; .md-option-header { - padding: 1.25em 1.25em; + padding : 1.25em 1.25em; border-bottom: unset; - border-top: unset; - font-weight: 600; - font-size: 1.0em; - background: rgb(255 255 255 / 3%); + border-top : unset; + font-weight : 600; + font-size : 1.0em; + background : rgb(255 255 255 / 3%); } .settings-option-body { @@ -822,79 +843,80 @@ //Home .home-page { - top: 0; + top : 0; padding-top: var(--navbarHeight); .md-btn-replay { - background: var(--replayGradient); - border: 0px; - box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); + background : var(--replayGradient); + border : 0px; + box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); text-transform: uppercase; - font-weight: bold; + font-weight : bold; } + .md-btn-replay--hero { - font-size: 1em; - padding: 16px; - background: var(--replayGradient); - border: 0px; - box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%); - margin-top: 1em; - font-size: 0.9em; + font-size : 1em; + padding : 16px; + background : var(--replayGradient); + border : 0px; + box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%); + margin-top : 1em; + font-size : 0.9em; text-transform: uppercase; - font-weight: bold; + font-weight : bold; } .artist-feed-card { - position: absolute; - bottom: 0; - left: 10%; - z-index: 1; - background: black; - width: 80%; - height: 96%; - overflow: scroll; + position : absolute; + bottom : 0; + left : 10%; + z-index : 1; + background : black; + width : 80%; + height : 96%; + overflow : scroll; border-radius: 10px; } .col.madeforyou-col { - width: 420px; + width : 420px; min-width: 0px; max-width: 420px; } .well.artistfeed-well { - margin-top: 0px; - height: 392px; + margin-top : 0px; + height : 392px; align-content: flex-start; } .hint-text { font-size: 0.9rem; - color: rgb(200 200 200 / 70%); + color : rgb(200 200 200 / 70%); } .user-icon { border-radius: 100%; - width: 128px; - height: 128px; - overflow: hidden; - box-shadow: var(--mediaItemShadow-Shadow); - margin: 16px; + width : 128px; + height : 128px; + overflow : hidden; + box-shadow : var(--mediaItemShadow-Shadow); + margin : 16px; } .well.profile-well { - flex-direction: column; + flex-direction : column; justify-content: center; - align-items: center; + align-items : center; .name { - margin: 4px; + margin : 4px; font-weight: 500; } .handle { - margin: 4px; - opacity: 0.7; + margin : 4px; + opacity : 0.7; font-weight: 500; } } @@ -905,29 +927,32 @@ --replayTextShadow: 0px 3px 2px #6f3f52; .replay-period { - height: 200px; - width: 200px; - margin: 6px; - border-radius: var(--mediaItemRadius); - overflow: hidden; - cursor: pointer; - transition: transform .2s var(--appleEase); + height : 200px; + width : 200px; + margin : 6px; + border-radius : var(--mediaItemRadius); + overflow : hidden; + cursor : pointer; + transition : transform .2s var(--appleEase); transition-delay: .1s; - align-self: center; + align-self : center; + &:hover { - transform: translateY(-6px); + transform : translateY(-6px); transition-delay: 0s; } + .artwork-container { - height:200px; - width:200px; + height: 200px; + width : 200px; } } .replay-playlist-container { .cd-mediaitem-square { height: 230px; - width: 230px; + width : 230px; + .info-rect { display: none; } @@ -936,42 +961,44 @@ .replay-video { max-height: 300px; - max-width: 800px; - margin: 0 auto; + max-width : 800px; + margin : 0 auto; .mediaitem-artwork { max-height: 300px; - max-width: 800px; + max-width : 800px; } .mediaitem-artwork .animatedartwork-view-box .animated video { object-fit: cover; } } + .top-genres-container { .genre-name { - font-size: 0.9em; - margin: 6px 0px; + font-size : 0.9em; + margin : 6px 0px; font-weight: 500; } + .genre-count { - width: 100%; - height: 32px; - background: #ffffff14; + width : 100%; + height : 32px; + background : #ffffff14; border-radius: 10px; - overflow: hidden; + overflow : hidden; .genre-count-bar { - height: 100%; - width: 0%; - background: var(--keyColor); - display: flex; + height : 100%; + width : 0%; + background : var(--keyColor); + display : flex; justify-content: center; - align-items: center; - min-width: 32px; - font-size: 0.9em; - font-weight: 500; + align-items : center; + min-width : 32px; + font-size : 0.9em; + font-weight : 500; } } } @@ -980,10 +1007,12 @@ .mediaitem-artwork { animation: replayFadeIn .5s var(--appleEase); } - transition: transform .2s var(--appleEase); + + transition : transform .2s var(--appleEase); transition-delay: .1s; + &:hover { - transform: scale(1.1); + transform : scale(1.1); transition-delay: 0s; } } @@ -992,31 +1021,32 @@ 0% { //border-radius: 100%; transform: translateY(10px) scale(0.9); - opacity: 0; + opacity : 0; } 100% { //border-radius: var(--mediaItemRadius); transform: scale(1); - opacity: 1; + opacity : 1; } } .replay-viewport { - background: var(--replayGradient); - padding: 16px 40px; + background : var(--replayGradient); + padding : 16px 40px; border-radius: 10px; - box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow); - color: rgb(238 238 238 / 86%); + box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow); + color : rgb(238 238 238 / 86%); .replay-header { - text-align: center; - font-size: 3em; + text-align : center; + font-size : 3em; text-shadow: var(--replayTextShadow); } } + .replay-card { background: transparent; - border:0px; + border : 0px; } } \ No newline at end of file diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs index b7bcab37..04171b26 100644 --- a/src/renderer/views/pages/artist.ejs +++ b/src/renderer/views/pages/artist.ejs @@ -56,8 +56,8 @@
-
-
+
+

{{app.getLz('term.latestReleases')}}

-
+

{{app.getLz('term.topSongs')}}