/* Общие стили для страницы */ .page-wrapper { position: relative; padding: 10px; /* Добавлено внутреннее пространство для предотвращения наложения содержимого на края */ } /* Контейнер для заголовка и кнопки создания */ .header-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 20px; width: 100%; } .header-container h1 { font-size: 2em; /* Основной размер шрифта для заголовка */ margin: 0; word-break: break-word; /* Предотвращение переполнения текста заголовка */ } /* Кнопка создания отдела */ .create-button { background: linear-gradient(135deg, #bb86fc, #9a67ea); color: #fff; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); font-size: 16px; font-weight: bold; position: relative; overflow: hidden; text-align: center; /* Центрирование текста */ } .create-button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease; z-index: 0; } .create-button:hover::before { transform: translate(-50%, -50%) scale(1); } .create-button:hover { background: linear-gradient(135deg, #9a67ea, #bb86fc); transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } .create-button span { position: relative; z-index: 1; } /* Контейнер для карточек отдела */ .card-container { display: flex; flex-wrap: wrap; /* Разрешает перенос карточек на новую строку */ gap: 20px; /* Отступы между карточками */ justify-content: center; /* Центрирование карточек по горизонтали */ } /* Общие стили для карточек отдела */ .user-card { background: #1e1e1e; color: #e0e0e0; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; /* Чтобы контент не выходил за границы карточки */ flex: 1 1 300px; /* Разрешает карточкам быть не меньше 300px в ширину и расти, если есть место */ } .user-card:hover { transform: scale(1.02); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7); } .user-card-header { margin-bottom: 15px; } .user-card-header h2 { margin: 0; color: #bb86fc; font-size: 1.2em; /* Увеличен размер шрифта заголовка карточки */ } /* Стили кнопок */ .user-actions { display: flex; gap: 10px; } .delete-button, .edit-button { background: linear-gradient(135deg, #bb86fc, #9a67ea); color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); font-size: 16px; text-align: center; /* Центрирование текста */ } .delete-button:hover, .edit-button:hover { background: linear-gradient(135deg, #9a67ea, #bb86fc); transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } /* Медиазапросы для мобильных устройств */ @media (max-width: 768px) { .header-container h1 { font-size: 1.6em; } .create-button { font-size: 14px; padding: 10px 15px; } .user-card { padding: 15px; } .user-card-header h2 { font-size: 1.1em; } .delete-button, .edit-button { font-size: 14px; padding: 10px 15px; } } /* Медиазапросы для экстра маленьких экранов (например, телефоны в портретном режиме) */ @media (max-width: 480px) { .header-container h1 { font-size: 1.3em; } .create-button { font-size: 12px; padding: 8px 12px; } .user-card { padding: 10px; } .user-card-header h2 { font-size: 1em; } .delete-button, .edit-button { font-size: 12px; padding: 8px 12px; } }