79 lines
1.3 KiB
CSS
79 lines
1.3 KiB
CSS
body {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
.keyboard {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px;
|
|
}
|
|
|
|
.key{
|
|
display: flex;
|
|
border-width: 3px;
|
|
border-radius: 5px;
|
|
justify-content: end;
|
|
padding: 10px;
|
|
color: gray;
|
|
writing-mode: vertical-lr;
|
|
text-orientation: upright;
|
|
align-items: center;
|
|
letter-spacing: -.15em;
|
|
}
|
|
|
|
.key:not([data-note*="#"]),
|
|
.white.key {
|
|
width: 50px;
|
|
height: 200px;
|
|
}
|
|
|
|
.key[data-note*="#"],
|
|
.black.key {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 150px;
|
|
background-color: #111;
|
|
border-color: black;
|
|
top: -6px;
|
|
margin-left: -20px;
|
|
margin-right: -20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.key.pressed {
|
|
padding-left: 13px;
|
|
padding-top: 13px;
|
|
padding-right: 7px;
|
|
padding-bottom: 7px;
|
|
margin-top: 2px;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.key:not([data-note*="#"]).pressed,
|
|
.white.key.pressed {
|
|
margin-left: 1px;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.key[data-note*="#"].pressed,
|
|
.black.key.pressed {
|
|
margin-left: -19px;
|
|
margin-right: -21px;
|
|
}
|
|
|
|
.sliders {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px;
|
|
}
|
|
|
|
.sliders label {
|
|
display: flex;
|
|
flex-flow: column;
|
|
margin: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
[orient="vertical"] {
|
|
-webkit-appearance: slider-vertical;
|
|
} |