From 76afeb2c174002a4f7be7b0894affb8a4d6c8ec0 Mon Sep 17 00:00:00 2001
From: Roberto Tonino <roberto.tonino5@gmail.com>
Date: Sat, 9 May 2020 19:27:47 +0200
Subject: [PATCH] styled search tab links and centered top result

---
 public/css/modules/base/base.css       |  4 +-
 public/css/modules/tabs/search-tab.css | 61 ++++++++++++++++++++++----
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/public/css/modules/base/base.css b/public/css/modules/base/base.css
index 6a8c058..c326b61 100644
--- a/public/css/modules/base/base.css
+++ b/public/css/modules/base/base.css
@@ -6,11 +6,12 @@
 } */
 
 html {
-	height: 100%;
+	height: 100vh;
 
 	--main-background: #ffffff;
 	--secondary-background: #eeeeee;
 	--main-text: #333333;
+	--main-text-inverted: #eeeeee;
 	--main-scroll: #555;
 	--panels-background: #222324;
 	--panels-text: #ffffff;
@@ -29,6 +30,7 @@ html[data-theme='dark'] {
 	--main-background: #141414;
 	--secondary-background: #242424;
 	--main-text: #eeeeee;
+	--main-text-inverted: #333333;
 	--panels-background: #1a1a1a;
 	--panels-text: #ffffff;
 }
diff --git a/public/css/modules/tabs/search-tab.css b/public/css/modules/tabs/search-tab.css
index 4f313fd..408c36e 100644
--- a/public/css/modules/tabs/search-tab.css
+++ b/public/css/modules/tabs/search-tab.css
@@ -1,24 +1,46 @@
 #main_search .search_section {
 	float: none;
 	cursor: pointer;
-	border-top: 1px solid var(--separator);
 	padding-top: 20px;
 	padding-bottom: 20px;
 }
 
-/* Top Result */
-.top_result_header {
-	font-size: 2rem;
+#main_search .search_section:not(:first-child) {
+	border-top: 1px solid var(--separator);
 }
 
 .search_header {
+	display: inline-block;
 	font-size: 1.75rem;
 	margin-bottom: 25px;
 }
 
+.search_header:not(.top_result_header) {
+	transition: color 200ms ease-in-out;
+}
+
+.search_header:not(.top_result_header):hover {
+	color: var(--accent-color);
+}
+
+/* Tab links */
+
+.search_tablinks.active {
+	color: var(--main-text-inverted);
+}
+
+/* Top Result */
+#main_search .top_result_header {
+	display: block;
+	cursor: default;
+	font-size: 2rem;
+	text-align: center;
+}
+
 .top_result {
 	display: flex;
 	align-items: center;
+	flex-direction: column;
 }
 
 .top_result > .cover_container {
@@ -26,19 +48,40 @@
 	height: 156px;
 }
 
-.top_result > .info_box {
-	display: inline-block;
-	padding-left: 24px;
+.top_result .info_box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-top: 15px;
 }
 
-.top_result > .info_box > p,
+.top_result .info_box .primary-text,
+.top_result .info_box .secondary-text {
+	font-size: 18px;
+	text-align: center;
+}
+
+.top_result .info_box .primary-text {
+	margin-bottom: 5px;
+}
+
+.top_result .info_box .secondary-text {
+	margin-bottom: 10px;
+}
+
+.top_result .info_box .tag {
+	width: 40px;
+	text-align: center;
+}
+
+/* Releases */
 .release .primary-text,
 .release .secondary-text {
 	margin: 0px;
 	margin-bottom: 4px;
 }
 
-/* Releases */
 .release .secondary-text {
 	opacity: 0.75;
 	font-size: 14px;