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 }