diff --git a/assets/css/list-rooms.css b/assets/css/list-rooms.css index ff65e12..1b5c189 100644 --- a/assets/css/list-rooms.css +++ b/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%; /* Ширина для портретной ориентации */ + } +}