body { margin: 0px; } .shortInput { width: 65px; } .flexInput { width: 100%; } .mdc-text-field { margin-left: 10px; } .effect-panel { display: inline; } .effect-panel-popup { display: flex; flex-flow: column; } #app { display: flex; flex-flow: column; height: 100%; width: 100%; } button { margin-left: 10px; margin-right: 10px; } #playButton { 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%; } table#pattern { width: 100%; } .no-select { -moz-user-select: none; -webkit-user-select: none; user-select: none; }