tgadmin/webadmin/static/css/questions.css

231 lines
7.1 KiB
CSS
Raw Normal View History

2024-07-25 12:19:15 +00:00
/* Общие стили для страницы */
.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;
}
}