LateNight: tweak skin settings, document helper hacks, clean up css

11 files changed, 329 insertions, 360 deletions

diff --git a/res/skins/LateNight/decks/vinyl_controls.xml b/res/skins/LateNight/decks/vinyl_controls.xml
index e7f17c276b..f41f209f74 100644
--- a/res/skins/LateNight/decks/vinyl_controls.xml
+++ b/res/skins/LateNight/decks/vinyl_controls.xml
@@ -16,9 +16,14 @@
             <ObjectName>VinylStatus</ObjectName>
             <Size>18f,18f</Size>
             <TooltipId>vinylcontrol_status</TooltipId>
+            <!-- TODO use colors mentioned in tooltip: green, blinking yellow, blue -->
+            <!-- Off -->
             <PathStatusLight0 scalemode="STRETCH_ASPECT">skin:/<Variable name="StyleScheme"/>/style/vinyl_control_0.svg</PathStatusLight0>
+            <!-- enabled -->
             <PathStatusLight1 scalemode="STRETCH_ASPECT">skin:/<Variable name="StyleScheme"/>/style/vinyl_control_1.svg</PathStatusLight1>
+            <!-- end-of-record warning -->
             <PathStatusLight2 scalemode="STRETCH_ASPECT">skin:/<Variable name="StyleScheme"/>/style/vinyl_control_2.svg</PathStatusLight2>
+            <!-- passthrough -->
             <PathStatusLight3 scalemode="STRETCH_ASPECT">skin:/<Variable name="StyleScheme"/>/style/vinyl_control_3.svg</PathStatusLight3>
             <Connection>
               <ConfigKey><Variable name="Group"/>,vinylcontrol_status</ConfigKey>
diff --git a/res/skins/LateNight/helpers/skin_helper_deck_size.xml b/res/skins/LateNight/helpers/skin_helper_deck_size.xml
index 3c86ad1caf..ef10a8e580 100644
--- a/res/skins/LateNight/helpers/skin_helper_deck_size.xml
+++ b/res/skins/LateNight/helpers/skin_helper_deck_size.xml
@@ -1,107 +1,98 @@
 <!--
-Description:
-
-    A four-state GUI switch, outsourcing the complex deck size selection
-    from the deck.xml template.
-
-    It picks the appropriate deck variant
-      FULL
-      Compact
-      minimal
-      none
-    depending on how the following skin controls are combined
-      [Master],maximize_library
-      [LateNight],max_lib_show_decks
-      [Master],show_mixer
-      [LateNight],deck_size_without_mixer
-
-    This is a SizeAwareStack and WidgetStack hack that basically executes
-    an analogue version of a simple script similiar to this:
-
-    if (![Master],maxmimize_library
-          && [Skin],select_minimal_deck) {
-        hide(fullDeck);
-        hide(compactDeck);
-        show(minimaldeck);
-    } else {
-      if ([Master],show_mixer) {
-        hide(minimaldeck);
-        hide(compactDeck);
-        show(fullDeck);
+
+  Purpose:
+
+      Inside deck.xml there are differently sized deck variants
+        FULL
+        Compact
+        minimal
+        (none)
+      to be shown, depending on how the user has currently configured the skin.
+      Controls taken into account are
+        [Master],maximize_library
+        [LateNight],max_lib_show_decks
+        [Master],show_mixer
+        [LateNight],deck_size_without_mixer
+      deck.xml would be very complex if we'd want to cover all combinations there.
+      To have a slim deck template this switch here does the selection and thus allows
+      to remote-control what to show in deck.xml
+
+      This is a widget hack to compensate the lack of proper GUI scripting (as of Mixxx 2.3)
+      It is basically an analogue version of a simple script similiar to this:
+      if (Library is maximized && minimal deck selected) {
+          show minimal deck;
       } else {
-        case ..
-        ...
+          if (Mixer is shown) {
+              enforce full deck;
+          } else {
+              show pre-selected deck;
+          }
       }
-    }
-
-    This is a fixed-width container. The occupied space is defined
-    by widget connected to the above skin controls. The SizeAwareStack
-    then picks one child widget fitting into the remaining space.
-      Note: To make the whole thing work we need to be sure there's
-      only ONE fitting widget for every possible size the
-      SizeAwareStack could be shrunk to.
-
-    Each widget inside the SizeAwareStack is a WidgetStack.
-    By default, WidgetStacks pick their first child for display*,
-    then toggle the child's 'trigger' control to 1 (if present).
-    Example:
-    <WidgetStack>
-      <Children>
-        <WidgetGroup trigger="[Any],config_key">  => set to '1'
-        <WidgetGroup trigger="[Another],config_key">  => set to '0'
-      </Children>
-    </WidgetStack>
-
-    So, let's put several copies of a WidgetStack into the
-    SizeAwareStack, each with the identical set of children and
-    controls. If we then change the order of the WidgetStacks'
-    children, each WidgetStack can toggle a specific control to '1'
-    while setting the others to '0'.
-    If we've set the parent SizeAwareStack up carefully, and if we
-    omitted storing the index with
-    <WidgetStack currentPage="[Save],config_key"> anywhere inside
-    the SizeAwareStack, we can now toggle several N-state switches
-    at once.
-    This gives us a pretty reliable tool to pick the appropriate
-    deck variant, for example, depending on a may-be complex
-    skin configuration.
+
+
+  The Structure:
+
+      The outer container is a WidgetGroup with a fixed width and a horizontal layout.
+
+      On the left there are fixed-width blocks, where each is shown or hidden according
+      to the state of one of the skin controls listed above.
+      So, depending on how the user has configured the skin via the skin settings menu,
+      those blocks define the remaining space on the right.
+
+      At the right, there's a SizeAwareStack. It can react to the available space and show
+      a fitting child widget at a time (if there is one that matches the current 'gap').
+
+      The SizeAwareStack is packed with WidgetStacks.
+      A WidgetStack can host several top-level child widgets but only one is shown at a time.
+      Each child widget can have 'trigger' control that (when set to 1 elsewhere) would enforce
+      the widget to be shown.
+      When a hidden WidgetStack is shown and no child's trigger is addressed the first child is picked.
+      As soon as that first child is shown its trigger control is set to 1 while the triggers of all
+      siblings are set to 0. Consider this example:
+        <WidgetStack>
+          <Children>
+            <WidgetGroup trigger="[LateNight],show_mini_deck">  // set to 1
+            <WidgetGroup trigger="[LateNight],show_no_deck">    // set to 0
+            <WidgetGroup trigger="[LateNight],show_full_deck">  // set to 0
+          </Children>
+        </WidgetStack>
+
+      The hack here is to use [LateNight],show_mini_deck to show/hide a widget in an entirely
+      different skin template and abuse the 1st-child trigger to remote-control it from here.
+
+
 -->
 
 <Template>
-  <!-- Extra wrapper so we can put multiple, independent size
-        detectors in here. -->
-  <!-- Set height to 0f to hide this.
-       Set height to any other size for visual debugging -->
+  <!-- Extra wrapper so we can put multiple, independent size detectors in here. -->
+  <!-- Set height to 0f to hide it. -->
+  <!-- Increase children's height >0 when needed for visual debugging -->
   <WidgetGroup>
     <Size>0me,0f</Size>
     <Layout>vertical</Layout>
     <ObjectName>AlignRight</ObjectName>
     <Children>
 
-      <!-- Deck selector.
-          Picks the approriate deck size to display -->
       <WidgetGroup>
         <Layout>horizontal</Layout>
-        <Size>300f,10f</Size>
-        <ObjectName>Spacer1e</ObjectName>
+        <Size>300f,0f</Size>
         <Children>
 
-          <!-- Widgets that define the remaining space,
-              visibility connected to skin controls -->
+  <!-- Widgets that define the remaining space according to enabled skin controls -->
+          <!-- maximize_library -->
           <WidgetGroup>
             <Connection>
               <ConfigKey>[Master],maximize_library</ConfigKey>
               <BindProperty>visible</BindProperty>
             </Connection>
-            <ObjectName>TEST1</ObjectName>
             <Layout>horizontal</Layout>
             <SizePolicy>min,f</SizePolicy>
-            <MinimumSize>200,10</MinimumSize>
-            <MaximumSize>300,10</MaximumSize>
+            <MinimumSize>200,0</MinimumSize>
+            <MaximumSize>300,0</MaximumSize>
             <Children>
-              <WidgetGroup><!-- minimal deck selected -->
-                <Size>300f,10f</Size>
-                <ObjectName>TEST2</ObjectName>
+              <!-- minimal deck selected -->
+              <WidgetGroup>
+                <Size>300f,0f</Size>
                 <Connection>
                   <ConfigKey persist="true">[LateNight],max_lib_show_decks</ConfigKey>
                   <Transform><Not/></Transform>
@@ -109,8 +100,10 @@ Description:
                 </Connection>
               </WidgetGroup>
             </Children>
-          </WidgetGroup><!-- maximize_library -->
+          </WidgetGroup>
+          <!-- maximize_library -->
 
+          <!-- regular library -->
           <WidgetGroup>
             <Connection>
               <ConfigKey>[Master],maximize_library</ConfigKey>
@@ -119,11 +112,11 @@ Description:
             </Connection>
             <Layout>horizontal</Layout>
             <SizePolicy>min,f</SizePolicy>
-            <MinimumSize>0,10</MinimumSize>
-            <MaximumSize>200,10</MaximumSize>
+            <MinimumSize>0,0</MinimumSize>
+            <MaximumSize>200,0</MaximumSize>
             <Children>
 
-              <!-- !show_mixer -->
+              <!-- no mixer -->
               <WidgetGroup>
                 <Connection>
                   <ConfigKey>[Master],show_mixer</ConfigKey>
@@ -131,14 +124,14 @@ Description:
                   <BindProperty>visible</BindProperty>
                 </Connection>
                 <Layout>horizontal</Layout>
-                <ObjectName>TEST33</ObjectName>
                 <SizePolicy>min,f</SizePolicy>
-                <MinimumSize>0,10</MinimumSize>
-                <MaximumSize>200,10</MaximumSize>
+                <MinimumSize>0,0</MinimumSize>
+                <MaximumSize>200,0</MaximumSize>
                 <Children>
 
-                  <WidgetGroup><!-- Compact deck selected -->
-                    <Size>100f,10f</Size>
+                  <!-- Compact deck selected -->
+                  <WidgetGroup>
+                    <Size>100f,0f</Size>
                     <ObjectName>SET_COMPACT</ObjectName>
                     <Connection>
                       <ConfigKey persist="true">[LateNight],deck_size_without_mixer</ConfigKey>
@@ -147,8 +140,9 @@ Description:
                     </Connection>
                   </WidgetGroup>
 
-                  <WidgetGroup><!-- minimal deck selected -->
-                    <Size>200f,10f</Size>
+                  <!-- minimal deck selected -->
+                  <WidgetGroup>
+                    <Size>200f,0f</Size>
                     <ObjectName>SET_MINI</ObjectName>
                     <Connection>
                       <ConfigKey persist="true">[LateNight],deck_size_without_mixer</ConfigKey>
@@ -156,47 +150,43 @@ Description:
                       <BindProperty>visible</BindProperty>
                     </Connection>
                   </WidgetGroup>
+
                 </Children>
-              </WidgetGroup><!-- !show_mixer -->
+              </WidgetGroup>
+              <!-- no mixer -->
 
             </Children>
-          </WidgetGroup><!-- !maximize_library -->
-          <!-- /Widgets that define the remaining space,
-              visibility connected to skin controls -->
+          </WidgetGroup>
+          <!-- regular library -->
 
 
-
-          <!-- Deck size detector -->
+  <!-- Deck size detector -->
           <SizeAwareStack>
             <Children>
+      <!-- control triggers -->
+
               <!-- no decks -->
-              <!-- maximize_library && minimal deck selected -->
+              <!-- maximized library && decks disabled -->
               <WidgetStack>
                 <SizePolicy>me,f</SizePolicy>
-                <MinimumSize>0,10</MinimumSize>
-                <MaximumSize>0,10</MaximumSize>
+                <MinimumSize>0,0</MinimumSize>
+                <MaximumSize>0,0</MaximumSize>
                 <Children>
-                  <WidgetGroup trigger="[LateNight],show_no_deck">
-                    <ObjectName>TEST4</ObjectName>
-                    <Size>0f,10f</Size>
-                  </WidgetGroup>
+                  <WidgetGroup trigger="[LateNight],show_no_deck"><Size>0f,0f</Size></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_mini_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_compact_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_full_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                 </Children>
               </WidgetStack>
 
-              <!-- Minimal deck -->
-              <!-- maximize_library || (!show_mixer && minimal deck selected) -->
+              <!-- minimal deck -->
+              <!-- maximized library || (mixer hidden && minimal deck selected) -->
               <WidgetStack>
                 <SizePolicy>me,f</SizePolicy>
-                <MinimumSize>100,10</MinimumSize>
-                <MaximumSize>100,10</MaximumSize>
+                <MinimumSize>100,0</MinimumSize>
+                <MaximumSize>100,0</MaximumSize>
                 <Children>
-                  <WidgetGroup trigger="[LateNight],show_mini_deck">
-                    <ObjectName>IS_MINI</ObjectName>
-                    <Size>100f,10f</Size>
-                  </WidgetGroup>
+                  <WidgetGroup trigger="[LateNight],show_mini_deck"><Size>100f,0f</Size></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_compact_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_full_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_no_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
@@ -204,45 +194,37 @@ Description:
               </WidgetStack>
 
               <!-- Compact deck -->
-              <!-- compact_deck_selected -->
+              <!-- mixer hidden && compact deck selected -->
               <WidgetStack>
                 <SizePolicy>me,f</SizePolicy>
-                <MinimumSize>200,10</MinimumSize>
-                <MaximumSize>200,10</MaximumSize>
+                <MinimumSize>200,0</MinimumSize>
+                <MaximumSize>200,0</MaximumSize>
                 <Children>
-                  <WidgetGroup trigger="[LateNight],show_compact_deck">
-                    <ObjectName>IS_COMPACT</ObjectName>
-                    <Size>200f,10f</Size>
-                  </WidgetGroup>
+                  <WidgetGroup trigger="[LateNight],show_compact_deck"><Size>200f,0f</Size></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_full_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_mini_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_no_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                 </Children>
               </WidgetStack>
 
-              <!-- Full deck -->
-              <!-- show_mixer || full deck selected -->
+              <!-- FULL deck -->
+              <!-- mixer shown || (mixer hidden && full deck selected) -->
               <WidgetStack>
                 <SizePolicy>me,f</SizePolicy>
-                <MinimumSize>300,10</MinimumSize>
-                <MaximumSize>300,10</MaximumSize>
+                <MinimumSize>300,0</MinimumSize>
+                <MaximumSize>300,0</MaximumSize>
                 <Children>
-                  <WidgetGroup trigger="[LateNight],show_full_deck">
-                    <ObjectName>IS_FULL</ObjectName>
-                    <Size>300f,10f</Size>
-                  </WidgetGroup>
+                  <WidgetGroup trigger="[LateNight],show_full_deck"><Size>300f,0f</Size></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_compact_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_mini_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                   <WidgetGroup trigger="[LateNight],show_no_deck"><SizePolicy>me,me</SizePolicy></WidgetGroup>
                 </Children>
               </WidgetStack>
             </Children>
-          </SizeAwareStack><!-- /Size detector -->
-          <!-- /Size detector -->
+          </SizeAwareStack>
 
         </Children>
       </WidgetGroup>
-      <!-- checks which deck size should be displayed -->
     </Children>
   </WidgetGroup>
 </Template>
diff --git a/res/skins/LateNight/helpers/skin_settings_button_2state.xml b/res/skins/LateNight/helpers/skin_settings_button_2state.xml
index 5732431556..8d98d01200 100644
--- a/res/skins/LateNight/helpers/skin_settings_button_2state.xml
+++ b/res/skins/LateNight/helpers/skin_settings_button_2state.xml
@@ -1,11 +1,6 @@
 <!--
 Description:
   2-state button for skin settings menu.
-  Can be squeezed so that all skin settings categories fit on small screens.
-Variables:
-  width         :
-  state_X_text  : label text for state X
-  Setting       : persistent left-click control
 -->
 <Template>
   <PushButton>
diff --git a/res/skins/LateNight/helpers/skin_settings_cover.xml b/res/skins/LateNight/helpers/skin_settings_cover.xml
new file mode 100644
index 0000000000..99da47ace3
--- /dev/null
+++ b/res/skins/LateNight/helpers/skin_settings_cover.xml
@@ -0,0 +1,19 @@
+<!--
+Description:
+  A translucent layer to cover skin settings that are
+  inactive with the current configuration
+Variables:
+  Setting   : visibility control
+-->
+<Template>
+
+  <WidgetGroup>
+    <ObjectName>SubmenuCover</ObjectName>
+    <Layout>vertical</Layout>
+    <SizePolicy>me,min</SizePolicy>
+    <Connection>
+      <ConfigKey><Variable name="Setting"/></ConfigKey>
+      <BindProperty>visible</BindProperty>
+    </Connection>
+  </WidgetGroup>
+</Template>
diff --git a/res/skins/LateNight/helpers/skin_settings_cover_inverted.xml b/res/skins/LateNight/helpers/skin_settings_cover_inverted.xml
new file mode 100644
index 0000000000..8c2a5e5e91
--- /dev/null
+++ b/res/skins/LateNight/helpers/skin_settings_cover_inverted.xml
@@ -0,0 +1,20 @@
+<!--
+Description:
+  A translucent layer to cover skin settings that are
+  inactive with the current configuration
+Variables:
+  Setting   : visibility control
+-->
+<Template>
+
+  <WidgetGroup>
+    <ObjectName>SubmenuCover</ObjectName>
+    <Layout>vertical</Layout>
+    <SizePolicy>me,min</SizePolicy>
+    <Connection>
+      <ConfigKey><Variable name="Setting"/></ConfigKey>
+      <Transform><Not/></Transform>
+      <BindProperty>visible</BindProperty>
+    </Connection>
+  </WidgetGroup>
+</Template>
diff --git a/res/skins/LateNight/skin.xml b/res/skins/LateNight/skin.xml
index 5bbd700c12..1b073dae62 100644
--- a/res/skins/LateNight/skin.xml
+++ b/res/skins/LateNight/skin.xml
@@ -41,7 +41,6 @@
       <attribute config_key="[Master],num_samplers">16</attribute>
       <attribute persist="true" config_key="[Skin],show_waveforms">1</attribute>
       <attribute persist="true" config_key="[Skin],timing_shift_buttons">0</attribute>
-      <attribute config_key="[Master],skin_settings">0</attribute>
 
     <!-- Decks -->
       <!-- general -->
diff --git a/res/skins/LateNight/skin_settings.xml b/res/skins/LateNight/skin_settings.xml
index e705c804be..812a3c05b8 100644
--- a/res/skins/LateNight/skin_settings.xml
+++ b/res/skins/LateNight/skin_settings.xml
@@ -23,6 +23,7 @@ Description:
         <Size>240f,1me</Size>
         <Children>
 
+          <!-- Decks -->
           <WidgetGroup>
             <Layout>horizontal</Layout>
             <Size>0me,1min</Size>
@@ -50,7 +51,7 @@ Description:
             </Children>
           </WidgetGroup>
 
-<!-- Deck size selectors -->
+<!-- Deck size selector -->
           <WidgetGroup>
             <ObjectName>DeckSizeSettings</ObjectName>
             <Size>225me,20f</Size>
@@ -70,6 +71,10 @@ Description:
                 <Size>225f,18f</Size>
                 <Layout>stacked</Layout>
                 <Children>
+                  <!-- hide deck sizes with the expanded library -->
+                  <Template src="skin:/helpers/skin_settings_cover.xml">
+                    <SetVariable name="Setting">[Master],maximize_library</SetVariable>
+                  </Template>
 
                   <!-- un-hide mixer, hint + toggle -->
                   <PushButton>
@@ -136,10 +141,13 @@ Description:
           <WidgetGroup>
             <ObjectName></ObjectName>
             <SizePolicy>me,min</SizePolicy>
-            <!-- Horizontal layout to reduce graphic glitches when switching deck size -->
+            <!-- Horizontal layout to reduce graphic glitches in the sections below
+              when switching deck size -->
             <Layout>horizontal</Layout>
             <Children>
-              <WidgetGroup><!-- Full Deck Options -->
+
+              <!-- Full Deck Options -->
+              <WidgetGroup>
                 <ObjectName></ObjectName>
                 <SizePolicy>me,min</SizePolicy>
                 <Layout>vertical</Layout>
@@ -169,17 +177,10 @@ Description:
                             <Size>0me,18f</Size>
                             <Layout>stacked</Layout>
                             <Children>
-                              <WidgetGroup><!-- translucent cover when hotcues are hidden -->
-                                <ObjectName>SubmenuCover</ObjectName>
-                                <Layout>vertical</Layout>
-                                <SizePolicy>me,min</SizePolicy>
-                                <Connection>
-                                  <ConfigKey persist="true">[Skin],show_hotcues</ConfigKey>
-                                  <Transform><Not/></Transform>
-                                  <BindProperty>visible</BindProperty>
-                                </Connection>
-                              </WidgetGroup>
-
+                              <!-- translucent cover when hotcues are hidden -->
+                              <Template src="skin:/helpers/skin_settings_cover_inverted.xml">
+                                <SetVariable name="Setting">[Skin],show_hotcues</SetVariable>
+                              </Template>
                               <WidgetGroup>
                                 <Layout>horizontal</Layout>
                                 <Size>0me,1min</Size>
@@ -212,13 +213,6 @@ Description:
                         <SetVariable name="Setting">[Skin],show_intro_outro_cues</SetVariable>
                       </Template>
 
-                      <!-- Cue shift buttons in beatgrid editing section -->
-                      <Template src="skin:/helpers/skin_settings_button_2state.xml">
-                        <SetVariable name="TooltipId">show_intro_outro_cues</SetVariable>
-                        <SetVariable name="Text">Hotcue Shift Buttons</SetVariable>
-                        <SetVariable name="Setting">[Skin],timing_shift_buttons</SetVariable>
-                      </Template>
-
                       <WidgetGroup><Size>0me,6f</Size></WidgetGroup>
 
                       <!-- Rate Controls -->
@@ -234,16 +228,10 @@ Description:
                         <Layout>stacked</Layout>
                         <Size>180min,18f</Size>
                         <Children>
-                          <WidgetGroup><!-- translucent cover when rate controls are hidden -->
-                            <ObjectName>SubmenuCover</ObjectName>
-                            <Layout>stacked</Layout>
-                            <Size>180min,18f</Size>
-                            <Connection>
-                              <ConfigKey persist="true">[Skin],show_rate_controls</ConfigKey>
-                              <Transform><Not/></Transform>
-                              <BindProperty>visible</BindProperty>
-                            </Connection>
-                          </WidgetGroup>
+                          <!-- translucent cover when rate controls are hidden -->
+                          <Template src="skin:/helpers/skin_settings_cover_inverted.xml">
+                            <SetVariable name="Setting">[Skin],show_rate_controls</SetVariable>
+                          </Template>
                           <Template src="skin:/helpers/skin_settings_button_2state.xml">
                             <SetVariable name="TooltipId">rate_toggle</SetVariable>
                             <SetVariable name="Text">Rate Adjust Buttons</SetVariable>
@@ -288,16 +276,10 @@ Description:
                         <Layout>stacked</Layout>
                         <Size>180min,18f</Size>
                         <Children>
-                          <WidgetGroup><!-- translucent cover when neither Spinny nor Cover is shown -->
-                            <ObjectName>SubmenuCover</ObjectName>
-                            <Layout>stacked</Layout>
-                            <Size>180min,18f</Size>
-                            <Connection>
-                              <ConfigKey>[LateNight],show_spinny_cover</ConfigKey>
-                              <Transform><Not/></Transform>
-                              <BindProperty>visible</BindProperty>
-                            </Connection>
-                          </WidgetGroup>
+                          <!-- translucent cover when neither Spinny nor Cover is shown -->
+                          <Template src="skin:/helpers/skin_settings_cover_inverted.xml">
+                            <SetVariable name="Setting">[LateNight],show_spinny_cover</SetVariable>
+                          </Template>
                           <Template src="skin:/helpers/skin_settings_button_2state.xml">
                             <SetVariable name="TooltipId">show_coverart</SetVariable>
                             <SetVariable name="Text">Big Spinny/Cover Art</SetVariable>
@@ -315,8 +297,8 @@ Description:
                 </Connection>
               </WidgetGroup><!-- Full Deck Options -->
 
-              <WidgetGroup><!-- Compact Deck Options -->
-                <ObjectName></ObjectName>
+              <!-- Compact Deck Options -->
+              <WidgetGroup>
                 <SizePolicy>me,min</SizePolicy>
                 <Layout>vertical</Layout>
                 <Children>
@@ -326,13 +308,6 @@ Description:
                     <Layout>vertical</Layout>
                     <Children>
 
-                      <!-- Cue shift buttons in beatgrid editing section -->
-                      <Template src="skin:/helpers/skin_settings_button_2state.xml">
-                        <SetVariable name="TooltipId">show_intro_outro_cues</SetVariable>
-                        <SetVariable name="Text">Hotcue Shift Buttons</SetVariable>
-                        <SetVariable name="Setting">[Skin],timing_shift_buttons</SetVariable>
-                      </Template>
-
                       <WidgetGroup><Size>0me,6f</Size></WidgetGroup>
 
                       <!-- Loop/Jump Controls in compact decks-->
@@ -355,16 +330,10 @@ Description:
                         <Layout>stacked</Layout>
                         <Size>180min,18f</Size>
                         <Children>
-                          <WidgetGroup><!-- translucent cover when rate controls are hidden -->
-                            <ObjectName>SubmenuCover</ObjectName>
-                            <Layout>stacked</Layout>
-                            <Size>180min,18f</Size>
-                            <Connection>
-                              <ConfigKey persist="true">[Skin],show_rate_controls_compact</ConfigKey>
-                              <Transform><Not/></Transform>
-                              <BindProperty>visible</BindProperty>
-                            </Connection>
-                          </WidgetGroup>
+                          <!-- translucent cover when rate controls are hidden -->
+                          <Template src="skin:/helpers/skin_settings_cover_inverted.xml">
+                            <SetVariable name="Setting">[Skin],show_rate_controls_compact</SetVariable>
+                          </Template>
                           <Template src="skin:/helpers/skin_settings_button_2state.xml">
                             <SetVariable name="TooltipId">rate_toggle</SetVariable>
                             <SetVariable name="Text">Sync Button</SetVariable>
@@ -416,16 +385,10 @@ Description:
                         <Layout>stacked</Layout>
                         <Size>180min,18f</Size>
                         <Children>
-                          <WidgetGroup><!-- translucent cover when neither Spinny nor Cover are shown -->
-                            <ObjectName>SubmenuCover</ObjectName>
-                            <Layout>stacked</Layout>
-                            <Size>180min,18f</Size>
-                            <Connection>
-                              <ConfigKey>[LateNight],show_spinny_cover</ConfigKey>
-                              <Transform><Not/></Transform>
-                              <BindProperty>visible</BindProperty>
-                            </Connection>
-                          </WidgetGroup>
+                          <!-- translucent cover when neither Spinny nor Cover are shown -->
+                          <Template src="skin:/helpers/skin_settings_cover_inverted.xml">
+                            <SetVariable name="Setting">[Skin],show_spinny_cover</SetVariable>
+                          </Template>
                           <Template src="skin:/helpers/skin_settings_button_2state.xml">
                             <SetVariable name="TooltipId">show_coverart</SetVariable>
                             <SetVariable name="Text">Big Spinny/Cover Art</SetVariable>
@@ -443,19 +406,15 @@ Description:
                 </Connection>
               </WidgetGroup><!-- Compact Deck Options -->
 
-              <WidgetGroup><!-- Mini Deck Options -->
-                <ObjectName></ObjectName>
+              <!-- Mini Deck Options -->
+              <WidgetGroup>
                 <SizePolicy>me,f</SizePolicy>
                 <Layout>stacked</Layout>
                 <Children>
-                  <WidgetGroup><!-- translucent cover when there are no decks above BIG Library-->
-                    <ObjectName>SubmenuCover</ObjectName>
-                    <SizePolicy>me,min</SizePolicy>
-                    <Connection>
-                      <ConfigKey>[LateNight],no_decks_visible</ConfigKey>
-                      <BindProperty>visible</BindProperty>
-                    </Connection>
-                  </WidgetGroup>
+                  <!-- translucent cover when there are no decks above BIG Library-->
+                  <Template src="skin:/helpers/skin_settings_cover.xml">
+                    <SetVariable name="Setting">[LateNight],no_decks_visible</SetVariable>
+                  </Template>
 
                   <WidgetGroup>
                     <ObjectName>SkinSettingsCategory</ObjectName>
@@ -463,13 +422,6 @@ Description:
                     <Layout>vertical</Layout>
                     <Children>
 
-                      <!-- Cue shift buttons in beatgrid editing section -->
-                      <Template src="skin:/helpers/skin_settings_button_2state.xml">
-                        <SetVariable name="TooltipId">show_intro_outro_cues</SetVariable>
-                        <SetVariable name="Text">Hotcue Shift Buttons</SetVariable>
-                        <SetVariable name="Setting">[Skin],timing_shift_buttons</SetVariable>
-                      </Template>
-
                       <WidgetGroup><Size>0me,120f</Size></WidgetGroup>
 
                       <!-- Spinny -->
@@ -508,19 +460,71 @@ Description:
             <Size>1min,12f</Size>
           </WidgetGroup>
 
-          <WidgetGroup><!--  Mixer -->
-            <ObjectName></ObjectName>
+          <!--  Waveforms -->
+          <WidgetGroup>
             <SizePolicy>me,f</SizePolicy>
             <Layout>stacked</Layout>
             <Children>
-              <WidgetGroup><!-- translucent cover when Library is not maximized -->
-                <ObjectName>SubmenuCover</ObjectName>
+              <!-- translucent cover when Library is not maximized -->
+              <Temp