Note scales

Developer
Mikita
Size
12,435 Kb
Views
6,072
  1. Note scales Previews
  2. Note scales HTML Codes
  3. Note scales CSS Codes
  4. Note scales JS Codes

How do I make an note scales?

Forked from https://codepen.io/dustinarmstrong/pen/GgvMJwhttps://codepen.io/dustinarmstrong/pen/GgvMJw. What is a note scales? How do you make a note scales? This script and codes were developed by Mikita on 21 January 2023, Saturday.

Note scales Previews
IQ Test

Note scales - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Note scales</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='shell'> <div id='inner-frame'> <input checked='true' class='control hidden' id='maj' name='tonic' type='radio' value='maj'> <input class='control hidden' id='min' name='tonic' type='radio' value='min'> <input checked='true' class='control hidden' name='scale' type='radio' value='none'> <input class='control hidden' id='A' name='scale' type='radio' value='A'> <input class='control hidden' id='As' name='scale' type='radio' value='As'> <input class='control hidden' id='B' name='scale' type='radio' value='B'> <input class='control hidden' id='C' name='scale' type='radio' value='C'> <input class='control hidden' id='Cs' name='scale' type='radio' value='Cs'> <input class='control hidden' id='D' name='scale' type='radio' value='D'> <input class='control hidden' id='Ds' name='scale' type='radio' value='Ds'> <input class='control hidden' id='E' name='scale' type='radio' value='E'> <input class='control hidden' id='F' name='scale' type='radio' value='F'> <input class='control hidden' id='Fs' name='scale' type='radio' value='Fs'> <input class='control hidden' id='G' name='scale' type='radio' value='G'> <input class='control hidden' id='Gs' name='scale' type='radio' value='Gs'> <div class='panel col-4 row-2' id='speaker'> <span>•••••••</span> <span>•••••••••••</span> <span>•••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••••</span> <span>•••••••••••</span> <span>•••••••••••</span> <span>•••••••</span> </div> <div class='panel-group col-4 row-2'> <div class='panel col-4 row-1 volume' id='volume'></div> <div class='panel col-2 row-1 button' id='help'></div> <div class='panel col-2 row-1 button' id='tempo'></div> </div> <div class='panel col-8 row-2' id='screen'></div> <div class='panel col-4 row-2 knob knob--blue' id='blue-encoder'> <div class='knob__indentation'></div> </div> <div class='panel col-4 row-2 knob knob--green' id='green-encoder'> <div class='knob__indentation'></div> </div> <div class='panel col-4 row-2 knob knob--white' id='white-encoder'> <div class='knob__indentation'></div> </div> <div class='panel col-4 row-2 knob knob--orange' id='orange-encoder'> <div class='knob__indentation'></div> </div> <div class='panel-group col-2 row-2'> <div class='panel col-2 row-1 button' id='input'></div> <div class='panel col-2 row-1 button' id='album'></div> </div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <label class='panel col-2 row-1 button tonic tonic-maj' for='maj'> <span class='button-title'>maj</span> </label> <label class='panel col-2 row-1 button tonic tonic-min' for='min'> <span class='button-title'>min</span> </label> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> <label class='panel col-3 row-1 button button--right button--black note note-Fs note-Fs2' for='Fs'></label> <label class='panel col-2 row-1 button button--black note note-Gs note-Gs2' for='Gs'></label> <label class='panel col-3 row-1 button button--left button--black note note-As note-As2' for='As'></label> <label class='panel col-3 row-1 button button--right button--black note note-Cs note-Cs3' for='Cs'></label> <label class='panel col-3 row-1 button button--left button--black note note-Ds note-Ds3' for='Ds'></label> <label class='panel col-3 row-1 button button--right button--black note note-Fs note-Fs3' for='Fs'></label> <label class='panel col-2 row-1 button button--black note note-Gs note-Gs3' for='Gs'></label> <label class='panel col-3 row-1 button button--left button--black note note-As note-As3' for='As'></label> <label class='panel col-3 row-1 button button--right button--black note note-Cs note-Cs4' for='Cs'></label> <label class='panel col-3 row-1 button button--left button--black note note-Ds note-Ds4' for='Ds'></label> <div class='panel-group col-2 row-2'> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> </div> <div class='panel-group col-2 row-2'> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> </div> <div class='panel-group col-2 row-2'> <div class='panel col-2 row-1 button'></div> <div class='panel col-2 row-1 button'></div> </div> <label class='panel col-2 row-2 button button--tall note note-F note-F2' for='F'></label> <label class='panel col-2 row-2 button button--tall note note-G note-G2' for='G'></label> <label class='panel col-2 row-2 button button--tall note note-A note-A2' for='A'></label> <label class='panel col-2 row-2 button button--tall note note-B note-B2' for='B'></label> <label class='panel col-2 row-2 button button--tall note note-C note-C3' for='C'></label> <label class='panel col-2 row-2 button button--tall note note-D note-D3' for='D'></label> <label class='panel col-2 row-2 button button--tall note note-E note-E3' for='E'></label> <label class='panel col-2 row-2 button button--tall note note-F note-F3' for='F'></label> <label class='panel col-2 row-2 button button--tall note note-G note-G3' for='G'></label> <label class='panel col-2 row-2 button button--tall note note-A note-A3' for='A'></label> <label class='panel col-2 row-2 button button--tall note note-B note-B3' for='B'></label> <label class='panel col-2 row-2 button button--tall note note-C note-C4' for='C'></label> <label class='panel col-2 row-2 button button--tall note note-D note-D4' for='D'></label> <label class='panel col-2 row-2 button button--tall note note-E note-E4' for='E'></label> </div> <div id='mic'> <span>••</span> <span>••</span> </div> <div id='eq'> <span>•</span> <span>•</span> <span>•</span> <span>•</span> <span>•</span> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Note scales - Script Codes CSS Codes

.col-1 { width: 2.94118%;
}
.col-1 .col-1 { width: 100%;
}
.col-2 { width: 5.88235%;
}
.col-2 .col-1 { width: 50%;
}
.col-2 .col-2 { width: 100%;
}
.col-3 { width: 8.82353%;
}
.col-3 .col-1 { width: 33.33333%;
}
.col-3 .col-2 { width: 66.66667%;
}
.col-3 .col-3 { width: 100%;
}
.col-4 { width: 11.76471%;
}
.col-4 .col-1 { width: 25%;
}
.col-4 .col-2 { width: 50%;
}
.col-4 .col-3 { width: 75%;
}
.col-4 .col-4 { width: 100%;
}
.col-5 { width: 14.70588%;
}
.col-5 .col-1 { width: 20%;
}
.col-5 .col-2 { width: 40%;
}
.col-5 .col-3 { width: 60%;
}
.col-5 .col-4 { width: 80%;
}
.col-5 .col-5 { width: 100%;
}
.col-6 { width: 17.64706%;
}
.col-6 .col-1 { width: 16.66667%;
}
.col-6 .col-2 { width: 33.33333%;
}
.col-6 .col-3 { width: 50%;
}
.col-6 .col-4 { width: 66.66667%;
}
.col-6 .col-5 { width: 83.33333%;
}
.col-6 .col-6 { width: 100%;
}
.col-7 { width: 20.58824%;
}
.col-7 .col-1 { width: 14.28571%;
}
.col-7 .col-2 { width: 28.57143%;
}
.col-7 .col-3 { width: 42.85714%;
}
.col-7 .col-4 { width: 57.14286%;
}
.col-7 .col-5 { width: 71.42857%;
}
.col-7 .col-6 { width: 85.71429%;
}
.col-7 .col-7 { width: 100%;
}
.col-8 { width: 23.52941%;
}
.col-8 .col-1 { width: 12.5%;
}
.col-8 .col-2 { width: 25%;
}
.col-8 .col-3 { width: 37.5%;
}
.col-8 .col-4 { width: 50%;
}
.col-8 .col-5 { width: 62.5%;
}
.col-8 .col-6 { width: 75%;
}
.col-8 .col-7 { width: 87.5%;
}
.col-8 .col-8 { width: 100%;
}
.col-9 { width: 26.47059%;
}
.col-9 .col-1 { width: 11.11111%;
}
.col-9 .col-2 { width: 22.22222%;
}
.col-9 .col-3 { width: 33.33333%;
}
.col-9 .col-4 { width: 44.44444%;
}
.col-9 .col-5 { width: 55.55556%;
}
.col-9 .col-6 { width: 66.66667%;
}
.col-9 .col-7 { width: 77.77778%;
}
.col-9 .col-8 { width: 88.88889%;
}
.col-9 .col-9 { width: 100%;
}
.col-10 { width: 29.41176%;
}
.col-10 .col-1 { width: 10%;
}
.col-10 .col-2 { width: 20%;
}
.col-10 .col-3 { width: 30%;
}
.col-10 .col-4 { width: 40%;
}
.col-10 .col-5 { width: 50%;
}
.col-10 .col-6 { width: 60%;
}
.col-10 .col-7 { width: 70%;
}
.col-10 .col-8 { width: 80%;
}
.col-10 .col-9 { width: 90%;
}
.col-10 .col-10 { width: 100%;
}
.col-11 { width: 32.35294%;
}
.col-11 .col-1 { width: 9.09091%;
}
.col-11 .col-2 { width: 18.18182%;
}
.col-11 .col-3 { width: 27.27273%;
}
.col-11 .col-4 { width: 36.36364%;
}
.col-11 .col-5 { width: 45.45455%;
}
.col-11 .col-6 { width: 54.54545%;
}
.col-11 .col-7 { width: 63.63636%;
}
.col-11 .col-8 { width: 72.72727%;
}
.col-11 .col-9 { width: 81.81818%;
}
.col-11 .col-10 { width: 90.90909%;
}
.col-11 .col-11 { width: 100%;
}
.col-12 { width: 35.29412%;
}
.col-12 .col-1 { width: 8.33333%;
}
.col-12 .col-2 { width: 16.66667%;
}
.col-12 .col-3 { width: 25%;
}
.col-12 .col-4 { width: 33.33333%;
}
.col-12 .col-5 { width: 41.66667%;
}
.col-12 .col-6 { width: 50%;
}
.col-12 .col-7 { width: 58.33333%;
}
.col-12 .col-8 { width: 66.66667%;
}
.col-12 .col-9 { width: 75%;
}
.col-12 .col-10 { width: 83.33333%;
}
.col-12 .col-11 { width: 91.66667%;
}
.col-12 .col-12 { width: 100%;
}
.col-13 { width: 38.23529%;
}
.col-13 .col-1 { width: 7.69231%;
}
.col-13 .col-2 { width: 15.38462%;
}
.col-13 .col-3 { width: 23.07692%;
}
.col-13 .col-4 { width: 30.76923%;
}
.col-13 .col-5 { width: 38.46154%;
}
.col-13 .col-6 { width: 46.15385%;
}
.col-13 .col-7 { width: 53.84615%;
}
.col-13 .col-8 { width: 61.53846%;
}
.col-13 .col-9 { width: 69.23077%;
}
.col-13 .col-10 { width: 76.92308%;
}
.col-13 .col-11 { width: 84.61538%;
}
.col-13 .col-12 { width: 92.30769%;
}
.col-13 .col-13 { width: 100%;
}
.col-14 { width: 41.17647%;
}
.col-14 .col-1 { width: 7.14286%;
}
.col-14 .col-2 { width: 14.28571%;
}
.col-14 .col-3 { width: 21.42857%;
}
.col-14 .col-4 { width: 28.57143%;
}
.col-14 .col-5 { width: 35.71429%;
}
.col-14 .col-6 { width: 42.85714%;
}
.col-14 .col-7 { width: 50%;
}
.col-14 .col-8 { width: 57.14286%;
}
.col-14 .col-9 { width: 64.28571%;
}
.col-14 .col-10 { width: 71.42857%;
}
.col-14 .col-11 { width: 78.57143%;
}
.col-14 .col-12 { width: 85.71429%;
}
.col-14 .col-13 { width: 92.85714%;
}
.col-14 .col-14 { width: 100%;
}
.col-15 { width: 44.11765%;
}
.col-15 .col-1 { width: 6.66667%;
}
.col-15 .col-2 { width: 13.33333%;
}
.col-15 .col-3 { width: 20%;
}
.col-15 .col-4 { width: 26.66667%;
}
.col-15 .col-5 { width: 33.33333%;
}
.col-15 .col-6 { width: 40%;
}
.col-15 .col-7 { width: 46.66667%;
}
.col-15 .col-8 { width: 53.33333%;
}
.col-15 .col-9 { width: 60%;
}
.col-15 .col-10 { width: 66.66667%;
}
.col-15 .col-11 { width: 73.33333%;
}
.col-15 .col-12 { width: 80%;
}
.col-15 .col-13 { width: 86.66667%;
}
.col-15 .col-14 { width: 93.33333%;
}
.col-15 .col-15 { width: 100%;
}
.col-16 { width: 47.05882%;
}
.col-16 .col-1 { width: 6.25%;
}
.col-16 .col-2 { width: 12.5%;
}
.col-16 .col-3 { width: 18.75%;
}
.col-16 .col-4 { width: 25%;
}
.col-16 .col-5 { width: 31.25%;
}
.col-16 .col-6 { width: 37.5%;
}
.col-16 .col-7 { width: 43.75%;
}
.col-16 .col-8 { width: 50%;
}
.col-16 .col-9 { width: 56.25%;
}
.col-16 .col-10 { width: 62.5%;
}
.col-16 .col-11 { width: 68.75%;
}
.col-16 .col-12 { width: 75%;
}
.col-16 .col-13 { width: 81.25%;
}
.col-16 .col-14 { width: 87.5%;
}
.col-16 .col-15 { width: 93.75%;
}
.col-16 .col-16 { width: 100%;
}
.col-17 { width: 50%;
}
.col-17 .col-1 { width: 5.88235%;
}
.col-17 .col-2 { width: 11.76471%;
}
.col-17 .col-3 { width: 17.64706%;
}
.col-17 .col-4 { width: 23.52941%;
}
.col-17 .col-5 { width: 29.41176%;
}
.col-17 .col-6 { width: 35.29412%;
}
.col-17 .col-7 { width: 41.17647%;
}
.col-17 .col-8 { width: 47.05882%;
}
.col-17 .col-9 { width: 52.94118%;
}
.col-17 .col-10 { width: 58.82353%;
}
.col-17 .col-11 { width: 64.70588%;
}
.col-17 .col-12 { width: 70.58824%;
}
.col-17 .col-13 { width: 76.47059%;
}
.col-17 .col-14 { width: 82.35294%;
}
.col-17 .col-15 { width: 88.23529%;
}
.col-17 .col-16 { width: 94.11765%;
}
.col-17 .col-17 { width: 100%;
}
.col-18 { width: 52.94118%;
}
.col-18 .col-1 { width: 5.55556%;
}
.col-18 .col-2 { width: 11.11111%;
}
.col-18 .col-3 { width: 16.66667%;
}
.col-18 .col-4 { width: 22.22222%;
}
.col-18 .col-5 { width: 27.77778%;
}
.col-18 .col-6 { width: 33.33333%;
}
.col-18 .col-7 { width: 38.88889%;
}
.col-18 .col-8 { width: 44.44444%;
}
.col-18 .col-9 { width: 50%;
}
.col-18 .col-10 { width: 55.55556%;
}
.col-18 .col-11 { width: 61.11111%;
}
.col-18 .col-12 { width: 66.66667%;
}
.col-18 .col-13 { width: 72.22222%;
}
.col-18 .col-14 { width: 77.77778%;
}
.col-18 .col-15 { width: 83.33333%;
}
.col-18 .col-16 { width: 88.88889%;
}
.col-18 .col-17 { width: 94.44444%;
}
.col-18 .col-18 { width: 100%;
}
.col-19 { width: 55.88235%;
}
.col-19 .col-1 { width: 5.26316%;
}
.col-19 .col-2 { width: 10.52632%;
}
.col-19 .col-3 { width: 15.78947%;
}
.col-19 .col-4 { width: 21.05263%;
}
.col-19 .col-5 { width: 26.31579%;
}
.col-19 .col-6 { width: 31.57895%;
}
.col-19 .col-7 { width: 36.84211%;
}
.col-19 .col-8 { width: 42.10526%;
}
.col-19 .col-9 { width: 47.36842%;
}
.col-19 .col-10 { width: 52.63158%;
}
.col-19 .col-11 { width: 57.89474%;
}
.col-19 .col-12 { width: 63.15789%;
}
.col-19 .col-13 { width: 68.42105%;
}
.col-19 .col-14 { width: 73.68421%;
}
.col-19 .col-15 { width: 78.94737%;
}
.col-19 .col-16 { width: 84.21053%;
}
.col-19 .col-17 { width: 89.47368%;
}
.col-19 .col-18 { width: 94.73684%;
}
.col-19 .col-19 { width: 100%;
}
.col-20 { width: 58.82353%;
}
.col-20 .col-1 { width: 5%;
}
.col-20 .col-2 { width: 10%;
}
.col-20 .col-3 { width: 15%;
}
.col-20 .col-4 { width: 20%;
}
.col-20 .col-5 { width: 25%;
}
.col-20 .col-6 { width: 30%;
}
.col-20 .col-7 { width: 35%;
}
.col-20 .col-8 { width: 40%;
}
.col-20 .col-9 { width: 45%;
}
.col-20 .col-10 { width: 50%;
}
.col-20 .col-11 { width: 55%;
}
.col-20 .col-12 { width: 60%;
}
.col-20 .col-13 { width: 65%;
}
.col-20 .col-14 { width: 70%;
}
.col-20 .col-15 { width: 75%;
}
.col-20 .col-16 { width: 80%;
}
.col-20 .col-17 { width: 85%;
}
.col-20 .col-18 { width: 90%;
}
.col-20 .col-19 { width: 95%;
}
.col-20 .col-20 { width: 100%;
}
.col-21 { width: 61.76471%;
}
.col-21 .col-1 { width: 4.7619%;
}
.col-21 .col-2 { width: 9.52381%;
}
.col-21 .col-3 { width: 14.28571%;
}
.col-21 .col-4 { width: 19.04762%;
}
.col-21 .col-5 { width: 23.80952%;
}
.col-21 .col-6 { width: 28.57143%;
}
.col-21 .col-7 { width: 33.33333%;
}
.col-21 .col-8 { width: 38.09524%;
}
.col-21 .col-9 { width: 42.85714%;
}
.col-21 .col-10 { width: 47.61905%;
}
.col-21 .col-11 { width: 52.38095%;
}
.col-21 .col-12 { width: 57.14286%;
}
.col-21 .col-13 { width: 61.90476%;
}
.col-21 .col-14 { width: 66.66667%;
}
.col-21 .col-15 { width: 71.42857%;
}
.col-21 .col-16 { width: 76.19048%;
}
.col-21 .col-17 { width: 80.95238%;
}
.col-21 .col-18 { width: 85.71429%;
}
.col-21 .col-19 { width: 90.47619%;
}
.col-21 .col-20 { width: 95.2381%;
}
.col-21 .col-21 { width: 100%;
}
.col-22 { width: 64.70588%;
}
.col-22 .col-1 { width: 4.54545%;
}
.col-22 .col-2 { width: 9.09091%;
}
.col-22 .col-3 { width: 13.63636%;
}
.col-22 .col-4 { width: 18.18182%;
}
.col-22 .col-5 { width: 22.72727%;
}
.col-22 .col-6 { width: 27.27273%;
}
.col-22 .col-7 { width: 31.81818%;
}
.col-22 .col-8 { width: 36.36364%;
}
.col-22 .col-9 { width: 40.90909%;
}
.col-22 .col-10 { width: 45.45455%;
}
.col-22 .col-11 { width: 50%;
}
.col-22 .col-12 { width: 54.54545%;
}
.col-22 .col-13 { width: 59.09091%;
}
.col-22 .col-14 { width: 63.63636%;
}
.col-22 .col-15 { width: 68.18182%;
}
.col-22 .col-16 { width: 72.72727%;
}
.col-22 .col-17 { width: 77.27273%;
}
.col-22 .col-18 { width: 81.81818%;
}
.col-22 .col-19 { width: 86.36364%;
}
.col-22 .col-20 { width: 90.90909%;
}
.col-22 .col-21 { width: 95.45455%;
}
.col-22 .col-22 { width: 100%;
}
.col-23 { width: 67.64706%;
}
.col-23 .col-1 { width: 4.34783%;
}
.col-23 .col-2 { width: 8.69565%;
}
.col-23 .col-3 { width: 13.04348%;
}
.col-23 .col-4 { width: 17.3913%;
}
.col-23 .col-5 { width: 21.73913%;
}
.col-23 .col-6 { width: 26.08696%;
}
.col-23 .col-7 { width: 30.43478%;
}
.col-23 .col-8 { width: 34.78261%;
}
.col-23 .col-9 { width: 39.13043%;
}
.col-23 .col-10 { width: 43.47826%;
}
.col-23 .col-11 { width: 47.82609%;
}
.col-23 .col-12 { width: 52.17391%;
}
.col-23 .col-13 { width: 56.52174%;
}
.col-23 .col-14 { width: 60.86957%;
}
.col-23 .col-15 { width: 65.21739%;
}
.col-23 .col-16 { width: 69.56522%;
}
.col-23 .col-17 { width: 73.91304%;
}
.col-23 .col-18 { width: 78.26087%;
}
.col-23 .col-19 { width: 82.6087%;
}
.col-23 .col-20 { width: 86.95652%;
}
.col-23 .col-21 { width: 91.30435%;
}
.col-23 .col-22 { width: 95.65217%;
}
.col-23 .col-23 { width: 100%;
}
.col-24 { width: 70.58824%;
}
.col-24 .col-1 { width: 4.16667%;
}
.col-24 .col-2 { width: 8.33333%;
}
.col-24 .col-3 { width: 12.5%;
}
.col-24 .col-4 { width: 16.66667%;
}
.col-24 .col-5 { width: 20.83333%;
}
.col-24 .col-6 { width: 25%;
}
.col-24 .col-7 { width: 29.16667%;
}
.col-24 .col-8 { width: 33.33333%;
}
.col-24 .col-9 { width: 37.5%;
}
.col-24 .col-10 { width: 41.66667%;
}
.col-24 .col-11 { width: 45.83333%;
}
.col-24 .col-12 { width: 50%;
}
.col-24 .col-13 { width: 54.16667%;
}
.col-24 .col-14 { width: 58.33333%;
}
.col-24 .col-15 { width: 62.5%;
}
.col-24 .col-16 { width: 66.66667%;
}
.col-24 .col-17 { width: 70.83333%;
}
.col-24 .col-18 { width: 75%;
}
.col-24 .col-19 { width: 79.16667%;
}
.col-24 .col-20 { width: 83.33333%;
}
.col-24 .col-21 { width: 87.5%;
}
.col-24 .col-22 { width: 91.66667%;
}
.col-24 .col-23 { width: 95.83333%;
}
.col-24 .col-24 { width: 100%;
}
.col-25 { width: 73.52941%;
}
.col-25 .col-1 { width: 4%;
}
.col-25 .col-2 { width: 8%;
}
.col-25 .col-3 { width: 12%;
}
.col-25 .col-4 { width: 16%;
}
.col-25 .col-5 { width: 20%;
}
.col-25 .col-6 { width: 24%;
}
.col-25 .col-7 { width: 28%;
}
.col-25 .col-8 { width: 32%;
}
.col-25 .col-9 { width: 36%;
}
.col-25 .col-10 { width: 40%;
}
.col-25 .col-11 { width: 44%;
}
.col-25 .col-12 { width: 48%;
}
.col-25 .col-13 { width: 52%;
}
.col-25 .col-14 { width: 56%;
}
.col-25 .col-15 { width: 60%;
}
.col-25 .col-16 { width: 64%;
}
.col-25 .col-17 { width: 68%;
}
.col-25 .col-18 { width: 72%;
}
.col-25 .col-19 { width: 76%;
}
.col-25 .col-20 { width: 80%;
}
.col-25 .col-21 { width: 84%;
}
.col-25 .col-22 { width: 88%;
}
.col-25 .col-23 { width: 92%;
}
.col-25 .col-24 { width: 96%;
}
.col-25 .col-25 { width: 100%;
}
.col-26 { width: 76.47059%;
}
.col-26 .col-1 { width: 3.84615%;
}
.col-26 .col-2 { width: 7.69231%;
}
.col-26 .col-3 { width: 11.53846%;
}
.col-26 .col-4 { width: 15.38462%;
}
.col-26 .col-5 { width: 19.23077%;
}
.col-26 .col-6 { width: 23.07692%;
}
.col-26 .col-7 { width: 26.92308%;
}
.col-26 .col-8 { width: 30.76923%;
}
.col-26 .col-9 { width: 34.61538%;
}
.col-26 .col-10 { width: 38.46154%;
}
.col-26 .col-11 { width: 42.30769%;
}
.col-26 .col-12 { width: 46.15385%;
}
.col-26 .col-13 { width: 50%;
}
.col-26 .col-14 { width: 53.84615%;
}
.col-26 .col-15 { width: 57.69231%;
}
.col-26 .col-16 { width: 61.53846%;
}
.col-26 .col-17 { width: 65.38462%;
}
.col-26 .col-18 { width: 69.23077%;
}
.col-26 .col-19 { width: 73.07692%;
}
.col-26 .col-20 { width: 76.92308%;
}
.col-26 .col-21 { width: 80.76923%;
}
.col-26 .col-22 { width: 84.61538%;
}
.col-26 .col-23 { width: 88.46154%;
}
.col-26 .col-24 { width: 92.30769%;
}
.col-26 .col-25 { width: 96.15385%;
}
.col-26 .col-26 { width: 100%;
}
.col-27 { width: 79.41176%;
}
.col-27 .col-1 { width: 3.7037%;
}
.col-27 .col-2 { width: 7.40741%;
}
.col-27 .col-3 { width: 11.11111%;
}
.col-27 .col-4 { width: 14.81481%;
}
.col-27 .col-5 { width: 18.51852%;
}
.col-27 .col-6 { width: 22.22222%;
}
.col-27 .col-7 { width: 25.92593%;
}
.col-27 .col-8 { width: 29.62963%;
}
.col-27 .col-9 { width: 33.33333%;
}
.col-27 .col-10 { width: 37.03704%;
}
.col-27 .col-11 { width: 40.74074%;
}
.col-27 .col-12 { width: 44.44444%;
}
.col-27 .col-13 { width: 48.14815%;
}
.col-27 .col-14 { width: 51.85185%;
}
.col-27 .col-15 { width: 55.55556%;
}
.col-27 .col-16 { width: 59.25926%;
}
.col-27 .col-17 { width: 62.96296%;
}
.col-27 .col-18 { width: 66.66667%;
}
.col-27 .col-19 { width: 70.37037%;
}
.col-27 .col-20 { width: 74.07407%;
}
.col-27 .col-21 { width: 77.77778%;
}
.col-27 .col-22 { width: 81.48148%;
}
.col-27 .col-23 { width: 85.18519%;
}
.col-27 .col-24 { width: 88.88889%;
}
.col-27 .col-25 { width: 92.59259%;
}
.col-27 .col-26 { width: 96.2963%;
}
.col-27 .col-27 { width: 100%;
}
.col-28 { width: 82.35294%;
}
.col-28 .col-1 { width: 3.57143%;
}
.col-28 .col-2 { width: 7.14286%;
}
.col-28 .col-3 { width: 10.71429%;
}
.col-28 .col-4 { width: 14.28571%;
}
.col-28 .col-5 { width: 17.85714%;
}
.col-28 .col-6 { width: 21.42857%;
}
.col-28 .col-7 { width: 25%;
}
.col-28 .col-8 { width: 28.57143%;
}
.col-28 .col-9 { width: 32.14286%;
}
.col-28 .col-10 { width: 35.71429%;
}
.col-28 .col-11 { width: 39.28571%;
}
.col-28 .col-12 { width: 42.85714%;
}
.col-28 .col-13 { width: 46.42857%;
}
.col-28 .col-14 { width: 50%;
}
.col-28 .col-15 { width: 53.57143%;
}
.col-28 .col-16 { width: 57.14286%;
}
.col-28 .col-17 { width: 60.71429%;
}
.col-28 .col-18 { width: 64.28571%;
}
.col-28 .col-19 { width: 67.85714%;
}
.col-28 .col-20 { width: 71.42857%;
}
.col-28 .col-21 { width: 75%;
}
.col-28 .col-22 { width: 78.57143%;
}
.col-28 .col-23 { width: 82.14286%;
}
.col-28 .col-24 { width: 85.71429%;
}
.col-28 .col-25 { width: 89.28571%;
}
.col-28 .col-26 { width: 92.85714%;
}
.col-28 .col-27 { width: 96.42857%;
}
.col-28 .col-28 { width: 100%;
}
.col-29 { width: 85.29412%;
}
.col-29 .col-1 { width: 3.44828%;
}
.col-29 .col-2 { width: 6.89655%;
}
.col-29 .col-3 { width: 10.34483%;
}
.col-29 .col-4 { width: 13.7931%;
}
.col-29 .col-5 { width: 17.24138%;
}
.col-29 .col-6 { width: 20.68966%;
}
.col-29 .col-7 { width: 24.13793%;
}
.col-29 .col-8 { width: 27.58621%;
}
.col-29 .col-9 { width: 31.03448%;
}
.col-29 .col-10 { width: 34.48276%;
}
.col-29 .col-11 { width: 37.93103%;
}
.col-29 .col-12 { width: 41.37931%;
}
.col-29 .col-13 { width: 44.82759%;
}
.col-29 .col-14 { width: 48.27586%;
}
.col-29 .col-15 { width: 51.72414%;
}
.col-29 .col-16 { width: 55.17241%;
}
.col-29 .col-17 { width: 58.62069%;
}
.col-29 .col-18 { width: 62.06897%;
}
.col-29 .col-19 { width: 65.51724%;
}
.col-29 .col-20 { width: 68.96552%;
}
.col-29 .col-21 { width: 72.41379%;
}
.col-29 .col-22 { width: 75.86207%;
}
.col-29 .col-23 { width: 79.31034%;
}
.col-29 .col-24 { width: 82.75862%;
}
.col-29 .col-25 { width: 86.2069%;
}
.col-29 .col-26 { width: 89.65517%;
}
.col-29 .col-27 { width: 93.10345%;
}
.col-29 .col-28 { width: 96.55172%;
}
.col-29 .col-29 { width: 100%;
}
.col-30 { width: 88.23529%;
}
.col-30 .col-1 { width: 3.33333%;
}
.col-30 .col-2 { width: 6.66667%;
}
.col-30 .col-3 { width: 10%;
}
.col-30 .col-4 { width: 13.33333%;
}
.col-30 .col-5 { width: 16.66667%;
}
.col-30 .col-6 { width: 20%;
}
.col-30 .col-7 { width: 23.33333%;
}
.col-30 .col-8 { width: 26.66667%;
}
.col-30 .col-9 { width: 30%;
}
.col-30 .col-10 { width: 33.33333%;
}
.col-30 .col-11 { width: 36.66667%;
}
.col-30 .col-12 { width: 40%;
}
.col-30 .col-13 { width: 43.33333%;
}
.col-30 .col-14 { width: 46.66667%;
}
.col-30 .col-15 { width: 50%;
}
.col-30 .col-16 { width: 53.33333%;
}
.col-30 .col-17 { width: 56.66667%;
}
.col-30 .col-18 { width: 60%;
}
.col-30 .col-19 { width: 63.33333%;
}
.col-30 .col-20 { width: 66.66667%;
}
.col-30 .col-21 { width: 70%;
}
.col-30 .col-22 { width: 73.33333%;
}
.col-30 .col-23 { width: 76.66667%;
}
.col-30 .col-24 { width: 80%;
}
.col-30 .col-25 { width: 83.33333%;
}
.col-30 .col-26 { width: 86.66667%;
}
.col-30 .col-27 { width: 90%;
}
.col-30 .col-28 { width: 93.33333%;
}
.col-30 .col-29 { width: 96.66667%;
}
.col-30 .col-30 { width: 100%;
}
.col-31 { width: 91.17647%;
}
.col-31 .col-1 { width: 3.22581%;
}
.col-31 .col-2 { width: 6.45161%;
}
.col-31 .col-3 { width: 9.67742%;
}
.col-31 .col-4 { width: 12.90323%;
}
.col-31 .col-5 { width: 16.12903%;
}
.col-31 .col-6 { width: 19.35484%;
}
.col-31 .col-7 { width: 22.58065%;
}
.col-31 .col-8 { width: 25.80645%;
}
.col-31 .col-9 { width: 29.03226%;
}
.col-31 .col-10 { width: 32.25806%;
}
.col-31 .col-11 { width: 35.48387%;
}
.col-31 .col-12 { width: 38.70968%;
}
.col-31 .col-13 { width: 41.93548%;
}
.col-31 .col-14 { width: 45.16129%;
}
.col-31 .col-15 { width: 48.3871%;
}
.col-31 .col-16 { width: 51.6129%;
}
.col-31 .col-17 { width: 54.83871%;
}
.col-31 .col-18 { width: 58.06452%;
}
.col-31 .col-19 { width: 61.29032%;
}
.col-31 .col-20 { width: 64.51613%;
}
.col-31 .col-21 { width: 67.74194%;
}
.col-31 .col-22 { width: 70.96774%;
}
.col-31 .col-23 { width: 74.19355%;
}
.col-31 .col-24 { width: 77.41935%;
}
.col-31 .col-25 { width: 80.64516%;
}
.col-31 .col-26 { width: 83.87097%;
}
.col-31 .col-27 { width: 87.09677%;
}
.col-31 .col-28 { width: 90.32258%;
}
.col-31 .col-29 { width: 93.54839%;
}
.col-31 .col-30 { width: 96.77419%;
}
.col-31 .col-31 { width: 100%;
}
.col-32 { width: 94.11765%;
}
.col-32 .col-1 { width: 3.125%;
}
.col-32 .col-2 { width: 6.25%;
}
.col-32 .col-3 { width: 9.375%;
}
.col-32 .col-4 { width: 12.5%;
}
.col-32 .col-5 { width: 15.625%;
}
.col-32 .col-6 { width: 18.75%;
}
.col-32 .col-7 { width: 21.875%;
}
.col-32 .col-8 { width: 25%;
}
.col-32 .col-9 { width: 28.125%;
}
.col-32 .col-10 { width: 31.25%;
}
.col-32 .col-11 { width: 34.375%;
}
.col-32 .col-12 { width: 37.5%;
}
.col-32 .col-13 { width: 40.625%;
}
.col-32 .col-14 { width: 43.75%;
}
.col-32 .col-15 { width: 46.875%;
}
.col-32 .col-16 { width: 50%;
}
.col-32 .col-17 { width: 53.125%;
}
.col-32 .col-18 { width: 56.25%;
}
.col-32 .col-19 { width: 59.375%;
}
.col-32 .col-20 { width: 62.5%;
}
.col-32 .col-21 { width: 65.625%;
}
.col-32 .col-22 { width: 68.75%;
}
.col-32 .col-23 { width: 71.875%;
}
.col-32 .col-24 { width: 75%;
}
.col-32 .col-25 { width: 78.125%;
}
.col-32 .col-26 { width: 81.25%;
}
.col-32 .col-27 { width: 84.375%;
}
.col-32 .col-28 { width: 87.5%;
}
.col-32 .col-29 { width: 90.625%;
}
.col-32 .col-30 { width: 93.75%;
}
.col-32 .col-31 { width: 96.875%;
}
.col-32 .col-32 { width: 100%;
}
.col-33 { width: 97.05882%;
}
.col-33 .col-1 { width: 3.0303%;
}
.col-33 .col-2 { width: 6.06061%;
}
.col-33 .col-3 { width: 9.09091%;
}
.col-33 .col-4 { width: 12.12121%;
}
.col-33 .col-5 { width: 15.15152%;
}
.col-33 .col-6 { width: 18.18182%;
}
.col-33 .col-7 { width: 21.21212%;
}
.col-33 .col-8 { width: 24.24242%;
}
.col-33 .col-9 { width: 27.27273%;
}
.col-33 .col-10 { width: 30.30303%;
}
.col-33 .col-11 { width: 33.33333%;
}
.col-33 .col-12 { width: 36.36364%;
}
.col-33 .col-13 { width: 39.39394%;
}
.col-33 .col-14 { width: 42.42424%;
}
.col-33 .col-15 { width: 45.45455%;
}
.col-33 .col-16 { width: 48.48485%;
}
.col-33 .col-17 { width: 51.51515%;
}
.col-33 .col-18 { width: 54.54545%;
}
.col-33 .col-19 { width: 57.57576%;
}
.col-33 .col-20 { width: 60.60606%;
}
.col-33 .col-21 { width: 63.63636%;
}
.col-33 .col-22 { width: 66.66667%;
}
.col-33 .col-23 { width: 69.69697%;
}
.col-33 .col-24 { width: 72.72727%;
}
.col-33 .col-25 { width: 75.75758%;
}
.col-33 .col-26 { width: 78.78788%;
}
.col-33 .col-27 { width: 81.81818%;
}
.col-33 .col-28 { width: 84.84848%;
}
.col-33 .col-29 { width: 87.87879%;
}
.col-33 .col-30 { width: 90.90909%;
}
.col-33 .col-31 { width: 93.93939%;
}
.col-33 .col-32 { width: 96.9697%;
}
.col-33 .col-33 { width: 100%;
}
.col-34 { width: 100%;
}
.col-34 .col-1 { width: 2.94118%;
}
.col-34 .col-2 { width: 5.88235%;
}
.col-34 .col-3 { width: 8.82353%;
}
.col-34 .col-4 { width: 11.76471%;
}
.col-34 .col-5 { width: 14.70588%;
}
.col-34 .col-6 { width: 17.64706%;
}
.col-34 .col-7 { width: 20.58824%;
}
.col-34 .col-8 { width: 23.52941%;
}
.col-34 .col-9 { width: 26.47059%;
}
.col-34 .col-10 { width: 29.41176%;
}
.col-34 .col-11 { width: 32.35294%;
}
.col-34 .col-12 { width: 35.29412%;
}
.col-34 .col-13 { width: 38.23529%;
}
.col-34 .col-14 { width: 41.17647%;
}
.col-34 .col-15 { width: 44.11765%;
}
.col-34 .col-16 { width: 47.05882%;
}
.col-34 .col-17 { width: 50%;
}
.col-34 .col-18 { width: 52.94118%;
}
.col-34 .col-19 { width: 55.88235%;
}
.col-34 .col-20 { width: 58.82353%;
}
.col-34 .col-21 { width: 61.76471%;
}
.col-34 .col-22 { width: 64.70588%;
}
.col-34 .col-23 { width: 67.64706%;
}
.col-34 .col-24 { width: 70.58824%;
}
.col-34 .col-25 { width: 73.52941%;
}
.col-34 .col-26 { width: 76.47059%;
}
.col-34 .col-27 { width: 79.41176%;
}
.col-34 .col-28 { width: 82.35294%;
}
.col-34 .col-29 { width: 85.29412%;
}
.col-34 .col-30 { width: 88.23529%;
}
.col-34 .col-31 { width: 91.17647%;
}
.col-34 .col-32 { width: 94.11765%;
}
.col-34 .col-33 { width: 97.05882%;
}
.col-34 .col-34 { width: 100%;
}
.row-1 { height: 16.66667%;
}
.row-1 .row-1 { height: 100%;
}
.row-2 { height: 33.33333%;
}
.row-2 .row-1 { height: 50%;
}
.row-2 .row-2 { height: 100%;
}
.row-3 { height: 50%;
}
.row-3 .row-1 { height: 33.33333%;
}
.row-3 .row-2 { height: 66.66667%;
}
.row-3 .row-3 { height: 100%;
}
.row-4 { height: 66.66667%;
}
.row-4 .row-1 { height: 25%;
}
.row-4 .row-2 { height: 50%;
}
.row-4 .row-3 { height: 75%;
}
.row-4 .row-4 { height: 100%;
}
.row-5 { height: 83.33333%;
}
.row-5 .row-1 { height: 20%;
}
.row-5 .row-2 { height: 40%;
}
.row-5 .row-3 { height: 60%;
}
.row-5 .row-4 { height: 80%;
}
.row-5 .row-5 { height: 100%;
}
.row-6 { height: 100%;
}
.row-6 .row-1 { height: 16.66667%;
}
.row-6 .row-2 { height: 33.33333%;
}
.row-6 .row-3 { height: 50%;
}
.row-6 .row-4 { height: 66.66667%;
}
.row-6 .row-5 { height: 83.33333%;
}
.row-6 .row-6 { height: 100%;
}
* { box-sizing: border-box; outline: none; border: none;
}
body { -ms-touch-action: manipulation; touch-action: manipulation; background-repeat: no-repeat; background-position: center center; background-color: #0b0b0b; font-size: 16px; box-sizing: border-box; position: relative; height: 100vh; min-height: 500px; min-width: 1300px;
}
body #shell { opacity: 1; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.1), inset -1px -1px 2px 1px rgba(0, 0, 0, 0.3), inset 1px 1px 2px 0 rgba(255, 255, 255, 0.6); display: block; position: relative; height: 26.6em; width: 74.6em; background: #d1d3dc; border-radius: 1em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
body #shell #inner-frame { box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.5); display: block; position: absolute; top: 4.6%; left: 1.8%; width: 92%; height: 91.4%; background: rgba(0, 0, 0, 0.3); border-radius: 0.3em;
}
body #shell #inner-frame .panel { display: table-cell; position: relative; float: left; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2), inset -1px -1px 1px 0 rgba(0, 0, 0, 0.3), inset 1px 1px 2px 0 rgba(255, 255, 255, 0.6); box-sizing: border-box; background: #d1d3dc; border: 0.07rem solid rgba(0, 0, 0, 0.9); border-radius: 0.2em;
}
body #shell #inner-frame .panel-group { float: left;
}
body #shell #inner-frame .panel-group .panel { display: inline-block; padding: 0; margin: 0;
}
body #shell #inner-frame #speaker { font-family: Helvetia Neue, sans-serif; letter-spacing: 0.18em; padding-top: 1.3%; text-align: center; font-size: 1em; line-height: 0; color: black;
}
body #shell #inner-frame #speaker span { display: block; height: auto; margin-bottom: 6.5%; text-shadow: -0.1em -0.1em 1px rgba(0, 0, 0, 0.25), 0.1em 0.1em 1px rgba(255, 255, 255, 0.3);
}
body #shell #inner-frame .volume:before { content: ""; box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2); border-radius: 100%; height: 0.5em; width: 0.5em; position: absolute; top: 60%; left: 20%;
}
body #shell #inner-frame .volume:after { content: ""; background: white; border: 0.01rem solid rgba(0, 0, 0, 0.5); border-radius: 100%; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3), -2px -2px 7px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.2), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3); display: block; height: 65%; width: 33%; margin: 7%;
}
body #shell #inner-frame .knob { position: relative;
}
body #shell #inner-frame .knob:before { content: ""; border: 0.01rem solid rgba(0, 0, 0, 0.5); border-radius: 100%; box-shadow: -1px -1px 3px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3); display: block; height: 60%; width: 60%; margin: 20%;
}
body #shell #inner-frame .knob:after { content: ""; background: orange; border-radius: 100%; box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2), -2px -2px 7px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.2), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3); display: block; height: 36%; position: absolute; top: 0; left: 0; width: 36%; margin: 32%;
}
body #shell #inner-frame .knob--blue:after { background: #70b2ec;
}
body #shell #inner-frame .knob--green:after { background: #5dcb7e;
}
body #shell #inner-frame .knob--white:after { background: white;
}
body #shell #inner-frame .knob--orange:after { background: #ed753b;
}
body #shell #inner-frame .knob__indentation { border-radius: 1em; box-sizing: border-box; box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2); display: block; position: absolute; height: 8%; width: 23%; margin: 45.5% 39%; top: 0; left: 0; z-index: 2;
}
body #shell #inner-frame .button { box-sizing: border-box; -webkit-transition: box-shadow 0.15s; transition: box-shadow 0.15s;
}
body #shell #inner-frame .button:after { background: #d1d3dc; -webkit-transition: -webkit-transform 0.15s; transition: -webkit-transform 0.15s; transition: transform 0.15s; transition: transform 0.15s, -webkit-transform 0.15s; border-radius: 100%; box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.45), -1px -1px 4px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 0 rgba(0, 0, 0, 0.2), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3); content: ""; display: block; width: 65%; height: 65%; margin: 15% auto; -webkit-transform: scale(1); transform: scale(1);
}
body #shell #inner-frame .button:active { box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2), inset -1px -1px 1px 0 rgba(0, 0, 0, 0.3), inset 0px 1px 2px 1px rgba(20, 20, 20, 0.4), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3);
}
body #shell #inner-frame .button:active:after { -webkit-transform: scale(0.99); transform: scale(0.99);
}
body #shell #inner-frame .button--black:after { background: -webkit-radial-gradient(center ellipse, #000000 61%, #d1d3dc 61%); background: radial-gradient(ellipse at center, #000000 61%, #d1d3dc 61%);
}
body #shell #inner-frame .button--left:after { margin: 10% 12%; width: 44%;
}
body #shell #inner-frame .button--right:after { float: right; margin: 10% 12%; width: 44%;
}
body #shell #inner-frame .button--tall:after { height: 83%; border-radius: 3em;
}
body #shell #inner-frame #screen { background: black; background: -webkit-linear-gradient(315deg, #131313 0%, #1c1c1c 8%, #111111 22%, #1e1e1e 40%, #000000 42%, #333333 100%); background: linear-gradient(135deg, #131313 0%, #1c1c1c 8%, #111111 22%, #1e1e1e 40%, #000000 42%, #333333 100%);
}
body #mic { line-height: 0; position: absolute; right: 2%; top: 10.25%; font-family: Helvetia Neue, sans-serif; letter-spacing: 0.18em; text-align: center; font-size: 1em; line-height: 0; color: black;
}
body #mic span { display: block; height: auto; margin-bottom: 0.7em; text-shadow: -0.1em -0.1em 1px rgba(0, 0, 0, 0.25), 0.1em 0.1em 1px rgba(255, 255, 255, 0.3);
}
body #eq { line-height: 0; position: absolute; right: 2.8%; top: 36.5%; font-family: Helvetia Neue, sans-serif; text-align: center; font-size: 1em; line-height: 0; color: black;
}
body #eq span { display: block; height: auto; margin-bottom: 0.75em; text-shadow: -0.1em -0.1em 1px rgba(0, 0, 0, 0.25), 0.1em 0.1em 1px rgba(255, 255, 255, 0.3);
}
.hidden { display: none;
}
.button-title { position: absolute; font-family: helvetica, arial; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; 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; color: #3c3c3c;
}
.control[value="maj"]:checked ~ .tonic-maj:before,
.control[value="min"]:checked ~ .tonic-min:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: orange;
}
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-A:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-B:before,
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-Cs:before,
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-D:before,
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-E:before,
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-Fs:before,
.control[value="maj"]:checked ~ .control[value="A"]:checked ~ .note-Gs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-A:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-B:before,
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-C:before,
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-D:before,
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-E:before,
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-F:before,
.control[value="min"]:checked ~ .control[value="A"]:checked ~ .note-G:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-As:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-C:before,
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-D:before,
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-Ds:before,
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-F:before,
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-G:before,
.control[value="maj"]:checked ~ .control[value="As"]:checked ~ .note-A:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-As:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-C:before,
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-Cs:before,
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-Ds:before,
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-F:before,
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-Fs:before,
.control[value="min"]:checked ~ .control[value="As"]:checked ~ .note-Gs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-B:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-Cs:before,
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-Ds:before,
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-E:before,
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-Fs:before,
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-Gs:before,
.control[value="maj"]:checked ~ .control[value="B"]:checked ~ .note-As:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-B:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-Cs:before,
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-D:before,
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-E:before,
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-Fs:before,
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-G:before,
.control[value="min"]:checked ~ .control[value="B"]:checked ~ .note-A:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-C:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-D:before,
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-E:before,
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-F:before,
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-G:before,
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-A:before,
.control[value="maj"]:checked ~ .control[value="C"]:checked ~ .note-B:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-C:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-D:before,
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-Ds:before,
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-F:before,
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-G:before,
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-Gs:before,
.control[value="min"]:checked ~ .control[value="C"]:checked ~ .note-As:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-Cs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-Ds:before,
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-F:before,
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-Fs:before,
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-Gs:before,
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-As:before,
.control[value="maj"]:checked ~ .control[value="Cs"]:checked ~ .note-C:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-Cs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-Ds:before,
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-E:before,
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-Fs:before,
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-Gs:before,
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-A:before,
.control[value="min"]:checked ~ .control[value="Cs"]:checked ~ .note-B:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-D:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-E:before,
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-Fs:before,
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-G:before,
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-A:before,
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-B:before,
.control[value="maj"]:checked ~ .control[value="D"]:checked ~ .note-Cs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-D:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-E:before,
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-F:before,
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-G:before,
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-A:before,
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-As:before,
.control[value="min"]:checked ~ .control[value="D"]:checked ~ .note-C:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-Ds:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-F:before,
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-G:before,
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-Gs:before,
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-As:before,
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-C:before,
.control[value="maj"]:checked ~ .control[value="Ds"]:checked ~ .note-D:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-Ds:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-F:before,
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-Fs:before,
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-Gs:before,
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-As:before,
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-B:before,
.control[value="min"]:checked ~ .control[value="Ds"]:checked ~ .note-Cs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-E:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-Fs:before,
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-Gs:before,
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-A:before,
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-B:before,
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-Cs:before,
.control[value="maj"]:checked ~ .control[value="E"]:checked ~ .note-Ds:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-E:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-Fs:before,
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-G:before,
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-A:before,
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-B:before,
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-C:before,
.control[value="min"]:checked ~ .control[value="E"]:checked ~ .note-D:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-F:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-G:before,
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-A:before,
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-As:before,
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-C:before,
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-D:before,
.control[value="maj"]:checked ~ .control[value="F"]:checked ~ .note-E:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-F:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-G:before,
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-Gs:before,
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-As:before,
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-C:before,
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-Cs:before,
.control[value="min"]:checked ~ .control[value="F"]:checked ~ .note-Ds:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-Fs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-Gs:before,
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-As:before,
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-B:before,
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-Cs:before,
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-Ds:before,
.control[value="maj"]:checked ~ .control[value="Fs"]:checked ~ .note-F:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-Fs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-Gs:before,
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-A:before,
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-B:before,
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-Cs:before,
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-D:before,
.control[value="min"]:checked ~ .control[value="Fs"]:checked ~ .note-E:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-G:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-A:before,
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-B:before,
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-C:before,
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-D:before,
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-E:before,
.control[value="maj"]:checked ~ .control[value="G"]:checked ~ .note-Fs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-G:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-A:before,
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-As:before,
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-C:before,
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-D:before,
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-Ds:before,
.control[value="min"]:checked ~ .control[value="G"]:checked ~ .note-F:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-Gs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-As:before,
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-C:before,
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-Cs:before,
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-Ds:before,
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-F:before,
.control[value="maj"]:checked ~ .control[value="Gs"]:checked ~ .note-G:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-Gs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: blue;
}
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-As:before,
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-B:before,
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-Cs:before,
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-Ds:before,
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-E:before,
.control[value="min"]:checked ~ .control[value="Gs"]:checked ~ .note-Fs:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: green;
}

Note scales - Script Codes JS Codes

(function() {
}).call(this);
Note scales - Script Codes
Note scales - Script Codes
Home Page Home
Developer Mikita
Username MikitaLisavets
Uploaded January 21, 2023
Rating 3
Size 12,435 Kb
Views 6,072
Do you need developer help for Note scales?

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!

Mikita (MikitaLisavets) Script Codes
Name
Jquery.scrollbar
Cards Menu
Graph
Demon deer
Spin menu
Rollers
Simple pure CSS3 donut chart
Blur
Target scroll callback
Loader
Create amazing sales emails 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!