Merge pull request #3358 from ronso0/is_playing-control

Add 'play_latched' control to indicate true 'play' status

26 files changed, 518 insertions, 191 deletions

diff --git a/res/skins/Deere/deck_controls_row.xml b/res/skins/Deere/deck_controls_row.xml
index 99c6899948..7e076dcdbe 100644
--- a/res/skins/Deere/deck_controls_row.xml
+++ b/res/skins/Deere/deck_controls_row.xml
@@ -38,7 +38,7 @@
             <Layout>stacked</Layout>
             <SizePolicy>me,me</SizePolicy>
             <Children>
-              <Template src="skin:left_right_2state_button.xml">
+              <Template src="skin:left_right_display_2state_button.xml">
                 <SetVariable name="TooltipId">play_cue_set</SetVariable>
                 <SetVariable name="ObjectName">PlayToggle</SetVariable>
                 <SetVariable name="MinimumSize"><Variable name="HorizontalStretchButtonMinimumSize"/></SetVariable>
@@ -46,6 +46,14 @@
                 <SetVariable name="SizePolicy"><Variable name="HorizontalStretchButtonSizePolicy"/></SetVariable>
                 <SetVariable name="left_connection_control"><Variable name="group"/>,play</SetVariable>
                 <SetVariable name="right_connection_control"><Variable name="group"/>,cue_set</SetVariable>
+                <SetVariable name="display_connection_control"><Variable name="group"/>,play_latched</SetVariable>
+              </Template>
+              <Template src="skin:left_2state_button.xml">
+                <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+                <SetVariable name="MinimumSize"><Variable name="HorizontalStretchButtonMinimumSize"/></SetVariable>
+                <SetVariable name="MaximumSize"><Variable name="HorizontalStretchButtonMaximumSize"/></SetVariable>
+                <SetVariable name="SizePolicy"><Variable name="HorizontalStretchButtonSizePolicy"/></SetVariable>
+                <SetVariable name="left_connection_control"><Variable name="group"/>,play</SetVariable>
               </Template>
               <Template src="skin:left_2state_button.xml">
                 <SetVariable name="MinimumSize"><Variable name="HorizontalStretchButtonMinimumSize"/></SetVariable>
diff --git a/res/skins/Deere/deck_small.xml b/res/skins/Deere/deck_small.xml
index 2addce9989..4af0cd5dbf 100644
--- a/res/skins/Deere/deck_small.xml
+++ b/res/skins/Deere/deck_small.xml
@@ -174,26 +174,56 @@
                 </Children>
               </WidgetGroup><!-- DeckTextRowSmall -->
 
-              <WidgetGroup><!-- Play button + play_indicator -->
-                <ObjectName>PlayGutterSmall</ObjectName>
-                <Layout>stacked</Layout>
-                <SizePolicy>f,me</SizePolicy>
+              <WidgetGroup><!-- Cue + Play button -->
+                <ObjectName>PlayCueContainer</ObjectName>
+                <Layout>vertical</Layout>
+                <Size>32min,46f</Size>
                 <Children>
-                  <Template src="skin:left_right_2state_button.xml">
-                    <SetVariable name="TooltipId">play_cue_default</SetVariable>
-                    <SetVariable name="ObjectName">PlayToggle</SetVariable>
-                    <SetVariable name="MinimumSize">24,30</SetVariable>
-                    <SetVariable name="MaximumSize">24,</SetVariable>
-                    <SetVariable name="SizePolicy">f,me</SetVariable>
-                    <SetVariable name="left_connection_control"><Variable name="group"/>,play</SetVariable>
-                    <SetVariable name="right_connection_control"><Variable name="group"/>,cue_default</SetVariable>
-                  </Template>
-                  <Template src="skin:left_2state_button.xml">
-                    <SetVariable name="MinimumSize">24,30</SetVariable>
-                    <SetVariable name="MaximumSize">24,</SetVariable>
-                    <SetVariable name="SizePolicy">f,me</SetVariable>
-                    <SetVariable name="left_connection_control"><Variable name="group"/>,play_indicator</SetVariable>
+
+                  <Template src="skin:left_right_display_2state_button.xml">
+                    <SetVariable name="TooltipId">cue_default_cue_gotoandstop</SetVariable>
+                    <SetVariable name="ObjectName">DeckCue</SetVariable>
+                    <SetVariable name="MinimumSize">30,21</SetVariable>
+                    <SetVariable name="MaximumSize">30,21</SetVariable>
+                    <SetVariable name="SizePolicy">f,f</SetVariable>
+                    <SetVariable name="LeftClickIsPushButton">true</SetVariable>
+                    <SetVariable name="state_0_text">CUE</SetVariable>
+                    <SetVariable name="state_1_text">CUE</SetVariable>
+                    <SetVariable name="left_connection_control"><Variable name="group"/>,cue_default</SetVariable>
+                    <SetVariable name="right_connection_control"><Variable name="group"/>,cue_gotoandstop</SetVariable>
+                    <SetVariable name="display_connection_control"><Variable name="group"/>,cue_indicator</SetVariable>
                   </Template>
+
+                  <WidgetGroup><!-- Play button + preview indicator + play_indicator -->
+                    <Layout>stacked</Layout>
+                    <SizePolicy>f,me</SizePolicy>
+                    <Children>
+                      <Template src="skin:left_right_display_2state_button.xml">
+                        <SetVariable name="TooltipId">play_cue_default</SetVariable>
+                        <SetVariable name="ObjectName">PlayToggle</SetVariable>
+                        <SetVariable name="MinimumSize">30,21</SetVariable>
+                        <SetVariable name="MaximumSize">30,21</SetVariable>
+                        <SetVariable name="SizePolicy">f,f</SetVariable>
+                        <SetVariable name="left_connection_control"><Variable name="group"/>,play</SetVariable>
+                        <SetVariable name="right_connection_control"><Variable name="group"/>,cue_set</SetVariable>
+                        <SetVariable name="display_connection_control"><Variable name="group"/>,play_latched</SetVariable>
+                      </Template>
+                      <Template src="skin:left_2state_button.xml">
+                        <SetVariable name="ObjectName">PreviewIndicator</SetVariable>
+                        <SetVariable name="MinimumSize">30,21</SetVariable>
+                        <SetVariable name="MaximumSize">30,21</SetVariable>
+                        <SetVariable name="SizePolicy">f,f</SetVariable>
+                        <SetVariable name="left_connection_control"><Variable name="group"/>,play</SetVariable>
+                      </Template>
+                      <Template src="skin:left_2state_button.xml">
+                        <SetVariable name="MinimumSize">30,21</SetVariable>
+                        <SetVariable name="MaximumSize">30,21</SetVariable>
+                        <SetVariable name="SizePolicy">f,f</SetVariable>
+                        <SetVariable name="left_connection_control"><Variable name="group"/>,play_indicator</SetVariable>
+                      </Template>
+                    </Children>
+                  </WidgetGroup>
+
                 </Children>
               </WidgetGroup><!-- PlayGutterSmall -->
 
diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
index 7d51440131..e3a59a7c5e 100644
--- a/res/skins/Deere/style.qss
+++ b/res/skins/Deere/style.qss
@@ -96,13 +96,6 @@
   padding: 3px;
   qproperty-layoutAlignment: 'AlignBottom';
 }
-#PlayGutterSmall {
-  padding: 3px;
-  background-color: none;
-  qproperty-layoutAlignment: 'AlignBottom'; /*
-  border-left: 1px solid #222;
-  background-color: #664988;  */
-}
 
 #MixerBorder {
   background-color: #222;
@@ -1644,13 +1637,25 @@ WPushButton[value="2"]:hover,
   border: 1px solid transparent;
 }
 
-#PlayToggle[value="0"] {
+WPushButton#PlayToggle[value="0"] {
   image: url(skin:/icon/ic_play_48px.svg) no-repeat center center;
+  background-color: transparent;
 }
 
-#PlayToggle[value="1"] {
+WPushButton#PlayToggle[value="1"] {
   image: url(skin:/icon/ic_pause_48px.svg) no-repeat center center;
 }
+WPushButton#PreviewIndicator {
+  background-color: transparent;
+}
+/* Blue border for Play buttons when previewing from
+  Cue or Hotcue */
+WPushButton#PreviewIndicator[value="1"] {
+  border: 2px solid #0080BE;
+}
+WPushButton#PreviewIndicator[value="0"] {
+  border: none;
+}
 
 #ToolbarButton[value="1"] {
     color: #D2D2D2;
diff --git a/res/skins/LateNight/decks/deck_mini.xml b/res/skins/LateNight/decks/deck_mini.xml
index 8b94f40ea4..0e1cfe2d14 100644
--- a/res/skins/LateNight/decks/deck_mini.xml
+++ b/res/skins/LateNight/decks/deck_mini.xml
@@ -67,26 +67,24 @@
                         <SetVariable name="BtnSize">medium</SetVariable>
                         <SetVariable name="ConfigKey"><Variable name="Group"/>,play</SetVariable>
                         <SetVariable name="ConfigKeyRight"><Variable name="Group"/>,cue_default</SetVariable>
+                        <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play_latched</SetVariable>
                       </Template>
                       <PushButton>
+                        <ObjectName>PreviewIndicator</ObjectName>
+                        <Size>42f,26f</Size>
+                        <NumberStates>2</NumberStates>
+                        <Connection>
+                          <ConfigKey><Variable name="Group"/>,play</ConfigKey>
+                        </Connection>
+                      </PushButton>
+                      <PushButton>
                         <ObjectName>PlayIndicator</ObjectName>
                         <Size>42f,26f</Size>
                         <NumberStates>2</NumberStates>
-                        <RightClickIsPushButton>false</RightClickIsPushButton>
-                        <State>
-                          <Number>0</Number>
-                        </State>
-                        <State>
-                          <Number>1</Number>
-                        </State>
                         <Connection>
                           <ConfigKey><Variable name="Group"/>,play_indicator</ConfigKey>
                         </Connection>
                       </PushButton>
-                      <WidgetGroup>
-                        <ObjectName>PlayBg</ObjectName>
-                        <Size>42f,26f</Size>
-                      </WidgetGroup>
                     </Children>
                   </WidgetGroup><!-- Play + PlayBlink + default grey background -->
 
diff --git a/res/skins/LateNight/decks/row_5_transportLoopJump.xml b/res/skins/LateNight/decks/row_5_transportLoopJump.xml
index 0dec3fa84e..33cfcc209b 100644
--- a/res/skins/LateNight/decks/row_5_transportLoopJump.xml
+++ b/res/skins/LateNight/decks/row_5_transportLoopJump.xml
@@ -67,19 +67,28 @@
                 </Children>
               </WidgetGroup><!-- Reverse | Cue -->
 
-              <WidgetGroup><!-- Play + PlayBlink + default grey background -->
+              <WidgetGroup><!-- Play + PlayBlink + default dark background -->
                 <Layout>stacked</Layout>
                 <Size>68f,26f</Size>
                 <Children>
-                  <Template src="skin:/controls/button_2state_right.xml">
+                  <Template src="skin:/controls/button_2state_right_display.xml">
                     <SetVariable name="TooltipId">play_cue_set</SetVariable>
                     <SetVariable name="ObjectName">PlayDeck</SetVariable>
                     <SetVariable name="Size">68f,26f</SetVariable>
                     <SetVariable name="BtnSize">play</SetVariable>
                     <SetVariable name="ConfigKey"><Variable name="Group"/>,play</SetVariable>
                     <SetVariable name="ConfigKeyRight"><Variable name="Group"/>,cue_set</SetVariable>
+                    <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play_latched</SetVariable>
                   </Template>
                   <PushButton>
+                    <ObjectName>PreviewIndicator</ObjectName>
+                    <Size>68f,26f</Size>
+                    <NumberStates>2</NumberStates>
+                    <Connection>
+                      <ConfigKey><Variable name="Group"/>,play</ConfigKey>
+                    </Connection>
+                  </PushButton>
+                  <PushButton>
                     <ObjectName>PlayIndicator</ObjectName>
                     <Size>68f,26f</Size>
                     <NumberStates>2</NumberStates>
@@ -87,15 +96,11 @@
                       <ConfigKey><Variable name="Group"/>,play_indicator</ConfigKey>
                     </Connection>
                   </PushButton>
-                  <WidgetGroup>
-                    <ObjectName>PlayBg</ObjectName>
-                    <Size>68f,26f</Size>
-                  </WidgetGroup>
                 </Children>
-              </WidgetGroup><!-- Play + PlayBlink + default grey background -->
+              </WidgetGroup><!-- Play + PlayBlink + default dark background -->
 
             </Children>
-          </WidgetGroup><!-- Play, Cue, Reverse -->
+          </WidgetGroup>
 
           <WidgetGroup><Size>2f,0min</Size></WidgetGroup><!--  = 2-10px wide -->
           <WidgetGroup><SizePolicy>i,min</SizePolicy><MaximumSize>8,</MaximumSize></WidgetGroup>
diff --git a/res/skins/LateNight/decks/row_5_transportLoopJump_compact.xml b/res/skins/LateNight/decks/row_5_transportLoopJump_compact.xml
index 6c1c57a882..b5af7442eb 100644
--- a/res/skins/LateNight/decks/row_5_transportLoopJump_compact.xml
+++ b/res/skins/LateNight/decks/row_5_transportLoopJump_compact.xml
@@ -14,32 +14,37 @@
         <MaximumSize>360,</MaximumSize>
         <Children>
 
-          <WidgetGroup><!-- Play + PlayBlink + default grey background -->
+          <WidgetGroup><!-- Play + PlayBlink + default dark background -->
             <Layout>stacked</Layout>
-            <Size>52f,26f</Size>
+            <Size>68f,26f</Size>
             <Children>
               <Template src="skin:/controls/button_2state_right_display.xml">
-                <SetVariable name="TooltipId">play_cue_default</SetVariable>
+                <SetVariable name="TooltipId">play_cue_set</SetVariable>
                 <SetVariable name="ObjectName">PlayDeck</SetVariable>
-                <SetVariable name="Size">52f,26f</SetVariable>
-                <SetVariable name="BtnSize">wide</SetVariable>
+                <SetVariable name="Size">68f,26f</SetVariable>
+                <SetVariable name="BtnSize">play</SetVariable>
                 <SetVariable name="ConfigKey"><Variable name="Group"/>,play</SetVariable>
-                <SetVariable name="ConfigKeyRight"><Variable name="Group"/>,cue_default</SetVariable>
+                <SetVariable name="ConfigKeyRight"><Variable name="Group"/>,cue_set</SetVariable>
+                <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play_latched</SetVariable>
               </Template>
               <PushButton>
+                <ObjectName>PreviewIndicator</ObjectName>
+                <Size>68f,26f</Size>
+                <NumberStates>2</NumberStates>
+                <Connection>
+                  <ConfigKey><Variable name="Group"/>,play</ConfigKey>
+                </Connection>
+              </PushButton>
+              <PushButton>
                 <ObjectName>PlayIndicator</ObjectName>
-                <Size>52f,26f</Size>
+                <Size>68f,26f</Size>
                 <NumberStates>2</NumberStates>
                 <Connection>
                   <ConfigKey><Variable name="Group"/>,play_indicator</ConfigKey>
                 </Connection>
               </PushButton>
-              <WidgetGroup>
-                <ObjectName>PlayBg</ObjectName>
-                <Size>52f,26f</Size>
-              </WidgetGroup>
             </Children>
-          </WidgetGroup><!-- Play + PlayBlink + default grey background -->
+          </WidgetGroup><!-- Play + PlayBlink + default dark background -->
 
           <PushButton>
             <TooltipId>cue_default_cue_gotoandstop</TooltipId>
diff --git a/res/skins/LateNight/samplers/sampler.xml b/res/skins/LateNight/samplers/sampler.xml
index 5f4214f101..d6f2d6cec9 100644
--- a/res/skins/LateNight/samplers/sampler.xml
+++ b/res/skins/LateNight/samplers/sampler.xml
@@ -82,8 +82,8 @@
 
                       <WidgetGroup>
                         <ObjectName>SamplerPlayBox</ObjectName>
-                        <Layout>horizontal</Layout>
-                        <SizePolicy>min,min</SizePolicy>
+                        <Layout>stacked</Layout>
+                        <SizePolicy>max,max</SizePolicy>
                         <Children>
                           <Template src="skin:/controls/button_2state_right_display.xml">
                             <SetVariable name="TooltipId">cue_gotoandplay_cue_default</SetVariable>
@@ -93,10 +93,18 @@
                             <SetVariable name="BtnSize">square_big</SetVariable>
                             <SetVariable name="ConfigKey"><Variable name="Group"/>,cue_gotoandplay</SetVariable>
                             <SetVariable name="ConfigKeyRight"><Variable name="Group"/>,cue_default</SetVariable>
-                            <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play</SetVariable>
+                            <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play_latched</SetVariable>
                           </Template>
+                          <PushButton>
+                            <ObjectName>PreviewIndicator</ObjectName>
+                            <Size>34f,34f</Size>
+                            <NumberStates>2</NumberStates>
+                            <Connection>
+                              <ConfigKey><Variable name="Group"/>,play</ConfigKey>
+                            </Connection>
+                          </PushButton>
                         </Children>
-                      </WidgetGroup><!-- SamplerPlayBox -->
+                      </WidgetGroup>
 
                       <WidgetGroup>
                         <ObjectName>OverviewBox</ObjectName>
diff --git a/res/skins/LateNight/samplers/sampler_mini.xml b/res/skins/LateNight/samplers/sampler_mini.xml
index c26c19d62e..ffba37ce7b 100644
--- a/res/skins/LateNight/samplers/sampler_mini.xml
+++ b/res/skins/LateNight/samplers/sampler_mini.xml
@@ -9,8 +9,8 @@
 
       <WidgetGroup>
         <ObjectName>SamplerPlayBoxMini</ObjectName>
-        <Layout>horizontal</Layout>
-        <SizePolicy>min,min</SizePolicy>
+        <Layout>stacked</Layout>
+        <SizePolicy>max,max</SizePolicy>
         <Children>
           <Template src="skin:/controls/button_2state_right_display.xml">
             <SetVariable name="TooltipId">cue_gotoandplay_cue_default</SetVariable>
@@ -20,13 +20,28 @@
             <SetVariable name="BtnSize">square_big</SetVariable>
             <SetVariable name="ConfigKey"><Variable name="Group"/>,cue_gotoandplay</SetVariable>
             <SetVariable name="ConfigKeyRight"><Variable name="Group"/>,cue_default</SetVariable>
-            <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play</SetVariable>
+            <SetVariable name="ConfigKeyDisp"><Variable name="Group"/>,play_latched</SetVariable>
           </Template>
+          <PushButton>
+            <ObjectName>PreviewIndicator</ObjectName>
+            <Size>34f,34f</Size>
+            <NumberStates>2</NumberStates>
+            <Connection>
+              <ConfigKey><Variable name="Group"/>,play</ConfigKey>
+            </Connection>
+          </PushButton>
+          <PushButton>
+            <ObjectName>PlayIndicator</ObjectName>
+            <Size>34f,34f</Size>
+            <NumberStates>2</NumberStates>
+            <Connection>
+              <ConfigKey><Variable name="Group"/>,play_indicator</ConfigKey>
+            </Connection>
+          </PushButton>
         </Children>
       </WidgetGroup>
 
       <WidgetGroup>
-        <ObjectName></ObjectName>
         <Layout>vertical</Layout>
         <Size>0me,36f</Size>
         <Children>
diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
index dfaf0b379b..91c758d618 100644
--- a/res/skins/LateNight/style_classic.qss
+++ b/res/skins/LateNight/style_classic.qss
@@ -1296,17 +1296,23 @@ QPushButton#pushButtonRecording:checked {
     border-image: url(skin:/classic/buttons/btn_embedded_library_active.svg) 2 2 2 2;
   }
 
-#BeatgridControls WPushButton, #BeatgridControlsToggle,
+#BeatgridControls WPushButton, WPushButton#BeatgridControlsToggle,
 #DeckRow_5_LoopCuesTransport WPushButton,
-#PlayDeck, #PlayIndicator, #PlayBg,
-#CueDeck, #PlayCueMini WPushButton,
-#LoopActivate,
-#RateControls WPushButton, #SyncDeck,
+WPushButton#PlayDeck,
+WPushButton#PreviewIndicator,
+WPushButton#PlayIndicator,
+WPushButton#CueDeck,
+#PlayCueMini WPushButton,
+WPushButton#LoopActivate,
+#RateControls WPushButton,
+WPushButton#SyncDeck,
+WPushButton#SyncSampler,
 #MixerContainer WPushButton,
 #FxUnitContainer WPushButton,
 #Sampler WPushButton,
+#SamplerMini WPushButton,
 #MicAuxRack WPushButton,
-#PlayPreview {
+WPushButton#PlayPreview {
   /* Limit background-color area to button area designed in SVG backpath. */
   margin: 1px;
   /* just to be sure the colored background doesn't overlap the rounded SVG border */
@@ -1322,7 +1328,7 @@ WPushButton#SamplerExpand,
 #SamplerSettingsMini WPushButton,
 WPushButton#CrossfaderButton,
 WPushButton#FxExpandOverlay,
-#LibExpand,
+WPushButton#LibExpand,
 #ToolBar WPushButton {
   margin: 0px;
   border-radius: 0px;
@@ -1331,17 +1337,22 @@ WPushButton#FxExpandOverlay,
 
 
 /************** button background colors **************************************/
+
+/* top-level buttons in transport, fx, micaux and others */
 #BeatgridControls WPushButton[displayValue="0"],
 #DeckRow_5_LoopCuesTransport WPushButton[displayValue="0"],
-#PlayBg, #PlayCueMini WPushButton[displayValue="0"],
-#CueDeck[displayValue="0"], #LoopActivate[displayValue="0"],
+#PlayCueMini WPushButton[displayValue="0"],
+WPushButton#CueDeck[displayValue="0"],
+WPushButton#PlayIndicator[value="0"],
+WPushButton#LoopActivate[displayValue="0"],
 #FxAssignButtons WPushButton[displayValue="0"],
 #VinylControls WPushButton[displayValue="0"],
 #KeyControls WPushButton[displayValue="0"],
-  WPushButton#VinylModeButton[displayValue="1"],
-  WPushButton#VinylModeButton[displayValue="2"],
+WPushButton#VinylModeButton[displayValue="1"],
+WPushButton#VinylModeButton[displayValue="2"],
 WPushButton#MixModeButton[displayValue="1"],
-#RateControls WPushButton[displayValue="0"], #SyncDeck[value="0"],
+#RateControls WPushButton[displayValue="0"],
+WPushButton#SyncDeck[value="0"],
 #MixerContainer WPushButton[displayValue="0"],
 #FxUnitContainer WPushButton[displayValue="0"],
 #Sampler WPushButton[displayValue="0"],
@@ -1353,23 +1364,27 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
 #DlgAutoDJ > QPushButton:enabled,
 #DlgRecording > QPushButton:enabled,
 #DlgAnalysis > QPushButton:enabled,
-#GuiToggleButton[displayValue="0"], #RecFeedback[displayValue="0"],
-#BroadcastButton[displayValue="0"], #SkinSettingsToggle[displayValue="0"] {
+WPushButton#GuiToggleButton[displayValue="0"],
+#RecFeedback[displayValue="0"],
+WPushButton#BroadcastButton[displayValue="0"],
+WPushButton#SkinSettingsToggle[displayValue="0"] {
   background-color: #262626;
 }
 
-/* Red */
+/* Red for 'active' status */
 #BeatgridControls WPushButton[value="1"],
 #RateControls WPushButton[value="1"],
 #SyncDeck[value="1"], #SyncSampler[displayValue="1"],
 WPushButton#PlayDeck[displayValue="1"],
 WPushButton#PlayDeckMini[displayValue="1"],
-#PlaySampler[displayValue="1"], #PlayPreview[displayValue="1"],
+WPushButton#PlaySampler[displayValue="1"],
+WPushButton#PlayPreview[displayValue="1"],
 WPushButton#PlayIndicator[displayValue="1"],
 #LibraryPreviewButton:checked,
 #CueDeck[displayValue="1"],
 WPushButton#Reverse[pressed="true"],
-#LoopControls WPushButton[value="1"], #LoopActivate[displayValue="1"],
+#LoopControls WPushButton[value="1"],
+#LoopActivate[displayValue="1"],
 #BeatjumpControls WPushButton[value="1"],
 #EQKillButtonBox WPushButton[displayValue="1"],
 #PflButton[value="1"],
@@ -1378,7 +1393,14 @@ WPushButton#Reverse[pressed="true"],
 #RecFeedback[displayValue="2"],
 QPushButton#pushButtonRecording:checked {
   background-color: #db0000;
-}
+  }
+  /* Red border for Play buttons when previewing from
+    Cue or Hotcue */
+  WPushButton#PreviewIndicator[value="1"] {
+    border: 3px solid #db0000;
+    /* work around round borders being painted outside the actual border area */
+    border-radius: 0px;
+  }
 
 /* Green for Fx buttons: QuickEffect + Fx 1/2 */
 #FxUnit1 #FxToggleButton[displayValue="1"],
@@ -1511,7 +1533,7 @@ QPushButton#pushButtonAutoDJ:checked,
 /* Special flat buttons */
 WPushButton#PlayDeck[displayValue="0"],
 WPushButton#PlayDeckMini[displayValue="0"],
-WPushButton#PlayIndicator[value="0"],
+WPushButton#PlaySampler[displayValue="0"],
 WPushButton#BpmTap[displayValue="0"],
 WPushButton#FxFocusButton[displayValue="0"],
 #SamplerSettings WPushButton[displayValue="0"],
diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
index 2c5cc067d8..4c47cb43cc 100644
--- a/res/skins/LateNight/style_palemoon.qss
+++ b/res/skins/LateNight/style_palemoon.qss
@@ -1509,19 +1509,22 @@ WEffectSelector,
     border-image: url(skin:/palemoon/buttons/btn_embedded_library_active.svg) 12 2 1 2;
   }
 
-#BeatgridControls WPushButton, #BeatgridControlsToggle,
+#BeatgridControls WPushButton, WPushButton#BeatgridControlsToggle,
 #DeckRow_5_LoopCuesTransport WPushButton,
-#PlayDeck, #PlayIndicator, #PlayBg,
-#CueDeck, #PlayCueMini WPushButton,
-#LoopActivate,
-#RateControls WPushButton,
-#SyncDeck, #SyncSampler,
+WPushButton#PlayDeck,
+WPushButton#PreviewIndicator,
+WPushButton#PlayIndicator,
+WPushButton#CueDeck,
+#PlayCueMini WPushButton,
+WPushButton#LoopActivate,
+WPushButton#RateControls WPushButton,
+WPushButton#SyncDeck, WPushButton#SyncSampler,
 #MixerContainer WPushButton,
 #FxUnitContainer WPushButton,
 #Sampler WPushButton,
 #SamplerMini WPushButton,
 #MicAuxRack WPushButton,
-#PlayPreview {
+WPushButton#PlayPreview {
   /* Limit background-color area to button area designed in SVG backpath. */
   margin: 1px;
   /* just to be sure the colored background doesn't overlap the rounded SVG border */
@@ -1548,13 +1551,15 @@ WPushButton#CrossfaderButton,
 
 /* top-level buttons in transport, fx, micaux and others */
 #DeckRow_5_LoopCuesTransport WPushButton[displayValue="0"],
-#PlayBg, #PlayCueMini WPushButton[displayValue="0"],
-#CueDeck[displayValue="0"], #LoopActivate[displayValue="0"],
+#PlayCueMini WPushButton[displayValue="0"],
+WPushButton#PlayIndicator[displayValue="0"],
+WPushButton#CueDeck[displayValue="0"],
+#SamplerPlayBox WPushButton#PreviewIndicator,
+WPushButton#LoopActivate[displayValue="0"],
 #KeyControls WPushButton[displayValue="0"],
 #EQKillButtonBox WPushButton[displayValue="0"],
 WPushButton#QuickEffectButton[displayValue="0"],
-#FxToggleButton[displayValue="0"],
-WPushButton#PlaySampler[displayValue="0"],
+WPushButton#FxToggleButton[displayValue="0"],
 #MicAuxUnit WPushButton[displayValue="0"],
 #MicDuckingContainer WPushButton[displayValue="0"],
 WBeatSpinBox,
@@ -1565,16 +1570,16 @@ WBeatSpinBox::down-button {
   /* dim buttons in top-level containers */
   #LoopControls WPushButton[displayValue="0"],
   #BeatjumpControls WPushButton[displayValue="0"],
-  #SyncDeck[value="0"],
+  WPushButton#SyncDeck[value="0"],
   WBeatSpinBox::up-button,
   WBeatSpinBox::down-button,
   WPushButton#LoopActivate[displayValue="0"], /* in compact deck */
-  #FxParameterButton[displayValue="0"],
+  WPushButton#FxParameterButton[displayValue="0"],
   #LibraryContainer QHeaderView,
   #LibraryContainer QHeaderView::section {
     background-color: #171719;
   }
-  /*  even buttons in 2nd level containers */
+  /* even buttons in 2nd level containers */
   #FxAssignButtons WPushButton[displayValue="0"],
   #VinylControls WPushButton[displayValue="0"],
   #KeyControls WPushButton[displayValue="0"],
@@ -1583,14 +1588,14 @@ WBeatSpinBox::down-button {
   WPushButton#HotcueButton[displayValue="0"],
   WPushButton#SpecialCueButton[displayValue="0"],
   #RateControls WPushButton[displayValue="0"],
-  #PflButton[displayValue="0"],
-  #MixModeButton[displayValue="0"],
-  #MixModeButton[displayValue="1"],
+  WPushButton#PflButton[displayValue="0"],
+  WPushButton#MixModeButton[displayValue="0"],
+  WPushButton#MixModeButton[displayValue="1"],
   WEffectSelector,
   #fadeModeCombobox,
-  #SamplerContainer #SyncSampler[displayValue="0"],
-  #SamplerContainer #PflButton[displayValue="0"],
-  #MicAuxUnit #PflButton[displayValue="0"],
+  #SamplerContainer WPushButton#SyncSampler[displayValue="0"],
+  #SamplerContainer WPushButton#PflButton[displayValue="0"],
+  #MicAuxUnit WPushButton#PflButton[displayValue="0"],
   WPushButton#MicAuxAdd {
     background-color: #1e1e20;
   }
@@ -1625,7 +1630,8 @@ WPushButton#PlayIndicator[displayValue="1"],
 #LibraryPreviewButton:checked,
 #CueDeck[displayValue="1"],
 WPushButton#Reverse[pressed="true"],
-#LoopActivate[value="1"], #Reloop[value="1"],
+#LoopActivate[value="1"],
+#Reloop[value="1"],
 #SyncSampler[displayValue="1"],
 #MicTalk[value="1"], #AuxPlay[value="1"],
 #MicDucking[value="1"],
@@ -1635,7 +1641,14 @@ WPushButton#Reverse[pressed="true"],
 QPushButton#pushButtonAutoDJ:checked,
 #DlgAnalysis > QPushButton:checked {
   background-color: #b24c12;
-}
+  }
+  /* Orange border for Play buttons when previewi