ramp to values to avoid audio glitches
[nanofun.git] / nanofun.css
1 html, body {
2   padding: 0;
3   margin: 0;
4   font-family: sans-serif;
5   font-size: 16px;
6 }
7
8 body {
9   background: #f8faf8;
10 }
11
12 #nanopad {
13   margin: 0 auto;
14 }
15
16 div.nanotouch {
17   border-radius: 5px;
18   box-shadow: 0 0 5px #666;
19   box-sizing: border-box;
20   padding: 1.5rem;
21   position: relative;
22   width: 10vw;
23   height: 10vw;
24   margin: 1vw;
25   display: inline-block;
26   overflow: hidden;
27   background: white;
28 }
29
30 div.nanotouch.error {
31   background: #ff9a9a;
32 }
33
34 div.nanotouch.loaded {
35   background: #9aff9a;
36 }
37
38 div.nanotouch.loaded.playing {
39   background: #6aff6a;
40 }
41
42 div.nanotouch input[type=file] {
43   position: absolute;
44   top: 0;
45   left: 0;
46   width: 100%;
47   height: 100%;
48   opacity: 0.001;
49   margin: 0;
50   cursor: pointer;
51 }
52
53 div.nanotouch input[type=range] {
54   position: absolute;
55   bottom: 0;
56   left: 0;
57   width: 100%;
58   padding: 0;
59   margin: 0;
60 }
61
62 div.nanotouch .effects {
63   position: absolute;
64   left: 0;
65   bottom: 5ex;
66   z-index: 10000;
67 }
68
69 div.nanotouch .loop {
70   position: absolute;
71   left: 0;
72   bottom: 2ex;
73   z-index: 10000;
74 }
75
76 div.nanotouch span.name {
77   position: absolute;
78 }
79
80 div.nanotouch span.duration {
81   position: absolute;
82   bottom: 2ex;
83   right: 1ex;
84 }
85
86 div#gitclone {
87   font-size: 12px;
88   position: absolute;
89   bottom: 1ex;
90   right: 1ex;
91 }
92
93 form {
94   margin: 1em;
95 }
96
97 form label {
98   display: inline-block;
99   width: 10em;
100 }
101
102 #devices {
103   position: absolute;
104   bottom: 2em;
105   right: 1em;
106 }
107
108 #devices div {
109   padding: 1px 5px;
110   margin-top: 2px;
111 }
112
113 #devices div.on {
114   background: #6aff6a;
115 }
116
117 form fieldset {
118   padding: 0;
119   border: 0;
120   margin: 0;
121   margin-top: 1em;
122 }
123
124 form fieldset legend {
125   font-weight: bold;
126   margin: 0;
127   padding-left: 0;
128 }