add drum-machine-react

2025-08-23 18:23:58 -07:00 · 2020-05-26 07:01:12 -07:00
parent 06590ce07f
commit b659e8549a
55 changed files with 18652 additions and 0 deletions
--- a/drum-machine-react/src/DisplayMiddle.css
+++ b/drum-machine-react/src/DisplayMiddle.css
@@ -0,0 +1,147 @@
+#display-middle {
+  flex-basis: 62%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10+ and Edge */
+  user-select: none; /* Standard syntax */
+}
+
+#display-middle-left {
+  flex-basis: 55%;
+  display: flex;
+  flex-direction: row;
+}
+
+#display-middle-right {
+  flex-basis: 45%;
+  display: flex;
+  flex-direction: row;
+}
+
+#display-middle-left-a, #display-middle-left-c {
+  flex-basis: 5%;
+}
+
+#display-middle-left-b {
+  flex-basis: 90%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+#display-middle-right-c {
+  flex-basis: 12%;
+}
+
+#display-middle-right-c {
+  min-width: 15px;
+}
+
+#display-middle-right-e, #display-middle-right-g {
+  flex-basis: 5%;
+}
+
+#display-middle-right-e {
+  min-width: 50px;
+}
+
+#display-middle-right-f {
+  flex-basis: 20%;
+  display: flex;
+  flex-direction: row;
+} 
+
+.volumeToolTipContainer {
+  position: relative;
+  width: 0;
+  height: 0;
+  top: 105%;
+  right: 25px;
+}
+
+.volumeToolTip {
+  background-color: var(--global-first-color);
+  width: 50px;
+  font-size: x-large;
+  font-style: oblique;
+  border-color: black !important;
+  border-width: 2px !important; 
+  border-style: solid; 
+  border-radius: 6px;
+  text-align: center;
+}
+
+#menuScrollTip {
+  font-size: x-large;
+  height: 16px;
+}
+
+@media (orientation: portrait) {
+  #display-middle {
+    flex-basis: 80%;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-around;
+  }
+
+  #display-middle-left {
+    flex-basis: unset;
+  }
+
+  #display-middle-right {
+    flex-basis: unset;
+    justify-content: space-around;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {
+    display: none;
+  }
+
+  #display-middle-right-a, #display-middle-right-c, #display-middle-right-e {
+    display: none;
+  }
+}
+
+@media (orientation: portrait) and (max-device-width: 750px) {
+  #display-middle {
+    margin-top: 10px;
+  }
+}
+
+@media (orientation: landscape) and (max-device-width: 1024px) {
+  #display-middle-left {
+    flex-basis: 65%;
+  }
+
+  #display-middle-right {
+    flex-basis: 35%;
+    justify-content: space-around;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {
+    display: none;
+  }
+
+  #display-middle-right-a, #display-middle-right-c, #display-middle-right-e {
+    display: none;
+  }
+}
+
+@media (orientation: landscape) and (max-device-height: 767px) {
+  #display-middle-left {
+    flex-basis: 60%;
+  }
+
+  #display-middle-right {
+    flex-basis: 40%;
+  }
+}