diff --git a/css/style.css b/css/style.css index 927521f..6a7e13f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,158 +1,157 @@ -/* Импортируем шрифт, который указали в HTML */ -@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); - -/* Базовый сброс стилей и настройка всей страницы */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - /* Фон и центрирование игрового контейнера */ - background-color: #1c1c1c; - color: #f0f0f0; - font-family: 'Press Start 2P', cursive; - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - overflow: hidden; -} - -/* Главный контейнер, который держит поле и боковую панель */ -.tetris-wrapper { - display: flex; - gap: 25px; /* Расстояние между игровым полем и панелью */ - padding: 20px; - border: 5px solid #555; - border-radius: 10px; - background-color: #333; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); -} - -/* Стиль для основного игрового холста */ -#game-board { - border: 3px solid #777; - background-color: #000000; - /*flex-grow: 0;*/ - align-self: flex-start; -} - -/* Боковая панель с информацией */ -.side-panel { - display: flex; - flex-direction: column; - width: 200px; - text-align: center; -} - -.side-panel h1 { - font-size: 2.2em; - margin-bottom: 25px; - color: #e74c3c; - text-shadow: 3px 3px #000; -} - -/* Контейнеры для счёта, линий и уровня */ -.info-box { - background-color: #000; - border: 2px solid #777; - padding: 15px 10px; - margin-bottom: 20px; - border-radius: 5px; -} - -.info-title { - font-size: 0.8em; - color: #999; - margin-bottom: 10px; - display: block; /* Чтобы margin-bottom сработал */ -} - -.info-box p { - font-size: 1.5em; - color: #f1c40f; /* Яркий желтый для цифр */ -} - -/* Отдельные стили для контейнера следующей фигуры */ -.next-piece-container { - display: flex; /* Используем flexbox */ - flex-direction: column; - justify-content: center; /* Центрируем по вертикали */ - align-items: center; /* Центрируем по горизонтали */ - /* Убрали flex-grow, чтобы высота зависела от контента */ -} - -#next-piece-board { - background-color: #000; - border: 2px solid #777; - /* Убрали margin, так как центрированием теперь управляет родитель */ - max-width: 100%; - height: auto; -} - -/* Общий стиль для кнопок */ -.game-button { - background-color: #27ae60; /* Зеленый */ - color: #fff; - border: none; - padding: 15px; - font-family: 'Press Start 2P', cursive; - text-transform: uppercase; - cursor: pointer; - border-radius: 5px; - border-bottom: 4px solid #229954; /* 3D-эффект */ - transition: all 0.1s ease; - margin-top: auto -} - -.game-button:hover { - background-color: #2ecc71; - transform: translateY(-2px); /* Небольшой подъём при наведении */ -} - -.game-button:active { - transform: translateY(1px); /* Эффект нажатия */ - border-bottom-width: 2px; -} - -/* Слой-оверлей для модальных окон */ -#game-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.8); - display: flex; - justify-content: center; - align-items: center; -} - -/* Модальное окно для сообщений (Пауза, Конец игры) */ -#game-modal { - background-color: #333; - padding: 30px 40px; - border-radius: 10px; - border: 5px solid #555; - text-align: center; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -} - -#modal-title { - font-size: 1.8em; - margin-bottom: 15px; - color: #e74c3c; -} - -#modal-text { - font-size: 1.1em; - margin-bottom: 25px; - line-height: 1.5; -} - -/* Вспомогательный класс, чтобы скрыть элемент */ -.hidden { - display: none !important; +/* Импортируем шрифт, который указали в HTML */ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); + +/* Базовый сброс стилей и настройка всей страницы */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + /* Фон и центрирование игрового контейнера */ + background-color: #1c1c1c; + color: #f0f0f0; + font-family: 'Press Start 2P', cursive; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +/* Главный контейнер, который держит поле и боковую панель */ +.tetris-wrapper { + display: flex; + gap: 25px; /* Расстояние между игровым полем и панелью */ + padding: 20px; + border: 5px solid #555; + border-radius: 10px; + background-color: #333; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); +} + +/* Стиль для основного игрового холста */ +#game-board { + border: 3px solid #777; + background-color: #000000; + /*flex-grow: 0;*/ + align-self: flex-start; +} + +/* Боковая панель с информацией */ +.side-panel { + display: flex; + flex-direction: column; + width: 200px; + text-align: center; +} + +.side-panel h1 { + font-size: 2.2em; + margin-bottom: 25px; + color: #e74c3c; + text-shadow: 3px 3px #000; +} + +/* Контейнеры для счёта, линий и уровня */ +.info-box { + background-color: #000; + border: 2px solid #777; + padding: 15px 10px; + margin-bottom: 20px; + border-radius: 5px; +} + +.info-title { + font-size: 0.8em; + color: #999; + margin-bottom: 10px; + display: block; /* Чтобы margin-bottom сработал */ +} + +.info-box p { + font-size: 1.5em; + color: #f1c40f; /* Яркий желтый для цифр */ +} + +/* Отдельные стили для контейнера следующей фигуры */ +.next-piece-container { + display: flex; /* Используем flexbox */ + flex-direction: column; + justify-content: center; /* Центрируем по вертикали */ + align-items: center; /* Центрируем по горизонтали */ + /* Убрали flex-grow, чтобы высота зависела от контента */ +} + +#next-piece-board { + background-color: #000; + border: 2px solid #777; + /* Убрали margin, так как центрированием теперь управляет родитель */ + max-width: 100%; + height: auto; +} + +/* Общий стиль для кнопок */ +.game-button { + background-color: #27ae60; /* Зеленый */ + color: #fff; + border: none; + padding: 15px; + font-family: 'Press Start 2P', cursive; + text-transform: uppercase; + cursor: pointer; + border-radius: 5px; + border-bottom: 4px solid #229954; /* 3D-эффект */ + transition: all 0.1s ease; + margin-top: auto +} + +.game-button:hover { + background-color: #2ecc71; + transform: translateY(-2px); /* Небольшой подъём при наведении */ +} + +.game-button:active { + transform: translateY(1px); /* Эффект нажатия */ + border-bottom-width: 2px; +} + +/* Слой-оверлей для модальных окон */ +#game-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; +} + +/* Модальное окно для сообщений (Пауза, Конец игры) */ +#game-modal { + background-color: #333; + padding: 30px 40px; + border-radius: 10px; + border: 5px solid #555; + text-align: center; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); +} + +#modal-title { + font-size: 1.8em; + margin-bottom: 15px; + color: #e74c3c; +} + +#modal-text { + font-size: 1.1em; + margin-bottom: 25px; + line-height: 1.5; +} + +/* Вспомогательный класс, чтобы скрыть элемент */ +.hidden { + display: none !important; } \ No newline at end of file