First Stable Release

Author: cobyj33

Channel Rack/channelRack.css

@@ -0,0 +1,125 @@
+.dragSelector {
+    cursor: pointer;
+  }
+  
+  #channelRack {
+    min-height: 100px;
+    min-width: 100px;
+    width: 80vh;
+    border: 2px solid black;
+    background-color: darkgray;
+    position: fixed;
+    top: 40%;
+    left: 10%;
+    resize: both;
+    overflow: hidden;
+  }
+  
+  #channelRack .topBar, #channelRack .bottomBar {
+    height: 10%;
+    min-height: 10%;
+    max-height: 10%;
+    width: 100%;
+    background-color: black;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+  
+  #channelRack .main {
+    height: 80%;
+    min-height: 0;
+    /* width: 100%; */
+    position: relative;
+    overflow: scroll;
+    background-color: #222222;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+  }
+
+  #channelRack .main table {
+    /* height: 80%; */
+    /* width: 100%; */
+    display: block;
+    background-color: #666666;
+    table-layout: fixed;
+  }
+  
+  #channelRack .main table tr {
+    height: 33%;
+  }
+  
+  #channelRack .main table tr td {
+    border-right: 1px solid white;
+    border-bottom: 2px solid white;
+  }
+
+  #channelRack .main table tr td:nth-of-type(2n + 1) {
+    background-color: #666666;
+  }
+
+  #channelRack .main table tr td:nth-of-type(2n) {
+    background-color: #444444;
+  }
+
+  #channelRack .main table tr td:nth-of-type(n + 1):hover {
+    background-color: #999999;
+  }
+
+  .endOfRack {
+    background-color: black !important;
+  }
+
+  #channelRack .main table tr td:nth-of-type(1) {
+    position: sticky;
+    left: 0;
+    z-index: 0;
+  }
+  
+  /* #channelRack .main table tr td:hover {
+    background-color: white;
+  } */
+
+  .instrumentName {
+    font-size: 12px;
+    font-weight: bold;
+    color: white;
+    border: 2px double black;
+    background: linear-gradient(to right, black, #222222);
+  }
+
+  .addSoundButton {
+    background-color: transparent;
+    border: none;
+    text-shadow: none;
+  }
+
+  .addSoundButton:hover {
+    transition: color 0.5s, text-shadow 0.5s, transform 0.2s;
+    transform: translateY(2px);
+    text-shadow: 0 0 5px 2px white;
+    color: green;
+  }
+
+  .addSoundButton:active {
+    transition: color 0.2s, border-radius 0.2s;
+    color: lightgreen;
+    border-radius: 5px;
+  }
+
+  #channelRack .autoscroller {
+    position: absolute;
+    height: 80%; 
+    top: 10%;
+    width: min(15%, 50px);
+  }
+
+  #channel-rack-autoscroller-left {
+    left: 0;
+  }
+
+  #channel-rack-autoscroller-right {
+    right: 0;
+  }