Implemented socket.io
Started work on darkmode Implemented queue system Started work on download tab
This commit is contained in:
7
public/css/darkMode.css
Normal file
7
public/css/darkMode.css
Normal file
@@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--main-background: #141414;
|
||||
--secondary-background: #242424;
|
||||
--main-text: #eeeeee;
|
||||
--panels-background: #1a1a1a;
|
||||
--panels-text: #ffffff;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user