html, body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 16px;
}
body {
background: #f8faf8;
}
#nanopad {
margin: 0 auto;
}
div.nanotouch {
border-radius: 5px;
box-shadow: 0 0 5px #666;
box-sizing: border-box;
padding: 1.5rem;
position: relative;
width: 10vw;
height: 10vw;
margin: 1vw;
display: inline-block;
overflow: hidden;
background: white;
}
div.nanotouch.error {
background: #ff9a9a;
}
div.nanotouch.loaded {
background: #9aff9a;
}
div.nanotouch.loaded.playing {
background: #6aff6a;
}
div.nanotouch input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.001;
margin: 0;
cursor: pointer;
}
div.nanotouch input[type=range] {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
margin: 0;
}
div.nanotouch .effects {
position: absolute;
left: 0;
bottom: 5ex;
z-index: 10000;
}
div.nanotouch .loop {
position: absolute;
left: 0;
bottom: 2ex;
z-index: 10000;
}
div.nanotouch span.name {
position: absolute;
}
div.nanotouch span.duration {
position: absolute;
bottom: 2ex;
right: 1ex;
}
div#gitclone {
font-size: 12px;
position: absolute;
bottom: 1ex;
right: 1ex;
}
form {
margin: 1em;
}
form label {
display: inline-block;
width: 10em;
}
#devices {
position: absolute;
bottom: 2em;
right: 1em;
}
#devices div {
padding: 1px 5px;
margin-top: 2px;
}
#devices div.on {
background: #6aff6a;
}
form fieldset {
padding: 0;
border: 0;
margin: 0;
margin-top: 1em;
}
form fieldset legend {
font-weight: bold;
margin: 0;
padding-left: 0;
}