started re-organizing css, added js beautify file

public/css/modules/base.css

@@ -0,0 +1,46 @@
+:root {
+	--main-background: #ffffff;
+	--secondary-background: #eeeeee;
+	--main-text: #333333;
+	--main-scroll: #555;
+	--panels-background: #222324;
+	--panels-text: #ffffff;
+	--panels-scroll: #2a2c2c;
+	--accent-color: #0A84FF;
+	--accent-text: #ffffff;
+	--tag-background: #0062c4;
+	--tag-text: #ffffff;
+	--toast-background: #000000dd;
+	--toast-secondary: #ffffff22;
+	--toast-text: #ffffffde;
+}
+
+/* A little JS needed, not difficult */
+.dark-theme {
+	--main-background: #141414;
+	--secondary-background: #242424;
+	--main-text: #eeeeee;
+	--panels-background: #1a1a1a;
+	--panels-text: #ffffff;
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	margin: 0px;
+	width: 100%;
+	height: 100%;
+	font-family: 'Open Sans';
+	overflow: hidden;
+	background-color: var(--main-background);
+	color: var(--main-text);
+}
+
+#main_content {
+	margin-left: 48px;
+	width: calc(100% - 48px);
+	height: 100%;
+	display: flex;
+}

public/css/modules/download-tab.css

@@ -0,0 +1,127 @@
+/* Download tab section */
+div#download_tab_container {
+	background-color: var(--panels-background);
+	color: var(--panels-text);
+	height: 100%;
+	width: auto;
+	display: flex;
+}
+
+div#download_tab_bar {
+	height: 100%;
+	width: 32px;
+}
+
+div#download_tab_bar>label {
+	writing-mode: vertical-rl;
+	line-height: 32px;
+	padding-top: 8px;
+}
+
+div#download_tab {
+	height: 100%;
+	width: 300px;
+	display: none;
+}
+
+.download_bar_icon {
+	font-size: 24px;
+	margin: 4px;
+}
+
+#download_list {
+	padding: 0px 8px;
+	height: calc(100% - 32px);
+	overflow-y: scroll;
+}
+
+#download_list::-webkit-scrollbar {
+	width: 10px;
+}
+
+#download_list::-webkit-scrollbar-track {
+	background: var(--panels-background);
+}
+
+#download_list::-webkit-scrollbar-thumb {
+	background: var(--panels-scroll);
+	border-radius: 4px;
+	width: 6px;
+	padding: 0px 2px;
+}
+
+#download_list>.download_object {
+	padding-bottom: 8px;
+}
+
+#download_list>.download_object .download_info {
+	display: flex;
+	align-items: center;
+}
+
+#download_list>.download_object .download_info img {
+	width: 75px;
+	height: 75px;
+	display: inline-block;
+	flex-shrink: 0;
+}
+
+#download_list>.download_object .download_info .download_line {
+	display: block;
+}
+
+#download_list>.download_object .download_info .download_slim_separator {
+	display: none;
+}
+
+#download_list>.download_object .download_info_data {
+	width: 100%;
+	margin-left: 8px;
+}
+
+#download_list>.download_object .download_info_status {
+	margin-left: 8px;
+	width: 80px;
+}
+
+#download_list.slim>.download_object .download_info img {
+	display: none;
+}
+
+#download_list.slim>.download_object .download_info .download_line {
+	display: inline-block;
+}
+
+#download_list.slim>.download_object .download_info .download_slim_separator {
+	display: inline-block;
+}
+
+#download_list.slim>.download_object .download_info_data {
+	width: calc(80% - 16px);
+	display: inline-block;
+	padding-left: 0px;
+}
+
+#download_list.slim>.download_object .download_info_status {
+	width: 20%;
+	display: inline-block;
+	float: right;
+}
+
+#download_list.slim>.download_object .download_info {
+	display: block;
+}
+
+.download_object>.download_bar>.queue_icon {
+	margin-left: 8px;
+}
+
+.download_object>.download_bar {
+	display: flex;
+	align-items: center;
+	height: 24px;
+}
+
+.download_object>.download_bar>.progress {
+	margin: 0px;
+}

public/css/modules/globals.css

@@ -0,0 +1,160 @@
+/* Global stuff */
+img.rounded {
+	border-radius: 5px;
+}
+
+img.circle {
+	border-radius: 50%;
+}
+
+.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;
+	color: var(--tag-text);
+	display: inline-block;
+	font-size: 10px;
+	padding: 3px 6px;
+}
+
+.tracks_table {
+	width: 100%;
+	-webkit-border-horizontal-spacing: 0px;
+	-webkit-border-vertical-spacing: 0px;
+}
+
+.tracks_table td {
+	padding: 4px 12px 4px 5px;
+	vertical-align: middle;
+	border: 0px black solid;
+}
+
+td img {
+	vertical-align: middle;
+}
+
+.tracks_table tr:nth-child(even) {
+	background-color: var(--secondary-background);
+	border: 0px black solid;
+}
+
+p,
+.tracks_table td.breakline {
+	word-break: break-word;
+}
+
+.clickable {
+	cursor: pointer;
+}
+
+.toastify {
+	display: flex;
+	align-items: center;
+	box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
+	background: var(--toast-background);
+	color: var(--toast-text);
+}
+
+.inline-flex {
+	display: flex;
+	align-items: center;
+}
+
+.secondary-text .material-icons {
+	font-size: 17px !important;
+	margin-left: 4px;
+}
+
+button {
+	font-family: inherit;
+	font-weight: 600;
+	font-size: 14px;
+	padding: 0px 8px;
+	margin-right: 8px;
+	height: 36px;
+	background-color: var(--accent-color);
+	border: 0px solid black;
+	border-radius: 4px;
+	min-width: 64px;
+	text-transform: uppercase;
+	color: var(--accent-text);
+}
+
+button[disabled] {
+	background-color: var(--secondary-background);
+	color: var(--main-text);
+	opacity: 0.75;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="number"] {
+	width: calc(100% - 16px);
+	border: 0px solid black;
+	line-height: 36px;
+	padding: 0px 8px;
+	border-radius: 4px;
+	background-color: var(--secondary-background);
+	color: var(--primary-text);
+	margin-bottom: 8px;
+}
+
+.right {
+	float: right;
+}
+
+.fixed_footer footer {
+	position: sticky;
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	justify-content: flex-end;
+	background-color: var(--main-background);
+	bottom: 0px;
+	height: 64px;
+	width: 100%;
+	margin-top: 24px;
+}

public/css/modules/main-search.css

@@ -0,0 +1,73 @@
+/* Main Search Tab */
+
+.search_tablinks {
+	background-color: var(--main-background);
+	color: var(--main-text);
+}
+
+.search_tablinks.active {
+	background-color: var(--accent-color);
+	color: var(--accent-text);
+}
+
+#main_search>.search_section {
+	float: none;
+}
+
+#search_tab .tab {
+	margin-bottom: 24px;
+}
+
+.top_result {
+	display: flex;
+	align-items: center;
+}
+
+.top_result>.cover_container {
+	width: 156px;
+	height: 156px;
+}
+
+.top_result>.info_box {
+	display: inline-block;
+	padding-left: 24px;
+}
+
+.top_result>.info_box>p,
+.release>p {
+	margin: 0px;
+	margin-bottom: 4px;
+}
+
+.secondary-text {
+	opacity: 0.75;
+	font-size: 14px;
+}
+
+.release_grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
+	grid-gap: 1rem;
+}
+
+.release_grid.firstrow_only {
+	grid-template-rows: 1fr;
+	grid-auto-rows: 0;
+	grid-row-gap: 0px;
+	overflow-y: hidden;
+}
+
+.release {
+	display: inline-block;
+	width: 156px;
+}
+
+.release>.cover_container {
+	width: 156px;
+	height: 156px;
+}
+
+.track_row>td>img {
+	width: 32px;
+	height: 32px;
+}

public/css/modules/middle-section.css

@@ -0,0 +1,67 @@
+/* Middle section */
+#middle_section {
+	background-color: var(--main-background);
+	width: 100%;
+	height: 100%;
+	min-width: 10px;
+}
+
+/* Center section */
+#search>#searchbar {
+	width: calc(100% - 32px);
+	height: 32px;
+	padding: 0px 8px;
+	margin: 8px;
+	border: 0px;
+	border-radius: 6px;
+	background-color: var(--secondary-background);
+	color: var(--primary-text)
+}
+
+#content {
+	background-color: var(--main-background);
+	width: calc(100% - 10px);
+	height: calc(100% - 48px);
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-left: 10px
+}
+
+#content::-webkit-scrollbar {
+	width: 10px;
+}
+
+#content::-webkit-scrollbar-track {
+	background: var(--main-background);
+}
+
+#content::-webkit-scrollbar-thumb {
+	background: var(--main-scroll);
+	border-radius: 4px;
+	width: 6px;
+	padding: 0px 2px;
+}
+
+#container {
+	margin: 0 auto;
+	max-width: 1280px;
+	width: 90%;
+}
+
+@media only screen and (min-width: 601px) {
+	#container {
+		width: 85%;
+	}
+}
+
+@media only screen and (min-width: 993px) {
+	#container {
+		width: 70%;
+	}
+}
+
+@media only screen and (max-width: 600px) {
+	#container {
+		width: 100%;
+	}
+}

public/css/modules/settings.css

@@ -0,0 +1,24 @@
+/* Settings */
+#open_login_prompt {
+	margin: 8px 0px;
+}
+
+#login_input_arl {
+	margin-bottom: 0px;
+}
+
+#settings_btn_copyArl {
+	min-width: 24px;
+	width: 48px;
+	margin: 0px 0px 0px 8px;
+	padding: 0px 4px;
+}
+
+#settings_btn_copyArl i {
+	padding: 6px 0px;
+}
+
+#logged_in_info {
+	display: none;
+	margin-bottom: 12px;
+}

public/css/modules/sidebar.css

@@ -0,0 +1,17 @@
+/* Sidebar section selector */
+#sidebar {
+	background-color: var(--panels-background);
+	width: 48px;
+	height: 100%;
+	position: absolute;
+	color: var(--panels-text);
+}
+
+#sidebar > .side_icon {
+	font-size: 24px;
+	padding: 12px;
+}
+
+.side_icon.active {
+	color: var(--accent-color);
+}

public/css/modules/tabs.css

@@ -0,0 +1,5 @@
+/* Tabs */
+.search_tabcontent,
+.main_tabcontent {
+	display: none;
+}