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 .loop {
  63   position: absolute;
  64   left: 0;
  65   bottom: 2ex;
  66   z-index: 10000;
  67 }
  68
  69 div.nanotouch span.name {
  70   position: absolute;
  71 }
  72
  73 div.nanotouch span.duration {
  74   position: absolute;
  75   bottom: 2ex;
  76   right: 1ex;
  77 }
  78
  79 div#gitclone {
  80   font-size: 12px;
  81   position: absolute;
  82   bottom: 1ex;
  83   right: 1ex;
  84 }
  85
  86 form {
  87   margin: 1em;
  88 }
  89
  90 form label {
  91   display: inline-block;
  92   width: 10em;
  93 }
  94
  95 #devices {
  96   position: absolute;
  97   bottom: 2em;
  98   right: 1em;
  99 }
 100
 101 #devices div {
 102   padding: 1px 5px;
 103   margin-top: 2px;
 104 }
 105
 106 #devices div.on {
 107   background: #6aff6a;
 108 }