Merge pull request #2619 from ronso0/play-indicators

Skins :: separate play button / play_indicator + related improvements

30 files changed, 450 insertions, 539 deletions

diff --git a/res/skins/Deere/deck_controls_row.xml b/res/skins/Deere/deck_controls_row.xml
index 948f0b557c..b82b1104cd 100644
--- a/res/skins/Deere/deck_controls_row.xml
+++ b/res/skins/Deere/deck_controls_row.xml
@@ -52,16 +52,28 @@
           <!-- Workaround for layout spacing -->
           <WidgetGroup><Size>0min,2f</Size></WidgetGroup>
 
-          <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>
-            <SetVariable name="MaximumSize"><Variable name="HorizontalStretchButtonMaximumSize"/></SetVariable>
-            <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_indicator</SetVariable>
-          </Template>
+          <WidgetGroup><!-- Play button + play_indicator -->
+            <Layout>stacked</Layout>
+            <SizePolicy>me,me</SizePolicy>
+            <Children>
+              <Template src="skin:left_right_2state_button.xml">
+                <SetVariable name="TooltipId">play_cue_set</SetVariable>
+                <SetVariable name="ObjectName">PlayToggle</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>
+                <SetVariable name="right_connection_control"><Variable name="group"/>,cue_set</SetVariable>
+              </Template>
+              <Template src="skin:left_2state_button.xml">
+                <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_indicator</SetVariable>
+              </Template>
+            </Children>
+          </WidgetGroup>
+
         </Children>
       </WidgetGroup>
     </Children>
diff --git a/res/skins/Deere/deck_small.xml b/res/skins/Deere/deck_small.xml
index cc7fa97387..a3c04c50dd 100644
--- a/res/skins/Deere/deck_small.xml
+++ b/res/skins/Deere/deck_small.xml
@@ -167,20 +167,25 @@
                 </Children>
               </WidgetGroup><!-- DeckTextRowSmall -->
 
-              <WidgetGroup>
+              <WidgetGroup><!-- Play button + play_indicator -->
                 <ObjectName>PlayGutterSmall</ObjectName>
-                <Layout>horizontal</Layout>
+                <Layout>stacked</Layout>
                 <SizePolicy>f,me</SizePolicy>
                 <Children>
-                  <Template src="skin:left_right_display_2state_button.xml">
-                    <SetVariable name="TooltipId">play_cue_set</SetVariable>
+                  <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_set</SetVariable>
-                    <SetVariable name="display_connection_control"><Variable name="group"/>,play_indicator</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>
                 </Children>
               </WidgetGroup>
diff --git a/res/skins/Deere/sampler_text_row.xml b/res/skins/Deere/sampler_text_row.xml
index 0697a252a3..9d69f868c0 100644
--- a/res/skins/Deere/sampler_text_row.xml
+++ b/res/skins/Deere/sampler_text_row.xml
@@ -33,8 +33,8 @@
                 <SetVariable name="state_0_pressed">icon/ic_play_48px.svg</SetVariable>
                 <SetVariable name="state_0_unpressed">icon/ic_play_48px.svg</SetVariable>
                 <SetVariable name="state_1_text"></SetVariable>
-                <SetVariable name="state_1_pressed">icon/ic_play_48px.svg</SetVariable>
-                <SetVariable name="state_1_unpressed">icon/ic_play_48px.svg</SetVariable>
+                <SetVariable name="state_1_pressed">icon/ic_pause_48px.svg</SetVariable>
+                <SetVariable name="state_1_unpressed">icon/ic_pause_48px.svg</SetVariable>
                 <SetVariable name="left_connection_control"><Variable name="group"/>,cue_gotoandplay</SetVariable>
                 <SetVariable name="right_connection_control"><Variable name="group"/>,cue_default</SetVariable>
                 <SetVariable name="display_connection_control"><Variable name="group"/>,play</SetVariable>
diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
index f89e62e975..df6610376d 100644
--- a/res/skins/Deere/style.qss
+++ b/res/skins/Deere/style.qss
@@ -1542,7 +1542,8 @@ WPushButton {
     font-weight: bold;
 }
 
-WPushButton:hover {
+WPushButton:hover,
+#PlayToggle:hover {
     color: #D2D2D2;
     background-color: #5F5F5F;
     border: 1px solid #5F5F5F;
@@ -1550,14 +1551,16 @@ WPushButton:hover {
 
 /*"Pressed" state*/
 WPushButton[value="1"],
-WPushButton[value="2"] {
+WPushButton[value="2"],
+#PlayToggle[value="1"] {
     color: #FDFDFD;
     background-color: #006596;
     border: 1px solid #006596;
 }
 
 WPushButton[value="1"]:hover,
-WPushButton[value="2"]:hover {
+WPushButton[value="2"]:hover,
+#PlayToggle[value="1"]:hover {
     color: #FDFDFD;
     background-color: #0080BE;
     border: 1px solid #0080BE;
@@ -1571,6 +1574,11 @@ WPushButton[value="2"]:hover {
     color: #1f1e1e;
 }
 
+#PlayToggle {
+  background-color: none;
+  border: 1px solid transparent;
+}
+
 #PlayToggle[value="0"] {
   image: url(skin:/icon/ic_play_48px.svg) no-repeat center center;
 }
diff --git a/res/skins/LateNight/aux_unit.xml b/res/skins/LateNight/aux_unit.xml
index 1b0ebc22e4..707274a882 100644
--- a/res/skins/LateNight/aux_unit.xml
+++ b/res/skins/LateNight/aux_unit.xml
@@ -154,13 +154,13 @@
               </Label>
 
               <WidgetGroup>
-                <ObjectName>MicAuxPlayButtonBox</ObjectName>
+                <ObjectName>MicAuxPlayBox</ObjectName>
                 <Layout>vertical</Layout>
                 <SizePolicy>min,me</SizePolicy>
                 <Children>
                   <Template src="skin:button_2state.xml">
                     <SetVariable name="TooltipId">master_enable</SetVariable>
-                    <SetVariable name="ObjectName">AuxPlayButton</SetVariable>
+                    <SetVariable name="ObjectName">PlayAux</SetVariable>
                     <SetVariable name="Size">42f,26f</SetVariable>
                     <SetVariable name="btn_type">embedded</SetVariable>
                     <SetVariable name="btn_format">medium</SetVariable>
diff --git a/res/skins/LateNight/buttons_classic/btn_elevated_play.svg b/res/skins/LateNight/buttons_classic/btn_elevated_play.svg
index 3f8ab8d779..d0ed2b031d 100644
--- a/res/skins/LateNight/buttons_classic/btn_elevated_play.svg
+++ b/res/skins/LateNight/buttons_classic/btn_elevated_play.svg
@@ -1,18 +1,18 @@
-<svg width="68" height="26" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<svg width="68" height="26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 	<defs>
-		<linearGradient id="a" x1="1.00003" x2="25.000031" y1="-26" y2="-26" gradientTransform="matrix(1 0 0 1.3265306 .80952381 28.220564)" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#393939" offset="0"/>
-			<stop stop-color="#393939" offset=".30102351"/>
-			<stop stop-color="#141414" offset="1"/>
-		</linearGradient>
-		<linearGradient id="b" x1="2" x2="24" y1="12" y2="12" gradientTransform="matrix(.95652175 0 0 2.7826086 .56518906 -64.608695)" gradientUnits="userSpaceOnUse">
+		<linearGradient id="a" x1="2" x2="24" y1="12" y2="12" gradientTransform="matrix(.95652175 0 0 2.7826086 .565189 -64.608695)" gradientUnits="userSpaceOnUse">
 			<stop stop-opacity=".0047619" offset="0"/>
 			<stop stop-opacity="0" offset=".5"/>
 			<stop stop-opacity=".47451" offset="1"/>
 		</linearGradient>
+		<linearGradient id="b" x1="1.00003" x2="24.190475" y1="-26" y2="-26" gradientTransform="matrix(1 0 0 1.3265306 .8095239 28.220564)" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#aeaeae" stop-opacity=".07843138" offset="0"/>
+			<stop stop-color="#5b5b5b" stop-opacity=".07843138" offset=".30102351"/>
+			<stop stop-opacity=".39215687" offset="1"/>
+		</linearGradient>
 	</defs>
-	<path d="m66.31446 2.17593c.11592.25262.18555.52951.18555.82422v20c0 1.0994-.9006 1.965574-2 1.965572l-61.50001-.00012c-.6598637-1e-6-1.135675-.352003-1.325-.511743.2090942.790888.7641575 1.546139 1.8242 1.546141l62.00079 1e-4c1.108 2e-6 2-.892 2-2v-20c0-.81658-.48717-1.5129-1.1855-1.8242z" fill="#020201"/>
-	<rect transform="rotate(90)" x="1.50003" y="-66.5" width="23" height="65" rx=".30000001" ry=".3979592" fill="none" stroke="url(#a)" stroke-linecap="round" stroke-linejoin="round" style="paint-order:fill markers stroke"/>
+	<path d="m67 2.7070312v21.4921878c0 .261088-.144484.48515-.314453.613281-.16997.12813-.372602.1875-.583985.1875h-64.2031245c-.00405 0-.00767-.0019-.011719-.002.2913743.560297.8039315 1.001998 1.6132815 1.002h62c1.108 2e-6 2-.892 2-2v-20c0-.5008592-.197131-.943691-.5-1.2929688z"/>
 	<rect transform="rotate(90)" x="2" y="-66" width="22" height="64" color="#000000" fill-opacity=".09019608" stroke-width=".99999988"/>
-	<rect transform="rotate(90)" x="2" y="-66" width="22" height="64" color="#000000" fill="url(#b)" stroke-width=".99999988"/>
+	<rect transform="rotate(90)" x="1" y="-67" width="24" height="66" rx=".89999998" ry=".89999998" color="#000000" fill="url(#a)" stroke-width=".99999988"/>
+	<rect transform="rotate(90)" x="1.50003" y="-66.5" width="23" height="65" rx=".30000001" ry=".3979592" fill="none" stroke="url(#b)" stroke-linecap="round" stroke-linejoin="round" style="paint-order:fill markers stroke"/>
 </svg>
diff --git a/res/skins/LateNight/deck_mini.xml b/res/skins/LateNight/deck_mini.xml
index 101525fc94..aed4e0e7ae 100644
--- a/res/skins/LateNight/deck_mini.xml
+++ b/res/skins/LateNight/deck_mini.xml
@@ -126,18 +126,37 @@
 
           <WidgetGroup>
             <ObjectName>PlayContainerSmall</ObjectName>
-            <Layout>horizontal</Layout>
+            <Layout>stacked</Layout>
+            <Size>37f,46f</Size>
             <Children>
               <Template src="skin:button_2state_right_display.xml">
-                <SetVariable name="TooltipId">play_cue_set</SetVariable>
-                <SetVariable name="ObjectName">PlayButtonDeckMini</SetVariable>
+                <SetVariable name="TooltipId">play_cue_default</SetVariable>
+                <SetVariable name="ObjectName">PlayDeckMini</SetVariable>
                 <SetVariable name="Size">34f,34f</SetVariable>
                 <SetVariable name="btn_type"><Variable name="TopRegion_btn_type"/></SetVariable>
                 <SetVariable name="btn_format">square_big</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_indicator</SetVariable>
+                <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_default</SetVariable>
               </Template>
+              <PushButton>
+                <ObjectName>PlayIndicator</ObjectName>
+                <Size>34f,34f</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>34f,34f</Size>
+              </WidgetGroup>
             </Children>
           </WidgetGroup><!-- PlayContainerSmall -->
 
diff --git a/res/skins/LateNight/deck_row_5_transportLoopJump.xml b/res/skins/LateNight/deck_row_5_transportLoopJump.xml
index 4a471b149e..e8506e8dc2 100644
--- a/res/skins/LateNight/deck_row_5_transportLoopJump.xml
+++ b/res/skins/LateNight/deck_row_5_transportLoopJump.xml
@@ -314,15 +314,39 @@
                 </Children>
               </WidgetGroup><!-- Reverse | Cue -->
 
-              <Template src="skin: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="btn_format">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_indicator</SetVariable>
-              </Template>
+              <WidgetGroup><!-- Play + PlayBlink + default grey background -->
+                <Layout>stacked</Layout>
+                <SizePolicy>min,min</SizePolicy>
+                <Children>
+                  <Template src="skin:button_2state_right.xml">
+                    <SetVariable name="TooltipId">play_cue_set</SetVariable>
+                    <SetVariable name="ObjectName">PlayDeck</SetVariable>
+                    <SetVariable name="Size">68f,26f</SetVariable>
+                    <SetVariable name="btn_format">play</SetVariable>
+                    <SetVariable name="ConfigKey"><Variable name="group"/>,play</SetVariable>
+                    <SetVariable name="ConfigKeyRight"><Variable name="group"/>,cue_set</SetVariable>
+                  </Template>
+                  <PushButton>
+                    <ObjectName>PlayIndicator</ObjectName>
+                    <Size>68f,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>68f,26f</Size>
+                  </WidgetGroup>
+                </Children>
+              </WidgetGroup><!-- Play + PlayBlink + default grey background -->
 
             </Children>
           </WidgetGroup><!-- /HotCues, Play, Cue, Reverse -->
diff --git a/res/skins/LateNight/mic_unit.xml b/res/skins/LateNight/mic_unit.xml
index c8414a7f58..7895e2224e 100644
--- a/res/skins/LateNight/mic_unit.xml
+++ b/res/skins/LateNight/mic_unit.xml
@@ -154,13 +154,13 @@
               </Label>
 
               <WidgetGroup>
-                <ObjectName>MicAuxPlayButtonBox</ObjectName>
+                <ObjectName>MicAuxPlayBox</ObjectName>
                 <Layout>vertical</Layout>
                 <SizePolicy>min,me</SizePolicy>
                 <Children>
                   <Template src="skin:button_2state.xml">
                     <SetVariable name="TooltipId">microphone_talkover</SetVariable>
-                    <SetVariable name="ObjectName">MicTalkButton</SetVariable>
+                    <SetVariable name="ObjectName">MicTalk</SetVariable>
                     <SetVariable name="Size">42f,26f</SetVariable>
                     <SetVariable name="btn_type">embedded</SetVariable>
                     <SetVariable name="btn_format">medium</SetVariable>
diff --git a/res/skins/LateNight/preview_deck.xml b/res/skins/LateNight/preview_deck.xml
index 9d59628d52..f7830be99d 100644
--- a/res/skins/LateNight/preview_deck.xml
+++ b/res/skins/LateNight/preview_deck.xml
@@ -97,7 +97,7 @@
                     <Children>
                       <Template src="skin:button_2state_right_display.xml">
                         <SetVariable name="TooltipId">cue_gotoandplay_cue_default</SetVariable>
-                        <SetVariable name="ObjectName">PlayButtonPreview</SetVariable>
+                        <SetVariable name="ObjectName">PlayPreview</SetVariable>
                         <SetVariable name="Size">34f,34f</SetVariable>
                         <SetVariable name="btn_type">embedded</SetVariable>
                         <SetVariable name="btn_format">square_big</SetVariable>
diff --git a/res/skins/LateNight/sampler.xml b/res/skins/LateNight/sampler.xml
index 20ecb290d1..12624b3268 100644
--- a/res/skins/LateNight/sampler.xml
+++ b/res/skins/LateNight/sampler.xml
@@ -59,13 +59,13 @@
                 <Children>
                   <Template src="skin:button_2state_right_display.xml">
                     <SetVariable name="TooltipId">cue_gotoandplay_cue_default</SetVariable>
-                    <SetVariable name="ObjectName">PlayButtonSampler</SetVariable>
+                    <SetVariable name="ObjectName">PlaySampler</SetVariable>
                     <SetVariable name="Size">34f,34f</SetVariable>
                     <SetVariable name="btn_type"><Variable name="TopRegion_btn_type"/></SetVariable>
                     <SetVariable name="btn_format">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_indicator</SetVariable>
+                    <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play</SetVariable>
                   </Template>
                 </Children>
               </WidgetGroup>
diff --git a/res/skins/LateNight/sampler_mini.xml b/res/skins/LateNight/sampler_mini.xml
index 675eeec5d3..e4ed10f166 100644
--- a/res/skins/LateNight/sampler_mini.xml
+++ b/res/skins/LateNight/sampler_mini.xml
@@ -14,13 +14,13 @@
         <Children>
           <Template src="skin:button_2state_right_display.xml">
             <SetVariable name="TooltipId">cue_gotoandplay_cue_default</SetVariable>
-            <SetVariable name="ObjectName">PlayButtonSampler</SetVariable>
+            <SetVariable name="ObjectName">PlaySampler</SetVariable>
             <SetVariable name="Size">34f,34f</SetVariable>
             <SetVariable name="btn_type"><Variable name="TopRegion_btn_type"/></SetVariable>
             <SetVariable name="btn_format">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_indicator</SetVariable>
+            <SetVariable name="ConfigKeyDisp"><Variable name="group"/>,play</SetVariable>
           </Template>
         </Children>
       </WidgetGroup>
diff --git a/res/skins/LateNight/style.qss b/res/skins/LateNight/style.qss
index 11638cc063..6004e8503c 100644
--- a/res/skins/LateNight/style.qss
+++ b/res/skins/LateNight/style.qss
@@ -591,18 +591,19 @@ WEffectSelector:open {
 }
 
 #RateControls WPushButton, #SyncButton,
-#DeckRow_5_LoopCuesTransport WPushButton,
+#DeckRow_5_LoopCuesTransport WPushButton, #PlayBg,
+#PlayContainerSmall WPushButton,
 #PflButton, #EQKillButton, #QuickEffectButton,
-#PlayButtonSampler, #PlayButtonDeckMini,
+#PlaySampler, #PlayDeckMini,
 #SamplerButtons WPushButton,
 #SamplerSyncButton,
 #FxUnitControlsExpanded WPushButton, #FxUnitControlsCollapsed  WPushButton,
 #FxExpandCollapseButton,
 #FxAssignButton, #FxToggleButton, #FxParameterButton, #FxFocusButton,
 #SplitCueButton,
-#PlayButtonPreview,
+#PlayPreview,
 #BeatgridButtons WPushButton,
-#MicTalkButton, #AuxPlayButton, #MicAuxAddButton, #MicDuckingButton {
+#MicTalk, #PlayAux, #MicAuxAddButton, #MicDuckingButton {
   /* limit background to button surface resulting from SVG backpath.
     border width wouldn't be applied.
     otoh, margin would set in the colored background area and not
@@ -621,11 +622,11 @@ WEffectSelector:open {
 #QuickEffectButton[displayValue="0"],
 #FxUnitControlsCollapsed WPushButton, #FxUnitControlsExpanded WPushButton,
 #FxExpandCollapseButton,
-#PlayButtonSampler[displayValue="0"], #PlayButtonDeckMini[displayValue="0"],
+#PlaySampler[displayValue="0"], #PlayDeckMini[displayValue="0"],
 #SamplerSyncButton[displayValue="0"],
-#MicTalkButton[value="0"], #AuxPlayButton[value="0"], #MicAuxAddButton,
+#MicTalk[value="0"], #PlayAux[value="0"], #MicAuxAddButton,
 #MicDuckingButton[value="0"],
-#PlayButtonPreview[displayValue="0"],
+#PlayPreview[displayValue="0"],
 QPushButton#pushButtonAutoDJ:enabled:!checked,
 #DlgMissing > QPushButton:enabled,
 #DlgHidden > QPushButton:enabled,
@@ -643,7 +644,7 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
 /* elevated buttons & embedded buttons in top row & toolbar
       brighter bg color to enhance contrast in darker containers
       and with small size respectively */
-#DeckRow_5_LoopCuesTransport WPushButton[value="0"],
+#DeckRow_5_LoopCuesTransport WPushButton[value="0"], #PlayBg,
 #HotcueButton,
 #FxAssignButton[displayValue="0"], #FxFocusButton[displayValue="0"],
 #FxToggleButton[displayValue="0"], #FxParameterButton[displayValue="0"],
@@ -651,6 +652,14 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
 #MicAuxGainPFlContainer WPushButton[displayValue="0"] {
   background-color: #2c2c2c;
 }
+/* Exception: #PlayDeck is transparent. #PlayIndicator & #PlayBg shine through */
+WPushButton#PlayDeck[value="0"],
+WPushButton#PlayDeck[value="1"],
+WPushButton#PlayDeckMini[value="0"],
+WPushButton#PlayDeckMini[value="1"],
+WPushButton#PlayIndicator[value="0"] {
+  background-color: none;
+}
 
 /* Green/Lime Fx-related buttons */
 #FxToggleButton[displayValue="1"], #QuickEffectButton[displayValue="1"],
@@ -672,20 +681,15 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
 /* define red buttons in DeckRow_5_LoopCuesTransport indivually,
 because somehow bg color for #SpecialCueButton can't be overwritten */
 #LoopControls WPushButton[value="1"], #BeatjumpControls WPushButton[value="1"],
-#CueDeck[value="1"], #Reverse[value="1"],
-/* Indicating play_from_cue. Not working 100%, will be fixed later on
-#PlayDeck[value="1"][highlight="0"], #PlayDeck[value="1"][highlight="1"],
-#PlayButtonDeckMini[value="1"][highlight="0"], #PlayButtonDeckMini[value="1"][highlight="1"],
-#PlayButtonSampler[value="1"][highlight="0"], #PlayButtonSampler[value="1"][highlight="1"], */
-#PlayDeck[displayValue="1"],
-#PlayButtonDeckMini[displayValue="1"],
-#PlayButtonSampler[displayValue="1"],
+#CueDeck[value="1"], #Reverse[value="1"], #PlayIndicator[displayValue="1"],
+#PlayDeckMini[displayValue="1"],
+#PlaySampler[displayValue="1"],
 #PflButton[value="1"],
 #SamplerSyncButton[displayValue="1"],
 #EQKillButton[displayValue="1"],
-#MicTalkButton[value="1"], #AuxPlayButton[value="1"],
+#MicTalk[value="1"], #PlayAux[value="1"],
 #MicDuckingButton[value="1"],
-#PlayButtonPreview[displayValue="1"],
+#PlayPreview[displayValue="1"],
 QPushButton#pushButtonRecording:checked,
 #RecFeedback[displayValue="2"],
 #BeatgridButtons WPushButton[value="1"],
@@ -701,10 +705,6 @@ QPushButton#pushButtonRecording:checked,
 }
 
 /* Orange/yellow */
-/* Play bg when playing from Cue / hotcue
-#PlayDeck[value="0"][highlight="1"],
-#PlayButtonDeckMini[value="0"][highlight="1"],
-#PlayButtonSampler[value="0"][highlight="1"], */
 #VinylButton[displayValue="1"], #VinylButton[displayValue="2"],
 #FxFocusButton[displayValue="1"],
 #GuiToggleButton[displayValue="1"], #GuiToggleButton[displayValue="2"],
@@ -864,14 +864,14 @@ QPushButton#pushButtonAutoDJ:checked,
     image: url(skin:/buttons_classic/btn__splitcue_active.svg) no-repeat center center;
   }
 
-#PlayButtonSampler[value="0"],
-#PlayButtonDeckMini[value="0"],
-#PlayButtonPreview[displayValue="0"] {
+#PlaySampler[value="0"],
+#PlayDeckMini[value="0"],
+#PlayPreview[displayValue="0"] {
   image: url(skin:/buttons_classic/btn__play_sampler.svg) no-repeat center center;
   }
-  #PlayButtonSampler[value="1"],
-  #PlayButtonDeckMini[value="1"],
-  #PlayButtonPreview[displayValue="1"] {
+  #PlaySampler[value="1"],
+  #PlayDeckMini[value="1"],
+  #PlayPreview[displayValue="1"] {
     image: url(skin:/buttons_classic/btn__pause_sampler.svg) no-repeat center center;
   }
 
@@ -995,10 +995,10 @@ QPushButton#pushButtonAutoDJ:checked,
       image: url(skin:/buttons_classic/btn__beats_faster.svg) no-repeat center center;
     }
 
-#MicTalkButton {
+#MicTalk {
   image: url(skin:/buttons_classic/btn__mic_talk.svg) no-repeat center center;
 }
-#AuxPlayButton {
+#PlayAux {
   image: url(skin:/buttons_classic/btn__aux_play.svg) no-repeat center center;
 }
 #MicAuxAddButton {
@@ -1237,7 +1237,7 @@ QPushButton#pushButtonRepeatPlaylist:!checked {
   }
   #PlayContainerSmall {
     margin: 1px 0px;
-    padding: 0px 1px 0px 2px;
+    padding: 5px 1px 0px 2px;
     border-width: 0px 0px 0px 1px;
   }
   #MiniDeckSpinnyCoverContainer {
@@ -1657,7 +1657,7 @@ WBeatSpinBox,
         qproperty-alignment: 'AlignCenter | AlignTop';
         padding: 0px 0px 3px 1px;
       }
-      #MicAuxPlayButtonBox {
+      #MicAuxPlayBox {
         qproperty-alignment: 'AlignCenter | AlignBottom';
         padding: 0px 0px 2px 1px;
       }
diff --git a/res/skins/LateNight/style_flip.qss b/res/skins/LateNight/style_flip.qss
index c64ac9df9f..b8b32c4c43 100644
--- a/res/skins/LateNight/style_flip.qss
+++ b/res/skins/LateNight/style_flip.qss
@@ -290,11 +290,11 @@ WSearchLineEdit {
 #QuickEffectButton[displayValue="0"],
 #FxUnitControlsCollapsed WPushButton, #FxUnitControlsExpanded WPushButton,
 #FxExpandCollapseButton,
-#PlayButtonSampler[displayValue="0"], #PlayButtonDeckMini[displayValue="0"],
+#PlaySampler[displayValue="0"], #PlayDeckMini[displayValue="0"],
 #SamplerSyncButton[displayValue="0"],
-#MicTalkButton[value="0"], #AuxPlayButton[value="0"], #MicAuxAddButton,
+#MicTalk[value="0"], #PlayAux[value="0"], #MicAuxAddButton,
 #MicDuckingButton[value="0"],
-#PlayButtonPreview[displayValue="0"],
+#PlayPreview[displayValue="0"],
 #DlgMissing > QPushButton:enabled:!checked,
 #DlgHidden > QPushButton:enabled:!checked,
 #DlgAutoDJ > QPushButton:enabled:!checked,
@@ -471,14 +471,14 @@ WBeatSpinBox#Spinbox_embedded:focus,
     image: url(skin:/buttons_flip/btn__splitcue_active.svg) no-repeat center center;
   }
 
-#PlayButto