From a65d6d9127c3fa7f6a8ecaec5d1ffd1f47c2bc98 Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Tue, 3 Sep 2024 00:08:53 +0300
Subject: refactor: port to typescript

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

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

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;
+}
+
+
+
+
+
+
+
+
+
+
+
-- 
cgit v1.2.3