style/piano.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 body {
   6   font-family: sans-serif;
   7   background-color: #222222;
   8   color: white;
   9   margin: 0;
  10   padding: 0;
  11 }
  12
  13 h1 {
  14   display: none;
  15 }
  16
  17 #keyboard {
  18   margin: auto;
  19   margin-top: 10em;
  20   padding: 0;
  21   border: none;
  22   width: 48em;
  23   height: 20em;
  24   border-collapse: collapse;
  25   border-spacing: 0 0;
  26 }
  27
  28 .key {
  29   transition: background-color 100ms;
  30 }
  31
  32 .key.upper,
  33 .key.black {
  34   border: 1px solid black;
  35   border-bottom: none;
  36   height: 50%;
  37   width: 8.33%;
  38 }
  39
  40 .key.upper.small,
  41 .key.black.small {
  42   width: 4.17%;
  43 }
  44
  45 .key.lower {
  46   border: 1px solid black;
  47   border-top: none;
  48   vertical-align: bottom;
  49   text-align: center;
  50   font-size: 2em;
  51   font-weight: bold;
  52   height: 50%;
  53 }
  54
  55 .key.white {
  56   background-color: white;
  57   color: gray;
  58 }
  59
  60 .key.black {
  61   background-color: black;
  62   color: gray;
  63 }
  64
  65 .key.active {
  66   background-color: yellow;
  67 }
  68
  69 #helptoggle {
  70   position: absolute;
  71   right: 1em;
  72   bottom: 1em;
  73   font-size: 1.5em;
  74 }
  75
  76 #helpdesc {
  77   position: absolute;
  78   left: 0;
  79   right: 0;
  80   top: 10em;
  81   background-color: rgba(204, 204, 204, .95);
  82   color: #222222;
  83   width: 24em;
  84   margin: auto;
  85   padding: 1em;
  86   border: 1px solid black;
  87   border-radius: 1em;
  88   z-index: 10;
  89 }
  90
  91 #helpdesc.hidden {
  92   display: none;
  93 }
  94
  95 #helpdesc > p {
  96   margin-top: 0;
  97   margin-bottom: 1em;
  98 }
  99
 100 #helptable,
 101 #helphide {
 102   margin: auto;
 103   padding: 0;
 104   width: 8em;
 105 }
 106
 107 #helptable {
 108   border: 0;
 109   border-collapse: collapse;
 110   border-spacing: 0 0;
 111 }
 112
 113 #helptable td {
 114   text-align: center;
 115 }
 116
 117 #helphide {
 118   margin-top: 1em;
 119 }
 120
 121 #helphide > button {
 122   width: 8em;
 123 }