added dark mode toggle with animation, continued re-organization of settings tab

public/css/modules/base.css

@@ -1,15 +1,10 @@
-/* Normalizing */
 * {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+	transition: background-color 500ms ease-in-out;
 }
 
-body {
-	font-size: 16px;
-}
+html {
+	height: 100%;
 
-:root {
 	--main-background: #ffffff;
 	--secondary-background: #eeeeee;
 	--main-text: #333333;
@@ -26,8 +21,7 @@ body {
 	--toast-text: #ffffffde;
 }
 
-/* Add to body to switch to dark mode */
-.dark-theme {
+html[data-theme='dark'] {
 	--main-background: #141414;
 	--secondary-background: #242424;
 	--main-text: #eeeeee;
@@ -35,23 +29,12 @@ body {
 	--panels-text: #ffffff;
 }
 
-html {
-	height: 100%;
-}
-
 body {
 	margin: 0px;
 	width: 100%;
 	height: 100%;
 	font-family: 'Open Sans';
 	overflow: hidden;
-	background-color: var(--main-background);
+	background: var(--main-background);
 	color: var(--main-text);
 }
-
-#main_content {
-	margin-left: 48px;
-	width: calc(100% - 48px);
-	height: 100%;
-	display: flex;
-}

public/css/modules/globals.css

@@ -1,4 +1,10 @@
-/* Global stuff */
+#main_content {
+	margin-left: 48px;
+	width: calc(100% - 48px);
+	height: 100%;
+	display: flex;
+}
+
 img.rounded {
 	border-radius: 5px;
 }
@@ -260,3 +266,21 @@ th.sort-desc:after {
 	font-size: 24px;
 	padding: 16px;
 }
+
+.with_checkbox {
+	display: flex;
+	align-items: center;
+}
+
+.with_checkbox [type='checkbox'] {
+	cursor: pointer;
+}
+
+.with_checkbox .checkbox_text {
+	margin-left: 10px;
+	cursor: pointer;
+}
+
+.with_checkbox .checkbox_text::selection {
+	background: none;
+}

public/css/modules/middle-section.css

@@ -7,7 +7,7 @@
 }
 
 /* Center section */
-#search>#searchbar {
+#search > #searchbar {
 	width: calc(100% - 32px);
 	height: 32px;
 	padding: 0px 8px;
@@ -15,7 +15,7 @@
 	border: 0px;
 	border-radius: 6px;
 	background-color: var(--secondary-background);
-	color: var(--primary-text)
+	color: var(--primary-text);
 }
 
 #content {
@@ -24,7 +24,7 @@
 	height: calc(100% - 48px);
 	overflow-y: scroll;
 	overflow-x: hidden;
-	padding-left: 10px
+	padding-left: 10px;
 }
 
 #content::-webkit-scrollbar {
@@ -58,8 +58,8 @@
 	width: 100%; /* Full width */
 	height: 100%; /* Full height */
 	overflow: auto; /* Enable scroll if needed */
-	background-color: rgb(0,0,0); /* Fallback color */
-	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+	background-color: rgb(0, 0, 0); /* Fallback color */
+	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
 	animation-duration: 0.3s;
 }
 
@@ -73,25 +73,28 @@
 	top: 50%;
 	transform: translateY(-50%);
 }
-.smallmodal-content button{
+.smallmodal-content button {
 	width: 100%;
 	margin-bottom: 8px;
 }
 
 @media only screen and (min-width: 601px) {
-	#container, .smallmodal-content {
+	#container,
+	.smallmodal-content {
 		width: 85%;
 	}
 }
 
 @media only screen and (min-width: 993px) {
-	#container, .smallmodal-content {
+	#container,
+	.smallmodal-content {
 		width: 70%;
 	}
 }
 
 @media only screen and (max-width: 600px) {
-	#container, .smallmodal-content {
+	#container,
+	.smallmodal-content {
 		width: 100%;
 	}
 }

public/css/modules/normalize.css

@@ -0,0 +1,9 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-size: 16px;
+}

public/css/modules/settings.css

@@ -57,3 +57,11 @@
 .settings_group > * {
 	margin-bottom: 15px;
 }
+
+.input_group {
+	margin-bottom: 25px;
+}
+
+.input_group .input_group_text {
+	margin-bottom: 7px;
+}

public/css/style.css

@@ -3,6 +3,7 @@
 @import './vendor/OpenSans.css';
 @import './vendor/toastify.css';
 
+@import './modules/normalize.css';
 @import './modules/base.css';
 @import './modules/globals.css';
 @import './modules/progressbar.css';