@theoryofnekomata/piano-keyboard/style.css

Simple piano keyboard in JavaScript

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.8;
}

head {
  display: block !important;
  color: inherit;
}

title {
  display: block !important;
  color: inherit;
  text-align: center;
  font-size: 2em;
  margin-top: 2em;
  margin-bottom: 2em;
  font-weight: 200;
}

body {
  margin: 0;
}

.content-container {
  max-width: 1000px;
  padding: 0 32px;
  margin: 32px auto;
}

.main-content > .lead {
  font-size: 1.5em;
  font-weight: 200;
  text-align: center;
  margin-top: -2em;
  margin-bottom: 3em;
}

.piano {
  height: 65px;
}

.piano.-labeled > .key::after {
  content: attr(data-pitch) attr(data-octave);
}

.piano.-labeled-white > .white.key::after {
  content: attr(data-pitch);
}

.piano.-labeled-black > .black.key::after {
  content: attr(data-pitch);
}

.piano.-labeled-c > .key[data-pitch="C"]::after {
  content: attr(data-pitch) attr(data-octave);
}

.piano.-labeled-octave > .key[data-octave="4"]::after {
  content: attr(data-pitch);
}

.piano.-labeled-c4 > .key[data-pitch="C"][data-octave="4"]::after {
  content: attr(data-pitch);
}

.piano.-labeled-doremi > .key[data-pitch="C"]::after {
  content: 'Do';
}

.piano.-labeled-doremi > .key[data-pitch="D"]::after {
  content: 'Re';
}

.piano.-labeled-doremi > .key[data-pitch="E"]::after {
  content: 'Mi';
}

.piano.-labeled-doremi > .key[data-pitch="F"]::after {
  content: 'Fa';
}

.piano.-labeled-doremi > .key[data-pitch="G"]::after {
  content: 'So';
}

.piano.-labeled-doremi > .key[data-pitch="A"]::after {
  content: 'La';
}

.piano.-labeled-doremi > .key[data-pitch="B"]::after {
  content: 'Ti';
}

.tab-container > .panels > .tabpanel {
  display: none;
  padding: 16px 32px;
}

.tab-container > .panels > .tabpanel.-active {
  display: block;
}

.tab-container > .panels {
  border-top: 1px solid #3f98d0;
}

.tab-items {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  transform: translate3d(0,0,0);
}

.tab-items > .items {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.tab-items > .items > .item {
  display: inline-block;
}

.-vertical > .tab-items > .items > .item {
  display: block;
}

a {
  color: #3f98d0;
}

.tab-item > .link {
  display: block;
  padding: 8px 16px;
  color: #3f98d0;
  border-bottom: 5px solid transparent;
  text-decoration: none;
}

.-vertical .tab-item > .link {
  border-bottom: none;
  border-right: 5px solid transparent;
}

.tab-item.-active > .link {
  /*background-color: #3f98d0;*/
  /*color: #fff;*/
  border-color: #3f98d0;
}

.tab-container.-vertical {
  display: table;
  width: 100%;
}

.tab-container.-vertical > .tabs {
  display: table-cell;
  width: 1px;
  vertical-align: top;
}

.tab-container.-vertical > .panels {
  display: table-cell;
  vertical-align: top;
}

.tab-container.-vertical > .panels {
  border-top: none;
  border-left: 1px solid #3f98d0;
}

.source-code {
  margin-top: 2em;
}

pre {
  padding: 16px;
  background-color: #eee;
}

h1, h2, h3 {
  font-weight: 200;
}

code {
  display: inline-block;
  background-color: #eee;
  color: #cf966f;
  padding: 4px 8px;
}

pre > code {
  display: inline;
  background-color: transparent;
  padding: 0;
}