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.focus {
  43   box-shadow: 0 0 5px 5px #386ede;
  44 }
  45
  46 div.nanotouch input[type=file] {
  47   position: absolute;
  48   top: 0;
  49   left: 0;
  50   width: 100%;
  51   height: 100%;
  52   opacity: 0.001;
  53   margin: 0;
  54   cursor: pointer;
  55 }
  56
  57 div.nanotouch input[type=range] {
  58   position: absolute;
  59   bottom: 0;
  60   left: 0;
  61   width: 100%;
  62   padding: 0;
  63   margin: 0;
  64 }
  65
  66 div.nanotouch .effects {
  67   position: absolute;
  68   left: 0;
  69   bottom: 2ex;
  70   z-index: 10000;
  71 }
  72
  73 div.nanotouch .loop {
  74   position: absolute;
  75   left: 0;
  76   bottom: 5ex;
  77   z-index: 10000;
  78 }
  79
  80 div.nanotouch span.name {
  81   position: absolute;
  82   z-index: 10;
  83 }
  84
  85 div.nanotouch span.key {
  86   position: absolute;
  87   pointer-events: none;
  88   right: 1ex;
  89   top: 1ex;
  90   opacity: 0.3;
  91   font-size: 100px;
  92   line-height: 50px;
  93   z-index: 0;
  94 }
  95
  96 div.nanotouch span.duration {
  97   position: absolute;
  98   bottom: 2ex;
  99   right: 1ex;
 100   z-index: 10;
 101 }
 102
 103 div#gitclone {
 104   font-size: 12px;
 105   position: absolute;
 106   bottom: 1ex;
 107   right: 1ex;
 108 }
 109
 110 form {
 111   margin: 1em;
 112 }
 113
 114 form label {
 115   display: inline-block;
 116   width: 10em;
 117 }
 118
 119 #devices {
 120   position: absolute;
 121   bottom: 2em;
 122   right: 1em;
 123 }
 124
 125 #devices div {
 126   padding: 1px 5px;
 127   margin-top: 2px;
 128 }
 129
 130 #devices div.on {
 131   background: #6aff6a;
 132 }
 133
 134 form fieldset {
 135   padding: 0;
 136   border: 0;
 137   margin: 0;
 138   margin-top: 1em;
 139 }
 140
 141 form fieldset legend {
 142   font-weight: bold;
 143   margin: 0;
 144   padding-left: 0;
 145 }