From 207a2540101b2f216bde94ae53286d2e52f044e3 Mon Sep 17 00:00:00 2001
From: Wolfboy248 <georgejvindkarlsen@gmail.com>
Date: Mon, 25 Nov 2024 09:20:01 +0100
Subject: frontend: begin port to css modules, sidebar refactor

---
 frontend/src/css/Sidebar.module.css | 163 ++++++++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 frontend/src/css/Sidebar.module.css

(limited to 'frontend/src/css/Sidebar.module.css')

diff --git a/frontend/src/css/Sidebar.module.css b/frontend/src/css/Sidebar.module.css
new file mode 100644
index 0000000..9436a93
--- /dev/null
+++ b/frontend/src/css/Sidebar.module.css
@@ -0,0 +1,163 @@
+.sidebar {
+	display: flex;
+	width: 350px;
+	min-width: 350px;
+	height: 100vh;
+	color: var(--text-color);
+	font-family: BarlowSemiCondensed-Regular;
+	font-size: 18px;
+	background-color: var(--primary-dark);
+	flex-direction: column;
+}
+
+.logo, .logo>a {
+	height: fit-content;
+	display: flex;
+	width: calc(100% - 4px);
+	text-decoration: none;
+	padding-left: 4px;
+	background-color: var(--primary)
+}
+
+.logo>a>img {
+	padding: 12px 8px;
+	height: 80px;
+}
+
+.logo>a>div {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.logo>a>div>span {
+	font-size: 36px;
+    font-family: BarlowCondensed-Regular;
+	padding-left: 8px;
+}
+
+.logoTitle {
+	display: flex;
+	height: 60px;
+	font-size: 56px;
+}
+
+/* btns */
+.btns {
+	display: flex;
+	flex-direction: column;
+	padding: 0px 8px;
+	height: 100%;
+	width: calc(100% - 16px);
+	justify-content: space-between;
+	background-color: var(--primary);
+	transition: all 0.3s ease;
+}
+
+.topBtns>span {
+	height: 28px;
+	display: flex;
+}
+
+.btns.min {
+	width: 42px;
+}
+
+.topBtns, .bottomBtns {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.topBtns {
+	padding-top: 8px;
+}
+
+.bottomBtns {
+	padding-bottom: 8px;
+}
+
+.topBtns a, .bottomBtns a {
+	width: 100%;
+}
+
+.btnsContainer {
+	display: flex;
+}
+
+/* Clusterfuck */
+.searchContainer {
+	width: 0%;
+	transition: all 0.3s ease, overflow-y 0.0s ease 0.1s;
+	opacity: 0;
+	overflow-y: hidden;
+}
+
+.searchContainer.min {
+	width: 100%;
+	transition: all 0.3s ease, opacity 0.1s ease 0.1s;
+	opacity: 1;
+	overflow-y: auto;
+}
+
+.inpContainer {
+	padding: 8px;
+}
+
+.searchResults {
+	overflow-y: auto;
+	height: calc(100% - 54px);
+}
+
+.result {
+    margin: 10px 6px 0 6px;
+    height: 80px; 
+	width: 100%;
+	max-width: 285px;
+	animation: result_in 0.2s ease;
+	animation-fill-mode: backwards;
+	overflow: hidden;
+
+    border-radius: 20px;
+    text-align: center;
+    
+    display: grid;
+
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+    grid-template-rows: 20% 20% 60%;
+    width: calc(100% - 15px);
+}
+.result>span{
+    color: #888;
+    font-size: 16px;
+    font-family: BarlowSemiCondensed-Regular;
+}
+.result>span:nth-child(3), .result.player span{
+    font-size: 30px;
+    color: #CDCFDF;
+}
+
+.result.player img {
+	height: 80px;
+}
+
+.result.player span {
+	display: flex;
+	text-align: left;
+	margin-left: 90px;
+	width: fit-content;
+}
+
+@keyframes result_in {
+	0% {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	100% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+}
+
-- 
cgit v1.2.3