some design changes
This commit is contained in:
parent
611ad91088
commit
2b5aaee718
|
@ -0,0 +1,49 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
enable-background="new 0 0 512 512"
|
||||||
|
id="svg10"
|
||||||
|
sodipodi:docname="download.svg"
|
||||||
|
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs14" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview12"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.56761894"
|
||||||
|
inkscape:cx="367.3239"
|
||||||
|
inkscape:cy="27.307052"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1025"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="25"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg10" />
|
||||||
|
<g
|
||||||
|
id="g8"
|
||||||
|
style="fill:#000000">
|
||||||
|
<g
|
||||||
|
id="g6"
|
||||||
|
style="fill:#000000">
|
||||||
|
<path
|
||||||
|
d="M480.6,341.4c-11.3,0-20.4,9.1-20.4,20.4v98.4H51.8v-98.4c0-11.3-9.1-20.4-20.4-20.4c-11.3,0-20.4,9.1-20.4,20.4v118.8 c0,11.3,9.1,20.4,20.4,20.4h449.2c11.3,0,20.4-9.1,20.4-20.4V361.8C501,350.5,491.9,341.4,480.6,341.4z"
|
||||||
|
id="path2"
|
||||||
|
style="fill:#000000" />
|
||||||
|
<path
|
||||||
|
d="m241,365.6c11.5,11.6 25.6,5.2 29.9,0l117.3-126.2c7.7-8.3 7.2-21.2-1.1-28.9-8.3-7.7-21.2-7.2-28.8,1.1l-81.9,88.1v-265.2c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v265.3l-81.9-88.1c-7.7-8.3-20.6-8.7-28.9-1.1-8.3,7.7-8.7,20.6-1.1,28.9l117.3,126.1z"
|
||||||
|
id="path4"
|
||||||
|
style="fill:#000000" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.7 KiB |
|
@ -46,13 +46,14 @@
|
||||||
color:rgb(131, 131, 243);
|
color:rgb(131, 131, 243);
|
||||||
}
|
}
|
||||||
.link:hover {
|
.link:hover {
|
||||||
color: rgb(151, 151, 263);
|
color: rgb(151, 151, 255);
|
||||||
|
filter: drop-shadow( 0px 0px 2px #8383F3);
|
||||||
}
|
}
|
||||||
.album-download {
|
.album-download {
|
||||||
filter: invert(100%) hue-rotate(180deg);
|
filter: invert(100%);
|
||||||
}
|
}
|
||||||
.album-download:hover {
|
.album-download:hover {
|
||||||
filter: invert(100%) sepia(100%) saturate(800%) brightness(70%) hue-rotate(180deg);
|
filter: invert(50%) sepia(58%) saturate(893%) hue-rotate(206deg) brightness(99%) contrast(92%) drop-shadow( 0px 0px 5px #8383F3);
|
||||||
}
|
}
|
||||||
.lds-ring div {
|
.lds-ring div {
|
||||||
border: 8px solid #fff;
|
border: 8px solid #fff;
|
||||||
|
@ -82,6 +83,9 @@
|
||||||
.slider {
|
.slider {
|
||||||
background-color: rgb(131, 131, 243);
|
background-color: rgb(131, 131, 243);
|
||||||
}
|
}
|
||||||
|
.slider:hover {
|
||||||
|
filter: drop-shadow( 0px 0px 5px #8383F3);
|
||||||
|
}
|
||||||
#progress-state {
|
#progress-state {
|
||||||
background-color: #0a0a0f;
|
background-color: #0a0a0f;
|
||||||
}
|
}
|
||||||
|
@ -132,12 +136,13 @@
|
||||||
}
|
}
|
||||||
.link:hover {
|
.link:hover {
|
||||||
color: #f484b6;
|
color: #f484b6;
|
||||||
|
filter: drop-shadow( 0px 0px 2px #f484b6);
|
||||||
}
|
}
|
||||||
.album-download {
|
.album-download {
|
||||||
filter: invert(0%) hue-rotate(276deg);
|
filter: none;
|
||||||
}
|
}
|
||||||
.album-download:hover {
|
.album-download:hover {
|
||||||
filter: invert(100%) sepia(100%) saturate(2000%) brightness(70%) hue-rotate(276deg);
|
filter: invert(65%) sepia(45%) saturate(772%) hue-rotate(295deg) brightness(103%) contrast(91%) drop-shadow( 0px 0px 5px #f484b6);
|
||||||
}
|
}
|
||||||
.lds-ring div {
|
.lds-ring div {
|
||||||
border: 8px solid #1e1e2d;
|
border: 8px solid #1e1e2d;
|
||||||
|
@ -167,6 +172,9 @@
|
||||||
.slider {
|
.slider {
|
||||||
background-color: #ea74ac;
|
background-color: #ea74ac;
|
||||||
}
|
}
|
||||||
|
.slider:hover {
|
||||||
|
filter: drop-shadow( 0px 0px 5px #ea74ac);
|
||||||
|
}
|
||||||
#git {
|
#git {
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
}
|
}
|
||||||
|
@ -239,7 +247,7 @@ input {
|
||||||
}
|
}
|
||||||
.link {
|
.link {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.1s color ease-out;
|
transition: 0.1s color ease-out, 0.1s filter ease-out;
|
||||||
}
|
}
|
||||||
.album-download {
|
.album-download {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -367,8 +375,8 @@ input {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
-webkit-transition: .4s;
|
-webkit-transition: .2s;
|
||||||
transition: .4s;
|
transition: .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider:before {
|
.slider:before {
|
||||||
|
@ -379,8 +387,8 @@ input {
|
||||||
left: 4px;
|
left: 4px;
|
||||||
bottom: 4px;
|
bottom: 4px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
-webkit-transition: .4s;
|
-webkit-transition: .2s;
|
||||||
transition: .4s;
|
transition: .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + .slider:before {
|
input:checked + .slider:before {
|
||||||
|
|
|
@ -154,7 +154,7 @@ window.onload = () => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
document.getElementById('albums').innerHTML = d.data.map(d =>
|
document.getElementById('albums').innerHTML = d.data.map(d =>
|
||||||
`<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
|
`<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="assets/download.svg"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
|
||||||
).join('<br>');
|
).join('<br>');
|
||||||
|
|
||||||
if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>';
|
if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>';
|
||||||
|
@ -180,7 +180,7 @@ window.onload = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
|
document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
|
||||||
`<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></span> ${formatTime(d.duration)}</span></div>`
|
`<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="assets/download.svg"></span> ${formatTime(d.duration)}</span></div>`
|
||||||
).join('');
|
).join('');
|
||||||
for (track of document.getElementById('album-bottom-' + id).children) {
|
for (track of document.getElementById('album-bottom-' + id).children) {
|
||||||
let trackId = track.id.split('-')[1];
|
let trackId = track.id.split('-')[1];
|
||||||
|
|
Loading…
Reference in New Issue