1 files changed, 208 insertions, 0 deletions
diff --git a/frontend/src/css/Sidebar.css b/frontend/src/css/Sidebar.css
new file mode 100644
index 0000000..34ede80
--- /dev/null
+++ b/frontend/src/css/Sidebar.css
@@ -0,0 +1,208 @@
+#sidebar {
+    overflow: hidden;
+    position: absolute;
+    background-color: #2b2e46;
+    width: 320px;    height: 100vh;
+    min-height: 670px;
+    
+}
+ /* logo */
+#logo{
+    display: grid;
+    grid-template-columns: 60px 200px;
+    height:  80px;
+    padding: 20px 0 20px 30px;
+    cursor: pointer;
+    user-select: none;
+} 
+#logo-text{
+    font-family: BarlowCondensed-Regular;
+    font-size: 42px;
+    color: #FFF;
+    line-height: 38px;
+}
+span>b{
+    font-family: BarlowCondensed-Bold;
+    font-size: 56px;
+}
+ /* Sidelist */
+#sidebar-list{
+    z-index: 2;
+    background-color: #2b2e46;
+    position: relative;
+    height: calc(100vh - 120px);
+    width: 320px; 
+    /* min-height: 670px; */
+    transition: width .3s;
+} 
+#sidebar-toplist>button:nth-child(1){margin-top: 5px;}
+#sidebar-toplist{
+    display: grid;
+    
+    margin: 0 5px 0 5px;
+    justify-items: left;
+    height: 400px;
+    grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
+}
+#sidebar-bottomlist{
+    display: grid;
+    margin: 0 5px 0 5px;
+    justify-items: left;
+    grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
+}
+.sidebar-button>span{
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 18px;
+    color: #CDCFDF;
+    height: 32px;
+    line-height: 28px;
+    transition: opacity .1s;
+}
+.sidebar-button{
+    display: grid;
+    grid-template-columns: 50px auto;
+    place-items: left;
+    text-align: left;
+    
+    background-color: inherit;
+    cursor: pointer;
+    border: none;
+    width: 310px;
+    height: 40px;
+    border-radius: 20px;
+    padding: 0.4em 0 0 11px;
+    transition: 
+    width .3s,
+    background-color .15s,
+    padding .3s;
+}
+.sidebar-button-selected {
+    background-color: #202232;
+}
+.sidebar-button-deselected {
+    background-color: #20223200;
+}
+.sidebar-button-deselected:hover {
+    background-color: #202232aa;
+}
+button>img {
+    scale: 1.1;
+    width: 20px;
+    padding: 5px;
+}
+ /* Maplist */
+#sidebar>div:nth-child(3){
+    position: relative;
+    background-color: #202232;
+    color: #424562;
+    z-index: 1;
+    
+    left: 52px; 
+    top: calc(-100vh + 120px); 
+    width: 268px; height: calc(100vh - 120px);
+    min-height: 550px;
+} 
+input#searchbar[type=text]{
+    margin: 10px 0 0 6px;
+    padding: 1px 0px 1px 16px;
+    width: 240px;
+    height: 30px;
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 20px;
+    
+    background-color: #161723;
+    color:#CDCFDF;
+    
+    border: 0;
+    border-radius: 20px;
+}
+input[type=text]::placeholder{color:#2b2e46}
+input[type=text]:focus{outline: inherit;}
+a{text-decoration: none;height: 40px;}
+#search-data{
+    margin: 8px 0 8px 0;
+    overflow-y: auto;
+    max-height: calc(100vh - 172px);
+    scrollbar-width: thin;
+}
+#search-data::-webkit-scrollbar{display: none;}
+.search-map{
+    margin: 10px 6px 0 6px;
+    height: 80px; 
+    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);
+}
+.search-map>span{
+    color: #888;
+    font-size: 16px;
+    font-family: BarlowSemiCondensed-Regular;
+}
+.search-map>span:nth-child(3){
+    font-size: 30px;
+    color: #CDCFDF;
+}
+.search-player{
+    overflow: hidden;
+    margin: 10px 6px 0 6px;
+    height: 80px; 
+    border-radius: 20px;
+    text-align: center;
+    color: #CDCFDF;
+    font-family: BarlowSemiCondensed-Regular;
+    
+    display: grid;
+    place-items: center;
+    grid-template-columns: 20% 80%;
+    padding: 0 16px 0 16px;
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+}
+.search-player>img{
+    height: 60px; 
+    border-radius: 20px;
+}
+.search-player>span{
+    width:154px;
+    font-size: 26px;
+}

diff --git a/frontend/src/css/Sidebar.css b/frontend/src/css/Sidebar.css new file mode 100644 index 0000000..34ede80 --- /dev/null +++ b/frontend/src/css/Sidebar.css
@@ -0,0 +1,208 @@
	1	#sidebar {
	2	overflow: hidden;
	3	position: absolute;
	4	background-color: #2b2e46;
	5	width: 320px; height: 100vh;
	6	min-height: 670px;
	7
	8	}
	9
	10	/* logo */
	11	#logo{
	12	display: grid;
	13	grid-template-columns: 60px 200px;
	14
	15
	16	height: 80px;
	17	padding: 20px 0 20px 30px;
	18	cursor: pointer;
	19	user-select: none;
	20	}
	21
	22	#logo-text{
	23	font-family: BarlowCondensed-Regular;
	24	font-size: 42px;
	25	color: #FFF;
	26	line-height: 38px;
	27	}
	28	span>b{
	29	font-family: BarlowCondensed-Bold;
	30	font-size: 56px;
	31	}
	32
	33	/* Sidelist */
	34	#sidebar-list{
	35	z-index: 2;
	36	background-color: #2b2e46;
	37	position: relative;
	38	height: calc(100vh - 120px);
	39	width: 320px;
	40	/* min-height: 670px; */
	41	transition: width .3s;
	42	}
	43	#sidebar-toplist>button:nth-child(1){margin-top: 5px;}
	44	#sidebar-toplist{
	45	display: grid;
	46
	47	margin: 0 5px 0 5px;
	48	justify-items: left;
	49	height: 400px;
	50	grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
	51	}
	52
	53	#sidebar-bottomlist{
	54	display: grid;
	55
	56	margin: 0 5px 0 5px;
	57	justify-items: left;
	58	grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
	59	}
	60	.sidebar-button>span{
	61	font-family: BarlowSemiCondensed-Regular;
	62	font-size: 18px;
	63	color: #CDCFDF;
	64	height: 32px;
	65	line-height: 28px;
	66	transition: opacity .1s;
	67	}
	68	.sidebar-button{
	69	display: grid;
	70	grid-template-columns: 50px auto;
	71	place-items: left;
	72	text-align: left;
	73
	74	background-color: inherit;
	75	cursor: pointer;
	76	border: none;
	77	width: 310px;
	78	height: 40px;
	79	border-radius: 20px;
	80	padding: 0.4em 0 0 11px;
	81
	82	transition:
	83	width .3s,
	84	background-color .15s,
	85	padding .3s;
	86	}
	87
	88	.sidebar-button-selected {
	89	background-color: #202232;
	90	}
	91
	92	.sidebar-button-deselected {
	93	background-color: #20223200;
	94	}
	95
	96	.sidebar-button-deselected:hover {
	97	background-color: #202232aa;
	98	}
	99
	100	button>img {
	101	scale: 1.1;
	102	width: 20px;
	103	padding: 5px;
	104	}
	105
	106	/* Maplist */
	107	#sidebar>div:nth-child(3){
	108	position: relative;
	109	background-color: #202232;
	110	color: #424562;
	111	z-index: 1;
	112
	113	left: 52px;
	114	top: calc(-100vh + 120px);
	115	width: 268px; height: calc(100vh - 120px);
	116	min-height: 550px;
	117	}
	118	input#searchbar[type=text]{
	119	margin: 10px 0 0 6px;
	120	padding: 1px 0px 1px 16px;
	121	width: 240px;
	122	height: 30px;
	123
	124	font-family: BarlowSemiCondensed-Regular;
	125	font-size: 20px;
	126
	127	background-color: #161723;
	128	color:#CDCFDF;
	129
	130	border: 0;
	131	border-radius: 20px;
	132
	133	}
	134	input[type=text]::placeholder{color:#2b2e46}
	135	input[type=text]:focus{outline: inherit;}
	136	a{text-decoration: none;height: 40px;}
	137
	138
	139	#search-data{
	140	margin: 8px 0 8px 0;
	141	overflow-y: auto;
	142	max-height: calc(100vh - 172px);
	143	scrollbar-width: thin;
	144	}
	145	#search-data::-webkit-scrollbar{display: none;}
	146	.search-map{
	147	margin: 10px 6px 0 6px;
	148	height: 80px;
	149
	150	border-radius: 20px;
	151	text-align: center;
	152
	153	display: grid;
	154
	155	border: 0;
	156	transition: background-color .1s;
	157	background-color: #2b2e46;
	158	grid-template-rows: 20% 20% 60%;
	159	width: calc(100% - 15px);
	160	}
	161	.search-map>span{
	162	color: #888;
	163	font-size: 16px;
	164	font-family: BarlowSemiCondensed-Regular;
	165	}
	166	.search-map>span:nth-child(3){
	167	font-size: 30px;
	168	color: #CDCFDF;
	169	}
	170
	171	.search-player{
	172	overflow: hidden;
	173	margin: 10px 6px 0 6px;
	174	height: 80px;
	175
	176	border-radius: 20px;
	177	text-align: center;
	178	color: #CDCFDF;
	179	font-family: BarlowSemiCondensed-Regular;
	180
	181	display: grid;
	182	place-items: center;
	183	grid-template-columns: 20% 80%;
	184	padding: 0 16px 0 16px;
	185
	186	border: 0;
	187	transition: background-color .1s;
	188	background-color: #2b2e46;
	189	}
	190	.search-player>img{
	191	height: 60px;
	192	border-radius: 20px;
	193	}
	194	.search-player>span{
	195	width:154px;
	196	font-size: 26px;
	197	}
	198
	199
	200
	201
	202
	203
	204
	205
	206
	207
	208