commit fd5a1a9ba58c73741905ba87b031a825b0ce57a8
parent abb16d5a5aed6fb30d3b1db2b6403170f34c2add
Author: Matt Demanett <matt@demanett.net>
Date: Tue, 4 Aug 2020 03:19:43 -0400
Add styles for IO elements.
Diffstat:
312 files changed, 5608 insertions(+), 3172 deletions(-)
diff --git a/res-pp/AD-pp.svg b/res-pp/AD-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -199,48 +220,48 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 160.5)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="TRIGGER_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<g transform="translate(5 38)"><svg id="ATTACK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2 70)">ATTACK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2 70)">ATTACK</text>
<g transform="translate(5 73)"><svg id="DECAY_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">DECAY</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">DECAY</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="ENV_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
<g transform="translate(5 35)"><svg id="EOC_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
</g>
</g>
</svg>
diff --git a/res-pp/ADSR-pp.svg b/res-pp/ADSR-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -277,27 +298,27 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 262)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="GATE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/AMRM-pp.svg b/res-pp/AMRM-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -111,55 +132,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<g transform="translate(5 4)"><svg id="MODULATOR_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7.5 36)">MOD</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(7.5 36)">MOD</text>
<g transform="translate(39 4)"><svg id="CARRIER_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42.5 36)">CAR</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42.5 36)">CAR</text>
<g transform="translate(5 40)"><svg id="RECTIFY_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">RECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">RECT</text>
<g transform="translate(39 40)"><svg id="DRYWET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">D/W</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">D/W</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<g transform="translate(5 1)"><svg id="RECTIFY_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 33)">RECT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 33)">RECT</text>
<g transform="translate(39 1)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42.5 33)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(42.5 33)">OUT</text>
</g>
</g>
diff --git a/res-pp/ASR-pp.svg b/res-pp/ASR-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -191,48 +212,48 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 162)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="TRIGGER_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<g transform="translate(5 38)"><svg id="ATTACK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(9 70)">ATT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(9 70)">ATT</text>
<g transform="translate(5 73)"><svg id="RELEASE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(9 105)">REL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(9 105)">REL</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="ENV_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
<g transform="translate(5 35)"><svg id="EOC_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
</g>
</g>
</svg>
diff --git a/res-pp/Additator-pp.svg b/res-pp/Additator-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -521,10 +542,10 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(0 269)">
- <rect width="205" height="47" rx="5" fill="#bbb" transform="translate(10 44)"/>
- <rect width="171" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(171 81)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="205" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background" width="171" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(171 81)"/>
<g transform="translate(10 0)">
<g transform="translate(3 0)">
@@ -534,7 +555,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
</g>
<g transform="translate(37 0)">
<g transform="translate(3 5)"><svg id="PARTIALS_INPUT">
@@ -543,7 +564,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">PRTLS</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">PRTLS</text>
</g>
<g transform="translate(71 0)">
<g transform="translate(3 5)"><svg id="WIDTH_INPUT">
@@ -552,7 +573,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">WIDTH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">WIDTH</text>
</g>
<g transform="translate(105 0)">
<g transform="translate(3 5)"><svg id="ODD_SKEW_INPUT">
@@ -561,7 +582,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OSK</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OSK</text>
</g>
<g transform="translate(139 0)">
<g transform="translate(3 5)"><svg id="EVEN_SKEW_INPUT">
@@ -570,7 +591,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ESK</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ESK</text>
</g>
</g>
@@ -582,7 +603,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(37 0)">
<g transform="translate(3 5)"><svg id="GAIN_INPUT">
@@ -591,7 +612,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 40)">GAIN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(2 40)">GAIN</text>
</g>
<g transform="translate(71 0)">
<g transform="translate(3 5)"><svg id="DECAY_INPUT">
@@ -600,7 +621,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">DECAY</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">DECAY</text>
</g>
<g transform="translate(105 0)">
<g transform="translate(3 5)"><svg id="BALANCE_INPUT">
@@ -609,7 +630,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">BAL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">BAL</text>
</g>
<g transform="translate(139 0)">
<g transform="translate(3 5)"><svg id="FILTER_INPUT">
@@ -618,7 +639,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(3 40)">FLTR</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(3 40)">FLTR</text>
</g>
<g transform="translate(173 0)">
<g transform="translate(3 5)"><svg id="AUDIO_OUTPUT">
@@ -627,7 +648,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/AddrSeq-pp.svg b/res-pp/AddrSeq-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -78,26 +99,26 @@ polyline.module-border-outer {
</g>
- <g transform="translate(6.5 32)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 30)"/>
+ <g class="io-group" transform="translate(6.5 32)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 30)"/>
<g transform="translate(5 3)"><svg id="CLOCK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
</g>
- <g transform="translate(6.5 69)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(6.5 69)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="RESET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
</g>
<g transform="translate(1 121)">
@@ -155,27 +176,27 @@ polyline.module-border-outer {
<text font-size="5.0pt" transform="rotate(60) translate(19 0) rotate(-60) translate(-2 2)">8</text>
</g>
</g>
- <g transform="translate(5.5 47)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 47)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="SELECT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
</g>
</g>
- <g transform="translate(6.5 321)">
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(6.5 321)">
+ <rect class="output-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
</g>
<g transform="translate(49.5 32)">
diff --git a/res-pp/Analyzer-pp.svg b/res-pp/Analyzer-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -119,10 +140,10 @@ polyline.module-border-outer {
<g transform="translate(0 320)">
- <g transform="translate(10 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(10 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 3)"><svg id="SIGNALA_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -135,14 +156,14 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
- <g transform="translate(82.5 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(82.5 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 3)"><svg id="SIGNALB_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -155,14 +176,14 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
- <g transform="translate(155 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(155 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 3)"><svg id="SIGNALC_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -175,14 +196,14 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
- <g transform="translate(227 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(227 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 3)"><svg id="SIGNALD_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -195,7 +216,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
</g>
diff --git a/res-pp/AnalyzerXL-pp.svg b/res-pp/AnalyzerXL-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<style>
text {
diff --git a/res-pp/Arp-pp.svg b/res-pp/Arp-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -141,55 +162,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 129)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="143" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 133)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="143" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 133)"/>
<g transform="translate(5 3)"><svg id="CLOCK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.3 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.3 35)">CLOCK</text>
<g transform="translate(5 38)"><svg id="RESET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.3 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.3 70)">RESET</text>
<g transform="translate(5 73)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 105)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 105)">V/OCT</text>
<g transform="translate(5 108)"><svg id="GATE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 140)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 140)">GATE</text>
</g>
- <g transform="translate(5.5 146)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 146)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="PITCH_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
<g transform="translate(5 35)"><svg id="GATE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
</g>
</g>
</svg>
diff --git a/res-pp/Assign-pp.svg b/res-pp/Assign-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -86,48 +107,48 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 75)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="105" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="105" rx="5"/>
<g transform="translate(5 3)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
<g transform="translate(5 38)"><svg id="GATE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
<g transform="translate(5 73)"><svg id="RESET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 105)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 105)">RESET</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="PITCH_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
<g transform="translate(5 35)"><svg id="GATE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
</g>
</g>
</svg>
diff --git a/res-pp/Blank3-pp.svg b/res-pp/Blank3-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/Blank6-pp.svg b/res-pp/Blank6-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/Bool-pp.svg b/res-pp/Bool-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -50,9 +71,9 @@ polyline.module-border-outer {
</g>
- <g transform="translate(7.5 18)">
- <rect width="34" height="63.5" rx="5" fill="#fafafa" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(-2 53.5)"/>
+ <g class="io-group" transform="translate(7.5 18)">
+ <rect class="input-background" width="34" height="63.5" rx="5" transform="translate(-2 0)"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(-2 53.5)"/>
<g transform="translate(3 5)"><svg id="A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -66,36 +87,36 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(7.5 82)">
- <rect width="34" height="123" rx="5" fill="#bbb" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 82)">
+ <rect class="output-background" width="34" height="123" rx="5" transform="translate(-2 0)"/>
+ <rect class="output-background-filler" width="34" height="10" transform="translate(-2 0)"/>
<g transform="translate(3 4)"><svg id="AND_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">AND</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">AND</text>
<g transform="translate(3 44)"><svg id="OR_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(9.5 77)">OR</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(9.5 77)">OR</text>
<g transform="translate(3 84)"><svg id="XOR_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">XOR</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">XOR</text>
</g>
<g transform="translate(0 217)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 22)"/>
- <rect width="34" height="32" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 22)"/>
+ <rect class="input-background" width="34" height="32" rx="5"/>
<g transform="translate(5 4)"><svg id="NOT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -103,16 +124,16 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(5.5 35)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 35)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<g transform="translate(5 2)"><svg id="NOT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NOT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NOT</text>
</g>
</g>
</svg>
diff --git a/res-pp/CVD-pp.svg b/res-pp/CVD-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -109,15 +130,15 @@ polyline.module-border-outer {
<polyline points="0,0 2,0" stroke-width="1" transform="rotate(-45) translate(9.5 0)"/>
</g>
</g>
- <g transform="translate(5.5 79)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 79)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="TIME_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -131,40 +152,40 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-mix-cvd" transform="translate(0 3)" href="#dial-mix-cvd"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="MIX_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 264)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Clpr-pp.svg b/res-pp/Clpr-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -117,55 +138,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<g transform="translate(5 4)"><svg id="LEFT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<g transform="translate(39 4)"><svg id="RIGHT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
<g transform="translate(5 40)"><svg id="THRESHOLD_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
<g transform="translate(39 40)"><svg id="OUTPUT_GAIN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<g transform="translate(5 1)"><svg id="LEFT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<g transform="translate(39 1)"><svg id="RIGHT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</svg>
diff --git a/res-pp/Cmp-pp.svg b/res-pp/Cmp-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -125,15 +146,15 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-offset-cmp" transform="translate(0 3)" href="#dial-offset-cmp"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
</g>
</g>
@@ -147,15 +168,15 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-offset-cmp" transform="translate(0 3)" href="#dial-offset-cmp"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
</g>
</g>
@@ -187,15 +208,15 @@ polyline.module-border-outer {
<text font-size="5.0pt" transform="rotate(60) translate(20 0) rotate(-60) translate(-4 2.2)">10</text>
</g>
</g>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="WINDOW_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -209,15 +230,15 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-lag-cmp" transform="translate(0 3)" href="#dial-lag-cmp"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="LAG_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -234,8 +255,8 @@ polyline.module-border-outer {
<use xlink:href="#dial-voltage-cmp" transform="translate(0.5 -2.5)" href="#dial-voltage-cmp"/>
</g>
- <g transform="translate(11 279)">
- <rect width="68" height="77" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(11 279)">
+ <rect class="output-background" width="68" height="77" rx="5"/>
<g transform="translate(5 4)"><svg id="GREATER_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -264,13 +285,13 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12 72)">EQ</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12 72)">EQ</text>
<g transform="translate(39 40)"><svg id="NOT_EQUAL_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">NOT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">NOT</text>
</g>
</svg>
diff --git a/res-pp/CmpDist-pp.svg b/res-pp/CmpDist-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -250,12 +271,12 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(0 225)">
- <rect width="130" height="135" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="65" height="91" rx="5" fill="#bbb" transform="translate(75 44)"/>
- <rect width="10" height="8" fill="#bbb" transform="translate(75 44)"/>
- <rect width="10" height="8" fill="#bbb" transform="translate(130 44)"/>
- <rect width="10" height="8" fill="#bbb" transform="translate(75 127)"/>
+ <g class="io-group" transform="translate(0 225)">
+ <rect class="input-background" width="130" height="135" rx="5" transform="translate(10 0)"/>
+ <rect class="output-background" width="65" height="91" rx="5" transform="translate(75 44)"/>
+ <rect class="output-background-filler" width="10" height="8" transform="translate(75 44)"/>
+ <rect class="output-background-filler" width="10" height="8" transform="translate(130 44)"/>
+ <rect class="output-background-filler" width="10" height="8" transform="translate(75 127)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="GT_MIX_INPUT">
@@ -264,7 +285,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">GTM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">GTM</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="LT_MIX_INPUT">
@@ -273,7 +294,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">LTM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">LTM</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="WINDOW_INPUT">
@@ -282,7 +303,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="0.5px" transform="translate(1.5 40)">WNDW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="0.5px" transform="translate(1.5 40)">WNDW</text>
</g>
<g transform="translate(108 0)">
<g transform="translate(3 5)"><svg id="DRY_WET_INPUT">
@@ -291,7 +312,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">D/W</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">D/W</text>
</g>
<g transform="translate(0 44)">
@@ -302,7 +323,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">A IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">A IN</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="A_SCALE_INPUT">
@@ -311,7 +332,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">A SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">A SCL</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="GT_OUTPUT">
@@ -320,7 +341,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8 40)">GT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(8 40)">GT</text>
</g>
<g transform="translate(108 0)">
<g transform="translate(3 5)"><svg id="LT_OUTPUT">
@@ -329,7 +350,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(9.5 40)">LT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(9.5 40)">LT</text>
</g>
<g transform="translate(10 44)">
@@ -340,7 +361,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">B IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">B IN</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="B_SCALE_INPUT">
@@ -349,7 +370,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">B SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">B SCL</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="EQ_OUTPUT">
@@ -358,7 +379,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(9 40)">EQ</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(9 40)">EQ</text>
</g>
<g transform="translate(98 0)">
<g transform="translate(3 5)"><svg id="MIX_OUTPUT">
@@ -367,7 +388,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 40)">MIX</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 40)">MIX</text>
</g>
</g>
</g>
diff --git a/res-pp/DADSRH-pp.svg b/res-pp/DADSRH-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -529,8 +550,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(84 37)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(84 37)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<g transform="translate(6 6)"><svg id="TRIGGER_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -542,7 +563,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
<g transform="translate(120 93)">
@@ -585,8 +606,8 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="2px" transform="translate(-1.5 34)">RST</text>
</g>
- <g transform="translate(112 187)">
- <rect width="30" height="116" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(112 187)">
+ <rect class="output-background" width="30" height="116" rx="5"/>
<g transform="translate(0 1)">
<g transform="translate(3 3)"><svg id="ENV_OUTPUT">
<g transform="translate(12 12)">
@@ -594,7 +615,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
</g>
<g transform="translate(0 38)">
<g transform="translate(3 3)"><svg id="INV_OUTPUT">
@@ -603,7 +624,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
</g>
<g transform="translate(0 75)">
<g transform="translate(3 3)"><svg id="TRIGGER_OUTPUT">
@@ -612,7 +633,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
</svg>
diff --git a/res-pp/DADSRHPlus-pp.svg b/res-pp/DADSRHPlus-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,12 +69,12 @@ polyline.module-border-outer {
</g>
- <g transform="translate(149 26)">
- <rect width="30" height="323" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(149 26)">
+ <rect class="input-background" width="30" height="323" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(8 10)">CV</text>
</g>
- <g transform="translate(186 26)">
- <rect width="30" height="267" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(186 26)">
+ <rect class="output-background" width="30" height="267" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(2 10)">GATE</text>
</g>
@@ -602,8 +623,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(84 37)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(84 37)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<g transform="translate(6 6)"><svg id="TRIGGER_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -615,7 +636,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
<g transform="translate(120 93)">
@@ -658,8 +679,8 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="2px" transform="translate(-1.5 34)">RST</text>
</g>
- <g transform="translate(112 187)">
- <rect width="30" height="116" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(112 187)">
+ <rect class="output-background" width="30" height="116" rx="5"/>
<g transform="translate(0 1)">
<g transform="translate(3 3)"><svg id="ENV_OUTPUT">
<g transform="translate(12 12)">
@@ -667,7 +688,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
</g>
<g transform="translate(0 38)">
<g transform="translate(3 3)"><svg id="INV_OUTPUT">
@@ -676,7 +697,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
</g>
<g transform="translate(0 75)">
<g transform="translate(3 3)"><svg id="TRIGGER_OUTPUT">
@@ -685,7 +706,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
</svg>
diff --git a/res-pp/DGate-pp.svg b/res-pp/DGate-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -180,9 +201,9 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 187)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 58)"/>
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 58)"/>
+ <rect class="input-background" width="34" height="62" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -194,11 +215,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.6 58)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.6 58)">TRIG</text>
</g>
- <g transform="translate(0 62)">
- <rect width="34" height="74" rx="5" fill="#bbb" transform="translate(5.5 0)"/>
- <rect width="34" height="10" fill="#bbb" transform="translate(5.5 0)"/>
+ <g class="io-group" transform="translate(0 62)">
+ <rect class="output-background" width="34" height="74" rx="5" transform="translate(5.5 0)"/>
+ <rect class="output-background-filler" width="34" height="10" transform="translate(5.5 0)"/>
<g transform="translate(5.5 0)">
<g transform="translate(5 3)"><svg id="GATE_OUTPUT">
<g transform="translate(12 12)">
@@ -206,7 +227,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
</g>
<g transform="translate(5.5 38)">
<g transform="translate(5 0)"><svg id="END_OUTPUT">
@@ -215,7 +236,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">END</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">END</text>
</g>
</g>
</g>
diff --git a/res-pp/Detune-pp.svg b/res-pp/Detune-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -102,53 +123,53 @@ polyline.module-border-outer {
<use xlink:href="#dial-cents-detune" transform="translate(0 -2)" href="#dial-cents-detune"/>
</g>
- <g transform="translate(5.5 74)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 74)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
<g transform="translate(0 123)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="107" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="107" rx="5"/>
<g transform="translate(5 0)"><svg id="THRU_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
<g transform="translate(5 36)"><svg id="OUT_PLUS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 68)">OUT+</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 68)">OUT+</text>
<g transform="translate(5 72)"><svg id="OUT_MINUS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 104)">OUT-</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 104)">OUT-</text>
</g>
</g>
</svg>
diff --git a/res-pp/EQ-pp.svg b/res-pp/EQ-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -109,27 +130,27 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 264)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/EQS-pp.svg b/res-pp/EQS-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -104,41 +125,41 @@ polyline.module-border-outer {
</g>
<g transform="translate(11 275)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 31)"/>
- <rect width="68" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 31)"/>
+ <rect class="input-background" width="68" height="38" rx="5"/>
<g transform="translate(5 4)"><svg id="LEFT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<g transform="translate(39 4)"><svg id="RIGHT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
</g>
- <g transform="translate(0 44)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 44)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<g transform="translate(5 1)"><svg id="LEFT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<g transform="translate(39 1)"><svg id="RIGHT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</svg>
diff --git a/res-pp/Edge-pp.svg b/res-pp/Edge-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -194,27 +215,27 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 191)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 38)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="109" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 38)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="109" rx="5"/>
<g transform="translate(5 3)"><svg id="HIGH_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1.2px" transform="translate(11 35)">HIGH</text>
+ <text class="output-label" font-size="5pt" letter-spacing="1.2px" transform="translate(11 35)">HIGH</text>
<g transform="translate(2 29.3)"><svg id="HIGH_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -224,14 +245,14 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.9 70)">RISE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.9 70)">RISE</text>
<g transform="translate(5 73)"><svg id="FALL_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.6 105)">FALL</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.6 105)">FALL</text>
</g>
</g>
</svg>
diff --git a/res-pp/EightFO-pp.svg b/res-pp/EightFO-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -412,8 +433,8 @@ polyline.module-border-outer {
<use xlink:href="#dial-phase-eightfo" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)" href="#dial-phase-eightfo"/>
</g>
- <g transform="translate(176 32)">
- <rect width="30" height="328" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(176 32)">
+ <rect class="input-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<g transform="translate(0 0)"><svg id="PHASE7_INPUT">
<g transform="translate(12 12)">
@@ -468,8 +489,8 @@ polyline.module-border-outer {
<text font-size="6pt" letter-spacing="2px" transform="translate(8 320)">CV</text>
</g>
- <g transform="translate(215 32)">
- <rect width="30" height="328" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(215 32)">
+ <rect class="output-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<g transform="translate(0 0)"><svg id="PHASE7_OUTPUT">
<g transform="translate(12 12)">
@@ -527,9 +548,9 @@ polyline.module-border-outer {
- <g transform="translate(0 313)">
- <rect width="70" height="87" rx="5" fill="#fafafa" transform="translate(10 -40)"/>
- <rect width="108" height="43" rx="5" fill="#fafafa" transform="translate(10 -40)"/>
+ <g class="io-group" transform="translate(0 313)">
+ <rect class="input-background" width="70" height="87" rx="5" transform="translate(10 -40)"/>
+ <rect class="input-background" width="108" height="43" rx="5" transform="translate(10 -40)"/>
<g transform="translate(10 -40)">
@@ -539,7 +560,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 38)">S/PW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 38)">S/PW</text>
</g>
<g transform="translate(50 -40)">
@@ -549,7 +570,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(4.5 38)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(4.5 38)">OFF</text>
</g>
<g transform="translate(90 -40)">
@@ -559,7 +580,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2.5 38)">SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(2.5 38)">SCL</text>
</g>
<g transform="translate(10 0)">
@@ -569,7 +590,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(2 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">V/OCT</text>
</g>
<g transform="translate(50 0)">
@@ -579,7 +600,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0 40)">RESET</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0 40)">RESET</text>
</g>
</g>
</svg>
diff --git a/res-pp/EightHP-pp.svg b/res-pp/EightHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/EightOne-pp.svg b/res-pp/EightOne-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,8 +69,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(6.5 32)">
- <rect width="34" height="337" rx="5" fill="#fafafa" transform="translate(0 -9)"/>
+ <g class="io-group" transform="translate(6.5 32)">
+ <rect class="input-background" width="34" height="337" rx="5" transform="translate(0 -9)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(12.5 0)">IN</text>
<g transform="translate(5 3)"><svg id="IN1_INPUT">
@@ -58,7 +79,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
<g transform="translate(17 29.5)"><svg id="IN1_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -69,7 +90,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
<g transform="translate(17 70.8)"><svg id="IN2_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -80,7 +101,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
<g transform="translate(17 113.1)"><svg id="IN3_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -91,7 +112,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
<g transform="translate(17 153.4)"><svg id="IN4_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -102,7 +123,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
<g transform="translate(17 194.6)"><svg id="IN5_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -113,7 +134,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
<g transform="translate(17 235.9)"><svg id="IN6_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -124,7 +145,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
<g transform="translate(17 277.2)"><svg id="IN7_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -135,32 +156,32 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
<g transform="translate(17 318.5)"><svg id="IN8_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
</g>
- <g transform="translate(49.5 32)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 30)"/>
+ <g class="io-group" transform="translate(49.5 32)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 30)"/>
<g transform="translate(5 3)"><svg id="CLOCK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
</g>
- <g transform="translate(49.5 69)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(49.5 69)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="RESET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
</g>
<g transform="translate(44 121)">
@@ -218,27 +239,27 @@ polyline.module-border-outer {
<text font-size="5.0pt" transform="rotate(60) translate(19 0) rotate(-60) translate(-2 2)">8</text>
</g>
</g>
- <g transform="translate(5.5 47)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 47)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="SELECT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
</g>
</g>
- <g transform="translate(49.5 321)">
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(49.5 321)">
+ <rect class="output-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
</g>
diff --git a/res-pp/EighteenHP-pp.svg b/res-pp/EighteenHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/FFB-pp.svg b/res-pp/FFB-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -440,9 +461,9 @@ polyline.module-border-outer {
</g>
- <g transform="translate(28.5 278)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
- <rect width="63" height="10" fill="#fafafa" transform="translate(0 33)"/>
+ <g class="io-group" transform="translate(28.5 278)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
+ <rect class="input-background-filler" width="63" height="10" transform="translate(0 33)"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
@@ -450,7 +471,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="CV_INPUT">
@@ -459,11 +480,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 39)">FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 39)">FCV</text>
</g>
</g>
- <g transform="translate(13 320)">
- <rect width="94" height="43" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(13 320)">
+ <rect class="output-background" width="94" height="43" rx="5"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="ALL_OUTPUT">
<g transform="translate(12 12)">
@@ -471,7 +492,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 39)">ALL</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 39)">ALL</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="ODD_OUTPUT">
@@ -480,7 +501,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 39)">ODD</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 39)">ODD</text>
</g>
<g transform="translate(63 0)">
<g transform="translate(3 4)"><svg id="EVEN_OUTPUT">
@@ -489,7 +510,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(3 39)">EVEN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(3 39)">EVEN</text>
</g>
</g>
</svg>
diff --git a/res-pp/FMOp-pp.svg b/res-pp/FMOp-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -365,12 +386,12 @@ polyline.module-border-outer {
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="97" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="130" height="44" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(130 34)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(97 81)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="97" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="130" height="44" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(130 34)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(97 81)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="DEPTH_INPUT">
@@ -379,7 +400,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">DEPTH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">DEPTH</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="FEEDBACK_INPUT">
@@ -388,7 +409,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3.5 40)">FDBK</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3.5 40)">FDBK</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="LEVEL_INPUT">
@@ -397,7 +418,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">LEVEL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">LEVEL</text>
</g>
<g transform="translate(108 0)">
<g transform="translate(3 5)"><svg id="SUSTAIN_INPUT">
@@ -406,7 +427,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">SUS</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">SUS</text>
</g>
<g transform="translate(10 44)">
@@ -417,7 +438,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="FM_INPUT">
@@ -426,7 +447,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(8.5 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(8.5 40)">FM</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="GATE_INPUT">
@@ -435,7 +456,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">GATE</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">GATE</text>
</g>
<g transform="translate(98 0)">
<g transform="translate(3 5)"><svg id="AUDIO_OUTPUT">
@@ -444,7 +465,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/FifteenHP-pp.svg b/res-pp/FifteenHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/FiveHP-pp.svg b/res-pp/FiveHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/FlipFlop-pp.svg b/res-pp/FlipFlop-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -51,80 +72,80 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<g transform="translate(5 38)"><svg id="RESET1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="A1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
<g transform="translate(5 35)"><svg id="B1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
</g>
</g>
<g transform="translate(0 169)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<g transform="translate(5 38)"><svg id="RESET2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="A2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
<g transform="translate(5 35)"><svg id="B2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
</g>
</g>
</svg>
diff --git a/res-pp/Follow-pp.svg b/res-pp/Follow-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -94,15 +115,15 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-response-follow" transform="translate(0 3)" href="#dial-response-follow"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="RESPONSE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -116,40 +137,40 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-scale-follow" transform="translate(0 3)" href="#dial-scale-follow"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="GAIN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 230)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
diff --git a/res-pp/FourMan-pp.svg b/res-pp/FourMan-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -51,9 +72,9 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER1_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -62,9 +83,9 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
@@ -72,15 +93,15 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
<g transform="translate(0 98)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER2_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -89,9 +110,9 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
@@ -99,15 +120,15 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
<g transform="translate(0 178)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER3_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -116,9 +137,9 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUT3_OUTPUT">
<g transform="translate(12 12)">
@@ -126,15 +147,15 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
<g transform="translate(0 258)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER4_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -143,9 +164,9 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUT4_OUTPUT">
<g transform="translate(12 12)">
@@ -153,7 +174,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/Inv-pp.svg b/res-pp/Inv-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -51,9 +72,9 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="113" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 103)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="113" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 103)"/>
<g transform="translate(8 4)"><svg id="GATE1_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -65,7 +86,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
<text font-size="5pt" letter-spacing="0.3px" transform="translate(1 71)">LATCH</text>
<g transform="translate(24 64)"><svg id="LATCH1_PARAM">
<g transform="translate(4.5 4.5)">
@@ -78,18 +99,18 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
</g>
- <g transform="translate(5.5 113)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 113)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
<g transform="translate(5 29.3)"><svg id="LOW1_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -100,9 +121,9 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 183)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="113" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 103)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="113" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 103)"/>
<g transform="translate(8 4)"><svg id="GATE2_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -114,7 +135,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
<text font-size="5pt" letter-spacing="0.3px" transform="translate(1 71)">LATCH</text>
<g transform="translate(24 64)"><svg id="LATCH2_PARAM">
<g transform="translate(4.5 4.5)">
@@ -127,18 +148,18 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
</g>
- <g transform="translate(5.5 113)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 113)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
<g transform="translate(5 29.3)"><svg id="LOW2_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
diff --git a/res-pp/LFO-pp.svg b/res-pp/LFO-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -259,13 +280,13 @@ polyline.module-border-outer {
- <g transform="translate(0 225)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 44)"/>
- <rect width="97.5" height="135" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="65" height="135" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(32.5 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 127)"/>
+ <g class="io-group" transform="translate(0 225)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 44)"/>
+ <rect class="output-background" width="97.5" height="135" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="65" height="135" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(32.5 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 127)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="SAMPLE_INPUT">
@@ -274,7 +295,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">SAM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">SAM</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="PW_INPUT">
@@ -283,7 +304,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(8 40)">PW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(8 40)">PW</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="RAMP_DOWN_OUTPUT">
@@ -307,7 +328,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">OFF</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="SCALE_INPUT">
@@ -316,7 +337,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">SCL</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="RAMP_UP_OUTPUT">
@@ -351,7 +372,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="RESET_INPUT">
@@ -360,7 +381,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.7 40)">RESET</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.7 40)">RESET</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="TRIANGLE_OUTPUT">
diff --git a/res-pp/LLFO-pp.svg b/res-pp/LLFO-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -226,34 +247,34 @@ polyline.module-border-outer {
<g transform="translate(0 228)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<g transform="translate(5 38)"><svg id="RESET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/LVCF-pp.svg b/res-pp/LVCF-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -174,34 +195,34 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 225)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 70)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 70)">CV</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/LVCO-pp.svg b/res-pp/LVCO-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -194,41 +215,41 @@ polyline.module-border-outer {
<g transform="translate(0 193)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="105" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="105" rx="5"/>
<g transform="translate(5 3)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<g transform="translate(5 38)"><svg id="FM_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
<g transform="translate(5 73)"><svg id="SYNC_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Lag-pp.svg b/res-pp/Lag-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -109,15 +130,15 @@ polyline.module-border-outer {
<polyline points="0,0 2,0" stroke-width="1" transform="rotate(-45) translate(9.5 0)"/>
</g>
</g>
- <g transform="translate(5.5 79)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 79)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="TIME_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -131,40 +152,40 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-shape-lag" transform="translate(0 3)" href="#dial-shape-lag"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="SHAPE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 264)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Lmtr-pp.svg b/res-pp/Lmtr-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -117,55 +138,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<g transform="translate(5 4)"><svg id="LEFT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<g transform="translate(39 4)"><svg id="RIGHT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
<g transform="translate(5 40)"><svg id="THRESHOLD_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
<g transform="translate(39 40)"><svg id="OUTPUT_GAIN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<g transform="translate(5 1)"><svg id="LEFT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<g transform="translate(39 1)"><svg id="RIGHT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</svg>
diff --git a/res-pp/Manual-pp.svg b/res-pp/Manual-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -52,9 +73,9 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
<g transform="translate(0 0)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -65,9 +86,9 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 37)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="250" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="250" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUT1_OUTPUT">
@@ -120,7 +141,7 @@ polyline.module-border-outer {
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 244)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 244)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/Matrix44-pp.svg b/res-pp/Matrix44-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -356,10 +377,10 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="130" height="44" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="130" height="10" fill="#fafafa" transform="translate(10 34)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="130" height="44" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="130" height="10" transform="translate(10 34)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="IN1_INPUT">
@@ -368,7 +389,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="IN2_INPUT">
@@ -377,7 +398,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="IN3_INPUT">
@@ -386,7 +407,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
</g>
<g transform="translate(108 0)">
<g transform="translate(3 5)"><svg id="IN4_INPUT">
@@ -395,7 +416,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
</g>
<g transform="translate(10 44)">
@@ -406,7 +427,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="OUT2_OUTPUT">
@@ -415,7 +436,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="OUT3_OUTPUT">
@@ -424,7 +445,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
</g>
<g transform="translate(98 0)">
<g transform="translate(3 5)"><svg id="OUT4_OUTPUT">
@@ -433,7 +454,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
</g>
</g>
</g>
diff --git a/res-pp/Matrix88-pp.svg b/res-pp/Matrix88-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,8 +69,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(5.5 25)">
- <rect width="34" height="293" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 25)">
+ <rect class="input-background" width="34" height="293" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -100,8 +121,8 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(46.5 323)">
- <rect width="278.5" height="34" rx="5" fill="#bbb" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(46.5 323)">
+ <rect class="output-background" width="278.5" height="34" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
diff --git a/res-pp/Mix1-pp.svg b/res-pp/Mix1-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -99,9 +120,9 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 173)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 120)"/>
- <rect width="34" height="127" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 120)"/>
+ <rect class="input-background" width="34" height="127" rx="5"/>
<g transform="translate(8 3)"><svg id="MUTE_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -113,32 +134,32 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 57)">MUTE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 57)">MUTE</text>
<g transform="translate(5 60)"><svg id="LEVEL_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 92)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 92)">LEVEL</text>
<g transform="translate(5 95)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 127)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 127)">IN</text>
</g>
- <g transform="translate(5.5 133)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 133)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Mix2-pp.svg b/res-pp/Mix2-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -106,55 +127,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 240)">
- <g transform="translate(5.5 0)">
- <rect width="64" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="64" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="64" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="64" height="73" rx="5"/>
<g transform="translate(5 4)"><svg id="LEVEL_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1.5px" transform="translate(4.5 36)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1.5px" transform="translate(4.5 36)">LEVEL</text>
<g transform="translate(35 4)"><svg id="MUTE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1.5px" transform="translate(35.5 36)">MUTE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1.5px" transform="translate(35.5 36)">MUTE</text>
<g transform="translate(5 40)"><svg id="L_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 72)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 72)">L</text>
<g transform="translate(35 40)"><svg id="R_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="0.5px" transform="translate(39 72)">R (L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="0.5px" transform="translate(39 72)">R (L)</text>
</g>
- <g transform="translate(5.5 79)">
- <rect width="64" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="64" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 79)">
+ <rect class="output-background-filler" width="64" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="64" height="37" rx="5"/>
<g transform="translate(5 1)"><svg id="L_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 33)">L</text>
<g transform="translate(35 1)"><svg id="R_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(45 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(45 33)">R</text>
</g>
</g>
</svg>
diff --git a/res-pp/Mix4-pp.svg b/res-pp/Mix4-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -121,29 +142,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -221,29 +242,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -321,29 +342,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -421,29 +442,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -508,31 +529,31 @@ polyline.module-border-outer {
</g>
</svg></g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14.5 225)">DIM</text>
- <g transform="translate(5.5 229)">
- <rect width="34" height="50" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 229)">
+ <rect class="input-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="MIX_CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
- <rect width="34" height="73" rx="5" fill="#bbb" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#bbb" transform="translate(0 38)"/>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <rect class="output-background" width="34" height="73" rx="5" transform="translate(0 38)"/>
+ <rect class="output-background-filler" width="34" height="5" transform="translate(0 38)"/>
<g transform="translate(5 41)"><svg id="L_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
<g transform="translate(5 76)"><svg id="R_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
</g>
</g>
diff --git a/res-pp/Mix4x-pp.svg b/res-pp/Mix4x-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -157,22 +178,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -285,22 +306,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -413,22 +434,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -541,52 +562,52 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
<g transform="translate(176 20)">
- <g transform="translate(5.5 1)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 1)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="SEND_A_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
- <rect width="34" height="146" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
+ <rect class="input-background" width="34" height="146" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<g transform="translate(5 41)"><svg id="L_A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<g transform="translate(5 76)"><svg id="R_A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<g transform="translate(9 117)"><svg id="LEVEL_A_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -601,7 +622,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
@@ -620,31 +641,31 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(5.5 191)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 191)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="SEND_B_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
- <rect width="34" height="111" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
+ <rect class="input-background" width="34" height="111" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<g transform="translate(5 41)"><svg id="L_B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<g transform="translate(5 76)"><svg id="R_B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<g transform="translate(9 117)"><svg id="LEVEL_B_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
diff --git a/res-pp/Mix8-pp.svg b/res-pp/Mix8-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -121,29 +142,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -221,29 +242,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -321,29 +342,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -421,29 +442,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -521,29 +542,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -621,29 +642,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -721,29 +742,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -821,29 +842,29 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<g transform="translate(5 3)"><svg id="CV8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="PAN8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<g transform="translate(5 73)"><svg id="IN8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
</g>
@@ -908,31 +929,31 @@ polyline.module-border-outer {
</g>
</svg></g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14.5 225)">DIM</text>
- <g transform="translate(5.5 229)">
- <rect width="34" height="50" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 229)">
+ <rect class="input-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="MIX_CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
- <rect width="34" height="73" rx="5" fill="#bbb" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#bbb" transform="translate(0 38)"/>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <rect class="output-background" width="34" height="73" rx="5" transform="translate(0 38)"/>
+ <rect class="output-background-filler" width="34" height="5" transform="translate(0 38)"/>
<g transform="translate(5 41)"><svg id="L_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
<g transform="translate(5 76)"><svg id="R_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
</g>
</g>
diff --git a/res-pp/Mix8x-pp.svg b/res-pp/Mix8x-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -157,22 +178,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -285,22 +306,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -413,22 +434,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -541,22 +562,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -669,22 +690,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -797,22 +818,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -925,22 +946,22 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -1053,52 +1074,52 @@ polyline.module-border-outer {
<circle r="4" stroke-width="1" stroke="#00f" fill="#f00"/>
</g>
</svg></g>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="A8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<g transform="translate(5 38)"><svg id="B8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
<g transform="translate(356 20)">
- <g transform="translate(5.5 1)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 1)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="SEND_A_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
- <rect width="34" height="146" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
+ <rect class="input-background" width="34" height="146" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<g transform="translate(5 41)"><svg id="L_A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<g transform="translate(5 76)"><svg id="R_A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<g transform="translate(9 117)"><svg id="LEVEL_A_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -1113,7 +1134,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
</g>
<g transform="translate(2.5 106)">
<g transform="translate(20 20)">
@@ -1127,31 +1148,31 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(5.5 191)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 191)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="SEND_B_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
- <rect width="34" height="111" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
+ <rect class="input-background" width="34" height="111" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<g transform="translate(5 41)"><svg id="L_B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<g transform="translate(5 76)"><svg id="R_B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<g transform="translate(9 117)"><svg id="LEVEL_B_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
diff --git a/res-pp/Mono-pp.svg b/res-pp/Mono-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -201,27 +222,27 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 251)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="POLY_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">POLY</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">POLY</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="MONO_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(4.5 32)">MONO</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(4.5 32)">MONO</text>
</g>
</g>
</svg>
diff --git a/res-pp/Mult-pp.svg b/res-pp/Mult-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -52,23 +73,23 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
<g transform="translate(0 0)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 29)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 29)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="INA_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7 35)">IN-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(7 35)">IN-A</text>
</g>
</g>
<g transform="translate(0 42)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="102" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="102" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUTA1_OUTPUT">
@@ -90,7 +111,7 @@ polyline.module-border-outer {
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
</g>
</g>
</g>
@@ -98,23 +119,23 @@ polyline.module-border-outer {
<g transform="translate(0 178)">
<g transform="translate(0 0)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 29)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 29)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="INB_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(3 35)">IN-B(A)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(3 35)">IN-B(A)</text>
</g>
</g>
<g transform="translate(0 42)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="102" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="102" rx="5"/>
<g transform="translate(2 2)">
<g transform="translate(3 0)"><svg id="OUTB1_OUTPUT">
@@ -136,7 +157,7 @@ polyline.module-border-outer {
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/Mumix-pp.svg b/res-pp/Mumix-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -49,9 +70,9 @@ polyline.module-border-outer {
<g transform="translate(2 25)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 283)"/>
- <rect width="34" height="293" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 283)"/>
+ <rect class="input-background" width="34" height="293" rx="5"/>
<g transform="translate(5 5)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -101,16 +122,16 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(5.5 295)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 295)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(5 1)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
</g>
</g>
diff --git a/res-pp/Mute8-pp.svg b/res-pp/Mute8-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,8 +69,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(8 32)">
- <rect width="30" height="328" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(8 32)">
+ <rect class="input-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<g transform="translate(0 0)"><svg id="INPUT1_INPUT">
<g transform="translate(12 12)">
@@ -104,8 +125,8 @@ polyline.module-border-outer {
<text font-size="6pt" letter-spacing="2px" transform="translate(9.8 320)">IN</text>
</g>
- <g transform="translate(43 32)">
- <rect width="30" height="328" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(43 32)">
+ <rect class="input-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<g transform="translate(0 0)"><svg id="MUTE1_INPUT">
<g transform="translate(12 12)">
@@ -248,8 +269,8 @@ polyline.module-border-outer {
<text font-size="6pt" letter-spacing="2px" transform="translate(1 320)">MUTE</text>
</g>
- <g transform="translate(112 32)">
- <rect width="30" height="328" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(112 32)">
+ <rect class="output-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<g transform="translate(0 0)"><svg id="OUTPUT1_OUTPUT">
<g transform="translate(12 12)">
diff --git a/res-pp/Noise-pp.svg b/res-pp/Noise-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -51,69 +72,69 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
- <g transform="translate(7.5 0)">
- <rect width="34" height="209" rx="5" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 0)">
+ <rect class="output-background" width="34" height="209" rx="5" transform="translate(-2 0)"/>
<g transform="translate(3 6)"><svg id="BLUE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(4 39)">BLUE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(4 39)">BLUE</text>
<g transform="translate(3 47)"><svg id="WHITE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(0.5 80)">WHITE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(0.5 80)">WHITE</text>
<g transform="translate(3 88)"><svg id="PINK_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(4.5 121)">PINK</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(4.5 121)">PINK</text>
<g transform="translate(3 129)"><svg id="RED_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7 162)">RED</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(7 162)">RED</text>
<g transform="translate(3 170)"><svg id="GAUSS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(0 203)">GAUSS</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(0 203)">GAUSS</text>
</g>
</g>
<g transform="translate(0 250)">
<text font-size="6pt" letter-spacing="2px" transform="translate(13 -4)">ABS</text>
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="ABS_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="ABS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Nsgt-pp.svg b/res-pp/Nsgt-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -120,55 +141,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<g transform="translate(5 4)"><svg id="LEFT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<g transform="translate(39 4)"><svg id="RIGHT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
<g transform="translate(5 40)"><svg id="THRESHOLD_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
<g transform="translate(39 40)"><svg id="RATIO_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(39.5 72)">RATIO</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(39.5 72)">RATIO</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<g transform="translate(5 1)"><svg id="LEFT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<g transform="translate(39 1)"><svg id="RIGHT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</svg>
diff --git a/res-pp/Offset-pp.svg b/res-pp/Offset-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -240,15 +261,15 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-offset-offset" transform="scale(1) translate(0 7)" href="#dial-offset-offset"/>
- <g transform="translate(5.5 53)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 53)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="OFFSET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -262,40 +283,40 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-exp-offset" transform="scale(1) translate(0 7)" href="#dial-exp-offset"/>
- <g transform="translate(5.5 53)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 53)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="SCALE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 240)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
diff --git a/res-pp/OneEight-pp.svg b/res-pp/OneEight-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,26 +69,26 @@ polyline.module-border-outer {
</g>
- <g transform="translate(6.5 32)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 30)"/>
+ <g class="io-group" transform="translate(6.5 32)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 30)"/>
<g transform="translate(5 3)"><svg id="CLOCK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
</g>
- <g transform="translate(6.5 69)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(6.5 69)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="RESET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
</g>
<g transform="translate(1 121)">
@@ -125,31 +146,31 @@ polyline.module-border-outer {
<text font-size="5.0pt" transform="rotate(60) translate(19 0) rotate(-60) translate(-2 2)">8</text>
</g>
</g>
- <g transform="translate(5.5 47)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 47)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="SELECT_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
</g>
</g>
- <g transform="translate(6.5 321)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(6.5 321)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(49.5 32)">
- <rect width="34" height="337" rx="5" fill="#bbb" transform="translate(0 -9)"/>
+ <g class="io-group" transform="translate(49.5 32)">
+ <rect class="output-background" width="34" height="337" rx="5" transform="translate(0 -9)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(8.5 0)">OUT</text>
<g transform="translate(5 3)"><svg id="OUT1_OUTPUT">
@@ -158,7 +179,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
<g transform="translate(17 29.5)"><svg id="OUT1_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -169,7 +190,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
<g transform="translate(17 70.8)"><svg id="OUT2_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -180,7 +201,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
<g transform="translate(17 113.1)"><svg id="OUT3_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -191,7 +212,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
<g transform="translate(17 153.4)"><svg id="OUT4_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -202,7 +223,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
<g transform="translate(17 194.6)"><svg id="OUT5_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -213,7 +234,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
<g transform="translate(17 235.9)"><svg id="OUT6_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -224,7 +245,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
<g transform="translate(17 277.2)"><svg id="OUT7_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -235,7 +256,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
<g transform="translate(17 318.5)"><svg id="OUT8_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
diff --git a/res-pp/PEQ-pp.svg b/res-pp/PEQ-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -312,11 +333,11 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(0 226)">
- <rect width="130" height="134" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="32.5" height="46" rx="5" fill="#bbb" transform="translate(107.5 88)"/>
- <rect width="32.5" height="8" fill="#bbb" transform="translate(107.5 88)"/>
- <rect width="8" height="46" fill="#bbb" transform="translate(107.5 88)"/>
+ <g class="io-group" transform="translate(0 226)">
+ <rect class="input-background" width="130" height="134" rx="5" transform="translate(10 0)"/>
+ <rect class="output-background" width="32.5" height="46" rx="5" transform="translate(107.5 88)"/>
+ <rect class="output-background-filler" width="32.5" height="8" transform="translate(107.5 88)"/>
+ <rect class="output-background-filler" width="8" height="46" transform="translate(107.5 88)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="A_LEVEL_INPUT">
@@ -325,7 +346,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-LVL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-LVL</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="B_LEVEL_INPUT">
@@ -334,7 +355,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-LVL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-LVL</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="C_LEVEL_INPUT">
@@ -343,7 +364,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(2 40)">C-LVL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">C-LVL</text>
</g>
<g transform="translate(108 0)">
<g transform="translate(3 5)"><svg id="ALL_CV_INPUT">
@@ -352,7 +373,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">FCV</text>
</g>
<g transform="translate(12 44)">
@@ -362,7 +383,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">A-FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">A-FCV</text>
</g>
<g transform="translate(44 44)">
<g transform="translate(3 5)"><svg id="B_FREQUENCY_INPUT">
@@ -371,7 +392,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-FCV</text>
</g>
<g transform="translate(76 44)">
<g transform="translate(3 5)"><svg id="C_FREQUENCY_INPUT">
@@ -380,7 +401,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">C-FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">C-FCV</text>
</g>
<g transform="translate(108 44)">
<g transform="translate(3 5)"><svg id="IN_INPUT">
@@ -389,7 +410,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 40)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 40)">IN</text>
</g>
<g transform="translate(12 88)">
@@ -399,7 +420,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-BW</text>
</g>
<g transform="translate(44 88)">
<g transform="translate(3 5)"><svg id="B_BANDWIDTH_INPUT">
@@ -408,7 +429,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(2 40)">B-BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">B-BW</text>
</g>
<g transform="translate(76 88)">
<g transform="translate(3 5)"><svg id="C_BANDWIDTH_INPUT">
@@ -417,7 +438,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">C-BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">C-BW</text>
</g>
<g transform="translate(108 88)">
<g transform="translate(3 5)"><svg id="OUT_OUTPUT">
@@ -426,7 +447,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/PEQ14-pp.svg b/res-pp/PEQ14-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,7 +69,7 @@ polyline.module-border-outer {
</g>
- <g transform="translate(6.5 48)">
+ <g class="io-group" transform="translate(6.5 48)">
<g transform="translate(40.5 11)"><svg id="FREQUENCY_CV_PARAM">
<g transform="translate(8 8)">
@@ -69,7 +90,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(40 37)">FCV</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(0 5)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(0 5)"/>
<g transform="translate(3 8)"><svg id="FREQUENCY_CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -79,7 +100,7 @@ polyline.module-border-outer {
</g>
- <g transform="translate(6.5 113)">
+ <g class="io-group" transform="translate(6.5 113)">
<g transform="translate(40.5 8)"><svg id="BANDWIDTH_PARAM">
<g transform="translate(8 8)">
@@ -100,7 +121,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(42.5 37)">BW</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(0 5)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(0 5)"/>
<g transform="translate(3 8)"><svg id="BANDWIDTH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -146,39 +167,39 @@ polyline.module-border-outer {
</g>
- <g transform="translate(5.5 287)">
- <rect width="64" height="73" rx="5" fill="#bbb"/>
- <rect width="32" height="36.5" rx="5" fill="#fafafa"/>
- <rect width="32" height="10" fill="#fafafa" transform="translate(0 26.5)"/>
- <rect width="10" height="36.5" fill="#fafafa" transform="translate(22 0)"/>
+ <g class="io-group" transform="translate(5.5 287)">
+ <rect class="output-background" width="64" height="73" rx="5"/>
+ <rect class="input-background" width="32" height="36.5" rx="5"/>
+ <rect class="input-background-filler" width="32" height="10" transform="translate(0 26.5)"/>
+ <rect class="input-background-filler" width="10" height="36.5" transform="translate(22 0)"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<g transform="translate(35 3)"><svg id="ODDS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
<g transform="translate(5 38)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
<g transform="translate(35 38)"><svg id="EVENS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
</g>
<g transform="translate(74 20)">
@@ -265,31 +286,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -377,31 +398,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -489,31 +510,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -601,31 +622,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -713,31 +734,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT5_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -825,31 +846,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT6_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -937,31 +958,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV7_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT7_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1049,31 +1070,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV8_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT8_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1161,31 +1182,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL9_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV9_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT9_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1273,31 +1294,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL10_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV10_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT10_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1385,31 +1406,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL11_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV11_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT11_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1497,31 +1518,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL12_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV12_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT12_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1609,31 +1630,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL13_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV13_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT13_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -1721,31 +1742,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL14_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV14_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT14_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/PEQ14XF-pp.svg b/res-pp/PEQ14XF-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,7 +69,7 @@ polyline.module-border-outer {
</g>
- <g transform="translate(-2.5 24)">
+ <g class="io-group" transform="translate(-2.5 24)">
<g transform="translate(14.5 6)"><svg id="DAMP_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -68,7 +89,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(10 33)">DAMP</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="DAMP_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -77,7 +98,7 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(32.5 23.5)">
+ <g class="io-group" transform="translate(32.5 23.5)">
<g transform="translate(14.5 6)"><svg id="GAIN_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -97,7 +118,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(11.5 33)">GAIN</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="GAIN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -106,8 +127,8 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(5.5 108)">
- <rect width="64" height="260" rx="5" fill="#bbb" transform="translate(0 -10)"/>
+ <g class="io-group" transform="translate(5.5 108)">
+ <rect class="output-background" width="64" height="260" rx="5" transform="translate(0 -10)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(27 0)">EF</text>
<g transform="translate(5 3)"><svg id="EF1_OUTPUT">
@@ -116,49 +137,49 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
<g transform="translate(5 38)"><svg id="EF2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
<g transform="translate(5 73)"><svg id="EF3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
<g transform="translate(5 108)"><svg id="EF4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
<g transform="translate(5 143)"><svg id="EF5_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
<g transform="translate(5 178)"><svg id="EF6_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
<g transform="translate(5 213)"><svg id="EF7_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 245)">7</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 245)">7</text>
<g transform="translate(31 0)">
<g transform="translate(5 3)"><svg id="EF8_OUTPUT">
@@ -167,49 +188,49 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">8</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">8</text>
<g transform="translate(5 38)"><svg id="EF9_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">9</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">9</text>
<g transform="translate(5 73)"><svg id="EF10_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">10</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">10</text>
<g transform="translate(5 108)"><svg id="EF11_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 140)">11</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 140)">11</text>
<g transform="translate(5 143)"><svg id="EF12_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 175)">12</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 175)">12</text>
<g transform="translate(5 178)"><svg id="EF13_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 210)">13</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 210)">13</text>
<g transform="translate(5 213)"><svg id="EF14_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 245)">14</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 245)">14</text>
</g>
</g>
diff --git a/res-pp/PEQ14XR-pp.svg b/res-pp/PEQ14XR-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,7 +69,7 @@ polyline.module-border-outer {
</g>
- <g transform="translate(-2.5 24)">
+ <g class="io-group" transform="translate(-2.5 24)">
<g transform="translate(14.5 6)"><svg id="DAMP_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -68,7 +89,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(10 33)">DAMP</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="DAMP_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -77,7 +98,7 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(32.5 23.5)">
+ <g class="io-group" transform="translate(32.5 23.5)">
<g transform="translate(14.5 6)"><svg id="GAIN_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -97,7 +118,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(11.5 33)">GAIN</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="GAIN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -106,14 +127,14 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(20.5 318)">
- <rect width="34" height="42" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(20.5 318)">
+ <rect class="output-background" width="34" height="42" rx="5"/>
<g transform="translate(5 4)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 37)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 37)">OUT</text>
</g>
</svg>
diff --git a/res-pp/PEQ14XV-pp.svg b/res-pp/PEQ14XV-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -67,7 +88,7 @@ polyline.module-border-outer {
<text font-size="6pt" letter-spacing="1.5px" transform="translate(9 30)">FOLLOWERS</text>
- <g transform="translate(-2.5 34)">
+ <g class="io-group" transform="translate(-2.5 34)">
<g transform="translate(14.5 6)"><svg id="EF_DAMP_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -87,7 +108,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(10 33)">DAMP</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="EF_DAMP_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -96,7 +117,7 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(32.5 34)">
+ <g class="io-group" transform="translate(32.5 34)">
<g transform="translate(14.5 6)"><svg id="EF_GAIN_PARAM">
<g transform="translate(8 8)">
<polyline points="-3,0 3,0" stroke-width="1" stroke="#00f"/>
@@ -116,7 +137,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(11.5 33)">GAIN</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="EF_GAIN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -126,7 +147,7 @@ polyline.module-border-outer {
</g>
- <g transform="translate(0 119)">
+ <g class="io-group" transform="translate(0 119)">
<text font-size="6pt" letter-spacing="1.5px" transform="translate(8 2)">TRANSPOSE</text>
<g transform="translate(24.5 13)"><svg id="TRANSPOSE_PARAM">
<g transform="translate(13 13)">
@@ -136,7 +157,7 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-transpose-peq14xv" transform="translate(15 3.5)" href="#dial-transpose-peq14xv"/>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(22.5 47)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(22.5 47)"/>
<g transform="translate(25.5 50)"><svg id="TRANSPOSE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -210,39 +231,39 @@ polyline.module-border-outer {
</g>
- <g transform="translate(5.5 287)">
- <rect width="64" height="73" rx="5" fill="#bbb"/>
- <rect width="32" height="36.5" rx="5" fill="#fafafa"/>
- <rect width="32" height="10" fill="#fafafa" transform="translate(0 26.5)"/>
- <rect width="10" height="36.5" fill="#fafafa" transform="translate(22 0)"/>
+ <g class="io-group" transform="translate(5.5 287)">
+ <rect class="output-background" width="64" height="73" rx="5"/>
+ <rect class="input-background" width="32" height="36.5" rx="5"/>
+ <rect class="input-background-filler" width="32" height="10" transform="translate(0 26.5)"/>
+ <rect class="input-background-filler" width="10" height="36.5" transform="translate(22 0)"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<g transform="translate(35 3)"><svg id="ODDS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
<g transform="translate(5 38)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
<g transform="translate(35 38)"><svg id="EVENS_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
</g>
diff --git a/res-pp/PEQ6-pp.svg b/res-pp/PEQ6-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -51,7 +72,7 @@ polyline.module-border-outer {
- <g transform="translate(0 40)">
+ <g class="io-group" transform="translate(0 40)">
<g transform="translate(14.5 7)"><svg id="FREQUENCY_CV_PARAM">
<g transform="translate(8 8)">
@@ -72,7 +93,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 33)">FCV</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="FREQUENCY_CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -81,7 +102,7 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(0 124)">
+ <g class="io-group" transform="translate(0 124)">
<g transform="translate(14.5 5)"><svg id="BANDWIDTH_PARAM">
<g transform="translate(8 8)">
@@ -102,7 +123,7 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(16.5 33)">BW</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<g transform="translate(10.5 39)"><svg id="BANDWIDTH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -145,24 +166,24 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(5.5 287)">
- <rect width="34" height="73" rx="5" fill="#bbb"/>
- <rect width="34" height="36.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 26.5)"/>
+ <g class="io-group" transform="translate(5.5 287)">
+ <rect class="output-background" width="34" height="73" rx="5"/>
+ <rect class="input-background" width="34" height="36.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 26.5)"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<g transform="translate(5 38)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
</g>
<g transform="translate(45 20)">
@@ -249,31 +270,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -361,31 +382,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -473,31 +494,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -585,31 +606,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV4_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -697,31 +718,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV5_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT5_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -809,31 +830,31 @@ polyline.module-border-outer {
</g>
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<g transform="translate(5 3)"><svg id="LEVEL6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<g transform="translate(5 38)"><svg id="FREQUENCY_CV6_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<g transform="translate(5 73)"><svg id="OUT6_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/PEQ6XF-pp.svg b/res-pp/PEQ6XF-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -94,8 +115,8 @@ polyline.module-border-outer {
<text font-size="5pt" letter-spacing="1px" transform="translate(13 0)">GAIN</text>
</g>
- <g transform="translate(5.5 104)">
- <rect width="34" height="225" rx="5" fill="#bbb" transform="translate(0 -10)"/>
+ <g class="io-group" transform="translate(5.5 104)">
+ <rect class="output-background" width="34" height="225" rx="5" transform="translate(0 -10)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(12.5 0)">EF</text>
<g transform="translate(5 3)"><svg id="EF1_OUTPUT">
<g transform="translate(12 12)">
@@ -103,41 +124,41 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
<g transform="translate(5 38)"><svg id="EF2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
<g transform="translate(5 73)"><svg id="EF3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
<g transform="translate(5 108)"><svg id="EF4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
<g transform="translate(5 143)"><svg id="EF5_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
<g transform="translate(5 178)"><svg id="EF6_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
</g>
</svg>
diff --git a/res-pp/Pan-pp.svg b/res-pp/Pan-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -77,22 +98,22 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-panner-pan" transform="translate(0 0)" href="#dial-panner-pan"/>
- <g transform="translate(5.5 44)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 44)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<g transform="translate(5 38)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
</g>
@@ -105,40 +126,40 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-panner-pan" transform="translate(0 0)" href="#dial-panner-pan"/>
- <g transform="translate(5.5 44)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 44)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<g transform="translate(5 38)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
</g>
- <g transform="translate(5.5 265)">
- <rect width="34" height="73" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 265)">
+ <rect class="output-background" width="34" height="73" rx="5"/>
<g transform="translate(5 3)"><svg id="L_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
<g transform="translate(5 38)"><svg id="R_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">R</text>
</g>
</svg>
diff --git a/res-pp/Pgmr-pp.svg b/res-pp/Pgmr-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -52,8 +73,8 @@ polyline.module-border-outer {
- <g transform="translate(5.5 56)">
- <rect width="34" height="155" rx="5" fill="#bbb" transform="translate(0 -10)"/>
+ <g class="io-group" transform="translate(5.5 56)">
+ <rect class="output-background" width="34" height="155" rx="5" transform="translate(0 -10)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(8.5 0)">OUT</text>
<g transform="translate(5 3)"><svg id="A_OUTPUT">
<g transform="translate(12 12)">
@@ -61,41 +82,41 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
<g transform="translate(5 38)"><svg id="B_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
<g transform="translate(5 73)"><svg id="C_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 105)">C</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 105)">C</text>
<g transform="translate(5 108)"><svg id="D_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 140)">D</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 140)">D</text>
</g>
<g transform="translate(0 224)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 92)"/>
- <rect width="34" height="102" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 92)"/>
+ <rect class="input-background" width="34" height="102" rx="5" transform="translate(0 -3)"/>
<g transform="translate(5 2)"><svg id="CLOCK_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 34)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 34)">CLOCK</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(5 46.5)">FWD</text>
<g transform="translate(22.5 39.7)"><svg id="DIRECTION_PARAM">
<g transform="translate(4.5 4.5)">
@@ -114,11 +135,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 98)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 98)">SELECT</text>
</g>
- <g transform="translate(5.5 105)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="30" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 105)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="30" rx="5"/>
<g transform="translate(5 1)"><svg id="SELECT_ALL_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -284,9 +305,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT1_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -301,11 +322,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -472,9 +493,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT2_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -489,11 +510,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -660,9 +681,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT3_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -677,11 +698,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -848,9 +869,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT4_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -865,11 +886,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
diff --git a/res-pp/PgmrX-pp.svg b/res-pp/PgmrX-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -204,9 +225,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT1_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -221,11 +242,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -392,9 +413,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT2_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -409,11 +430,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -580,9 +601,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT3_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -597,11 +618,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -768,9 +789,9 @@ polyline.module-border-outer {
</g>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<g transform="translate(13.8 2)"><svg id="SELECT4_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -785,11 +806,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<g transform="translate(5 4)"><svg id="SELECT4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
diff --git a/res-pp/PolyCon16-pp.svg b/res-pp/PolyCon16-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -440,10 +461,10 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(52 318)">
- <rect width="60" height="40" rx="5" fill="#fafafa"/>
- <rect width="24" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(52 318)">
+ <rect class="input-background" width="60" height="40" rx="5"/>
+ <rect class="output-background" width="24" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 4)"><svg id="CHANNELS_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -456,7 +477,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 36)">CHAN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(3 36)">CHAN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(36 36)">OUT</text>
</g>
</svg>
diff --git a/res-pp/PolyCon8-pp.svg b/res-pp/PolyCon8-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -254,14 +275,14 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(7.5 270)">
- <rect width="34" height="40" rx="5" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 270)">
+ <rect class="output-background" width="34" height="40" rx="5" transform="translate(-2 0)"/>
<g transform="translate(3 4)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 36)">OUT</text>
</g>
</svg>
diff --git a/res-pp/PolyMult-pp.svg b/res-pp/PolyMult-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -83,55 +104,55 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 70)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="74" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 64)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="74" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 64)"/>
<g transform="translate(5 3)"><svg id="CHANNELS_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(6 35)">CHAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(6 35)">CHAN</text>
<g transform="translate(5 39)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 71)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 71)">IN</text>
</g>
- <g transform="translate(5.5 77)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="140" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 77)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="140" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
<g transform="translate(5 35)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 67)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 67)">OUT</text>
<g transform="translate(5 70)"><svg id="OUT3_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 102)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 102)">OUT</text>
<g transform="translate(5 105)"><svg id="OUT4_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 137)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 137)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/PolyOff16-pp.svg b/res-pp/PolyOff16-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,8 +69,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(5.5 24)">
- <rect width="34" height="289" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 24)">
+ <rect class="input-background" width="34" height="289" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -98,11 +119,11 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
</g>
- <g transform="translate(125.5 24)">
- <rect width="34" height="289" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(125.5 24)">
+ <rect class="input-background" width="34" height="289" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="CV9_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -151,7 +172,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
</g>
<g transform="translate(0 33)">
@@ -868,10 +889,10 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(115 318)">
- <rect width="60" height="40" rx="5" fill="#fafafa"/>
- <rect width="24" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(115 318)">
+ <rect class="input-background" width="60" height="40" rx="5"/>
+ <rect class="output-background" width="24" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 4)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -884,7 +905,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(36 36)">OUT</text>
</g>
</svg>
diff --git a/res-pp/PolyOff8-pp.svg b/res-pp/PolyOff8-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -56,8 +77,8 @@ polyline.module-border-outer {
- <g transform="translate(5.5 24)">
- <rect width="34" height="289" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 24)">
+ <rect class="input-background" width="34" height="289" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -106,7 +127,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
</g>
<g transform="translate(0 33)">
@@ -487,10 +508,10 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(52 318)">
- <rect width="60" height="40" rx="5" fill="#fafafa"/>
- <rect width="24" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(52 318)">
+ <rect class="input-background" width="60" height="40" rx="5"/>
+ <rect class="output-background" width="24" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 4)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -503,7 +524,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(36 36)">OUT</text>
</g>
</svg>
diff --git a/res-pp/Pressor-pp.svg b/res-pp/Pressor-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -338,12 +359,12 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(0 269)">
- <rect width="205" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="137" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="171" height="47" rx="5" fill="#fafafa" transform="translate(10 44)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(137 0)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(171 81)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="205" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="137" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="171" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(137 0)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(171 81)"/>
<g transform="translate(10 0)">
<g transform="translate(3 0)">
@@ -353,7 +374,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
</g>
<g transform="translate(37 0)">
<g transform="translate(3 5)"><svg id="SIDECHAIN_INPUT">
@@ -362,7 +383,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(3 40)">SIDE</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(3 40)">SIDE</text>
</g>
<g transform="translate(71 0)">
<g transform="translate(3 5)"><svg id="THRESHOLD_INPUT">
@@ -371,7 +392,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(1.5 40)">TRSH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(1.5 40)">TRSH</text>
</g>
<g transform="translate(105 0)">
<g transform="translate(3 5)"><svg id="RATIO_INPUT">
@@ -380,7 +401,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">RATIO</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">RATIO</text>
</g>
<g transform="translate(139 0)">
<g transform="translate(3 5)"><svg id="ENVELOPE_OUTPUT">
@@ -389,7 +410,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ENV</text>
</g>
<g transform="translate(173 0)">
<g transform="translate(3 5)"><svg id="LEFT_OUTPUT">
@@ -398,7 +419,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
</g>
</g>
@@ -410,7 +431,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(13 40)">R</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(13 40)">R</text>
</g>
<g transform="translate(37 0)">
<g transform="translate(3 5)"><svg id="ATTACK_INPUT">
@@ -419,7 +440,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ATT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ATT</text>
</g>
<g transform="translate(71 0)">
<g transform="translate(3 5)"><svg id="RELEASE_INPUT">
@@ -428,7 +449,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.4 40)">REL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.4 40)">REL</text>
</g>
<g transform="translate(105 0)">
<g transform="translate(3 5)"><svg id="INPUT_GAIN_INPUT">
@@ -437,7 +458,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">IGN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">IGN</text>
</g>
<g transform="translate(139 0)">
<g transform="translate(3 5)"><svg id="OUTPUT_GAIN_INPUT">
@@ -446,7 +467,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">OGN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">OGN</text>
</g>
<g transform="translate(173 0)">
<g transform="translate(3 5)"><svg id="RIGHT_OUTPUT">
@@ -455,7 +476,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(12 40)">R</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(12 40)">R</text>
</g>
</g>
</g>
diff --git a/res-pp/Pulse-pp.svg b/res-pp/Pulse-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -171,41 +192,41 @@ polyline.module-border-outer {
<g transform="translate(0 182)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="105" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="105" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
<g transform="translate(5 3)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<g transform="translate(5 38)"><svg id="PWM_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7 70)">PWM</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(7 70)">PWM</text>
<g transform="translate(5 73)"><svg id="SYNC_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Reftone-pp.svg b/res-pp/Reftone-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -191,8 +212,8 @@ polyline.module-border-outer {
<use xlink:href="#dial-fine-reftone" transform="translate(0 188)" href="#dial-fine-reftone"/>
<g transform="translate(0 235)">
- <g transform="translate(0 0)">
- <rect width="34" height="75" rx="5" fill="#bbb" transform="translate(5.5 0)"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="output-background" width="34" height="75" rx="5" transform="translate(5.5 0)"/>
<g transform="translate(5.5 1)">
<g transform="translate(5 3)"><svg id="CV_OUTPUT">
<g transform="translate(12 12)">
@@ -200,7 +221,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
</g>
<g transform="translate(5.5 39)">
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
@@ -209,7 +230,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">SINE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">SINE</text>
</g>
</g>
</g>
diff --git a/res-pp/SampleHold-pp.svg b/res-pp/SampleHold-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -54,9 +75,9 @@ polyline.module-border-outer {
<g transform="translate(0 5)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 58)"/>
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 58)"/>
+ <rect class="input-background" width="34" height="62" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER1_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -68,21 +89,21 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
</g>
</g>
<g transform="translate(0 65)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 51)"/>
- <rect width="34" height="58" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 51)"/>
+ <rect class="input-background" width="34" height="58" rx="5"/>
<g transform="translate(5 3)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
<g transform="translate(9.5 41)">
@@ -103,16 +124,16 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(5.5 64)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 64)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</g>
@@ -121,9 +142,9 @@ polyline.module-border-outer {
<g transform="translate(0 181)">
<g transform="translate(0 5)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 58)"/>
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 58)"/>
+ <rect class="input-background" width="34" height="62" rx="5"/>
<g transform="translate(8 4)"><svg id="TRIGGER2_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -135,21 +156,21 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
</g>
</g>
<g transform="translate(0 65)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 51)"/>
- <rect width="34" height="58" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 51)"/>
+ <rect class="input-background" width="34" height="58" rx="5"/>
<g transform="translate(5 3)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
<g transform="translate(9.5 41)">
@@ -170,16 +191,16 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(5.5 64)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 64)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/Shaper-pp.svg b/res-pp/Shaper-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -63,8 +84,8 @@ polyline.module-border-outer {
<rect width="3.2" height="3.2" fill="#0f0"/>
</svg></g>
</g>
- <g transform="translate(74 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(74 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<g transform="translate(6 6) scale(0.18)"><svg id="TRIGGER_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -76,7 +97,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
</g>
@@ -144,15 +165,15 @@ polyline.module-border-outer {
<rect width="3.2" height="3.2" fill="#0f0"/>
</svg></g>
</g>
- <g transform="translate(102 4)">
- <rect width="30" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(102 4)">
+ <rect class="output-background" width="30" height="40" rx="5"/>
<g transform="translate(3 3)"><svg id="TRIGGER_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
@@ -167,8 +188,8 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="output-background" width="58" height="40" rx="5"/>
<g transform="translate(2.5 3)"><svg id="ENV_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -181,7 +202,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(35 36)">INV</text>
</g>
</g>
@@ -197,10 +218,10 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
- <rect width="20" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(29)"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
+ <rect class="output-background" width="20" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(29)"/>
<g transform="translate(2.5 3)"><svg id="SIGNAL_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -213,7 +234,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33 36)">OUT</text>
</g>
</g>
diff --git a/res-pp/ShaperPlus-pp.svg b/res-pp/ShaperPlus-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,12 +69,12 @@ polyline.module-border-outer {
</g>
- <g transform="translate(149 26)">
- <rect width="30" height="322" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(149 26)">
+ <rect class="input-background" width="30" height="322" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(8 10)">CV</text>
</g>
- <g transform="translate(186 26)">
- <rect width="30" height="211" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(186 26)">
+ <rect class="output-background" width="30" height="211" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(2 10)">GATE</text>
</g>
@@ -72,8 +93,8 @@ polyline.module-border-outer {
<rect width="3.2" height="3.2" fill="#0f0"/>
</svg></g>
</g>
- <g transform="translate(74 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(74 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<g transform="translate(6 6)"><svg id="TRIGGER_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -85,7 +106,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
<g transform="translate(143 7)"><svg id="ATTACK_INPUT">
<g transform="translate(12 12)">
@@ -214,8 +235,8 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="output-background" width="58" height="40" rx="5"/>
<g transform="translate(2.5 3)"><svg id="ENV_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
@@ -228,7 +249,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(35 36)">INV</text>
</g>
<g transform="translate(143 7)"><svg id="ENV_INPUT">
@@ -237,15 +258,15 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <g transform="translate(177 4)">
- <rect width="30" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(177 4)">
+ <rect class="output-background" width="30" height="40" rx="5"/>
<g transform="translate(3 3)"><svg id="TRIGGER_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
@@ -260,10 +281,10 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
- <rect width="20" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(29)"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
+ <rect class="output-background" width="20" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(29)"/>
<g transform="translate(2.5 3)"><svg id="SIGNAL_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -276,7 +297,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33 36)">OUT</text>
</g>
<g transform="translate(143 7)"><svg id="SIGNALCV_INPUT">
diff --git a/res-pp/Sine-pp.svg b/res-pp/Sine-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -143,48 +164,48 @@ polyline.module-border-outer {
<g transform="translate(0 158)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 133)"/>
- <rect width="34" height="140" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 133)"/>
+ <rect class="input-background" width="34" height="140" rx="5"/>
<g transform="translate(5 3)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<g transform="translate(5 38)"><svg id="FM_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
<g transform="translate(5 73)"><svg id="PHASE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">PHASE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">PHASE</text>
<g transform="translate(5 108)"><svg id="SYNC_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 140)">SYNC</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 140)">SYNC</text>
</g>
- <g transform="translate(5.5 146)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 146)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/SixHP-pp.svg b/res-pp/SixHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/SixteenHP-pp.svg b/res-pp/SixteenHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/Slew-pp.svg b/res-pp/Slew-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -114,8 +135,8 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-rise-shape-slew" transform="translate(2.5 39)" href="#dial-rise-shape-slew"/>
- <g transform="translate(7.5 77)">
- <rect width="30" height="30" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(7.5 77)">
+ <rect class="input-background" width="30" height="30" rx="5"/>
<g transform="translate(3 3)"><svg id="RISE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -144,8 +165,8 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-fall-shape-slew" transform="translate(2.5 39)" href="#dial-fall-shape-slew"/>
- <g transform="translate(7.5 77)">
- <rect width="30" height="30" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(7.5 77)">
+ <rect class="input-background" width="30" height="30" rx="5"/>
<g transform="translate(3 3)"><svg id="FALL_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -157,27 +178,27 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 260)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Stack-pp.svg b/res-pp/Stack-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -176,15 +197,15 @@ polyline.module-border-outer {
<use xlink:href="#dial-fine-stack" transform="translate(0 -5)" href="#dial-fine-stack"/>
</g>
- <g transform="translate(5.5 154)">
- <rect width="34" height="50" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 154)">
+ <rect class="input-background" width="34" height="50" rx="5"/>
<g transform="translate(5 3)"><svg id="CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<g transform="translate(1.5 39)">
<text font-size="5pt" letter-spacing="0.75px" transform="translate(0 6)">QNTZ</text>
<g transform="translate(22 -1)"><svg id="QUANTIZE_PARAM">
@@ -196,34 +217,34 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 212)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="72" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="72" rx="5"/>
<g transform="translate(5 0)"><svg id="THRU_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
<g transform="translate(5 36)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 68)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 68)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Sums-pp.svg b/res-pp/Sums-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -50,9 +71,9 @@ polyline.module-border-outer {
</g>
- <g transform="translate(7.5 18)">
- <rect width="34" height="63.5" rx="5" fill="#fafafa" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(-2 53.5)"/>
+ <g class="io-group" transform="translate(7.5 18)">
+ <rect class="input-background" width="34" height="63.5" rx="5" transform="translate(-2 0)"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(-2 53.5)"/>
<g transform="translate(3 5)"><svg id="A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -66,43 +87,43 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(7.5 82)">
- <rect width="34" height="163" rx="5" fill="#bbb" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 82)">
+ <rect class="output-background" width="34" height="163" rx="5" transform="translate(-2 0)"/>
+ <rect class="output-background-filler" width="34" height="10" transform="translate(-2 0)"/>
<g transform="translate(3 4)"><svg id="SUM_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">SUM</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">SUM</text>
<g transform="translate(3 44)"><svg id="DIFFERENCE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 77)">DIFF</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5 77)">DIFF</text>
<g transform="translate(3 84)"><svg id="MAX_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">MAX</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">MAX</text>
<g transform="translate(3 124)"><svg id="MIN_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 157)">MIN</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 157)">MIN</text>
</g>
<g transform="translate(0 258)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 22)"/>
- <rect width="34" height="32" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 22)"/>
+ <rect class="input-background" width="34" height="32" rx="5"/>
<g transform="translate(5 4)"><svg id="NEGATE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -110,16 +131,16 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(5.5 35)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 35)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<g transform="translate(5 2)"><svg id="NEGATE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NEG</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NEG</text>
</g>
</g>
</svg>
diff --git a/res-pp/Switch-pp.svg b/res-pp/Switch-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -51,8 +72,8 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="62" rx="5"/>
<g transform="translate(8 4)"><svg id="GATE_PARAM">
<g transform="translate(9 9)">
<circle cx="0" cy="0" r="8.5" stroke-width="1" stroke="#00f" fill="#f00"/>
@@ -64,7 +85,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
</g>
<g transform="translate(4.5 67)">
@@ -77,16 +98,16 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 79)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="74" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 64)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="74" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 64)"/>
<g transform="translate(5 3)"><svg id="HIGH1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
<g transform="translate(2 29.3)"><svg id="HIGH1_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -103,30 +124,30 @@ polyline.module-border-outer {
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
</g>
- <g transform="translate(5.5 77)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 77)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
<g transform="translate(0 196)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="74" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 64)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="74" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 64)"/>
<g transform="translate(5 3)"><svg id="HIGH2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
<g transform="translate(2 29.3)"><svg id="HIGH2_LIGHT">
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
@@ -143,16 +164,16 @@ polyline.module-border-outer {
<rect width="6.4" height="6.4" fill="#0f0"/>
</svg></g>
</g>
- <g transform="translate(5.5 77)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 77)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/Switch1616-pp.svg b/res-pp/Switch1616-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,11 +69,11 @@ polyline.module-border-outer {
</g>
- <rect width="56" height="302" rx="5" fill="#fafafa" transform="translate(5.5 9)"/>
- <rect width="302" height="56" rx="5" fill="#bbb" transform="translate(22.5 302)"/>
- <rect width="28" height="10" rx="5" fill="#fafafa" transform="translate(10.5 301)"/>
- <rect width="10" height="5" fill="#fafafa" transform="translate(36.5 302)"/>
- <rect width="28" height="10" rx="5" fill="#bbb" transform="translate(38.5 302)"/>
+ <rect class="input-background" width="56" height="302" rx="5" transform="translate(5.5 9)"/>
+ <rect class="output-background" width="302" height="56" rx="5" transform="translate(22.5 302)"/>
+ <rect class="input-background" width="28" height="10" rx="5" transform="translate(10.5 301)"/>
+ <rect class="input-background-filler" width="10" height="5" transform="translate(36.5 302)"/>
+ <rect class="output-background" width="28" height="10" rx="5" transform="translate(38.5 302)"/>
<g transform="translate(5.5 9)">
<g transform="translate(4 22)"><svg id="IN2_INPUT">
diff --git a/res-pp/Switch44-pp.svg b/res-pp/Switch44-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -180,10 +201,10 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="130" height="44" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="130" height="10" fill="#fafafa" transform="translate(10 34)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="130" height="44" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="130" height="10" transform="translate(10 34)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="IN1_INPUT">
@@ -192,7 +213,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="IN2_INPUT">
@@ -201,7 +222,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="IN3_INPUT">
@@ -210,7 +231,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
</g>
<g transform="translate(108 0)">
<g transform="translate(3 5)"><svg id="IN4_INPUT">
@@ -219,7 +240,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
</g>
<g transform="translate(10 44)">
@@ -230,7 +251,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="OUT2_OUTPUT">
@@ -239,7 +260,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="OUT3_OUTPUT">
@@ -248,7 +269,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
</g>
<g transform="translate(98 0)">
<g transform="translate(3 5)"><svg id="OUT4_OUTPUT">
@@ -257,7 +278,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
</g>
</g>
</g>
diff --git a/res-pp/Switch88-pp.svg b/res-pp/Switch88-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -48,8 +69,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(5.5 25)">
- <rect width="34" height="293" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 25)">
+ <rect class="input-background" width="34" height="293" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -100,8 +121,8 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(46.5 323)">
- <rect width="278.5" height="34" rx="5" fill="#bbb" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(46.5 323)">
+ <rect class="output-background" width="278.5" height="34" rx="5" transform="translate(0 0)"/>
<g transform="translate(5 5)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
diff --git a/res-pp/TenHP-pp.svg b/res-pp/TenHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/Test-pp.svg b/res-pp/Test-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -98,15 +119,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(0 50)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -158,15 +179,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(0 135)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -218,40 +239,40 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(0 220)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV3_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
<g transform="translate(0 265)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Test2-pp.svg b/res-pp/Test2-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -96,15 +117,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(0 75)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -156,15 +177,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(0 175)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -216,15 +237,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(0 275)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV3A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -276,15 +297,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(45 75)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -336,15 +357,15 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(45 175)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -396,38 +417,38 @@ polyline.module-border-outer {
</g>
</g>
<g transform="translate(45 275)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="CV3B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
<g transform="translate(5.5 320)">
- <g transform="translate(0 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(45 0)">
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(45 0)">
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 35)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/TestExpanderBase-pp.svg b/res-pp/TestExpanderBase-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -58,27 +79,27 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 260)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<g transform="translate(5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/TestExpanderExtension-pp.svg b/res-pp/TestExpanderExtension-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -58,15 +79,15 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 260)">
- <g transform="translate(5.5 41)">
- <rect width="34" height="38" rx="5" fill="#bbb" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background" width="34" height="38" rx="5" transform="translate(0 -3)"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/TestVCF-pp.svg b/res-pp/TestVCF-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -218,10 +239,10 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(45 315)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
- <rect width="50" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(29)"/>
+ <g class="io-group" transform="translate(45 315)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
+ <rect class="output-background" width="50" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(29)"/>
<g transform="translate(2.5 3)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -240,7 +261,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33 36)">OUT</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(70.5 36)">B</text>
</g>
diff --git a/res-pp/ThirteenHP-pp.svg b/res-pp/ThirteenHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/ThirtyHP-pp.svg b/res-pp/ThirtyHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/ThreeHP-pp.svg b/res-pp/ThreeHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/TwelveHP-pp.svg b/res-pp/TwelveHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/TwentyFiveHP-pp.svg b/res-pp/TwentyFiveHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/TwentyHP-pp.svg b/res-pp/TwentyHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/TwentyTwoHP-pp.svg b/res-pp/TwentyTwoHP-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
diff --git a/res-pp/UMix-pp.svg b/res-pp/UMix-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -53,9 +74,9 @@ polyline.module-border-outer {
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 283)"/>
- <rect width="34" height="293" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 283)"/>
+ <rect class="input-background" width="34" height="293" rx="5"/>
<g transform="translate(5 5)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -105,16 +126,16 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(5.5 283)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 283)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(5 1)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Unison-pp.svg b/res-pp/Unison-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -113,54 +134,54 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-detune-unison" transform="translate(0 -1)" href="#dial-detune-unison"/>
- <g transform="translate(5.5 44)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 44)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<g transform="translate(5 3)"><svg id="DETUNE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 171)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="PITCH_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
<g transform="translate(5 38)"><svg id="GATE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="PITCH_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
<g transform="translate(5 35)"><svg id="GATE_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
</g>
</g>
</svg>
diff --git a/res-pp/VCA-pp.svg b/res-pp/VCA-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -78,34 +99,34 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 57)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="CV1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
<g transform="translate(5 38)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT1_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
@@ -135,34 +156,34 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 216)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="CV2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
<g transform="translate(5 38)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT2_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
diff --git a/res-pp/VCAmp-pp.svg b/res-pp/VCAmp-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -102,34 +123,34 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 210)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="CV_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<g transform="translate(5 38)"><svg id="IN_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/VCF-pp.svg b/res-pp/VCF-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -264,12 +285,12 @@ polyline.module-border-outer {
<use xlink:href="#dial-slope-vcf" transform="translate(18.5 -11)" href="#dial-slope-vcf"/>
</g>
- <g transform="translate(0 269)">
- <rect width="130" height="47" rx="5" fill="#bbb" transform="translate(10 44)"/>
- <rect width="98" height="44" rx="5" fill="#fafafa" transform="translate(26 0)"/>
- <rect width="98" height="10" fill="#fafafa" transform="translate(26 34)"/>
- <rect width="97" height="47" rx="5" fill="#fafafa" transform="translate(10 44)"/>
- <rect width="10" height="47" fill="#fafafa" transform="translate(97 44)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background" width="98" height="44" rx="5" transform="translate(26 0)"/>
+ <rect class="input-background-filler" width="98" height="10" transform="translate(26 34)"/>
+ <rect class="input-background" width="97" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background-filler" width="10" height="47" transform="translate(97 44)"/>
<g transform="translate(16 0)">
<g transform="translate(12 0)">
@@ -279,7 +300,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(9 40)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(9 40)">CV</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="PITCH_INPUT">
@@ -288,7 +309,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="FM_INPUT">
@@ -297,7 +318,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(9 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(9 40)">FM</text>
</g>
</g>
@@ -309,7 +330,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(10.5 40)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(10.5 40)">IN</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="Q_INPUT">
@@ -318,7 +339,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">R/BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">R/BW</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="SLOPE_INPUT">
@@ -327,7 +348,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(7 40)">SLP</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(7 40)">SLP</text>
</g>
<g transform="translate(98 0)">
<g transform="translate(3 5)"><svg id="OUT_OUTPUT">
@@ -336,7 +357,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
</g>
</g>
</g>
diff --git a/res-pp/VCM-pp.svg b/res-pp/VCM-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -67,8 +88,8 @@ polyline.module-border-outer {
<g transform="translate(0 32)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="IN1_INPUT">
<g transform="translate(12 12)">
@@ -76,7 +97,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="CV1_INPUT">
@@ -85,7 +106,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
@@ -101,8 +122,8 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 96)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="IN2_INPUT">
<g transform="translate(12 12)">
@@ -110,7 +131,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="CV2_INPUT">
@@ -119,7 +140,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
@@ -135,8 +156,8 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 160)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="IN3_INPUT">
<g transform="translate(12 12)">
@@ -144,7 +165,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="CV3_INPUT">
@@ -153,7 +174,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
@@ -169,8 +190,8 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 225)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="IN4_INPUT">
<g transform="translate(12 12)">
@@ -178,7 +199,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="CV4_INPUT">
@@ -187,7 +208,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
@@ -212,10 +233,10 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-level-vcm" transform="translate(11.5 -7.5)" href="#dial-level-vcm"/>
- <g transform="translate(77 0)">
- <rect width="63" height="43" rx="5" fill="#bbb"/>
- <rect width="31.5" height="43" rx="5" fill="#fafafa"/>
- <rect width="5" height="43" fill="#fafafa" transform="translate(26.5 0)"/>
+ <g class="io-group" transform="translate(77 0)">
+ <rect class="output-background" width="63" height="43" rx="5"/>
+ <rect class="input-background" width="31.5" height="43" rx="5"/>
+ <rect class="input-background-filler" width="5" height="43" transform="translate(26.5 0)"/>
<g transform="translate(1 0)">
<g transform="translate(3 4)"><svg id="MIX_CV_INPUT">
<g transform="translate(12 12)">
@@ -223,7 +244,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
<g transform="translate(32 0)">
<g transform="translate(3 4)"><svg id="MIX_OUTPUT">
@@ -232,7 +253,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 39)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 39)">OUT</text>
</g>
</g>
diff --git a/res-pp/VCO-pp.svg b/res-pp/VCO-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -290,12 +311,12 @@ polyline.module-border-outer {
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
- <rect width="65" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 83)"/>
+ <rect class="input-background" width="65" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 83)"/>
<g transform="translate(12 0)">
<g transform="translate(3 5)"><svg id="PW_INPUT">
@@ -304,7 +325,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8 40)">PW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8 40)">PW</text>
</g>
<g transform="translate(44 0)">
<g transform="translate(3 5)"><svg id="FM_INPUT">
@@ -313,7 +334,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8 40)">FM</text>
</g>
<g transform="translate(76 0)">
<g transform="translate(3 5)"><svg id="SQUARE_OUTPUT">
@@ -350,7 +371,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(34 0)">
<g transform="translate(3 5)"><svg id="SYNC_INPUT">
@@ -359,7 +380,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
</g>
<g transform="translate(66 0)">
<g transform="translate(3 5)"><svg id="TRIANGLE_OUTPUT">
diff --git a/res-pp/VU-pp.svg b/res-pp/VU-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -121,41 +142,41 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 200)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="L_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
<g transform="translate(5 38)"><svg id="R_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="0.5px" transform="translate(9 70)">R (L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="0.5px" transform="translate(9 70)">R (L)</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<g transform="translate(5 0)"><svg id="L_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 32)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 32)">L</text>
<g transform="translate(5 35)"><svg id="R_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 67)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 67)">R</text>
</g>
</g>
</svg>
diff --git a/res-pp/Walk-pp.svg b/res-pp/Walk-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
@@ -123,48 +144,48 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 157)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 133)"/>
- <rect width="34" height="140" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 133)"/>
+ <rect class="input-background" width="34" height="140" rx="5"/>
<g transform="translate(5 3)"><svg id="RATE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">RATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">RATE</text>
<g transform="translate(5 38)"><svg id="OFFSET_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="1.2px" transform="translate(2 70)">OFFSET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1.2px" transform="translate(2 70)">OFFSET</text>
<g transform="translate(5 73)"><svg id="SCALE_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">SCALE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">SCALE</text>
<g transform="translate(5 108)"><svg id="JUMP_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 140)">JUMP</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 140)">JUMP</text>
</g>
- <g transform="translate(5.5 146)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 146)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</svg>
diff --git a/res-pp/Walk2-pp.svg b/res-pp/Walk2-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -221,11 +242,11 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(7 281)">
- <rect width="62" height="79" rx="5" fill="#fafafa"/>
- <rect width="22" height="40" rx="5" fill="#bbb" transform="translate(40 39)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31 39)"/>
- <rect width="31" height="20" fill="#bbb" transform="translate(31 39)"/>
+ <g class="io-group" transform="translate(7 281)">
+ <rect class="input-background" width="62" height="79" rx="5"/>
+ <rect class="output-background" width="22" height="40" rx="5" transform="translate(40 39)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31 39)"/>
+ <rect class="output-background-filler" width="31" height="20" transform="translate(31 39)"/>
<g transform="translate(3.5 3)"><svg id="OFFSET_X_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -238,7 +259,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37.5 36)">SCL</text>
<g transform="translate(3.5 42)"><svg id="RATE_X_INPUT">
<g transform="translate(12 12)">
@@ -252,15 +273,15 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37 75)">OUT</text>
</g>
- <g transform="translate(142 281)">
- <rect width="62" height="79" rx="5" fill="#fafafa"/>
- <rect width="22" height="40" rx="5" fill="#bbb" transform="translate(40 39)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31 39)"/>
- <rect width="31" height="20" fill="#bbb" transform="translate(31 39)"/>
+ <g class="io-group" transform="translate(142 281)">
+ <rect class="input-background" width="62" height="79" rx="5"/>
+ <rect class="output-background" width="22" height="40" rx="5" transform="translate(40 39)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31 39)"/>
+ <rect class="output-background-filler" width="31" height="20" transform="translate(31 39)"/>
<g transform="translate(3.5 3)"><svg id="OFFSET_Y_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -273,7 +294,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37.5 36)">SCL</text>
<g transform="translate(3.5 42)"><svg id="RATE_Y_INPUT">
<g transform="translate(12 12)">
@@ -287,14 +308,14 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37 75)">OUT</text>
</g>
- <g transform="translate(74.5 288)">
- <rect width="61" height="40" rx="5" fill="#fafafa"/>
- <rect width="22" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(74.5 288)">
+ <rect class="input-background" width="61" height="40" rx="5"/>
+ <rect class="output-background" width="22" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<g transform="translate(3.5 3)"><svg id="JUMP_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
@@ -307,7 +328,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(4 36)">TRIG</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(4 36)">TRIG</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(35.5 36)">DIST</text>
</g>
diff --git a/res-pp/XCO-pp.svg b/res-pp/XCO-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -211,8 +232,8 @@ polyline.module-border-outer {
</svg></g>
</g>
- <g transform="translate(-19 52)">
- <rect width="71" height="47" rx="5" fill="#fafafa" transform="translate(10 0)"/>
+ <g class="io-group" transform="translate(-19 52)">
+ <rect class="input-background" width="71" height="47" rx="5" transform="translate(10 0)"/>
<g transform="translate(10 0)">
<g transform="translate(7 5)"><svg id="FM_INPUT">
@@ -221,7 +242,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(11 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(11 40)">FM</text>
</g>
<g transform="translate(47 0)">
@@ -231,7 +252,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0 40)">DEPTH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0 40)">DEPTH</text>
</g>
<g transform="translate(82 0)">
@@ -251,10 +272,10 @@ polyline.module-border-outer {
- <rect width="193" height="47" rx="5" fill="#bbb" transform="translate(97 313)"/>
+ <rect class="output-background" width="193" height="47" rx="5" transform="translate(97 313)"/>
- <g transform="translate(140 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(140 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
@@ -312,9 +333,9 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 288)">
- <rect width="32" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="32" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="32" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="32" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<g transform="translate(0 0)"><svg id="SQUARE_OUTPUT">
<g transform="translate(12 12)">
@@ -322,7 +343,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -360,8 +381,8 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(180 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(180 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
@@ -419,9 +440,9 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 288)">
- <rect width="32" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="32" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="32" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="32" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<g transform="translate(0 0)"><svg id="SAW_OUTPUT">
<g transform="translate(12 12)">
@@ -429,7 +450,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -467,8 +488,8 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(220 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(220 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
@@ -526,9 +547,9 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 288)">
- <rect width="32" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="32" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="32" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="32" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<g transform="translate(0 0)"><svg id="TRIANGLE_OUTPUT">
<g transform="translate(12 12)">
@@ -536,7 +557,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -574,8 +595,8 @@ polyline.module-border-outer {
</g>
</g>
- <g transform="translate(260 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(260 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
@@ -634,9 +655,9 @@ polyline.module-border-outer {
</g>
</svg></g>
</g>
- <g transform="translate(0 288)">
- <rect width="31" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="31" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="31" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="31" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<g transform="translate(0 0)"><svg id="SINE_OUTPUT">
<g transform="translate(12 12)">
@@ -644,7 +665,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -683,8 +704,8 @@ polyline.module-border-outer {
</g>
- <g transform="translate(0 313)">
- <rect width="71" height="47" rx="5" fill="#fafafa" transform="translate(10 0)"/>
+ <g class="io-group" transform="translate(0 313)">
+ <rect class="input-background" width="71" height="47" rx="5" transform="translate(10 0)"/>
<g transform="translate(10 0)">
<g transform="translate(7 5)"><svg id="PITCH_INPUT">
@@ -693,7 +714,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">V/OCT</text>
</g>
<g transform="translate(47 0)">
@@ -703,7 +724,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
</g>
<g transform="translate(100 0)">
@@ -713,7 +734,7 @@ polyline.module-border-outer {
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">MIX</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">MIX</text>
</g>
</g>
</svg>
diff --git a/res-pp/XFade-pp.svg b/res-pp/XFade-pp.svg
@@ -14,7 +14,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -30,6 +33,24 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
</style>
<defs>
@@ -107,15 +128,15 @@ polyline.module-border-outer {
</g>
</svg></g>
<use xlink:href="#dial-mixab-xfade" transform="translate(0 3)" href="#dial-mixab-xfade"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<g transform="translate(5 3)"><svg id="MIX_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -141,34 +162,34 @@ polyline.module-border-outer {
</g>
<g transform="translate(0 210)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<g transform="translate(5 3)"><svg id="A_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
<g transform="translate(5 38)"><svg id="B_INPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#0f0" fill="#0f0"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#0f0" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<g transform="translate(5 0)"><svg id="OUT_OUTPUT">
<g transform="translate(12 12)">
<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00"/>
<circle cx="0" cy="0" r="10.5" stroke-width="3" stroke="#f00" fill="none"/>
</g>
</svg></g>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">MIX</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">MIX</text>
</g>
</g>
</svg>
diff --git a/res-src/AD-src.svg b/res-src/AD-src.svg
@@ -35,23 +35,23 @@
</g>
<g transform="translate(0 160.5)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<def id="ATTACK_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2 70)">ATTACK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2 70)">ATTACK</text>
<def id="DECAY_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">DECAY</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">DECAY</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="ENV_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
<def id="EOC_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
</g>
</g>
</module>
diff --git a/res-src/ADSR-src.svg b/res-src/ADSR-src.svg
@@ -60,17 +60,17 @@
</g>
<g transform="translate(0 262)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="GATE_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/AMRM-src.svg b/res-src/AMRM-src.svg
@@ -55,25 +55,25 @@
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<def id="MODULATOR_INPUT" xlink:href="#input" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7.5 36)">MOD</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(7.5 36)">MOD</text>
<def id="CARRIER_INPUT" xlink:href="#input" transform="translate(39 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42.5 36)">CAR</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42.5 36)">CAR</text>
<def id="RECTIFY_INPUT" xlink:href="#input" transform="translate(5 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">RECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">RECT</text>
<def id="DRYWET_INPUT" xlink:href="#input" transform="translate(39 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">D/W</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">D/W</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<def id="RECTIFY_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 33)">RECT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 33)">RECT</text>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(39 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42.5 33)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(42.5 33)">OUT</text>
</g>
</g>
diff --git a/res-src/ASR-src.svg b/res-src/ASR-src.svg
@@ -29,23 +29,23 @@
</g>
<g transform="translate(0 162)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<def id="ATTACK_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(9 70)">ATT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(9 70)">ATT</text>
<def id="RELEASE_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(9 105)">REL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(9 105)">REL</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="ENV_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">ENV</text>
<def id="EOC_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 67)">EOC</text>
</g>
</g>
</module>
diff --git a/res-src/Additator-src.svg b/res-src/Additator-src.svg
@@ -112,58 +112,58 @@
<def id="PHASE_PARAM" xlink:href="#button-small" transform="translate(9 27)"/>
</g>
- <g transform="translate(0 269)">
- <rect width="205" height="47" rx="5" fill="#bbb" transform="translate(10 44)"/>
- <rect width="171" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(171 81)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="205" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background" width="171" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(171 81)"/>
<g transform="translate(10 0)">
<g transform="translate(3 0)">
<def id="SYNC_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
</g>
<g transform="translate(37 0)">
<def id="PARTIALS_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">PRTLS</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">PRTLS</text>
</g>
<g transform="translate(71 0)">
<def id="WIDTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">WIDTH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">WIDTH</text>
</g>
<g transform="translate(105 0)">
<def id="ODD_SKEW_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OSK</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OSK</text>
</g>
<g transform="translate(139 0)">
<def id="EVEN_SKEW_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ESK</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ESK</text>
</g>
</g>
<g transform="translate(10 44)">
<g transform="translate(3 0)">
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(37 0)">
<def id="GAIN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 40)">GAIN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(2 40)">GAIN</text>
</g>
<g transform="translate(71 0)">
<def id="DECAY_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">DECAY</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">DECAY</text>
</g>
<g transform="translate(105 0)">
<def id="BALANCE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">BAL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">BAL</text>
</g>
<g transform="translate(139 0)">
<def id="FILTER_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(3 40)">FLTR</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(3 40)">FLTR</text>
</g>
<g transform="translate(173 0)">
<def id="AUDIO_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/AddrSeq-src.svg b/res-src/AddrSeq-src.svg
@@ -34,16 +34,16 @@
<def xlink:href="#module6" var-name="ADDR-SEQ"/>
- <g transform="translate(6.5 32)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 30)"/>
+ <g class="io-group" transform="translate(6.5 32)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 30)"/>
<def id="CLOCK_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
</g>
- <g transform="translate(6.5 69)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(6.5 69)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="RESET_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
</g>
<g transform="translate(1 121)">
@@ -64,17 +64,17 @@
<text font-size="6pt" letter-spacing="1.5px" transform="translate(4.5 0)">SELECT</text>
<def id="SELECT_PARAM" xlink:href="#knob29" transform="translate(0 2)"/>
<def xlink:href="#dial-select" transform="translate(0 2)"/>
- <g transform="translate(5.5 47)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 47)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="SELECT_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
</g>
</g>
- <g transform="translate(6.5 321)">
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(6.5 321)">
+ <rect class="output-background" width="34" height="39" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
</g>
<g transform="translate(49.5 32)">
diff --git a/res-src/Analyzer-src.svg b/res-src/Analyzer-src.svg
@@ -75,43 +75,43 @@
<!-- <polyline points="0,0 0,380" stroke="#0f0" stroke-width="1" fill="none" transform="translate(290 0)" /> -->
<!-- <polyline points="0,0 0,380" stroke="#f00" stroke-width="1" fill="none" transform="translate(150 0)" /> -->
<g transform="translate(0 320)">
- <g transform="translate(10 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(10 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="SIGNALA_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="SIGNALA_OUTPUT" xlink:href="#output" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
- <g transform="translate(82.5 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(82.5 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="SIGNALB_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="SIGNALB_OUTPUT" xlink:href="#output" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
- <g transform="translate(155 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(155 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="SIGNALC_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="SIGNALC_OUTPUT" xlink:href="#output" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
- <g transform="translate(227 0)">
- <rect width="62" height="40" rx="5" fill="#fafafa"/>
- <rect width="23" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(227 0)">
+ <rect class="input-background" width="62" height="40" rx="5"/>
+ <rect class="output-background" width="23" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="SIGNALD_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="SIGNALD_OUTPUT" xlink:href="#output" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10.5 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33.5 36)">THRU</text>
</g>
</g>
diff --git a/res-src/Arp-src.svg b/res-src/Arp-src.svg
@@ -57,25 +57,25 @@
</g>
<g transform="translate(0 129)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="143" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 133)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="143" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 133)"/>
<def id="CLOCK_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.3 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.3 35)">CLOCK</text>
<def id="RESET_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.3 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.3 70)">RESET</text>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 105)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 105)">V/OCT</text>
<def id="GATE_INPUT" xlink:href="#input" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 140)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 140)">GATE</text>
</g>
- <g transform="translate(5.5 146)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 146)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="PITCH_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
<def id="GATE_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
</g>
</g>
</module>
diff --git a/res-src/Assign-src.svg b/res-src/Assign-src.svg
@@ -11,23 +11,23 @@
</g>
<g transform="translate(0 75)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="105" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="105" rx="5"/>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
<def id="GATE_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
<def id="RESET_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 105)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 105)">RESET</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="PITCH_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
<def id="GATE_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
</g>
</g>
</module>
diff --git a/res-src/Bool-src.svg b/res-src/Bool-src.svg
@@ -4,34 +4,34 @@
<def xlink:href="#module3" var-name="BOOL"/>
- <g transform="translate(7.5 18)">
- <rect width="34" height="63.5" rx="5" fill="#fafafa" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(-2 53.5)"/>
+ <g class="io-group" transform="translate(7.5 18)">
+ <rect class="input-background" width="34" height="63.5" rx="5" transform="translate(-2 0)"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(-2 53.5)"/>
<def id="A_INPUT" xlink:href="#input" transform="translate(3 5)"/>
<def id="B_INPUT" xlink:href="#input" transform="translate(3 35)"/>
</g>
- <g transform="translate(7.5 82)">
- <rect width="34" height="123" rx="5" fill="#bbb" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 82)">
+ <rect class="output-background" width="34" height="123" rx="5" transform="translate(-2 0)"/>
+ <rect class="output-background-filler" width="34" height="10" transform="translate(-2 0)"/>
<def id="AND_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">AND</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">AND</text>
<def id="OR_OUTPUT" xlink:href="#output" transform="translate(3 44)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(9.5 77)">OR</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(9.5 77)">OR</text>
<def id="XOR_OUTPUT" xlink:href="#output" transform="translate(3 84)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">XOR</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">XOR</text>
</g>
<g transform="translate(0 217)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 22)"/>
- <rect width="34" height="32" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 22)"/>
+ <rect class="input-background" width="34" height="32" rx="5"/>
<def id="NOT_INPUT" xlink:href="#input" transform="translate(5 4)"/>
</g>
- <g transform="translate(5.5 35)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 35)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<def id="NOT_OUTPUT" xlink:href="#output" transform="translate(5 2)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NOT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NOT</text>
</g>
</g>
</module>
diff --git a/res-src/CVD-src.svg b/res-src/CVD-src.svg
@@ -28,10 +28,10 @@
<def xlink:href="#dial-time" transform="translate(0 3)"/>
<def id="TIME_SCALE_PARAM" xlink:href="#knob16" transform="translate(14.5 59)"/>
<def xlink:href="#dial-scale" transform="translate(0 44.5)"/>
- <g transform="translate(5.5 79)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 79)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="TIME_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -39,25 +39,25 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(2 0)">DRY/WET</text>
<def id="MIX_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-mix-cvd" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="MIX_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 264)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Clpr-src.svg b/res-src/Clpr-src.svg
@@ -30,25 +30,25 @@
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<def id="LEFT_INPUT" xlink:href="#input" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<def id="RIGHT_INPUT" xlink:href="#input" transform="translate(39 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
<def id="THRESHOLD_INPUT" xlink:href="#input" transform="translate(5 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
<def id="OUTPUT_GAIN_INPUT" xlink:href="#input" transform="translate(39 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<def id="LEFT_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<def id="RIGHT_OUTPUT" xlink:href="#output" transform="translate(39 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</module>
diff --git a/res-src/Cmp-src.svg b/res-src/Cmp-src.svg
@@ -75,10 +75,10 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(20 0)">A</text>
<def id="A_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-offset-cmp" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="A_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
</g>
</g>
@@ -86,10 +86,10 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(20 0)">B</text>
<def id="B_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-offset-cmp" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="B_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(13 35)">IN</text>
</g>
</g>
@@ -97,10 +97,10 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(3.5 0)">WINDOW</text>
<def id="WINDOW_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<def xlink:href="#dial-window" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="WINDOW_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -108,10 +108,10 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(14 0)">LAG</text>
<def id="LAG_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-lag-cmp" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="LAG_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -122,8 +122,8 @@
<use xlink:href="#dial-voltage-cmp" transform="translate(0.5 -2.5)"/>
</g>
- <g transform="translate(11 279)">
- <rect width="68" height="77" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(11 279)">
+ <rect class="output-background" width="68" height="77" rx="5"/>
<def id="GREATER_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
<g transform="translate(9 36.5)">
<text font-size="5pt" transform="translate(0 0)">A</text>
@@ -137,8 +137,8 @@
<text font-size="5pt" transform="translate(13 0)">B</text>
</g>
<def id="EQUAL_OUTPUT" xlink:href="#output" transform="translate(5 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12 72)">EQ</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12 72)">EQ</text>
<def id="NOT_EQUAL_OUTPUT" xlink:href="#output" transform="translate(39 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">NOT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">NOT</text>
</g>
</module>
diff --git a/res-src/CmpDist-src.svg b/res-src/CmpDist-src.svg
@@ -114,64 +114,64 @@
<def xlink:href="#dial-mintick" transform="translate(-12.5 -12)"/>
</g>
- <g transform="translate(0 225)">
- <rect width="130" height="135" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="65" height="91" rx="5" fill="#bbb" transform="translate(75 44)"/>
- <rect width="10" height="8" fill="#bbb" transform="translate(75 44)"/>
- <rect width="10" height="8" fill="#bbb" transform="translate(130 44)"/>
- <rect width="10" height="8" fill="#bbb" transform="translate(75 127)"/>
+ <g class="io-group" transform="translate(0 225)">
+ <rect class="input-background" width="130" height="135" rx="5" transform="translate(10 0)"/>
+ <rect class="output-background" width="65" height="91" rx="5" transform="translate(75 44)"/>
+ <rect class="output-background-filler" width="10" height="8" transform="translate(75 44)"/>
+ <rect class="output-background-filler" width="10" height="8" transform="translate(130 44)"/>
+ <rect class="output-background-filler" width="10" height="8" transform="translate(75 127)"/>
<g transform="translate(12 0)">
<def id="GT_MIX_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">GTM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">GTM</text>
</g>
<g transform="translate(44 0)">
<def id="LT_MIX_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">LTM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">LTM</text>
</g>
<g transform="translate(76 0)">
<def id="WINDOW_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="0.5px" transform="translate(1.5 40)">WNDW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="0.5px" transform="translate(1.5 40)">WNDW</text>
</g>
<g transform="translate(108 0)">
<def id="DRY_WET_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">D/W</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">D/W</text>
</g>
<g transform="translate(0 44)">
<g transform="translate(12 0)">
<def id="A_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">A IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">A IN</text>
</g>
<g transform="translate(44 0)">
<def id="A_SCALE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">A SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">A SCL</text>
</g>
<g transform="translate(76 0)">
<def id="GT_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8 40)">GT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(8 40)">GT</text>
</g>
<g transform="translate(108 0)">
<def id="LT_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(9.5 40)">LT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(9.5 40)">LT</text>
</g>
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="B_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">B IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">B IN</text>
</g>
<g transform="translate(34 0)">
<def id="B_SCALE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">B SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">B SCL</text>
</g>
<g transform="translate(66 0)">
<def id="EQ_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(9 40)">EQ</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(9 40)">EQ</text>
</g>
<g transform="translate(98 0)">
<def id="MIX_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 40)">MIX</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 40)">MIX</text>
</g>
</g>
</g>
diff --git a/res-src/DADSRH-src.svg b/res-src/DADSRH-src.svg
@@ -124,11 +124,11 @@
</g>
</g>
- <g transform="translate(84 37)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(84 37)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<def id="TRIGGER_PARAM" xlink:href="#button" transform="translate(6 6)"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(31 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
<g transform="translate(120 93)">
@@ -159,19 +159,19 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(-1.5 34)">RST</text>
</g>
- <g transform="translate(112 187)">
- <rect width="30" height="116" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(112 187)">
+ <rect class="output-background" width="30" height="116" rx="5"/>
<g transform="translate(0 1)">
<def id="ENV_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
</g>
<g transform="translate(0 38)">
<def id="INV_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
</g>
<g transform="translate(0 75)">
<def id="TRIGGER_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
</module>
diff --git a/res-src/DADSRHPlus-src.svg b/res-src/DADSRHPlus-src.svg
@@ -4,12 +4,12 @@
<def xlink:href="#module" var-name="DADSR(H)+"/>
- <g transform="translate(149 26)">
- <rect width="30" height="323" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(149 26)">
+ <rect class="input-background" width="30" height="323" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(8 10)">CV</text>
</g>
- <g transform="translate(186 26)">
- <rect width="30" height="267" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(186 26)">
+ <rect class="output-background" width="30" height="267" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(2 10)">GATE</text>
</g>
@@ -142,11 +142,11 @@
</g>
</g>
- <g transform="translate(84 37)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(84 37)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<def id="TRIGGER_PARAM" xlink:href="#button" transform="translate(6 6)"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(31 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
<g transform="translate(120 93)">
@@ -177,19 +177,19 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(-1.5 34)">RST</text>
</g>
- <g transform="translate(112 187)">
- <rect width="30" height="116" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(112 187)">
+ <rect class="output-background" width="30" height="116" rx="5"/>
<g transform="translate(0 1)">
<def id="ENV_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
</g>
<g transform="translate(0 38)">
<def id="INV_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">INV</text>
</g>
<g transform="translate(0 75)">
<def id="TRIGGER_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
</module>
diff --git a/res-src/DGate-src.svg b/res-src/DGate-src.svg
@@ -25,23 +25,23 @@
</g>
<g transform="translate(0 187)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 58)"/>
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 58)"/>
+ <rect class="input-background" width="34" height="62" rx="5"/>
<def id="TRIGGER_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(5 26)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.6 58)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.6 58)">TRIG</text>
</g>
- <g transform="translate(0 62)">
- <rect width="34" height="74" rx="5" fill="#bbb" transform="translate(5.5 0)"/>
- <rect width="34" height="10" fill="#bbb" transform="translate(5.5 0)"/>
+ <g class="io-group" transform="translate(0 62)">
+ <rect class="output-background" width="34" height="74" rx="5" transform="translate(5.5 0)"/>
+ <rect class="output-background-filler" width="34" height="10" transform="translate(5.5 0)"/>
<g transform="translate(5.5 0)">
<def id="GATE_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 35)">GATE</text>
</g>
<g transform="translate(5.5 38)">
<def id="END_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">END</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 32)">END</text>
</g>
</g>
</g>
diff --git a/res-src/Detune-src.svg b/res-src/Detune-src.svg
@@ -50,28 +50,28 @@
<use xlink:href="#dial-cents-detune" transform="translate(0 -2)"/>
</g>
- <g transform="translate(5.5 74)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 74)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="CV_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
<g transform="translate(0 123)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="107" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="107" rx="5"/>
<def id="THRU_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
<def id="OUT_PLUS_OUTPUT" xlink:href="#output" transform="translate(5 36)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 68)">OUT+</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 68)">OUT+</text>
<def id="OUT_MINUS_OUTPUT" xlink:href="#output" transform="translate(5 72)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 104)">OUT-</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 104)">OUT-</text>
</g>
</g>
</module>
diff --git a/res-src/EQ-src.svg b/res-src/EQ-src.svg
@@ -45,17 +45,17 @@
</g>
<g transform="translate(0 264)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/EQS-src.svg b/res-src/EQS-src.svg
@@ -42,21 +42,21 @@
</g>
<g transform="translate(11 275)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 31)"/>
- <rect width="68" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 31)"/>
+ <rect class="input-background" width="68" height="38" rx="5"/>
<def id="LEFT_INPUT" xlink:href="#input" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<def id="RIGHT_INPUT" xlink:href="#input" transform="translate(39 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
</g>
- <g transform="translate(0 44)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 44)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<def id="LEFT_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<def id="RIGHT_OUTPUT" xlink:href="#output" transform="translate(39 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</module>
diff --git a/res-src/Edge-src.svg b/res-src/Edge-src.svg
@@ -130,22 +130,22 @@
</g>
<g transform="translate(0 191)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 38)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="109" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 38)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="109" rx="5"/>
<def id="HIGH_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1.2px" transform="translate(11 35)">HIGH</text>
+ <text class="output-label" font-size="5pt" letter-spacing="1.2px" transform="translate(11 35)">HIGH</text>
<def id="HIGH_LIGHT" xlink:href="#light-small" transform="translate(2 29.3)"/>
<def id="RISE_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.9 70)">RISE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.9 70)">RISE</text>
<def id="FALL_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.6 105)">FALL</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.6 105)">FALL</text>
</g>
</g>
</module>
diff --git a/res-src/EightFO-src.svg b/res-src/EightFO-src.svg
@@ -148,8 +148,8 @@
<use xlink:href="#dial-phase-eightfo" transform="translate(3 280) translate(12 12) rotate(90) translate(-20 -20)"/>
</g>
- <g transform="translate(176 32)">
- <rect width="30" height="328" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(176 32)">
+ <rect class="input-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<def id="PHASE7_INPUT" xlink:href="#input" transform="translate(0 0)"/>
<def id="PHASE6_INPUT" xlink:href="#input" transform="translate(0 40)"/>
@@ -164,8 +164,8 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(8 320)">CV</text>
</g>
- <g transform="translate(215 32)">
- <rect width="30" height="328" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(215 32)">
+ <rect class="output-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<def id="PHASE7_OUTPUT" xlink:href="#output" transform="translate(0 0)"/>
<def id="PHASE6_OUTPUT" xlink:href="#output" transform="translate(0 40)"/>
@@ -183,34 +183,34 @@
<!-- <polyline points="0,0 0,360" stroke="#0f0" stroke-width="1" fill="none" transform="translate(135 0)" /> -->
<!-- <polyline points="0,0 270,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 360)" /> -->
<!-- <rect width="230" height="10" fill="#0f0" transform="translate(0 263)" /> -->
- <g transform="translate(0 313)">
- <rect width="70" height="87" rx="5" fill="#fafafa" transform="translate(10 -40)"/>
- <rect width="108" height="43" rx="5" fill="#fafafa" transform="translate(10 -40)"/>
+ <g class="io-group" transform="translate(0 313)">
+ <rect class="input-background" width="70" height="87" rx="5" transform="translate(10 -40)"/>
+ <rect class="input-background" width="108" height="43" rx="5" transform="translate(10 -40)"/>
<!-- <rect width="300" height="7" fill="#f00" transform="translate(10 40)" /> -->
<g transform="translate(10 -40)">
<!-- <rect width="30" height="40" rx="5" fill="#fafafa" /> -->
<def id="SAMPLE_PWM_INPUT" xlink:href="#input" transform="translate(4 4)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 38)">S/PW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 38)">S/PW</text>
</g>
<g transform="translate(50 -40)">
<!-- <rect width="30" height="40" rx="5" fill="#fafafa" /> -->
<def id="OFFSET_INPUT" xlink:href="#input" transform="translate(2 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(4.5 38)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(4.5 38)">OFF</text>
</g>
<g transform="translate(90 -40)">
<!-- <rect width="30" height="40" rx="5" fill="#fafafa" /> -->
<def id="SCALE_INPUT" xlink:href="#input" transform="translate(0 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2.5 38)">SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(2.5 38)">SCL</text>
</g>
<g transform="translate(10 0)">
<!-- <rect width="30" height="47" rx="5" fill="#fafafa" /> -->
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(4 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(2 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">V/OCT</text>
</g>
<g transform="translate(50 0)">
<!-- <rect width="30" height="47" rx="5" fill="#fafafa" /> -->
<def id="RESET_INPUT" xlink:href="#input" transform="translate(2 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0 40)">RESET</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0 40)">RESET</text>
</g>
</g>
</module>
diff --git a/res-src/EightOne-src.svg b/res-src/EightOne-src.svg
@@ -4,53 +4,53 @@
<def xlink:href="#module6" var-name="8:1"/>
- <g transform="translate(6.5 32)">
- <rect width="34" height="337" rx="5" fill="#fafafa" transform="translate(0 -9)"/>
+ <g class="io-group" transform="translate(6.5 32)">
+ <rect class="input-background" width="34" height="337" rx="5" transform="translate(0 -9)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(12.5 0)">IN</text>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
<def id="IN1_LIGHT" xlink:href="#light-small" transform="translate(17 29.5)"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 44.3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
<def id="IN2_LIGHT" xlink:href="#light-small" transform="translate(17 70.8)"/>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 86.6)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
<def id="IN3_LIGHT" xlink:href="#light-small" transform="translate(17 113.1)"/>
<def id="IN4_INPUT" xlink:href="#input" transform="translate(5 126.9)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
<def id="IN4_LIGHT" xlink:href="#light-small" transform="translate(17 153.4)"/>
<def id="IN5_INPUT" xlink:href="#input" transform="translate(5 168.1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
<def id="IN5_LIGHT" xlink:href="#light-small" transform="translate(17 194.6)"/>
<def id="IN6_INPUT" xlink:href="#input" transform="translate(5 209.4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
<def id="IN6_LIGHT" xlink:href="#light-small" transform="translate(17 235.9)"/>
<def id="IN7_INPUT" xlink:href="#input" transform="translate(5 250.7)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
<def id="IN7_LIGHT" xlink:href="#light-small" transform="translate(17 277.2)"/>
<def id="IN8_INPUT" xlink:href="#input" transform="translate(5 292)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
<def id="IN8_LIGHT" xlink:href="#light-small" transform="translate(17 318.5)"/>
</g>
- <g transform="translate(49.5 32)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 30)"/>
+ <g class="io-group" transform="translate(49.5 32)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 30)"/>
<def id="CLOCK_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
</g>
- <g transform="translate(49.5 69)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(49.5 69)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="RESET_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
</g>
<g transform="translate(44 121)">
@@ -71,17 +71,17 @@
<text font-size="6pt" letter-spacing="1.5px" transform="translate(4.5 0)">SELECT</text>
<def id="SELECT_PARAM" xlink:href="#knob29" transform="translate(0 2)"/>
<def xlink:href="#dial-select" transform="translate(0 2)"/>
- <g transform="translate(5.5 47)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 47)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="SELECT_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
</g>
</g>
- <g transform="translate(49.5 321)">
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(49.5 321)">
+ <rect class="output-background" width="34" height="39" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 35)">OUT</text>
</g>
<!-- <polyline points="0,0 90,0" stroke="#f00" stroke-width="1" fill="none" transform="translate(0 47)" /> -->
diff --git a/res-src/FFB-src.svg b/res-src/FFB-src.svg
@@ -100,31 +100,31 @@
<!-- <use id="HIGHPASS_LIGHT" xlink:href="#light-small" transform="translate(1 8.5)" /> -->
</g>
- <g transform="translate(28.5 278)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
- <rect width="63" height="10" fill="#fafafa" transform="translate(0 33)"/>
+ <g class="io-group" transform="translate(28.5 278)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
+ <rect class="input-background-filler" width="63" height="10" transform="translate(0 33)"/>
<g transform="translate(1 0)">
<def id="IN_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<def id="CV_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 39)">FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 39)">FCV</text>
</g>
</g>
- <g transform="translate(13 320)">
- <rect width="94" height="43" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(13 320)">
+ <rect class="output-background" width="94" height="43" rx="5"/>
<g transform="translate(1 0)">
<def id="ALL_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 39)">ALL</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 39)">ALL</text>
</g>
<g transform="translate(32 0)">
<def id="ODD_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 39)">ODD</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 39)">ODD</text>
</g>
<g transform="translate(63 0)">
<def id="EVEN_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(3 39)">EVEN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(3 39)">EVEN</text>
</g>
</g>
</module>
diff --git a/res-src/FMOp-src.svg b/res-src/FMOp-src.svg
@@ -181,46 +181,46 @@
<!-- <rect width="70" height="9" fill="#f0f" transform="translate(0 204)" /> -->
<!-- <rect width="70" height="9" fill="#f0f" transform="translate(0 260)" /> -->
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="97" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="130" height="44" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(130 34)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(97 81)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="97" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="130" height="44" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(130 34)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(97 81)"/>
<g transform="translate(12 0)">
<def id="DEPTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">DEPTH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.5 40)">DEPTH</text>
</g>
<g transform="translate(44 0)">
<def id="FEEDBACK_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3.5 40)">FDBK</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3.5 40)">FDBK</text>
</g>
<g transform="translate(76 0)">
<def id="LEVEL_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">LEVEL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">LEVEL</text>
</g>
<g transform="translate(108 0)">
<def id="SUSTAIN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">SUS</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">SUS</text>
</g>
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(34 0)">
<def id="FM_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(8.5 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(8.5 40)">FM</text>
</g>
<g transform="translate(66 0)">
<def id="GATE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">GATE</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">GATE</text>
</g>
<g transform="translate(98 0)">
<def id="AUDIO_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/FlipFlop-src.svg b/res-src/FlipFlop-src.svg
@@ -5,40 +5,40 @@
<def xlink:href="#module3" var-name="FLIPFLOP"/>
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<def id="RESET1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="A1_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
<def id="B1_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
</g>
</g>
<g transform="translate(0 169)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 35)">TRIG</text>
<def id="RESET2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="A2_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 32)">A</text>
<def id="B2_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 67)">B</text>
</g>
</g>
</module>
diff --git a/res-src/Follow-src.svg b/res-src/Follow-src.svg
@@ -42,10 +42,10 @@
<text font-size="6pt" letter-spacing="2.0px" transform="translate(8.5 0)">DAMP</text>
<def id="RESPONSE_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-response-follow" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="RESPONSE_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -53,25 +53,25 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(11.5 0)">GAIN</text>
<def id="GAIN_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-scale-follow" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="GAIN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 230)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
diff --git a/res-src/FourMan-src.svg b/res-src/FourMan-src.svg
@@ -5,73 +5,73 @@
<def xlink:href="#module3" var-name="4MAN"/>
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<def id="TRIGGER1_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
<g transform="translate(0 98)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<def id="TRIGGER2_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
<g transform="translate(0 178)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<def id="TRIGGER3_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
<g transform="translate(0 258)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<def id="TRIGGER4_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
- <g transform="translate(5.5 37)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 37)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<g transform="translate(2 2)">
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/Inv-src.svg b/res-src/Inv-src.svg
@@ -5,44 +5,44 @@
<def xlink:href="#module3" var-name="INV"/>
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="113" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 103)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="113" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 103)"/>
<def id="GATE1_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<def id="GATE1_INPUT" xlink:href="#input" transform="translate(5 26)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
<text font-size="5pt" letter-spacing="0.3px" transform="translate(1 71)">LATCH</text>
<def id="LATCH1_PARAM" xlink:href="#button-small" transform="translate(24 64)"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 78)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
</g>
- <g transform="translate(5.5 113)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 113)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
<def id="LOW1_LIGHT" xlink:href="#light-small" transform="translate(5 29.3)"/>
<def id="HIGH1_LIGHT" xlink:href="#light-small" transform="translate(5 29.3)"/>
</g>
</g>
<g transform="translate(0 183)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="113" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 103)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="113" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 103)"/>
<def id="GATE2_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<def id="GATE2_INPUT" xlink:href="#input" transform="translate(5 26)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 58)">GATE</text>
<text font-size="5pt" letter-spacing="0.3px" transform="translate(1 71)">LATCH</text>
<def id="LATCH2_PARAM" xlink:href="#button-small" transform="translate(24 64)"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 78)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(13 110)">IN</text>
</g>
- <g transform="translate(5.5 113)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 113)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="1px" transform="translate(14 35)">OUT</text>
<def id="LOW2_LIGHT" xlink:href="#light-small" transform="translate(5 29.3)"/>
<def id="HIGH2_LIGHT" xlink:href="#light-small" transform="translate(5 29.3)"/>
</g>
diff --git a/res-src/LFO-src.svg b/res-src/LFO-src.svg
@@ -59,21 +59,21 @@
<!-- <rect width="50" height="10" fill="#0f0" transform="translate(0 181)" /> -->
<!-- <rect width="50" height="10" fill="#0f0" transform="translate(0 215)" /> -->
- <g transform="translate(0 225)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 44)"/>
- <rect width="97.5" height="135" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="65" height="135" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(32.5 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 127)"/>
+ <g class="io-group" transform="translate(0 225)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 44)"/>
+ <rect class="output-background" width="97.5" height="135" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="65" height="135" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(32.5 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 127)"/>
<g transform="translate(12 0)">
<def id="SAMPLE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">SAM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">SAM</text>
</g>
<g transform="translate(44 0)">
<def id="PW_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(8 40)">PW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(8 40)">PW</text>
</g>
<g transform="translate(76 0)">
<def id="RAMP_DOWN_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
@@ -87,11 +87,11 @@
<g transform="translate(0 44)">
<g transform="translate(12 0)">
<def id="OFFSET_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">OFF</text>
</g>
<g transform="translate(44 0)">
<def id="SCALE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">SCL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6.5 40)">SCL</text>
</g>
<g transform="translate(76 0)">
<def id="RAMP_UP_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
@@ -111,11 +111,11 @@
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(34 0)">
<def id="RESET_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0.7 40)">RESET</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0.7 40)">RESET</text>
</g>
<g transform="translate(66 0)">
<def id="TRIANGLE_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
diff --git a/res-src/LLFO-src.svg b/res-src/LLFO-src.svg
@@ -122,19 +122,19 @@
<g transform="translate(0 228)">
<!-- <rect width="45" height="8" fill="#f0f" transform="translate(0 -8)" /> -->
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<def id="RESET_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 70)">RESET</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/LVCF-src.svg b/res-src/LVCF-src.svg
@@ -88,19 +88,19 @@
</g>
<g transform="translate(0 225)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<def id="FREQUENCY_CV_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 70)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 70)">CV</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/LVCO-src.svg b/res-src/LVCO-src.svg
@@ -106,21 +106,21 @@
<g transform="translate(0 193)">
<!-- <rect width="45" height="8" fill="#f0f" transform="translate(0 -8)" /> -->
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
- <rect width="34" height="105" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
+ <rect class="input-background" width="34" height="105" rx="5"/>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<def id="FM_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
<def id="SYNC_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Lag-src.svg b/res-src/Lag-src.svg
@@ -28,10 +28,10 @@
<def xlink:href="#dial-time" transform="translate(0 3)"/>
<def id="TIME_SCALE_PARAM" xlink:href="#knob16" transform="translate(14.5 59)"/>
<def xlink:href="#dial-scale" transform="translate(0 44.5)"/>
- <g transform="translate(5.5 79)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 79)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="TIME_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -39,25 +39,25 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(7.5 0)">SHAPE</text>
<def id="SHAPE_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-shape-lag" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="SHAPE_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 264)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Lmtr-src.svg b/res-src/Lmtr-src.svg
@@ -30,25 +30,25 @@
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<def id="LEFT_INPUT" xlink:href="#input" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<def id="RIGHT_INPUT" xlink:href="#input" transform="translate(39 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
<def id="THRESHOLD_INPUT" xlink:href="#input" transform="translate(5 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
<def id="OUTPUT_GAIN_INPUT" xlink:href="#input" transform="translate(39 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(42 72)">OGN</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<def id="LEFT_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<def id="RIGHT_OUTPUT" xlink:href="#output" transform="translate(39 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</module>
diff --git a/res-src/Manual-src.svg b/res-src/Manual-src.svg
@@ -6,18 +6,18 @@
<g transform="translate(0 18)">
<g transform="translate(0 0)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 25)"/>
- <rect width="34" height="33" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 25)"/>
+ <rect class="input-background" width="34" height="33" rx="5"/>
<def id="TRIGGER_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(6.6 30)">TRIG</text>
</g>
</g>
<g transform="translate(0 37)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="250" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="250" rx="5"/>
<g transform="translate(2 2)">
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
@@ -30,7 +30,7 @@
<def id="OUT7_OUTPUT" xlink:href="#output" transform="translate(3 180)"/>
<def id="OUT8_OUTPUT" xlink:href="#output" transform="translate(3 210)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 244)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 244)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/Matrix44-src.svg b/res-src/Matrix44-src.svg
@@ -88,44 +88,44 @@
<def xlink:href="#dial-centertick-19" transform="translate(-6.5 6)"/>
</g>
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="130" height="44" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="130" height="10" fill="#fafafa" transform="translate(10 34)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="130" height="44" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="130" height="10" transform="translate(10 34)"/>
<g transform="translate(12 0)">
<def id="IN1_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
</g>
<g transform="translate(44 0)">
<def id="IN2_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
</g>
<g transform="translate(76 0)">
<def id="IN3_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
</g>
<g transform="translate(108 0)">
<def id="IN4_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
</g>
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
</g>
<g transform="translate(34 0)">
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
</g>
<g transform="translate(66 0)">
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
</g>
<g transform="translate(98 0)">
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
</g>
</g>
</g>
diff --git a/res-src/Matrix88-src.svg b/res-src/Matrix88-src.svg
@@ -4,8 +4,8 @@
<def xlink:href="#module" var-name="MATRIX88"/>
- <g transform="translate(5.5 25)">
- <rect width="34" height="293" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 25)">
+ <rect class="input-background" width="34" height="293" rx="5" transform="translate(0 0)"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 42)"/>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 79)"/>
@@ -16,8 +16,8 @@
<def id="IN8_INPUT" xlink:href="#input" transform="translate(5 264)"/>
</g>
- <g transform="translate(46.5 323)">
- <rect width="278.5" height="34" rx="5" fill="#bbb" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(46.5 323)">
+ <rect class="output-background" width="278.5" height="34" rx="5" transform="translate(0 0)"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 5)"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(40 5)"/>
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(75 5)"/>
diff --git a/res-src/Mix1-src.svg b/res-src/Mix1-src.svg
@@ -10,22 +10,22 @@
</g>
<g transform="translate(0 173)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 120)"/>
- <rect width="34" height="127" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 120)"/>
+ <rect class="input-background" width="34" height="127" rx="5"/>
<def id="MUTE_PARAM" xlink:href="#button" transform="translate(8 3)"/>
<def id="MUTE_INPUT" xlink:href="#input" transform="translate(5 25)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 57)">MUTE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 57)">MUTE</text>
<def id="LEVEL_INPUT" xlink:href="#input" transform="translate(5 60)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 92)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 92)">LEVEL</text>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 95)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 127)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 127)">IN</text>
</g>
- <g transform="translate(5.5 133)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 133)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Mix2-src.svg b/res-src/Mix2-src.svg
@@ -15,25 +15,25 @@
</g>
<g transform="translate(0 240)">
- <g transform="translate(5.5 0)">
- <rect width="64" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="64" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="64" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="64" height="73" rx="5"/>
<def id="LEVEL_INPUT" xlink:href="#input" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="1.5px" transform="translate(4.5 36)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1.5px" transform="translate(4.5 36)">LEVEL</text>
<def id="MUTE_INPUT" xlink:href="#input" transform="translate(35 4)"/>
- <text font-size="5pt" letter-spacing="1.5px" transform="translate(35.5 36)">MUTE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1.5px" transform="translate(35.5 36)">MUTE</text>
<def id="L_INPUT" xlink:href="#input" transform="translate(5 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 72)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 72)">L</text>
<def id="R_INPUT" xlink:href="#input" transform="translate(35 40)"/>
- <text font-size="5pt" letter-spacing="0.5px" transform="translate(39 72)">R (L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="0.5px" transform="translate(39 72)">R (L)</text>
</g>
- <g transform="translate(5.5 79)">
- <rect width="64" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="64" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 79)">
+ <rect class="output-background-filler" width="64" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="64" height="37" rx="5"/>
<def id="L_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 33)">L</text>
<def id="R_OUTPUT" xlink:href="#output" transform="translate(35 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(45 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(45 33)">R</text>
</g>
</g>
</module>
diff --git a/res-src/Mix4-src.svg b/res-src/Mix4-src.svg
@@ -14,14 +14,14 @@
<def id="PAN1_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="8" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -36,14 +36,14 @@
<def id="PAN2_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="8" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -58,14 +58,14 @@
<def id="PAN3_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN3_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="8" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -80,14 +80,14 @@
<def id="PAN4_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV4_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN4_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN4_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="8" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -101,16 +101,16 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(10 192)">MUTE</text>
<def id="MIX_DIM_PARAM" xlink:href="#button" transform="translate(13.5 198)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14.5 225)">DIM</text>
- <g transform="translate(5.5 229)">
- <rect width="34" height="50" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 229)">
+ <rect class="input-background" width="34" height="50" rx="5"/>
<def id="MIX_CV_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
- <rect width="34" height="73" rx="5" fill="#bbb" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#bbb" transform="translate(0 38)"/>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <rect class="output-background" width="34" height="73" rx="5" transform="translate(0 38)"/>
+ <rect class="output-background-filler" width="34" height="5" transform="translate(0 38)"/>
<def id="L_OUTPUT" xlink:href="#output" transform="translate(5 41)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
<def id="R_OUTPUT" xlink:href="#output" transform="translate(5 76)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
</g>
</g>
<!-- <polyline points="0,0 225,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 360)" /> -->
diff --git a/res-src/Mix4x-src.svg b/res-src/Mix4x-src.svg
@@ -25,12 +25,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B1_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -55,12 +55,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B2_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -85,12 +85,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B3_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B3_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -115,31 +115,31 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B4_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A4_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B4_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
<g transform="translate(176 20)">
<!-- <rect width="39" height="344" fill="#ccc" transform="translate(3 0)" /> -->
- <g transform="translate(5.5 1)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 1)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<def id="SEND_A_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
- <rect width="34" height="146" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
+ <rect class="input-background" width="34" height="146" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<def id="L_A_INPUT" xlink:href="#input" transform="translate(5 41)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<def id="R_A_INPUT" xlink:href="#input" transform="translate(5 76)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<def id="LEVEL_A_PARAM" xlink:href="#knob16" transform="translate(9 117)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(3.5 145)">LEVEL</text>
<def id="LEVEL_A_INPUT" xlink:href="#input" transform="translate(5 149)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
<!-- <g transform="translate(0 29.5)"> -->
<!-- <rect width="9" height="36" rx="5" fill="#fafafa" transform="translate(-9 8.5)" /> -->
<!-- <rect width="4" height="36" fill="#fafafa" transform="translate(-4 8.5)" /> -->
@@ -148,16 +148,16 @@
</g>
<def xlink:href="#dial-mintick" transform="translate(2.5 106)"/>
- <g transform="translate(5.5 191)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 191)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<def id="SEND_B_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
- <rect width="34" height="111" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
+ <rect class="input-background" width="34" height="111" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<def id="L_B_INPUT" xlink:href="#input" transform="translate(5 41)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<def id="R_B_INPUT" xlink:href="#input" transform="translate(5 76)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<def id="LEVEL_B_PARAM" xlink:href="#knob16" transform="translate(9 117)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(3.5 145)">LEVEL</text>
</g>
diff --git a/res-src/Mix8-src.svg b/res-src/Mix8-src.svg
@@ -14,14 +14,14 @@
<def id="PAN1_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -36,14 +36,14 @@
<def id="PAN2_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -58,14 +58,14 @@
<def id="PAN3_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN3_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -80,14 +80,14 @@
<def id="PAN4_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV4_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN4_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN4_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -102,14 +102,14 @@
<def id="PAN5_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV5_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN5_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN5_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -124,14 +124,14 @@
<def id="PAN6_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV6_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN6_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN6_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -146,14 +146,14 @@
<def id="PAN7_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV7_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN7_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN7_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -168,14 +168,14 @@
<def id="PAN8_PARAM" xlink:href="#knob16" transform="translate(14.5 203)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 228)">PAN</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="input-background" width="34" height="108" rx="5"/>
<def id="CV8_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="PAN8_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">PAN</text>
<def id="IN8_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">IN</text>
</g>
<!-- <rect width="9" height="40" fill="#f00" transform="translate(39.5 300)" /> -->
</g>
@@ -189,16 +189,16 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(10 192)">MUTE</text>
<def id="MIX_DIM_PARAM" xlink:href="#button" transform="translate(13.5 198)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14.5 225)">DIM</text>
- <g transform="translate(5.5 229)">
- <rect width="34" height="50" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 229)">
+ <rect class="input-background" width="34" height="50" rx="5"/>
<def id="MIX_CV_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
- <rect width="34" height="73" rx="5" fill="#bbb" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#bbb" transform="translate(0 38)"/>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <rect class="output-background" width="34" height="73" rx="5" transform="translate(0 38)"/>
+ <rect class="output-background-filler" width="34" height="5" transform="translate(0 38)"/>
<def id="L_OUTPUT" xlink:href="#output" transform="translate(5 41)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 73)">L</text>
<def id="R_OUTPUT" xlink:href="#output" transform="translate(5 76)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 108)">R</text>
</g>
</g>
<!-- <polyline points="0,0 225,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 360)" /> -->
diff --git a/res-src/Mix8x-src.svg b/res-src/Mix8x-src.svg
@@ -25,12 +25,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B1_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -55,12 +55,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B2_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -85,12 +85,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B3_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B3_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -115,12 +115,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B4_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A4_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B4_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -145,12 +145,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B5_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A5_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B5_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -175,12 +175,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B6_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A6_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B6_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -205,12 +205,12 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B7_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A7_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B7_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
@@ -235,44 +235,44 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(20.4 241)">B</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(9 251)">PRE</text>
<def id="PRE_B8_PARAM" xlink:href="#button-small" transform="translate(26 244)"/>
- <g transform="translate(5.5 267)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 267)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="A8_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">CV-A</text>
<def id="B8_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 70)">CV-B</text>
</g>
</g>
<g transform="translate(356 20)">
<!-- <rect width="39" height="344" fill="#ccc" transform="translate(3 0)" /> -->
- <g transform="translate(5.5 1)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 1)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<def id="SEND_A_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
- <rect width="34" height="146" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.7 35)">A</text>
+ <rect class="input-background" width="34" height="146" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<def id="L_A_INPUT" xlink:href="#input" transform="translate(5 41)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<def id="R_A_INPUT" xlink:href="#input" transform="translate(5 76)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<def id="LEVEL_A_PARAM" xlink:href="#knob16" transform="translate(9 117)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(3.5 145)">LEVEL</text>
<def id="LEVEL_A_INPUT" xlink:href="#input" transform="translate(5 149)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 181)">CV</text>
</g>
<def xlink:href="#dial-mintick" transform="translate(2.5 106)"/>
- <g transform="translate(5.5 191)">
- <rect width="34" height="50" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 191)">
+ <rect class="output-background" width="34" height="50" rx="5"/>
<def id="SEND_B_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
- <rect width="34" height="111" rx="5" fill="#fafafa" transform="translate(0 38)"/>
- <rect width="34" height="5" fill="#fafafa" transform="translate(0 38)"/>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(14.8 35)">B</text>
+ <rect class="input-background" width="34" height="111" rx="5" transform="translate(0 38)"/>
+ <rect class="input-background-filler" width="34" height="5" transform="translate(0 38)"/>
<def id="L_B_INPUT" xlink:href="#input" transform="translate(5 41)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.3 73)">L</text>
<def id="R_B_INPUT" xlink:href="#input" transform="translate(5 76)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8 108)">R(L)</text>
<def id="LEVEL_B_PARAM" xlink:href="#knob16" transform="translate(9 117)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(3.5 145)">LEVEL</text>
</g>
diff --git a/res-src/Mono-src.svg b/res-src/Mono-src.svg
@@ -83,17 +83,17 @@
</g>
<g transform="translate(0 251)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="POLY_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">POLY</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">POLY</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="MONO_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(4.5 32)">MONO</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(4.5 32)">MONO</text>
</g>
</g>
</module>
diff --git a/res-src/Mult-src.svg b/res-src/Mult-src.svg
@@ -6,25 +6,25 @@
<g transform="translate(0 18)">
<g transform="translate(0 0)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 29)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 29)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="INA_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7 35)">IN-A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(7 35)">IN-A</text>
</g>
</g>
<g transform="translate(0 42)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="102" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="102" rx="5"/>
<g transform="translate(2 2)">
<def id="OUTA1_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
<def id="OUTA2_OUTPUT" xlink:href="#output" transform="translate(3 30)"/>
<def id="OUTA3_OUTPUT" xlink:href="#output" transform="translate(3 60)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
</g>
</g>
</g>
@@ -32,25 +32,25 @@
<g transform="translate(0 178)">
<g transform="translate(0 0)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 29)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 29)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="INB_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(3 35)">IN-B(A)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(3 35)">IN-B(A)</text>
</g>
</g>
<g transform="translate(0 42)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="102" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="102" rx="5"/>
<g transform="translate(2 2)">
<def id="OUTB1_OUTPUT" xlink:href="#output" transform="translate(3 0)"/>
<def id="OUTB2_OUTPUT" xlink:href="#output" transform="translate(3 30)"/>
<def id="OUTB3_OUTPUT" xlink:href="#output" transform="translate(3 60)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 95)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/Mumix-src.svg b/res-src/Mumix-src.svg
@@ -5,9 +5,9 @@
<def xlink:href="#module6" var-name="MUMIX"/>
<g transform="translate(2 25)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 283)"/>
- <rect width="34" height="293" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 283)"/>
+ <rect class="input-background" width="34" height="293" rx="5"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 42)"/>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 79)"/>
@@ -17,11 +17,11 @@
<def id="IN7_INPUT" xlink:href="#input" transform="translate(5 227)"/>
<def id="IN8_INPUT" xlink:href="#input" transform="translate(5 264)"/>
</g>
- <g transform="translate(5.5 295)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 295)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
</g>
</g>
diff --git a/res-src/Mute8-src.svg b/res-src/Mute8-src.svg
@@ -4,8 +4,8 @@
<def xlink:href="#module" var-name="MUTE8"/>
- <g transform="translate(8 32)">
- <rect width="30" height="328" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(8 32)">
+ <rect class="input-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<def id="INPUT1_INPUT" xlink:href="#input" transform="translate(0 0)"/>
<def id="INPUT2_INPUT" xlink:href="#input" transform="translate(0 40)"/>
@@ -20,8 +20,8 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(9.8 320)">IN</text>
</g>
- <g transform="translate(43 32)">
- <rect width="30" height="328" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(43 32)">
+ <rect class="input-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<def id="MUTE1_INPUT" xlink:href="#input" transform="translate(0 0)"/>
<def id="MUTE2_INPUT" xlink:href="#input" transform="translate(0 40)"/>
@@ -76,8 +76,8 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(1 320)">MUTE</text>
</g>
- <g transform="translate(112 32)">
- <rect width="30" height="328" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(112 32)">
+ <rect class="output-background" width="30" height="328" rx="5"/>
<g transform="translate(3 4)">
<def id="OUTPUT1_OUTPUT" xlink:href="#output" transform="translate(0 0)"/>
<def id="OUTPUT2_OUTPUT" xlink:href="#output" transform="translate(0 40)"/>
diff --git a/res-src/Noise-src.svg b/res-src/Noise-src.svg
@@ -5,34 +5,34 @@
<def xlink:href="#module3" var-name="NOISE"/>
<g transform="translate(0 18)">
- <g transform="translate(7.5 0)">
- <rect width="34" height="209" rx="5" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 0)">
+ <rect class="output-background" width="34" height="209" rx="5" transform="translate(-2 0)"/>
<def id="BLUE_OUTPUT" xlink:href="#output" transform="translate(3 6)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(4 39)">BLUE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(4 39)">BLUE</text>
<def id="WHITE_OUTPUT" xlink:href="#output" transform="translate(3 47)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(0.5 80)">WHITE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(0.5 80)">WHITE</text>
<def id="PINK_OUTPUT" xlink:href="#output" transform="translate(3 88)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(4.5 121)">PINK</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(4.5 121)">PINK</text>
<def id="RED_OUTPUT" xlink:href="#output" transform="translate(3 129)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7 162)">RED</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(7 162)">RED</text>
<def id="GAUSS_OUTPUT" xlink:href="#output" transform="translate(3 170)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(0 203)">GAUSS</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(0 203)">GAUSS</text>
</g>
</g>
<g transform="translate(0 250)">
<text font-size="6pt" letter-spacing="2px" transform="translate(13 -4)">ABS</text>
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="ABS_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="ABS_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Nsgt-src.svg b/res-src/Nsgt-src.svg
@@ -46,25 +46,25 @@
</g>
<g transform="translate(11 240)">
- <g transform="translate(0 0)">
- <rect width="68" height="10" fill="#fafafa" transform="translate(0 66)"/>
- <rect width="68" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background-filler" width="68" height="10" transform="translate(0 66)"/>
+ <rect class="input-background" width="68" height="73" rx="5"/>
<def id="LEFT_INPUT" xlink:href="#input" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 36)">L</text>
<def id="RIGHT_INPUT" xlink:href="#input" transform="translate(39 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(49 36)">R</text>
<def id="THRESHOLD_INPUT" xlink:href="#input" transform="translate(5 40)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 72)">TRSH</text>
<def id="RATIO_INPUT" xlink:href="#input" transform="translate(39 40)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(39.5 72)">RATIO</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(39.5 72)">RATIO</text>
</g>
- <g transform="translate(0 79)">
- <rect width="68" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="68" height="37" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 79)">
+ <rect class="output-background-filler" width="68" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="68" height="37" rx="5"/>
<def id="LEFT_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15.5 33)">L</text>
<def id="RIGHT_OUTPUT" xlink:href="#output" transform="translate(39 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(49 33)">R</text>
</g>
</g>
</module>
diff --git a/res-src/Offset-src.svg b/res-src/Offset-src.svg
@@ -188,10 +188,10 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(3 0)">OFFSET</text>
<def id="OFFSET_PARAM" xlink:href="#knob29" transform="translate(0 7)"/>
<use xlink:href="#dial-offset-offset" transform="scale(1) translate(0 7)"/>
- <g transform="translate(5.5 53)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 53)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="OFFSET_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -199,25 +199,25 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(6 0)">SCALE</text>
<def id="SCALE_PARAM" xlink:href="#knob29" transform="translate(0 7)"/>
<use xlink:href="#dial-exp-offset" transform="scale(1) translate(0 7)"/>
- <g transform="translate(5.5 53)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 53)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="SCALE_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 240)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
diff --git a/res-src/OneEight-src.svg b/res-src/OneEight-src.svg
@@ -4,16 +4,16 @@
<def xlink:href="#module6" var-name="1:8"/>
- <g transform="translate(6.5 32)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 30)"/>
+ <g class="io-group" transform="translate(6.5 32)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 30)"/>
<def id="CLOCK_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(4 35)">CLOCK</text>
</g>
- <g transform="translate(6.5 69)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(6.5 69)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="RESET_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(5 35)">RESET</text>
</g>
<g transform="translate(1 121)">
@@ -34,53 +34,53 @@
<text font-size="6pt" letter-spacing="1.5px" transform="translate(4.5 0)">SELECT</text>
<def id="SELECT_PARAM" xlink:href="#knob29" transform="translate(0 2)"/>
<def xlink:href="#dial-select" transform="translate(0 2)"/>
- <g transform="translate(5.5 47)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 47)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="SELECT_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11.5 35)">CV</text>
</g>
</g>
- <g transform="translate(6.5 321)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(6.5 321)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(49.5 32)">
- <rect width="34" height="337" rx="5" fill="#bbb" transform="translate(0 -9)"/>
+ <g class="io-group" transform="translate(49.5 32)">
+ <rect class="output-background" width="34" height="337" rx="5" transform="translate(0 -9)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(8.5 0)">OUT</text>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">1</text>
<def id="OUT1_LIGHT" xlink:href="#light-small" transform="translate(17 29.5)"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 44.3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 76.3)">2</text>
<def id="OUT2_LIGHT" xlink:href="#light-small" transform="translate(17 70.8)"/>
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(5 86.6)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 118.6)">3</text>
<def id="OUT3_LIGHT" xlink:href="#light-small" transform="translate(17 113.1)"/>
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(5 126.9)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 158.9)">4</text>
<def id="OUT4_LIGHT" xlink:href="#light-small" transform="translate(17 153.4)"/>
<def id="OUT5_OUTPUT" xlink:href="#output" transform="translate(5 168.1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 200.1)">5</text>
<def id="OUT5_LIGHT" xlink:href="#light-small" transform="translate(17 194.6)"/>
<def id="OUT6_OUTPUT" xlink:href="#output" transform="translate(5 209.4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 241.4)">6</text>
<def id="OUT6_LIGHT" xlink:href="#light-small" transform="translate(17 235.9)"/>
<def id="OUT7_OUTPUT" xlink:href="#output" transform="translate(5 250.7)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 282.7)">7</text>
<def id="OUT7_LIGHT" xlink:href="#light-small" transform="translate(17 277.2)"/>
<def id="OUT8_OUTPUT" xlink:href="#output" transform="translate(5 292)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(11 324)">8</text>
<def id="OUT8_LIGHT" xlink:href="#light-small" transform="translate(17 318.5)"/>
</g>
diff --git a/res-src/PEQ-src.svg b/res-src/PEQ-src.svg
@@ -122,61 +122,61 @@
</g>
</g>
- <g transform="translate(0 226)">
- <rect width="130" height="134" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="32.5" height="46" rx="5" fill="#bbb" transform="translate(107.5 88)"/>
- <rect width="32.5" height="8" fill="#bbb" transform="translate(107.5 88)"/>
- <rect width="8" height="46" fill="#bbb" transform="translate(107.5 88)"/>
+ <g class="io-group" transform="translate(0 226)">
+ <rect class="input-background" width="130" height="134" rx="5" transform="translate(10 0)"/>
+ <rect class="output-background" width="32.5" height="46" rx="5" transform="translate(107.5 88)"/>
+ <rect class="output-background-filler" width="32.5" height="8" transform="translate(107.5 88)"/>
+ <rect class="output-background-filler" width="8" height="46" transform="translate(107.5 88)"/>
<g transform="translate(12 0)">
<def id="A_LEVEL_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-LVL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-LVL</text>
</g>
<g transform="translate(44 0)">
<def id="B_LEVEL_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-LVL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-LVL</text>
</g>
<g transform="translate(76 0)">
<def id="C_LEVEL_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(2 40)">C-LVL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">C-LVL</text>
</g>
<g transform="translate(108 0)">
<def id="ALL_CV_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">FCV</text>
</g>
<g transform="translate(12 44)">
<def id="A_FREQUENCY_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">A-FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">A-FCV</text>
</g>
<g transform="translate(44 44)">
<def id="B_FREQUENCY_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">B-FCV</text>
</g>
<g transform="translate(76 44)">
<def id="C_FREQUENCY_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">C-FCV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">C-FCV</text>
</g>
<g transform="translate(108 44)">
<def id="IN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 40)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 40)">IN</text>
</g>
<g transform="translate(12 88)">
<def id="A_BANDWIDTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">A-BW</text>
</g>
<g transform="translate(44 88)">
<def id="B_BANDWIDTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(2 40)">B-BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(2 40)">B-BW</text>
</g>
<g transform="translate(76 88)">
<def id="C_BANDWIDTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">C-BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">C-BW</text>
</g>
<g transform="translate(108 88)">
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/PEQ14-src.svg b/res-src/PEQ14-src.svg
@@ -4,22 +4,22 @@
<def xlink:href="#module" var-name="PEQ14"/>
- <g transform="translate(6.5 48)">
+ <g class="io-group" transform="translate(6.5 48)">
<!-- <rect width="62" height="40" fill="#f0f" transform="translate(0 0)" /> -->
<def id="FREQUENCY_CV_PARAM" xlink:href="#knob16" transform="translate(40.5 11)"/>
<def xlink:href="#dial-centertick" transform="translate(28.5 -1)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(40 37)">FCV</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(0 5)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(0 5)"/>
<def id="FREQUENCY_CV_INPUT" xlink:href="#input" transform="translate(3 8)"/>
<!-- <rect width="62" height="25" fill="#0f0" transform="translate(0 40)" /> -->
</g>
- <g transform="translate(6.5 113)">
+ <g class="io-group" transform="translate(6.5 113)">
<!-- <rect width="62" height="40" fill="#f0f" transform="translate(0 0)" /> -->
<def id="BANDWIDTH_PARAM" xlink:href="#knob16" transform="translate(40.5 8)"/>
<def xlink:href="#dial-mintick" transform="translate(28.5 -4)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(42.5 37)">BW</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(0 5)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(0 5)"/>
<def id="BANDWIDTH_INPUT" xlink:href="#input" transform="translate(3 8)"/>
<!-- <rect width="62" height="25" fill="#0f0" transform="translate(0 40)" /> -->
</g>
@@ -44,19 +44,19 @@
<!-- <rect width="62" height="25" fill="#0f0" transform="translate(0 35)" /> -->
</g>
- <g transform="translate(5.5 287)">
- <rect width="64" height="73" rx="5" fill="#bbb"/>
- <rect width="32" height="36.5" rx="5" fill="#fafafa"/>
- <rect width="32" height="10" fill="#fafafa" transform="translate(0 26.5)"/>
- <rect width="10" height="36.5" fill="#fafafa" transform="translate(22 0)"/>
+ <g class="io-group" transform="translate(5.5 287)">
+ <rect class="output-background" width="64" height="73" rx="5"/>
+ <rect class="input-background" width="32" height="36.5" rx="5"/>
+ <rect class="input-background-filler" width="32" height="10" transform="translate(0 26.5)"/>
+ <rect class="input-background-filler" width="10" height="36.5" transform="translate(22 0)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<def id="ODDS_OUTPUT" xlink:href="#output" transform="translate(35 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
<def id="EVENS_OUTPUT" xlink:href="#output" transform="translate(35 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
</g>
<g transform="translate(74 20)">
@@ -69,16 +69,16 @@
<def id="FREQUENCY_CV1_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -92,16 +92,16 @@
<def id="FREQUENCY_CV2_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -115,16 +115,16 @@
<def id="FREQUENCY_CV3_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV3_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -138,16 +138,16 @@
<def id="FREQUENCY_CV4_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL4_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV4_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -161,16 +161,16 @@
<def id="FREQUENCY_CV5_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL5_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV5_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT5_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -184,16 +184,16 @@
<def id="FREQUENCY_CV6_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL6_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV6_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT6_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -207,16 +207,16 @@
<def id="FREQUENCY_CV7_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL7_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV7_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT7_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -230,16 +230,16 @@
<def id="FREQUENCY_CV8_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL8_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV8_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT8_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -253,16 +253,16 @@
<def id="FREQUENCY_CV9_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL9_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV9_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT9_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -276,16 +276,16 @@
<def id="FREQUENCY_CV10_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL10_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV10_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT10_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -299,16 +299,16 @@
<def id="FREQUENCY_CV11_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL11_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV11_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT11_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -322,16 +322,16 @@
<def id="FREQUENCY_CV12_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL12_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV12_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT12_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -345,16 +345,16 @@
<def id="FREQUENCY_CV13_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL13_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV13_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT13_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -368,16 +368,16 @@
<def id="FREQUENCY_CV14_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL14_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV14_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT14_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/PEQ14XF-src.svg b/res-src/PEQ14XF-src.svg
@@ -4,56 +4,56 @@
<def xlink:href="#module5" var-name="PEQ14XF"/>
- <g transform="translate(-2.5 24)">
+ <g class="io-group" transform="translate(-2.5 24)">
<def id="DAMP_PARAM" xlink:href="#knob16" transform="translate(14.5 6)"/>
<def xlink:href="#dial-mintick" transform="translate(2.5 -6)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(10 33)">DAMP</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="DAMP_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
- <g transform="translate(32.5 23.5)">
+ <g class="io-group" transform="translate(32.5 23.5)">
<def id="GAIN_PARAM" xlink:href="#knob16" transform="translate(14.5 6)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 -6)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(11.5 33)">GAIN</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="GAIN_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
- <g transform="translate(5.5 108)">
- <rect width="64" height="260" rx="5" fill="#bbb" transform="translate(0 -10)"/>
+ <g class="io-group" transform="translate(5.5 108)">
+ <rect class="output-background" width="64" height="260" rx="5" transform="translate(0 -10)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(27 0)">EF</text>
<def id="EF1_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
<def id="EF2_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
<def id="EF3_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
<def id="EF4_OUTPUT" xlink:href="#output" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
<def id="EF5_OUTPUT" xlink:href="#output" transform="translate(5 143)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
<def id="EF6_OUTPUT" xlink:href="#output" transform="translate(5 178)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
<def id="EF7_OUTPUT" xlink:href="#output" transform="translate(5 213)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 245)">7</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 245)">7</text>
<g transform="translate(31 0)">
<def id="EF8_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">8</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">8</text>
<def id="EF9_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">9</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">9</text>
<def id="EF10_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">10</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 105)">10</text>
<def id="EF11_OUTPUT" xlink:href="#output" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 140)">11</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 140)">11</text>
<def id="EF12_OUTPUT" xlink:href="#output" transform="translate(5 143)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 175)">12</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 175)">12</text>
<def id="EF13_OUTPUT" xlink:href="#output" transform="translate(5 178)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 210)">13</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 210)">13</text>
<def id="EF14_OUTPUT" xlink:href="#output" transform="translate(5 213)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 245)">14</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 245)">14</text>
</g>
</g>
diff --git a/res-src/PEQ14XR-src.svg b/res-src/PEQ14XR-src.svg
@@ -4,25 +4,25 @@
<def xlink:href="#module5" var-name="PEQ14XR"/>
- <g transform="translate(-2.5 24)">
+ <g class="io-group" transform="translate(-2.5 24)">
<def id="DAMP_PARAM" xlink:href="#knob16" transform="translate(14.5 6)"/>
<def xlink:href="#dial-mintick" transform="translate(2.5 -6)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(10 33)">DAMP</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="DAMP_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
- <g transform="translate(32.5 23.5)">
+ <g class="io-group" transform="translate(32.5 23.5)">
<def id="GAIN_PARAM" xlink:href="#knob16" transform="translate(14.5 6)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 -6)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(11.5 33)">GAIN</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="GAIN_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
- <g transform="translate(20.5 318)">
- <rect width="34" height="42" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(20.5 318)">
+ <rect class="output-background" width="34" height="42" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 37)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 37)">OUT</text>
</g>
</module>
diff --git a/res-src/PEQ14XV-src.svg b/res-src/PEQ14XV-src.svg
@@ -23,28 +23,28 @@
<text font-size="6pt" letter-spacing="1.5px" transform="translate(9 30)">FOLLOWERS</text>
- <g transform="translate(-2.5 34)">
+ <g class="io-group" transform="translate(-2.5 34)">
<def id="EF_DAMP_PARAM" xlink:href="#knob16" transform="translate(14.5 6)"/>
<def xlink:href="#dial-mintick" transform="translate(2.5 -6)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(10 33)">DAMP</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="EF_DAMP_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
- <g transform="translate(32.5 34)">
+ <g class="io-group" transform="translate(32.5 34)">
<def id="EF_GAIN_PARAM" xlink:href="#knob16" transform="translate(14.5 6)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 -6)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(11.5 33)">GAIN</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="EF_GAIN_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
<!-- <rect width="75" height="17" fill="#f0f" transform="translate(-32.5 66)" /> -->
</g>
- <g transform="translate(0 119)">
+ <g class="io-group" transform="translate(0 119)">
<text font-size="6pt" letter-spacing="1.5px" transform="translate(8 2)">TRANSPOSE</text>
<def id="TRANSPOSE_PARAM" xlink:href="#knob26" transform="translate(24.5 13)"/>
<use xlink:href="#dial-transpose-peq14xv" transform="translate(15 3.5)"/>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(22.5 47)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(22.5 47)"/>
<def id="TRANSPOSE_INPUT" xlink:href="#input" transform="translate(25.5 50)"/>
<!-- <rect width="75" height="17" fill="#f0f" transform="translate(0 77)" /> -->
</g>
@@ -73,19 +73,19 @@
<!-- <rect width="75" height="17" fill="#f0f" transform="translate(0 56)" /> -->
</g>
- <g transform="translate(5.5 287)">
- <rect width="64" height="73" rx="5" fill="#bbb"/>
- <rect width="32" height="36.5" rx="5" fill="#fafafa"/>
- <rect width="32" height="10" fill="#fafafa" transform="translate(0 26.5)"/>
- <rect width="10" height="36.5" fill="#fafafa" transform="translate(22 0)"/>
+ <g class="io-group" transform="translate(5.5 287)">
+ <rect class="output-background" width="64" height="73" rx="5"/>
+ <rect class="input-background" width="32" height="36.5" rx="5"/>
+ <rect class="input-background-filler" width="32" height="10" transform="translate(0 26.5)"/>
+ <rect class="input-background-filler" width="10" height="36.5" transform="translate(22 0)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<def id="ODDS_OUTPUT" xlink:href="#output" transform="translate(35 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(38.5 35)">ODD</text>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
<def id="EVENS_OUTPUT" xlink:href="#output" transform="translate(35 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(36 70)">EVEN</text>
</g>
<!-- <polyline points="0,0 0,380" stroke="#0f0" stroke-width="1" fill="none" transform="translate(18.75 0)" /> -->
diff --git a/res-src/PEQ6-src.svg b/res-src/PEQ6-src.svg
@@ -7,21 +7,21 @@
<!-- <polyline points="0,0 315,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 24)" /> -->
<!-- <polyline points="0,0 0,380" stroke="#0f0" stroke-width="1" fill="none" transform="translate(22.5 0)" /> -->
- <g transform="translate(0 40)">
+ <g class="io-group" transform="translate(0 40)">
<!-- <rect width="37" height="66" fill="#f0f" transform="translate(0 0)" /> -->
<def id="FREQUENCY_CV_PARAM" xlink:href="#knob16" transform="translate(14.5 7)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 -5)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 33)">FCV</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="FREQUENCY_CV_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
- <g transform="translate(0 124)">
+ <g class="io-group" transform="translate(0 124)">
<!-- <rect width="37" height="66" fill="#f0f" transform="translate(0 0)" /> -->
<def id="BANDWIDTH_PARAM" xlink:href="#knob16" transform="translate(14.5 5)"/>
<def xlink:href="#dial-mintick" transform="translate(2.5 -7)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(16.5 33)">BW</text>
- <rect width="30" height="30" rx="5" fill="#fafafa" transform="translate(7.5 36)"/>
+ <rect class="input-background" width="30" height="30" rx="5" transform="translate(7.5 36)"/>
<def id="BANDWIDTH_INPUT" xlink:href="#input" transform="translate(10.5 39)"/>
</g>
@@ -43,14 +43,14 @@
<def id="FMOD_PARAM" xlink:href="#button-small" transform="translate(14 25)"/>
</g>
- <g transform="translate(5.5 287)">
- <rect width="34" height="73" rx="5" fill="#bbb"/>
- <rect width="34" height="36.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 26.5)"/>
+ <g class="io-group" transform="translate(5.5 287)">
+ <rect class="output-background" width="34" height="73" rx="5"/>
+ <rect class="input-background" width="34" height="36.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 26.5)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 70)">OUT</text>
</g>
<g transform="translate(45 20)">
@@ -63,16 +63,16 @@
<def id="FREQUENCY_CV1_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -86,16 +86,16 @@
<def id="FREQUENCY_CV2_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -109,16 +109,16 @@
<def id="FREQUENCY_CV3_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV3_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -132,16 +132,16 @@
<def id="FREQUENCY_CV4_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 191)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL4_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV4_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -155,16 +155,16 @@
<def id="FREQUENCY_CV5_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL5_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV5_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT5_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
@@ -178,16 +178,16 @@
<def id="FREQUENCY_CV6_PARAM" xlink:href="#knob16" transform="translate(14.5 204)"/>
<def xlink:href="#dial-centertick" transform="translate(2.5 192)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(14 229)">FCV</text>
- <g transform="translate(5.5 232)">
- <rect width="34" height="108" rx="5" fill="#bbb"/>
- <rect width="34" height="71.5" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 61.5)"/>
+ <g class="io-group" transform="translate(5.5 232)">
+ <rect class="output-background" width="34" height="108" rx="5"/>
+ <rect class="input-background" width="34" height="71.5" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 61.5)"/>
<def id="LEVEL6_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">LEVEL</text>
<def id="FREQUENCY_CV6_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 70)">FCV</text>
<def id="OUT6_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8 105)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/PEQ6XF-src.svg b/res-src/PEQ6XF-src.svg
@@ -16,20 +16,20 @@
<text font-size="5pt" letter-spacing="1px" transform="translate(13 0)">GAIN</text>
</g>
- <g transform="translate(5.5 104)">
- <rect width="34" height="225" rx="5" fill="#bbb" transform="translate(0 -10)"/>
+ <g class="io-group" transform="translate(5.5 104)">
+ <rect class="output-background" width="34" height="225" rx="5" transform="translate(0 -10)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(12.5 0)">EF</text>
<def id="EF1_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">1</text>
<def id="EF2_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">2</text>
<def id="EF3_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 105)">3</text>
<def id="EF4_OUTPUT" xlink:href="#output" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 140)">4</text>
<def id="EF5_OUTPUT" xlink:href="#output" transform="translate(5 143)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 175)">5</text>
<def id="EF6_OUTPUT" xlink:href="#output" transform="translate(5 178)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 210)">6</text>
</g>
</module>
diff --git a/res-src/Pan-src.svg b/res-src/Pan-src.svg
@@ -25,32 +25,32 @@
<g transform="translate(0 15)">
<def id="PAN1_PARAM" xlink:href="#knob26" transform="translate(9.5 9.5)"/>
<use xlink:href="#dial-panner-pan" transform="translate(0 0)"/>
- <g transform="translate(5.5 44)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 44)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
</g>
<g transform="translate(0 138)">
<def id="PAN2_PARAM" xlink:href="#knob26" transform="translate(9.5 9.5)"/>
<use xlink:href="#dial-panner-pan" transform="translate(0 0)"/>
- <g transform="translate(5.5 44)">
- <rect width="34" height="73" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 44)">
+ <rect class="input-background" width="34" height="73" rx="5"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
</g>
- <g transform="translate(5.5 265)">
- <rect width="34" height="73" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 265)">
+ <rect class="output-background" width="34" height="73" rx="5"/>
<def id="L_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
<def id="R_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">R</text>
</g>
</module>
diff --git a/res-src/Pgmr-src.svg b/res-src/Pgmr-src.svg
@@ -8,35 +8,35 @@
<!-- <polyline points="0,0 225,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 135.5)" /> -->
<!-- <polyline points="0,0 225,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 360)" /> -->
- <g transform="translate(5.5 56)">
- <rect width="34" height="155" rx="5" fill="#bbb" transform="translate(0 -10)"/>
+ <g class="io-group" transform="translate(5.5 56)">
+ <rect class="output-background" width="34" height="155" rx="5" transform="translate(0 -10)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(8.5 0)">OUT</text>
<def id="A_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
<def id="B_OUTPUT" xlink:href="#output" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
<def id="C_OUTPUT" xlink:href="#output" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 105)">C</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 105)">C</text>
<def id="D_OUTPUT" xlink:href="#output" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 140)">D</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 140)">D</text>
</g>
<g transform="translate(0 224)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 92)"/>
- <rect width="34" height="102" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 92)"/>
+ <rect class="input-background" width="34" height="102" rx="5" transform="translate(0 -3)"/>
<def id="CLOCK_INPUT" xlink:href="#input" transform="translate(5 2)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 34)">CLOCK</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 34)">CLOCK</text>
<text font-size="5pt" letter-spacing="1px" transform="translate(5 46.5)">FWD</text>
<def id="DIRECTION_PARAM" xlink:href="#button-small" transform="translate(22.5 39.7)"/>
<text font-size="5pt" letter-spacing="0.1px" transform="translate(2 60)">S.O.C.</text>
<def id="SELECT_ON_CLOCK_PARAM" xlink:href="#button-small" transform="translate(22.5 53.2)"/>
<def id="SELECT_INPUT" xlink:href="#input" transform="translate(5 66)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 98)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 98)">SELECT</text>
</g>
- <g transform="translate(5.5 105)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="30" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 105)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="30" rx="5"/>
<def id="SELECT_ALL_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
</g>
</g>
@@ -57,17 +57,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT1_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT1_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT1_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT1_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
@@ -89,17 +89,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT2_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT2_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT2_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT2_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
@@ -121,17 +121,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT3_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT3_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT3_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT3_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
@@ -153,17 +153,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT4_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT4_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT4_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT4_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>Z
diff --git a/res-src/PgmrX-src.svg b/res-src/PgmrX-src.svg
@@ -20,17 +20,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT1_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT1_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT1_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT1_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
@@ -52,17 +52,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT2_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT2_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT2_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT2_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
@@ -84,17 +84,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT3_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT3_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT3_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT3_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
@@ -116,17 +116,17 @@
<def xlink:href="#dial-pgmr" transform="translate(0 163)"/>
<text font-size="5pt" letter-spacing="2px" transform="translate(20.3 210)">D</text>
<g transform="translate(0 223)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="76" rx="5" fill="#fafafa" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="76" rx="5" transform="translate(0 -3)"/>
<def id="SELECT4_LIGHT" xlink:href="#light-small" transform="translate(13.8 2)"/>
<def id="SELECT4_PARAM" xlink:href="#button" transform="translate(8 14)"/>
<def id="SELECT4_INPUT" xlink:href="#input" transform="translate(5 37)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(2.5 69)">SELECT</text>
</g>
- <g transform="translate(5.5 73)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 0)"/>
- <rect width="34" height="33" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 73)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 0)"/>
+ <rect class="output-background" width="34" height="33" rx="5"/>
<def id="SELECT4_OUTPUT" xlink:href="#output" transform="translate(5 4)"/>
</g>
</g>
diff --git a/res-src/PolyCon16-src.svg b/res-src/PolyCon16-src.svg
@@ -114,13 +114,13 @@
<def xlink:href="#dial-channels-small" transform="translate(0 0)"/>
</g>
- <g transform="translate(52 318)">
- <rect width="60" height="40" rx="5" fill="#fafafa"/>
- <rect width="24" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(52 318)">
+ <rect class="input-background" width="60" height="40" rx="5"/>
+ <rect class="output-background" width="24" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="CHANNELS_INPUT" xlink:href="#input" transform="translate(3.5 4)"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(34.5 4)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 36)">CHAN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(3 36)">CHAN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(36 36)">OUT</text>
</g>
</module>
diff --git a/res-src/PolyCon8-src.svg b/res-src/PolyCon8-src.svg
@@ -64,9 +64,9 @@
<def id="CHANNEL8_LIGHT" xlink:href="#light-tiny" transform="translate(38.5 12.4)"/>
</g>
- <g transform="translate(7.5 270)">
- <rect width="34" height="40" rx="5" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 270)">
+ <rect class="output-background" width="34" height="40" rx="5" transform="translate(-2 0)"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 36)">OUT</text>
</g>
</module>
diff --git a/res-src/PolyMult-src.svg b/res-src/PolyMult-src.svg
@@ -11,25 +11,25 @@
</g>
<g transform="translate(0 70)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="74" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 64)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="74" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 64)"/>
<def id="CHANNELS_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(6 35)">CHAN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(6 35)">CHAN</text>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 39)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 71)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 71)">IN</text>
</g>
- <g transform="translate(5.5 77)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="140" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 77)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="140" rx="5"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 67)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 67)">OUT</text>
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(5 70)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 102)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 102)">OUT</text>
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(5 105)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 137)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 137)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/PolyOff16-src.svg b/res-src/PolyOff16-src.svg
@@ -4,8 +4,8 @@
<def xlink:href="#module" var-name="POLYOFF16"/>
- <g transform="translate(5.5 24)">
- <rect width="34" height="289" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 24)">
+ <rect class="input-background" width="34" height="289" rx="5" transform="translate(0 0)"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 40)"/>
<def id="CV3_INPUT" xlink:href="#input" transform="translate(5 75)"/>
@@ -14,11 +14,11 @@
<def id="CV6_INPUT" xlink:href="#input" transform="translate(5 180)"/>
<def id="CV7_INPUT" xlink:href="#input" transform="translate(5 215)"/>
<def id="CV8_INPUT" xlink:href="#input" transform="translate(5 250)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
</g>
- <g transform="translate(125.5 24)">
- <rect width="34" height="289" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(125.5 24)">
+ <rect class="input-background" width="34" height="289" rx="5" transform="translate(0 0)"/>
<def id="CV9_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="CV10_INPUT" xlink:href="#input" transform="translate(5 40)"/>
<def id="CV11_INPUT" xlink:href="#input" transform="translate(5 75)"/>
@@ -27,7 +27,7 @@
<def id="CV14_INPUT" xlink:href="#input" transform="translate(5 180)"/>
<def id="CV15_INPUT" xlink:href="#input" transform="translate(5 215)"/>
<def id="CV16_INPUT" xlink:href="#input" transform="translate(5 250)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
</g>
<g transform="translate(0 33)">
@@ -174,13 +174,13 @@
<def xlink:href="#dial-channels-small" transform="translate(-2 0)"/>
</g>
- <g transform="translate(115 318)">
- <rect width="60" height="40" rx="5" fill="#fafafa"/>
- <rect width="24" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(115 318)">
+ <rect class="input-background" width="60" height="40" rx="5"/>
+ <rect class="output-background" width="24" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(3.5 4)"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(34.5 4)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(36 36)">OUT</text>
</g>
</module>
diff --git a/res-src/PolyOff8-src.svg b/res-src/PolyOff8-src.svg
@@ -12,8 +12,8 @@
<!-- <polyline points="0,0 0,380" stroke="#0f0" stroke-width="1" fill="none" transform="translate(135 0)" /> -->
<!-- <polyline points="0,0 0,380" stroke="#0f0" stroke-width="1" fill="none" transform="translate(115 0)" /> -->
- <g transform="translate(5.5 24)">
- <rect width="34" height="289" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 24)">
+ <rect class="input-background" width="34" height="289" rx="5" transform="translate(0 0)"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 40)"/>
<def id="CV3_INPUT" xlink:href="#input" transform="translate(5 75)"/>
@@ -22,7 +22,7 @@
<def id="CV6_INPUT" xlink:href="#input" transform="translate(5 180)"/>
<def id="CV7_INPUT" xlink:href="#input" transform="translate(5 215)"/>
<def id="CV8_INPUT" xlink:href="#input" transform="translate(5 250)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(4 284)">IN/CV</text>
</g>
<g transform="translate(0 33)">
@@ -114,13 +114,13 @@
<def xlink:href="#dial-channels-small-8" transform="translate(0 0)"/>
</g>
- <g transform="translate(52 318)">
- <rect width="60" height="40" rx="5" fill="#fafafa"/>
- <rect width="24" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(52 318)">
+ <rect class="input-background" width="60" height="40" rx="5"/>
+ <rect class="output-background" width="24" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(3.5 4)"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(34.5 4)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(11 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(36 36)">OUT</text>
</g>
</module>
diff --git a/res-src/Pressor-src.svg b/res-src/Pressor-src.svg
@@ -243,64 +243,64 @@
</g>
</g>
- <g transform="translate(0 269)">
- <rect width="205" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="137" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="171" height="47" rx="5" fill="#fafafa" transform="translate(10 44)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(137 0)"/>
- <rect width="10" height="10" fill="#fafafa" transform="translate(171 81)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="205" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="137" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="171" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(137 0)"/>
+ <rect class="input-background-filler" width="10" height="10" transform="translate(171 81)"/>
<g transform="translate(10 0)">
<g transform="translate(3 0)">
<def id="LEFT_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
</g>
<g transform="translate(37 0)">
<def id="SIDECHAIN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(3 40)">SIDE</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(3 40)">SIDE</text>
</g>
<g transform="translate(71 0)">
<def id="THRESHOLD_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(1.5 40)">TRSH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(1.5 40)">TRSH</text>
</g>
<g transform="translate(105 0)">
<def id="RATIO_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">RATIO</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1.5 40)">RATIO</text>
</g>
<g transform="translate(139 0)">
<def id="ENVELOPE_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ENV</text>
</g>
<g transform="translate(173 0)">
<def id="LEFT_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(13 40)">L</text>
</g>
</g>
<g transform="translate(10 44)">
<g transform="translate(3 0)">
<def id="RIGHT_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(13 40)">R</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(13 40)">R</text>
</g>
<g transform="translate(37 0)">
<def id="ATTACK_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ATT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.5 40)">ATT</text>
</g>
<g transform="translate(71 0)">
<def id="RELEASE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5.4 40)">REL</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(5.4 40)">REL</text>
</g>
<g transform="translate(105 0)">
<def id="INPUT_GAIN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">IGN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">IGN</text>
</g>
<g transform="translate(139 0)">
<def id="OUTPUT_GAIN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">OGN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5.3 40)">OGN</text>
</g>
<g transform="translate(173 0)">
<def id="RIGHT_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(12 40)">R</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(12 40)">R</text>
</g>
</g>
</g>
diff --git a/res-src/Pulse-src.svg b/res-src/Pulse-src.svg
@@ -93,21 +93,21 @@
<g transform="translate(0 182)">
<!-- <rect width="45" height="10" fill="#f0f" transform="translate(0 -10)" /> -->
- <g transform="translate(5.5 0)">
- <rect width="34" height="105" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 98)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="105" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 98)"/>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<def id="PWM_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(7 70)">PWM</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(7 70)">PWM</text>
<def id="SYNC_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 105)">SYNC</text>
</g>
- <g transform="translate(5.5 111)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 111)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Reftone-src.svg b/res-src/Reftone-src.svg
@@ -127,15 +127,15 @@
<use xlink:href="#dial-fine-reftone" transform="translate(0 188)"/>
<g transform="translate(0 235)">
- <g transform="translate(0 0)">
- <rect width="34" height="75" rx="5" fill="#bbb" transform="translate(5.5 0)"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="output-background" width="34" height="75" rx="5" transform="translate(5.5 0)"/>
<g transform="translate(5.5 1)">
<def id="CV_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
</g>
<g transform="translate(5.5 39)">
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">SINE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 32)">SINE</text>
</g>
</g>
</g>
diff --git a/res-src/SampleHold-src.svg b/res-src/SampleHold-src.svg
@@ -8,21 +8,21 @@
<!-- <text font-size="6pt" letterspacing="2px" transform="translate(5.5 0)">1</text> -->
<!-- <polyline points="0,0 21,0" stroke-width="1" transform="translate(14 -3)" /> -->
<g transform="translate(0 5)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 58)"/>
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 58)"/>
+ <rect class="input-background" width="34" height="62" rx="5"/>
<def id="TRIGGER1_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<def id="TRIGGER1_INPUT" xlink:href="#input" transform="translate(5 26)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
</g>
</g>
<g transform="translate(0 65)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 51)"/>
- <rect width="34" height="58" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 51)"/>
+ <rect class="input-background" width="34" height="58" rx="5"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
<g transform="translate(9.5 41)">
@@ -35,11 +35,11 @@
<def id="INVERT1_PARAM" xlink:href="#button-small" transform="translate(17 -1.3)"/>
</g>
- <g transform="translate(5.5 64)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 64)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</g>
@@ -48,21 +48,21 @@
<g transform="translate(0 181)">
<!-- <text font-size="6pt" letterspacing="2px" transform="translate(4.4 0)">2</text> -->
<g transform="translate(0 5)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 58)"/>
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 58)"/>
+ <rect class="input-background" width="34" height="62" rx="5"/>
<def id="TRIGGER2_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<def id="TRIGGER2_INPUT" xlink:href="#input" transform="translate(5 26)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
</g>
</g>
<g transform="translate(0 65)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 51)"/>
- <rect width="34" height="58" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 51)"/>
+ <rect class="input-background" width="34" height="58" rx="5"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
<g transform="translate(9.5 41)">
@@ -75,11 +75,11 @@
<def id="INVERT2_PARAM" xlink:href="#button-small" transform="translate(17 -1.3)"/>
</g>
- <g transform="translate(5.5 64)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 64)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/Shaper-src.svg b/res-src/Shaper-src.svg
@@ -11,11 +11,11 @@
<def id="ATTACK_PARAM" xlink:href="#knob38" transform="translate(20 0)"/>
<def id="ATTACK_LIGHT" xlink:href="#light-tiny" transform="translate(3 47)"/>
</g>
- <g transform="translate(74 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(74 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<def id="TRIGGER_PARAM" xlink:href="#button" transform="translate(6 6) scale(0.18)"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(31 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
</g>
@@ -53,10 +53,10 @@
<def id="OFF_PARAM" xlink:href="#knob38" transform="translate(20 0)"/>
<def id="OFF_LIGHT" xlink:href="#light-tiny" transform="translate(3 36)"/>
</g>
- <g transform="translate(102 4)">
- <rect width="30" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(102 4)">
+ <rect class="output-background" width="30" height="40" rx="5"/>
<def id="TRIGGER_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
@@ -65,11 +65,11 @@
<text font-size="8pt" letter-spacing="2px" transform="translate(48 7.1) rotate(90)">ENV</text>
<def id="ENV_PARAM" xlink:href="#knob38" transform="translate(-1.7 0)"/>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="output-background" width="58" height="40" rx="5"/>
<def id="ENV_OUTPUT" xlink:href="#output" transform="translate(2.5 3)"/>
<def id="INV_OUTPUT" xlink:href="#output" transform="translate(31.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(35 36)">INV</text>
</g>
</g>
@@ -79,13 +79,13 @@
<text font-size="8pt" letter-spacing="2px" transform="translate(48 -2.5) rotate(90)">SIGNAL</text>
<def id="SIGNAL_PARAM" xlink:href="#knob38" transform="translate(-1.7 0)"/>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
- <rect width="20" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(29)"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
+ <rect class="output-background" width="20" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(29)"/>
<def id="SIGNAL_INPUT" xlink:href="#input" transform="translate(2.5 3)"/>
<def id="SIGNAL_OUTPUT" xlink:href="#output" transform="translate(31.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33 36)">OUT</text>
</g>
</g>
diff --git a/res-src/ShaperPlus-src.svg b/res-src/ShaperPlus-src.svg
@@ -4,12 +4,12 @@
<def xlink:href="#module" var-name="SHAPER+"/>
- <g transform="translate(149 26)">
- <rect width="30" height="322" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(149 26)">
+ <rect class="input-background" width="30" height="322" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(8 10)">CV</text>
</g>
- <g transform="translate(186 26)">
- <rect width="30" height="211" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(186 26)">
+ <rect class="output-background" width="30" height="211" rx="5"/>
<text font-size="6pt" letter-spacing="2px" transform="translate(2 10)">GATE</text>
</g>
@@ -20,11 +20,11 @@
<def id="ATTACK_PARAM" xlink:href="#knob38" transform="translate(20 0)"/>
<def id="ATTACK_LIGHT" xlink:href="#light-tiny" transform="translate(3 47)"/>
</g>
- <g transform="translate(74 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(74 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
<def id="TRIGGER_PARAM" xlink:href="#button" transform="translate(6 6)"/>
<def id="TRIGGER_INPUT" xlink:href="#input" transform="translate(31 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">TRIGGER</text>
</g>
<def id="ATTACK_INPUT" xlink:href="#input" transform="translate(143 7)"/>
<def id="ATTACK_OUTPUT" xlink:href="#output" transform="translate(180 7)"/>
@@ -77,18 +77,18 @@
<text font-size="8pt" letter-spacing="2px" transform="translate(48 7.1) rotate(90)">ENV</text>
<def id="ENV_PARAM" xlink:href="#knob38" transform="translate(-1.7 0)"/>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="output-background" width="58" height="40" rx="5"/>
<def id="ENV_OUTPUT" xlink:href="#output" transform="translate(2.5 3)"/>
<def id="INV_OUTPUT" xlink:href="#output" transform="translate(31.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">ENV</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(35 36)">INV</text>
</g>
<def id="ENV_INPUT" xlink:href="#input" transform="translate(143 7)"/>
- <g transform="translate(177 4)">
- <rect width="30" height="40" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(177 4)">
+ <rect class="output-background" width="30" height="40" rx="5"/>
<def id="TRIGGER_OUTPUT" xlink:href="#output" transform="translate(3 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(6 36)">END</text>
</g>
</g>
@@ -97,13 +97,13 @@
<text font-size="8pt" letter-spacing="2px" transform="translate(48 -2.5) rotate(90)">SIGNAL</text>
<def id="SIGNAL_PARAM" xlink:href="#knob38" transform="translate(-1.7 0)"/>
</g>
- <g transform="translate(0 4)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
- <rect width="20" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(29)"/>
+ <g class="io-group" transform="translate(0 4)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
+ <rect class="output-background" width="20" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(29)"/>
<def id="SIGNAL_INPUT" xlink:href="#input" transform="translate(2.5 3)"/>
<def id="SIGNAL_OUTPUT" xlink:href="#output" transform="translate(31.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33 36)">OUT</text>
</g>
<def id="SIGNALCV_INPUT" xlink:href="#input" transform="translate(143 7)"/>
diff --git a/res-src/Sine-src.svg b/res-src/Sine-src.svg
@@ -55,23 +55,23 @@
<g transform="translate(0 158)">
<!-- <rect width="45" height="8" fill="#f0f" transform="translate(0 -8)" /> -->
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 133)"/>
- <rect width="34" height="140" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 133)"/>
+ <rect class="input-background" width="34" height="140" rx="5"/>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3.5 35)">V/OCT</text>
<def id="FM_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 70)">FM</text>
<def id="PHASE_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">PHASE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">PHASE</text>
<def id="SYNC_INPUT" xlink:href="#input" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 140)">SYNC</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 140)">SYNC</text>
</g>
- <g transform="translate(5.5 146)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 146)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Slew-src.svg b/res-src/Slew-src.svg
@@ -56,8 +56,8 @@
<use xlink:href="#dial-time-slew" transform="translate(0 -1)"/>
<def id="RISE_SHAPE_PARAM" xlink:href="#knob16" transform="translate(14.5 51)"/>
<use xlink:href="#dial-rise-shape-slew" transform="translate(2.5 39)"/>
- <g transform="translate(7.5 77)">
- <rect width="30" height="30" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(7.5 77)">
+ <rect class="input-background" width="30" height="30" rx="5"/>
<def id="RISE_INPUT" xlink:href="#input" transform="translate(3 3)"/>
<!-- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text> -->
</g>
@@ -69,25 +69,25 @@
<use xlink:href="#dial-time-slew" transform="translate(0 -1)"/>
<def id="FALL_SHAPE_PARAM" xlink:href="#knob16" transform="translate(14.5 51)"/>
<use xlink:href="#dial-fall-shape-slew" transform="translate(2.5 39)"/>
- <g transform="translate(7.5 77)">
- <rect width="30" height="30" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(7.5 77)">
+ <rect class="input-background" width="30" height="30" rx="5"/>
<def id="FALL_INPUT" xlink:href="#input" transform="translate(3 3)"/>
<!-- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text> -->
</g>
</g>
<g transform="translate(0 260)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Stack-src.svg b/res-src/Stack-src.svg
@@ -112,10 +112,10 @@
<use xlink:href="#dial-fine-stack" transform="translate(0 -5)"/>
</g>
- <g transform="translate(5.5 154)">
- <rect width="34" height="50" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 154)">
+ <rect class="input-background" width="34" height="50" rx="5"/>
<def id="CV_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<g transform="translate(1.5 39)">
<text font-size="5pt" letter-spacing="0.75px" transform="translate(0 6)">QNTZ</text>
<def id="QUANTIZE_PARAM" xlink:href="#button-small" transform="translate(22 -1)"/>
@@ -123,19 +123,19 @@
</g>
<g transform="translate(0 212)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="72" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="72" rx="5"/>
<def id="THRU_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 32)">THRU</text>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 36)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 68)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 68)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Sums-src.svg b/res-src/Sums-src.svg
@@ -4,36 +4,36 @@
<def xlink:href="#module3" var-name="SUMS"/>
- <g transform="translate(7.5 18)">
- <rect width="34" height="63.5" rx="5" fill="#fafafa" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(-2 53.5)"/>
+ <g class="io-group" transform="translate(7.5 18)">
+ <rect class="input-background" width="34" height="63.5" rx="5" transform="translate(-2 0)"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(-2 53.5)"/>
<def id="A_INPUT" xlink:href="#input" transform="translate(3 5)"/>
<def id="B_INPUT" xlink:href="#input" transform="translate(3 35)"/>
</g>
- <g transform="translate(7.5 82)">
- <rect width="34" height="163" rx="5" fill="#bbb" transform="translate(-2 0)"/>
- <rect width="34" height="10" fill="#bbb" transform="translate(-2 0)"/>
+ <g class="io-group" transform="translate(7.5 82)">
+ <rect class="output-background" width="34" height="163" rx="5" transform="translate(-2 0)"/>
+ <rect class="output-background-filler" width="34" height="10" transform="translate(-2 0)"/>
<def id="SUM_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">SUM</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.3 37)">SUM</text>
<def id="DIFFERENCE_OUTPUT" xlink:href="#output" transform="translate(3 44)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 77)">DIFF</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5 77)">DIFF</text>
<def id="MAX_OUTPUT" xlink:href="#output" transform="translate(3 84)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">MAX</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 117)">MAX</text>
<def id="MIN_OUTPUT" xlink:href="#output" transform="translate(3 124)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6.5 157)">MIN</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(6.5 157)">MIN</text>
</g>
<g transform="translate(0 258)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 22)"/>
- <rect width="34" height="32" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 22)"/>
+ <rect class="input-background" width="34" height="32" rx="5"/>
<def id="NEGATE_INPUT" xlink:href="#input" transform="translate(5 4)"/>
</g>
- <g transform="translate(5.5 35)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="39" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 35)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="39" rx="5"/>
<def id="NEGATE_OUTPUT" xlink:href="#output" transform="translate(5 2)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NEG</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 34)">NEG</text>
</g>
</g>
</module>
diff --git a/res-src/Switch-src.svg b/res-src/Switch-src.svg
@@ -5,11 +5,11 @@
<def xlink:href="#module3" var-name="SWTCH"/>
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="62" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="62" rx="5"/>
<def id="GATE_PARAM" xlink:href="#button" transform="translate(8 4)"/>
<def id="GATE_INPUT" xlink:href="#input" transform="translate(5 26)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 58)">GATE</text>
</g>
<g transform="translate(4.5 67)">
@@ -18,11 +18,11 @@
</g>
<g transform="translate(0 79)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="74" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 64)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="74" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 64)"/>
<def id="HIGH1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
<def id="HIGH1_LIGHT" xlink:href="#light-small" transform="translate(2 29.3)"/>
</g>
<g transform="translate(5.5 36)">
@@ -30,20 +30,20 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(11.0 35)">LOW</text>
<def id="LOW1_LIGHT" xlink:href="#light-small" transform="translate(2 29.3)"/>
</g>
- <g transform="translate(5.5 77)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 77)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
<g transform="translate(0 196)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="74" rx="5" fill="#fafafa"/>
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 64)"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="74" rx="5"/>
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 64)"/>
<def id="HIGH2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1px" transform="translate(11.0 35)">HIGH</text>
<def id="HIGH2_LIGHT" xlink:href="#light-small" transform="translate(2 29.3)"/>
</g>
<g transform="translate(5.5 36)">
@@ -51,11 +51,11 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(11.0 35)">LOW</text>
<def id="LOW2_LIGHT" xlink:href="#light-small" transform="translate(2 29.3)"/>
</g>
- <g transform="translate(5.5 77)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 77)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/Switch1616-src.svg b/res-src/Switch1616-src.svg
@@ -4,11 +4,11 @@
<def xlink:href="#module" var-name="SWITCH1616"/>
- <rect width="56" height="302" rx="5" fill="#fafafa" transform="translate(5.5 9)"/>
- <rect width="302" height="56" rx="5" fill="#bbb" transform="translate(22.5 302)"/>
- <rect width="28" height="10" rx="5" fill="#fafafa" transform="translate(10.5 301)"/>
- <rect width="10" height="5" fill="#fafafa" transform="translate(36.5 302)"/>
- <rect width="28" height="10" rx="5" fill="#bbb" transform="translate(38.5 302)"/>
+ <rect class="input-background" width="56" height="302" rx="5" transform="translate(5.5 9)"/>
+ <rect class="output-background" width="302" height="56" rx="5" transform="translate(22.5 302)"/>
+ <rect class="input-background" width="28" height="10" rx="5" transform="translate(10.5 301)"/>
+ <rect class="input-background-filler" width="10" height="5" transform="translate(36.5 302)"/>
+ <rect class="output-background" width="28" height="10" rx="5" transform="translate(38.5 302)"/>
<g transform="translate(5.5 9)">
<def id="IN2_INPUT" xlink:href="#input" transform="translate(4 22)"/>
diff --git a/res-src/Switch44-src.svg b/res-src/Switch44-src.svg
@@ -72,44 +72,44 @@
<def id="MIX44_PARAM" xlink:href="#button" transform="translate(4.5 17)"/>
</g>
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
- <rect width="130" height="44" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="130" height="10" fill="#fafafa" transform="translate(10 34)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background" width="130" height="44" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="130" height="10" transform="translate(10 34)"/>
<g transform="translate(12 0)">
<def id="IN1_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">1</text>
</g>
<g transform="translate(44 0)">
<def id="IN2_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">2</text>
</g>
<g transform="translate(76 0)">
<def id="IN3_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">3</text>
</g>
<g transform="translate(108 0)">
<def id="IN4_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(12.4 40)">4</text>
</g>
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.2 40)">A</text>
</g>
<g transform="translate(34 0)">
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.5 40)">B</text>
</g>
<g transform="translate(66 0)">
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">C</text>
</g>
<g transform="translate(98 0)">
<def id="OUT4_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(12.3 40)">D</text>
</g>
</g>
</g>
diff --git a/res-src/Switch88-src.svg b/res-src/Switch88-src.svg
@@ -4,8 +4,8 @@
<def xlink:href="#module" var-name="SWITCH88"/>
- <g transform="translate(5.5 25)">
- <rect width="34" height="293" rx="5" fill="#fafafa" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(5.5 25)">
+ <rect class="input-background" width="34" height="293" rx="5" transform="translate(0 0)"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 42)"/>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 79)"/>
@@ -16,8 +16,8 @@
<def id="IN8_INPUT" xlink:href="#input" transform="translate(5 264)"/>
</g>
- <g transform="translate(46.5 323)">
- <rect width="278.5" height="34" rx="5" fill="#bbb" transform="translate(0 0)"/>
+ <g class="io-group" transform="translate(46.5 323)">
+ <rect class="output-background" width="278.5" height="34" rx="5" transform="translate(0 0)"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 5)"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(40 5)"/>
<def id="OUT3_OUTPUT" xlink:href="#output" transform="translate(75 5)"/>
diff --git a/res-src/Test-src.svg b/res-src/Test-src.svg
@@ -10,10 +10,10 @@
<def xlink:href="#dial-test" transform="translate(0 -6)"/>
</g>
<g transform="translate(0 50)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -23,10 +23,10 @@
<def xlink:href="#dial-test" transform="translate(0 -6)"/>
</g>
<g transform="translate(0 135)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -36,25 +36,25 @@
<def xlink:href="#dial-test" transform="translate(0 -6)"/>
</g>
<g transform="translate(0 220)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV3_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
<g transform="translate(0 265)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Test2-src.svg b/res-src/Test2-src.svg
@@ -10,10 +10,10 @@
<def xlink:href="#dial-test" transform="translate(0 -1)"/>
</g>
<g transform="translate(0 75)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV1A_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -23,10 +23,10 @@
<def xlink:href="#dial-test" transform="translate(0 -1)"/>
</g>
<g transform="translate(0 175)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV2A_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -36,10 +36,10 @@
<def xlink:href="#dial-test" transform="translate(0 -1)"/>
</g>
<g transform="translate(0 275)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV3A_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -49,10 +49,10 @@
<def xlink:href="#dial-test" transform="translate(0 -1)"/>
</g>
<g transform="translate(45 75)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV1B_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -62,10 +62,10 @@
<def xlink:href="#dial-test" transform="translate(0 -1)"/>
</g>
<g transform="translate(45 175)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV2B_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
@@ -75,23 +75,23 @@
<def xlink:href="#dial-test" transform="translate(0 -1)"/>
</g>
<g transform="translate(45 275)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="CV3B_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
</g>
</g>
<g transform="translate(5.5 320)">
- <g transform="translate(0 0)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(0 0)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(45 0)">
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(45 0)">
+ <rect class="output-background" width="34" height="38" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 35)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 35)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/TestExpanderBase-src.svg b/res-src/TestExpanderBase-src.svg
@@ -10,17 +10,17 @@
</g>
<g transform="translate(0 260)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 28)"/>
- <rect width="34" height="35" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 28)"/>
+ <rect class="input-background" width="34" height="35" rx="5"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">IN</text>
</g>
- <g transform="translate(5.5 41)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/TestExpanderExtension-src.svg b/res-src/TestExpanderExtension-src.svg
@@ -10,10 +10,10 @@
</g>
<g transform="translate(0 260)">
- <g transform="translate(5.5 41)">
- <rect width="34" height="38" rx="5" fill="#bbb" transform="translate(0 -3)"/>
+ <g class="io-group" transform="translate(5.5 41)">
+ <rect class="output-background" width="34" height="38" rx="5" transform="translate(0 -3)"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/TestVCF-src.svg b/res-src/TestVCF-src.svg
@@ -122,14 +122,14 @@
</g>
</g>
- <g transform="translate(45 315)">
- <rect width="58" height="40" rx="5" fill="#fafafa"/>
- <rect width="50" height="40" rx="5" fill="#bbb" transform="translate(38)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(29)"/>
+ <g class="io-group" transform="translate(45 315)">
+ <rect class="input-background" width="58" height="40" rx="5"/>
+ <rect class="output-background" width="50" height="40" rx="5" transform="translate(38)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(29)"/>
<def id="IN_INPUT" xlink:href="#input" transform="translate(2.5 3)"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(31.5 3)"/>
<def id="OUT_B_OUTPUT" xlink:href="#output" transform="translate(60.5 3)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(10 36)">IN</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(33 36)">OUT</text>
<text font-size="6pt" letter-spacing="2px" transform="translate(70.5 36)">B</text>
</g>
diff --git a/res-src/UMix-src.svg b/res-src/UMix-src.svg
@@ -7,9 +7,9 @@
<!-- <polyline points="22.5,0 22.5,380" stroke-width="0.5" stroke="#0f0" /> -->
<g transform="translate(0 18)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 283)"/>
- <rect width="34" height="293" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 283)"/>
+ <rect class="input-background" width="34" height="293" rx="5"/>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 5)"/>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 40.5)"/>
<def id="IN3_INPUT" xlink:href="#input" transform="translate(5 76)"/>
@@ -19,11 +19,11 @@
<def id="IN7_INPUT" xlink:href="#input" transform="translate(5 218)"/>
<def id="IN8_INPUT" xlink:href="#input" transform="translate(5 252.5)"/>
</g>
- <g transform="translate(5.5 283)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="38" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 283)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="38" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 1)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.5 33)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Unison-src.svg b/res-src/Unison-src.svg
@@ -32,29 +32,29 @@
<text font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 0)">DETUNE</text>
<def id="DETUNE_PARAM" xlink:href="#knob26" transform="translate(9.5 9)"/>
<use xlink:href="#dial-detune-unison" transform="translate(0 -1)"/>
- <g transform="translate(5.5 44)">
- <rect width="34" height="39" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 44)">
+ <rect class="input-background" width="34" height="39" rx="5"/>
<def id="DETUNE_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
<g transform="translate(0 171)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(3 35)">V/OCT</text>
<def id="GATE_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 70)">GATE</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="PITCH_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(3 32)">V/OCT</text>
<def id="GATE_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(5.5 67)">GATE</text>
</g>
</g>
</module>
diff --git a/res-src/VCA-src.svg b/res-src/VCA-src.svg
@@ -12,19 +12,19 @@
</g>
<g transform="translate(0 57)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="CV1_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
<def id="IN1_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT1_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
@@ -34,19 +34,19 @@
</g>
<g transform="translate(0 216)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="CV2_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 35)">CV</text>
<def id="IN2_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT2_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
diff --git a/res-src/VCAmp-src.svg b/res-src/VCAmp-src.svg
@@ -10,19 +10,19 @@
</g>
<g transform="translate(0 210)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="CV_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
<def id="IN_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(12.5 70)">IN</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/VCF-src.svg b/res-src/VCF-src.svg
@@ -164,44 +164,44 @@
<use xlink:href="#dial-slope-vcf" transform="translate(18.5 -11)"/>
</g>
- <g transform="translate(0 269)">
- <rect width="130" height="47" rx="5" fill="#bbb" transform="translate(10 44)"/>
- <rect width="98" height="44" rx="5" fill="#fafafa" transform="translate(26 0)"/>
- <rect width="98" height="10" fill="#fafafa" transform="translate(26 34)"/>
- <rect width="97" height="47" rx="5" fill="#fafafa" transform="translate(10 44)"/>
- <rect width="10" height="47" fill="#fafafa" transform="translate(97 44)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background" width="98" height="44" rx="5" transform="translate(26 0)"/>
+ <rect class="input-background-filler" width="98" height="10" transform="translate(26 34)"/>
+ <rect class="input-background" width="97" height="47" rx="5" transform="translate(10 44)"/>
+ <rect class="input-background-filler" width="10" height="47" transform="translate(97 44)"/>
<g transform="translate(16 0)">
<g transform="translate(12 0)">
<def id="FREQUENCY_CV_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(9 40)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(9 40)">CV</text>
</g>
<g transform="translate(44 0)">
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(76 0)">
<def id="FM_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(9 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(9 40)">FM</text>
</g>
</g>
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="IN_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(10.5 40)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(10.5 40)">IN</text>
</g>
<g transform="translate(34 0)">
<def id="Q_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">R/BW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">R/BW</text>
</g>
<g transform="translate(66 0)">
<def id="SLOPE_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(7 40)">SLP</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(7 40)">SLP</text>
</g>
<g transform="translate(98 0)">
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1px" transform="translate(6 40)">OUT</text>
</g>
</g>
</g>
diff --git a/res-src/VCM-src.svg b/res-src/VCM-src.svg
@@ -23,15 +23,15 @@
<def xlink:href="#module" var-name="VCM"/>
<g transform="translate(0 32)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<def id="IN1_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<def id="CV1_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
<!-- <polyline points="0,0 150,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 22.5)" /> -->
@@ -41,15 +41,15 @@
</g>
<g transform="translate(0 96)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<def id="IN2_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<def id="CV2_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
<!-- <polyline points="0,0 150,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 22.5)" /> -->
@@ -59,15 +59,15 @@
</g>
<g transform="translate(0 160)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<def id="IN3_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<def id="CV3_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
<!-- <polyline points="0,0 150,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 22.5)" /> -->
@@ -77,15 +77,15 @@
</g>
<g transform="translate(0 225)">
- <g transform="translate(10 1)">
- <rect width="63" height="43" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(10 1)">
+ <rect class="input-background" width="63" height="43" rx="5"/>
<g transform="translate(1 0)">
<def id="IN4_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(10 39)">IN</text>
</g>
<g transform="translate(32 0)">
<def id="CV4_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
</g>
<!-- <polyline points="0,0 150,0" stroke="#0f0" stroke-width="1" fill="none" transform="translate(0 22.5)" /> -->
@@ -98,17 +98,17 @@
<text font-size="5pt" letter-spacing="2px" transform="translate(11 30.5) rotate(-90)">MIX</text>
<def id="MIX_PARAM" xlink:href="#knob38" transform="translate(22.5 3.5)"/>
<use xlink:href="#dial-level-vcm" transform="translate(11.5 -7.5)"/>
- <g transform="translate(77 0)">
- <rect width="63" height="43" rx="5" fill="#bbb"/>
- <rect width="31.5" height="43" rx="5" fill="#fafafa"/>
- <rect width="5" height="43" fill="#fafafa" transform="translate(26.5 0)"/>
+ <g class="io-group" transform="translate(77 0)">
+ <rect class="output-background" width="63" height="43" rx="5"/>
+ <rect class="input-background" width="31.5" height="43" rx="5"/>
+ <rect class="input-background-filler" width="5" height="43" transform="translate(26.5 0)"/>
<g transform="translate(1 0)">
<def id="MIX_CV_INPUT" xlink:href="#input" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8.5 39)">CV</text>
</g>
<g transform="translate(32 0)">
<def id="MIX_OUTPUT" xlink:href="#output" transform="translate(3 4)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 39)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 39)">OUT</text>
</g>
</g>
diff --git a/res-src/VCO-src.svg b/res-src/VCO-src.svg
@@ -86,20 +86,20 @@
<!-- <rect width="150" height="7" fill="#0f0" transform="translate(10 262)" /> -->
- <g transform="translate(0 269)">
- <rect width="130" height="91" rx="5" fill="#bbb" transform="translate(10 0)"/>
+ <g class="io-group" transform="translate(0 269)">
+ <rect class="output-background" width="130" height="91" rx="5" transform="translate(10 0)"/>
<!-- <rect width="97" height="91" rx="5" fill="#fafafa" transform="translate(10 0)" /> -->
- <rect width="65" height="91" rx="5" fill="#fafafa" transform="translate(10 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 0)"/>
- <rect width="10" height="8" fill="#fafafa" transform="translate(65 83)"/>
+ <rect class="input-background" width="65" height="91" rx="5" transform="translate(10 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 0)"/>
+ <rect class="input-background-filler" width="10" height="8" transform="translate(65 83)"/>
<g transform="translate(12 0)">
<def id="PW_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8 40)">PW</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8 40)">PW</text>
</g>
<g transform="translate(44 0)">
<def id="FM_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(8 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="2px" transform="translate(8 40)">FM</text>
</g>
<g transform="translate(76 0)">
<def id="SQUARE_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
@@ -121,11 +121,11 @@
<g transform="translate(10 44)">
<g transform="translate(2 0)">
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(1 40)">V/OCT</text>
</g>
<g transform="translate(34 0)">
<def id="SYNC_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
</g>
<g transform="translate(66 0)">
<def id="TRIANGLE_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
diff --git a/res-src/VU-src.svg b/res-src/VU-src.svg
@@ -75,21 +75,21 @@
</g>
<g transform="translate(0 200)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="L_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">L</text>
<def id="R_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="0.5px" transform="translate(9 70)">R (L)</text>
+ <text class="input-label" font-size="5pt" letter-spacing="0.5px" transform="translate(9 70)">R (L)</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="70" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="70" rx="5"/>
<def id="L_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 32)">L</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 32)">L</text>
<def id="R_OUTPUT" xlink:href="#output" transform="translate(5 35)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 67)">R</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(15 67)">R</text>
</g>
</g>
</module>
diff --git a/res-src/Walk-src.svg b/res-src/Walk-src.svg
@@ -25,23 +25,23 @@
</g>
<g transform="translate(0 157)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 133)"/>
- <rect width="34" height="140" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 133)"/>
+ <rect class="input-background" width="34" height="140" rx="5"/>
<def id="RATE_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(6 35)">RATE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(6 35)">RATE</text>
<def id="OFFSET_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="1.2px" transform="translate(2 70)">OFFSET</text>
+ <text class="input-label" font-size="5pt" letter-spacing="1.2px" transform="translate(2 70)">OFFSET</text>
<def id="SCALE_INPUT" xlink:href="#input" transform="translate(5 73)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">SCALE</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(2.5 105)">SCALE</text>
<def id="JUMP_INPUT" xlink:href="#input" transform="translate(5 108)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(5 140)">JUMP</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(5 140)">JUMP</text>
</g>
- <g transform="translate(5.5 146)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 146)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">OUT</text>
</g>
</g>
</module>
diff --git a/res-src/Walk2-src.svg b/res-src/Walk2-src.svg
@@ -73,43 +73,43 @@
<def xlink:href="#dial-mintick" transform="translate(2 -12)"/>
</g>
- <g transform="translate(7 281)">
- <rect width="62" height="79" rx="5" fill="#fafafa"/>
- <rect width="22" height="40" rx="5" fill="#bbb" transform="translate(40 39)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31 39)"/>
- <rect width="31" height="20" fill="#bbb" transform="translate(31 39)"/>
+ <g class="io-group" transform="translate(7 281)">
+ <rect class="input-background" width="62" height="79" rx="5"/>
+ <rect class="output-background" width="22" height="40" rx="5" transform="translate(40 39)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31 39)"/>
+ <rect class="output-background-filler" width="31" height="20" transform="translate(31 39)"/>
<def id="OFFSET_X_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="SCALE_X_INPUT" xlink:href="#input" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37.5 36)">SCL</text>
<def id="RATE_X_INPUT" xlink:href="#input" transform="translate(3.5 42)"/>
<def id="OUT_X_OUTPUT" xlink:href="#output" transform="translate(34.5 42)"/>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37 75)">OUT</text>
</g>
- <g transform="translate(142 281)">
- <rect width="62" height="79" rx="5" fill="#fafafa"/>
- <rect width="22" height="40" rx="5" fill="#bbb" transform="translate(40 39)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31 39)"/>
- <rect width="31" height="20" fill="#bbb" transform="translate(31 39)"/>
+ <g class="io-group" transform="translate(142 281)">
+ <rect class="input-background" width="62" height="79" rx="5"/>
+ <rect class="output-background" width="22" height="40" rx="5" transform="translate(40 39)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31 39)"/>
+ <rect class="output-background-filler" width="31" height="20" transform="translate(31 39)"/>
<def id="OFFSET_Y_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="SCALE_Y_INPUT" xlink:href="#input" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1.5px" transform="translate(6 36)">OFF</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37.5 36)">SCL</text>
<def id="RATE_Y_INPUT" xlink:href="#input" transform="translate(3.5 42)"/>
<def id="OUT_Y_OUTPUT" xlink:href="#output" transform="translate(34.5 42)"/>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(3.5 75)">RATE</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(37 75)">OUT</text>
</g>
- <g transform="translate(74.5 288)">
- <rect width="61" height="40" rx="5" fill="#fafafa"/>
- <rect width="22" height="40" rx="5" fill="#bbb" transform="translate(40)"/>
- <rect width="20" height="40" fill="#bbb" transform="translate(31)"/>
+ <g class="io-group" transform="translate(74.5 288)">
+ <rect class="input-background" width="61" height="40" rx="5"/>
+ <rect class="output-background" width="22" height="40" rx="5" transform="translate(40)"/>
+ <rect class="output-background-filler" width="20" height="40" transform="translate(31)"/>
<def id="JUMP_INPUT" xlink:href="#input" transform="translate(3.5 3)"/>
<def id="DISTANCE_OUTPUT" xlink:href="#output" transform="translate(34.5 3)"/>
- <text font-size="6pt" letter-spacing="1.5px" transform="translate(4 36)">TRIG</text>
+ <text class="output-label" font-size="6pt" letter-spacing="1.5px" transform="translate(4 36)">TRIG</text>
<text font-size="6pt" letter-spacing="1.5px" transform="translate(35.5 36)">DIST</text>
</g>
diff --git a/res-src/XCO-src.svg b/res-src/XCO-src.svg
@@ -56,17 +56,17 @@
<def id="FM_DEPTH_PARAM" xlink:href="#knob38" transform="translate(20 0)"/>
</g>
<!-- <rect width="90" height="10" fill="#0f0" transform="translate(0 26)" /> -->
- <g transform="translate(-19 52)">
- <rect width="71" height="47" rx="5" fill="#fafafa" transform="translate(10 0)"/>
+ <g class="io-group" transform="translate(-19 52)">
+ <rect class="input-background" width="71" height="47" rx="5" transform="translate(10 0)"/>
<g transform="translate(10 0)">
<!-- <rect width="30" height="47" rx="5" fill="#fafafa" /> -->
<def id="FM_INPUT" xlink:href="#input" transform="translate(7 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(11 40)">FM</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(11 40)">FM</text>
</g>
<g transform="translate(47 0)">
<!-- <rect width="30" height="47" rx="5" fill="#fafafa" /> -->
<def id="FM_DEPTH_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(0 40)">DEPTH</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(0 40)">DEPTH</text>
</g>
<g transform="translate(82 0)">
<!-- <rect width="30" height="47" rx="5" fill="#00c" /> -->
@@ -83,10 +83,10 @@
<!-- <rect width="90" height="18" fill="#0f0" transform="translate(0 175)" /> -->
<!-- <rect width="90" height="18" fill="#0f0" transform="translate(0 295)" /> -->
- <rect width="193" height="47" rx="5" fill="#bbb" transform="translate(97 313)"/>
+ <rect class="output-background" width="193" height="47" rx="5" transform="translate(97 313)"/>
- <g transform="translate(140 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(140 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
<!-- <polyline points="15,0 15,320" stroke="#0f0" stroke-width="1" fill="none" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 90)" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 177)" /> -->
@@ -111,12 +111,12 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(2.5 30)">MIX</text>
<def id="SQUARE_MIX_INPUT" xlink:href="#input" transform="translate(0 35)"/>
</g>
- <g transform="translate(0 288)">
- <rect width="32" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="32" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="32" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="32" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<def id="SQUARE_OUTPUT" xlink:href="#output" transform="translate(0 0)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -124,8 +124,8 @@
<def xlink:href="#dial-centertick" transform="translate(135 136)"/>
<def xlink:href="#dial-mintick" transform="translate(135 225)"/>
- <g transform="translate(180 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(180 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
<!-- <polyline points="15,0 15,320" stroke="#0f0" stroke-width="1" fill="none" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 90)" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 177)" /> -->
@@ -150,12 +150,12 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(2.5 30)">MIX</text>
<def id="SAW_MIX_INPUT" xlink:href="#input" transform="translate(0 35)"/>
</g>
- <g transform="translate(0 288)">
- <rect width="32" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="32" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="32" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="32" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<def id="SAW_OUTPUT" xlink:href="#output" transform="translate(0 0)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -163,8 +163,8 @@
<def xlink:href="#dial-centertick" transform="translate(175 136)"/>
<def xlink:href="#dial-mintick" transform="translate(175 225)"/>
- <g transform="translate(220 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(220 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
<!-- <polyline points="15,0 15,320" stroke="#0f0" stroke-width="1" fill="none" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 90)" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 177)" /> -->
@@ -189,12 +189,12 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(2.5 30)">MIX</text>
<def id="TRIANGLE_MIX_INPUT" xlink:href="#input" transform="translate(0 35)"/>
</g>
- <g transform="translate(0 288)">
- <rect width="32" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="32" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="32" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="32" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<def id="TRIANGLE_OUTPUT" xlink:href="#output" transform="translate(0 0)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -202,8 +202,8 @@
<def xlink:href="#dial-centertick" transform="translate(215 136)"/>
<def xlink:href="#dial-mintick" transform="translate(215 225)"/>
- <g transform="translate(260 30)">
- <rect width="30" height="330" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(260 30)">
+ <rect class="input-background" width="30" height="330" rx="5"/>
<!-- <polyline points="15,0 15,320" stroke="#0f0" stroke-width="1" fill="none" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 90)" /> -->
<!-- <rect width="30" height="20" fill="#0f0" transform="translate(0 177)" /> -->
@@ -229,12 +229,12 @@
<text font-size="6pt" letter-spacing="2px" transform="translate(2.5 30)">MIX</text>
<def id="SINE_MIX_INPUT" xlink:href="#input" transform="translate(0 35)"/>
</g>
- <g transform="translate(0 288)">
- <rect width="31" height="5" fill="#bbb" transform="translate(-1 -5)"/>
- <rect width="31" height="47" rx="5" fill="#bbb" transform="translate(-1 -5)"/>
+ <g class="io-group" transform="translate(0 288)">
+ <rect class="output-background-filler" width="31" height="5" transform="translate(-1 -5)"/>
+ <rect class="output-background" width="31" height="47" rx="5" transform="translate(-1 -5)"/>
<g transform="translate(3 0)">
<def id="SINE_OUTPUT" xlink:href="#output" transform="translate(0 0)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(2 36)">OUT</text>
</g>
</g>
</g>
@@ -243,22 +243,22 @@
<def xlink:href="#dial-mintick" transform="translate(255 225)"/>
<!-- <rect width="30" height="10" fill="#0f0" transform="translate(0 303)" /> -->
- <g transform="translate(0 313)">
- <rect width="71" height="47" rx="5" fill="#fafafa" transform="translate(10 0)"/>
+ <g class="io-group" transform="translate(0 313)">
+ <rect class="input-background" width="71" height="47" rx="5" transform="translate(10 0)"/>
<g transform="translate(10 0)">
<!-- <rect width="30" height="47" rx="5" fill="#fafafa" /> -->
<def id="PITCH_INPUT" xlink:href="#input" transform="translate(7 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(5 40)">V/OCT</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(5 40)">V/OCT</text>
</g>
<g transform="translate(47 0)">
<!-- <rect width="30" height="47" rx="5" fill="#fafafa" /> -->
<def id="SYNC_INPUT" xlink:href="#input" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
+ <text class="input-label" font-size="6pt" letter-spacing="1px" transform="translate(3 40)">SYNC</text>
</g>
<g transform="translate(100 0)">
<!-- <rect width="30" height="47" rx="5" fill="#bbb" transform="translate(0 0)" /> -->
<def id="MIX_OUTPUT" xlink:href="#output" transform="translate(3 5)"/>
- <text font-size="6pt" letter-spacing="2px" transform="translate(5 40)">MIX</text>
+ <text class="output-label" font-size="6pt" letter-spacing="2px" transform="translate(5 40)">MIX</text>
</g>
</g>
</module>
diff --git a/res-src/XFade-src.svg b/res-src/XFade-src.svg
@@ -55,10 +55,10 @@
<text font-size="6pt" letter-spacing="1px" transform="translate(14 0)">MIX</text>
<def id="MIX_PARAM" xlink:href="#knob29" transform="translate(0 3)"/>
<use xlink:href="#dial-mixab-xfade" transform="translate(0 3)"/>
- <g transform="translate(5.5 49)">
- <rect width="34" height="38" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 49)">
+ <rect class="input-background" width="34" height="38" rx="5"/>
<def id="MIX_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(11 35)">CV</text>
</g>
</g>
@@ -74,19 +74,19 @@
</g>
<g transform="translate(0 210)">
- <g transform="translate(5.5 0)">
- <rect width="34" height="10" fill="#fafafa" transform="translate(0 63)"/>
- <rect width="34" height="70" rx="5" fill="#fafafa"/>
+ <g class="io-group" transform="translate(5.5 0)">
+ <rect class="input-background-filler" width="34" height="10" transform="translate(0 63)"/>
+ <rect class="input-background" width="34" height="70" rx="5"/>
<def id="A_INPUT" xlink:href="#input" transform="translate(5 3)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 35)">A</text>
<def id="B_INPUT" xlink:href="#input" transform="translate(5 38)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
+ <text class="input-label" font-size="5pt" letter-spacing="2px" transform="translate(15 70)">B</text>
</g>
- <g transform="translate(5.5 76)">
- <rect width="34" height="10" fill="#bbb" transform="translate(0 -3)"/>
- <rect width="34" height="35" rx="5" fill="#bbb"/>
+ <g class="io-group" transform="translate(5.5 76)">
+ <rect class="output-background-filler" width="34" height="10" transform="translate(0 -3)"/>
+ <rect class="output-background" width="34" height="35" rx="5"/>
<def id="OUT_OUTPUT" xlink:href="#output" transform="translate(5 0)"/>
- <text font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">MIX</text>
+ <text class="output-label" font-size="5pt" letter-spacing="2px" transform="translate(8.3 32)">MIX</text>
</g>
</g>
</module>
diff --git a/res-src/styles.css b/res-src/styles.css
@@ -12,7 +12,10 @@ text.brand {
font-weight: bold;
}
-path, polyline {
+polyline {
+ stroke: #333;
+}
+path {
stroke: #333;
}
@@ -28,3 +31,21 @@ polyline.module-border-middle {
polyline.module-border-outer {
stroke: #f2f2f2;
}
+
+g.io-group {
+}
+rect.input-background {
+ fill: #fafafa;
+}
+rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background {
+ fill: #bbb;
+}
+rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
diff --git a/res/AD.svg b/res/AD.svg
Binary files differ.
diff --git a/res/ADSR.svg b/res/ADSR.svg
Binary files differ.
diff --git a/res/AMRM.svg b/res/AMRM.svg
Binary files differ.
diff --git a/res/ASR.svg b/res/ASR.svg
Binary files differ.
diff --git a/res/Additator.svg b/res/Additator.svg
Binary files differ.
diff --git a/res/AddrSeq.svg b/res/AddrSeq.svg
Binary files differ.
diff --git a/res/Analyzer.svg b/res/Analyzer.svg
Binary files differ.
diff --git a/res/Arp.svg b/res/Arp.svg
Binary files differ.
diff --git a/res/Assign.svg b/res/Assign.svg
Binary files differ.
diff --git a/res/Bool.svg b/res/Bool.svg
Binary files differ.
diff --git a/res/CVD.svg b/res/CVD.svg
Binary files differ.
diff --git a/res/Clpr.svg b/res/Clpr.svg
Binary files differ.
diff --git a/res/Cmp.svg b/res/Cmp.svg
Binary files differ.
diff --git a/res/CmpDist.svg b/res/CmpDist.svg
Binary files differ.
diff --git a/res/DADSRH.svg b/res/DADSRH.svg
Binary files differ.
diff --git a/res/DADSRHPlus.svg b/res/DADSRHPlus.svg
Binary files differ.
diff --git a/res/DGate.svg b/res/DGate.svg
Binary files differ.
diff --git a/res/Detune.svg b/res/Detune.svg
Binary files differ.
diff --git a/res/EQ.svg b/res/EQ.svg
Binary files differ.
diff --git a/res/EQS.svg b/res/EQS.svg
Binary files differ.
diff --git a/res/Edge.svg b/res/Edge.svg
Binary files differ.
diff --git a/res/EightFO.svg b/res/EightFO.svg
Binary files differ.
diff --git a/res/EightOne.svg b/res/EightOne.svg
Binary files differ.
diff --git a/res/FFB.svg b/res/FFB.svg
Binary files differ.
diff --git a/res/FMOp.svg b/res/FMOp.svg
Binary files differ.
diff --git a/res/FlipFlop.svg b/res/FlipFlop.svg
Binary files differ.
diff --git a/res/Follow.svg b/res/Follow.svg
Binary files differ.
diff --git a/res/FourMan.svg b/res/FourMan.svg
Binary files differ.
diff --git a/res/Inv.svg b/res/Inv.svg
Binary files differ.
diff --git a/res/LFO.svg b/res/LFO.svg
Binary files differ.
diff --git a/res/LLFO.svg b/res/LLFO.svg
Binary files differ.
diff --git a/res/LVCF.svg b/res/LVCF.svg
Binary files differ.
diff --git a/res/LVCO.svg b/res/LVCO.svg
Binary files differ.
diff --git a/res/Lag.svg b/res/Lag.svg
Binary files differ.
diff --git a/res/Lmtr.svg b/res/Lmtr.svg
Binary files differ.
diff --git a/res/Manual.svg b/res/Manual.svg
Binary files differ.
diff --git a/res/Matrix44.svg b/res/Matrix44.svg
Binary files differ.
diff --git a/res/Matrix88.svg b/res/Matrix88.svg
Binary files differ.
diff --git a/res/Mix1.svg b/res/Mix1.svg
Binary files differ.
diff --git a/res/Mix2.svg b/res/Mix2.svg
Binary files differ.
diff --git a/res/Mix4.svg b/res/Mix4.svg
Binary files differ.
diff --git a/res/Mix4x.svg b/res/Mix4x.svg
Binary files differ.
diff --git a/res/Mix8.svg b/res/Mix8.svg
Binary files differ.
diff --git a/res/Mix8x.svg b/res/Mix8x.svg
Binary files differ.
diff --git a/res/Mono.svg b/res/Mono.svg
Binary files differ.
diff --git a/res/Mult.svg b/res/Mult.svg
Binary files differ.
diff --git a/res/Mumix.svg b/res/Mumix.svg
Binary files differ.
diff --git a/res/Mute8.svg b/res/Mute8.svg
Binary files differ.
diff --git a/res/Noise.svg b/res/Noise.svg
Binary files differ.
diff --git a/res/Nsgt.svg b/res/Nsgt.svg
Binary files differ.
diff --git a/res/Offset.svg b/res/Offset.svg
Binary files differ.
diff --git a/res/OneEight.svg b/res/OneEight.svg
Binary files differ.
diff --git a/res/PEQ.svg b/res/PEQ.svg
Binary files differ.
diff --git a/res/PEQ14.svg b/res/PEQ14.svg
Binary files differ.
diff --git a/res/PEQ14XF.svg b/res/PEQ14XF.svg
Binary files differ.
diff --git a/res/PEQ14XR.svg b/res/PEQ14XR.svg
Binary files differ.
diff --git a/res/PEQ14XV.svg b/res/PEQ14XV.svg
Binary files differ.
diff --git a/res/PEQ6.svg b/res/PEQ6.svg
Binary files differ.
diff --git a/res/PEQ6XF.svg b/res/PEQ6XF.svg
Binary files differ.
diff --git a/res/Pan.svg b/res/Pan.svg
Binary files differ.
diff --git a/res/Pgmr.svg b/res/Pgmr.svg
Binary files differ.
diff --git a/res/PgmrX.svg b/res/PgmrX.svg
Binary files differ.
diff --git a/res/PolyCon16.svg b/res/PolyCon16.svg
Binary files differ.
diff --git a/res/PolyCon8.svg b/res/PolyCon8.svg
Binary files differ.
diff --git a/res/PolyMult.svg b/res/PolyMult.svg
Binary files differ.
diff --git a/res/PolyOff16.svg b/res/PolyOff16.svg
Binary files differ.
diff --git a/res/PolyOff8.svg b/res/PolyOff8.svg
Binary files differ.
diff --git a/res/Pressor.svg b/res/Pressor.svg
Binary files differ.
diff --git a/res/Pulse.svg b/res/Pulse.svg
Binary files differ.
diff --git a/res/Reftone.svg b/res/Reftone.svg
Binary files differ.
diff --git a/res/SampleHold.svg b/res/SampleHold.svg
Binary files differ.
diff --git a/res/Shaper.svg b/res/Shaper.svg
Binary files differ.
diff --git a/res/ShaperPlus.svg b/res/ShaperPlus.svg
Binary files differ.
diff --git a/res/Sine.svg b/res/Sine.svg
Binary files differ.
diff --git a/res/Slew.svg b/res/Slew.svg
Binary files differ.
diff --git a/res/Stack.svg b/res/Stack.svg
Binary files differ.
diff --git a/res/Sums.svg b/res/Sums.svg
Binary files differ.
diff --git a/res/Switch.svg b/res/Switch.svg
Binary files differ.
diff --git a/res/Switch1616.svg b/res/Switch1616.svg
Binary files differ.
diff --git a/res/Switch44.svg b/res/Switch44.svg
Binary files differ.
diff --git a/res/Switch88.svg b/res/Switch88.svg
Binary files differ.
diff --git a/res/Test.svg b/res/Test.svg
Binary files differ.
diff --git a/res/Test2.svg b/res/Test2.svg
Binary files differ.
diff --git a/res/TestExpanderBase.svg b/res/TestExpanderBase.svg
Binary files differ.
diff --git a/res/TestExpanderExtension.svg b/res/TestExpanderExtension.svg
Binary files differ.
diff --git a/res/TestVCF.svg b/res/TestVCF.svg
Binary files differ.
diff --git a/res/UMix.svg b/res/UMix.svg
Binary files differ.
diff --git a/res/Unison.svg b/res/Unison.svg
Binary files differ.
diff --git a/res/VCA.svg b/res/VCA.svg
Binary files differ.
diff --git a/res/VCAmp.svg b/res/VCAmp.svg
Binary files differ.
diff --git a/res/VCF.svg b/res/VCF.svg
Binary files differ.
diff --git a/res/VCM.svg b/res/VCM.svg
Binary files differ.
diff --git a/res/VCO.svg b/res/VCO.svg
Binary files differ.
diff --git a/res/VU.svg b/res/VU.svg
Binary files differ.
diff --git a/res/Walk.svg b/res/Walk.svg
Binary files differ.
diff --git a/res/Walk2.svg b/res/Walk2.svg
Binary files differ.
diff --git a/res/XCO.svg b/res/XCO.svg
Binary files differ.
diff --git a/res/XFade.svg b/res/XFade.svg
Binary files differ.
