LateNight PaleMoon: add fx flow indicator, tweak fx focus button

11 files changed, 153 insertions, 180 deletions

diff --git a/res/skins/LateNight/fx/focus_button.xml b/res/skins/LateNight/fx/focus_button.xml
index 09f230ccde..cc73cf89fd 100644
--- a/res/skins/LateNight/fx/focus_button.xml
+++ b/res/skins/LateNight/fx/focus_button.xml
@@ -21,7 +21,7 @@ Variables:
           <PushButton>
             <TooltipId>EffectSlot_focus</TooltipId>
             <ObjectName>FxFocusButton</ObjectName>
-            <Size>18f,18f</Size>
+            <Size>16f,16f</Size>
             <NumberStates>2</NumberStates>
             <RightClickIsPushButton>true</RightClickIsPushButton>
             <State>
@@ -30,13 +30,14 @@ Variables:
             <State>
               <Number>1</Number>
             </State>
+            <!-- left click = focus -->
             <Connection>
               <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
               <ButtonState>LeftButton</ButtonState>
               <Transform><IsEqual><Variable name="FxNum"/></IsEqual></Transform>
             </Connection>
+            <!-- right click = unfocus -->
             <Connection>
-              <!-- right click > unfocus -->
               <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
               <ButtonState>RightButton</ButtonState>
               <EmitOnDownPress>true</EmitOnDownPress>
diff --git a/res/skins/LateNight/fx/slot_controls.xml b/res/skins/LateNight/fx/slot_controls.xml
index ecbe307251..16e0564c63 100644
--- a/res/skins/LateNight/fx/slot_controls.xml
+++ b/res/skins/LateNight/fx/slot_controls.xml
@@ -1,13 +1,13 @@
 <!DOCTYPE template>
 <!--
   Description:
-    An effect unit widget hosting all effect controls for both collapsed
-    and expanded state ([FxUnitN],show_parameters)
+    An effect widget hosting all main controls for an effect slot
   Variables:
-    group: The group for the controls.
-    FxRack
+    FxRack_FxUnit
     FxUnit
     FxNum
+    ArcRadiusSmall
+    TopRegion_BtnType
 -->
 <Template>
   <SetVariable name="FxRack_FxUnit_FxNum"><Variable name="FxRack_FxUnit"/>_Effect<Variable name="FxNum"/></SetVariable>
@@ -26,9 +26,11 @@
         <ObjectName>FxSlotControls</ObjectName>
         <Layout>horizontal</Layout>
         <SizePolicy>p,min</SizePolicy>
-        <MaximumSize>173,</MaximumSize>
+        <MaximumSize>190,</MaximumSize>
         <Children>
 
+          <Template src="skin:/fx/focus_button.xml"/>
+
           <Template src="skin:/controls/button_2state.xml">
             <SetVariable name="TooltipId">EffectSlot_enabled</SetVariable>
             <SetVariable name="ObjectName">FxToggleButton</SetVariable>
@@ -45,22 +47,19 @@
 
           <EffectSelector>
             <MinimumSize>65,24</MinimumSize>
-            <MaximumSize>120,24</MaximumSize>
+            <MaximumSize>,24</MaximumSize>
             <SizePolicy>me,f</SizePolicy>
             <EffectRack>1</EffectRack>
             <EffectUnit><Variable name="FxUnit"/></EffectUnit>
             <Effect><Variable name="FxNum"/></Effect>
-            <!-- Style the effect selector when the effect is enabled -->
+            <!-- TODO Style the effect selector when the effect is enabled? -->
+            <!-- add 'highlight' property to WEffectSelector to avoid skin warnings-->
             <!-- <Connection>
               <ConfigKey>[<Variable name="FxRack_FxUnit_FxNum"/>],enabled</ConfigKey>
               <BindProperty>highlight</BindProperty>
             </Connection> -->
           </EffectSelector>
 
-          <WidgetGroup><Size>2min,0min</Size></WidgetGroup>
-
-          <Template src="skin:/fx/focus_button.xml"/>
-
         </Children>
       </WidgetGroup><!-- FxSlotControls -->
 
diff --git a/res/skins/LateNight/fx/slot_parameters.xml b/res/skins/LateNight/fx/slot_parameters.xml
index a9c85bcdb7..dc4caef2e5 100644
--- a/res/skins/LateNight/fx/slot_parameters.xml
+++ b/res/skins/LateNight/fx/slot_parameters.xml
@@ -1,13 +1,13 @@
 <!DOCTYPE template>
 <!--
   Description:
-    An effect unit widget hosting all effect controls for both collapsed
-    and expanded state ([FxUnitN],show_parameters)
+    An effect unit widget hosting all parameter controls for an effect
   Variables:
-    group: The group for the controls.
-    FxRack
+    FxRack_FxUnit
     FxUnit
     FxNum
+    ArcRadiusSmall
+    TopRegion_BtnType
 -->
 <Template>
   <SetVariable name="FxRack_FxUnit_FxNum">EffectRack1_EffectUnit<Variable name="FxUnit"/>_Effect<Variable name="FxNum"/></SetVariable>
@@ -94,7 +94,7 @@
         </Children>
       </WidgetGroup><!-- FxParametersContainer -->
 
-      <!-- Layer to style the Fx slot border, depending on focus state -->
+      <!-- Layer to style the Fx slot when it's focused (see fx mapping of midi-components.js) -->
       <WidgetGroup>
         <SizePolicy>me,min</SizePolicy>
         <Layout>stacked</Layout>
@@ -114,7 +114,6 @@
           <BindProperty>visible</BindProperty>
         </Connection>
       </WidgetGroup>
-      <!-- Layer to style the Fx slot border, depending on focus state -->
 
       <!-- Regular background, draws the background tile in Classic them -->
       <WidgetGroup>
diff --git a/res/skins/LateNight/fx/unit_parameters_hidden.xml b/res/skins/LateNight/fx/unit_parameters_hidden.xml
index 4c3eeca863..dc92a33973 100644
--- a/res/skins/LateNight/fx/unit_parameters_hidden.xml
+++ b/res/skins/LateNight/fx/unit_parameters_hidden.xml
@@ -3,8 +3,6 @@
   Description:
     An effect unit widget.
   Variables:
-    group: The group for the controls.
-    FxRack
     FxUnit
 -->
 <Template>
@@ -20,8 +18,36 @@
         <Layout>horizontal</Layout>
         <Children>
 
-          <WidgetGroup><SizePolicy>min,min</SizePolicy></WidgetGroup>
+          <!-- TODO ronso0 mkae this work without compressing fx slots -->
+          <!-- Separator shown when it makes sense (gap is > 60px) -->
+          <!-- <WidgetGroup>
+            <Layout>horizontal</Layout>
+            <SizePolicy>max,min</SizePolicy>
+            <Children>
+              <SizeAwareStack>
+                <SizePolicy>i,min</SizePolicy>
+                <Children>
+                  <WidgetGroup>
+                    <Layout>horizontal</Layout>
+                    <SizePolicy>i,min</SizePolicy>
+                    <MinimumSize>60,0</MinimumSize>
+                    <Children>
+                      <WidgetGroup><SizePolicy>me,me</SizePolicy></WidgetGroup>
+                      <WidgetGroup>
+                        <ObjectName>FxMixerSeparatorCollapsed</ObjectName>
+                        <Layout>horizontal</Layout>
+                        <Children/>
+                      </WidgetGroup>
+                    </Children>
+                  </WidgetGroup>
+                </Children>
+              </SizeAwareStack>
+            </Children>
+          </WidgetGroup> -->
+
+          <WidgetGroup><SizePolicy>min,me</SizePolicy></WidgetGroup>
 
+          <!-- Fx Slot 1 -->
           <WidgetGroup>
             <Layout>horizontal</Layout>
             <SizePolicy>me,min</SizePolicy>
@@ -34,12 +60,13 @@
           </WidgetGroup>
 
           <WidgetGroup>
-            <ObjectName>FxSlotSeparatorV</ObjectName>
+            <ObjectName>FxFlowIndicatorCollapsed</ObjectName>
             <Layout>horizontal</Layout>
             <SizePolicy>min,me</SizePolicy>
             <Children/>
           </WidgetGroup>
 
+          <!-- Fx Slot 2 -->
           <WidgetGroup>
             <Layout>horizontal</Layout>
             <SizePolicy>me,min</SizePolicy>
@@ -52,11 +79,12 @@
           </WidgetGroup>
 
           <WidgetGroup>
-            <ObjectName>FxSlotSeparatorV</ObjectName>
+            <ObjectName>FxFlowIndicatorCollapsed</ObjectName>
             <Layout>horizontal</Layout>
             <Children/>
           </WidgetGroup>
 
+          <!-- Fx Slot 3 -->
           <WidgetGroup>
             <Layout>horizontal</Layout>
             <SizePolicy>me,min</SizePolicy>
@@ -69,7 +97,7 @@
           </WidgetGroup>
 
           <WidgetGroup>
-            <ObjectName>FxSlotSeparatorV</ObjectName>
+            <ObjectName>FxMixerSeparatorCollapsed</ObjectName>
             <Layout>horizontal</Layout>
             <Children/>
           </WidgetGroup>
diff --git a/res/skins/LateNight/fx/unit_parameters_visible.xml b/res/skins/LateNight/fx/unit_parameters_visible.xml
index 6e6a624afe..1bcf0b0411 100644
--- a/res/skins/LateNight/fx/unit_parameters_visible.xml
+++ b/res/skins/LateNight/fx/unit_parameters_visible.xml
@@ -3,8 +3,6 @@
   Description:
     An effect unit widget.
   Variables:
-    group: The group for the controls.
-    FxRack
     FxUnit
 -->
 <Template>
@@ -19,6 +17,8 @@
         <SizePolicy>me,me</SizePolicy>
         <Layout>vertical</Layout>
         <Children>
+
+          <!-- Fx Slot 1 -->
           <WidgetGroup>
             <SizePolicy>me,me</SizePolicy>
             <Layout>horizontal</Layout>
@@ -39,6 +39,7 @@
             </Children>
           </WidgetGroup>
 
+          <!-- Horizontal split line - adjust max-width to fx slot width -->
           <WidgetGroup>
             <ObjectName></ObjectName>
             <Layout>horizontal</Layout>
@@ -55,6 +56,7 @@
             </Children>
           </WidgetGroup>
 
+          <!-- Fx Slot 2 -->
           <WidgetGroup>
             <SizePolicy>me,me</SizePolicy>
             <Layout>horizontal</Layout>
@@ -91,6 +93,7 @@
             </Children>
           </WidgetGroup>
 
+          <!-- Fx Slot 3 -->
           <WidgetGroup>
             <SizePolicy>me,me</SizePolicy>
             <Layout>horizontal</Layout>
diff --git a/res/skins/LateNight/palemoon/buttons/btn__fx_focus.svg b/res/skins/LateNight/palemoon/buttons/btn__fx_focus.svg
index 85c71e80ef..d144ffc834 100644
--- a/res/skins/LateNight/palemoon/buttons/btn__fx_focus.svg
+++ b/res/skins/LateNight/palemoon/buttons/btn__fx_focus.svg
@@ -1,55 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   width="18"
-   height="18"
-   version="1.1"
-   id="svg22">
-  <metadata
-     id="metadata28">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs26">
-    <linearGradient
-       id="linearGradient903">
-      <stop
-         id="stop899"
-         offset="0"
-         style="stop-color:#4d4d4d;stop-opacity:1" />
-      <stop
-         id="stop901"
-         offset="1"
-         style="stop-color:#010101;stop-opacity:1" />
-    </linearGradient>
-    <linearGradient
-       gradientUnits="userSpaceOnUse"
-       y2="2.1355932"
-       x2="6.4322033"
-       y1="15.864407"
-       x1="11.491526"
-       id="linearGradient905"
-       xlink:href="#linearGradient903"
-       gradientTransform="translate(-18,-18)" />
-  </defs>
-  <circle
-     style="opacity:1;fill:#2a2a2d;fill-opacity:1;stroke:url(#linearGradient905);stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="path1001"
-     cx="-9"
-     cy="-9"
-     r="7"
-     transform="scale(-1)" />
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="8" cy="8" r="5.65899" fill="none" stroke="#817365" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.70841" style="paint-order:markers fill stroke"/>
 </svg>
diff --git a/res/skins/LateNight/palemoon/buttons/btn__fx_focus_active.svg b/res/skins/LateNight/palemoon/buttons/btn__fx_focus_active.svg
index d364ca2355..e0086b1828 100644
--- a/res/skins/LateNight/palemoon/buttons/btn__fx_focus_active.svg
+++ b/res/skins/LateNight/palemoon/buttons/btn__fx_focus_active.svg
@@ -1,79 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   width="18"
-   height="18"
-   version="1.1"
-   id="svg32">
-  <metadata
-     id="metadata38">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs36">
-    <linearGradient
-       id="linearGradient1005">
-      <stop
-         style="stop-color:#b24c12;stop-opacity:1"
-         offset="0"
-         id="stop1001" />
-      <stop
-         style="stop-color:#59250b;stop-opacity:1"
-         offset="1"
-         id="stop1003" />
-    </linearGradient>
-    <linearGradient
-       xlink:href="#linearGradient1005"
-       id="linearGradient1007-3"
-       x1="7.0999489"
-       y1="2.9420629"
-       x2="10.925795"
-       y2="13.343758"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.92167042,0,0,0.92167042,0.70496669,0.70496669)" />
-    <linearGradient
-       gradientUnits="userSpaceOnUse"
-       y2="2.1355932"
-       x2="6.4322033"
-       y1="15.864407"
-       x1="11.491526"
-       id="linearGradient905"
-       xlink:href="#linearGradient903" />
-    <linearGradient
-       id="linearGradient903">
-      <stop
-         id="stop899"
-         offset="0"
-         style="stop-color:#333333;stop-opacity:1;" />
-      <stop
-         id="stop901"
-         offset="1"
-         style="stop-color:#010101;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <circle
-     style="opacity:1;fill:#101010;fill-opacity:1;stroke:url(#linearGradient905);stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="path1001"
-     cx="9"
-     cy="9"
-     r="7" />
-  <circle
-     style="opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.92167038;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="path1001-5"
-     cx="9"
-     cy="9"
-     r="6.4516926" />
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 42.918766,1 41,2.9187661 46.11671,8 41,13.081234 42.918766,15 48,9.8832905 53.081234,15 55,13.081234 49.88329,8 55,2.9187661 53.081234,1 48,6.1167097 Z" fill="#01a7ff" font-family="Sans" font-weight="400" overflow="visible" stroke-width="1.13704" style="text-indent:0;text-transform:none"/>
+  <circle cx="28" cy="8" r="5.65899" fill="none" stroke="#01a7ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.70841" style="paint-order:markers fill stroke"/>
+  <path d="m2.24711 1-1.24711 1.24711c1.40822 1.40822 2.73561 3.91095 2.73561 5.75289s-1.32738 4.34465-2.73561 5.75288l1.24711 1.24712c1.40822-1.40822 3.91095-2.73561 5.75289-2.73561s4.34465 1.32738 5.75289 2.73561l1.24712-1.24712c-1.40822-1.40822-2.73561-3.91095-2.73561-5.75288s1.32738-4.34465 2.73561-5.75289l-1.24712-1.24711c-1.40822 1.40822-3.91095 2.73561-5.75289 2.73561-1.8418 0-4.34465-1.32738-5.75289-2.73561zm2.53452 3.78157c1.09057 0.472378 2.21706 0.764347 3.21836 0.76436 1.00124-1.5e-5 2.12772-0.291982 3.21836-0.76436-0.472378 1.09057-0.764348 2.21706-0.76436 3.21836 1.5e-5 1.00124 0.291982 2.12772 0.76436 3.21836-1.09057-0.472378-2.21706-0.764347-3.21836-0.76436-1.00124 1.6e-5 -2.12772 0.291982-3.21836 0.76436 0.472378-1.09057 0.764347-2.21706 0.76436-3.21836-1.55e-5 -1.00124-0.291982-2.12772-0.76436-3.21836z" fill="#01a7ff" stroke-width=".874998"/>
 </svg>
diff --git a/res/skins/LateNight/palemoon/style/fx_flow_horizontal.svg b/res/skins/LateNight/palemoon/style/fx_flow_horizontal.svg
new file mode 100644
index 0000000000..a636ea3a4c
--- /dev/null
+++ b/res/skins/LateNight/palemoon/style/fx_flow_horizontal.svg
@@ -0,0 +1,16 @@
+<svg width="12" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="a">
+      <stop stop-color="#0c0c0c" offset="0"/>
+      <stop stop-color="#333" stop-opacity=".999976" offset="1"/>
+    </linearGradient>
+    <linearGradient id="b" x1="9.3457" x2="9.3457" y1="17.5078" y2="16.4922" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
+    <linearGradient id="c" x1="10.2456" x2="10.2456" y1="17.5078" y2="16.4922" gradientTransform="matrix(1 0 0 -1 1.22267 34)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
+  </defs>
+  <path d="m2.44534-1e-6 -1.22267 5e-7 9.55466 16.4922h1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#050505" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m1.22267-5e-7 -1.22267 5e-7 9.55466 16.4922h1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#363636" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m2.44534 34-1.22267-1e-6 9.55466-16.4922h1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#363636" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m1.22267 34h-1.22267l9.55466-16.4922h1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#0c0c0c" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m10.7773 16.4922-1.22267-1e-6v1.01563h1.22267z" fill="url(#b)"/>
+  <path d="m12 17.5078-1.22267 1e-6v-1.01563h1.22267z" fill="url(#c)"/>
+</svg>
diff --git a/res/skins/LateNight/palemoon/style/fx_flow_vertical.svg b/res/skins/LateNight/palemoon/style/fx_flow_vertical.svg
new file mode 100644
index 0000000000..8c81f5dd6b
--- /dev/null
+++ b/res/skins/LateNight/palemoon/style/fx_flow_vertical.svg
@@ -0,0 +1,28 @@
+<svg width="90" height="154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="d">
+      <stop stop-color="#0c0c0c" offset="0"/>
+      <stop offset="1"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop stop-color="#363636" offset="0"/>
+      <stop stop-color="#313131" offset="1"/>
+    </linearGradient>
+    <linearGradient id="b" x1="9.3457" x2="9.3457" y1="17.5078" y2="16.4922" gradientTransform="rotate(90,0,45)" gradientUnits="userSpaceOnUse" xlink:href="#d"/>
+    <linearGradient id="c" x1="10.2456" x2="10.2456" y1="17.5078" y2="16.4922" gradientTransform="matrix(0 1 1 0 11 46.2227)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
+    <linearGradient id="f" x1="9.3457" x2="9.3457" y1="17.5078" y2="16.4922" gradientTransform="rotate(90,-26,71)" gradientUnits="userSpaceOnUse" xlink:href="#d"/>
+    <linearGradient id="e" x1="10.2456" x2="10.2456" y1="17.5078" y2="16.4922" gradientTransform="matrix(0 1 1 0 11 98.2227)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
+  </defs>
+  <path d="m45 47.4453-1e-6 -1.22267-16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#3b3b3b" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m45 46.2227v-1.22267l-16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m11 47.4453 1e-6 -1.22267 16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#383838" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m11 46.2227v-1.22267l16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#0c0c0c" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m28.5078 55.7773 1e-6 -1.22267h-1.01563v1.22267z" fill="url(#b)"/>
+  <path d="m27.4922 57-1e-6 -1.22267h1.01563v1.22267z" fill="url(#c)"/>
+  <path d="m45 99.4453-1e-6 -1.22267-16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#3b3b3b" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m45 98.2227v-1.22267l-16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m11 99.4453 1e-6 -1.22267 16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#383838" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m11 98.2227v-1.22267l16.4922 9.55466v1.22267z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#0c0c0c" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path d="m28.5078 107.777 1e-6 -1.22267h-1.01563v1.22267z" fill="url(#f)"/>
+  <path d="m27.4922 109-1e-6 -1.22267h1.01563v1.22267z" fill="url(#e)"/>
+</svg>
diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
index 8397c3fcd8..6a40378944 100644
--- a/res/skins/LateNight/style_classic.qss
+++ b/res/skins/LateNight/style_classic.qss
@@ -223,11 +223,12 @@ WSearchLineEdit,
   max-width: 0px;
   }
 
-  #FxSlotSeparatorV {
+  #FxFlowIndicatorCollapsed,
+  #FxMixerSeparatorCollapsed {
     min-width: 1px;
     max-width: 1px;
-    image: url(skin:/classic/style/fx_separator.svg) repeat center center;
     margin: 2px 1px;
+    background: url(skin:/classic/style/fx_separator.svg) no-repeat center center;
   }
   #FxSlotSeparatorH {
     min-height: 2px;
@@ -780,17 +781,12 @@ WLibrary {
   margin: 0px 1px;
 }
 
-#FxUnitControlsCollapsed #FxUnitLabel {
-  alignment: right;
-}
-#FxUnitControlsExpanded #FxUnitLabel {
-  alignment: left;
+#FxSlotsCollapsed #FxSlotContainer {
+  margin: 2px 7px 1px 5px;
 }
 
-#FxSlotsCollapsed #FxSlotContainer {
-  margin: 2px 0px 1px 0px;
-  padding-right: 0px;
-  padding-left: 0px;
+#FxSlotsExpanded #FxSlotControls {
+  margin: 1px 5px 1px 4px;
 }
 
 #FxMetaKnob {
@@ -819,6 +815,10 @@ WLibrary {
   margin: 2px 1px;
 }
 
+#FxFocusButtonBox {
+  margin-right: 3px;
+}
+
 WPushButton#FxSuperLinkButton,
 WPushButton#FxSuperLinkInvertButton {
   border-radius: 3px;
diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
index 4737569a5b..935abcbca4 100644
--- a/res/skins/LateNight/style_palemoon.qss
+++ b/res/skins/LateNight/style_palemoon.qss
@@ -247,7 +247,7 @@ WSearchLineEdit {
 }
 
 #FxParametersFocusBg {
-  border: 1px solid #1c1c1e;
+  border: 1px solid #257B82;
   background-color: rgba(0,0,1,50);
 }
 
@@ -281,7 +281,7 @@ WSearchLineEdit {
 #DeckRateSeparatorCompact,
 #MasterMixerSeparator,
 #MasterHeadphoneSeparator,
-#FxSlotSeparatorV,
+#FxMixerSeparatorCollapsed,
 #FxSlotSeparatorH,
 #SeparatorToolbar,
 #SkinSettingsSeparator {
@@ -290,14 +290,21 @@ WSearchLineEdit {
   }
   #DeckRateSeparator,
   #DeckRateSeparatorCompact,
-  #FxSlotSeparatorV,
+  #FxMixerSeparatorCollapsed,
   #SkinSettingsSeparator {
     min-width: 0px;
     max-width: 0px;
   }
+  #FxMixerSeparatorCollapsed {
+    margin-left: 3px;
+  }
+  #FxFlowIndicatorCollapsed {
+    min-width: 12px;
+    max-width: 12px;
+  }
   #DeckRateSeparator,
   #DeckRateSeparatorCompact,
-  #FxSlotSeparatorV,
+  #FxMixerSeparatorCollapsed,
   #FxSlotSeparatorH {
     border-left: 1px solid #0c0c0c;
     border-right: 1px solid #333;
@@ -311,8 +318,9 @@ WSearchLineEdit {
     border-bottom: 1px solid #333;
   }
 
-  #FxSlotSeparatorV {
-    margin: 0px 0px 0px 2px;
+  #FxFlowIndicatorCollapsed {
+    margin: 0px 0px 0px 0px;
+    background-image: url(skin:/palemoon/style/fx_flow_horizontal.svg) no-repeat center center;
   }
   #ToolbarSeparator {
     margin: 0px 5px;
@@ -855,6 +863,7 @@ WBeatSpinBox::down-button,
   border-right: 0px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
+  background: #1e1e20 url(skin:/palemoon/style/fx_flow_vertical.svg) no-repeat center right;
   }
   #FxSlot1,
   #FxSlot2,
@@ -871,8 +880,14 @@ WBeatSpinBox::down-button,
   padding: 5px 0px 2px 0px;
 }
 
-#FxSlotsCollapsed #FxSlotContainer {
-  margin: 2px 0px 1px 1px;
+#FxSlotsCollapsed #FxSlotControls {
+  padding: 2px 3px 1px 3px;
+}
+
+#FxSlotsExpanded #FxSlotControls {
+/* keep height of fx slot with/without effect */
+  min-height: 47px;
+  padding: 2px 7px 1px 3px;
 }
 
 WEffectSelector:!editable,
@@ -919,6 +934,10 @@ WEffectSelector:!editable:on {
     border: 0; */
   }
 
+#FxFocusButtonBox {
+  margin-right: 3px;
+}
+
 WPushButton#FxSuperLinkButton,
 WPushButton#FxSuperLinkInvertButton {
   border-radius: 3px;
@@ -2118,15 +2137,21 @@ WPushButton#PlayDeck[value="0"] {
     image: url(skin:/palemoon/buttons/btn__split_active.svg) no-repeat center center;
   }
 
+#FxExpand,
+#SamplerExpand,
+#LibExpand {
+  background-repeat: no-repeat;
+  background-position: center center;
+}
 #FxExpand[value="0"],
 #SamplerExpand[value="0"],
 #LibExpand[value="0"] {
-  image: url(skin:/palemoon/buttons/btn__expand_dim.svg) no-repeat center center;
+  background: url(skin:/palemoon/buttons/btn__expand_dim.svg) no-repeat center center;
   }
   #FxExpand[value="1"],
   #SamplerExpand[value="1"],
   #LibExpand[value="1"] {
-    image: url(skin:/palemoon/buttons/btn__collapse_dim.svg) no-repeat center center;
+    background: url(skin:/palemoon/buttons/btn__collapse_dim.svg) no-repeat center center;
   }
 
 #MixModeButton[value="0"] {