From 142f8297b5a55eb87e2b80283ccee90e9966fb53 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Fri, 2 Nov 2018 19:20:09 +0100
Subject: [PATCH 1/3] repair [Channel2] xFader orientation button

---
 res/skins/LateNight/mixer.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/skins/LateNight/mixer.xml b/res/skins/LateNight/mixer.xml
index f703f5f4089..cbeb9b2f54a 100644
--- a/res/skins/LateNight/mixer.xml
+++ b/res/skins/LateNight/mixer.xml
@@ -246,6 +246,7 @@
 
                           <PushButton>
                             <TooltipId>orientation</TooltipId>
+                            <Size>34f,15f</Size>
                             <NumberStates>3</NumberStates>
                             <State>
                               <Number>0</Number>

From ac558453696fa2d788e06b308205aeb37f864282 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Sat, 3 Nov 2018 18:11:27 +0100
Subject: [PATCH 2/3] deck xFader orientation: use button templates

---
 res/skins/LateNight/mixer.xml                | 64 +++++---------------
 res/skins/LateNight/mixer_channel_4decks.xml | 31 +++-------
 2 files changed, 24 insertions(+), 71 deletions(-)

diff --git a/res/skins/LateNight/mixer.xml b/res/skins/LateNight/mixer.xml
index cbeb9b2f54a..c5299dcdfe1 100644
--- a/res/skins/LateNight/mixer.xml
+++ b/res/skins/LateNight/mixer.xml
@@ -169,30 +169,14 @@
                         <SizePolicy>min,me</SizePolicy>
                         <Children>
 
-                          <PushButton>
-                            <Size>34f,15f</Size>
-                            <TooltipId>orientation</TooltipId>
-                            <NumberStates>3</NumberStates>
-                            <State>
-                              <Number>0</Number>
-                              <Pressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckLeft_left.svg</Pressed>
-                              <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckLeft_left.svg</Unpressed>
-                            </State>
-                            <State>
-                              <Number>1</Number>
-                              <Pressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deck_master.svg</Pressed>
-                              <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deck_master.svg</Unpressed>
-                            </State>
-                            <State>
-                              <Number>2</Number>
-                              <Pressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckLeft_right.svg</Pressed>
-                              <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckLeft_right.svg</Unpressed>
-                            </State>
-                            <Connection>
-                              <ConfigKey>[Channel1],orientation</ConfigKey>
-                              <ButtonState>LeftButton</ButtonState>
-                            </Connection>
-                          </PushButton>
+                          <Template src="skin:button_3state.xml">
+                            <SetVariable name="TooltipId">orientation</SetVariable>
+                            <SetVariable name="Size">34f,15f</SetVariable>
+                            <SetVariable name="state_0">orientation_deckLeft_left</SetVariable>
+                            <SetVariable name="state_1">orientation_deck_master</SetVariable>
+                            <SetVariable name="state_2">orientation_deckLeft_right</SetVariable>
+                            <SetVariable name="ConfigKey">[Channel1],orientation</SetVariable>
+                          </Template>
 
                           <WidgetGroup><Size>min,me</Size></WidgetGroup>
                         </Children>
@@ -244,30 +228,14 @@
                         <SizePolicy>min,me</SizePolicy>
                         <Children>
 
-                          <PushButton>
-                            <TooltipId>orientation</TooltipId>
-                            <Size>34f,15f</Size>
-                            <NumberStates>3</NumberStates>
-                            <State>
-                              <Number>0</Number>
-                              <Pressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckRight_left.svg</Pressed>
-                              <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckRight_left.svg</Unpressed>
-                            </State>
-                            <State>
-                              <Number>1</Number>
-                              <Pressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deck_master.svg</Pressed>
-                              <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deck_master.svg</Unpressed>
-                            </State>
-                            <State>
-                              <Number>2</Number>
-                              <Pressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckRight_right.svg</Pressed>
-                              <Unpressed scalemode="STRETCH_ASPECT">buttons/btn_orientation_deckRight_right.svg</Unpressed>
-                            </State>
-                            <Connection>
-                              <ConfigKey>[Channel2],orientation</ConfigKey>
-                              <ButtonState>LeftButton</ButtonState>
-                            </Connection>
-                          </PushButton>
+                          <Template src="skin:button_3state.xml">
+                            <SetVariable name="TooltipId">orientation</SetVariable>
+                            <SetVariable name="Size">34f,15f</SetVariable>
+                            <SetVariable name="state_0">orientation_deckRight_left</SetVariable>
+                            <SetVariable name="state_1">orientation_deck_master</SetVariable>
+                            <SetVariable name="state_2">orientation_deckRight_right</SetVariable>
+                            <SetVariable name="ConfigKey">[Channel2],orientation</SetVariable>
+                          </Template>
 
                           <WidgetGroup><Size>min,me</Size></WidgetGroup>
                         </Children>
diff --git a/res/skins/LateNight/mixer_channel_4decks.xml b/res/skins/LateNight/mixer_channel_4decks.xml
index 5b5f31c5675..14ebaed6fe3 100644
--- a/res/skins/LateNight/mixer_channel_4decks.xml
+++ b/res/skins/LateNight/mixer_channel_4decks.xml
@@ -65,29 +65,14 @@
         <Layout>vertical</Layout>
         <SizePolicy>min,min</SizePolicy>
         <Children>
-          <PushButton>
-            <TooltipId>orientation</TooltipId>
-            <NumberStates>3</NumberStates>
-            <State>
-              <Number>0</Number>
-              <Pressed>buttons/btn_orientation_deck<Variable name="deckSide"/>_left.svg</Pressed>
-              <Unpressed>buttons/btn_orientation_deck<Variable name="deckSide"/>_left.svg</Unpressed>
-            </State>
-            <State>
-              <Number>1</Number>
-              <Pressed>buttons/btn_orientation_deck_master.svg</Pressed>
-              <Unpressed>buttons/btn_orientation_deck_master.svg</Unpressed>
-            </State>
-            <State>
-              <Number>2</Number>
-              <Pressed>buttons/btn_orientation_deck<Variable name="deckSide"/>_right.svg</Pressed>
-              <Unpressed>buttons/btn_orientation_deck<Variable name="deckSide"/>_right.svg</Unpressed>
-            </State>
-            <Connection>
-              <ConfigKey><Variable name="group"/>,orientation</ConfigKey>
-              <ButtonState>LeftButton</ButtonState>
-            </Connection>
-          </PushButton>
+          <Template src="skin:button_3state.xml">
+            <SetVariable name="TooltipId">orientation</SetVariable>
+            <SetVariable name="Size">34f,15f</SetVariable>
+            <SetVariable name="state_0">orientation_deck<Variable name="deckSide"/>_left</SetVariable>
+            <SetVariable name="state_1">orientation_deck_master</SetVariable>
+            <SetVariable name="state_2">orientation_deck<Variable name="deckSide"/>_right</SetVariable>
+            <SetVariable name="ConfigKey"><Variable name="group"/>,orientation</SetVariable>
+          </Template>
         </Children>
       </WidgetGroup>
 

From 931728f874c5059fbf5694e7818870471c71d2dc Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Sat, 3 Nov 2018 18:13:35 +0100
Subject: [PATCH 3/3] LateNight: use button templates (almost) everywhere, fix
 blurred beatgrid icons

---
 res/skins/LateNight/aux_unit.xml              | 219 ++++++------------
 res/skins/LateNight/button_2state_persist.xml |  41 ++++
 res/skins/LateNight/button_3state.xml         |  49 ++++
 res/skins/LateNight/button_3state_persist.xml |  48 ++++
 .../LateNight/buttons/btn_quickEffect.svg     |   1 +
 .../buttons/btn_quickEffect_down.svg          |   1 +
 res/skins/LateNight/deck_row_1_keyVinylFx.xml | 134 ++++-------
 res/skins/LateNight/mic_aux_rack.xml          |  40 +---
 res/skins/LateNight/mic_unit.xml              | 212 +++++------------
 .../LateNight/mixer_master_headphone.xml      | 132 ++++-------
 .../LateNight/quick_effect_knob_4decks.xml    |  25 +-
 .../LateNight/quick_effect_knob_left.xml      |  25 +-
 .../LateNight/quick_effect_knob_right.xml     |  25 +-
 res/skins/LateNight/rate_controls.xml         | 101 +++-----
 res/skins/LateNight/toolbar.xml               | 129 ++++-------
 res/skins/LateNight/vinyl_controls.xml        | 126 +++-------
 res/skins/LateNight/waveform.xml              | 123 +++++-----
 res/skins/LateNight/waveforms.xml             |  19 +-
 18 files changed, 561 insertions(+), 889 deletions(-)
 create mode 100644 res/skins/LateNight/button_2state_persist.xml
 create mode 100644 res/skins/LateNight/button_3state.xml
 create mode 100644 res/skins/LateNight/button_3state_persist.xml
 create mode 100644 res/skins/LateNight/buttons/btn_quickEffect.svg
 create mode 100644 res/skins/LateNight/buttons/btn_quickEffect_down.svg

diff --git a/res/skins/LateNight/aux_unit.xml b/res/skins/LateNight/aux_unit.xml
index d005452e299..c2030b0adad 100644
--- a/res/skins/LateNight/aux_unit.xml
+++ b/res/skins/LateNight/aux_unit.xml
@@ -60,29 +60,14 @@
                 <Layout>vertical</Layout>
                 <SizePolicy>min,max</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <TooltipId>orientation</TooltipId>
-                    <NumberStates>3</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_orientation_aux_left.svg</Pressed>
-                      <Unpressed>buttons/btn_orientation_aux_left.svg</Unpressed>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Pressed>buttons/btn_orientation_aux_master.svg</Pressed>
-                      <Unpressed>buttons/btn_orientation_aux_master.svg</Unpressed>
-                    </State>
-                    <State>
-                      <Number>2</Number>
-                      <Pressed>buttons/btn_orientation_aux_right.svg</Pressed>
-                      <Unpressed>buttons/btn_orientation_aux_right.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,orientation</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_3state.xml">
+                    <SetVariable name="TooltipId">mute</SetVariable>
+                    <SetVariable name="Size">34f,15f</SetVariable>
+                    <SetVariable name="state_0">orientation_aux_left</SetVariable>
+                    <SetVariable name="state_1">orientation_aux_master</SetVariable>
+                    <SetVariable name="state_2">orientation_aux_right</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,orientation</SetVariable>
+                  </Template>
                 </Children>
               </WidgetGroup>
 
@@ -145,24 +130,12 @@
                     </Children>
                   </WidgetGroup>
 
-                  <PushButton>
-                    <TooltipId>pfl</TooltipId>
-                    <ObjectName>MicPflButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_pfl_down.svg</Pressed>
-                      <Unpressed>buttons/btn_pfl.svg</Unpressed>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Pressed>buttons/btn_pfl_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_pfl_over.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,pfl</ConfigKey>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">pfl</SetVariable>
+                    <SetVariable name="icon">pfl</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,pfl</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
+                  </Template>
 
                 </Children>
               </WidgetGroup><!-- /Gain, Pfl -->
@@ -172,43 +145,23 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>min,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>35f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>35f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;2</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;2</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35f,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35f,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;2</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;2</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey persist="true">[Master],show_4effectunits</ConfigKey>
@@ -222,81 +175,41 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>min,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>30f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>20f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>2</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>2</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>20f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>3</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>3</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit3],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>20f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>4</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>4</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit4],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">30f,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">20f,22f</SetVariable>
+                    <SetVariable name="state_0_text">2</SetVariable>
+                    <SetVariable name="state_1_text">2</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">20f,22f</SetVariable>
+                    <SetVariable name="state_0_text">3</SetVariable>
+                    <SetVariable name="state_1_text">3</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit3],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">20f,22f</SetVariable>
+                    <SetVariable name="state_0_text">4</SetVariable>
+                    <SetVariable name="state_1_text">4</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit4],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey persist="true">[Master],show_4effectunits</ConfigKey>
diff --git a/res/skins/LateNight/button_2state_persist.xml b/res/skins/LateNight/button_2state_persist.xml
new file mode 100644
index 00000000000..604ab0e897c
--- /dev/null
+++ b/res/skins/LateNight/button_2state_persist.xml
@@ -0,0 +1,41 @@
+<!--
+Description:
+  A button that has click or display controls.
+Variables:
+  ObjectName        : object name
+  ToolTipID         : standard Tooltip from mixxx db
+    see: https://github.com/mixxxdj/mixxx/blob/master/src/skin/TooltipIds.cpp
+  Size              : button size
+  state_X_text      : label text for state X
+  state_X_pressed   : background graphic for pressed state X
+  state_X_unpressed : background graphic for unpressed state X
+  Align             : alignment of text
+  ConfigKey         : left-click control
+-->
+<Template>
+  <PushButton>
+    <TooltipId><Variable name="TooltipId"/></TooltipId>
+    <ObjectName><Variable name="ObjectName"/></ObjectName>
+    <Size><Variable name="Size"/></Size>
+    <NumberStates>2</NumberStates>
+    <RightClickIsPushButton>false</RightClickIsPushButton>
+    <State>
+      <Number>0</Number>
+      <Text><Variable name="state_0_text"/></Text>
+      <Alignment><Variable name="Align"/></Alignment>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="icon"/>_down.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="icon"/>.svg</Unpressed>
+    </State>
+    <State>
+      <Number>1</Number>
+      <Text><Variable name="state_1_text"/></Text>
+      <Alignment><Variable name="Align"/></Alignment>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="icon"/>_overdown.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="icon"/>_over.svg</Unpressed>
+    </State>
+    <Connection>
+      <ConfigKey persist="true"><Variable name="ConfigKey"/></ConfigKey>
+      <ButtonState>LeftButton</ButtonState>
+    </Connection>
+  </PushButton>
+</Template>
diff --git a/res/skins/LateNight/button_3state.xml b/res/skins/LateNight/button_3state.xml
new file mode 100644
index 00000000000..2448b8143c7
--- /dev/null
+++ b/res/skins/LateNight/button_3state.xml
@@ -0,0 +1,49 @@
+<!--
+Description:
+  A button that has click or display controls.
+Variables:
+  ObjectName        : object name
+  ToolTipID         : standard Tooltip from mixxx db
+    see: https://github.com/mixxxdj/mixxx/blob/master/src/skin/TooltipIds.cpp
+  Size              : button size
+  state_X_text      : label text for state X
+  state_X_pressed   : background graphic for pressed state X
+  state_X_unpressed : background graphic for unpressed state X
+  Align             : alignment of text
+  ConfigKey         : left-click control
+  ConfigKeyDisp     : display control
+-->
+<Template>
+  <PushButton>
+    <TooltipId><Variable name="TooltipId"/></TooltipId>
+    <ObjectName><Variable name="ObjectName"/></ObjectName>
+    <Size><Variable name="Size"/></Size>
+    <NumberStates>3</NumberStates>
+    <State>
+      <Number>0</Number>
+      <Text><Variable name="state_0_text"/></Text>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_0"/>.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_0"/>.svg</Unpressed>
+      <Alignment><Variable name="Align"/></Alignment>
+    </State>
+    <State>
+      <Number>1</Number>
+      <Text><Variable name="state_1_text"/></Text>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_1"/>.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_1"/>.svg</Unpressed>
+      <Alignment><Variable name="Align"/></Alignment>
+    </State>
+    <State>
+      <Number>2</Number>
+      <Text><Variable name="state_2_text"/></Text>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_2"/>.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_2"/>.svg</Unpressed>
+      <Alignment><Variable name="Align"/></Alignment>
+    </State>
+    <Connection>
+      <ConfigKey><Variable name="ConfigKey"/></ConfigKey>
+      <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
+      <ButtonState>LeftButton</ButtonState>
+    </Connection>
+  </PushButton>
+</Template>
diff --git a/res/skins/LateNight/button_3state_persist.xml b/res/skins/LateNight/button_3state_persist.xml
new file mode 100644
index 00000000000..2e234d31797
--- /dev/null
+++ b/res/skins/LateNight/button_3state_persist.xml
@@ -0,0 +1,48 @@
+<!--
+Description:
+  A button that has click or display controls.
+Variables:
+  ObjectName        : object name
+  ToolTipID         : standard Tooltip from mixxx db
+    see: https://github.com/mixxxdj/mixxx/blob/master/src/skin/TooltipIds.cpp
+  Size              : button size
+  state_X_text      : label text for state X
+  state_X_pressed   : background graphic for pressed state X
+  state_X_unpressed : background graphic for unpressed state X
+  Align             : alignment of text
+  ConfigKey         : left-click control
+  ConfigKeyDisp     : display control
+-->
+<Template>
+  <PushButton>
+    <TooltipId><Variable name="TooltipId"/></TooltipId>
+    <ObjectName><Variable name="ObjectName"/></ObjectName>
+    <Size><Variable name="Size"/></Size>
+    <NumberStates>3</NumberStates>
+    <State>
+      <Number>0</Number>
+      <Text><Variable name="state_0_text"/></Text>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_0"/>.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_0"/>.svg</Unpressed>
+      <Alignment><Variable name="Align"/></Alignment>
+    </State>
+    <State>
+      <Number>1</Number>
+      <Text><Variable name="state_1_text"/></Text>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_1"/>.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_1"/>.svg</Unpressed>
+      <Alignment><Variable name="Align"/></Alignment>
+    </State>
+    <State>
+      <Number>2</Number>
+      <Text><Variable name="state_2_text"/></Text>
+      <Pressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_2"/>.svg</Pressed>
+      <Unpressed scalemode="STRETCH_ASPECT">skin:/buttons/btn_<Variable name="state_2"/>.svg</Unpressed>
+      <Alignment><Variable name="Align"/></Alignment>
+    </State>
+    <Connection>
+      <ConfigKey persist="true"><Variable name="ConfigKey"/></ConfigKey>
+      <ButtonState>LeftButton</ButtonState>
+    </Connection>
+  </PushButton>
+</Template>
diff --git a/res/skins/LateNight/buttons/btn_quickEffect.svg b/res/skins/LateNight/buttons/btn_quickEffect.svg
new file mode 100644
index 00000000000..2fb3fac4f69
--- /dev/null
+++ b/res/skins/LateNight/buttons/btn_quickEffect.svg
@@ -0,0 +1 @@
+<svg id="svg3249" width="18" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs id="defs3251"><linearGradient id="linearGradient3807-3" x1="13" x2="13" y1="1027.4" y2="1049.4" gradientTransform="matrix(.56522 0 0 .56522 2.2174 456.46)" gradientUnits="userSpaceOnUse"><stop id="stop3803-7" stop-color="#242424" offset="0"/><stop id="stop3805-5" stop-color="#101010" offset="1"/></linearGradient></defs><g id="layer1" transform="translate(0 -1034.4)"><rect id="rect3029-6" x="4" y="1038.4" width="14" height="14" rx="1" ry="1" color="#000000" fill="#060606" opacity=".62085"/><rect id="rect3029-6-6" x="3" y="1037.4" width="14" height="14" color="#000000" opacity=".72"/><rect id="rect3029" x="2.5" y="1036.9" width="13" height="13" color="#000000" fill="url(#linearGradient3807-3)" stroke="#585858"/></g></svg>
diff --git a/res/skins/LateNight/buttons/btn_quickEffect_down.svg b/res/skins/LateNight/buttons/btn_quickEffect_down.svg
new file mode 100644
index 00000000000..2f53f316f00
--- /dev/null
+++ b/res/skins/LateNight/buttons/btn_quickEffect_down.svg
@@ -0,0 +1 @@
+<svg id="svg3249" width="18" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs id="defs3251"><linearGradient id="linearGradient3807-3" x1="13" x2="13" y1="1027.4" y2="1049.4" gradientTransform="matrix(.56522 0 0 .56522 2.2174 -1630.3)" gradientUnits="userSpaceOnUse"><stop id="stop3803-7-6" stop-color="#222" offset="0"/><stop id="stop3805-5-2" stop-color="#131516" offset="1"/></linearGradient></defs><g id="layer1" transform="translate(0 -1034.4)"><rect id="rect3029" transform="scale(1,-1)" x="2.5" y="-1049.9" width="13" height="13" color="#000000" fill="url(#linearGradient3807-3)" stroke="#585858"/></g></svg>
diff --git a/res/skins/LateNight/deck_row_1_keyVinylFx.xml b/res/skins/LateNight/deck_row_1_keyVinylFx.xml
index 19fb4f21cd2..959e914850a 100644
--- a/res/skins/LateNight/deck_row_1_keyVinylFx.xml
+++ b/res/skins/LateNight/deck_row_1_keyVinylFx.xml
@@ -62,97 +62,57 @@
 
       <WidgetGroup>
         <Layout>horizontal</Layout>
-          <ObjectName>AlignRightTop</ObjectName>
-           <Children>
+        <ObjectName>AlignRightTop</ObjectName>
+          <Children>
 
-            <!-- FX buttons 1-4 -->
-            <PushButton>
-              <Size>28f,22f</Size>
-              <TooltipId>EffectUnit_deck_enabled</TooltipId>
-              <ObjectName>FxAssignButton</ObjectName>
-              <NumberStates>2</NumberStates>
-              <State>
-                <Number>0</Number>
-                <Text>FX&#8202;1</Text>
-              </State>
-              <State>
-                <Number>1</Number>
-                <Text>FX&#8202;1</Text>
-              </State>
-              <Connection>
-                <ConfigKey>[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</ConfigKey>
-                <ButtonState>LeftButton</ButtonState>
-              </Connection>
-            </PushButton>
+          <!-- FX buttons 1-4 -->
+          <Template src="skin:button_2state.xml">
+            <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+            <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+            <SetVariable name="Size">28f,22f</SetVariable>
+            <SetVariable name="state_0_text">FX&#8202;1</SetVariable>
+            <SetVariable name="state_1_text">FX&#8202;1</SetVariable>
+            <SetVariable name="ConfigKey">[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</SetVariable>
+          </Template>
 
-            <PushButton>
-              <Size>28f,22f</Size>
-              <TooltipId>EffectUnit_deck_enabled</TooltipId>
-              <ObjectName>FxAssignButton</ObjectName>
-              <NumberStates>2</NumberStates>
-              <State>
-                <Number>0</Number>
-                <Text>FX&#8202;2</Text>
-              </State>
-              <State>
-                <Number>1</Number>
-                <Text>FX&#8202;2</Text>
-              </State>
-              <Connection>
-                <ConfigKey>[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</ConfigKey>
-                <ButtonState>LeftButton</ButtonState>
-              </Connection>
-            </PushButton>
+          <Template src="skin:button_2state.xml">
+            <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+            <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+            <SetVariable name="Size">28f,22f</SetVariable>
+            <SetVariable name="state_0_text">FX&#8202;2</SetVariable>
+            <SetVariable name="state_1_text">FX&#8202;2</SetVariable>
+            <SetVariable name="ConfigKey">[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</SetVariable>
+          </Template>
 
-            <WidgetGroup>
-              <Layout>horizontal</Layout>
-              <Connection>
-                <ConfigKey>[Master],show_4effectunits</ConfigKey>
-                <BindProperty>visible</BindProperty>
-              </Connection>
-              <Children>
-                <PushButton>
-                  <Size>28f,22f</Size>
-                  <TooltipId>EffectUnit_deck_enabled</TooltipId>
-                  <ObjectName>FxAssignButton</ObjectName>
-                  <NumberStates>2</NumberStates>
-                  <State>
-                    <Number>0</Number>
-                    <Text>FX&#8202;3</Text>
-                  </State>
-                  <State>
-                    <Number>1</Number>
-                    <Text>FX&#8202;3</Text>
-                  </State>
-                  <Connection>
-                    <ConfigKey>[EffectRack1_EffectUnit3],group_<Variable name="group"/>_enable</ConfigKey>
-                    <ButtonState>LeftButton</ButtonState>
-                  </Connection>
-                </PushButton>
+          <WidgetGroup>
+            <Layout>horizontal</Layout>
+            <Connection>
+              <ConfigKey>[Master],show_4effectunits</ConfigKey>
+              <BindProperty>visible</BindProperty>
+            </Connection>
+            <Children>
+              <Template src="skin:button_2state.xml">
+                <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                <SetVariable name="Size">28f,22f</SetVariable>
+                <SetVariable name="state_0_text">FX&#8202;3</SetVariable>
+                <SetVariable name="state_1_text">FX&#8202;3</SetVariable>
+                <SetVariable name="ConfigKey">[EffectRack1_EffectUnit3],group_<Variable name="group"/>_enable</SetVariable>
+              </Template>
 
-                <PushButton>
-                  <Size>28f,22f</Size>
-                  <TooltipId>EffectUnit_deck_enabled</TooltipId>
-                  <ObjectName>FxAssignButton</ObjectName>
-                  <NumberStates>2</NumberStates>
-                  <State>
-                    <Number>0</Number>
-                    <Text>FX&#8202;4</Text>
-                  </State>
-                  <State>
-                    <Number>1</Number>
-                    <Text>FX&#8202;4</Text>
-                  </State>
-                  <Connection>
-                    <ConfigKey>[EffectRack1_EffectUnit4],group_<Variable name="group"/>_enable</ConfigKey>
-                    <ButtonState>LeftButton</ButtonState>
-                  </Connection>
-                </PushButton>
-              </Children>
-            </WidgetGroup>
-            <!-- /FX buttons 1-4 -->
-      </Children>
-     </WidgetGroup>
+              <Template src="skin:button_2state.xml">
+                <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                <SetVariable name="Size">28f,22f</SetVariable>
+                <SetVariable name="state_0_text">FX&#8202;4</SetVariable>
+                <SetVariable name="state_1_text">FX&#8202;4</SetVariable>
+                <SetVariable name="ConfigKey">[EffectRack1_EffectUnit4],group_<Variable name="group"/>_enable</SetVariable>
+              </Template>
+            </Children>
+          </WidgetGroup>
+          <!-- /FX buttons 1-4 -->
+        </Children>
+      </WidgetGroup>
     </Children>
   </WidgetGroup>
 </Template>
diff --git a/res/skins/LateNight/mic_aux_rack.xml b/res/skins/LateNight/mic_aux_rack.xml
index e03cddd78fe..3fcf63e40c5 100644
--- a/res/skins/LateNight/mic_aux_rack.xml
+++ b/res/skins/LateNight/mic_aux_rack.xml
@@ -55,34 +55,18 @@
                 <Layout>vertical</Layout>
                 <SizePolicy>min,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <!--Size>65f,28f</Size-->
-                    <ObjectName>MicDuckingButton</ObjectName>
-                    <TooltipId>talkover_duck_mode</TooltipId>
-                    <NumberStates>3</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_micDuck.svg</Pressed>
-                      <Unpressed>buttons/btn_micDuck.svg</Unpressed>
-                      <Text>OFF</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Pressed>buttons/btn_micDuck_over.svg</Pressed>
-                      <Unpressed>buttons/btn_micDuck_over.svg</Unpressed>
-                      <Text>AUTO</Text>
-                    </State>
-                    <State>
-                      <Number>2</Number>
-                      <Pressed>buttons/btn_micDuck_over.svg</Pressed>
-                      <Unpressed>buttons/btn_micDuck_over.svg</Unpressed>
-                      <Text>MANUAL</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[Master],talkoverDucking</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_3state.xml">
+                    <SetVariable name="TooltipId">talkover_duck_mode</SetVariable>
+                    <SetVariable name="ObjectName">MicDuckingButton</SetVariable>
+                    <SetVariable name="Size">62f,28f</SetVariable>
+                    <SetVariable name="state_0">micDuck</SetVariable>
+                    <SetVariable name="state_0_text">OFF</SetVariable>
+                    <SetVariable name="state_1">micDuck_over</SetVariable>
+                    <SetVariable name="state_1_text">AUTO</SetVariable>
+                    <SetVariable name="state_2">micDuck_over</SetVariable>
+                    <SetVariable name="state_2_text">MANUAL</SetVariable>
+                    <SetVariable name="ConfigKey">[Master],talkoverDucking</SetVariable>
+                  </Template>
 
                   <WidgetGroup>
                     <ObjectName>MicDuckingStrengthKnob</ObjectName>
diff --git a/res/skins/LateNight/mic_unit.xml b/res/skins/LateNight/mic_unit.xml
index 64574042d55..d8630d01811 100644
--- a/res/skins/LateNight/mic_unit.xml
+++ b/res/skins/LateNight/mic_unit.xml
@@ -36,24 +36,12 @@
                 <Layout>vertical</Layout>
                 <SizePolicy>min,max</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <TooltipId>microphone_talkover</TooltipId>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_microphone_talkover_down.svg</Pressed>
-                      <Unpressed>buttons/btn_microphone_talkover.svg</Unpressed>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Pressed>buttons/btn_microphone_talkover_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_microphone_talkover_over.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,talkover</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">microphone_talkover</SetVariable>
+                    <SetVariable name="Size">44f,26f</SetVariable>
+                    <SetVariable name="icon">microphone_talkover</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,talkover</SetVariable>
+                  </Template>
                 </Children>
               </WidgetGroup><!-- /TALK -->
 
@@ -120,24 +108,12 @@
                     </Children>
                   </WidgetGroup>
 
-                  <PushButton>
-                    <TooltipId>pfl</TooltipId>
-                    <ObjectName>MicPflButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_pfl_down.svg</Pressed>
-                      <Unpressed>buttons/btn_pfl.svg</Unpressed>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Pressed>buttons/btn_pfl_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_pfl_over.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,pfl</ConfigKey>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">pfl</SetVariable>
+                    <SetVariable name="icon">pfl</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,pfl</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
+                  </Template>
 
                 </Children>
               </WidgetGroup><!-- /Gain, Pfl -->
@@ -147,43 +123,23 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>min,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>35f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>35f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;2</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;2</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35f,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35f,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;2</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;2</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey persist="true">[Master],show_4effectunits</ConfigKey>
@@ -197,81 +153,41 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>min,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>30f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>20f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>2</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>2</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>20f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>3</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>3</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit3],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
-
-                  <PushButton>
-                    <Size>20f,22f</Size>
-                    <TooltipId>EffectUnit_auxiliary_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>4</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>4</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit4],group_<Variable name="group"/>_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">30f,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit1],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">20f,22f</SetVariable>
+                    <SetVariable name="state_0_text">2</SetVariable>
+                    <SetVariable name="state_1_text">2</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit2],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">20f,22f</SetVariable>
+                    <SetVariable name="state_0_text">3</SetVariable>
+                    <SetVariable name="state_1_text">3</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit3],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
+
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_auxiliary_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">20f,22f</SetVariable>
+                    <SetVariable name="state_0_text">4</SetVariable>
+                    <SetVariable name="state_1_text">4</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit4],group_<Variable name="group"/>_enable</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey persist="true">[Master],show_4effectunits</ConfigKey>
diff --git a/res/skins/LateNight/mixer_master_headphone.xml b/res/skins/LateNight/mixer_master_headphone.xml
index db62a35b26a..d47315b7c0b 100644
--- a/res/skins/LateNight/mixer_master_headphone.xml
+++ b/res/skins/LateNight/mixer_master_headphone.xml
@@ -82,43 +82,23 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>me,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>35me,22f</Size>
-                    <TooltipId>EffectUnit_master_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;1</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit1],group_[Master]_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_master_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35me,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;1</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit1],group_[Master]_enable</SetVariable>
+                  </Template>
 
-                  <PushButton>
-                    <Size>35me,22f</Size>
-                    <TooltipId>EffectUnit_master_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;2</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;2</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit2],group_[Master]_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_master_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35me,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;2</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;2</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit2],group_[Master]_enable</SetVariable>
+                  </Template>
                 </Children>
               </WidgetGroup><!-- /FX buttons 1/2 -->
 
@@ -127,43 +107,23 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>me,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>35me,22f</Size>
-                    <TooltipId>EffectUnit_master_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;3</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;3</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit3],group_[Master]_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_master_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35me,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;3</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;3</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit3],group_[Master]_enable</SetVariable>
+                  </Template>
 
-                  <PushButton>
-                    <Size>35me,22f</Size>
-                    <TooltipId>EffectUnit_master_enabled</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>FX&#8202;4</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>FX&#8202;4</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[EffectRack1_EffectUnit4],group_[Master]_enable</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">EffectUnit_master_enabled</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">35me,22f</SetVariable>
+                    <SetVariable name="state_0_text">FX&#8202;4</SetVariable>
+                    <SetVariable name="state_1_text">FX&#8202;4</SetVariable>
+                    <SetVariable name="ConfigKey">[EffectRack1_EffectUnit4],group_[Master]_enable</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey persist="true">[Master],show_4effectunits</ConfigKey>
@@ -345,30 +305,20 @@
                 <Layout>horizontal</Layout>
                 <SizePolicy>me,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <Size>68f,22f</Size>
-                    <TooltipId>headSplit</TooltipId>
-                    <ObjectName>FxAssignButton</ObjectName>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Text>Split Cue</Text>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Text>Split Cue</Text>
-                    </State>
-                    <Connection>
-                      <ConfigKey>[Master],headSplit</ConfigKey>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">headSplit</SetVariable>
+                    <SetVariable name="ObjectName">FxAssignButton</SetVariable>
+                    <SetVariable name="Size">68f,22f</SetVariable>
+                    <SetVariable name="state_0_text">Split Cue</SetVariable>
+                    <SetVariable name="state_1_text">Split Cue</SetVariable>
+                    <SetVariable name="ConfigKey">[Master],headSplit</SetVariable>
+                  </Template>
                 </Children>
               </WidgetGroup><!-- /HeadSplit button -->
 
             </Children>
-          </WidgetGroup><!-- /HeadphoneControls
+          </WidgetGroup><!-- /HeadphoneControls -->
 
-          <WidgetGroup><Size>0min,0me</Size></WidgetGroup> -->
         </Children>
       </WidgetGroup>
     </Children>
diff --git a/res/skins/LateNight/quick_effect_knob_4decks.xml b/res/skins/LateNight/quick_effect_knob_4decks.xml
index 45c61a1f412..89682c4f9f0 100644
--- a/res/skins/LateNight/quick_effect_knob_4decks.xml
+++ b/res/skins/LateNight/quick_effect_knob_4decks.xml
@@ -22,25 +22,12 @@
                 <Layout>horizontal</Layout>
                 <Size>22f,30min</Size>
                 <Children>
-                  <PushButton>
-                    <TooltipId>QuickEffectRack_enabled</TooltipId>
-                    <Size>18f,18f</Size>
-                    <NumberStates>2</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_eq_kill_down.svg</Pressed>
-                      <Unpressed>buttons/btn_eq_kill.svg</Unpressed>
-                    </State>
-                    <State>
-                      <Number>1</Number>
-                      <Pressed>buttons/btn_quickEffect_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_quickEffect_over.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="QuickEffect"/>,enabled</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_2state.xml">
+                    <SetVariable name="TooltipId">QuickEffectRack_enabled</SetVariable>
+                    <SetVariable name="icon">quickEffect</SetVariable>
+                    <SetVariable name="Size">18f,18f</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="QuickEffect"/>,enabled</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey>[Master],show_eq_kill_buttons</ConfigKey>
diff --git a/res/skins/LateNight/quick_effect_knob_left.xml b/res/skins/LateNight/quick_effect_knob_left.xml
index 4e82ed61691..a4f90b43bcb 100644
--- a/res/skins/LateNight/quick_effect_knob_left.xml
+++ b/res/skins/LateNight/quick_effect_knob_left.xml
@@ -18,25 +18,12 @@
             <SizePolicy>min,min</SizePolicy>
             <MinimumSize>22,30</MinimumSize>
             <Children>
-              <PushButton>
-                <TooltipId>QuickEffectRack_enabled</TooltipId>
-                <Size>18f,18f</Size>
-                <NumberStates>2</NumberStates>
-                <State>
-                  <Number>0</Number>
-                  <Pressed>buttons/btn_eq_kill_down.svg</Pressed>
-                  <Unpressed>buttons/btn_eq_kill.svg</Unpressed>
-                </State>
-                <State>
-                  <Number>1</Number>
-                  <Pressed>buttons/btn_quickEffect_overdown.svg</Pressed>
-                  <Unpressed>buttons/btn_quickEffect_over.svg</Unpressed>
-                </State>
-                <Connection>
-                  <ConfigKey><Variable name="QuickEffect"/>,enabled</ConfigKey>
-                  <ButtonState>LeftButton</ButtonState>
-                </Connection>
-              </PushButton>
+              <Template src="skin:button_2state.xml">
+                <SetVariable name="TooltipId">QuickEffectRack_enabled</SetVariable>
+                <SetVariable name="icon">quickEffect</SetVariable>
+                <SetVariable name="Size">18f,18f</SetVariable>
+                <SetVariable name="ConfigKey"><Variable name="QuickEffect"/>,enabled</SetVariable>
+              </Template>
             </Children>
             <Connection>
               <ConfigKey>[Master],show_eq_kill_buttons</ConfigKey>
diff --git a/res/skins/LateNight/quick_effect_knob_right.xml b/res/skins/LateNight/quick_effect_knob_right.xml
index 583752ac3ae..d1531e62d7a 100644
--- a/res/skins/LateNight/quick_effect_knob_right.xml
+++ b/res/skins/LateNight/quick_effect_knob_right.xml
@@ -31,25 +31,12 @@
             <SizePolicy>min,min</SizePolicy>
             <MinimumSize>22,30</MinimumSize>
             <Children>
-              <PushButton>
-                <TooltipId>QuickEffectRack_enabled</TooltipId>
-                <Size>18f,18f</Size>
-                <NumberStates>2</NumberStates>
-                <State>
-                  <Number>0</Number>
-                  <Pressed>buttons/btn_eq_kill_down.svg</Pressed>
-                  <Unpressed>buttons/btn_eq_kill.svg</Unpressed>
-                </State>
-                <State>
-                  <Number>1</Number>
-                  <Pressed>buttons/btn_quickEffect_overdown.svg</Pressed>
-                  <Unpressed>buttons/btn_quickEffect_over.svg</Unpressed>
-                </State>
-                <Connection>
-                  <ConfigKey><Variable name="QuickEffect"/>,enabled</ConfigKey>
-                  <ButtonState>LeftButton</ButtonState>
-                </Connection>
-              </PushButton>
+              <Template src="skin:button_2state.xml">
+                <SetVariable name="TooltipId">QuickEffectRack_enabled</SetVariable>
+                <SetVariable name="icon">quickEffect</SetVariable>
+                <SetVariable name="Size">18f,18f</SetVariable>
+                <SetVariable name="ConfigKey"><Variable name="QuickEffect"/>,enabled</SetVariable>
+              </Template>
             </Children>
             <Connection>
               <ConfigKey>[Master],show_eq_kill_buttons</ConfigKey>
diff --git a/res/skins/LateNight/rate_controls.xml b/res/skins/LateNight/rate_controls.xml
index bf233effa02..799458bac18 100644
--- a/res/skins/LateNight/rate_controls.xml
+++ b/res/skins/LateNight/rate_controls.xml
@@ -82,7 +82,6 @@
               <WidgetGroup><!-- Rate buttons for up=faster -->
                 <Layout>vertical</Layout>
                 <SizePolicy>min,min</SizePolicy>
-
                 <Children>
                   <Template src="skin:button_1state_right.xml">
                     <SetVariable name="TooltipId">rate_perm_up_rate_perm_up_small</SetVariable>
@@ -131,77 +130,41 @@
                 <Layout>vertical</Layout>
                 <SizePolicy>min,min</SizePolicy>
                 <Children>
-                  <PushButton>
-                    <TooltipId>rate_perm_down_rate_perm_down_small</TooltipId>
-                    <NumberStates>1</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_minus_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_minus.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_perm_down</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_perm_down_small</ConfigKey>
-                      <ButtonState>RightButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_1state_right.xml">
+                    <SetVariable name="TooltipId">rate_perm_down_rate_perm_down_small</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
+                    <SetVariable name="state_0_pressed">minus_overdown.svg</SetVariable>
+                    <SetVariable name="state_0_unpressed">minus.svg</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,rate_perm_down</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,rate_perm_down_small</SetVariable>
+                  </Template>
 
-                  <PushButton>
-                    <TooltipId>rate_temp_down_rate_temp_down_small</TooltipId>
-                    <NumberStates>1</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_arrow_left_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_arrow_left.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_temp_down</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_temp_down_small</ConfigKey>
-                      <ButtonState>RightButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_1state_right.xml">
+                    <SetVariable name="TooltipId">rate_temp_down_rate_temp_down_small</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
+                    <SetVariable name="state_0_pressed">arrow_left_overdown.svg</SetVariable>
+                    <SetVariable name="state_0_unpressed">arrow_left.svg</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,rate_temp_down</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,rate_temp_down_small</SetVariable>
+                  </Template>
 
-                  <PushButton>
-                    <TooltipId>rate_temp_up_rate_temp_up_small</TooltipId>
-                    <NumberStates>1</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_arrow_right_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_arrow_right.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_temp_up</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_temp_up_small</ConfigKey>
-                      <ButtonState>RightButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_1state_right.xml">
+                    <SetVariable name="TooltipId">rate_temp_up_rate_temp_up_small</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
+                    <SetVariable name="state_0_pressed">arrow_right_overdown.svg</SetVariable>
+                    <SetVariable name="state_0_unpressed">arrow_right.svg</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,rate_temp_up</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,rate_temp_up_small</SetVariable>
+                  </Template>
 
-                  <PushButton>
-                    <TooltipId>rate_perm_up_rate_perm_up_small</TooltipId>
-                    <NumberStates>1</NumberStates>
-                    <State>
-                      <Number>0</Number>
-                      <Pressed>buttons/btn_plus_overdown.svg</Pressed>
-                      <Unpressed>buttons/btn_plus.svg</Unpressed>
-                    </State>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_perm_up</ConfigKey>
-                      <ButtonState>LeftButton</ButtonState>
-                    </Connection>
-                    <Connection>
-                      <ConfigKey><Variable name="group"/>,rate_perm_up_small</ConfigKey>
-                      <ButtonState>RightButton</ButtonState>
-                    </Connection>
-                  </PushButton>
+                  <Template src="skin:button_1state_right.xml">
+                    <SetVariable name="TooltipId">rate_perm_up_rate_perm_up_small</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
+                    <SetVariable name="state_0_pressed">plus_overdown.svg</SetVariable>
+                    <SetVariable name="state_0_unpressed">plus.svg</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,rate_perm_up</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,rate_perm_up_small</SetVariable>
+                  </Template>
                 </Children>
                 <Connection>
                   <ConfigKey><Variable name="group"/>,rate_dir</ConfigKey>
diff --git a/res/skins/LateNight/toolbar.xml b/res/skins/LateNight/toolbar.xml
index 01aeff36520..e24a34a62e1 100644
--- a/res/skins/LateNight/toolbar.xml
+++ b/res/skins/LateNight/toolbar.xml
@@ -5,27 +5,14 @@
     <SizePolicy>e,min</SizePolicy>
     <Children>
 
-      <PushButton>
-        <Size>84f,24f</Size>
-        <TooltipId>maximize_library</TooltipId>
-        <ObjectName>GuiToggleButton</ObjectName>
-        <NumberStates>2</NumberStates>
-        <State>
-          <Number>0</Number>
-          <Text>BIG LIBRARY</Text>
-        </State>
-        <State>
-          <Number>1</Number>
-          <Text>BIG LIBRARY</Text>
-        </State>
-        <Connection>
-          <ConfigKey>[Master],maximize_library</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey>[Master],maximize_library</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:button_2state.xml">
+        <SetVariable name="TooltipId">maximize_library</SetVariable>
+        <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
+        <SetVariable name="Size">84f,24f</SetVariable>
+        <SetVariable name="state_0_text">BIG LIBRARY</SetVariable>
+        <SetVariable name="state_1_text">BIG LIBRARY</SetVariable>
+        <SetVariable name="ConfigKey">[Master],maximize_library</SetVariable>
+      </Template>
 
       <WidgetGroup>
         <SizePolicy>min,min</SizePolicy>
@@ -37,77 +24,41 @@
             <Size>13f,9min</Size>
           </WidgetGroup>
 
-          <PushButton>
-            <Size>48f,24f</Size>
-            <TooltipId>show_mixer</TooltipId>
-            <ObjectName>GuiToggleButton</ObjectName>
-            <NumberStates>2</NumberStates>
-            <State>
-              <Number>0</Number>
-              <Text>MIXER</Text>
-            </State>
-            <State>
-              <Number>1</Number>
-              <Text>MIXER</Text>
-            </State>
-            <Connection>
-              <ConfigKey persist="true">[Master],show_mixer</ConfigKey>
-            </Connection>
-          </PushButton>
+          <Template src="skin:button_2state_persist.xml">
+            <SetVariable name="TooltipId">show_mixer</SetVariable>
+            <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
+            <SetVariable name="Size">48f,24f</SetVariable>
+            <SetVariable name="state_0_text">MIXER</SetVariable>
+            <SetVariable name="state_1_text">MIXER</SetVariable>
+            <SetVariable name="ConfigKey">[Master],show_mixer</SetVariable>
+          </Template>
 
-          <PushButton>
-            <Size>59f,24f</Size>
-            <TooltipId>show_effects</TooltipId>
-            <ObjectName>GuiToggleButton</ObjectName>
-            <NumberStates>2</NumberStates>
-            <State>
-              <Number>0</Number>
-              <Text>EFFECTS</Text>
-            </State>
-            <State>
-              <Number>1</Number>
-              <Text>EFFECTS</Text>
-            </State>
-            <Connection>
-              <ConfigKey persist="true">[EffectRack1],show</ConfigKey>
-            </Connection>
-          </PushButton>
+          <Template src="skin:button_2state_persist.xml">
+            <SetVariable name="TooltipId">show_effects</SetVariable>
+            <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
+            <SetVariable name="Size">59f,24f</SetVariable>
+            <SetVariable name="state_0_text">EFFECTS</SetVariable>
+            <SetVariable name="state_1_text">EFFECTS</SetVariable>
+            <SetVariable name="ConfigKey">[EffectRack1],show</SetVariable>
+          </Template>
 
-          <PushButton>
-            <Size>61f,24f</Size>
-            <TooltipId>show_microphone</TooltipId>
-            <ObjectName>GuiToggleButton</ObjectName>
-            <NumberStates>2</NumberStates>
-            <State>
-              <Number>0</Number>
-              <Text>MIC/AUX</Text>
-            </State>
-            <State>
-              <Number>1</Number>
-              <Text>MIC/AUX</Text>
-            </State>
-            <Connection>
-              <ConfigKey persist="true">[Microphone],show_microphone</ConfigKey>
-            </Connection>
-          </PushButton>
+          <Template src="skin:button_2state_persist.xml">
+            <SetVariable name="TooltipId">show_microphone</SetVariable>
+            <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
+            <SetVariable name="Size">61f,24f</SetVariable>
+            <SetVariable name="state_0_text">MIC/AUX</SetVariable>
+            <SetVariable name="state_1_text">MIC/AUX</SetVariable>
+            <SetVariable name="ConfigKey">[Microphone],show_microphone</SetVariable>
+          </Template>
 
-          <PushButton>
-            <Size>71f,24f</Size>
-            <TooltipId>show_samplers</TooltipId>
-            <ObjectName>GuiToggleButton</ObjectName>
-            <NumberStates>2</NumberStates>
-            <State>
-              <Number>0</Number>
-              <Text>SAMPLERS</Text>
-            </State>
-            <State>
-              <Number>1</Number>
-              <Text>SAMPLERS</Text>
-            </State>
-            <Connection>
-              <ConfigKey persist="true">[Samplers],show_samplers</ConfigKey>
-            </Connection>
-          </PushButton>
+          <Template src="skin:button_2state_persist.xml">
+            <SetVariable name="TooltipId">show_samplers</SetVariable>
+            <SetVariable name="ObjectName">GuiToggleButton</SetVariable>
+            <SetVariable name="Size">71f,24f</SetVariable>
+            <SetVariable name="state_0_text">SAMPLERS</SetVariable>
+            <SetVariable name="state_1_text">SAMPLERS</SetVariable>
+            <SetVariable name="ConfigKey">[Samplers],show_samplers</SetVariable>
+          </Template>
 
         </Children>
         <Connection>
diff --git a/res/skins/LateNight/vinyl_controls.xml b/res/skins/LateNight/vinyl_controls.xml
index 60344b251f3..8fa36aa0218 100644
--- a/res/skins/LateNight/vinyl_controls.xml
+++ b/res/skins/LateNight/vinyl_controls.xml
@@ -29,101 +29,43 @@
         </Connection>
       </WidgetGroup>
 
-      <PushButton>
-        <Size>39f,22f</Size>
-        <TooltipId>vinylcontrol_enabled</TooltipId>
-        <ObjectName>VinylButton</ObjectName>
-        <NumberStates>2</NumberStates>
-        <State>
-          <Number>0</Number>
-          <Text>VINYL</Text>
-        </State>
-        <State>
-          <Number>1</Number>
-          <Text>VINYL</Text>
-        </State>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,vinylcontrol_enabled</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,vinylcontrol_enabled</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:button_2state.xml">
+        <SetVariable name="TooltipId">vinylcontrol_enabled</SetVariable>
+        <SetVariable name="ObjectName">VinylButton</SetVariable>
+        <SetVariable name="Size">39f,22f</SetVariable>
+        <SetVariable name="state_0_text">VINYL</SetVariable>
+        <SetVariable name="state_1_text">VINYL</SetVariable>
+        <SetVariable name="ConfigKey"><Variable name="group"/>,vinylcontrol_enabled</SetVariable>
+      </Template>
 
-      <PushButton>
-        <Size>44f,22f</Size>
-        <TooltipId>vinylcontrol_mode</TooltipId>
-        <ObjectName>TristateButton</ObjectName>
-        <NumberStates>3</NumberStates>
-        <State>
-          <Number>0</Number>
-          <Text>ABS</Text>
-        </State>
-        <State>
-          <Number>1</Number>
-          <Text>REL</Text>
-        </State>
-        <State>
-          <Number>2</Number>
-          <Text>CONST</Text>
-        </State>
-        <Connection>
-          <ConfigKey persist="true"><Variable name="group"/>,vinylcontrol_mode</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey persist="true"><Variable name="group"/>,vinylcontrol_mode</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:button_3state_persist.xml">
+        <SetVariable name="TooltipId">vinylcontrol_mode</SetVariable>
+        <SetVariable name="ObjectName">TristateButton</SetVariable>
+        <SetVariable name="Size">44f,22f</SetVariable>
+        <SetVariable name="state_0_text">ABS</SetVariable>
+        <SetVariable name="state_1_text">REL</SetVariable>
+        <SetVariable name="state_2_text">CONST</SetVariable>
+        <SetVariable name="ConfigKey"><Variable name="group"/>,vinylcontrol_mode</SetVariable>
+      </Template>
 
-      <PushButton>
-        <Size>28f,22f</Size>
-        <TooltipId>vinylcontrol_cueing</TooltipId>
-        <ObjectName>VinylButton</ObjectName>
-        <NumberStates>3</NumberStates>
-        <State>
-          <Number>0</Number>
-          <Text>CUE</Text>
-        </State>
-        <State>
-          <Number>1</Number>
-          <Text>CUE</Text>
-        </State>
-        <State>
-          <Number>2</Number>
-          <Text>HOT</Text>
-        </State>
-        <Connection>
-          <ConfigKey persist="true"><Variable name="group"/>,vinylcontrol_cueing</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey persist="true"><Variable name="group"/>,vinylcontrol_cueing</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:button_3state_persist.xml">
+        <SetVariable name="TooltipId">vinylcontrol_cueing</SetVariable>
+        <SetVariable name="ObjectName">VinylButton</SetVariable>
+        <SetVariable name="Size">28f,22f</SetVariable>
+        <SetVariable name="state_0_text">CUE</SetVariable>
+        <SetVariable name="state_1_text">CUE</SetVariable>
+        <SetVariable name="state_2_text">HOT</SetVariable>
+        <SetVariable name="ConfigKey"><Variable name="group"/>,vinylcontrol_cueing</SetVariable>
+      </Template>
 
-      <PushButton>
-        <Size>34f,22f</Size>
-        <ObjectName>VinylButton</ObjectName>
-        <TooltipId>passthrough_enabled</TooltipId>
-        <NumberStates>2</NumberStates>
-        <State>
-          <Number>0</Number>
-          <Text>PASS</Text>
-        </State>
-        <State>
-          <Number>1</Number>
-          <Text>PASS</Text>
-        </State>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,passthrough</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,passthrough</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:button_2state.xml">
+        <SetVariable name="TooltipId">passthrough_enabled</SetVariable>
+        <SetVariable name="ObjectName">VinylButton</SetVariable>
+        <SetVariable name="Size">34f,22f</SetVariable>
+        <SetVariable name="state_0_text">PASS</SetVariable>
+        <SetVariable name="state_1_text">PASS</SetVariable>
+        <SetVariable name="ConfigKey"><Variable name="group"/>,passthrough</SetVariable>
+      </Template>
 
     </Children>
     <Connection>
diff --git a/res/skins/LateNight/waveform.xml b/res/skins/LateNight/waveform.xml
index 375b30aa206..b1100364557 100644
--- a/res/skins/LateNight/waveform.xml
+++ b/res/skins/LateNight/waveform.xml
@@ -1,62 +1,62 @@
 <Template>
   <SetVariable name="group">[Channel<Variable name="channum"/>]</SetVariable>
-	<WidgetGroup>
+  <WidgetGroup>
     <ObjectName>Waveform</ObjectName>
-		<Layout>horizontal</Layout>
-		<SizePolicy>me,me</SizePolicy>
-		<Children>
-			<Visual>
-				<TooltipId>waveform_display</TooltipId>
-				<Channel><Variable name="channum"/></Channel>
-				<BgColor><Variable name="SignalBgColor"/></BgColor>
-				<SignalColor><Variable name="signal_color"/></SignalColor>
+    <Layout>horizontal</Layout>
+    <SizePolicy>me,me</SizePolicy>
+    <Children>
+      <Visual>
+        <TooltipId>waveform_display</TooltipId>
+        <Channel><Variable name="channum"/></Channel>
+        <BgColor><Variable name="SignalBgColor"/></BgColor>
+        <SignalColor><Variable name="signal_color"/></SignalColor>
         <SignalRGBLowColor><Variable name="SignalRGBLowColor"/></SignalRGBLowColor>
         <SignalRGBMidColor><Variable name="SignalRGBMidColor"/></SignalRGBMidColor>
         <SignalRGBHighColor><Variable name="SignalRGBHighColor"/></SignalRGBHighColor>
-				<BeatColor>#ffffff</BeatColor>
-				<BeatHighlightColor></BeatHighlightColor>
-				<PlayPosColor>#00FF00</PlayPosColor>
-				<EndOfTrackColor>#EA0000</EndOfTrackColor>
-				<DefaultMark>
-					<Align>top</Align>
-					<Color>#00FF00</Color>
-					<TextColor>#FFFFFF</TextColor>
-					<Text> %1 </Text>
-				</DefaultMark>
-				<MarkRange>
-					<StartControl>loop_start_position</StartControl>
-					<EndControl>loop_end_position</EndControl>
-					<EnabledControl>loop_enabled</EnabledControl>
-					<Color>#00FF00</Color>
-					<DisabledColor>#FFFFFF</DisabledColor>
-				</MarkRange>
-				<Mark>
-					<Control>loop_start_position</Control>
-					<Text>IN</Text>
-					<Align>bottom</Align>
-					<Color>#00FF00</Color>
-					<TextColor>#FFFFFF</TextColor>
-				</Mark>
-				<Mark>
-					<Control>loop_end_position</Control>
-					<Text>OUT</Text>
-					<Align>bottom</Align>
-					<Color>#00FF00</Color>
-					<TextColor>#FFFFFF</TextColor>
-				</Mark>
-				<!--
-				The hotcues not represented by a button in the current skin show only in the waveform under two circumstances:
-					- if a MIDI device which supports more hotcues than buttons are in the current skin has them activated
-					- if you change from a skin which supports more hotcues than buttons are in the current skin (and has them activated)
-				-->
-				<Mark>
-					<Control>cue_point</Control>
-					<Text>CUE</Text>
-					<Align>top</Align>
-					<Color>#FF001C</Color>
-					<TextColor>#FFFFFF</TextColor>
-				</Mark>
-			</Visual>
+        <BeatColor>#ffffff</BeatColor>
+        <BeatHighlightColor></BeatHighlightColor>
+        <PlayPosColor>#00FF00</PlayPosColor>
+        <EndOfTrackColor>#EA0000</EndOfTrackColor>
+        <DefaultMark>
+          <Align>top</Align>
+          <Color>#00FF00</Color>
+          <TextColor>#FFFFFF</TextColor>
+          <Text> %1 </Text>
+        </DefaultMark>
+        <MarkRange>
+          <StartControl>loop_start_position</StartControl>
+          <EndControl>loop_end_position</EndControl>
+          <EnabledControl>loop_enabled</EnabledControl>
+          <Color>#00FF00</Color>
+          <DisabledColor>#FFFFFF</DisabledColor>
+        </MarkRange>
+        <Mark>
+          <Control>loop_start_position</Control>
+          <Text>IN</Text>
+          <Align>bottom</Align>
+          <Color>#00FF00</Color>
+          <TextColor>#FFFFFF</TextColor>
+        </Mark>
+        <Mark>
+          <Control>loop_end_position</Control>
+          <Text>OUT</Text>
+          <Align>bottom</Align>
+          <Color>#00FF00</Color>
+          <TextColor>#FFFFFF</TextColor>
+        </Mark>
+        <!--
+        The hotcues not represented by a button in the current skin show only in the waveform under two circumstances:
+          - if a MIDI device which supports more hotcues than buttons are in the current skin has them activated
+          - if you change from a skin which supports more hotcues than buttons are in the current skin (and has them activated)
+        -->
+        <Mark>
+          <Control>cue_point</Control>
+          <Text>CUE</Text>
+          <Align>top</Align>
+          <Color>#FF001C</Color>
+          <TextColor>#FFFFFF</TextColor>
+        </Mark>
+      </Visual>
 
       <WidgetGroup><!-- Transparent container for beatgrid buttons -->
         <ObjectName>BeatgridButtons</ObjectName>
@@ -75,8 +75,9 @@
               <Template src="skin:button_1state_right.xml">
                 <SetVariable name="TooltipId">beats_translate_curpos</SetVariable>
                 <SetVariable name="ObjectName">BeatCurpos</SetVariable>
-                <SetVariable name="Icon">beat_curpos_large</SetVariable>
-                <SetVariable name="Size">28f,56f</SetVariable>
+                <SetVariable name="state_0_pressed">beat_curpos_large</SetVariable>
+                <SetVariable name="state_0_unpressed">beat_curpos_large_down</SetVariable>
+                <SetVariable name="Size">26f,52f</SetVariable>
                 <SetVariable name="ConfigKey"><Variable name="group"/>,beats_translate_curpos</SetVariable>
                 <SetVariable name="ConfigKeyRight"><Variable name="group"/>,beats_translate_match_alignment</SetVariable>
               </Template>
@@ -89,7 +90,7 @@
                     <SetVariable name="TooltipId">beats_translate_earlier</SetVariable>
                     <SetVariable name="ObjectName">FxAssignButton</SetVariable>
                     <SetVariable name="Icon">beats_earlier</SetVariable>
-                    <SetVariable name="Size">28f,28f</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
                     <SetVariable name="ConfigKey"><Variable name="group"/>,beats_translate_earlier</SetVariable>
                   </Template>
 
@@ -97,7 +98,7 @@
                     <SetVariable name="TooltipId">beats_adjust_faster</SetVariable>
                     <SetVariable name="ObjectName">FxAssignButton</SetVariable>
                     <SetVariable name="Icon">beats_faster</SetVariable>
-                    <SetVariable name="Size">28f,28f</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
                     <SetVariable name="ConfigKey"><Variable name="group"/>,beats_adjust_faster</SetVariable>
                   </Template>
                 </Children>
@@ -111,7 +112,7 @@
                     <SetVariable name="TooltipId">beats_translate_later</SetVariable>
                     <SetVariable name="ObjectName">FxAssignButton</SetVariable>
                     <SetVariable name="Icon">beats_later</SetVariable>
-                    <SetVariable name="Size">28f,28f</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
                     <SetVariable name="ConfigKey"><Variable name="group"/>,beats_translate_later</SetVariable>
                   </Template>
 
@@ -119,7 +120,7 @@
                     <SetVariable name="TooltipId">beats_adjust_slower</SetVariable>
                     <SetVariable name="ObjectName">FxAssignButton</SetVariable>
                     <SetVariable name="Icon">beats_slower</SetVariable>
-                    <SetVariable name="Size">28f,28f</SetVariable>
+                    <SetVariable name="Size">26f,26f</SetVariable>
                     <SetVariable name="ConfigKey"><Variable name="group"/>,beats_adjust_slower</SetVariable>
                   </Template>
                 </Children>
@@ -134,6 +135,6 @@
           <BindProperty>visible</BindProperty>
         </Connection>
       </WidgetGroup><!-- /Transparent container for beatgrid buttons -->
-		</Children>
-	</WidgetGroup>
+    </Children>
+  </WidgetGroup>
 </Template>
diff --git a/res/skins/LateNight/waveforms.xml b/res/skins/LateNight/waveforms.xml
index 380fbbcdf5f..d1097fe0531 100644
--- a/res/skins/LateNight/waveforms.xml
+++ b/res/skins/LateNight/waveforms.xml
@@ -15,20 +15,11 @@
         </Children>
       </WidgetGroup>
 
-      <PushButton>
-        <ObjectName>BeatgridButtonsToggle</ObjectName>
-        <Size>28f,40me</Size>
-        <NumberStates>2</NumberStates>
-        <State>
-          <Number>0</Number>
-        </State>
-        <State>
-          <Number>1</Number>
-        </State>
-        <Connection>
-          <ConfigKey persist="true">[Skin],beatgrid_buttons</ConfigKey>
-        </Connection>
-      </PushButton>
+      <Template src="skin:button_2state_persist.xml">
+        <SetVariable name="ObjectName">BeatgridButtonsToggle</SetVariable>
+        <SetVariable name="Size">28f,40me</SetVariable>
+        <SetVariable name="ConfigKey">[Skin],beatgrid_buttons</SetVariable>
+      </Template>
 
     </Children>
   </WidgetGroup>