Games page, maplist page (#153)

Co-authored-by: Wolfboy248 <105884620+Wolfboy248@users.noreply.github.com>

1 files changed, 19 insertions, 2 deletions

diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
index 29978db..34ede80 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/components/sidebar.css
@@ -15,6 +15,8 @@
 

     height:  80px;

     padding: 20px 0 20px 30px;

+    cursor: pointer;

+    user-select: none;

 } 

 

 #logo-text{

@@ -75,11 +77,24 @@ span>b{
     width: 310px;

     height: 40px;

     border-radius: 20px;

-    padding: 5px 0 0 6px;

+    padding: 0.4em 0 0 11px;

 

     transition: 

     width .3s,

-    background-color .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 {

@@ -125,6 +140,7 @@ a{text-decoration: none;height: 40px;}
     margin: 8px 0 8px 0;

     overflow-y: auto;

     max-height: calc(100vh - 172px);

+    scrollbar-width: thin;

 }

 #search-data::-webkit-scrollbar{display: none;}

 .search-map{

@@ -140,6 +156,7 @@ a{text-decoration: none;height: 40px;}
     transition: background-color .1s;

     background-color: #2b2e46;

     grid-template-rows: 20% 20% 60%;

+    width: calc(100% - 15px);

 }

 .search-map>span{

     color: #888;