increase translucence of file input widget even more

[nanofun.git] / nanofun.css

diff --git a/nanofun.css b/nanofun.css
index e4e97e3b4b9a356b04cc42b244a7965f25b497d0..3f09e580881ceee488e358d41af24e2b6e15a86c 100644 (file)
--- a/nanofun.css
+++ b/nanofun.css
@@ -1,50 +1,71 @@
-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 span.name {
   position: absolute;
 }
 
 div.nanotouch span.duration {
   position: absolute;
-  bottom: 1ex;
+  bottom: 2ex;
   right: 1ex;
 }
 
@@ -54,3 +75,27 @@ div#gitclone {
   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;
+}