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 }