458 lines
8.1 KiB
CSS
458 lines
8.1 KiB
CSS
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/play.png');
|
||
}
|
||
|
||
.main .control .switch-play-state.pause {
|
||
background-image: url('../images/icons/pause.png');
|
||
}
|
||
|
||
/* channels */
|
||
.main .control .open-channels-window {
|
||
background-image: url('../images/icons/channels.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/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);
|
||
} |