nanofun.css

   1 html, body {
   2   padding: 0;
   3   margin: 0;
   4   font-family: sans-serif;
   5   font-size: 16px;
   6 }
   7
   8 #nanopad {
   9   margin: 0 auto;
  10 }
  11
  12 div.nanotouch {
  13   border: 1px dashed #333;
  14   box-sizing: border-box;
  15   padding: 1.5rem;
  16   position: relative;
  17   width: 10vw;
  18   height: 10vw;
  19   margin: 1vw;
  20   display: inline-block;
  21   overflow: hidden;
  22 }
  23
  24 div.nanotouch.loaded {
  25   background: #9aff9a;
  26   border: 1px solid #4bff4b;
  27 }
  28
  29 div.nanotouch.loaded.playing {
  30   background: #6aff6a;
  31 }
  32
  33 div.nanotouch input[type=file] {
  34   position: absolute;
  35   top: 0;
  36   left: 0;
  37   width: 100%;
  38   height: 100%;
  39   opacity: 0.01;
  40   margin: 0;
  41   cursor: pointer;
  42 }
  43
  44 div.nanotouch input[type=range] {
  45   position: absolute;
  46   bottom: 0;
  47   left: 0;
  48   width: 100%;
  49   padding: 0;
  50   margin: 0;
  51 }
  52
  53 div.nanotouch span.name {
  54   position: absolute;
  55 }
  56
  57 div.nanotouch span.duration {
  58   position: absolute;
  59   bottom: 2ex;
  60   right: 1ex;
  61 }
  62
  63 div#gitclone {
  64   font-size: 12px;
  65   position: absolute;
  66   bottom: 1ex;
  67   right: 1ex;
  68 }