restyle chat window

Demeter29 · Oct 17, 2024 · 8b1693b · 8b1693b
1 parent 3474981
commit 8b1693b
Showing 1 changed file with 33 additions and 27 deletions.
diff --git a/public/chatWindow/chat.css b/public/chatWindow/chat.css
@@ -13,57 +13,64 @@ html{
 }
 
 .chat-box{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* Ensures space is distributed between elements */
     position: absolute;
-    width: 40%;
-    height: 75%;
-    margin-left: 6%;
-    margin-top: 4%;
-    padding: 0.5vw;
-    padding-bottom: 4vw;
-
+    width: 47%;
+    height: 90%;
+    left: 3%;
+    top: 5%;
+    padding: 0.5%;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     background-image: url('../assets/background_area_light.png');
-    cursor: url('../assets/cursor.png'), auto;	
-    font-family:  Gitan;  	
+    cursor: url('../assets/cursor.png'), auto;
+    font-family: Gitan;	
 }
 
 .messages-container{
-    overflow: none;
+    overflow: hidden;
     position: relative;
     width: 100%;
-    height: 89.5%;
+    height: 77%;
     background: rgba(0, 0, 0, 0.5);
 }
 
 .messages{
-    overflow: auto;
+    overflow-y: auto;
     position: absolute;
     bottom: 0;
     width: 100%;
     max-height: 100%;
-    word-wrap: break-word;
+    box-sizing: border-box;
 }
 
 .messages::-webkit-scrollbar {
     display: none;
 }
 
 .message{
-    padding-top:20px;
-    padding-left: 5px;
-    padding-right: 5px;
-    font-size: 20px;
+    padding-top: 3%;
+    padding-left: 1%;
+    padding-right: 1%;
+    font-size: 110%;
 }
 
 .chat-input{
-    width: 99%;
-    height: 11%;
-    margin-top: 10px;
+    width: 100%;
+    height: 12%;
     resize: none;
+    margin-bottom: 1%;
+    margin-top: 1%;
     background: rgba(0, 0, 0, 0.5);
-    border-color: rgb(96, 71, 54);
-    color:white;
-    font-family:  Gitan; 
-    font-size: 17px;
+    color: rgb(209, 209, 209);
+    border: 1px solid rgb(96, 71, 54);
+    border-radius: 5px;
+    font-family: Gitan;
+    font-size: 1rem;
+    box-sizing: border-box;
+    transition: border-color 0.3s;
     cursor: url('../assets/cursor.png'), auto; 	
 }
 
@@ -76,10 +83,9 @@ html{
     background: gray;
     color:white;
     border: solid 2px rgb(39, 33, 0);
-    margin-top: 0.35em;
-    padding: .375em;
-    font-size: 1rem;
     width: 100%;
+    height: 8%;
+    font-size: 1rem;
     background-image: url(../assets/button.png);
     background-size: cover;
     font-family:  Gitan;