Implemented socket.io

Started work on darkmode
Implemented queue system
Started work on download tab
This commit is contained in:
RemixDev
2020-04-10 16:12:21 +02:00
parent d58fca7266
commit 55268c72b5
8 changed files with 114 additions and 70 deletions

7
public/css/darkMode.css Normal file
View File

@@ -0,0 +1,7 @@
:root {
--main-background: #141414;
--secondary-background: #242424;
--main-text: #eeeeee;
--panels-background: #1a1a1a;
--panels-text: #ffffff;
}

View File

@@ -1,20 +1,32 @@
:root {
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-scroll: #555;
--panels-background: #222324;
--panels-text: #ffffff;
--accent-color: #0A84FF;
--tag-background: #0062c4;
--tag-text: #ffffff;
}
html{height: 100%;}
body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: #ffffff; color: #333333;}
body{margin: 0px;width: 100%;height: 100%;font-family: sans-serif; overflow: hidden; background-color: var(--main-background); color: var(--main-text);}
/* Sidebar section selector */
aside#sidebar{
background-color: #222324;
background-color: var(--panels-background);
width: 48px;
height: 100%;
position: absolute;
color: #ffffff;
color: var(--panels-text);
}
aside#sidebar > .side_icon{
font-size: 24px;
margin: 12px;
}
.side_icon.active{
color: #0A84FF;
color: var(--accent-color);
}
/* Rest of the app */
@@ -27,7 +39,7 @@ main#main_content{
/* Middle section */
div#middle_section {
background-color: #ffffff;
background-color: var(--main-background);
width: 100%;
height: 100%;
min-width: 10px;
@@ -41,10 +53,10 @@ div#middle_section {
margin: 8px;
border: 0px;
border-radius: 6px;
background-color: #eeeeee;
background-color: var(--secondary-background);
}
#content{
background-color: #ffffff;
background-color: var(--main-background);
width: calc(100% - 10px);
height: calc(100% - 48px);
overflow-y: scroll;
@@ -56,11 +68,11 @@ div#middle_section {
}
#content::-webkit-scrollbar-track {
background: #ffffff;
background: var(--main-background);
}
#content::-webkit-scrollbar-thumb {
background: #555;
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
@@ -145,8 +157,8 @@ div#middle_section {
/* Download tab section */
div#download_tab_container{
background-color: #222324;
color: #ffffff;
background-color: var(--panels-background);
color: var(--panels-text);
height: 100%;
width: auto;
display: flex;
@@ -186,12 +198,12 @@ img.circle {
}
.coverart{
background-color: #eee;
background-color: var(--secondary-background);
}
span.tag {
background-color: #222324;
background-color: var(--tag-background);
border-radius: 2px;
color: #ffffff;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;