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 {
  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 span.name {
  42   position: absolute;
  43 }
  44
  45 div.nanotouch span.duration {
  46   position: absolute;
  47   bottom: 1ex;
  48   right: 1ex;
  49 }