multy-stub/server/routers/questioneer/public/static/css/style.css
Primakov Alexandr Alexandrovich dd589790c2 fix путей
2025-03-12 00:29:55 +03:00

2181 lines
38 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* Темный стиль */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
padding: 0;
color: #e0e0e0;
background-color: #1e1e1e;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: #61dafb;
}
h2 {
font-size: 2rem;
color: #64b5f6;
}
h3 {
font-size: 1.5rem;
color: #81c784;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
/* Кнопки */
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
user-select: none;
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
text-decoration: none;
cursor: pointer;
background-color: #2196f3;
color: white;
border: 1px solid transparent;
transition: all 0.15s ease-in-out;
}
.btn:hover {
background-color: #1976d2;
}
.btn-primary {
background-color: #1976d2;
color: white;
}
.btn-primary:hover {
background-color: #1565c0;
}
.btn-secondary {
background-color: #757575;
}
.btn-secondary:hover {
background-color: #616161;
}
.btn-danger {
background-color: #f44336;
}
.btn-danger:hover {
background-color: #d32f2f;
}
.btn-small {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-icon {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
padding: 0;
margin: 0 5px;
color: #e0e0e0;
}
/* Формы */
.form-container {
background-color: #2d2d2d;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #bbdefb;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #e0e0e0;
background-color: #424242;
background-clip: padding-box;
border: 1px solid #616161;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
color: #e0e0e0;
background-color: #424242;
border-color: #64b5f6;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}
.form-actions {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
/* Список опросов */
.questionnaires-list {
margin-top: 30px;
}
.questionnaire-item {
background-color: #2d2d2d;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
.questionnaire-links {
display: flex;
gap: 10px;
margin-top: 15px;
}
/* Вопросы */
.question-item {
background-color: #2d2d2d;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.options-container {
margin-top: 10px;
}
.options-list {
margin-bottom: 10px;
}
.option-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
/* Стили для варианта ответа */
.option-item input[type="text"] {
flex: 1;
margin-right: 10px;
}
.radio-option label,
.checkbox-option label {
margin-left: 10px;
cursor: pointer;
}
/* Звездный рейтинг */
.rating-container {
display: flex;
gap: 10px;
margin-top: 10px;
}
.rating-item {
display: flex;
flex-direction: column;
align-items: center;
}
.rating-item label {
cursor: pointer;
padding: 8px 12px;
background-color: #424242;
border-radius: 4px;
transition: all 0.2s;
}
.rating-item input {
display: none;
}
.rating-item input:checked + label {
background-color: #2196f3;
color: white;
}
/* Облако тегов */
.tag-cloud-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.tag-item {
padding: 8px 15px;
background-color: #424242;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
}
.tag-item:hover {
background-color: #616161;
}
.tag-item.selected {
background-color: #2196f3;
color: white;
}
/* Результаты голосования */
.results-visualization {
margin-top: 15px;
}
.result-bar-container {
margin-bottom: 15px;
}
.result-label {
margin-bottom: 5px;
font-weight: 500;
color: #bbdefb;
}
.result-bar {
height: 20px;
background-color: #424242;
border-radius: 4px;
overflow: hidden;
}
.result-bar-fill {
height: 100%;
background-color: #2196f3;
border-radius: 4px;
transition: width 0.5s;
}
.result-percent {
margin-top: 5px;
font-size: 0.875rem;
color: #9e9e9e;
}
.results-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
justify-content: center;
}
.result-tag {
padding: 5px 10px;
background-color: #2196f3;
color: white;
border-radius: 20px;
display: inline-block;
}
/* Обязательные поля */
.required-mark {
color: #f44336;
}
/* Состояния загрузки и ошибки */
#loading {
text-align: center;
padding: 20px;
font-size: 1.2rem;
color: #9e9e9e;
}
.error {
color: #f44336;
padding: 10px;
background-color: rgba(244, 67, 54, 0.2);
border-radius: 4px;
}
/* Ссылки */
.link-group {
margin-bottom: 15px;
}
.link-input-group {
display: flex;
gap: 10px;
}
.link-input-group input {
flex: 1;
}
/* Текстовая область для ввода ответа */
.textarea-container {
width: 100%;
margin-top: 10px;
}
.text-answer {
width: 100%;
min-height: 100px;
resize: vertical;
}
/* Таблица статистики */
.stats-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
color: #e0e0e0;
}
.stats-table th,
.stats-table td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #424242;
}
.stats-table th {
background-color: #383838;
font-weight: 500;
color: #bbdefb;
}
.stats-table .total-row {
font-weight: bold;
background-color: #424242;
}
/* Стили для question-stats */
.question-stats {
background-color: #2d2d2d;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
/* Модальные окна */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background-color: #2d2d2d;
border-radius: 5px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 500px;
padding: 20px;
position: relative;
transform: translateY(-20px);
transition: transform 0.3s;
max-height: 90vh;
overflow-y: auto;
}
.modal-overlay.active .modal {
transform: translateY(0);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #444;
}
.modal-header h3 {
margin: 0;
color: #64b5f6;
}
.modal-close {
background: none;
border: none;
color: #e0e0e0;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
line-height: 1;
}
.modal-body {
margin-bottom: 20px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 10px;
border-top: 1px solid #444;
}
/* QR код */
.qr-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
}
.qr-code {
margin-bottom: 15px;
background-color: #fff;
padding: 15px;
border-radius: 8px;
}
.qr-link-container {
display: flex;
width: 100%;
max-width: 500px;
margin-top: 10px;
}
.qr-link-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #444;
border-radius: 4px 0 0 4px;
background-color: #333;
color: #fff;
}
.btn-copy-link {
padding: 10px 15px;
background-color: #64b5f6;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-copy-link:hover {
background-color: #90caf9;
}
.btn-copy-link.copied {
background-color: #4caf50;
}
/* Шкала оценки */
.scale-container {
margin-top: 20px;
width: 100%;
}
.scale-labels {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.scale-label-min,
.scale-label-max {
font-weight: 500;
color: #bbdefb;
}
.scale-values {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 5px;
}
.scale-item {
text-align: center;
}
.scale-item input {
display: none;
}
.scale-item label {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #424242;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
}
.scale-item input:checked + label {
background-color: #2196f3;
color: white;
}
.scale-item label:hover {
background-color: #616161;
}
/* Пошаговый опрос */
.step-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
margin-bottom: 10px;
}
.question-counter {
text-align: center;
font-size: 1rem;
color: #64b5f6;
flex: 1;
}
/* Улучшения для облака тегов */
.tag-input-container {
width: 100%;
}
.tag-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
background-color: #424242;
border: 1px solid #616161;
border-radius: 4px;
color: #e0e0e0;
}
.tag-items {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.tag-item {
position: relative;
padding: 8px 15px;
background-color: #424242;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
}
.tag-item.selected {
background-color: #2196f3;
color: white;
}
.tag-remove {
margin-left: 5px;
font-size: 1.2rem;
cursor: pointer;
}
/* Стили для результатов опроса */
.question-result {
background-color: #2d2d2d;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.text-answers {
margin-top: 10px;
}
.text-answer {
background-color: #424242;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
/* Улучшения для радио и чекбоксов */
.radio-options-container,
.checkbox-options-container {
margin-top: 10px;
}
.radio-option,
.checkbox-option {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.radio-option input,
.checkbox-option input {
margin-right: 10px;
}
.radio-option label,
.checkbox-option label {
cursor: pointer;
}
/* Стили для вопросов с ошибками */
.question-item.error {
border-left: 4px solid var(--color-error);
box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
padding-left: 16px;
transition: all 0.3s ease;
}
.question-item.error .question-title {
color: var(--color-error);
}
/* Анимация для ошибок */
.shake {
animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/* Стили для выхода вопроса */
.question-item.exit {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
/* Стили для плавного входа вопроса */
.question-item.enter {
opacity: 0;
transform: translateX(30px);
}
.question-item.active {
opacity: 1;
transform: translateX(0);
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Анимации для элементов результатов */
.results-title {
animation: slideDown 0.8s ease forwards;
}
.scale-average {
margin-bottom: 15px;
font-size: 1.2em;
}
.scale-average .highlight {
color: var(--color-primary);
font-size: 1.5em;
font-weight: bold;
}
.result-bar-container {
margin-bottom: 10px;
}
.result-label {
margin-bottom: 5px;
font-weight: 500;
}
.result-bar {
height: 20px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.result-bar-fill {
height: 100%;
background-color: var(--color-primary);
transition: width 1s ease-out;
border-radius: 4px;
}
.result-percent {
margin-top: 3px;
text-align: right;
font-size: 0.9em;
color: var(--color-muted);
}
.text-answer {
background-color: rgba(0, 0, 0, 0.05);
padding: 10px 15px;
border-radius: 4px;
margin-bottom: 10px;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.results-tag-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px 0;
}
.result-tag {
background-color: rgba(var(--primary-rgb), 0.1);
color: var(--color-primary);
padding: 8px 15px;
border-radius: 20px;
margin: 5px;
display: inline-block;
transition: all 0.5s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
.question-result {
transition: all 0.5s ease;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.03);
}
/* Улучшенная анимация для счетчика вопросов */
.question-counter {
transition: all 0.3s ease;
animation: fadeIn 0.5s;
}
.question-counter.update {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Анимации для кнопок навигации */
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.nav-btn:active {
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Улучшенные стили для загрузки */
#loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 50px 0;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 5px solid var(--color-primary);
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
margin-top: 15px;
color: #64b5f6;
}
/* Анимации */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Применение анимаций */
#questionnaire-container {
animation: fadeIn 0.6s ease-out;
}
.question-item {
animation: slideInUp 0.5s ease-out;
transition: all 0.3s ease;
}
.btn {
transition: all 0.2s ease-in-out;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background-color: #1976d2;
color: white;
}
.question-item.error {
animation: shake 0.5s ease-in-out;
}
.radio-option label:hover,
.checkbox-option label:hover {
transform: translateX(3px);
transition: transform 0.2s ease;
}
.tag-item {
transition: all 0.2s ease;
}
.tag-item:hover {
transform: scale(1.05);
}
.tag-item.selected {
background-color: var(--color-primary);
color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.scale-item label:hover {
transform: scale(1.1);
transition: transform 0.2s ease;
}
.scale-item input:checked + label {
background-color: var(--color-primary);
color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Анимированный лоадер */
#loading {
position: relative;
padding-left: 30px;
}
#loading:before {
content: '';
position: absolute;
left: 0;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
border: 3px solid #2196f3;
border-top-color: transparent;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
/* Анимированные переходы между вопросами */
.step-navigation button {
transition: all 0.3s ease;
}
.question-item.active {
animation: slideInRight 0.4s ease-out;
}
.question-item.exit {
animation: fadeIn 0.4s ease-out reverse;
}
/* Анимация для результатов */
.result-bar-fill {
transition: width 1.5s ease-out;
animation: slideInRight 1.5s ease-out;
}
.results-container {
animation: fadeIn 1s ease-out;
}
.question-result {
animation: slideInUp 0.5s ease-out;
animation-fill-mode: both;
}
.question-result:nth-child(1) { animation-delay: 0.1s; }
.question-result:nth-child(2) { animation-delay: 0.2s; }
.question-result:nth-child(3) { animation-delay: 0.3s; }
.question-result:nth-child(4) { animation-delay: 0.4s; }
.question-result:nth-child(5) { animation-delay: 0.5s; }
.question-result:nth-child(6) { animation-delay: 0.6s; }
.question-result:nth-child(7) { animation-delay: 0.7s; }
.question-result:nth-child(8) { animation-delay: 0.8s; }
.question-result:nth-child(9) { animation-delay: 0.9s; }
.question-result:nth-child(10) { animation-delay: 1s; }
/* Другие улучшения стилей */
.textarea-container textarea {
transition: height 0.3s ease;
}
.textarea-container textarea:focus {
height: 120px;
}
/* Анимация для модальных окон */
.modal-overlay.active .modal {
animation: slideInUp 0.3s ease-out;
}
/* Анимация для кнопки добавления вопроса */
#add-question {
transition: background-color 0.3s ease, transform 0.2s ease;
}
#add-question:hover {
transform: translateY(-2px);
}
#add-question:active {
transform: translateY(1px);
}
/* Анимация иконок */
.btn-icon svg {
transition: transform 0.3s ease;
}
.btn-icon:hover svg {
transform: rotate(90deg);
}
/* Анимация для обратной связи */
@keyframes success-animation {
0% { background-color: transparent; }
30% { background-color: rgba(76, 175, 80, 0.2); }
100% { background-color: transparent; }
}
.success-feedback {
animation: success-animation 1.5s ease;
}
/* Анимированные переключатели */
input[type="checkbox"], input[type="radio"] {
transition: all 0.2s ease;
}
/* Дополнительные плавные переходы для всех элементов */
* {
transition-property: background-color, border-color, color, box-shadow;
transition-duration: 0.2s;
transition-timing-function: ease;
}
/* Стили для приветствия и благодарности */
.welcome-animation,
.thank-you-animation,
.already-completed {
max-width: 800px;
margin: 50px auto;
padding: 30px;
text-align: center;
background-color: #2d2d2d;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.5s ease;
}
.welcome-icon,
.thank-you-icon,
.completed-icon {
margin-bottom: 20px;
}
.welcome-icon svg,
.thank-you-icon svg,
.completed-icon svg {
width: 100px;
height: 100px;
color: var(--color-primary);
}
.welcome-icon svg:hover,
.thank-you-icon svg:hover,
.completed-icon svg:hover {
transform: scale(1.05);
}
.welcome-title,
.thank-you-title,
.completed-title {
font-size: 2rem;
margin-bottom: 15px;
color: var(--color-primary, #2196f3);
}
.welcome-description,
.thank-you-description,
.completed-description {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
color: #e0e0e0;
}
.welcome-start-btn,
.view-results-btn {
font-size: 1.2rem;
padding: 12px 24px;
border-radius: 30px;
background-color: var(--color-primary);
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
.welcome-start-btn:hover,
.view-results-btn:hover {
background-color: #0d47a1;
}
.start-again-btn {
margin-top: 20px;
margin-left: 10px;
font-size: 1.1rem;
padding: 12px 30px;
border-radius: 30px;
}
/* Анимации для приветствия и благодарности */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* CSS переменные для цветов */
:root {
--color-primary: #2196f3;
--color-primary-dark: #1976d2;
--color-primary-light: #64b5f6;
--color-secondary: #757575;
--color-secondary-dark: #616161;
--color-success: #4caf50;
--color-success-dark: #388e3c;
--color-error: #f44336;
--color-error-dark: #d32f2f;
--color-muted: #9e9e9e;
--primary-rgb: 33, 150, 243;
--color-bg-dark: #1e1e1e;
--color-bg-card: #2d2d2d;
--color-bg-input: #424242;
}
/* Стили для навигационных кнопок */
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 110px;
background-color: #1976d2;
color: white;
}
.nav-btn svg {
margin: 0 5px;
}
.nav-btn:hover {
background-color: #0d47a1;
}
.nav-btn:disabled {
background-color: #455a64;
cursor: not-allowed;
opacity: 0.7;
}
/* Стили для статистики в админке */
.question-stats {
margin-bottom: 30px;
padding: 20px;
background-color: #2d2d2d;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.question-stats h3 {
margin-top: 0;
margin-bottom: 15px;
color: #90caf9;
border-bottom: 1px solid #444;
padding-bottom: 10px;
}
.no-stats, .no-votes {
padding: 15px;
background-color: #383838;
border-radius: 5px;
text-align: center;
color: #aaa;
}
.stats-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}
.stats-table th, .stats-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #444;
}
.stats-table th {
background-color: #383838;
color: #90caf9;
}
.bar-container {
width: 100%;
height: 20px;
background-color: #383838;
border-radius: 3px;
overflow: hidden;
}
.bar {
height: 100%;
background-color: #64b5f6;
border-radius: 3px;
transition: width 0.5s ease-in-out;
}
.total-votes {
text-align: right;
font-style: italic;
color: #aaa;
margin-top: 10px;
}
/* Стили для облака тегов в статистике */
.tag-cloud-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 15px;
background-color: #383838;
border-radius: 5px;
}
.tag-item {
display: inline-block;
padding: 5px 10px;
background-color: #444;
border-radius: 15px;
margin-right: 8px;
margin-bottom: 8px;
color: #90caf9;
transition: transform 0.2s ease;
}
.tag-item:hover {
transform: scale(1.05);
}
/* Стили для шкалы и рейтинга */
.scale-stats {
padding: 15px;
background-color: #383838;
border-radius: 5px;
}
.stat-item {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-label {
font-weight: bold;
color: #aaa;
}
.stat-value {
font-size: 1.1em;
color: #90caf9;
}
/* Навигация */
.nav-header {
background-color: #212121;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
padding: 15px 0;
margin-bottom: 30px;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-size: 1.3rem;
font-weight: 600;
color: #61dafb;
text-decoration: none;
}
.nav-menu {
display: flex;
gap: 20px;
}
.nav-link {
color: #e0e0e0;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.2s;
}
.nav-link:hover {
background-color: #424242;
color: #61dafb;
}
.nav-link.active {
background-color: #424242;
color: #61dafb;
}
/* Формы - улучшенные чекбоксы и радиокнопки */
.form-container {
background-color: #2d2d2d;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #bbdefb;
}
/* Улучшенные стили для чекбоксов и радиокнопок */
.radio-option,
.checkbox-option {
display: flex;
align-items: center;
margin-bottom: 12px;
position: relative;
}
.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.radio-option label,
.checkbox-option label {
position: relative;
padding-left: 40px;
cursor: pointer;
display: block;
font-size: 1rem;
user-select: none;
}
.radio-option label:before,
.checkbox-option label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border: 2px solid #616161;
background-color: #424242;
transition: all 0.3s;
}
.radio-option label:before {
border-radius: 50%;
}
.checkbox-option label:before {
border-radius: 4px;
}
.radio-option input[type="radio"]:checked ~ label:before {
background-color: #2196f3;
border-color: #2196f3;
}
.checkbox-option input[type="checkbox"]:checked ~ label:before {
background-color: #4caf50;
border-color: #4caf50;
}
.radio-option label:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
top: 7px;
left: 7px;
transition: all 0.2s;
opacity: 0;
transform: scale(0);
}
.checkbox-option label:after {
content: '';
position: absolute;
left: 9px;
top: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
opacity: 0;
transition: all 0.2s;
}
.radio-option input[type="radio"]:checked ~ label:after {
opacity: 1;
transform: scale(1);
}
.checkbox-option input[type="checkbox"]:checked ~ label:after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.radio-option:hover label:before,
.checkbox-option:hover label:before {
border-color: #90caf9;
}
/* Модальные окна с прогресс-баром */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background-color: #2d2d2d;
border-radius: 5px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 500px;
padding: 20px;
position: relative;
transform: translateY(-20px);
transition: transform 0.3s;
max-height: 90vh;
overflow-y: auto;
}
.modal-overlay.active .modal {
transform: translateY(0);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #444;
}
.modal-header h3 {
margin: 0;
color: #64b5f6;
}
.modal-close {
background: none;
border: none;
color: #e0e0e0;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
line-height: 1;
}
.modal-body {
margin-bottom: 20px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 10px;
border-top: 1px solid #444;
}
/* Прогресс-бар для модальных окон */
.modal-progress {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
background-color: #2196f3;
width: 0;
transition: width 2s linear;
}
.modal-progress.active {
width: 100%;
}
/* Анимации для опроса */
.question-item {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s, transform 0.5s;
}
.question-item.enter {
opacity: 0;
transform: translateY(20px);
}
.question-item.active {
opacity: 1;
transform: translateY(0);
}
#question-counter {
transition: opacity 0.3s, transform 0.3s;
}
#question-counter.update {
opacity: 0;
transform: translateY(-10px);
}
/* Анимации для благодарности и приветствия */
.welcome-animation,
.thank-you-animation,
.already-completed {
background-color: #2d2d2d;
padding: 30px;
border-radius: 8px;
text-align: center;
margin: 50px auto;
max-width: 600px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: opacity 0.5s, transform 0.5s;
}
.welcome-icon,
.thank-you-icon,
.completed-icon {
margin-bottom: 20px;
color: #4caf50;
}
.welcome-title,
.thank-you-title,
.completed-title {
color: #64b5f6;
margin-bottom: 15px;
}
.welcome-description,
.thank-you-description,
.completed-description {
color: #e0e0e0;
margin-bottom: 25px;
}
.welcome-start-btn,
.view-results-btn {
margin: 10px;
}
/* Анимации для ошибок */
.shake-animation {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* Улучшенные стили для чекбоксов и радиокнопок */
.radio-option,
.checkbox-option {
display: flex;
align-items: center;
margin-bottom: 12px;
position: relative;
}
.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.radio-option label,
.checkbox-option label {
position: relative;
padding-left: 40px;
cursor: pointer;
display: block;
font-size: 1rem;
user-select: none;
}
.radio-option label:before,
.checkbox-option label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border: 2px solid #616161;
background-color: #424242;
transition: all 0.3s;
}
.radio-option label:before {
border-radius: 50%;
}
.checkbox-option label:before {
border-radius: 4px;
}
.radio-option input[type="radio"]:checked ~ label:before {
background-color: #2196f3;
border-color: #2196f3;
}
.checkbox-option input[type="checkbox"]:checked ~ label:before {
background-color: #4caf50;
border-color: #4caf50;
}
.radio-option label:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
top: 7px;
left: 7px;
transition: all 0.2s;
opacity: 0;
transform: scale(0);
}
.checkbox-option label:after {
content: '';
position: absolute;
left: 9px;
top: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
opacity: 0;
transition: all 0.2s;
}
.radio-option input[type="radio"]:checked ~ label:after {
opacity: 1;
transform: scale(1);
}
.checkbox-option input[type="checkbox"]:checked ~ label:after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.radio-option:hover label:before,
.checkbox-option:hover label:before {
border-color: #90caf9;
}
/* Стили для текстовых ответов в админке */
.text-answers-list {
margin-top: 15px;
}
.text-answer-item {
background-color: #383838;
padding: 12px 15px;
border-radius: 5px;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.answer-number {
font-weight: bold;
color: #64b5f6;
margin-right: 10px;
flex-shrink: 0;
}
.answer-text {
flex-grow: 1;
white-space: pre-wrap;
word-break: break-word;
}
/* Добавляем стили для анимации конфети */
.confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #90caf9;
border-radius: 3px;
will-change: transform;
}
.confetti.square {
border-radius: 0;
}
.confetti.triangle {
width: 0;
height: 0;
background-color: transparent;
border-style: solid;
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent #90caf9 transparent;
}
.confetti.circle {
border-radius: 50%;
}
.confetti.red {
background-color: #f44336;
border-color: transparent transparent #f44336 transparent;
}
.confetti.blue {
background-color: #2196f3;
border-color: transparent transparent #2196f3 transparent;
}
.confetti.green {
background-color: #4caf50;
border-color: transparent transparent #4caf50 transparent;
}
.confetti.yellow {
background-color: #ffeb3b;
border-color: transparent transparent #ffeb3b transparent;
}
.confetti.purple {
background-color: #9c27b0;
border-color: transparent transparent #9c27b0 transparent;
}
@keyframes confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(360deg);
}
}
@keyframes confetti-sway {
0% {
transform: translateX(0);
}
25% {
transform: translateX(10px);
}
50% {
transform: translateX(-10px);
}
75% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
/* Основные стили */
.container {
padding: 15px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.25rem;
}
/* Навигация */
.nav-container {
flex-direction: column;
padding: 10px;
}
.nav-menu {
margin-top: 10px;
width: 100%;
justify-content: center;
}
.nav-link {
margin: 0 10px;
}
/* Формы */
.form-group {
margin-bottom: 15px;
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
padding: 8px;
font-size: 14px;
}
/* Кнопки */
.btn {
padding: 8px 16px;
font-size: 14px;
}
.questionnaire-actions {
flex-direction: column;
}
.questionnaire-actions .btn {
width: 100%;
margin-bottom: 10px;
}
/* Опросы */
.question-item {
padding: 15px;
margin-bottom: 15px;
}
/* Навигация по опросу */
.step-navigation {
flex-direction: column;
align-items: center;
}
.step-navigation .btn {
width: 100%;
margin: 5px 0;
}
.question-counter {
margin-bottom: 10px;
width: 100%;
text-align: center;
}
/* Шкала оценки */
.scale-container {
padding: 10px;
}
.scale-values {
flex-wrap: wrap;
justify-content: center;
}
.scale-item {
margin: 5px;
}
/* Облако тегов */
.tag-cloud-container {
padding: 10px;
}
.tag-item {
margin: 5px;
font-size: 14px;
padding: 5px 10px;
}
/* Результаты опроса */
.questionnaire-links {
flex-direction: column;
}
.link-group {
width: 100%;
}
.link-input-group {
flex-direction: column;
}
.link-input-group input {
width: 100%;
margin-bottom: 10px;
}
.stats-table th,
.stats-table td {
padding: 5px;
font-size: 14px;
}
/* Модальные окна */
.modal-content {
width: 90%;
padding: 15px;
}
.modal-footer {
flex-direction: column;
}
.modal-footer .btn {
width: 100%;
margin: 5px 0;
}
/* Улучшенные стили для навигации в опросе на мобильных устройствах */
.step-navigation {
flex-direction: column-reverse;
align-items: stretch;
}
.step-navigation .btn {
margin: 5px 0;
width: 100%;
height: 44px; /* Увеличиваем высоту для лучшего тача */
}
.question-counter {
margin: 10px 0;
order: -1; /* Показываем счетчик вопросов сверху на мобильных */
}
/* Улучшения для формы */
.form-actions {
flex-direction: column;
gap: 10px;
}
.form-actions .btn {
width: 100%;
height: 44px; /* Увеличиваем высоту для лучшего тача */
}
/* Улучшения для textarea */
textarea {
min-height: 100px;
}
/* Улучшения для облака тегов */
.tag-input {
width: 100%;
height: 44px; /* Увеличиваем высоту для лучшего тача */
font-size: 16px; /* Оптимальный размер шрифта для мобильных устройств */
}
/* Убираем зум при фокусе на поля ввода */
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
font-size: 16px; /* Оптимальный размер шрифта для мобильных устройств */
}
}
/* Медиа-запросы для маленьких экранов */
@media (max-width: 480px) {
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
.container {
padding: 10px;
}
.btn {
padding: 8px 12px;
font-size: 13px;
}
.question-item {
padding: 12px;
}
.tag-item {
margin: 3px;
font-size: 13px;
padding: 4px 8px;
}
.scale-item label {
min-width: 30px;
height: 30px;
font-size: 13px;
}
/* Уменьшаем размер чекбоксов и радиокнопок для лучшего тача */
input[type="checkbox"],
input[type="radio"] {
transform: scale(1.2);
margin-right: 8px;
}
}