app/views/bspin/_bspin.html.erb in bspin-1.0.1 vs app/views/bspin/_bspin.html.erb in bspin-1.1.0
- old
+ new
@@ -156,15 +156,15 @@
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: <%= colour -%>;
- background: -moz-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
- background: -webkit-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
- background: -o-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
- background: -ms-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
- background: linear-gradient(to right, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
+ background: -moz-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
+ background: -webkit-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
+ background: -o-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
+ background: -ms-linear-gradient(left, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
+ background: linear-gradient(to right, <%= colour -%> 10%, rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0) 42%);
position: fixed;
z-index:99;
top:0;
left:0;
right:0;
@@ -232,13 +232,13 @@
bottom:0;
margin:auto;
text-indent: -9999em;
<%#- TODO - color conversions for transparency. Use gem color? %>
<%#- colourhex.scan(/../).map {|color| color.to_i(16)} -%>
- border-top: 1.1em solid rgba(0,0,0, 0.2);
- border-right: 1.1em solid rgba(0,0,0, 0.2);
- border-bottom: 1.1em solid rgba(0,0,0, 0.2);
+ border-top: 1.1em solid rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
+ border-right: 1.1em solid rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
+ border-bottom: 1.1em solid rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
border-left: 1.1em solid <%= colour -%>;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 <%= speed -%>s infinite linear;
@@ -367,58 +367,58 @@
transform: translateZ(0);
}
@-webkit-keyframes load5 {
0%,
100% {
- box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
+ box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7);
}
12.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5);
}
25% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
37.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
50% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
62.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
75% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
87.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
}
}
@keyframes load5 {
0%,
100% {
- box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
+ box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7);
}
12.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5);
}
25% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
37.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
50% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
62.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
75% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2);
}
87.5% {
- box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
+ box-shadow: 0em -2.6em 0em 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.8em -1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 2.5em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 1.75em 1.75em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), 0em 2.5em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.2), -1.8em 1.8em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.5), -2.6em 0em 0 0em rgba(<%= red -%>, <%= green -%>, <%= blue -%>, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
}
}
<%- when "bar1" -%>
.bspin:before,
.bspin:after,
\ No newline at end of file