TR-808 | Happy 888 followers

Developer
Size
43,959 Kb
Views
36,432

How do I make an tr-808 | happy 888 followers?

Inspired by: . What is a tr-808 | happy 888 followers? How do you make a tr-808 | happy 888 followers? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.

TR-808 | Happy 888 followers Previews

TR-808 | Happy 888 followers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TR-808 | Happy 888 followers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- fix the blank preview-->
<!-- this static image will be removed by React.js-->
<!-- sadly CodePen previews won't show the rendered pen so I added this screenshot as a fallback and scaled it to especially fit into pen previews--><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/tr-808.jpg" alt="tr-808" style="width:auto;height:80vh;margin:auto;display:block"/> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js'></script>
<script src='http://cdn.rawgit.com/JedWatson/classnames/master/index.js'></script>
<script src='http://cdn.rawgit.com/rofrischmann/inline-style-prefixer/43994c348ee869fcb656c4b79873e5605fba2e3e/dist/inline-style-prefixer.min.js'></script>
<script src='http://codepen.io/pixelass/pen/NxgOPG.js'></script>
<script src='http://cdn.rawgit.com/Tonejs/Tone.js/9bf00eb49be5b97b7446c833657bcd492c04b208/build/Tone.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

TR-808 | Happy 888 followers - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400);
.codepen .ScaleToggler { margin-top: 1px;
}
.codepen .ScaleToggler .Toggle .labels div:before { content: ''; position: absolute; top: 50%; left: 100%; margin-left: -3px; height: 1px; width: 4px; background: #ccc;
}
.codepen .Scale { position: relative;
}
.codepen .Scale:before { content: ''; position: absolute; top: 50%; right: 100%; height: 1px; width: 7px; margin-right: -4px; background: #ccc;
}
.codepen .Scale:after { content: ''; position: absolute; top: 50%; right: 100%; height: 1px; width: 8px; background: #ccc; margin-right: 3px; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
.codepen .Scale:nth-child(1):after { -webkit-transform: rotate(-65deg); transform: rotate(-65deg); width: 15px;
}
.codepen .Scale:nth-child(2):after { -webkit-transform: rotate(-35deg); transform: rotate(-35deg); width: 9px;
}
.codepen .Scale:nth-child(3):after { -webkit-transform: rotate(25deg); transform: rotate(25deg); width: 8px;
}
.codepen .Scale:nth-child(4):after { -webkit-transform: rotate(59deg); transform: rotate(59deg); width: 13px;
}
.codepen .Scale .ScaleMeasure { position: relative; border-radius: 2px; height: 12px; line-height: 10px; color: #111;
}
.codepen .Scale .ScaleMeasure:before { content: ''; background: #ccc; position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; border-radius: 2px; border-top-right-radius: inherit; border-bottom-right-radius: inherit;
}
.codepen .Scale:nth-child(1) .ScaleMeasure:last-child:after, .codepen .Scale:nth-child(2) .ScaleMeasure:last-child:after { content: ''; background: #252527; position: absolute; top: 0; bottom: 0; right: 0; z-index: 2; width: 6px;
}
.codepen .Scale .note { position: relative; z-index: 1;
}
.codepen .Button { background: #fff; color: #111; border-radius: 2px; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.2) 70%); background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.2) 70%); box-shadow: 0 4px 0 0 #999999, 0 3px 0 3px #111, 0 5px 0 3px #111, 0 0 0 2px #fff inset, 0 -2px 0 3px #999999 inset;
}
.codepen .Button * { pointer-events: none;
}
.codepen .Button > div { margin-top: -6px;
}
.codepen .Button:active { -webkit-transform: translateY(4px); transform: translateY(4px); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); box-shadow: 0 1px 0 0 #999999, 0 0 0 3px #111, 0 1px 0 3px #111, 0 0 0 2px #fff inset, 0 -2px 0 3px #999999 inset;
}
.codepen .Button.onOffButton { position: absolute; top: 28px; left: 72px; height: 16px !important; width: 25px !important; min-width: 20px !important; background-color: #111; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.05) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.05) 70%); background-image: linear-gradient(to top, rgba(255, 255, 255, 0.05) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.05) 70%); box-shadow: 0 3px 0 0 #121212, 0 2px 0 2px #111, 0 3px 0 2px #111;
}
.codepen .Button.onOffButton:active { -webkit-transform: translateY(3px); transform: translateY(3px); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); box-shadow: 0 1px 0 0 #121212, 0 0 0 2px #111, 0 -1px 0 1px #111;
}
.codepen .Instrument { box-shadow: 1px 0 0 #ccc;
}
.codepen .Instrument:last-child { box-shadow: none;
}
.codepen .Instrument .InstrumentName { background: #fff; color: #111; margin: 2px 2px 2px 3px; padding: 4px 3px; text-align: center; line-height: 1; border-radius: 3px; white-space: nowrap;
}
.codepen .Step { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 12px, rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 255, 0.2) 15px, rgba(0, 0, 0, 0.1) 20px, rgba(255, 255, 255, 0.2) calc(100% - 5px), rgba(255, 255, 255, 0.1) calc(100% - 5px), rgba(0, 0, 0, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 12px, rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 255, 0.2) 15px, rgba(0, 0, 0, 0.1) 20px, rgba(255, 255, 255, 0.2) calc(100% - 5px), rgba(255, 255, 255, 0.1) calc(100% - 5px), rgba(0, 0, 0, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3)); border-radius: 2px; box-shadow: 0 1px 0 3px #111; cursor: pointer;
}
.codepen .Step:active { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.3) 14px, rgba(0, 0, 0, 0.1) 17px, rgba(255, 255, 255, 0.2) 17px, rgba(0, 0, 0, 0.1) 28px, rgba(255, 255, 255, 0.2) calc(100% - 2px), rgba(255, 255, 255, 0.1) calc(100% - 2px), rgba(0, 0, 0, 0.2) calc(100% - 1px), rgba(0, 0, 0, 0.3)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.3) 14px, rgba(0, 0, 0, 0.1) 17px, rgba(255, 255, 255, 0.2) 17px, rgba(0, 0, 0, 0.1) 28px, rgba(255, 255, 255, 0.2) calc(100% - 2px), rgba(255, 255, 255, 0.1) calc(100% - 2px), rgba(0, 0, 0, 0.2) calc(100% - 1px), rgba(0, 0, 0, 0.3));
}
.codepen .Step:active .StepLight { margin-top: 2px;
}
.codepen .Step:active.selected .glow { box-shadow: 0 0 3px 2px orange;
}
.codepen .Step.selected .glow { box-shadow: 0 0 2px 1px red, 0 0 3px 2px orange, 0 0 4px 1px rgba(0, 0, 0, 0.8);
}
.codepen .Step.active .glow { box-shadow: 0 0 3px 2px orange, 0 0 3px 3px red, 0 0 2px 2px rgba(0, 0, 0, 0.7);
}
.codepen .Step .StepLight { box-shadow: 0 1px 0 1px #111;
}
.codepen .Step .count { color: #fff;
}
.codepen .Step .rhythm { color: #111; background: #ccc;
}
.codepen .Step:last-child .rhythm:before { content: ''; position: absolute; bottom: 100%; right: 0; height: 6px; width: 6px; border-radius: 100%; box-shadow: 2px 2px 0 #ccc;
}
.codepen .Step:first-child .rhythm:before { content: ''; position: absolute; bottom: 100%; left: 0; height: 6px; width: 6px; border-radius: 100%; box-shadow: -2px 2px 0 #ccc;
}
.codepen .Step._colored.red { color: #AE63E4;
}
.codepen .Step._colored.orange { color: #0ebeff;
}
.codepen .Step._colored.yellow { color: #47CF73;
}
.codepen .Step._colored.white { color: #fff;
}
.codepen .Poti .PotiIndicator:before { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 2px; background: #ccc; margin-bottom: -1px; border-radius: 100%;
}
.codepen .Poti .PotiIndicator._numbered:before { content: normal;
}
.codepen .Poti.measures > label { margin-top: -1em; padding-bottom: 2em;
}
.codepen .Poti.measures > label div:last-child { font-size: 1.3em;
}
.codepen .Poti.measures .PotiIndicator:nth-child(1) .label { padding-right: 3em;
}
.codepen .Poti.pattern-write { vertical-align: top;
}
.codepen .Poti.pattern-write > label { padding-bottom: 1.2em;
}
.codepen .Poti.pattern-write > label > div:first-child { color: #fff; box-shadow: 0 0 0 1px; padding: 1px; line-height: 1; position: relative;
}
.codepen .Poti.pattern-write > label > div:first-child:before { content: ''; position: absolute; top: 50%; right: 100%; height: 20em; width: 4em; border: 1px solid; border-right: 0; border-bottom: 0;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(1) .label { white-space: nowrap; margin-left: 4.3em; margin-top: -5em; box-shadow: 0 0 0 1px; padding: 1px; line-height: 1; color: #fff;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(1) .label:before { content: ''; position: absolute; bottom: 50%; right: 100%; height: 8em; width: 2em; border: 1px solid; border-right: 0;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(2) .label { margin-left: 1em; margin-top: 1em; color: #fff; text-transform: initial !important;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(2) .label:before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 2.5em; background: currentColor;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(2) .label:after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2.8em; height: 1px; margin-bottom: 2.5em; background: currentColor;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(3) .label { margin-left: 1em; margin-top: 1em; color: #fff; text-transform: initial !important;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(3) .label:before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: .5em; background: currentColor;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(3) .label:after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 0.5em; margin-bottom: 0.5em; margin-left: -1em; background: currentColor;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(4) .label { margin-left: -3em; margin-top: 1.5em; box-shadow: 0 0 0 1px; padding: 1px; line-height: 1;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(4) .label:before { content: ''; position: absolute; top: 50%; right: 100%; height: 0.7em; width: 2.6em; border: 1px solid; border-right: 0; border-bottom: 0;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(5) .label { margin-left: -1em; margin-top: 0.5em; color: #0ebeff;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(5) .label:after { content: ''; position: absolute; left: 100%; bottom: 50%; width: 4em; height: 1px; background: currentColor;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(6) .label { margin-top: 1.5em; margin-left: -0.5em; color: #0ebeff;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(6) .label:before { content: ''; position: absolute; right: 50%; top: 100%; width: 6em; height: 11.6em; border-right: 1px solid; border-bottom: 1px solid;
}
.codepen .Poti.pattern-write .PotiIndicator:nth-child(6) .label:after { content: ''; position: absolute; left: 100%; bottom: 50%; width: 2.2em; height: 1px; background: currentColor;
}
.codepen .Poti.instrument-select { margin: 0 0 20px;
}
.codepen .Poti.instrument-select > label div:first-child { color: #fff; position: relative;
}
.codepen .Poti.instrument-select > label div:first-child:before { content: ''; position: absolute; top: 50%; right: 100%; width: 10em; height: 1px; background: currentColor;
}
.codepen .Poti.instrument-select > label div:last-child { color: #0ebeff; box-shadow: 0 0 0 1px #0ebeff; padding: 2px 10px; line-height: 1; margin: 2px auto; position: relative;
}
.codepen .Poti.instrument-select > label div:last-child:before { content: ''; position: absolute; top: 50%; right: 100%; height: 5.5em; width: 3em; border: 1px solid; border-right: 0; border-bottom: 0;
}
.codepen .Poti.instrument-select .PotiIndicator { color: #111;
}
.codepen .Poti.instrument-select .PotiIndicator:before { background: #0ebeff;
}
.codepen .Poti.instrument-select .PotiIndicator > .label { background: #fff; border-radius: 2px; padding: 1px; line-height: 1; font-weight: bold;
}
.codepen .Poti.instrument-select .PotiIndicator > .number { color: #0ebeff; font-weight: bold;
}
.codepen .Poti._ring { margin-top: 40px;
}
.codepen .Poti._ring .\@decorator:before { content: ''; height: 50%; width: 50%; padding: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 100%; box-shadow: 0 0 0 12px #ccc; pointer-events: none;
}
.codepen .Poti._ring .PotiIndicator > .label { color: #111; font-weight: bolder; margin-top: 4px;
}
.codepen .Poti .PotiKnob { z-index: 2; box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.1) inset, 0 0 0 2px #111 inset; margin-top: -5px;
}
.codepen .Poti .PotiKnob:before { content: ''; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 100%; width: 110%; padding: 4px 0; border-radius: 100%; box-shadow: 0 2px 0 1px #111, 0 2px 0 6px #1E1E1E, 0 2px 0 7px #111; background-color: #1E1E1E; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, transparent 10px), -webkit-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.2) 40%, transparent 70%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0, transparent 10px), linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.2) 40%, transparent 70%);
}
.codepen .Poti .PotiKnob:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 100%; background-color: #1E1E1E; background-image: -webkit-radial-gradient(closest-corner, rgba(17, 17, 17, 0.2) 10%, rgba(17, 17, 17, 0.1) 60%, rgba(255, 255, 255, 0.1) 80%); background-image: radial-gradient(closest-corner, rgba(17, 17, 17, 0.2) 10%, rgba(17, 17, 17, 0.1) 60%, rgba(255, 255, 255, 0.1) 80%); box-shadow: inherit;
}
.codepen .Poti .PotiMarker { z-index: 2; color: #AE63E4; font-size: 6px; will-change: transform;
}
.codepen .Poti._colored .PotiIndicator:before { background: #ccc; height: 10px; margin-bottom: 7px; border-radius: 0;
}
.codepen .Poti._colored .PotiKnob { z-index: 2; box-shadow: 0 0 0 2px #1E1E1E inset; margin-top: -5px;
}
.codepen .Poti._colored .PotiKnob:before { height: 120%; width: 110%; padding: 1px; box-shadow: 0 1px 0 1px #111; top: 0;
}
.codepen .Poti._colored .PotiKnob:after { background-color: inherit;
}
.codepen .Poti._colored .PotiMarker { z-index: 2; color: #111; font-size: 6px;
}
.codepen .Poti._colored.orange .PotiKnob { color: #0ebeff;
}
.codepen .Poti._colored.white .PotiKnob { color: #fff;
}
.codepen.Eight_0_Eight { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; margin: auto; padding: 10px 30px; background-color: #28282B; background-image: -webkit-linear-gradient(left bottom, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 100px), -webkit-linear-gradient(left top, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0) 300px), -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0.5) 1px, transparent 100px), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 3px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); background-image: linear-gradient(to right top, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 100px), linear-gradient(to right bottom, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0) 300px), linear-gradient(to left top, rgba(0, 0, 0, 0.5) 1px, transparent 100px), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 3px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); box-shadow: 0 20px 0 #181819, 0 30px 0 #141414, 0 -10px 0 #1E1E1E; color: #ccc;
}
.codepen.Eight_0_Eight:before, .codepen.Eight_0_Eight:after { content: ''; position: absolute; z-index: 2; top: -5px; bottom: 5px; width: 35px; background-color: #111; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); box-shadow: 0 30px 0 #151515, 0 40px 0 #111, 0 -10px 0 #111;
}
.codepen.Eight_0_Eight:before { left: -30px; border-radius: 3px 2px 2px 3px;
}
.codepen.Eight_0_Eight:after { right: -30px; border-radius: 2px 3px 3px 2px;
}
.codepen .title-area .primary { color: #0ebeff; text-shadow: -2px -2px 0 #28282B, -2px -1px 0 #28282B, -2px 0px 0 #28282B, -2px 1px 0 #28282B, -2px 2px 0 #28282B, -1px -2px 0 #28282B, -1px -1px 0 #28282B, -1px 0px 0 #28282B, -1px 1px 0 #28282B, -1px 2px 0 #28282B, 0px -2px 0 #28282B, 0px -1px 0 #28282B, 0px 0px 0 #28282B, 0px 1px 0 #28282B, 0px 2px 0 #28282B, 1px -2px 0 #28282B, 1px -1px 0 #28282B, 1px 0px 0 #28282B, 1px 1px 0 #28282B, 1px 2px 0 #28282B, 2px -2px 0 #28282B, 2px -1px 0 #28282B, 2px 0px 0 #28282B, 2px 1px 0 #28282B, 2px 2px 0 #28282B;
}
.codepen .title-area .underline { color: #0ebeff;
}
.codepen .title-area .secondary { color: #ccc; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-size: 0.5em;
}
.codepen .top { border-top: 5px solid #ccc; border-bottom: 5px solid #ccc; padding: 5px 0; margin: 10px;
}
.codepen .top > .left,
.codepen .top > .right { box-shadow: 2px 0 0 #ccc; margin-right: 5px;
}
.codepen .bottom { padding: 5px 0; margin: 10px;
}
.codepen .LoadingBuffers { position: absolute; z-index: 999; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2em; max-width: 400px; background: #fff; color: #111; box-shadow: 0 2px 4px 3px rgba(0, 0, 0, 0.4); border-radius: 2px; font-family: 'Josefin Sans';
}
.codepen .LoadingBuffers > div:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 20px;
}
.codepen .Loader { height: 50px; width: 50px; position: relative;
}
.codepen .Loader div { position: absolute; top: 50%; left: 50%; height: 10px; width: 10px; margin: -5px; border-radius: 100%; -webkit-animation: Loader 2s ease-out infinite; animation: Loader 2s ease-out infinite;
}
.codepen .Loader div:nth-child(1) { background: #AE63E4;
}
.codepen .Loader div:nth-child(2) { background: #0ebeff; -webkit-animation-delay: -0.5s; animation-delay: -0.5s;
}
.codepen .Loader div:nth-child(3) { background: #1E1E1E; -webkit-animation-delay: -1s; animation-delay: -1s;
}
@-webkit-keyframes Loader { 0% { -webkit-transform: rotate(0deg) translateY(20px); transform: rotate(0deg) translateY(20px); } 30% { -webkit-transform: rotate(180deg) translateY(10px); transform: rotate(180deg) translateY(10px); } 50% { -webkit-transform: rotate(300deg) translateY(25px); transform: rotate(300deg) translateY(25px); } 100% { -webkit-transform: rotate(360deg) translateY(20px); transform: rotate(360deg) translateY(20px); }
}
@keyframes Loader { 0% { -webkit-transform: rotate(0deg) translateY(20px); transform: rotate(0deg) translateY(20px); } 30% { -webkit-transform: rotate(180deg) translateY(10px); transform: rotate(180deg) translateY(10px); } 50% { -webkit-transform: rotate(300deg) translateY(25px); transform: rotate(300deg) translateY(25px); } 100% { -webkit-transform: rotate(360deg) translateY(20px); transform: rotate(360deg) translateY(20px); }
}
.codepen .Logo { color: #0ebeff;
}
.codepen .Toggle { background-color: #1d1d1d; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.2) 90%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.2) 90%); box-shadow: 0 0 0 2px #111, 0 1px 3px 3px rgba(255, 255, 255, 0.05), 0 2px 8px 1px rgba(255, 255, 255, 0.05);
}
.codepen .Toggle .ToggleSwitch { color: #1E1E1E; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 100% 2px; box-shadow: 0 0 1px 1px #111; will-change: transform;
}
.codepen .Toggle._horizontal .ToggleSwitch { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 2px 100%;
}
.codepen .Toggle._horizontal .stem { border-radius: 0 10px 10px 0; background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.codepen .Toggle._horizontal .cap { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 2px 100%;
}
.codepen .Toggle .stem { background: #b3b3b3; visibility: visible; border-radius: 0 0 10px 10px; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), linear-gradient(to right, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.codepen .Toggle._stem { border-radius: 10px;
}
.codepen .Toggle._stem .ToggleSwitch { visibility: hidden;
}
.codepen .Toggle._stem:before { pointer-events: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ''; height: 10px; width: 10px; background: #b3b3b3; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; visibility: visible; border-radius: 10px; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.codepen .Toggle._stem._horizontal:before { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.codepen .Toggle .cap { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 100% 2px; border-radius: 100%; background-color: white; visibility: visible; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2) inset;
}
.codepen .tap-area { background: #ccc; color: #111; margin-bottom: 6px; margin-left: 6px; border-radius: 2px 2px 2px 0;
}
.codepen .main-control { background: #ccc; color: #111; margin-bottom: 6px; margin-right: 54px; border-radius: 2px 2px 0 2px;
}
.codepen .tempoBoxBorder { pointer-events: none; position: absolute; top: 30px; left: 10px; height: 2px; width: 110px; background: #ccc;
}
.codepen .tempoBoxBorder:before, .codepen .tempoBoxBorder:after { content: ''; position: absolute; background: inherit;
}
.codepen .tempoBoxBorder:before { bottom: 0; right: 0; width: 2px; height: 40px;
}
.codepen .tempoBoxBorder:after { bottom: 38px; left: 100%; height: 2px; width: 110px;
}
.codepen .Screws { pointer-events: none; visibility: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.codepen .Screws .Screw { visibility: visible; position: absolute; top: 12px; left: 10px; height: 12px; width: 12px; border-radius: 100%; box-shadow: 0 1px 0 1px #121101, 0 2px 1px 1px rgba(0, 0, 0, 0.5), -3px 5px 0 -1px rgba(0, 0, 0, 0.4) inset, 2px 4px 0 -1px rgba(255, 255, 255, 0.2) inset, -2px 0 0 0 rgba(0, 0, 0, 0.5) inset; background-color: #1E1E1E; background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1)); background-image: radial-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.3)), linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
}
.codepen .Screws .Screw:before, .codepen .Screws .Screw:after { content: ''; height: 2px; width: 6px; margin: -1px -3px; position: absolute; top: 50%; left: 50%; background: black; box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2) inset; border-radius: 100%;
}
.codepen .Screws .Screw:after { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.codepen .Screws .Screw:nth-child(1) { -webkit-transform: translate(0, -5px); transform: translate(0, -5px);
}
.codepen .Screws .Screw:nth-child(2) { -webkit-transform: translate(200px, 0); transform: translate(200px, 0);
}
.codepen .Screws .Screw:nth-child(3) { -webkit-transform: translate(900px, 0); transform: translate(900px, 0);
}
.codepen .Screws .Screw:nth-child(4) { -webkit-transform: translate(1010px, -5px); transform: translate(1010px, -5px);
}
.codepen .Screws .Screw:nth-child(5) { -webkit-transform: translate(70px, 5px); transform: translate(70px, 5px);
}
.codepen .Screws .Screw:nth-child(6) { -webkit-transform: translate(70px, 40px); transform: translate(70px, 40px);
}
.codepen .Screws .Screw:nth-child(7) { -webkit-transform: translate(0, 200px); transform: translate(0, 200px);
}
.codepen .Screws .Screw:nth-child(8) { -webkit-transform: translate(1010px, 200px); transform: translate(1010px, 200px);
}
.codepen .Screws .Screw:nth-child(9) { -webkit-transform: translate(1010px, 340px); transform: translate(1010px, 340px);
}
.codepen .Screws .Screw:nth-child(10) { -webkit-transform: translate(850px, 340px); transform: translate(850px, 340px);
}
.codepen .Screws .Screw:nth-child(11) { -webkit-transform: translate(500px, 340px); transform: translate(500px, 340px);
}
.codepen .Screws .Screw:nth-child(12) { -webkit-transform: translate(200px, 286px); transform: translate(200px, 286px);
}
.codepen .Screws .Screw:nth-child(13) { top: auto; bottom: 15px; -webkit-transform: translate(100px, 0); transform: translate(100px, 0);
}
.codepen .Screws .Screw:nth-child(14) { top: auto; bottom: 15px; -webkit-transform: translate(900px, 0); transform: translate(900px, 0);
}
.codepen .Screws .Screw:nth-child(15) { -webkit-transform: translate(500px, 0); transform: translate(500px, 0);
}
.codepen .Screws .Screw:nth-child(16) { top: auto; bottom: 15px; -webkit-transform: translate(500px, 0); transform: translate(500px, 0);
}
.codepen .Arrow { position: relative; padding: 2px 8px; background: #28282B; color: #ccc; font-family: sans-serif; text-transform: uppercase; line-height: 1; font-size: 8px; white-space: nowrap; margin-top: 20px; z-index: 2;
}
.codepen .Arrow.grey { background: #ccc; color: #28282B; margin: 0 4px 0 10px;
}
.codepen .Arrow.grey.right:after { border-left-color: #ccc;
}
.codepen .Arrow.grey.left:after { border-right-color: #ccc;
}
.codepen .Arrow.basic-rhythm { left: 80px;
}
.codepen .Arrow:before, .codepen .Arrow:after { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.codepen .Arrow:before { height: 4px; width: 6px; background: inherit;
}
.codepen .Arrow:after { border: 6px solid transparent;
}
.codepen .Arrow.right:before { left: 100%;
}
.codepen .Arrow.right:after { border-left-color: #28282B; border-right: 0; left: calc(100% + 5px);
}
.codepen .Arrow.left:before { right: 100%;
}
.codepen .Arrow.left:after { border-right-color: #28282B; border-left: 0; right: calc(100% + 5px);
}
.codepen .onOfflabels { position: absolute; top: 10px; left: 75px; width: 60px; height: 40px; font-size: 6px; line-height: 1; font-family: sans-serif; text-transform: uppercase;
}
.codepen .onOfflabels div { position: absolute; width: 20px;
}
.codepen .onOfflabels div:nth-child(1) { top: 0; left: 0;
}
.codepen .onOfflabels div:nth-child(2) { top: 50%; right: 0;
}
.codepen .onOfflabels div:nth-child(2):before { content: ''; position: absolute; bottom: 0; right: 100%; height: 1px; width: 10px; background: currentColor;
}
.codepen .onOfflabels div:nth-child(2):after { content: ''; position: absolute; bottom: 0; right: 100%; height: 3px; width: 6px; margin-right: 2px; background: currentColor; border-radius: 1px 1px 0 0;
}
.codepen .onOfflabels div:nth-child(3) { bottom: 0; right: 0;
}
.codepen .onOfflabels div:nth-child(3):before { content: ''; position: absolute; bottom: 0; right: 100%; height: 1px; width: 10px; background: currentColor;
}
.codepen .onOfflabels div:nth-child(3):after { content: ''; position: absolute; bottom: 0; right: 100%; height: 5px; width: 6px; margin-right: 2px; background: currentColor; border-radius: 1px 1px 0 0;
}
.codepen .FAKECLEAR { position: absolute; height: 30px; width: 80px; top: 189px; left: 60px; font-size: 6px; line-height: 1; font-family: sans-serif; text-transform: uppercase;
}
.codepen .FAKECLEAR > div { position: absolute; text-align: center; padding: 2px 4px; max-width: 30px;
}
.codepen .FAKECLEAR > div:nth-child(1) { bottom: 50%; left: 0; color: #fff;
}
.codepen .FAKECLEAR > div:nth-child(2) { top: 50%; left: 0; color: #fff;
}
.codepen .FAKECLEAR > div:nth-child(3) { bottom: 50%; right: 0; color: #0ebeff;
}
.codepen .FAKECLEAR .FAKECLEARBUTTON { top: 50%; left: 50%; height: 12px; width: 12px; padding: 0; border-radius: 100%; background: #AE63E4; box-shadow: 0 3px 0 1px #683b89, 0 5px 0 2px #ccc; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.codepen .FAKECLEAR .FAKECLEARBUTTON:before { content: ''; height: 2em; width: 1px; position: absolute; bottom: 100%; left: 50%; background: #fff;
}
.codepen .FAKECLEAR .FAKECLEARBUTTON:after { content: ''; width: 7.2em; height: 1px; position: absolute; right: 100%; top: 50%; background: #fff;
}
.codepen .LightLabel { font-size: 6px; line-height: 1; font-family: sans-serif; color: #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.roland .ScaleToggler { margin-top: 1px;
}
.roland .ScaleToggler .Toggle .labels div:before { content: ''; position: absolute; top: 50%; left: 100%; margin-left: -3px; height: 1px; width: 4px; background: #979D9D;
}
.roland .Scale { position: relative;
}
.roland .Scale:before { content: ''; position: absolute; top: 50%; right: 100%; height: 1px; width: 7px; margin-right: -4px; background: #979D9D;
}
.roland .Scale:after { content: ''; position: absolute; top: 50%; right: 100%; height: 1px; width: 8px; background: #979D9D; margin-right: 3px; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
.roland .Scale:nth-child(1):after { -webkit-transform: rotate(-65deg); transform: rotate(-65deg); width: 15px;
}
.roland .Scale:nth-child(2):after { -webkit-transform: rotate(-35deg); transform: rotate(-35deg); width: 9px;
}
.roland .Scale:nth-child(3):after { -webkit-transform: rotate(25deg); transform: rotate(25deg); width: 8px;
}
.roland .Scale:nth-child(4):after { -webkit-transform: rotate(59deg); transform: rotate(59deg); width: 13px;
}
.roland .Scale .ScaleMeasure { position: relative; border-radius: 2px; height: 12px; line-height: 10px; color: #121611;
}
.roland .Scale .ScaleMeasure:before { content: ''; background: #979D9D; position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; border-radius: 2px; border-top-right-radius: inherit; border-bottom-right-radius: inherit;
}
.roland .Scale:nth-child(1) .ScaleMeasure:last-child:after, .roland .Scale:nth-child(2) .ScaleMeasure:last-child:after { content: ''; background: #2f2c2b; position: absolute; top: 0; bottom: 0; right: 0; z-index: 2; width: 6px;
}
.roland .Scale .note { position: relative; z-index: 1;
}
.roland .Button { background: #F4F4D1; color: #121611; border-radius: 2px; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.2) 70%); background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.2) 70%); box-shadow: 0 4px 0 0 #92927d, 0 3px 0 3px #121611, 0 5px 0 3px #121611, 0 0 0 2px #F4F4D1 inset, 0 -2px 0 3px #92927d inset;
}
.roland .Button * { pointer-events: none;
}
.roland .Button > div { margin-top: -6px;
}
.roland .Button:active { -webkit-transform: translateY(4px); transform: translateY(4px); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); box-shadow: 0 1px 0 0 #92927d, 0 0 0 3px #121611, 0 1px 0 3px #121611, 0 0 0 2px #F4F4D1 inset, 0 -2px 0 3px #92927d inset;
}
.roland .Button.onOffButton { position: absolute; top: 28px; left: 72px; height: 16px !important; width: 25px !important; min-width: 20px !important; background-color: #121611; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.05) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.05) 70%); background-image: linear-gradient(to top, rgba(255, 255, 255, 0.05) 2%, rgba(0, 0, 0, 0.1) 20%, rgba(255, 255, 255, 0.05) 70%); box-shadow: 0 3px 0 0 #111211, 0 2px 0 2px #121611, 0 3px 0 2px #121611;
}
.roland .Button.onOffButton:active { -webkit-transform: translateY(3px); transform: translateY(3px); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 5%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%); box-shadow: 0 1px 0 0 #111211, 0 0 0 2px #121611, 0 -1px 0 1px #121611;
}
.roland .Instrument { box-shadow: 1px 0 0 #979D9D;
}
.roland .Instrument:last-child { box-shadow: none;
}
.roland .Instrument .InstrumentName { background: #F4F4D1; color: #121611; margin: 2px 2px 2px 3px; padding: 4px 3px; text-align: center; line-height: 1; border-radius: 3px; white-space: nowrap;
}
.roland .Step { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 12px, rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 255, 0.2) 15px, rgba(0, 0, 0, 0.1) 20px, rgba(255, 255, 255, 0.2) calc(100% - 5px), rgba(255, 255, 255, 0.1) calc(100% - 5px), rgba(0, 0, 0, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 12px, rgba(0, 0, 0, 0.1) 15px, rgba(255, 255, 255, 0.2) 15px, rgba(0, 0, 0, 0.1) 20px, rgba(255, 255, 255, 0.2) calc(100% - 5px), rgba(255, 255, 255, 0.1) calc(100% - 5px), rgba(0, 0, 0, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3)); border-radius: 2px; box-shadow: 0 1px 0 3px #121611; cursor: pointer;
}
.roland .Step:active { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.3) 14px, rgba(0, 0, 0, 0.1) 17px, rgba(255, 255, 255, 0.2) 17px, rgba(0, 0, 0, 0.1) 28px, rgba(255, 255, 255, 0.2) calc(100% - 2px), rgba(255, 255, 255, 0.1) calc(100% - 2px), rgba(0, 0, 0, 0.2) calc(100% - 1px), rgba(0, 0, 0, 0.3)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.3) 14px, rgba(0, 0, 0, 0.1) 17px, rgba(255, 255, 255, 0.2) 17px, rgba(0, 0, 0, 0.1) 28px, rgba(255, 255, 255, 0.2) calc(100% - 2px), rgba(255, 255, 255, 0.1) calc(100% - 2px), rgba(0, 0, 0, 0.2) calc(100% - 1px), rgba(0, 0, 0, 0.3));
}
.roland .Step:active .StepLight { margin-top: 2px;
}
.roland .Step:active.selected .glow { box-shadow: 0 0 3px 2px orange;
}
.roland .Step.selected .glow { box-shadow: 0 0 2px 1px red, 0 0 3px 2px orange, 0 0 4px 1px rgba(0, 0, 0, 0.8);
}
.roland .Step.active .glow { box-shadow: 0 0 3px 2px orange, 0 0 3px 3px red, 0 0 2px 2px rgba(0, 0, 0, 0.7);
}
.roland .Step .StepLight { box-shadow: 0 1px 0 1px #121611;
}
.roland .Step .count { color: #F4F4D1;
}
.roland .Step .rhythm { color: #121611; background: #979D9D;
}
.roland .Step:last-child .rhythm:before { content: ''; position: absolute; bottom: 100%; right: 0; height: 6px; width: 6px; border-radius: 100%; box-shadow: 2px 2px 0 #979D9D;
}
.roland .Step:first-child .rhythm:before { content: ''; position: absolute; bottom: 100%; left: 0; height: 6px; width: 6px; border-radius: 100%; box-shadow: -2px 2px 0 #979D9D;
}
.roland .Step._colored.red { color: #FD4D20;
}
.roland .Step._colored.orange { color: #FE7F00;
}
.roland .Step._colored.yellow { color: #FAEF1B;
}
.roland .Step._colored.white { color: #F4F4D1;
}
.roland .Poti .PotiIndicator:before { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 2px; background: #979D9D; margin-bottom: -1px; border-radius: 100%;
}
.roland .Poti .PotiIndicator._numbered:before { content: normal;
}
.roland .Poti.measures > label { margin-top: -1em; padding-bottom: 2em;
}
.roland .Poti.measures > label div:last-child { font-size: 1.3em;
}
.roland .Poti.measures .PotiIndicator:nth-child(1) .label { padding-right: 3em;
}
.roland .Poti.pattern-write { vertical-align: top;
}
.roland .Poti.pattern-write > label { padding-bottom: 1.2em;
}
.roland .Poti.pattern-write > label > div:first-child { color: #F4F4D1; box-shadow: 0 0 0 1px; padding: 1px; line-height: 1; position: relative;
}
.roland .Poti.pattern-write > label > div:first-child:before { content: ''; position: absolute; top: 50%; right: 100%; height: 20em; width: 4em; border: 1px solid; border-right: 0; border-bottom: 0;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(1) .label { white-space: nowrap; margin-left: 4.3em; margin-top: -5em; box-shadow: 0 0 0 1px; padding: 1px; line-height: 1; color: #F4F4D1;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(1) .label:before { content: ''; position: absolute; bottom: 50%; right: 100%; height: 8em; width: 2em; border: 1px solid; border-right: 0;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(2) .label { margin-left: 1em; margin-top: 1em; color: #F4F4D1; text-transform: initial !important;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(2) .label:before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 2.5em; background: currentColor;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(2) .label:after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2.8em; height: 1px; margin-bottom: 2.5em; background: currentColor;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(3) .label { margin-left: 1em; margin-top: 1em; color: #F4F4D1; text-transform: initial !important;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(3) .label:before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: .5em; background: currentColor;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(3) .label:after { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 0.5em; margin-bottom: 0.5em; margin-left: -1em; background: currentColor;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(4) .label { margin-left: -3em; margin-top: 1.5em; box-shadow: 0 0 0 1px; padding: 1px; line-height: 1;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(4) .label:before { content: ''; position: absolute; top: 50%; right: 100%; height: 0.7em; width: 2.6em; border: 1px solid; border-right: 0; border-bottom: 0;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(5) .label { margin-left: -1em; margin-top: 0.5em; color: #FE7F00;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(5) .label:after { content: ''; position: absolute; left: 100%; bottom: 50%; width: 4em; height: 1px; background: currentColor;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(6) .label { margin-top: 1.5em; margin-left: -0.5em; color: #FE7F00;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(6) .label:before { content: ''; position: absolute; right: 50%; top: 100%; width: 6em; height: 11.6em; border-right: 1px solid; border-bottom: 1px solid;
}
.roland .Poti.pattern-write .PotiIndicator:nth-child(6) .label:after { content: ''; position: absolute; left: 100%; bottom: 50%; width: 2.2em; height: 1px; background: currentColor;
}
.roland .Poti.instrument-select { margin: 0 0 20px;
}
.roland .Poti.instrument-select > label div:first-child { color: #F4F4D1; position: relative;
}
.roland .Poti.instrument-select > label div:first-child:before { content: ''; position: absolute; top: 50%; right: 100%; width: 10em; height: 1px; background: currentColor;
}
.roland .Poti.instrument-select > label div:last-child { color: #FE7F00; box-shadow: 0 0 0 1px #FE7F00; padding: 2px 10px; line-height: 1; margin: 2px auto; position: relative;
}
.roland .Poti.instrument-select > label div:last-child:before { content: ''; position: absolute; top: 50%; right: 100%; height: 5.5em; width: 3em; border: 1px solid; border-right: 0; border-bottom: 0;
}
.roland .Poti.instrument-select .PotiIndicator { color: #121611;
}
.roland .Poti.instrument-select .PotiIndicator:before { background: #FE7F00;
}
.roland .Poti.instrument-select .PotiIndicator > .label { background: #F4F4D1; border-radius: 2px; padding: 1px; line-height: 1; font-weight: bold;
}
.roland .Poti.instrument-select .PotiIndicator > .number { color: #FE7F00; font-weight: bold;
}
.roland .Poti._ring { margin-top: 40px;
}
.roland .Poti._ring .\@decorator:before { content: ''; height: 50%; width: 50%; padding: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 100%; box-shadow: 0 0 0 12px #979D9D; pointer-events: none;
}
.roland .Poti._ring .PotiIndicator > .label { color: #121611; font-weight: bolder; margin-top: 4px;
}
.roland .Poti .PotiKnob { z-index: 2; box-shadow: 0 0 2px 1px rgba(244, 244, 209, 0.1) inset, 0 0 0 2px #121611 inset; margin-top: -5px;
}
.roland .Poti .PotiKnob:before { content: ''; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 100%; width: 110%; padding: 4px 0; border-radius: 100%; box-shadow: 0 2px 0 1px #121611, 0 2px 0 6px #1d1e1c, 0 2px 0 7px #121611; background-color: #1d1e1c; background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0, transparent 10px), -webkit-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.2) 40%, transparent 70%); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0, transparent 10px), linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.2) 40%, transparent 70%);
}
.roland .Poti .PotiKnob:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 100%; background-color: #1d1e1c; background-image: -webkit-radial-gradient(closest-corner, rgba(18, 22, 17, 0.2) 10%, rgba(18, 22, 17, 0.1) 60%, rgba(244, 244, 209, 0.1) 80%); background-image: radial-gradient(closest-corner, rgba(18, 22, 17, 0.2) 10%, rgba(18, 22, 17, 0.1) 60%, rgba(244, 244, 209, 0.1) 80%); box-shadow: inherit;
}
.roland .Poti .PotiMarker { z-index: 2; color: #FD4D20; font-size: 6px; will-change: transform;
}
.roland .Poti._colored .PotiIndicator:before { background: #979D9D; height: 10px; margin-bottom: 7px; border-radius: 0;
}
.roland .Poti._colored .PotiKnob { z-index: 2; box-shadow: 0 0 0 2px #1d1e1c inset; margin-top: -5px;
}
.roland .Poti._colored .PotiKnob:before { height: 120%; width: 110%; padding: 1px; box-shadow: 0 1px 0 1px #121611; top: 0;
}
.roland .Poti._colored .PotiKnob:after { background-color: inherit;
}
.roland .Poti._colored .PotiMarker { z-index: 2; color: #121611; font-size: 6px;
}
.roland .Poti._colored.orange .PotiKnob { color: #FE7F00;
}
.roland .Poti._colored.white .PotiKnob { color: #F4F4D1;
}
.roland.Eight_0_Eight { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; margin: auto; padding: 10px 30px; background-color: #34302F; background-image: -webkit-linear-gradient(left bottom, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 100px), -webkit-linear-gradient(left top, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0) 300px), -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0.5) 1px, transparent 100px), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 3px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); background-image: linear-gradient(to right top, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 100px), linear-gradient(to right bottom, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0) 300px), linear-gradient(to left top, rgba(0, 0, 0, 0.5) 1px, transparent 100px), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 3px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); box-shadow: 0 20px 0 #1c1e1a, 0 30px 0 #141813, 0 -10px 0 #1d1e1c; color: #979D9D;
}
.roland.Eight_0_Eight:before, .roland.Eight_0_Eight:after { content: ''; position: absolute; z-index: 2; top: -5px; bottom: 5px; width: 35px; background-color: #121611; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) calc(100% - 15px), rgba(255, 255, 255, 0.2) calc(100% - 4px), rgba(0, 0, 0, 0.3) calc(100% - 1px)); box-shadow: 0 30px 0 #151814, 0 40px 0 #121611, 0 -10px 0 #121611;
}
.roland.Eight_0_Eight:before { left: -30px; border-radius: 3px 2px 2px 3px;
}
.roland.Eight_0_Eight:after { right: -30px; border-radius: 2px 3px 3px 2px;
}
.roland .title-area .primary { color: #FE7F00; text-shadow: -2px -2px 0 #34302F, -2px -1px 0 #34302F, -2px 0px 0 #34302F, -2px 1px 0 #34302F, -2px 2px 0 #34302F, -1px -2px 0 #34302F, -1px -1px 0 #34302F, -1px 0px 0 #34302F, -1px 1px 0 #34302F, -1px 2px 0 #34302F, 0px -2px 0 #34302F, 0px -1px 0 #34302F, 0px 0px 0 #34302F, 0px 1px 0 #34302F, 0px 2px 0 #34302F, 1px -2px 0 #34302F, 1px -1px 0 #34302F, 1px 0px 0 #34302F, 1px 1px 0 #34302F, 1px 2px 0 #34302F, 2px -2px 0 #34302F, 2px -1px 0 #34302F, 2px 0px 0 #34302F, 2px 1px 0 #34302F, 2px 2px 0 #34302F;
}
.roland .title-area .underline { color: #FE7F00;
}
.roland .title-area .secondary { color: #979D9D; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-size: 0.5em;
}
.roland .top { border-top: 5px solid #979D9D; border-bottom: 5px solid #979D9D; padding: 5px 0; margin: 10px;
}
.roland .top > .left,
.roland .top > .right { box-shadow: 2px 0 0 #979D9D; margin-right: 5px;
}
.roland .bottom { padding: 5px 0; margin: 10px;
}
.roland .LoadingBuffers { position: absolute; z-index: 999; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2em; max-width: 400px; background: #F4F4D1; color: #121611; box-shadow: 0 2px 4px 3px rgba(0, 0, 0, 0.4); border-radius: 2px; font-family: 'Josefin Sans';
}
.roland .LoadingBuffers > div:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 20px;
}
.roland .Loader { height: 50px; width: 50px; position: relative;
}
.roland .Loader div { position: absolute; top: 50%; left: 50%; height: 10px; width: 10px; margin: -5px; border-radius: 100%; -webkit-animation: Loader 2s ease-out infinite; animation: Loader 2s ease-out infinite;
}
.roland .Loader div:nth-child(1) { background: #FD4D20;
}
.roland .Loader div:nth-child(2) { background: #FE7F00; -webkit-animation-delay: -0.5s; animation-delay: -0.5s;
}
.roland .Loader div:nth-child(3) { background: #1d1e1c; -webkit-animation-delay: -1s; animation-delay: -1s;
}
@keyframes Loader { 0% { -webkit-transform: rotate(0deg) translateY(20px); transform: rotate(0deg) translateY(20px); } 30% { -webkit-transform: rotate(180deg) translateY(10px); transform: rotate(180deg) translateY(10px); } 50% { -webkit-transform: rotate(300deg) translateY(25px); transform: rotate(300deg) translateY(25px); } 100% { -webkit-transform: rotate(360deg) translateY(20px); transform: rotate(360deg) translateY(20px); }
}
.roland .Logo { color: #FE7F00;
}
.roland .Toggle { background-color: #1c1d1b; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.2) 90%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.2) 90%); box-shadow: 0 0 0 2px #121611, 0 1px 3px 3px rgba(255, 255, 255, 0.05), 0 2px 8px 1px rgba(255, 255, 255, 0.05);
}
.roland .Toggle .ToggleSwitch { color: #1d1e1c; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 100% 2px; box-shadow: 0 0 1px 1px #121611; will-change: transform;
}
.roland .Toggle._horizontal .ToggleSwitch { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 2px 100%;
}
.roland .Toggle._horizontal .stem { border-radius: 0 10px 10px 0; background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.roland .Toggle._horizontal .cap { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 2px 100%;
}
.roland .Toggle .stem { background: #b3b3b3; visibility: visible; border-radius: 0 0 10px 10px; background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)), linear-gradient(to right, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.roland .Toggle._stem { border-radius: 10px;
}
.roland .Toggle._stem .ToggleSwitch { visibility: hidden;
}
.roland .Toggle._stem:before { pointer-events: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ''; height: 10px; width: 10px; background: #b3b3b3; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; visibility: visible; border-radius: 10px; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.roland .Toggle._stem._horizontal:before { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 10%, rgba(255, 255, 255, 0.1) 20%, rgba(0, 0, 0, 0.05), 70%, rgba(0, 0, 0, 0.6));
}
.roland .Toggle .cap { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, rgba(255, 255, 255, 0.1) 1px); background-size: 100% 2px; border-radius: 100%; background-color: white; visibility: visible; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2) inset;
}
.roland .tap-area { background: #979D9D; color: #121611; margin-bottom: 6px; margin-left: 6px; border-radius: 2px 2px 2px 0;
}
.roland .main-control { background: #979D9D; color: #121611; margin-bottom: 6px; margin-right: 54px; border-radius: 2px 2px 0 2px;
}
.roland .tempoBoxBorder { pointer-events: none; position: absolute; top: 30px; left: 10px; height: 2px; width: 110px; background: #979D9D;
}
.roland .tempoBoxBorder:before, .roland .tempoBoxBorder:after { content: ''; position: absolute; background: inherit;
}
.roland .tempoBoxBorder:before { bottom: 0; right: 0; width: 2px; height: 40px;
}
.roland .tempoBoxBorder:after { bottom: 38px; left: 100%; height: 2px; width: 110px;
}
.roland .Screws { pointer-events: none; visibility: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.roland .Screws .Screw { visibility: visible; position: absolute; top: 12px; left: 10px; height: 12px; width: 12px; border-radius: 100%; box-shadow: 0 1px 0 1px #121101, 0 2px 1px 1px rgba(0, 0, 0, 0.5), -3px 5px 0 -1px rgba(0, 0, 0, 0.4) inset, 2px 4px 0 -1px rgba(255, 255, 255, 0.2) inset, -2px 0 0 0 rgba(0, 0, 0, 0.5) inset; background-color: #1d1e1c; background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1)); background-image: radial-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.3)), linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
}
.roland .Screws .Screw:before, .roland .Screws .Screw:after { content: ''; height: 2px; width: 6px; margin: -1px -3px; position: absolute; top: 50%; left: 50%; background: black; box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2) inset; border-radius: 100%;
}
.roland .Screws .Screw:after { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.roland .Screws .Screw:nth-child(1) { -webkit-transform: translate(0, -5px); transform: translate(0, -5px);
}
.roland .Screws .Screw:nth-child(2) { -webkit-transform: translate(200px, 0); transform: translate(200px, 0);
}
.roland .Screws .Screw:nth-child(3) { -webkit-transform: translate(900px, 0); transform: translate(900px, 0);
}
.roland .Screws .Screw:nth-child(4) { -webkit-transform: translate(1010px, -5px); transform: translate(1010px, -5px);
}
.roland .Screws .Screw:nth-child(5) { -webkit-transform: translate(70px, 5px); transform: translate(70px, 5px);
}
.roland .Screws .Screw:nth-child(6) { -webkit-transform: translate(70px, 40px); transform: translate(70px, 40px);
}
.roland .Screws .Screw:nth-child(7) { -webkit-transform: translate(0, 200px); transform: translate(0, 200px);
}
.roland .Screws .Screw:nth-child(8) { -webkit-transform: translate(1010px, 200px); transform: translate(1010px, 200px);
}
.roland .Screws .Screw:nth-child(9) { -webkit-transform: translate(1010px, 340px); transform: translate(1010px, 340px);
}
.roland .Screws .Screw:nth-child(10) { -webkit-transform: translate(850px, 340px); transform: translate(850px, 340px);
}
.roland .Screws .Screw:nth-child(11) { -webkit-transform: translate(500px, 340px); transform: translate(500px, 340px);
}
.roland .Screws .Screw:nth-child(12) { -webkit-transform: translate(200px, 286px); transform: translate(200px, 286px);
}
.roland .Screws .Screw:nth-child(13) { top: auto; bottom: 15px; -webkit-transform: translate(100px, 0); transform: translate(100px, 0);
}
.roland .Screws .Screw:nth-child(14) { top: auto; bottom: 15px; -webkit-transform: translate(900px, 0); transform: translate(900px, 0);
}
.roland .Screws .Screw:nth-child(15) { -webkit-transform: translate(500px, 0); transform: translate(500px, 0);
}
.roland .Screws .Screw:nth-child(16) { top: auto; bottom: 15px; -webkit-transform: translate(500px, 0); transform: translate(500px, 0);
}
.roland .Arrow { position: relative; padding: 2px 8px; background: #34302F; color: #979D9D; font-family: sans-serif; text-transform: uppercase; line-height: 1; font-size: 8px; white-space: nowrap; margin-top: 20px; z-index: 2;
}
.roland .Arrow.grey { background: #979D9D; color: #34302F; margin: 0 4px 0 10px;
}
.roland .Arrow.grey.right:after { border-left-color: #979D9D;
}
.roland .Arrow.grey.left:after { border-right-color: #979D9D;
}
.roland .Arrow.basic-rhythm { left: 80px;
}
.roland .Arrow:before, .roland .Arrow:after { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.roland .Arrow:before { height: 4px; width: 6px; background: inherit;
}
.roland .Arrow:after { border: 6px solid transparent;
}
.roland .Arrow.right:before { left: 100%;
}
.roland .Arrow.right:after { border-left-color: #34302F; border-right: 0; left: calc(100% + 5px);
}
.roland .Arrow.left:before { right: 100%;
}
.roland .Arrow.left:after { border-right-color: #34302F; border-left: 0; right: calc(100% + 5px);
}
.roland .onOfflabels { position: absolute; top: 10px; left: 75px; width: 60px; height: 40px; font-size: 6px; line-height: 1; font-family: sans-serif; text-transform: uppercase;
}
.roland .onOfflabels div { position: absolute; width: 20px;
}
.roland .onOfflabels div:nth-child(1) { top: 0; left: 0;
}
.roland .onOfflabels div:nth-child(2) { top: 50%; right: 0;
}
.roland .onOfflabels div:nth-child(2):before { content: ''; position: absolute; bottom: 0; right: 100%; height: 1px; width: 10px; background: currentColor;
}
.roland .onOfflabels div:nth-child(2):after { content: ''; position: absolute; bottom: 0; right: 100%; height: 3px; width: 6px; margin-right: 2px; background: currentColor; border-radius: 1px 1px 0 0;
}
.roland .onOfflabels div:nth-child(3) { bottom: 0; right: 0;
}
.roland .onOfflabels div:nth-child(3):before { content: ''; position: absolute; bottom: 0; right: 100%; height: 1px; width: 10px; background: currentColor;
}
.roland .onOfflabels div:nth-child(3):after { content: ''; position: absolute; bottom: 0; right: 100%; height: 5px; width: 6px; margin-right: 2px; background: currentColor; border-radius: 1px 1px 0 0;
}
.roland .FAKECLEAR { position: absolute; height: 30px; width: 80px; top: 189px; left: 60px; font-size: 6px; line-height: 1; font-family: sans-serif; text-transform: uppercase;
}
.roland .FAKECLEAR > div { position: absolute; text-align: center; padding: 2px 4px; max-width: 30px;
}
.roland .FAKECLEAR > div:nth-child(1) { bottom: 50%; left: 0; color: #F4F4D1;
}
.roland .FAKECLEAR > div:nth-child(2) { top: 50%; left: 0; color: #F4F4D1;
}
.roland .FAKECLEAR > div:nth-child(3) { bottom: 50%; right: 0; color: #FE7F00;
}
.roland .FAKECLEAR .FAKECLEARBUTTON { top: 50%; left: 50%; height: 12px; width: 12px; padding: 0; border-radius: 100%; background: #FD4D20; box-shadow: 0 3px 0 1px #982e13, 0 5px 0 2px #979D9D; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.roland .FAKECLEAR .FAKECLEARBUTTON:before { content: ''; height: 2em; width: 1px; position: absolute; bottom: 100%; left: 50%; background: #F4F4D1;
}
.roland .FAKECLEAR .FAKECLEARBUTTON:after { content: ''; width: 7.2em; height: 1px; position: absolute; right: 100%; top: 50%; background: #F4F4D1;
}
.roland .LightLabel { font-size: 6px; line-height: 1; font-family: sans-serif; color: #979D9D; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
body { margin: 0; padding: 50px 40px; min-height: 100vh; box-sizing: border-box;
}

TR-808 | Happy 888 followers - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/** * @class Poti defines a Potentionmeter * @property {Array|Integer} steps if given an Array of values they will * be used as labels * if given an Integer it defines snappable * points and/or return values. * - fallback: 100 * @property {Integer} markers if given an Array of values they will * be used instead of the steps * if steps have labels they will still * appear * fallback: <number of steps> * @property {Function} onUpdate a callback to communicate with other * components * @property {Number} resolution resolution of the steps (e.g. 0.2 o 20) * @property {String} label optionally show label * @property {String} label2 optionally show a second label * @property {Boolean} labelsBelow show labels below the poti * @property {Boolean} numbered show numbers instead of markers * @property {Boolean} snap snap to steps * @property {Array} range defines the start and end point * - fallback: [0, <number of steps>] * @property {Intger} fullAngle defines the angle from start to end point * - fallback: 360 * @property {Integer} size the size of the Touchfield * twice the size of the Poti * - fallback: 100 */
var Poti = function (_React$Component) { _inherits(Poti, _React$Component); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Poti(props) { _classCallCheck(this, Poti); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.getStep = _this.getStep.bind(_this); _this.getDeg = _this.getDeg.bind(_this); _this.getCoord = _this.getCoord.bind(_this); _this.updateValue = _this.updateValue.bind(_this); _this.onMouseDown = _this.onMouseDown.bind(_this); _this.onMouseMove = _this.onMouseMove.bind(_this); _this.onMouseUp = _this.onMouseUp.bind(_this); // create a fallback for steps var steps = _this.props.steps || 100; // in case steps is a number // build an array with that length _this.steps = typeof steps === 'number' ? function () { var arr = []; var n = steps; while (n--) { // push an empty object for each step arr.push({}); } return arr; }() : steps; // already an Array // save the length for easier access _this.stepsLength = _this.steps.length; // apply a fallback for range _this.range = _this.props.range || [0, _this.stepsLength - 1]; // create a fallback for fullAngle var fullAngle = _this.props.fullAngle || 360; // remove one step from the angle _this.fullAngle = fullAngle / (_this.stepsLength + 1) * _this.stepsLength; // define the angle of one step _this.step = _this.fullAngle / (_this.stepsLength - 1); // apply a fallback for size _this.size = _this.props.size || 100; // global margin _this.margin = 10; // calculate the center of the touch field _this.center = _this.size / 2 + _this.margin; // start and and angle points _this.startAngle = (360 - _this.fullAngle) / 2; _this.endAngle = 360 - _this.startAngle; // calculate the initial rotation of the knob _this.initialDeg = function () { var deg = (_this.props.value || 0) - _this.range[0]; deg /= _this.range[1] - _this.range[0]; deg *= _this.fullAngle; deg += _this.startAngle; return deg; }(); // create the markers _this.markers = _this.steps; // in case markers are defined if (_this.props.markers) { var m = []; var n = _this.props.markers; while (n--) { var label = undefined; // make sure labels are still displayed at the correct position var markerAt = Math.round((_this.props.markers - 1) / (_this.stepsLength - 1)); var step = _this.steps[Math.floor((_this.props.markers - n) / markerAt)]; if (step && n % markerAt === 0) { label = step.label; } m.push({ label: label }); } _this.markers = m; } // create indicators from markers _this.indicators = _this.markers.map(function (item, index) { var baseAngle = _this.fullAngle / (_this.markers.length - 1); var deg = Math.round(baseAngle * index + _this.startAngle); var y = Math.round(_this.center / 2 + 4); // indicators with labels are visually bigger var scale = item.label ? 1.5 : 0.75; // fix the offset created by scaling var correction = -2 * scale; // define indicator styles var styles = PREFIXER.prefix({ marker: { height: 10, width: 2, position: 'absolute', top: '50%', left: '50%', pointerEvents: 'none', transform: 'translate(-50%, -50%) \n rotate(' + deg + 'deg) \n translateY(' + y + 'px) \n translateY(4px) \n scale(' + scale + ') \n translateY(' + correction + 'px)' }, label: { transform: 'translate(-50%,-100%) \n translateY(' + 14 + 'px) \n rotate(' + deg * -1 + 'deg) \n scale(' + 1 / scale + ')', fontFamily: 'sans-serif', fontSize: 6, position: 'absolute', top: '50%', left: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center', textTransform: 'uppercase' }, number: { transform: 'translate(-50%,-100%) \n translateY(' + 8 + 'px) \n rotate(' + deg * -1 + 'deg) \n scale(' + 1 / scale + ')', fontFamily: 'sans-serif', fontSize: 6, position: 'absolute', top: '50%', left: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', textTransform: 'uppercase' } }); var label = undefined, number = undefined; // apply optional label if (item.label) { label = React.createElement( 'div', { className: 'label', style: styles.label }, item.label ); } // show numbers instead of markers if (_this.props.numbered) { number = React.createElement( 'div', { className: 'number', style: styles.number }, index + 1 ); } // if numbered add a styling class var classes = classNames('PotiIndicator', { '_numbered': _this.props.numbered }); // returns the complete marker return React.createElement( 'div', { className: classes, style: styles.marker }, number, label ); }); // component styles _this.styles = PREFIXER.prefix({ poti: { position: 'relative', height: parseInt(_this.size, 10) + _this.margin * 2, width: parseInt(_this.size, 10) + _this.margin * 2, cursor: 'crosshair' }, knob: { userSelect: 'none', position: 'relative', background: 'currentColor', borderRadius: '100%', height: _this.size / 2, width: _this.size / 2, transform: 'translate(-50%,-50%)', position: 'absolute', top: '50%', left: '50%', pointerEvents: 'none' }, marker: { height: _this.center - _this.margin, width: 2, position: 'absolute', top: '50%', left: '50%', boxShadow: '0 -1em 0 -1px currentColor inset', pointerEvents: 'none' }, label: { fontFamily: 'sans-serif', fontSize: 6, display: 'flex', marginBottom: '1em', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', textTransform: 'uppercase' }, value: { position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', background: 'white', color: 'black', borderRadius: 2, padding: 5, fontFamily: 'sans-serif', fontSize: 8, zIndex: 10, pointerEvents: 'none' } }); return _this; } Poti.prototype.componentWillMount = function componentWillMount() { // make sure inital options are applied this.updateValue(this.initialDeg); }; /** * returns the closest step to an angle * @param {Number} deg position to look for a step * @return {Integer} returns the step */ Poti.prototype.getStep = function getStep(deg) { var diff = this.startAngle % this.step; var step = deg - deg % this.step + diff; return step; }; /** * get the degree from the pointer * @param {Object} pointer {x,y} values of the cursor * @return {Number} returns the rotation of the knob */ Poti.prototype.getDeg = function getDeg(pointer) { var x = pointer.x - this.center; var y = pointer.y - this.center; var deg = Math.atan(y / x) * 180 / Math.PI; // fill the circle if (x < 0 && y >= 0 || x < 0 && y < 0) { deg += 90; } else { deg += 270; } // in case snapping is activated convert to step var step = deg; if (this.props.snap) { step = this.getStep(deg); } // set bounds of the rotation angle var finalDeg = Math.min(Math.max(this.startAngle, step), this.endAngle); return finalDeg; }; /** * get the pointer from the event * @param {Event} e the event * @return {Object} returns a simplified object */ Poti.prototype.getCoord = function getCoord(e) { e = e.nativeEvent; var x = e.offsetX || e.layerX; var y = e.offsetY || e.layerY; return { x: x, y: y }; }; /** * handle mousedown events and allows dragging * @param {Event} e the event */ Poti.prototype.onMouseDown = function onMouseDown(e) { e.preventDefault(); var pointer = this.getCoord(e); var deg = this.getDeg(pointer); this.updateValue(deg); this.setState({ down: true }); }; /** * handle mousemove events and updates the value * @param {Event} e the event */ Poti.prototype.onMouseMove = function onMouseMove(e) { e.preventDefault(); if (!this.state.down) { return; } var pointer = this.getCoord(e); var deg = this.getDeg(pointer); this.updateValue(deg); }; /** * handle mouseup events and disallows dragging * @param {Event} e the event */ Poti.prototype.onMouseUp = function onMouseUp(e) { e.preventDefault(); this.setState({ down: false }); }; /** * update the value from a given angle * @param {Number} deg the rotation of the knob * @callback calls `this.props.onUpdate`for component communication */ Poti.prototype.updateValue = function updateValue(deg) { // calculate the value from the angle var value = Math.round((deg - this.startAngle) / this.fullAngle * (this.range[1] - this.range[0])) + this.range[0]; if (this.props.resolution) { value = Math.round(value * this.props.resolution * 100) / 100; } // get the label for the given value var label = this.steps[value] && this.steps[value].label; // if not a range and a label is present // the label will be returned if (label && !this.props.range) { value = label; } // update the state this.setState({ deg: deg, value: value }); // call the callback function if (typeof this.props.onUpdate === 'function') { this.props.onUpdate(value); } }; Poti.prototype.render = function render() { // add dynamic styles to the component styles var dynamicStyles = PREFIXER.prefix({ marker: { transform: 'translate(-50%, -50%) \n rotate(' + this.state.deg + 'deg)' } }); Object.assign(this.styles.marker, dynamicStyles.marker); var styles = this.styles; // show a value as tooltip while dragging/mousedown var value = undefined; //if (this.state.down) { // value = <div style={ styles.value }> // { this.state.value } // </div>; //} // build the label var labelsAbove = undefined, labelsBelow = undefined, label2 = undefined, labels = undefined; if (this.props.label) { labels = React.createElement( 'label', { style: styles.label }, React.createElement( 'div', null, this.props.label ), React.createElement( 'div', null, this.props.label2 ) ); } if (this.props.labelsBelow) { labelsBelow = labels; } else { labelsAbove = labels; } var classes = classNames(this.props.className, 'Poti'); return React.createElement( 'div', { className: classes, style: { position: 'relative', display: 'inline-block' } }, labelsAbove, value, React.createElement( 'div', { className: 'TouchField @decorator', onMouseDown: this.onMouseDown, onMouseMove: this.onMouseMove, onMouseUp: this.onMouseUp, onMouseLeave: this.onMouseUp, style: styles.poti }, React.createElement( 'div', { className: 'PotiKnob', style: styles.knob }, React.createElement('div', { className: 'PotiMarker', style: styles.marker }) ), React.createElement( 'div', { className: 'PotiIndicators', style: { pointerEvents: 'none' } }, this.indicators ) ), labelsBelow ); }; return Poti;
}(React.Component);
/** * @class Step defines a step with three states [off,selected,active] * @property {Boolean} selected initial selected state * @property {Boolean} active active state * @property {Integer} count number above && index + 1 * @property {Integer} rhythm number below * @property {Function} onUpdate a callback to communicate with other * components */
var Step = function (_React$Component2) { _inherits(Step, _React$Component2); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Step(props) { _classCallCheck(this, Step); var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this2.onClick = _this2.onClick.bind(_this2); // set initial state _this2.state = { selected: _this2.props.selected }; // component styles _this2.styles = PREFIXER.prefix({ step: { position: 'relative', height: 55, width: 26, margin: '20px 6px 30px', backgroundColor: 'currentColor' }, light: { position: 'absolute', top: 5, height: 5, width: 5, left: '50%', transform: 'translateX(-50%)', borderRadius: '100%' }, glow: { position: 'absolute', top: 0, left: 0, height: '100%', width: '100%', borderRadius: 'inherit' }, count: { position: 'absolute', bottom: '100%', left: 0, marginBottom: 5, fontSize: 8, width: '100%', textAlign: 'center', fontFamily: 'sans-serif' }, rhythm: { position: 'absolute', top: '100%', left: _this2.props.count === 13 ? -2 : _this2.props.count === 1 ? -60 : -6, right: _this2.props.count === 12 ? -2 : _this2.props.count === 16 ? -12 : -6, marginTop: 10, paddingTop: 1, paddingBottom: 1, paddingLeft: _this2.props.count === 13 ? 2 : _this2.props.count === 1 ? 60 : 6, paddingRight: _this2.props.count === 12 ? 2 : _this2.props.count === 16 ? 12 : 6, fontSize: 12, lineHeight: 1, borderRadius: _this2.props.count === 12 ? '0 2px 2px 0' : _this2.props.count === 13 ? '2px 0 0 2px' : false, textAlign: 'center', fontFamily: 'sans-serif' } }); return _this2; } /** * handle clicks and toggle the state * @param {Event} e the event */ Step.prototype.onClick = function onClick(e) { var selected = this.props.selected; selected = !selected; // send action to parent // no internal state if (typeof this.props.onUpdate === 'function') { this.props.onUpdate(this.props.count - 1, selected); } }; Step.prototype.render = function render() { var classes = classNames('Step', this.props.className, { selected: this.props.selected, active: this.props.active }); // add dynamic styles var dynamicStyles = { light: { backgroundColor: this.props.selected || this.props.active ? 'red' : 'black' } }; Object.assign(this.styles.light, dynamicStyles.light); var styles = this.styles; return React.createElement( 'div', { className: classes, onClick: this.onClick, style: styles.step }, React.createElement( 'div', { className: 'count', style: styles.count }, this.props.count ), React.createElement( 'div', { className: 'rhythm', style: styles.rhythm }, this.props.rhythm ), React.createElement( 'div', { className: 'StepLight', style: styles.light }, React.createElement('div', { className: 'glow', style: styles.glow }) ) ); }; return Step;
}(React.Component);
/** * @class Toggle creates a toggle with multiple steps and an optinal visual stem * @property {Array|Integer} steps if given an Array of values they will * be used as labels * if given an Integer it defines * snappable points and/or return values. * - required * @property {Integer} activeLight the active light index * @property {Integer} selected initially selected state * @property {String} label optionally show label * @property {Boolean} stem optionally show a visual stem * @property {Boolean} horizontal optionally show as horizontal * @property {Array} lights an array of Integers * if the Integer equals the selected * index the light is on. this allows to * render lights for speciffic selections * @property {Function} onUpdate a callback to communicate with other * components */
var Toggle = function (_React$Component3) { _inherits(Toggle, _React$Component3); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Toggle(props) { _classCallCheck(this, Toggle); var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this, props)); _this3.onClick = _this3.onClick.bind(_this3); _this3.size = 14; // save stem for easy access _this3.stem = _this3.props.stem; // save lights for easy access _this3.lights = _this3.props.lights; // support horizontal layout (vetical is default) _this3.horizontal = _this3.props.orientation === 'horizontal'; // build steps _this3.steps = []; var isNumber = typeof _this3.props.steps === 'number'; if (isNumber) { var n = _this3.props.steps; while (n--) { _this3.steps.push(''); } } else { _this3.steps = _this3.props.steps; } // build labels from steps _this3.labels = _this3.steps.map(function (item, index) { // label styles // make sure we handle the orientation correctly var styles = PREFIXER.prefix({ label: { position: 'absolute', top: _this3.horizontal ? '100%' : index * _this3.size, left: _this3.horizontal ? index * _this3.size : '100%', pointerEvents: 'none', fontSize: 6, fontFamily: 'sans-serif', paddingLeft: _this3.horizontal ? 0 : 2, paddingTop: _this3.horizontal ? 2 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', height: _this3.size, width: _this3.size } }); return React.createElement( 'div', { style: styles.label }, item ); }); // component styles // handle orientation _this3.styles = PREFIXER.prefix({ toggle: { position: 'relative', height: _this3.horizontal ? _this3.size / 2 : _this3.steps.length * _this3.size, width: _this3.horizontal ? _this3.steps.length * _this3.size : _this3.size / 2, margin: '5px auto 20px', cursor: 'pointer' }, switch: { position: 'absolute', height: _this3.horizontal ? _this3.size - 4 : _this3.size, width: _this3.horizontal ? _this3.size : _this3.size - 4, top: _this3.horizontal ? '50%' : 0, left: _this3.horizontal ? 0 : '50%', marginLeft: 1, backgroundColor: 'currentColor', pointerEvents: 'none', transition: 'transform 0.2s' }, stem: { pointerEvents: 'none', position: 'absolute', top: '50%', left: '50%', transformOrigin: _this3.horizontal ? '0% 50%' : '50% 0%', height: _this3.horizontal ? _this3.size - 4 : 50 * _this3.steps.length + '%', width: _this3.horizontal ? 50 * _this3.steps.length + '%' : _this3.size - 4, transition: 'transform 0.2s' }, cap: { position: 'absolute', top: '50%', left: '50%', height: _this3.size, width: _this3.size, transition: 'transform 0.2s' }, label: { fontSize: 8, fontFamily: 'sans-serif', textTransform: 'uppercase', margin: '10px 0' }, lights: { height: _this3.horizontal ? 22 : '100%', width: _this3.horizontal ? '100%' : 22, boxSizing: 'border-box', display: 'flex', margin: _this3.horizontal ? '0 0 6px' : '0', alignItems: 'center', justifyContent: 'space-between', top: _this3.horizontal ? '100%' : '0%', left: _this3.horizontal ? '100%' : '100%', backgroundColor: 'currentColor', padding: '0 6px', transform: 'scale(0.6)' } }); // set initial state _this3.state = { selected: _this3.props.selected || 0 }; return _this3; } /** * handle clicks and toggle the state * @param {Event} e the event */ Toggle.prototype.onClick = function onClick(e) { // use native event to get access to e.offset{X,Y} and/or e.layer{X,Y} e = e.nativeEvent; // use offset or layer // and respect orientation var offset = e.offsetY || e.layerY; if (this.horizontal) { offset = e.offsetX || e.layerX; } var length = this.steps.length; // calculate selected var selected = Math.round(offset / (length * this.size) * length - 0.5); // ensure bounds selected = Math.max(0, Math.min(length - 1, selected)); // update state this.setState({ selected: selected }); if (typeof this.props.onUpdate === 'function') { this.props.onUpdate(selected); } }; Toggle.prototype.render = function render() { var _this4 = this; var classes = classNames('Toggle', this.props.classNames, { '_horizontal': this.horizontal, '_stem': this.stem }); // offset the switch to the current selected index var switchOffset = this.state.selected * this.size; // build the stem var stem = 1; if (this.stem) { var stemOffset = (this.steps.length - 1) / 2; var baseAngle = Math.PI / this.steps.length; stem = Math.sin((this.state.selected - stemOffset) * baseAngle); } // extend styles var dynamicStyles = PREFIXER.prefix({ switch: { transform: this.horizontal ? 'translate(' + switchOffset + 'px, -50%)' : 'translate(-50%,' + switchOffset + 'px)' }, stem: { transform: 'scale' + (this.horizontal ? 'X' : 'Y') + '(' + stem * -1 + ') \n translate' + (this.horizontal ? 'Y' : 'X') + '(-50%)\n translate' + (this.horizontal ? 'X' : 'Y') + '(' + this.size / -4 + 'px)' }, cap: { transform: 'translate(-50%,-50%) \n scale' + (this.horizontal ? 'X' : 'Y') + '(' + (1.1 - Math.abs(stem / 2)) + ')\n scale' + (this.horizontal ? 'Y' : 'X') + '(' + (1.0 - Math.abs(stem / 5)) + ')' } }); Object.assign(this.styles.switch, dynamicStyles.switch); Object.assign(this.styles.stem, dynamicStyles.stem); Object.assign(this.styles.cap, dynamicStyles.cap); var styles = this.styles; // render optional elements var stemElement = undefined, label = undefined, lights = undefined; // stem if (this.stem) { stemElement = React.createElement( 'div', null, React.createElement('div', { className: 'stem', style: styles.stem }), React.createElement('div', { className: 'cap', style: styles.cap }) ); } // label if (this.props.label) { label = React.createElement( 'div', { style: styles.label }, this.props.label ); } // lights if (this.lights) { // map lights to include the selected state var allLights = this.lights.map(function (item, index) { var styles = { light: { height: 12, width: 12, borderRadius: '100%', background: index === _this4.props.activeLight ? 'red' : 'black' } }; return React.createElement('div', { className: 'light', style: styles.light }); }); lights = React.createElement( 'div', { style: styles.lights }, allLights ); } return React.createElement( 'div', null, label, React.createElement( 'div', { className: classes, style: styles.toggle, onClick: this.onClick }, React.createElement( 'div', { className: 'ToggleSwitch', style: styles.switch }, stemElement ), React.createElement( 'div', { className: 'labels' }, this.labels ) ), lights ); }; return Toggle;
}(React.Component);
/** * @class Scale displays a scale for a rhythm * @property {Array} measure an Array of [1,0,0...] Arrays where the * 1 or 0 define a note * @property {Integer} swing shows a bow from 0 to this note (index) */
var Scale = function (_React$Component4) { _inherits(Scale, _React$Component4); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Scale(props) { _classCallCheck(this, Scale); var _this5 = _possibleConstructorReturn(this, _React$Component4.call(this, props)); _this5.styles = PREFIXER.prefix({ scale: { display: 'flex', width: '100%', justifyContent: 'space-around' } }); // map measures _this5.measures = _this5.props.measures.map(function (items, index) { var lastItem = index === _this5.props.measures.length - 1; var swing = _this5.props.swing; // measures styles var styles = PREFIXER.prefix({ measure: { overflow: 'hidden', display: 'flex', justifyContent: 'space-around', flex: items.length, padding: '6px 0 0', margin: '2px 0', borderTopRightRadius: swing && lastItem ? 0 : false, borderBottomRightRadius: swing && lastItem ? 0 : false } }); // map notes from item var notes = items.map(function (item, index) { var styles = PREFIXER.prefix({ note: { position: 'relative', flex: '0 0 26px', display: 'flex', justifyContent: 'center', fontSize: 14 }, bow: { position: 'absolute', top: -3, left: 18, width: Math.floor((swing || 0) / 2) * 2 * 130 + Math.pow(swing, 2) * 1.5 + '%', height: 8, borderRadius: '100%', boxShadow: '0 -1px 0' } }); var bow = undefined; // add the bow if needed if (swing && index === 0) { bow = React.createElement('div', { className: 'note-bow', style: styles.bow }); } var note = undefined; // only show if item == 1 (true) and not if item == 0 (false) if (item) { note = '♪'; } return React.createElement( 'div', { className: 'note', style: styles.note }, note, bow ); }); return React.createElement( 'div', { className: 'ScaleMeasure', style: styles.measure }, notes ); }); return _this5; } Scale.prototype.render = function render() { var styles = this.styles; return React.createElement( 'div', { className: 'Scale', style: styles.scale }, this.measures ); }; return Scale;
}(React.Component);
/** * @class Button creates a simple button with a callback * @property {Function} onClick passes a fubction to clicks */
var Button = function (_React$Component5) { _inherits(Button, _React$Component5); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Button(prop) { _classCallCheck(this, Button); var _this6 = _possibleConstructorReturn(this, _React$Component5.call(this, prop)); _this6.onClick = _this6.onClick.bind(_this6); _this6.styles = PREFIXER.prefix({ button: { display: 'inline-flex', height: 40, minWidth: 40, boxSizing: 'border-box', alignItems: 'center', justifyContent: 'center', textTransform: 'uppercase', fontSize: 10, fontFamily: 'sans-serif', margin: '4px auto', cursor: 'pointer', userSelect: 'none' } }); return _this6; } /** * handle clicks and call the callback * @param {Event} e the event */ Button.prototype.onClick = function onClick(e) { if (typeof this.props.onClick === 'function') { this.props.onClick(); } }; Button.prototype.render = function render() { var classes = classNames('Button', this.props.className); var styles = this.styles; return React.createElement( 'div', { className: classes, onClick: this.onClick, style: styles.button }, this.props.children ); }; return Button;
}(React.Component);
/** * class Instrument creates a channel for an instrument * @property {Integer} index the index of the instrument on the board * @property {Array} potis a list of potis to render/use inside the channel * @property {Array} label expects an array since an instrument can have * two labels. can render smallcaps style titles * - syntax: *C*apitals c*A*n *BE* *E*ve*R*ywhere */
var Instrument = function (_React$Component6) { _inherits(Instrument, _React$Component6); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Instrument(props) { _classCallCheck(this, Instrument); var _this7 = _possibleConstructorReturn(this, _React$Component6.call(this, props)); _this7.onToggle = _this7.onToggle.bind(_this7); _this7.poti_0 = _this7.poti_0.bind(_this7); _this7.poti_1 = _this7.poti_1.bind(_this7); _this7.poti_2 = _this7.poti_2.bind(_this7); // create names from the labels _this7.names = _this7.props.label.map(function (item, index) { // look for ampersands to identify capitals var parts = item.split('*'); var word = parts.map(function (item, index) { var group = item; // every even match is a capital if (Math.floor(index / 2) !== Math.round(index / 2)) { group = React.createElement( 'span', { style: { fontSize: '1.75em' } }, item ); } return group; }); return word; }); // show potis for channel _this7.potis = _this7.props.potis.map(function (item, index) { var poti = undefined; // optionally show an empty space (lyout,visual) if (!item.empty) { var potiCallback = 'poti_' + index; poti = React.createElement(Poti, { className: item.className, label: item.label, size: item.size, onUpdate: _this7[potiCallback], fullAngle: item.fullAngle, markers: item.markers, resolution: item.resolution, value: item.value, range: item.range }); } else { poti = React.createElement('div', { style: { height: _this7.props.potis[index - 1].size * 2 } }); } return React.createElement( 'div', null, poti ); }); var styles = PREFIXER.prefix({ instrument: { cursor: 'default', display: 'inline-flex', flexDirection: 'column' }, name: { fontSize: 6, fontFamily: 'sans-serif', textTransform: 'uppercase' } }); // add first name var names = []; names.push(React.createElement( 'div', { className: 'InstrumentName', style: styles.name }, _this7.names[0] )); // render a toggle and show the second label if given if (_this7.names[1]) { names.push(React.createElement( 'div', { style: PREFIXER.prefix({ style: { display: 'flex', flexDirection: 'column' } }).style }, React.createElement( 'div', { style: PREFIXER.prefix({ style: { height: 40, display: 'flex', flexDirection: 'column' } }).style }, React.createElement('span', { style: PREFIXER.prefix({ style: { flex: 1 } }).style }), React.createElement(Toggle, { steps: 2, onUpdate: _this7.onToggle, selected: 1 }), React.createElement('span', { style: PREFIXER.prefix({ style: { flex: 1 } }).style }) ), React.createElement( 'div', { className: 'InstrumentName', style: styles.name }, _this7.names[1] ) )); } // map new values _this7.styles = styles; _this7.names = names; _this7.spacer = React.createElement('span', { style: PREFIXER.prefix({ style: { flex: 1 } }).style }); return _this7; } /** * Poti callbacks */ Instrument.prototype.poti_0 = function poti_0(value) { if (typeof this.props.onInstrumentPoti_0 === 'function') { this.props.onInstrumentPoti_0(this.props.index, value); } }; Instrument.prototype.poti_1 = function poti_1(value) { if (typeof this.props.onInstrumentPoti_1 === 'function') { this.props.onInstrumentPoti_1(this.props.index, value); } }; Instrument.prototype.poti_2 = function poti_2(value) { if (typeof this.props.onInstrumentPoti_2 === 'function') { this.props.onInstrumentPoti_2(this.props.index, value); } }; /** * toggles the primary secondary instrument * @param {Integer} selected should be 0 or 1 */ Instrument.prototype.onToggle = function onToggle(selected) { if (typeof this.props.onToggle === 'function') { this.props.onToggle(this.props.index, selected); } }; Instrument.prototype.render = function render() { var styles = this.styles; return React.createElement( 'div', { className: 'Instrument', style: styles.instrument }, this.potis, this.spacer, this.names[0], this.names[1] ); }; return Instrument;
}(React.Component);
/** * class Sequencer defines a collection of steps that can edit the pattern * of the selected track * @property {Integer} activeStep lights a step if active while playing * @property {Array} pattern defines the steps that are selected (visual) * @property {Array} part defines which part of the pattern to edit (0,1 equals A,B) */
var Sequencer = function (_React$Component7) { _inherits(Sequencer, _React$Component7); /** * construct the component * @param {Object} props sent via Component call * see list of properties in comment above */ function Sequencer(props) { _classCallCheck(this, Sequencer); var _this8 = _possibleConstructorReturn(this, _React$Component7.call(this, props)); _this8.setStep = _this8.setStep.bind(_this8); // wrapper styles _this8.styles = PREFIXER.prefix({ stepsWrapper: { display: 'flex', flex: 1 } }); return _this8; } /** * toggles a step and sends a callback * @param {Integer} index the index of the step * @param {Boolean} selected selected state of the step */ Sequencer.prototype.setStep = function setStep(index, selected) { if (typeof this.props.onStepChange === 'function') { this.props.onStepChange(index, selected); } }; Sequencer.prototype.render = function render() { var _this9 = this; // desine steps inside the render function to pass the activeStep // four different colors will be used to create collection var steps = ['red', 'orange', 'yellow', 'white'].map(function (item, index) { var stepCount = 4; var steps = []; var classes = classNames('_colored', item); var count = index * stepCount; while (stepCount--) { // build rhythm numbers var rhythm = count % 12 + 1; count++; // check states var active = _this9.props.activeStep - _this9.props.part * 16 === count - 1; var selected = _this9.props.pattern[count - 1 + _this9.props.part * 16]; // add steps to collection steps.push(React.createElement(Step, { className: classes, count: count, rhythm: rhythm, active: active, selected: selected, onUpdate: _this9.setStep })); } return steps; }); /** * TODO: move step creation outside the render function * and reduce impact */ return React.createElement( 'div', null, React.createElement( 'div', { style: { position: 'relative' } }, React.createElement( 'div', { style: { position: 'absolute', top: 0, right: '100%', width: 60, paddingTop: 12 } }, React.createElement( 'div', { className: 'ScaleToggler' }, React.createElement(Toggle, { steps: [1, 2, 3, 4] }) ), React.createElement( 'div', { className: 'Arrow right grey' }, 'STEP NO' ), React.createElement( 'div', { className: 'LightLabel' }, React.createElement('div', { className: 'light', style: { borderRadius: '100%', height: 8, width: 8, background: this.props.part === 0 ? 'red' : 'black', margin: '1em' } }), '1st PART' ), React.createElement( 'div', { className: 'LightLabel' }, React.createElement('div', { className: 'light', style: { borderRadius: '100%', height: 8, width: 8, background: this.props.part === 1 ? 'red' : 'black', margin: '1em' } }), '2nd PART' ) ), React.createElement( 'div', null, React.createElement(Scale, { swing: 2, measures: [[1, 1, 1], [1, 1, 1], [1, 1, 1], [1, 1, 1], [1, 1, 1], [1]] }), React.createElement(Scale, { swing: 5, measures: [[1, 0, 1, 0, 1, 0], [1, 0, 1, 0, 1, 0], [1, 0, 1, 0]] }), React.createElement(Scale, { measures: [[1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0]] }), React.createElement(Scale, { measures: [[1, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0]] }) ) ), React.createElement( 'div', { style: this.styles.stepsWrapper }, steps ) ); }; return Sequencer;
}(React.Component);
/** * class Eight_O_Eight is the actual instrument * It loads an instance of Tone.js (https://github.com/Tonejs/Tone.js) * to play the sounds. * patterns are stored inside the component and then used by Tone.js * Currently activated controls: * - Mater volume : changes the master volume * - Tempo : changes the bpm * - Instrument-select : changes the track * - Start/Stop : starts or stops the loop * - Sequencer : Steps change the pattern of the selected track * - Instrument toggle : the second instrument on some chanels (lc,mc,hc,cl,ma) * - Instrument volume : volume of single tracks (level) */
var Eight_O_Eight = function (_React$Component8) { _inherits(Eight_O_Eight, _React$Component8); /** * construct the component * This component has no properties as it is meant as an app * depending on the changes it might get a `samples` property to load different sets. */ function Eight_O_Eight() { _classCallCheck(this, Eight_O_Eight); var _this10 = _possibleConstructorReturn(this, _React$Component8.call(this)); _this10.steps = 32; var emptyPattern = []; for (var i = 0; i < _this10.steps; i++) { emptyPattern.push(false); } _this10.state = { track: 1, pattern: emptyPattern, activeStep: -1, activePart: 0, editingPart: 0, style: 0 }; _this10.initBPM = 132; _this10.toggleStyle = _this10.toggleStyle.bind(_this10); _this10.togglePlay = _this10.togglePlay.bind(_this10); _this10.createSequencer = _this10.createSequencer.bind(_this10); _this10.setTempo = _this10.setTempo.bind(_this10); _this10.onStepChange = _this10.onStepChange.bind(_this10); _this10.setStep = _this10.setStep.bind(_this10); _this10.updatePattern = _this10.updatePattern.bind(_this10); _this10.changeTrack = _this10.changeTrack.bind(_this10); _this10.changeMasterVolume = _this10.changeMasterVolume.bind(_this10); _this10.onInstrumentToggle = _this10.onInstrumentToggle.bind(_this10); _this10.onInstrumentLevel = _this10.onInstrumentLevel.bind(_this10); _this10.onInstrumentPoti_1 = _this10.onInstrumentPoti_1.bind(_this10); _this10.onInstrumentPoti_2 = _this10.onInstrumentPoti_2.bind(_this10); _this10.createSampler = _this10.createSampler.bind(_this10); _this10.onBasicVariation = _this10.onBasicVariation.bind(_this10); _this10.toggleEditingPart = _this10.toggleEditingPart.bind(_this10); _this10.basicVariation = 0; // build the matrix for later manipulation _this10.tracksMap = {}; _this10.matrix = {}; for (var i = 0; i < _this10.steps; i++) { _this10.matrix[i] = {}; } // extend the matrix by our instruments // and build the track map INSTRUMENTS.forEach(function (item, index) { for (var i = 0; i < _this10.steps; i++) { _this10.matrix[i][index] = 0; } _this10.tracksMap[index] = { selected: 0, poti1: item.potis[1] ? '50' : false, poti2: item.potis[2] ? '50' : false, tracks: item.tracks }; if (item.potis[1] && item.potis[1].empty) { _this10.tracksMap[index].poti1 = false; } }); // let's make sure the pattern is initially set _this10.updatePattern(); // predefine the tracks _this10.instruments = INSTRUMENTS.map(function (item, index) { return React.createElement(Instrument, { name: item.name, label: item.label, index: index, handle: item.handle, potis: item.potis, onInstrumentPoti_0: _this10.onInstrumentLevel, onInstrumentPoti_1: _this10.onInstrumentPoti_1, onInstrumentPoti_2: _this10.onInstrumentPoti_2, onToggle: _this10.onInstrumentToggle }); }); // buoild the data for the potis _this10.tracksPoti = INSTRUMENTS.map(function (item) { return { label: item.handle }; }); _this10.measuresPoti = ['manual', 16, 12, 8, 4, 2].map(function (item) { return { label: item }; }); _this10.tempoPoti = ['0', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (item) { return { label: item }; }); _this10.masterVolumePoti = ['min', 1, 2, 3, 4, 5, 6, 7, 8, 9, 'max'].map(function (item) { return { label: item }; }); _this10.patternWritePoti = ['pattern clear', '1st PART', '2nd PART', 'manual play', 'play', 'com- pose'].map(function (item) { return { label: item }; }); _this10.screws = []; for (var i = 0; i < 16; i++) { _this10.screws.push(React.createElement('div', { className: 'Screw' })); } // component styles _this10.styles = PREFIXER.prefix({ name: { fontFamily: 'Josefin Sans, sans-serif', fontSize: 40, position: 'relative', display: 'flex', flex: 1, flexWrap: 'wrap', paddingRight: 30, lineHeight: 1, justifyContent: 'flex-end', alignItems: 'baseline' }, underline: { position: 'absolute', top: '1em', left: 0, width: '100%', height: 2, background: 'currentColor', marginTop: '-0.175em' }, eightoeight: { display: 'flex', flexDirection: 'column', width: 980 }, top: { display: 'flex' }, flexBox: { display: 'flex' }, patternWrite: { display: 'flex', justifyContent: 'flex-end', paddingRight: 40, paddingLeft: 20 }, flexBoxFlex: { display: 'flex', flex: 1 }, flexBoxCenter: { display: 'flex', alignItems: 'center' }, flexBoxColumn: { display: 'flex', alignItems: 'center', flexDirection: 'column' }, mainControl: { display: 'flex', alignItems: 'center', flexDirection: 'column', width: 200 }, tapArea: { display: 'flex', alignItems: 'center', flexDirection: 'column', width: 140 }, blackLine: { height: 2, background: 'currentColor', width: 'calc(100% - 10px)', margin: '10px 0' } }); // build the sequencer with Tone.js _this10.createSequencer(); return _this10; } /** * toggles the editing part of the sequencer * @param {Integer} selected either 0 or 1 */ Eight_O_Eight.prototype.toggleEditingPart = function toggleEditingPart(selected) { this.setState({ editingPart: selected }); }; /** * callback for basic variation changes * @param {Integer} selected either 0, 1 or 2 */ Eight_O_Eight.prototype.onBasicVariation = function onBasicVariation(selected) { this.basicVariation = selected; this.loop.loopStart = '0m'; this.loop.loopEnd = '1m'; if (this.basicVariation > 0) { this.loop.loopEnd = '2m'; } if (this.basicVariation > 1) { this.loop.loopStart = '1m'; } }; /** * callback for instrument toggles * @param {Integer} index index of the insrument on the board * @param {Integer} selected either 0 or 1 */ Eight_O_Eight.prototype.onInstrumentToggle = function onInstrumentToggle(index, selected) { // change direction due to layout direction selected = selected === 1 ? 0 : 1; this.tracksMap[index].selected = selected; }; /** * callback for instrument volumes * @param {Integer} index index of the insrument on the board * @param {Integer} db value from 1 to 127 */ Eight_O_Eight.prototype.onInstrumentLevel = function onInstrumentLevel(index, db) { if (index > 0) { var value = (db - 127 / 2) / 4; this.samplers[index].volume.value = value; } }; /** * callback for instrument poti 1 * @param {Integer} index index of the insrument on the board * @param {Integer} value value from 0 to 100 in steps of 25 */ Eight_O_Eight.prototype.onInstrumentPoti_1 = function onInstrumentPoti_1(index, value) { this.tracksMap[index].poti1 = value; }; /** * callback for instrument poti 2 * @param {Integer} index index of the insrument on the board * @param {Integer} value value from 0 to 100 in steps of 25 */ Eight_O_Eight.prototype.onInstrumentPoti_2 = function onInstrumentPoti_2(index, value) { this.tracksMap[index].poti2 = value; }; /** * creates the sequencer with Tone.js (see component description for more info) */ Eight_O_Eight.prototype.createSequencer = function createSequencer() { var _this11 = this; // use the Tone.Sampler to create the tracks (http://tonejs.org/docs/#Sampler) this.samplers = []; this.loopSteps = []; for (var i = 0; i < this.steps; i++) { this.loopSteps.push(i); } // push an empty object to fix the index for the accent channel this.samplers.push({}); // then create all samplers this.createSampler(['BD'], 2); this.createSampler(['SD'], 2); this.createSampler(['LT', 'LC'], 1); this.createSampler(['MT', 'MC'], 1); this.createSampler(['HT', 'HC'], 1); this.createSampler(['RS', 'CL'], 0); this.createSampler(['CP', 'MA'], 0); this.createSampler(['CB'], 0); this.createSampler(['CY'], 2); this.createSampler(['OH'], 1); this.createSampler(['CH'], 0); // define a loop on the component so we can control it this.loop = new Tone.Sequence(function (time, col) { var column = _this11.matrix[col]; // on each iteration change the activeStep // this will be passed to our <Sequencer> component and // visually play the steps var steps = _this11.steps / 2; _this11.setState({ activeStep: col, activePart: Math.floor(col / steps) // requires a stop/start if chaged // TODO: fix it already!!! }); // loop through all instruments // and play a tone for each true value in the pattern for (var i = 1; i < INSTRUMENTS.length; i++) { if (column[i] === true) { // get the correct sample from the map var track = _this11.tracksMap[i]; var note = track.tracks[track.selected].toUpperCase(); if (track.poti1 !== false) { note += '.' + track.poti1; } if (track.poti2 !== false) { note += '.' + track.poti2; } var velocity = column[0] ? 1.3 : 0.6; _this11.samplers[i].triggerAttackRelease(note, '1m', time, velocity); } } }, this.loopSteps, '16n'); this.loop.loopStart = '0m'; this.loop.loopEnd = '1m'; // set initial options to the sequencer and start the transport Tone.Transport.bpm.value = this.initBPM; Tone.Transport.start(); // hide the loading message when all buffers are loaded Tone.Buffer.on('load', function () { _this11.setState({ buffersLoaded: true }); }); }; /** * creates a sampler for the given instrument, respects the number of potis * @param {String} handle uppercase handle of the track * @param {Integer} potiCount number of potis. describes how many samples are loaded {0|1|2} */ Eight_O_Eight.prototype.createSampler = function createSampler(handles, potiCount) { var steps = ['0', '25', '50', '75', '100']; var sampleMap = {}; /** * get the value for the sample Name part * @param {String} the string matches the value of the poti */ var getValue = function getValue(item) { var value = item; if (item === '0') { value = '00'; } else if (item === '100') { value = '10'; } return value; }; // loop trough the steps twice if needed // TODO: write a recusive function for this // some instruments have two different samples // lets add each as a main channel handles.forEach(function (handle, index) { handle = handle.toUpperCase(); // while the level poti does not count // ==> // no poti will create 1 sound in total sampleMap[handle] = BUCKET + handle + '.WAV'; // first poti will create 5 sounds in total if (potiCount >= 1) { sampleMap[handle] = {}; steps.forEach(function (item, index) { var key = item; var value = getValue(item); sampleMap[handle][key] = BUCKET + handle + value + '.WAV'; // second poti will create 25 sounds in total if (potiCount >= 2) { sampleMap[handle][key] = {}; steps.forEach(function (item, index) { var key2 = item; var value2 = getValue(item); sampleMap[handle][key][key2] = BUCKET + handle + value + value2 + '.WAV'; }); } }); } }); // send the sampler to the master and add it to the list var sampler = new Tone.Sampler(sampleMap).toMaster(); this.samplers.push(sampler); }; /** * starts and stops the loop */ Eight_O_Eight.prototype.togglePlay = function togglePlay() { var playing = this.state.playing; this.playing = !this.playing; if (this.playing) { this.loop.start(); } else { this.loop.stop(); // make sure we manually deactivate the activeStep this.setState({ activeStep: -1 }); } }; /** * sets the tempo * @param {Integer} bpm the beats per minute */ Eight_O_Eight.prototype.setTempo = function setTempo(bpm) { Tone.Transport.bpm.value = bpm; }; /** * changes the track for the pattern display * @param {Integer} handle lookup for the track */ Eight_O_Eight.prototype.changeTrack = function changeTrack(handle) { this.setState({ track: handle }); this.updatePattern(handle); }; /** * changes the master volume * @param {Number} db decibel to change by */ Eight_O_Eight.prototype.changeMasterVolume = function changeMasterVolume(db) { Tone.Master.volume.value = db; }; /** * sends the pattern to the state so the Sequencer can recognize it * @param {Integer} track the index of the track column */ Eight_O_Eight.prototype.updatePattern = function updatePattern() { var track = arguments.length <= 0 || arguments[0] === undefined ? this.state.track : arguments[0]; var pattern = []; // set the correct steps in the pattern for (var step in this.matrix) { pattern.push(this.matrix[step][track]); } this.setState({ pattern: pattern }); }; /** * used in callback for the Sequencer * @param {Integer} index index of step * @param {Boolean} selected state of step */ Eight_O_Eight.prototype.setStep = function setStep(index, selected) { var col = index + this.steps / 2 * this.state.editingPart; this.matrix[col][this.state.track] = selected; this.updatePattern(); }; /** * callback for sequencer calls setStep to send to the pattern * @param {Integer} index index of step * @param {Boolean} selected state of step */ Eight_O_Eight.prototype.onStepChange = function onStepChange(index, selected) { this.setStep(index, selected); }; /** * changes the style from original (Roland) to CodePen */ Eight_O_Eight.prototype.toggleStyle = function toggleStyle() { var style = this.state.style === 1 ? 0 : 1; this.setState({ style: style }); }; Eight_O_Eight.prototype.render = function render() { var loadingBuffers = undefined; if (!this.state.buffersLoaded) { loadingBuffers = React.createElement( 'div', { className: 'LoadingBuffers' }, React.createElement( 'div', { className: 'Loader' }, React.createElement('div', null), React.createElement('div', null), React.createElement('div', null) ), React.createElement( 'div', null, 'Loading buffers, please be patient ...' ) ); } var styles = this.styles; var tracks = this.tracksPoti; var measures = this.measuresPoti; var tempo = this.tempoPoti; var masterVolume = this.masterVolumePoti; var patternWrite = this.patternWritePoti; var titleLeft = this.state.style === 1 ? 'Thank you followers' : 'Rhythm Composer'; var titleRight = this.state.style === 1 ? 'CP-888' : 'TR-808'; var subTitle = this.state.style === 1 ? 'CodePen Controlled' : 'Computer Controlled'; var logo = this.state.style === 1 ? CODEPENLOGO : ROLANDLOGO; var classes = classNames('Eight_0_Eight', { roland: this.state.style === 0, codepen: this.state.style === 1 }); return React.createElement( 'div', { className: classes, style: styles.eightoeight }, React.createElement( 'div', null, loadingBuffers, React.createElement( 'div', { className: 'onOfflabels' }, React.createElement( 'div', null, 'Power' ), React.createElement( 'div', null, 'on' ), React.createElement( 'div', null, 'off' ) ), React.createElement(Button, { className: 'onOffButton', onClick: this.toggleStyle }), React.createElement( 'div', { className: 'Screws' }, this.screws ), logo ), React.createElement( 'div', { className: 'top', style: styles.top }, React.createElement( 'div', { className: 'left', style: { width: 230 } }, React.createElement( 'div', { style: styles.flexBox }, React.createElement( 'div', { className: 'FAKECLEAR' }, React.createElement( 'div', null, 'step number' ), React.createElement( 'div', null, 'pre-scale' ), React.createElement( 'div', null, 'track clear' ), React.createElement('div', { className: 'FAKECLEARBUTTON' }) ), React.createElement( 'div', { style: styles.patternWrite }, React.createElement(Poti, { className: 'pattern-write', label: 'pattern write', size: '60', snap: true, fullAngle: 160, value: 4, snap: true, range: [1, 6], steps: patternWrite }) ), React.createElement(Poti, { className: 'instrument-select', label: 'instrument-select', label2: 'rhythm track', size: '60', snap: true, value: 1, numbered: true, steps: tracks, range: [0, 11], onUpdate: this.changeTrack }) ), React.createElement( 'div', { style: styles.flexBox }, React.createElement( 'div', { style: { width: 140, position: 'relative' } }, React.createElement('div', { className: 'tempoBoxBorder' }), React.createElement(Poti, { label: 'tempo', className: '_ring', size: '130', fullAngle: '300', markers: 51, value: this.initBPM, range: [80, 200], steps: tempo, onUpdate: this.setTempo }) ), React.createElement( 'div', { style: styles.flexBoxColumn }, React.createElement(Poti, { className: 'measures', label: 'measures', label2: 'auto fill in', size: '60', snap: true, fullAngle: '160', steps: measures, labelsBelow: true }), React.createElement(Poti, { label: 'fine', className: '', size: '40', resolution: 0.2, fullAngle: '340', range: [-5, 5], value: 5, steps: [{ label: 'slow' }, {}, {}, {}, {}, {}, {}, {}, {}, { label: 'fast' }] }) ) ) ), React.createElement( 'div', { className: 'right' }, React.createElement( 'div', { style: styles.flexBox }, this.instruments ), React.createElement( 'div', { style: styles.flexBoxCenter }, React.createElement( 'div', { className: 'title-area', style: styles.name }, React.createElement( 'span', { className: 'primary', style: { position: 'relative', zIndex: 1, paddingRight: 30 } }, titleLeft ), React.createElement( 'span', { className: 'primary', style: { position: 'relative', zIndex: 1, fontSize: '0.5em' } }, titleRight ), React.createElement('span', { className: 'underline', style: styles.underline }), React.createElement( 'span', { className: 'secondary' }, subTitle ) ), React.createElement( 'div', { style: { margin: '5px 20px 0' } }, React.createElement(Poti, { label: 'master volume', size: '60', fullAngle: '300', range: [-30, 30], value: 0, labelsBelow: true, steps: masterVolume, onUpdate: this.changeMasterVolume }) ) ) ) ), React.createElement( 'div', { className: 'bottom', style: styles.flexBox }, React.createElement( 'div', { className: 'main-control', style: styles.mainControl }, React.createElement( 'div', null, React.createElement( 'div', null, React.createElement(Toggle, { stem: true, label: 'basic-variation', orientation: 'horizontal', lights: [0, 2], activeLight: this.state.activePart, onUpdate: this.onBasicVariation, steps: ['A', 'AB', 'B'] }) ) ), React.createElement('div', { style: styles.blackLine }), React.createElement( Button, { onClick: this.togglePlay }, React.createElement( 'div', { style: { textAlign: 'center', padding: '0 10px' } }, React.createElement( 'div', { style: { padding: '0 20px' } }, 'Start' ), React.createElement('div', { style: { height: 1, background: 'currentColor' } }), React.createElement( 'div', { style: { padding: '0 20px' } }, 'Stop' ) ) ), React.createElement( 'div', { className: 'Arrow right basic-rhythm' }, 'basic rhythm' ) ), React.createElement(Sequencer, { activeStep: this.state.activeStep, onStepChange: this.onStepChange, pattern: this.state.pattern, part: this.state.editingPart, activePart: this.state.activePart }), React.createElement( 'div', { className: 'tap-area', style: styles.tapArea }, React.createElement( 'div', null, React.createElement(Toggle, { stem: true, label: 'I/F — variation', orientation: 'horizontal', steps: ['A', 'B'], onUpdate: this.toggleEditingPart }) ), React.createElement('div', { style: styles.blackLine }), React.createElement( 'div', { style: { margin: '4px 2px', height: 20, fontFamily: 'sans-serif', fontSize: 8, textTransform: 'uppercase', textAlign: 'center', lineHeight: 1 } }, 'intro set', React.createElement('div', { style: { height: 1, background: 'currentColor', width: '100%', margin: '2px 0' } }), ' Fill in trigger' ), React.createElement( Button, { onClick: this.onTap }, React.createElement( 'div', { style: { textAlign: 'center', padding: '0 10px' } }, 'Tap' ) ), React.createElement( 'div', { className: 'Arrow left' }, 'intro/fill in' ) ) ) ); }; return Eight_O_Eight;
}(React.Component);
ReactDOM.render(React.createElement(Eight_O_Eight, null), document.body);
TR-808 | Happy 888 followers - Script Codes
TR-808 | Happy 888 followers - Script Codes
Home Page Home
Developer Gregor Adams
Username pixelass
Uploaded June 20, 2022
Rating 4.5
Size 43,959 Kb
Views 36,432
Do you need developer help for TR-808 | Happy 888 followers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gregor Adams (pixelass) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!