Проверялось на Opera 12, Opera 15, Google Chrome 28, Firefox 22 - тени, градиенты и анимация поддерживаются
Спасибо Smayliks что предоставил первоначальный код
Цвета:
0-19% - синий
20-39% - зеленый
40-59% - желтый
60-79% - оранжевый
80-100% - красный
styles/prosilver/template/viewtopic_body.html
Найти
Код: Выделить всё
<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar">
Код: Выделить всё
<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="meter">
Код: Выделить всё
{poll_option.POLL_OPTION_RESULT}</div></dd>
Код: Выделить всё
{poll_option.POLL_OPTION_RESULT} </div></div></dd>
styles/prosilver/theme/colours.css
Найти
Код: Выделить всё
.rtl .pollbar5 {
border-left-color: #D11A4E;
}
Код: Выделить всё
/* CoolPoll (http://phpbb.tttz.ru)
-----------------------------v.1.0.1--- */
.pollbar1 {
background-color: #0000ff; /* blue */
background-image: linear-gradient(
135deg, rgba(0, 0, 128, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 128, 0.2) 50%,
rgba(0, 0, 128, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar2 {
background-color: #2BC253; /* green */
background-image: linear-gradient(
135deg,
rgba(84, 240, 84, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(84, 240, 84, 0.2) 50%,
rgba(84, 240, 84, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar3 {
background-color: #FFD800; /* yellow */
background-image: linear-gradient(
135deg,
rgba(216, 177, 0, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(216, 177, 0, 0.2) 50%,
rgba(216, 177, 0, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar4 {
background-color: #f1a165; /* orange */
background-image: linear-gradient(
135deg,
rgba(243, 109, 10, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(243, 109, 10, 0.2) 50%,
rgba(243, 109, 10, 0.2) 75%,
transparent 75%,
transparent);
}
.pollbar5 {
background-color: #f0a3a3; /* red */
background-image: linear-gradient(
135deg, rgba(244, 35, 35, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(244, 35, 35, 0.2) 50%,
rgba(244, 35, 35, 0.2) 75%,
transparent 75%,
transparent);
}
@-webkit-keyframes move {
0% {background-position: 0 0;}
100% {background-position: 100px 50px;}
}
@keyframes move {
from { background-position: 0 0; }
to { background-position: 100px 50px; }
}
.meter{
height: 15px;
position: relative;
margin: 0;
padding: 0 !important;
background: #7DA0D3;
border-radius: 25px;
box-shadow: inset 0 -4px 1px rgba(255,255,255,0.3);
}
.meter > div {
position: relative;
height: 100%;
padding: 0 !important;
border: none;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
animation: move 3s linear 0s normal none infinite ;
-webkit-animation: move 3s linear infinite;
background-size: 50px 50px;
}