Skip to content

Commit

Permalink
v1.1
Browse files Browse the repository at this point in the history
filter sweep option for every sequencer step
small layout and style changes
update resources
Valent-in committed Apr 28, 2024
1 parent 5418f58 commit bfd8941
Showing 19 changed files with 2,325 additions and 824 deletions.
40 changes: 19 additions & 21 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -115,8 +115,8 @@ a {
}

#header-tabs .tab--active {
background-color: #143;
border: 1px solid #576;
background-color: #242;
border: 1px solid #484;
color: #ccc;
}

@@ -128,15 +128,15 @@ a {
content: "M";
font-size: 0.6rem;
font-weight: bold;
color: orange;
color: #fa0;
position: absolute;
top: 0;
right: 2px;
}

#pattern-footer .tab--active {
background-color: #224;
border: 1px solid #55a;
background-color: #225;
border: 1px solid #55c;
color: #ccc;
}

@@ -238,7 +238,7 @@ button.button--play.button--play-loop {
#pattern-name-area,
#song-title-area,
#synth-name-area {
color: orange;
color: #fa0;
padding: 2px 8px;
max-width: 40vw;
overflow: hidden;
@@ -375,35 +375,35 @@ button.button--play.button--play-loop {
}

#synth-main > div.border-osc {
border-top: 3px solid #777;
border-top: 2px solid #777;
}

#synth-main > div.border-osc-third {
border-top: 3px solid #444;
border-top: 2px solid #444;
}

#synth-main > div.border-envelope {
border-top: 3px solid #088;
border-top: 2px solid #4bd;
}

#synth-main > div.border-filter {
border-top: 3px solid #890;
border-top: 2px solid #b4d;
}

#synth-main > div.border-osc-mod {
border-top: 2px dashed #777;
}

#synth-main > div.border-filter-mod {
border-top: 2px dashed #890;
border-top: 2px dashed #b4d;
}

#synth-main > div.border-amp-mod {
border-top: 2px dashed #444;
}

#synth-main > div.border-mod-envelope {
border-top: 3px solid #62b;
border-top: 2px solid #db4;
}

#synth-main > div > div:last-child {
@@ -460,10 +460,6 @@ button.button--play.button--play-loop {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.highlight-cyan {
color: #7dd;
font-weight: bold;
}

@@ -603,7 +599,7 @@ input[type=range].range--volume {
}

#piano-container.show-letters .letter-mark {
color: #588;
color: #579;
}

.piano-key-white {
@@ -615,7 +611,8 @@ input[type=range].range--volume {
}

.key--pressed {
box-shadow: inset 0 0 0 3px #c18600;
box-shadow: inset 0 0 1px 3px #d44;
border-color: #d44;
}

.synth-list-entry {
@@ -680,7 +677,7 @@ input[type=range].range--volume {
.muted-mark:after {
content: "Muted";
font-size: 0.6rem;
color: orange;
color: #fa0;
float: right;
margin-top: -4px;
}
@@ -822,6 +819,7 @@ input[type=range].range--volume {
background-size: auto 25%;
overflow-x: hidden;
text-overflow: ellipsis;
text-align: left;
}

#button-color-select {
@@ -867,11 +865,11 @@ button.button--shadowed:active {
}

button.button--highlight-orange {
box-shadow: inset 0 0 0 2px orange;
box-shadow: inset 0 0 0 2px #fa0;
}

button.button--highlight-yellow {
box-shadow: inset 0 0 0 1px #890;
box-shadow: inset 0 0 0 1px #980;
}

#menu-synth-list-container {
143 changes: 141 additions & 2 deletions css/table-pattern.css
Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@
border-bottom: 1px solid #6a6a6a;
}

#pattern-main table tr:not(:first-child) td:nth-child(4n+2):not(.shade) {
#pattern-main table tr:not(:first-child):not(:last-child) td:nth-child(4n+2):not(.shade) {
background-color: #1e1e1e;
}

@@ -85,6 +85,10 @@
border-bottom: 2px solid #111;
}

#pattern-main table td.key--pressed {
border-color: #d44;
}

#note-length-control {
position: absolute;
box-sizing: border-box;
@@ -144,7 +148,7 @@
background-color: #111;
border: 1px solid #696969;
box-sizing: border-box;
background-image: url("../img/volume.svg");
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='21' width='47'><path d='M 0,21 47,21 47,0' style='fill:rgb(153,221,119);stroke:none'/></svg>");
background-position: 1px 2px;
background-size: 47px 21px;
background-repeat: no-repeat;
@@ -291,4 +295,139 @@

.vol--96::before {
box-shadow: inset 0 17px 0 0 rgba(0, 0, 0, 0.3);
}

#pattern-main table tr:last-child td {
bottom: 0;
position: -webkit-sticky;
position: sticky;
z-index: 1;
border-top: 1px solid #444;
height: 30px;
}

#pattern-main table tr:last-child td:first-child {
z-index: 2;
overflow: visible;
border: 1px solid #555;
background-color: #333;
}

#pattern-main table tr:last-child td:first-child:hover {
background-color: #3c3c3c;
}

#pattern-auto-row td {
background-color: #111;
}

#pattern-auto-row td.active {
background-color: #241a34;
}

#pattern-auto-row .filter-bar {
position: absolute;
left: 1px;
bottom: 1px;
width: 6px;
background-color: #333;
pointer-events: none;
}

#pattern-auto-row .filter-bar:last-child {
left: 8px;
}

#pattern-auto-row td.active .filter-bar {
background-color: #b4d;
}

#pattern-auto-row td.active .filter-bar:last-child {
background-color: #97d;
}

#pattern-auto-row.inactive td {
background-color: #090909;
}

#pattern-auto-row.inactive td.active {
background-color: #322;
}

#pattern-auto-row.inactive td > div {
display: none;
}

#automation-levels-set .filter-bar {
position: absolute;
left: 1px;
bottom: 1px;
width: 12px;
background-color: #b4d;
pointer-events: none;
}

#automation-levels-set .filter-bar:last-child {
position: absolute;
left: 14px;
bottom: 1px;
width: 12px;
background-color: #97d;
pointer-events: none;
}

#automation-levels-control {
position: absolute;
left: 2px;
bottom: 32px;
height: 208px;
width: 64px;
border: 1px solid #696969;
border-radius: 3px;
background-color: #191919;
}

#automation-levels-control > span {
display: inline-block;
width: 100%;
text-align: center;
margin-top: 4px;
font-weight: normal;
color: #ddd;
}

#automation-levels-control > span:before {
content: "F";
position: absolute;
top: 1.4rem;
left: 4px;
width: 24px;
text-align: center;
color: #555;
}

#automation-levels-control > span:after {
content: "P";
position: absolute;
top: 1.4rem;
right: 4px;
width: 24px;
text-align: center;
color: #555;
}

#automation-levels-control input[type=range] {
/*appearance: slider-vertical;*/
height: 28px;
position: absolute;
bottom: -25px;
left: 3px;
width: 160px;
transform-origin: top left;
transform: rotate(-90deg);
background-image: url("../img/range-short.svg");
}

#automation-levels-control input[type=range]:last-child {
left: 33px;
}
Loading

0 comments on commit bfd8941

Please sign in to comment.