diff --git a/public/css/style.css b/public/css/style.css index ab51f54..1631c86 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -150,8 +150,7 @@ div#middle_section { display: flex; align-items:center; } -.top_result > img { - display: inline-block; +.top_result > .cover_container { width: 156px; height: 156px; } @@ -185,7 +184,7 @@ div#middle_section { display: inline-block; width: 156px; } -.release > img{ +.release > .cover_container{ width: 156px; height: 156px; } @@ -308,6 +307,40 @@ img.circle { .coverart{ background-color: var(--secondary-background); } +.cover_container{ + position: relative; +} +.cover_container .coverart { + opacity: 1; + display: block; + width: 100%; + height: auto; + transition: .5s ease; + backface-visibility: hidden; +} +.cover_container .download_overlay { + transition: .5s ease; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + text-align: center; +} +.cover_container .download_overlay i{ + background-color: #000000; + color: white; + border-radius: 50%; + padding: 10px; + cursor: pointer; +} +.cover_container:hover .coverart { + opacity: 0.75 +} +.cover_container:hover .download_overlay { + opacity: 1; +} span.tag { background-color: var(--tag-background); border-radius: 2px; diff --git a/public/index.html b/public/index.html index 2a74737..7881909 100644 --- a/public/index.html +++ b/public/index.html @@ -49,8 +49,11 @@
{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}
{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? numberWithDots(results.TOP_RESULT[0].NB_FAN) + ' fans' : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'by '+results.TOP_RESULT[0].ART_NAME+' - '+results.TOP_RESULT[0].NUMBER_TRACK+' tracks' : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'by '+results.TOP_RESULT[0].PARENT_USERNAME+' - '+results.TOP_RESULT[0].NB_SONG+' tracks' : '' }}
@@ -71,7 +74,10 @@{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}
{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}
{{ release.ALB_TITLE }}
{{ 'by '+release.ART_NAME }}
{{ release.ART_NAME }}
{{ numberWithDots(release.NB_FAN) + ' fans' }}
{{ release.TITLE }}
{{ release.NB_SONG+' tracks' }}