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.01;
  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 span.name {
  63   position: absolute;
  64 }
  65
  66 div.nanotouch span.duration {
  67   position: absolute;
  68   bottom: 2ex;
  69   right: 1ex;
  70 }
  71
  72 div#gitclone {
  73   font-size: 12px;
  74   position: absolute;
  75   bottom: 1ex;
  76   right: 1ex;
  77 }
  78
  79 form {
  80   margin: 1em;
  81 }
  82
  83 form label {
  84   display: inline-block;
  85   width: 10em;
  86 }