assets/css/list-rooms.css

@@ -1,4 +1,4 @@
-/* General container styling */
+/* Общий стиль контейнера документа */
 .document-container {
     display: flex;
     flex-direction: column;
@@ -10,7 +10,7 @@
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-/* Navigation panel */
+/* Панель навигации */
 #navigation-panel {
     display: flex;
     align-items: center;
@@ -36,7 +36,7 @@
     font-weight: bold;
 }
 
-/* Popup window styles */
+/* Стиль всплывающего окна */
 .popup-window {
     display: none;
     position: fixed;
@@ -100,7 +100,7 @@
     background-color: #005fbb;
 }
 
-/* Chat list */
+/* Контейнер списка чатов */
 .chat-list-container {
     display: flex;
     flex-direction: column;
@@ -116,17 +116,52 @@
     width: 40px;
 }
 
+/* Список чатов */
 .chat-list {
     display: flex;
     flex-direction: column;
-}
-
-/* Custom scrollbar */
-.chat-list {
     max-height: 400px;
     overflow-y: auto;
 }
 
+/* Стиль для каждой комнаты чата */
+.chat-room {
+    display: flex;
+    align-items: center;
+    background-color: #40e0d0; /* Бирюзовый цвет */
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    height: 40px; /* Низкая высота */
+    width: 85%; /* По умолчанию для портретного режима */
+    position: relative;
+}
+
+.chat-room-name {
+    flex-grow: 1;
+    padding-left: 10px;
+    font-size: 1.1em;
+    color: white;
+    font-weight: bold;
+}
+
+.chat-room-close {
+    position: absolute;
+    right: 10px; /* Красный крестик справа */
+    background-color: red;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.chat-room-close:hover {
+    background-color: darkred;
+}
+
+/* Кастомный скроллбар для списка чатов */
 .chat-list::-webkit-scrollbar {
     width: 8px;
 }
@@ -143,3 +178,16 @@
 .chat-list::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
+
+/* Адаптация ширины комнат под ориентацию экрана */
+@media (orientation: landscape) {
+    .chat-room {
+        width: 50%; /* Ширина для ландшафтной ориентации */
+    }
+}
+
+@media (orientation: portrait) {
+    .chat-room {
+        width: 85%; /* Ширина для портретной ориентации */
+    }
+}