bosca-ceoil-js/index.css
2019-07-16 03:31:45 -04:00

112 lines
1.6 KiB
CSS

body {
margin: 0px;
}
.shortInput {
width: 65px;
}
.flexInput {
width: 100%;
}
#app {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
#playButton, #effectsButton, #helpButton {
margin-left: 10px;
margin-right: 10px;
}
#playButton, #helpButton {
width: 100px;
}
#effectsMenu {
padding: 5px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
border: 1px solid black;
width: 50px;
overflow: hidden;
background-color: #6D858D;
color: #FFFFFF;
}
td {
border: 1px solid black;
overflow: hidden;
color: transparent;
text-align: center;
min-width: 50px;
}
td.note-C\#, td.note-D\#, td.note-F\#, td.note-G\#, td.note-A\# {
background-color: #2B2197;
}
td.note-C, td.note-D, td.note-E, td.note-F, td.note-G, td.note-A, td.note-B {
background-color: #3B27EE;
}
td.noteLong {
color: inherit;
}
td.active {
background-color: #FFFFC0;
}
td.playing {
background-color: #000000;
}
td.playingLong {
color: #FFFFC0;
background-color: #000000;
}
table td:nth-of-type(4n) {
border-right: 3px solid black;
}
table tr:nth-of-type(12n) {
border-bottom: 3px solid white;
}
.metaWorkspace {
background-color: transparent;
margin-bottom: 10px;
}
#patternWorkspace {
flex-grow: 1;
overflow-y: auto;
width: 100%;
user-select: none;
}
table#pattern {
width: 100%;
}
/* MDL hides these by default. */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
}
#helpModal {
width: 600px;
}