started re-organization of settings tab

public/css/modules/base.css

@@ -1,7 +1,7 @@
+/* Normalizing */
 * {
-	/* Normalizing */
-	/* margin: 0; */
-	/* padding: 0; */
+	margin: 0;
+	padding: 0;
 	box-sizing: border-box;
 }
 

public/css/modules/globals.css

@@ -20,12 +20,12 @@ img.circle {
 	display: block;
 	width: 100%;
 	height: auto;
-	transition: .5s ease;
+	transition: 0.5s ease;
 	backface-visibility: hidden;
 }
 
 .cover_container .download_overlay {
-	transition: .5s ease;
+	transition: 0.5s ease;
 	opacity: 0;
 	position: absolute;
 	top: 50%;
@@ -44,7 +44,7 @@ img.circle {
 }
 
 .cover_container:hover .coverart {
-	opacity: 0.75
+	opacity: 0.75;
 }
 
 .cover_container:hover .download_overlay {
@@ -66,7 +66,8 @@ table {
 	-webkit-border-vertical-spacing: 0px;
 }
 
-table td, table th {
+table td,
+table th {
 	padding: 4px 12px 4px 5px;
 	vertical-align: middle;
 	border: 0px black solid;
@@ -80,7 +81,7 @@ table tr:nth-child(even) {
 	background-color: var(--secondary-background);
 	border: 0px black solid;
 }
-th{
+th {
 	text-align: left;
 }
 
@@ -105,7 +106,7 @@ p,
 	display: flex;
 	align-items: center;
 }
-.inline-flex .right{
+.inline-flex .right {
 	margin-left: auto;
 }
 
@@ -155,9 +156,9 @@ button.with_icon i {
 	margin-left: 8px;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="number"] {
+input[type='text'],
+input[type='password'],
+input[type='number'] {
 	width: calc(100% - 16px);
 	border: 0px solid black;
 	line-height: 36px;
@@ -168,7 +169,7 @@ input[type="number"] {
 	margin-bottom: 8px;
 }
 
-select{
+select {
 	-webkit-appearance: none;
 	appearance: none;
 	width: 100%;
@@ -191,7 +192,7 @@ input[type='checkbox'] {
 	appearance: none;
 	background-color: none;
 	border: 2px solid black;
-	opacity: .50;
+	opacity: 0.5;
 	border-radius: 2px;
 	padding: 7px;
 	margin: 3px;
@@ -230,13 +231,23 @@ input[type='checkbox']:checked {
 .tab {
 	margin: 16px 0px;
 }
-th.sortable{
+th.sortable {
 	-webkit-user-select: none;
 	user-select: none;
 }
-th.sort-asc:after {content: "\25b2";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
-th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
-.fab{
+th.sort-asc:after {
+	content: '\25b2';
+	font-size: 0.7em;
+	padding-left: 3px;
+	line-height: 0.7em;
+}
+th.sort-desc:after {
+	content: '\25bc';
+	font-size: 0.7em;
+	padding-left: 3px;
+	line-height: 0.7em;
+}
+.fab {
 	width: 56px;
 	height: 56px;
 	border-radius: 28px;
@@ -245,7 +256,7 @@ th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-hei
 	color: var(--accent-text);
 	cursor: pointer;
 }
-.fab i{
+.fab i {
 	font-size: 24px;
 	padding: 16px;
 }

public/css/modules/home-tab.css

@@ -0,0 +1,5 @@
+.top-tracks-position {
+	padding: 12px;
+	text-align: center;
+	cursor: default;
+}

public/css/modules/settings.css

@@ -1,4 +1,31 @@
-/* Settings */
+#settings_heading {
+	font-size: 2.5rem;
+	margin-bottom: 35px;
+}
+
+#settings_picture {
+	width: 125px;
+	height: 125px;
+}
+
+#logged_in_info {
+	height: 250px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+#logged_in_info.hide {
+	display: none;
+}
+
+#log_info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 #open_login_prompt {
 	margin: 8px 0px;
 }
@@ -18,7 +45,15 @@
 	padding: 6px 0px;
 }
 
-#logged_in_info {
-	display: none;
-	margin-bottom: 12px;
-}
+.settings_group {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border-top: 1px solid #8f8f8f; /* Need less opacity */
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.settings_group > * {
+	margin-bottom: 15px;
+}