Обновить public/style_alt.css

public/style_alt.css

@@ -1,9 +1,9 @@
-/* === style_alt.css (Изменения для user-info и game-header) === */
+/* === style_alt.css (user-info в ряд, auth-wrapper без скролла) === */
 @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;700&display=swap');
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
 
 :root {
-    /* --- Переменные цветов и шрифтов --- */
+    /* --- Переменные --- */
     --font-main: 'Roboto', sans-serif;
     --font-fancy: 'MedievalSharp', cursive;
 
@@ -87,7 +87,7 @@ body {
     color: var(--text-light);
     line-height: 1.5;
     height: 100vh;
-    overflow: hidden;
+    overflow: hidden; /* Оставляем, чтобы body не скроллился, если auth-wrapper не поместится */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -146,9 +146,10 @@ i {
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
     color: var(--text-light);
     text-align: center;
-    max-height: calc(100vh - 40px);
+    position: relative;
-    overflow-y: auto;
+    /* === ИЗМЕНЕНИЕ: Убираем max-height и overflow-y === */
-    position: relative; /* <<< Добавлено для позиционирования #user-info */
+    /* max-height: calc(100vh - 40px); */
+    /* overflow-y: auto; */
 }
 
 .auth-game-setup-wrapper h2,
@@ -235,7 +236,7 @@ i {
 #available-games-list {
     margin-top: 20px;
     text-align: left;
-    max-height: 250px;
+    max-height: 250px; /* Оставляем скролл для этого списка, если он длинный */
     overflow-y: auto;
     padding: 10px 15px;
     background-color: rgba(0, 0, 0, 0.25);
@@ -279,8 +280,7 @@ i {
 #status-container {
     min-height: 2.5em;
     margin-bottom: 15px;
-    /* === ИЗМЕНЕНИЕ: Добавляем верхний отступ, чтобы не перекрывалось с #user-info === */
+    padding-top: 35px; /* Уменьшен отступ, так как user-info стал компактнее */
-    padding-top: 50px; /* Высота #user-info + отступ */
 }
 
 #auth-message,
@@ -312,19 +312,22 @@ i {
     margin-bottom: 20px;
 }
 
-/* === ИЗМЕНЕНИЕ: Стили для #user-info === */
+/* === ИЗМЕНЕНИЕ: Стили для #user-info в одну строку === */
 #user-info {
     position: absolute;
-    top: 10px; /* Отступ сверху */
+    top: 10px;
-    right: 15px; /* Отступ справа */
+    right: 15px;
-    text-align: right; /* Выравнивание текста и кнопки вправо */
+    z-index: 10;
-    z-index: 10; /* Чтобы был поверх другого контента в .auth-game-setup-wrapper */
+    display: flex; /* Выстраиваем элементы в ряд */
+    align-items: center; /* Вертикальное выравнивание по центру */
+    gap: 10px; /* Отступ между приветствием и кнопкой */
 }
 
 #user-info p {
-    margin: 0 0 5px 0; /* Уменьшен нижний отступ */
+    margin: 0; /* Убираем стандартные отступы параграфа */
-    font-size: 0.9em;  /* Уменьшен шрифт приветствия */
+    font-size: 0.9em;
     color: var(--text-muted);
+    white-space: nowrap; /* Предотвращаем перенос приветствия */
 }
 
 #user-info p #logged-in-username {
@@ -333,14 +336,15 @@ i {
 }
 
 #logout-button {
-    background: linear-gradient(145deg, #6e3c3c, #502626) !important; /* Более темный красный */
+    background: linear-gradient(145deg, #6e3c3c, #502626) !important;
-    color: #f0d0d0 !important; /* Светло-розовый текст */
+    color: #f0d0d0 !important;
-    padding: 6px 12px !important; /* Уменьшены паддинги */
+    padding: 6px 12px !important;
-    font-size: 0.8em !important;   /* Уменьшен шрифт */
+    font-size: 0.8em !important;
-    margin: 0 !important;          /* Убираем внешние отступы */
+    margin: 0 !important;
     letter-spacing: 0.2px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
-    border: 1px solid #422020 !important; /* Темная рамка */
+    border: 1px solid #422020 !important;
+    flex-shrink: 0; /* Кнопка не должна сжиматься */
 }
 
 #logout-button:hover:enabled {
@@ -349,7 +353,7 @@ i {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
 }
 #logout-button i {
-    margin-right: 4px; /* Уменьшен отступ иконки */
+    margin-right: 4px;
 }
 /* === КОНЕЦ ИЗМЕНЕНИЯ === */
 
@@ -419,7 +423,6 @@ label[for="char-almagest"] i {
     color: var(--accent-almagest);
 }
 
-
 /* --- Основная Структура Игры (.game-wrapper) --- */
 .game-wrapper {
     width: 100%;
@@ -433,16 +436,11 @@ label[for="char-almagest"] i {
     overflow: hidden;
 }
 
-/* === ИЗМЕНЕНИЕ: .game-header удален, стили для него больше не нужны === */
-
-
 .battle-arena-container {
     flex-grow: 1;
     display: flex;
     gap: 10px;
     overflow: hidden;
-    /* === ИЗМЕНЕНИЕ: Добавляем верхний отступ, если .game-header был убран, а .game-wrapper виден === */
-    /* margin-top: 10px; /* или padding-top: 10px; на .game-wrapper, если нужно */
 }
 
 .player-column,
@@ -1215,16 +1213,18 @@ label[for="char-almagest"] i {
         padding: 5px 0; font-size: 15px;
         justify-content: flex-start;
     }
-    .auth-game-setup-wrapper { max-height: none; padding-top: 60px; /* Отступ для #user-info */ }
+    .auth-game-setup-wrapper {
-    /* === ИЗМЕНЕНИЕ: Адаптация #user-info === */
+        /* === ИЗМЕНЕНИЕ: Возвращаем возможность скролла, если не помещается на планшете === */
-    #user-info { top: 5px; right: 10px; }
+        max-height: none;
-    #user-info p { font-size: 0.85em; }
+        overflow-y: auto;
+        padding-top: 50px; /* Уменьшен отступ, т.к. #user-info компактнее */
+    }
+    #user-info { top: 8px; right: 10px; gap: 8px; }
+    #user-info p { font-size: 0.8em; }
     #logout-button { padding: 5px 10px !important; font-size: 0.75em !important; }
-    /* === КОНЕЦ ИЗМЕНЕНИЯ === */
 
     .game-wrapper { padding: 5px; gap: 5px; height: auto; }
-    /* === ИЗМЕНЕНИЕ: game-header удален === */
+    .battle-arena-container { flex-direction: column; height: auto; overflow: visible; }
-    .battle-arena-container { flex-direction: column; height: auto; overflow: visible; /* margin-top: 0; /* Если ранее добавляли */ }
     .player-column, .opponent-column { width: 100%; height: auto; overflow: visible; }
     .fighter-panel, .controls-panel-new, .battle-log-new {
         min-height: auto; height: auto; padding: 10px;
@@ -1263,22 +1263,15 @@ label[for="char-almagest"] i {
 
 @media (max-width: 480px) {
     body { font-size: 14px; }
-    /* === ИЗМЕНЕНИЕ: Адаптация #user-info для мобильных === */
+    .auth-game-setup-wrapper { padding-top: 45px; /* Еще немного места сверху */ }
-    .auth-game-setup-wrapper { padding-top: 50px; /* Еще немного места сверху */ }
     #user-info {
         top: 5px;
         right: 5px;
-        display: flex; /* В одну строку */
+        gap: 6px;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
     }
-    #user-info p { margin-bottom: 0; font-size: 0.8em; }
+    #user-info p { font-size: 0.75em; } /* Еще меньше текст */
     #logout-button { padding: 4px 8px !important; font-size: 0.7em !important; }
-    #logout-button i { margin-right: 3px; }
-    /* === КОНЕЦ ИЗМЕНЕНИЯ === */
 
-    /* === ИЗМЕНЕНИЕ: game-header удален === */
     .fighter-name { font-size: 1.2em; }
     .abilities-grid { grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)); gap: 5px; padding: 5px; padding-bottom: 10px; }
     .ability-button { font-size: 0.7em; padding: 4px; }