examples/rainbow-spiral/style.css
html,
body {
height: 100%;
margin: 0;
background: #222;
font: 100%/1.21 'Helvetica Neue', helvetica, sans-serif;
text-rendering: optimizeSpeed;
color: #c0c0c0;
overflow: hidden;
}
.control {
display: inline-block;
vertical-align: top;
width: 150px;
height: 50px;
color: #000;
}
#main, #app {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.cursor {
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 8px;
margin: -5px 0 0 -5px;
border: 2px solid #F00;
border-radius: 50%;
transform-origin: 50% 50%;
transition: all 250ms ease;
transition-property: width, height, margin;
pointer-events: none;
overflow: hidden;
font-size: 9px;
line-height: 25px;
text-indent: 15px;
white-space: nowrap;
}
.cursor.label {
overflow: visible;
}
.cursor.big {
width: 24px;
height: 24px;
margin: -13px 0 0 -13px;
}
.cursor.label {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.animation-picker {
position: fixed;
display: inline-block;
right: 0;
top: 0;
padding: 10px;
background: #000;
color: #c0c0c0;
z-index: 1000;
}
.animation-picker select {
font-size: 100%;
margin-left: 5px;
}