From da7c988469ce2c3e17173f72416808ddb355d224 Mon Sep 17 00:00:00 2001
From: Nidboj132 <lol2s@vp.plm>
Date: Sat, 29 Apr 2023 13:00:05 +0200
Subject: ui update

---
 frontend/src/components/sidebar.css | 158 ++++++++++++++++++++++++------------
 1 file changed, 104 insertions(+), 54 deletions(-)

(limited to 'frontend/src/components/sidebar.css')

diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
index 9742f0e..23d46ad 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/components/sidebar.css
@@ -1,73 +1,123 @@
 #sidebar {
+    overflow: hidden;
+    position: absolute;
     background-color: #2b2e46;
     width: 320px;    height: 100vh;
-    min-height: 840px;
+    min-height: 670px;
+    
 }
 
-#sidebar>div:nth-child(1){height: 140px;} /* logo */
+ /* logo */
+#logo{
+    display: grid;
+    grid-template-columns: 60px 200px;
 
-button#side-grid {
-    border: 0;
-    background-color: #202232;
-    border-radius: 20px;
-    font-size: 18px;
-    color: #cdcfdf;
-    width: 300px;
+
+    height:  80px;
+    padding: 20px 0 20px 30px;
+} 
+
+#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{
     
-    transition: 
-    background-color .2s, 
-    border-radius .5s,
-    width .3s;
+    margin: 0 5px 0 5px;
+    display: grid;
+    height: 400px;
+    grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
 }
-span {
-    font-family: D-DIN;
-    opacity: 1;
+
+#sidebar-bottomlist{
+    display: grid;
+
+    margin: 0 5px 0 5px;
+    justify-items: left;
+    grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
+    grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
+}
+button>span{
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 18px;
+    color: #CDCFDF;
+    height: 32px;
+    line-height: 28px;
     transition: opacity .1s;
 }
-button#side-grid:hover {
-    background-color: #141520 !important;
-    border-radius: 10px !important;
+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: 5px 0 0 6px;
 
-button>img{
-    height: 20px;
-    float: left;
-    padding-left: 4px;
-    filter: invert(0.8);
-    scale: 1.1;
+    transition: 
+    width .3s,
+    background-color .3s;
+    /* outline: red dotted 1px; */
 }
+/* button>*{outline: red 1px dotted;} */
 
-#side-menu { /* just the menu button */
-    border: 0;
-    position: absolute;
-    background-color: transparent;
-    left: 6px;    top: 6px;
-    width: 40px;    height: 40px;
-    cursor: pointer;
+button>img {
+    scale: 1.1;
+    width: 20px;
+    padding: 5px;
 }
 
-#sidebar-list { /* buttons */
+ /* Maplist */
+#sidebar>div:nth-child(3){
+    position: relative;
+    background-color: #202232;
+    color: #424562;
     z-index: 1;
-    min-height: 700px;
-    width: 308px; height: calc(100vh - 140px); /* calc - logo */
-    position: absolute;
-    background-color: #2b2e46;
-    display: grid;
-    padding: 0 6px;
-    row-gap: 8px;
-    grid-template-rows: 
-    60px 40px 40px
-    30px 40px 40px 40px
-    30px 40px 40px;
+    
+    left: 52px; 
+    top: calc(-100vh + 120px); 
+    width: 268px; height: calc(100vh - 120px);
+    min-height: 550px;
+} 
+input[type=text]{
+    margin: 10px 0 0 6px;
+    padding: 1px 0px 1px 16px;
+    width: 240px;
+    height: 30px;
 
-    transition: width .3s;
-}
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 20px;
+    
+    background-color: #161723;
+    color:#CDCFDF;
+    
+    border: 0;
+    border-radius: 20px;
 
-#sidebar-content { 
-    position: absolute;
-    background-color: #202232;
-    left: 52px;
-    min-height: 700px;
-    width: 268px;    height: calc(100vh - 140px); /* calc - logo */
-}
\ No newline at end of file
+}
+input[type=text]::placeholder{color:#2b2e46}
+input[type=text]:focus{outline: inherit;}
+a{text-decoration: none;height: 40px;}
\ No newline at end of file
-- 
cgit v1.2.3