oat
/
deemix-web-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

some design changes

This commit is contained in:
Jill 2021-10-20 19:12:43 +03:00
parent 611ad91088
commit 2b5aaee718
3 changed files with 69 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/assets/download.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

28
public/index.css
View File

@ -46,13 +46,14 @@
color:rgb(131, 131, 243);
}
.link:hover {
color: rgb(151, 151, 263);
color: rgb(151, 151, 255);
filter: drop-shadow( 0px 0px 2px #8383F3);
}
.album-download {
filter: invert(100%) hue-rotate(180deg);
filter: invert(100%);
}
.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 {
border: 8px solid #fff;
@ -82,6 +83,9 @@
.slider {
background-color: rgb(131, 131, 243);
}
.slider:hover {
filter: drop-shadow( 0px 0px 5px #8383F3);
}
#progress-state {
background-color: #0a0a0f;
}
@ -132,12 +136,13 @@
}
.link:hover {
color: #f484b6;
filter: drop-shadow( 0px 0px 2px #f484b6);
}
.album-download {
filter: invert(0%) hue-rotate(276deg);
filter: none;
}
.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 {
border: 8px solid #1e1e2d;
@ -167,6 +172,9 @@
.slider {
background-color: #ea74ac;
}
.slider:hover {
filter: drop-shadow( 0px 0px 5px #ea74ac);
}
#git {
filter: invert(100%);
}
@ -239,7 +247,7 @@ input {
}
.link {
cursor: pointer;
transition: 0.1s color ease-out;
transition: 0.1s color ease-out, 0.1s filter ease-out;
}
.album-download {
position: relative;
@ -367,8 +375,8 @@ input {
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .4s;
transition: .4s;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
@ -379,8 +387,8 @@ input {
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
-webkit-transition: .2s;
transition: .2s;
}
input:checked + .slider:before {

4
public/index.js
View File

@ -154,7 +154,7 @@ window.onload = () => {
return;
}
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>');
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 =>
`<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('');
for (track of document.getElementById('album-bottom-' + id).children) {
let trackId = track.id.split('-')[1];