<STYLE>
/* Контейнер опроса */
.cell-poll-title1 {
border: 4px solid #853b97; /* рамка вокруг блока */
margin: 5px; /* внешний отступ */
padding: 15px 10px; /* внутренний отступ */
font-family: Verdana, Helvetica, Arial, sans-serif; /* шрифт */
font-size: 1rem; /* размер шрифта */
font-weight: bold; /* жирный текст */
color: #3d4152; /* цвет текста */
box-shadow: 5px 5px 0 0 #853b97; /* тень блока */
text-align: left; /* выравнивание текста по левому краю */
border-radius: 8px; /* скругление углов */
background: #fff; /* цвет фона */
}
/* Каждый ответ */
.answer {
width: 100%; /* ширина */
margin-bottom: 15px; /* отступ снизу */
position: relative; /* относительное позиционирование */
font-size: 0.9rem; /* размер текста */
font-family: Verdana, sans-serif; /* шрифт */
}
/* Ссылки и результаты */
.cell-poll-link {
margin-top: 8px; /* отступ сверху */
font-size: 0.7rem; /* размер текста */
color: #333; /* цвет текста */
}
.cell-poll-link a {
color: #853b97; /* цвет ссылок */
text-decoration: none; /* убираем подчеркивание */
margin: 0 3px; /* отступы между ссылками */
}
.cell-poll-link a:hover {
color: #642B73; /* цвет при наведении */
text-decoration: underline; /* добавляется подчеркивание */
}
/* Блок всех ответов */
.cell-poll-answers {
margin-top: 10px; /* отступ сверху */
}
/* Каждый ответ (дублируется, с другими настройками) */
.answer {
width: 100%;
margin-bottom: 12px;
position: relative;
font-size: 0.75rem; /* размер текста меньше */
font-family: Verdana, sans-serif;
}
/* Полоса прогресса (цветная полоска внутри ответа) */
.answer div div {
height: 20px; /* высота полосы */
border-radius: 10px; /* скругленные углы */
background: linear-gradient(90deg, #75D0ED, #5BC254); /* градиент */
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4),
inset 0 2px 4px rgba(255,255,255,0.4); /* внутренняя тень */
width: 0; /* ширина изначально 0, потом увеличивается анимацией */
transition: width 1.5s ease-in-out; /* плавное заполнение */
}
/* Процент голосов */
.answer span {
position: absolute; /* абсолютное позиционирование */
right: 6px; /* отступ справа */
top: 50%; /* середина по вертикали */
transform: translateY(-50%); /* выравнивание текста по центру полосы */
font-size: 0.65rem; /* маленький размер шрифта */
color: #000; /* черный текст */
font-weight: bold; /* жирный */
}
/* Альтернативное оформление полоски */
.answer div div {
border-radius: 4px; /* скругленные углы */
background: #75D0ED; /* голубой фон */
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4),
inset 0 2px 4px rgba(255,255,255,0.4);
height: 20px;
}
/* Анимация блеска кнопок */
@keyframes shine {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Кнопки голосования */
.pollButton,
.pollBut {
position: relative;
overflow: hidden; /* скрывает лишний фон */
background: linear-gradient(
90deg,
#853b97 0%,
#9370DB 20%,
#853b97 40%,
#853b97 100%
); /* переливающийся фон */
background-size: 200% auto; /* размер градиента для анимации */
color: #fff; /* белый текст */
border: none; /* без рамки */
height: 40px; /* высота кнопки */
padding: 0 5px; /* внутренний отступ */
font-size: 12px; /* размер шрифта */
font-weight: 500; /* полужирный */
text-transform: uppercase; /* заглавные буквы */
letter-spacing: 1px; /* расстояние между буквами */
border-radius: 20px; /* скругленные углы */
cursor: pointer; /* курсор "рука" */
animation: shine 18s linear infinite; /* бесконечный плавный перелив */
box-shadow: 0 0 8px rgba(133, 59, 151, 0.5); /* тень */
transition: transform 0.2s, box-shadow 0.3s; /* плавные эффекты */
}
/* Эффект при наведении на кнопку */
.pollButton:hover,
.pollBut:hover {
transform: scale(0.99); /* уменьшает кнопку чуть-чуть */
box-shadow: 0 0 2px rgba(147, 112, 219, 0.9); /* изменяет тень */
}
/* Ответы в другом стиле */
.answer {
float: left;
width: 100%;
padding-top: 0px;
position: relative;
height: 30px !important; /* фиксированная высота */
font-size: 11px;
margin: 0 0 15px;
background: #e8e8e8; /* серый фон */
color: #000; /* черный текст */
border-radius: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
/* Дублирующиеся стили контейнера */
.cell-poll-title1 {
border: 4px solid #000; /* черная рамка */
margin: 5px 5px 5px 5px;
padding: 5px 5px;
position: relative;
box-shadow: 5px 5px 0 0 #853b97;
}
.cell-poll-title1 {
color: #3d4152;
font-size: 10px;
padding-top: 10px;
display: block;
text-align: left;
font-size: 1rem;
font-weight: bold;
}
.cell-poll-title1 {
border: 4px solid #853b97;
margin: 5px 5px 8px 5px;
padding: 15px 5px;
position: relative;
box-shadow: 5px 5px 0 0 #853b97;
}
/* Общий стиль для кнопок */
.pollButton, button, input[type="submit"], .btn, input[type="reset"] ,.form__btn, .qq-upload-button {
display: inline-flex; /* выравнивание текста по центру */
align-items: center;
justify-content: center;
cursor: pointer;
text-align: center;
font-weight: 500;
white-space: nowrap; /* текст в одну строку */
background-color:#853b97;
color: #fff;
border-radius: 20px;
box-shadow: none;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Стили при наведении на кнопки */
.button:hover, .btn:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,
.form__btn:hover, .qq-upload-button:hover, .pm__links a:hover, .usp__btn a:hover {
background-color: #642B73; /* меняется фон */
color: #fff; /* текст белый */
border-color: #642B73; /* меняется рамка */
}
/* Кнопка pollBut отдельно */
.pollBut {
display: inline-flex;
align: center;
justify-content: center;
cursor: pointer;
text-align: center;
padding: 0 20px;
height: 40px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
background-color: #FFF;
color: #fff;
border-radius: 20px;
box-shadow: none;
text-transform: uppercase;
letter-spacing: 1px;
}
</STYLE>
<div class="cell-poll-title1">$QUESTION$</div>
<div class="cell-poll-answers">$ANSWERS$</div>
<div class="cell-poll-link">
<span>Ответов: <strong>$TOTAL_VOTES$</strong></span>
<a href="$RESULTS_LINK$" >Результаты </a>
<b> | </b>
<a href="$ARCHIVE_LINK$">Архив </a>
</div>
<script>
var color_poll = [
"#ff4d4f","#fa0fcb","#F6954E","#dd8cd2","#75D0ED",
"#5BC254","#CFC72D","#DD3344","#FE9B6F","#4176B3"
];
// Находим все полоски внутри блока ответов
document.querySelectorAll('.cell-poll-answers .answer div div').forEach(function(el, i){
// Цвет полоски
if(!color_poll[i]) color_poll[i] = '#F8F8F8';
el.style.background = color_poll[i];
// Берём процент из data-width или style.width
var target = el.getAttribute('data-width') || el.style.width || '0%';
var percent = parseFloat(target);
// Масштабируем маленькие значения, чтобы полоска была заметнее
var scale = 0.5;
if(percent < 50) percent = 50 * scale + percent * (1 - scale);
// Устанавливаем ширину с небольшой задержкой для плавного эффекта
setTimeout(function(){
el.style.width = percent + '%';
}, 100);
// Количество голосов из data-votes
var votes = el.getAttribute('data-votes') || '0';
// Добавляем текст под полоской
var info = el.closest('.answer').querySelector('.answer-info');
if(info) info.textContent = percent + '% (' + votes + ' голосов)';
});
</script>
