diff --git a/public/style_alt.css b/public/style_alt.css index 2a70990..c330622 100644 --- a/public/style_alt.css +++ b/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); - overflow-y: auto; - position: relative; /* <<< Добавлено для позиционирования #user-info */ + position: relative; + /* === ИЗМЕНЕНИЕ: Убираем max-height и overflow-y === */ + /* 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: 50px; /* Высота #user-info + отступ */ + padding-top: 35px; /* Уменьшен отступ, так как user-info стал компактнее */ } #auth-message, @@ -312,19 +312,22 @@ i { margin-bottom: 20px; } -/* === ИЗМЕНЕНИЕ: Стили для #user-info === */ +/* === ИЗМЕНЕНИЕ: Стили для #user-info в одну строку === */ #user-info { position: absolute; - top: 10px; /* Отступ сверху */ - right: 15px; /* Отступ справа */ - text-align: right; /* Выравнивание текста и кнопки вправо */ - z-index: 10; /* Чтобы был поверх другого контента в .auth-game-setup-wrapper */ + top: 10px; + right: 15px; + z-index: 10; + display: flex; /* Выстраиваем элементы в ряд */ + align-items: center; /* Вертикальное выравнивание по центру */ + gap: 10px; /* Отступ между приветствием и кнопкой */ } #user-info p { - margin: 0 0 5px 0; /* Уменьшен нижний отступ */ - font-size: 0.9em; /* Уменьшен шрифт приветствия */ + margin: 0; /* Убираем стандартные отступы параграфа */ + 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; /* Более темный красный */ - color: #f0d0d0 !important; /* Светло-розовый текст */ - padding: 6px 12px !important; /* Уменьшены паддинги */ - font-size: 0.8em !important; /* Уменьшен шрифт */ - margin: 0 !important; /* Убираем внешние отступы */ + background: linear-gradient(145deg, #6e3c3c, #502626) !important; + color: #f0d0d0 !important; + padding: 6px 12px !important; + font-size: 0.8em !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 */ } - /* === ИЗМЕНЕНИЕ: Адаптация #user-info === */ - #user-info { top: 5px; right: 10px; } - #user-info p { font-size: 0.85em; } + .auth-game-setup-wrapper { + /* === ИЗМЕНЕНИЕ: Возвращаем возможность скролла, если не помещается на планшете === */ + max-height: none; + 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; /* margin-top: 0; /* Если ранее добавляли */ } + .battle-arena-container { flex-direction: column; height: auto; overflow: visible; } .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: 50px; /* Еще немного места сверху */ } + .auth-game-setup-wrapper { padding-top: 45px; /* Еще немного места сверху */ } #user-info { top: 5px; right: 5px; - display: flex; /* В одну строку */ - flex-direction: row; - align-items: center; - gap: 8px; + gap: 6px; } - #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; }