chore : ui 변경 (#150)

Author: chat26666

src/main/resources/templates/chat-page.html

@@ -88,6 +88,26 @@
             margin: 0 auto;
         }
 
+        #messages::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        #messages::-webkit-scrollbar-track {
+            background: #12141f;
+        }
+
+        #messages::-webkit-scrollbar-thumb {
+            background-color: #00d084;
+            border-radius: 4px;
+            border: 2px solid #12141f;
+        }
+
+        /* Firefox용 */
+        #messages {
+            scrollbar-width: thin;
+            scrollbar-color: #00d084 #12141f;
+        }
+
         #sidebar {
             width: 200px;
             border-right: 1px solid #2a2d3d;

src/main/resources/templates/game-page.html

@@ -117,6 +117,35 @@
             z-index: 5;
         }
 
+        /* WebKit 기반 브라우저 스크롤바 스타일 */
+        .side-panel-right::-webkit-scrollbar,
+        .side-panel-left::-webkit-scrollbar,
+        .button-container::-webkit-scrollbar {
+            width: 10px;
+        }
+
+        .side-panel-right::-webkit-scrollbar-track,
+        .side-panel-left::-webkit-scrollbar-track,
+        .button-container::-webkit-scrollbar-track {
+            background: #111; /* 배경색: 어두운 검정계열 */
+        }
+
+        .side-panel-right::-webkit-scrollbar-thumb,
+        .side-panel-left::-webkit-scrollbar-thumb,
+        .button-container::-webkit-scrollbar-thumb {
+            background-color: #0f0; /* 초록색 막대 */
+            border-radius: 6px;
+            border: 2px solid #111; /* 트랙과 구분 위한 테두리 */
+        }
+
+        /* Firefox 스크롤바 스타일 */
+        .side-panel-right,
+        .side-panel-left,
+        .button-container {
+            scrollbar-width: thin;
+            scrollbar-color: #0f0 #111;
+        }
+
         .side-panel-right.active {
             display: block;
             right: 40px;