231 lines
7.1 KiB
CSS
231 lines
7.1 KiB
CSS
|
/* Общие стили для страницы */
|
||
|
.page-wrapper {
|
||
|
position: relative;
|
||
|
padding: 20px; /* Добавлено для отступов от края экрана */
|
||
|
}
|
||
|
|
||
|
/* Контейнер для заголовка и кнопки создания */
|
||
|
.header-container {
|
||
|
display: flex;
|
||
|
flex-wrap: wrap; /* Позволяет элементам переноситься на следующую строку при необходимости */
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
margin-bottom: 20px;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
/* Заголовок */
|
||
|
.header-container h1 {
|
||
|
font-size: 2em; /* Основной размер шрифта для заголовка */
|
||
|
margin: 0;
|
||
|
word-break: break-word; /* Предотвращение переполнения текста заголовка */
|
||
|
}
|
||
|
|
||
|
/* Контейнер для выбора отдела */
|
||
|
.select-container {
|
||
|
flex: 1; /* Занимает оставшееся пространство */
|
||
|
display: flex;
|
||
|
justify-content: center; /* Выравнивание по центру */
|
||
|
margin: 0 20px; /* Отступы слева и справа */
|
||
|
}
|
||
|
|
||
|
/* Выпадающий список выбора отдела */
|
||
|
.select-container select {
|
||
|
background: #1e1e1e;
|
||
|
color: #e0e0e0;
|
||
|
border: 1px solid #bb86fc;
|
||
|
border-radius: 8px;
|
||
|
padding: 10px; /* Уменьшены отступы для улучшения удобства */
|
||
|
font-size: 0.9em; /* Уменьшен размер шрифта для лучшего восприятия */
|
||
|
box-sizing: border-box; /* Учитывает отступы в ширине */
|
||
|
}
|
||
|
|
||
|
/* Кнопка создания отдела */
|
||
|
.create-button {
|
||
|
background: linear-gradient(135deg, #bb86fc, #9a67ea);
|
||
|
color: #fff;
|
||
|
border: none;
|
||
|
padding: 10px 15px;
|
||
|
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: 14px;
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
/* Общие стили для карточек вопроса */
|
||
|
.user-card {
|
||
|
background: #1e1e1e;
|
||
|
color: #e0e0e0;
|
||
|
border-radius: 10px;
|
||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
||
|
padding: 15px; /* Уменьшены отступы для карточек */
|
||
|
margin-bottom: 20px;
|
||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
}
|
||
|
|
||
|
/* Эффекты при наведении на карточки */
|
||
|
.user-card:hover {
|
||
|
transform: scale(1.02);
|
||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
|
||
|
}
|
||
|
|
||
|
.user-card-header {
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.user-card-header h2 {
|
||
|
margin: 0;
|
||
|
color: #bb86fc;
|
||
|
font-size: 1.1em; /* Уменьшен размер шрифта заголовка карточки */
|
||
|
}
|
||
|
|
||
|
/* Стили кнопок */
|
||
|
.user-actions {
|
||
|
display: flex;
|
||
|
gap: 10px;
|
||
|
flex-wrap: wrap; /* Позволяет кнопкам переноситься на следующую строку при необходимости */
|
||
|
}
|
||
|
|
||
|
/* Стили для кнопок */
|
||
|
.delete-button, .edit-button {
|
||
|
background: linear-gradient(135deg, #bb86fc, #9a67ea);
|
||
|
color: white;
|
||
|
border: none;
|
||
|
padding: 10px 15px; /* Уменьшены отступы для кнопок */
|
||
|
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: 14px; /* Уменьшен размер шрифта для кнопок */
|
||
|
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 {
|
||
|
flex-direction: column;
|
||
|
align-items: center; /* Центрирование элементов */
|
||
|
}
|
||
|
|
||
|
.header-container h1 {
|
||
|
font-size: 1.6em; /* Уменьшен размер шрифта для заголовка */
|
||
|
text-align: center;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.select-container {
|
||
|
margin: 10px 0; /* Отступы сверху и снизу для контейнера выбора отдела */
|
||
|
width: 100%; /* Ширина контейнера выбора отдела */
|
||
|
justify-content: center; /* Центрирование выбора */
|
||
|
}
|
||
|
|
||
|
.select-container select {
|
||
|
width: 100%; /* Ширина селекта на мобильных устройствах */
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
.create-button {
|
||
|
font-size: 14px;
|
||
|
padding: 8px 12px;
|
||
|
width: 100%; /* Ширина кнопки на мобильных устройствах */
|
||
|
}
|
||
|
|
||
|
.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 {
|
||
|
flex-direction: column;
|
||
|
align-items: center; /* Центрирование элементов */
|
||
|
padding: 10px 0; /* Уменьшены отступы */
|
||
|
}
|
||
|
|
||
|
.header-container h1 {
|
||
|
font-size: 1.4em; /* Уменьшенный размер шрифта */
|
||
|
text-align: center;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.select-container {
|
||
|
margin: 10px 0; /* Отступы сверху и снизу */
|
||
|
}
|
||
|
|
||
|
.select-container select {
|
||
|
padding: 6px;
|
||
|
font-size: 0.8em;
|
||
|
}
|
||
|
|
||
|
.create-button {
|
||
|
font-size: 12px;
|
||
|
padding: 6px 10px;
|
||
|
width: 100%; /* Ширина кнопки на экстра маленьких экранах */
|
||
|
}
|
||
|
|
||
|
.user-card {
|
||
|
padding: 10px;
|
||
|
}
|
||
|
|
||
|
.user-card-header h2 {
|
||
|
font-size: 1em;
|
||
|
}
|
||
|
|
||
|
.delete-button, .edit-button {
|
||
|
font-size: 12px;
|
||
|
padding: 8px 12px;
|
||
|
}
|
||
|
}
|