-body {
+html, body {
+ padding: 0;
+ margin: 0;
font-family: sans-serif;
font-size: 16px;
}
+body {
+ background: #f8faf8;
+}
+
#nanopad {
margin: 0 auto;
}
div.nanotouch {
- border: 1px dashed #333;
+ border-radius: 5px;
+ box-shadow: 0 0 5px #666;
+ box-sizing: border-box;
padding: 1.5rem;
position: relative;
- width: 7vw;
- height: 7vw;
+ width: 10vw;
+ height: 10vw;
margin: 1vw;
display: inline-block;
overflow: hidden;
+ background: white;
+}
+
+div.nanotouch.error {
+ background: #ff9a9a;
}
div.nanotouch.loaded {
background: #9aff9a;
- border: 1px solid #4bff4b;
}
div.nanotouch.loaded.playing {
background: #6aff6a;
}
-div.nanotouch input {
+div.nanotouch input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
- opacity: 0.01;
+ 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: 1ex;
+ bottom: 2ex;
right: 1ex;
}
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;
+}