diff --git a/assets/HypertextPages/list-rooms.nytl.html b/assets/HypertextPages/list-rooms.nytl.html index 7d58710..3b2f8fb 100644 --- a/assets/HypertextPages/list-rooms.nytl.html +++ b/assets/HypertextPages/list-rooms.nytl.html @@ -16,61 +16,56 @@ let userinfo = {% PUT jsinsert userinfo %}; let initial_chatListUpdResp = {% PUT jsinsert initial_chatListUpdResp %}; - - - - -
+
-
- New chat -
+
+ New chat +
+ +
- diff --git a/assets/css/list-rooms.css b/assets/css/list-rooms.css index 1b5c189..4ebfecc 100644 --- a/assets/css/list-rooms.css +++ b/assets/css/list-rooms.css @@ -1,193 +1,166 @@ -/* Общий стиль контейнера документа */ -.document-container { - display: flex; - flex-direction: column; - max-width: 1200px; - margin: 0 auto; - padding: 20px; - background-color: #f9f9f9; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +/* Общие стили */ +body { + font-family: 'Roboto', sans-serif; + background-color: #f7f9fc; + color: #333; + margin: 0; + padding: 0; + box-sizing: border-box; } /* Панель навигации */ -#navigation-panel { +.panel { + background-color: #007bff; + padding: 10px; + color: white; display: flex; align-items: center; - background-color: #1e90ff; - padding: 10px; - border-radius: 8px; - margin-bottom: 20px; +} + +.panel-thing { + margin-right: 20px; + text-decoration: none; color: white; } -.profile-link { - margin-right: 15px; -} - -.profile-icon { - width: 40px; - height: 40px; - border-radius: 50%; -} - -.panel-description { - font-size: 1.2em; +.panel-header-txt { + font-size: 18px; font-weight: bold; } -/* Стиль всплывающего окна */ -.popup-window { - display: none; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: white; +/* Стили динамических блоков */ +.dynamic-block-list { + display: flex; + flex-direction: column; + align-items: center; padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - z-index: 100; } -.popup-window-header { - font-size: 1.5em; +.dynamic-block-list-el-container { + width: 100%; + max-width: 600px; + margin-top: 20px; +} + +/* Кнопка добавления */ +.button-add { + width: 50px; + height: 50px; + cursor: pointer; + transition: transform 0.2s; +} + +.button-add:hover { + transform: scale(1.1); +} + +/* Всплывающие окна */ +.popup-window { + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + padding: 20px; + max-width: 500px; + margin: 0 auto; +} + +.popup-window-msg { + font-size: 20px; margin-bottom: 15px; color: #333; } -.popup-window-subheader { - font-size: 1.2em; - margin-bottom: 20px; - color: #666; +.popup-window-btn-yes, .popup-window-btn-no { + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; } -.form-table { +.popup-window-btn-yes { + background-color: #28a745; + color: white; + margin-right: 10px; +} + +.popup-window-btn-no { + background-color: #dc3545; + color: white; +} + +/* Таблица ввода */ +table.id-str-input-table { width: 100%; + border-collapse: collapse; margin-bottom: 20px; } -.form-label { +.id-str-input-td1, .id-str-input-td2 { + border: none; + padding: 10px; +} + +.id-str-input-td1 { text-align: left; padding-right: 10px; font-weight: bold; - color: #333; + color: #555; + white-space: nowrap; } -.form-input { +.id-str-input-td2 { width: 100%; - padding: 8px; - border: 1px solid #ddd; +} + +.one-line-input { + width: 100%; + padding: 8px 12px; + border: 1px solid #ccc; border-radius: 4px; + font-size: 14px; } -.popup-actions { +/* Стили комнат */ +.CL-my-chat-box { display: flex; - justify-content: space-between; -} - -.popup-btn { - background-color: #1e90ff; - color: white; - border: none; - padding: 10px 20px; - border-radius: 4px; - cursor: pointer; - font-size: 1em; -} - -.popup-btn:hover { - background-color: #005fbb; -} - -/* Контейнер списка чатов */ -.chat-list-container { - display: flex; - flex-direction: column; - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} - -.button-add { - margin-bottom: 10px; - cursor: pointer; - width: 40px; -} - -/* Список чатов */ -.chat-list { - display: flex; - flex-direction: column; - 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%; /* По умолчанию для портретного режима */ + flex-direction: row; 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; -} - -.chat-list::-webkit-scrollbar-track { - background: #f1f1f1; -} - -.chat-list::-webkit-scrollbar-thumb { - background: #888; + padding: 10px; + background-color: #003366; /* Синий фон */ border-radius: 8px; + margin-bottom: 10px; + align-items: center; + min-height: 40px; + width: 100%; } -.chat-list::-webkit-scrollbar-thumb:hover { - background: #555; +/* Текст внутри блока комнаты */ +.CL-my-chat-box-nickname, .CL-my-chat-box-name, .CL-my-chat-box-my-role { + margin-left: 8px; + color: rgb(0, 0, 0); /* Белый цвет текста */ } -/* Адаптация ширины комнат под ориентацию экрана */ -@media (orientation: landscape) { - .chat-room { - width: 50%; /* Ширина для ландшафтной ориентации */ - } +/* Крестик в правом верхнем углу */ +.CL-my-chat-box-leave-btn { + position: absolute; + top: 8px; + right: 8px; + width: 16px; + height: 16px; + background: url('/assets/img/close.svg') no-repeat center; + background-size: cover; + cursor: pointer; + border: none; + transition: transform 0.2s; } -@media (orientation: portrait) { - .chat-room { - width: 85%; /* Ширина для портретной ориентации */ - } +.CL-my-chat-box-leave-btn:hover { + transform: scale(1.2); +} + +/* Дизайн списка комнат остается таким же */ +#CL-bacbe { + margin-top: 6px; + margin-bottom: 4px; }