dynamically create touches
[nanofun.git] / nanofun.css
1 body {
2   font-family: sans-serif;
3   font-size: 16px;
4 }
5
6 #nanopad {
7   margin: 0 auto;
8 }
9
10 div.nanotouch {
11   border: 1px dashed #333;
12   padding: 1.5rem;
13   position: relative;
14   width: 7vw;
15   height: 7vw;
16   margin: 1vw;
17   display: inline-block;
18   overflow: hidden;
19 }
20
21 div.nanotouch.loaded {
22   background: #9aff9a;
23   border: 1px solid #4bff4b;
24 }
25
26 div.nanotouch.loaded.playing {
27   background: #6aff6a;
28 }
29
30 div.nanotouch input[type=file] {
31   position: absolute;
32   top: 0;
33   left: 0;
34   width: 100%;
35   height: 100%;
36   opacity: 0.01;
37   margin: 0;
38   cursor: pointer;
39 }
40
41 div.nanotouch input[type=range] {
42   position: absolute;
43   bottom: 0;
44   left: 0;
45   width: 100%;
46   padding: 0;
47   margin: 0;
48 }
49
50 div.nanotouch span.name {
51   position: absolute;
52 }
53
54 div.nanotouch span.duration {
55   position: absolute;
56   bottom: 2ex;
57   right: 1ex;
58 }
59
60 div#gitclone {
61   font-size: 12px;
62   position: absolute;
63   bottom: 1ex;
64   right: 1ex;
65 }