<div id="nanopad">
<div class="nanotouch">
<span class="name"></span>
+ <span class="key"></span>
<span class="duration"></span>
<label class="effects"><input type="checkbox">Effects</label><br>
<label class="loop"><input type="checkbox">Loop</label><br>
div.nanotouch span.name {
position: absolute;
+ z-index: 10;
+}
+
+div.nanotouch span.key {
+ position: absolute;
+ pointer-events: none;
+ right: 1ex;
+ top: 1ex;
+ opacity: 0.3;
+ font-size: 100px;
+ line-height: 50px;
+ z-index: 0;
}
div.nanotouch span.duration {
position: absolute;
bottom: 2ex;
right: 1ex;
+ z-index: 10;
}
div#gitclone {
for (var i=0; i<NANOPAD_TOUCHS.length; i++) {
var $new_touch = $nanotouch.clone();
$new_touch.attr('data-touch', i);
+ $new_touch.find('.key').text(KEYBOARD_CODES[i]);
$new_touch.appendTo($nanopad);
}
$nanotouch.remove(); /* remove template */