piano/css/piano.css

458 lines
8.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

body, html, #content {
margin: 0;
padding: 0;
height: 100%;
background: #262626;
font-family: Helvetica, sans-serif;
}
*, *:before, *:after {
box-sizing: border-box;
cursor: default;
}
*:not(input):not(button):not(select):not(textarea) {
-webkit-user-select: none;
}
:focus {
outline: none;
}
a {
cursor: pointer;
color: inherit;
}
/**
* Animations
*/
@-webkit-keyframes reveal-controls {
0% {
transform: translate(-50%, 10em);
}
100% {
transform: translate(-50%, -50%);
}
}
@-webkit-keyframes reveal-notes {
0% {
transform: translate(0, -20em);
}
100% {
transform: translate(0, 0);
}
}
/**
* Main
*/
.main {
position: relative;
width: calc(100% - 65px);
height: 100%;
margin-left: 65px;
}
.main p {
position: relative;
margin: 0;
}
.main .roll {
display: flex;
height: 100%;
flex-direction: column;
}
/** noteboard **/
.main .noteboard {
position: relative;
overflow: hidden;
flex-basis: 100%;
}
.main .noteboard .inner {
backface-visibility: hidden;
perspective: 1000;
}
/* closed controls */
.main .noteboard .controls {
position: absolute;
top: 50%;
left: 50%;
-webkit-animation: reveal-controls 0.5s ease forwards;
width: 100%;
text-align: center;
transform: translate(-50%, 10em);
}
.main .noteboard .controls img {
display: block;
margin: 0 auto 1em auto;
}
/* notes */
.main .noteboard canvas {
-webkit-animation: reveal-notes 0.5s ease;
}
.main .noteboard .note {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: calc(100% / 52);
border: 1px solid #262626;
}
/* black */
.main .noteboard [data-black="true"] {
width: calc(100% / 52 * 0.6);
border-radius: 5px;
margin-left: calc(-100% / 52 * 0.6 / 2);
z-index: 1;
overflow: hidden;
box-shadow: inset 1000em 1000em rgba(0, 0, 0, 0.2);
}
/* percussion */
.main .noteboard [data-channel="9"] {
border-radius: 20px;
min-height: 10px;
}
/** channel colors **/
[data-channel="0"] {
background-color: hsl(225, 49%, 44%) !important;
}
[data-channel="1"] {
background-color: hsl(22.5, 84%, 56%) !important;
}
[data-channel="2"] {
background-color: hsl(45, 53%, 39%) !important;
}
[data-channel="3"] {
background-color: hsl(67.5, 84%, 56%) !important;
}
[data-channel="4"] {
background-color: hsl(90, 84%, 56%) !important;
}
[data-channel="5"] {
background-color: hsl(112.5, 84%, 56%) !important;
}
[data-channel="6"] {
background-color: hsl(135, 84%, 56%) !important;
}
[data-channel="7"] {
background-color: hsl(157.5, 84%, 56%) !important;
}
[data-channel="8"] {
background-color: hsl(180, 84%, 56%) !important;
}
[data-channel="9"] {
background-color: hsl(202.5, 84%, 56%) !important;
}
[data-channel="10"] {
background-color: hsl(247.5, 84%, 56%) !important;
}
[data-channel="11"] {
background-color: hsl(270, 84%, 56%) !important;
}
[data-channel="12"] {
background-color: hsl(292.5, 84%, 56%) !important;
}
[data-channel="13"] {
background-color: hsl(315, 84%, 56%) !important;
}
[data-channel="14"] {
background-color: hsl(337.5, 84%, 56%) !important;
}
[data-channel="15"] {
background-color: hsl(0, 84%, 56%) !important;
}
/** keyboard **/
.main .keyboard {
width: 100%;
padding-bottom: 13%;
}
.main .key {
position: absolute;
left: 0;
bottom: 0;
background: white;
display: inline-block;
height: 100%;
}
.main [data-black="false"]:not(:last-child) {
border-right: 1px solid #262626;
}
.main [data-black="true"] {
bottom: 40%;
background: #262626;
border: 1px solid #262626;
border-top: 0;
margin-left: calc(-100% / 52 * 0.6 / 2);
width: calc(100% / 52 * 0.6);
height: 60%;
}
.main .key:not([data-channel="false"]) {
box-shadow: inset 1000em 1000em rgba(0, 0, 0, 0.1);
}
.main [data-black="true"][data-channel="-1"] {
box-shadow: inset 1000em 1000em rgba(255, 255, 255, 0.1);
}
/** sidebar controls **/
.main .control {
position: absolute;
top: 0;
left: -65px;
height: 100%;
width: 50px;
padding: 9px;
background: #1e1e1e;
text-align: center;
}
.main .control button {
-webkit-appearance: none;
width: 32px;
height: 32px;
border: 0;
cursor: pointer;
color: white;
background: none;
}
.main .control .switch-play-state, .main .control .open-channels-window,
.main .control .close {
background: center center no-repeat;
text-indent: -10000em;
}
.main .control > * {
display: block;
margin: 0 auto 1em auto;
}
/* playback control */
.main .control .switch-play-state {
background-image: url('../images/icons/sidebar/play.png');
}
.main .control .switch-play-state.pause {
background-image: url('../images/icons/sidebar/pause.png');
}
/* channels */
.main .control .open-channels-window {
background-image: url('../images/icons/sidebar/instruments.png');
}
/* set play speed */
.main .control .selector {
text-align: center;
line-height: 32px;
border: 1px solid white;
border-radius: 3px;
overflow: hidden;
padding: 0;
}
.main .control .selector:hover {
background: rgba(255, 255, 255, 0.05);
}
.main .control .selector:active {
padding: 1px 0 0 0;
}
.main .control .selector:before {
content: '×';
cursor: pointer;
}
/* close opened file */
.main .control .close {
background-image: url('../images/icons/sidebar/close.png');
position: absolute;
left: 9px;
bottom: 0;
}
/** scroll **/
.main .scroll {
position: absolute;
top: 0;
left: -15px;
height: 100%;
background: #1e1e1e;
}
/**
* Channels modal
*/
.vex.vex .channels ul {
list-style: none;
padding: 0;
width: calc(100% + 2em);
margin: 0 0 0 -1em;
}
.vex .channels ul li {
display: block;
width: 100%;
padding: 0 0 0 44px;
background-position: 6px center;
background-repeat: no-repeat;
}
.vex .channels ul li span {
display: block;
height: 100%;
padding: 9px;
background: white;
}
.vex .channels ul li:nth-child(2n) span {
background: #e2e2e2;
}
.vex .channels ul li:hover, .vex .channels ul li:hover span {
box-shadow: inset 1000em 1000em rgba(0, 0, 0, 0.15);
}
/** icons **/
.vex .channels ul li.piano {
background-image: url('../images/icons/instruments/piano.png');
}
.vex .channels ul li.percussive {
background-image: url('../images/icons/instruments/percussive.png');
}
.vex .channels ul li.percussion {
background-image: url('../images/icons/instruments/percussion.png');
}
.vex .channels ul li.effect {
background-image: url('../images/icons/instruments/effect.png');
}
.vex .channels ul li.brass {
background-image: url('../images/icons/instruments/brass.png');
}
.vex .channels ul li.pipe {
background-image: url('../images/icons/instruments/pipe.png');
}
.vex .channels ul li.string {
background-image: url('../images/icons/instruments/string.png');
}
.vex .channels ul li.synth {
background-image: url('../images/icons/instruments/synth.png');
}
.vex .channels ul li.guitar {
background-image: url('../images/icons/instruments/guitar.png');
}
.vex .channels ul li.orchestra {
background-image: url('../images/icons/instruments/orchestra.png');
}
.vex .channels ul li.bass {
background-image: url('../images/icons/instruments/bass.png');
}
.vex .channels ul li.organ {
background-image: url('../images/icons/instruments/organ.png');
}
/**
* UI Components
*/
/** scroll **/
.scroll, ::-webkit-scrollbar {
height: 200px;
width: 15px;
overflow: hidden;
position: relative;
}
::-webkit-scrollbar-track {
background: #262626;
}
.scroll .position, ::-webkit-scrollbar-thumb {
display: block;
width: 100%;
position: absolute;
height: 5%;
min-height: 20px;
transform: translate(0, 50%);
background: rgba(255, 255, 255, 0.15);
}
.scroll .position:hover, ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}