Merge branch 'master' of github.com:mixxxdj/mixxx into track-colors-from-controller

39 files changed, 183 insertions, 234 deletions

diff --git a/res/controllers/Roland_DJ-505-scripts.js b/res/controllers/Roland_DJ-505-scripts.js
index 212d43e0d3..89264bf625 100644
--- a/res/controllers/Roland_DJ-505-scripts.js
+++ b/res/controllers/Roland_DJ-505-scripts.js
@@ -598,35 +598,62 @@ DJ505.Deck = function(deckNumbers, offset) {
 
     this.sync = new components.Button({
         midi: [0x90 + offset, 0x02],
-        outKey: "sync_enabled",
+        group: "[Channel" + deckNumbers + "]",
+        outKey: "sync_mode",
+        flickerState: false,
         output: function(value, _group, _control) {
-            midi.sendShortMsg(this.midi[0], value ? 0x02 : 0x03, 0x7F);
+            if (value === 2) {
+                value = this.flickerState;
+            }
+            midi.sendShortMsg(this.midi[0], value ? 0x02 : 0x03, this.on);
+        },
+        input: function(channel, control, value, _status, _group) {
+            if (value) {
+                this.longPressTimer = engine.beginTimer(this.longPressTimeout, function() {
+                    this.onLongPress();
+                    this.longPressTimer = 0;
+                }, true);
+            } else if (this.longPressTimer !== 0) {
+                // Button released after short press
+                engine.stopTimer(this.longPressTimer);
+                this.longPressTimer = 0;
+                this.onShortPress();
+            }
         },
         unshift: function() {
-            this.input = function(channel, control, value, status, _group) {
-                if (this.isPress(channel, control, value, status)) {
-                    script.triggerControl(this.group, "beatsync", 1);
-                    if (engine.getValue(this.group, "sync_enabled") === 0) {
-                        this.longPressTimer = engine.beginTimer(this.longPressTimeout, function() {
-                            engine.setValue(this.group, "sync_enabled", 1);
-                            this.longPressTimer = 0;
-                        }, true);
-                    }
+            this.onShortPress = function() {
+                script.triggerControl(this.group, "beatsync", 1);
+            };
+            this.onLongPress = function() {
+                if (engine.getValue(this.group, "sync_enabled")) {
+                    script.toggleControl(this.group, "sync_master");
                 } else {
-                    if (this.longPressTimer !== 0) {
-                        engine.stopTimer(this.longPressTimer);
-                        this.longPressTimer = 0;
-                    }
+                    engine.setValue(this.group, "sync_enabled", 1);
                 }
             };
         },
         shift: function() {
-            this.input = function(channel, control, value, _status, _group) {
-                if (value) {
-                    engine.setValue(this.group, "sync_enabled", 0);
-                }
+            this.onShortPress = function() {
+                engine.setValue(this.group, "sync_enabled", 0);
+            };
+            this.onLongPress = function() {
+                script.toggleControl(this.group, "quantize");
             };
         },
+        connect: function() {
+            components.Button.prototype.connect.call(this); // call parent connect
+            this.flickerTimer = engine.beginTimer(500, function() {
+                this.flickerState = !this.flickerState;
+                this.trigger();
+            });
+        },
+        disconnect: function() {
+            components.Button.prototype.disconnect.call(this); // call parent disconnect
+            if (this.flickerTimer) {
+                engine.stopTimer(this.flickerTimer);
+                this.flickerTimer = 0;
+            }
+        },
     });
 
     // =============================== MIXER ====================================
@@ -659,21 +686,25 @@ DJ505.Deck = function(deckNumbers, offset) {
     });
 
     this.tapBPM = new components.Button({
-        input: function(channel, control, value, status, group) {
-            if (this.isPress(channel, control, value, status, group)) {
-                script.triggerControl(group, "beats_translate_curpos");
-                script.triggerControl(group, "bpm_tap", 1);
-                this.longPressTimer = engine.beginTimer(
-                    this.longPressTimeout,
-                    function() {
-                        script.triggerControl(group, "beats_translate_match_alignment");
-                    },
-                    true
-                );
-            } else {
+        input: function(_channel, _control, value, _status, group) {
+            if (value) {
+                this.longPressTimer = engine.beginTimer(this.longPressTimeout, function() {
+                    this.onLongPress(group);
+                    this.longPressTimer = 0;
+                }, true);
+            } else if (this.longPressTimer !== 0) {
+                // Button released after short press
                 engine.stopTimer(this.longPressTimer);
+                this.longPressTimer = 0;
+                this.onShortPress(group);
             }
-        }
+        },
+        onShortPress: function(group) {
+            script.triggerControl(group, "beats_translate_curpos");
+        },
+        onLongPress: function(group) {
+            script.triggerControl(group, "beats_translate_match_alignment");
+        },
     });
 
     this.volume = new components.Pot({
@@ -1312,7 +1343,7 @@ DJ505.CueLoopMode = function(deck, offset) {
         this.midi = [0x94 + offset, 0x14 + n];
         this.number = n + 1;
         this.outKey = "hotcue_" + this.number + "_enabled";
-        this.colorIdKey = "hotcue_" + this.number + "_color_id";
+        this.colorKey = "hotcue_" + this.number + "_color";
 
         components.Button.call(this);
     };
@@ -1368,44 +1399,9 @@ DJ505.CueLoopMode = function(deck, offset) {
             this.inKey = "hotcue_" + this.number + "_clear";
             this.input = components.Button.prototype.input;
         },
-        output: function(value) {
-            var outval = this.outValueScale(value);
-            // WARNING: outputColor only handles hotcueColors
-            // and there is no hotcueColor for turning the LED
-            // off. So the `send()` function is responsible for turning the
-            // actual LED off.
-            if (this.colorIdKey !== undefined && outval !== this.off) {
-                this.outputColor(engine.getValue(this.group, this.colorIdKey));
-            } else {
-                this.send(outval);
-            }
-        },
-        outputColor: function(id) {
-            var color = this.colors[id];
-            if (color instanceof Array) {
-                if (color.length !== 3) {
-                    print("ERROR: invalid color array for id: " + id);
-                    return;
-                }
-                if (this.sendRGB === undefined) {
-                    print("ERROR: no function defined for sending RGB colors");
-                    return;
-                }
-                this.sendRGB(color);
-            } else if (typeof color === "number") {
-                this.send(color);
-            }
-        },
-        connect: function() {
-            components.Button.prototype.connect.call(this); // call parent connect
-            if (undefined !== this.group && this.colorIdKey !== undefined) {
-                this.connections[1] = engine.makeConnection(this.group, this.colorIdKey, function(id) {
-                    if (engine.getValue(this.group, this.outKey)) {
-                        this.outputColor(id);
-                    }
-                });
-            }
-        },
+        output: components.HotcueButton.prototype.output,
+        outputColor: components.HotcueButton.prototype.outputColor,
+        connect: components.HotcueButton.prototype.connect,
     });
 
     this.pads = new components.ComponentContainer();
@@ -1635,7 +1631,7 @@ DJ505.PitchPlayMode = function(deck, offset) {
         off: DJ505.PadColor.OFF,
         outputColor: function(colorCode) {
             // For colored hotcues (shifted only)
-            var midiColor = this.colorMapper.getNearestValue(colorCode);
+            var midiColor = this.colorMapper.getValueForNearestColor(colorCode);
             this.send((this.mode.cuepoint === this.number) ? midiColor : (midiColor + DJ505.PadColor.DIM_MODIFIER));
         },
         unshift: function() {
diff --git a/res/images/preferences/ic_preferences_colors.svg b/res/images/preferences/ic_preferences_colors.svg
new file mode 100644
index 0000000000..cb7199750b
--- /dev/null
+++ b/res/images/preferences/ic_preferences_colors.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<title>Mixxx 1.12+ iconset</title>
+	<g>
+		<path d="m2.6775373 29.441818c1.2915257 1.276979 3.3854996 1.276979 4.6770264-1e-6.3123328-.310526.5584503-.679879.7236793-1.086207l2.862452-4.243047 4.133113-3.81616 3.933374 3.889081 2.360024-2.333449-11.013445-10.889425-2.3600243 2.333447 3.9333733 3.889083-3.859623 4.08657-4.2806157 2.822624c-.4154472.164357-.7928415.410361-1.109334.723125-1.2915224 1.276982-1.2915236 3.347377 0 4.624359zm19.4763437-8.367599-11.013445-10.889425 8.65342-8.5559755 1.165566 1.1524393 1.395903 1.380184 1.71322 1.6939276-2.926472 3.8589267 4.005054-2.7924897 1.3959 1.3801829 1.395903 1.3801825s-4.876191 5.7519612-4.585379 6.0394992 5.74863-4.889348 5.981281-4.659316l1.472469 1.455888z"/>
+		<path d="m31.326116 21.55374c.627527 1.301959 1.031435 2.673278 0 3.693101-1.031438 1.01982-2.703725 1.01982-3.735161 0-1.031438-1.019823-.612938-2.384365 0-3.693101 1.840765-3.930379 1.840765-3.930379 1.840765-3.930379s1.262931 2.620252 1.894396 3.930379z" style="paint-order:fill markers stroke"/>
+	</g>
+</svg>
diff --git a/res/linux/mixxx-usb-uaccess.rules b/res/linux/mixxx-usb-uaccess.rules
new file mode 100644
index 0000000000..0f8a67809b
--- /dev/null
+++ b/res/linux/mixxx-usb-uaccess.rules
@@ -0,0 +1,50 @@
+# This udev rule allows Mixxx to access HID and USB Bulk controllers when running as a normal user
+
+# Sources:
+# http://www.linux-usb.org/usb.ids
+# https://www.the-sz.com/products/usbid/
+# https://devicehunt.com/all-usb-vendors
+
+# Note that the udev rule must match on the USB device level; matching the USB interface
+# descriptor with bInterfaceClass does not work.
+
+# Install and execute before 70-uaccess.rules, e.g. .../udev/rules.d/69-mixxx-usb-uaccess.rules
+
+# Allen + Heath Ltd.
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="22f0", TAG+="uaccess"
+# Arturia
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="1c75", TAG+="uaccess"
+# BEHRINGER International GmbH
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="1397", TAG+="uaccess"
+# D&M Holdings, Inc. (Denon/Marantz)
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="154e", TAG+="uaccess"
+# EKS (Otus)
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="1157", TAG+="uaccess"
+# Gemini
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="23c7", TAG+="uaccess"
+# Guillemot Corp. (Hercules)
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="06f8", TAG+="uaccess"
+# inMusic (Numark, Denon)
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="15e4", TAG+="uaccess"
+# KORG, Inc.
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="0944", TAG+="uaccess"
+# Native Instruments
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="17cc", TAG+="uaccess"
+# Nintendo Co., Ltd
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="057e", TAG+="uaccess"
+# Pioneer Corp.
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="08e4", TAG+="uaccess"
+# Rane
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="13e5", TAG+="uaccess"
+# Reloop
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="200c", TAG+="uaccess"
+# Roland Corp.
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="0582", TAG+="uaccess"
+# Sony Corp.
+SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="054c", TAG+="uaccess"
+
+# Missing:
+# - American Musical Supply (AMS/Mixars)
+
+# Only some distribuions require the below
+KERNEL=="hiddev*", NAME="usb/%k", GROUP="uaccess"
diff --git a/res/linux/mixxx.usb.rules b/res/linux/mixxx.usb.rules
deleted file mode 100644
index 7187e8a0b0..0000000000
--- a/res/linux/mixxx.usb.rules
+++ /dev/null
@@ -1,25 +0,0 @@
-# This udev rule allows Mixxx to access HID and USB Bulk controllers when running as a normal user
-
-# Allow write access for all users in the "users" group for USB devices from known vendors
-# that make HID or USB bulk controllers. Note that the udev rule must match on the USB device level;
-# matching the USB interface descriptor with bInterfaceClass does not work.
-
-# Native Instruments
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="17cc", GROUP="users", MODE="0660"
-# Hercules
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="06f8", GROUP="users", MODE="0660"
-# Pioneer
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="08e4", GROUP="users", MODE="0660"
-# Numark (may be needed for NS7 & V7)
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="15e4", GROUP="users", MODE="0660"
-# Eks
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="1157", GROUP="users", MODE="0660"
-# Nintendo
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="057e", GROUP="users", MODE="0660"
-# Sony
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="054c", GROUP="users", MODE="0660"
-# Gemini
-SUBSYSTEM=="usb", ENV{DEVTYPE}=="usb_device", ATTRS{idVendor}=="23c7", GROUP="users", MODE="0660"
-
-# Only some distribuions require the below
-KERNEL=="hiddev*", NAME="usb/%k", GROUP="users"
diff --git a/res/mixxx.qrc b/res/mixxx.qrc
index 545cba1fea..c863791eee 100644
--- a/res/mixxx.qrc
+++ b/res/mixxx.qrc
@@ -37,6 +37,7 @@
         <file>images/preferences/ic_preferences_autodj.svg</file>
         <file>images/preferences/ic_preferences_bpmdetect.svg</file>
         <file>images/preferences/ic_preferences_broadcast.svg</file>
+        <file>images/preferences/ic_preferences_colors.svg</file>
         <file>images/preferences/ic_preferences_controllers.svg</file>
         <file>images/preferences/ic_preferences_crossfader.svg</file>
         <file>images/preferences/ic_preferences_decks.svg</file>
diff --git a/res/skins/Deere/hotcue_button.xml b/res/skins/Deere/hotcue_button.xml
index 2712d6eb0f..bbf386b73c 100644
--- a/res/skins/Deere/hotcue_button.xml
+++ b/res/skins/Deere/hotcue_button.xml
@@ -8,46 +8,23 @@
     SmallSquareButtonSize: the button size
 -->
 <Template>
-  <PushButton>
+  <HotcueButton>
     <TooltipId>hotcue</TooltipId>
     <ObjectName>HotcueButton</ObjectName>
     <MinimumSize>18,22</MinimumSize>
     <MaximumSize>22,22</MaximumSize>
     <SizePolicy>me,f</SizePolicy>
+    <Group><Variable name="group"/></Group>
+    <Hotcue><Variable name="hotcue"/></Hotcue>
+    <Hover>true</Hover>
     <NumberStates>2</NumberStates>
-    <LeftClickIsPushButton><Variable name="LeftClickIsPushButton"/></LeftClickIsPushButton>
-    <RightClickIsPushButton><Variable name="RightClickIsPushButton"/></RightClickIsPushButton>
     <State>
       <Number>0</Number>
       <Text><Variable name="hotcue"/></Text>
-      <Pressed scalemode="STRETCH_ASPECT"></Pressed>
-      <Unpressed scalemode="STRETCH_ASPECT"></Unpressed>
     </State>
     <State>
       <Number>1</Number>
       <Text><Variable name="hotcue"/></Text>
-      <Pressed scalemode="STRETCH_ASPECT"></Pressed>
-      <Unpressed scalemode="STRETCH_ASPECT"></Unpressed>
     </State>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_activate</ConfigKey>
-      <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
-      <ButtonState>LeftButton</ButtonState>
-      <ConnectValueToWidget>false</ConnectValueToWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_clear</ConfigKey>
-      <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
-      <ButtonState>RightButton</ButtonState>
-      <ConnectValueToWidget>false</ConnectValueToWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_enabled</ConfigKey>
-      <ConnectValueFromWidget>false</ConnectValueFromWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color</ConfigKey>
-      <BindProperty>backgroundColorRgba</BindProperty>
-    </Connection>
-  </PushButton>
+  </HotcueButton>
 </Template>
diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
index d02cac79cf..505d62f51d 100644
--- a/res/skins/Deere/style.qss
+++ b/res/skins/Deere/style.qss
@@ -209,15 +209,22 @@
  ** LIBRARY *********************************************************************
  *******************************************************************************/
 
-/* library table */
-#LibraryContainer QTableView {
+/* sidebar, as well as root items for playlists, crates, and history */
+#LibraryContainer QTextBrowser,
+#LibraryContainer QTableView,
+#LibraryContainer QTreeView {
   color: #d2d2d2;
   background-color: #1F1F1F;
-  alternate-background-color: #1A1A1A;
   selection-background-color: #006596;
   selection-color: #D6D6D6;
   border: 1px solid #1A1A1A;
   gridline-color: red;
+  /* Suppresses that selected sidebar item's branch indicator shows wrong color
+     when out of focus, see lp:880588 */
+  show-decoration-selected: 1;
+}
+#LibraryContainer QTableView {
+  alternate-background-color: #1A1A1A;
 }
 
 #LibraryContainer QTableView:focus,
@@ -416,20 +423,6 @@ WSearchLineEdit {
   margin-top: 4px;
 }
 
-/* sidebar, as well as root items for playlists, crates, and history */
-#LibraryContainer QTextBrowser,
-#LibraryContainer QTableView,
-#LibraryContainer QTreeView {
-  color: #d2d2d2;
-  background-color: #1F1F1F;
-  selection-background-color: #006596;
-  selection-color: #D6D6D6;
-  border: 1px solid #1A1A1A;
-  gridline-color: red;
-  /* Suppresses that selected sidebar item's branch indicator shows wrong color
-     when out of focus, see lp:880588 */
-  show-decoration-selected: 1;
-}
 /* triangle for closed/opened branches in treeview */
 #LibraryContainer QTreeView::branch:has-children:!has-siblings:closed,
 #LibraryContainer QTreeView::branch:closed:has-children:has-siblings {
@@ -1551,15 +1544,7 @@ WPushButton[value="2"]:hover {
     border: 1px solid #0080BE;
 }
 
-#HotcueButton {
-    qproperty-shouldHighlightBackgroundOnHover: true;
-}
-
-#HotcueButton[backgroundIsDark=true][hasBackgroundColor=true] {
-    color: #FDFDFD;
-}
-
-#HotcueButton[backgroundIsDark=false][hasBackgroundColor=true] {
+#HotcueButton[light="true"] {
     color: #1f1e1e;
 }
 
diff --git a/res/skins/LateNight/button_hotcue.xml b/res/skins/LateNight/button_hotcue.xml
index 920ffc05d3..dd4eb7d197 100644
--- a/res/skins/LateNight/button_hotcue.xml
+++ b/res/skins/LateNight/button_hotcue.xml
@@ -7,12 +7,14 @@
     <SizePolicy>me,f</SizePolicy>
     <Layout>horizontal</Layout>
     <Children>
-      <PushButton>
+      <HotcueButton>
         <TooltipId>hotcue</TooltipId>
         <ObjectName>HotcueButton</ObjectName>
         <MinimumSize>26,26</MinimumSize>
         <MaximumSize>26,26</MaximumSize>
         <SizePolicy>me,f</SizePolicy>
+        <Group><Variable name="group"/></Group>
+        <Hotcue><Variable name="number"/></Hotcue>
         <NumberStates>2</NumberStates>
         <State>
           <Number>0</Number>
@@ -24,23 +26,7 @@
           <Unpressed scalemode="STRETCH">skin:/buttons_<Variable name="btn_scheme"/>/btn_<Variable name="btn_type"/>_square_set.svg</Unpressed>
           <Pressed scalemode="STRETCH">skin:/buttons_<Variable name="btn_scheme"/>/btn_<Variable name="btn_type"/>_square_active.svg</Pressed>
         </State>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_activate</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_clear</ConfigKey>
-          <ButtonState>RightButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_enabled</ConfigKey>
-          <ConnectValueFromWidget>false</ConnectValueFromWidget>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_color</ConfigKey>
-          <BindProperty>backgroundColorRgba</BindProperty>
-        </Connection>
-      </PushButton>
+      </HotcueButton>
     </Children>
   </WidgetGroup>
 </Template>
diff --git a/res/skins/LateNight/style.qss b/res/skins/LateNight/style.qss
index 10b0e9bf9a..97c0a547b3 100644
--- a/res/skins/LateNight/style.qss
+++ b/res/skins/LateNight/style.qss
@@ -638,7 +638,7 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
       brighter bg color to enhance contrast in darker containers
       and with small size respectively */
 #DeckRow_5_LoopCuesTransport WPushButton[value="0"],
-#HotcueButton[displayValue="0"],
+#HotcueButton,
 #FxAssignButton[displayValue="0"], #FxFocusButton[displayValue="0"],
 #FxToggleButton[displayValue="0"], #FxParameterButton[displayValue="0"],
 #SplitCueButton[value="0"],
@@ -684,11 +684,8 @@ QPushButton#pushButtonRecording:checked,
 #RecFeedback[displayValue="2"],
 #BeatgridButtons WPushButton[value="1"],
 #KeyMatchButton[displayValue="1"],
-#KeyUpButton[displayValue="1"], #KeyDownButton[displayValue="1"],
-#HotcueButton[displayValue="1"][highlight="0"],
-#HotcueButton[displayValue="2"][highlight="0"],
-#HotcueButton[displayValue="1"][highlight="1"],
-#HotcueButton[displayValue="2"][highlight="1"] {
+#KeyUpButton[displayValue="1"],
+#KeyDownButton[displayValue="1"] {
   background-color: #db0000;
 }
 
@@ -714,8 +711,10 @@ QPushButton#pushButtonAutoDJ:checked,
 #MicDuckingButton[value="2"] {
   background-color: #d09300;
 }
-/* ToDo
-  * orange Play button when playing from Cue / Hotcue */
+
+#SpecialCueButton[value="1"] {
+  background-color: #0044ff;
+}
 
 
 /************** Button icons **************************************************/
diff --git a/res/skins/LateNight/style_flip.qss b/res/skins/LateNight/style_flip.qss
index b51796ce57..302d155d9b 100644
--- a/res/skins/LateNight/style_flip.qss
+++ b/res/skins/LateNight/style_flip.qss
@@ -290,7 +290,7 @@ WSearchLineEdit {
 #GuiToggleButton[displayValue="0"], #RecFeedback[displayValue="0"],
 #BroadcastButton[displayValue="0"], #SettingsButton[displayValue="0"],
 #DeckRow_5_LoopCuesTransport WPushButton[value="0"],
-#HotcueButton[displayValue="0"],
+#HotcueButton,
 #FxAssignButton[displayValue="0"], #FxFocusButton[displayValue="0"],
 #FxToggleButton[displayValue="0"], #FxParameterButton[displayValue="0"],
 #SplitCueButton[value="0"],
diff --git a/res/skins/Shade/btn/btn_hotcue_1.png b/res/skins/Shade/btn/btn_hotcue_1.png
index 86f572261d..bbcc063c52 100644
--- a/res/skins/Shade/btn/btn_hotcue_1.png
+++ b/res/skins/Shade/btn/btn_hotcue_1.png
diff --git a/res/skins/Shade/btn/btn_hotcue_1_over.png b/res/skins/Shade/btn/btn_hotcue_1_over.png
new file mode 100644
index 0000000000..be7b4dcf96
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_1_over.png
diff --git a/res/skins/Shade/btn/btn_hotcue_1_overdown.png b/res/skins/Shade/btn/btn_hotcue_1_overdown.png
new file mode 100644
index 0000000000..99eb9f665f
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_1_overdown.png
diff --git a/res/skins/Shade/btn/btn_hotcue_2.png b/res/skins/Shade/btn/btn_hotcue_2.png
index 6c93b48fe2..f085b9f63a 100644
--- a/res/skins/Shade/btn/btn_hotcue_2.png
+++ b/res/skins/Shade/btn/btn_hotcue_2.png
diff --git a/res/skins/Shade/btn/btn_hotcue_2_over.png b/res/skins/Shade/btn/btn_hotcue_2_over.png
new file mode 100644
index 0000000000..45378b2312
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_2_over.png
diff --git a/res/skins/Shade/btn/btn_hotcue_2_overdown.png b/res/skins/Shade/btn/btn_hotcue_2_overdown.png
new file mode 100644
index 0000000000..b9195bb7d2
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_2_overdown.png
diff --git a/res/skins/Shade/btn/btn_hotcue_3.png b/res/skins/Shade/btn/btn_hotcue_3.png
index b6494126f0..2ccd932a16 100644
--- a/res/skins/Shade/btn/btn_hotcue_3.png
+++ b/res/skins/Shade/btn/btn_hotcue_3.png
diff --git a/res/skins/Shade/btn/btn_hotcue_3_over.png b/res/skins/Shade/btn/btn_hotcue_3_over.png
new file mode 100644
index 0000000000..37f32b2121
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_3_over.png
diff --git a/res/skins/Shade/btn/btn_hotcue_3_overdown.png b/res/skins/Shade/btn/btn_hotcue_3_overdown.png
new file mode 100644
index 0000000000..3308d3055b
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_3_overdown.png
diff --git a/res/skins/Shade/btn/btn_hotcue_4.png b/res/skins/Shade/btn/btn_hotcue_4.png
index f3c47cc7ef..d973f1eb85 100644
--- a/res/skins/Shade/btn/btn_hotcue_4.png
+++ b/res/skins/Shade/btn/btn_hotcue_4.png
diff --git a/res/skins/Shade/btn/btn_hotcue_4_over.png b/res/skins/Shade/btn/btn_hotcue_4_over.png
new file mode 100644
index 0000000000..94c3a61dab
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_4_over.png
diff --git a/res/skins/Shade/btn/btn_hotcue_4_overdown.png b/res/skins/Shade/btn/btn_hotcue_4_overdown.png
new file mode 100644
index 0000000000..6c421f8620
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_4_overdown.png
diff --git a/res/skins/Shade/btn/btn_hotcue_5.png b/res/skins/Shade/btn/btn_hotcue_5.png
index 002cf0cc54..68b7454176 100644
--- a/res/skins/Shade/btn/btn_hotcue_5.png
+++ b/res/skins/Shade/btn/btn_hotcue_5.png
diff --git a/res/skins/Shade/btn/btn_hotcue_5_over.png b/res/skins/Shade/btn/btn_hotcue_5_over.png
new file mode 100644
index 0000000000..55d1d00cc4
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_5_over.png
diff --git a/res/skins/Shade/btn/btn_hotcue_5_overdown.png b/res/skins/Shade/btn/btn_hotcue_5_overdown.png
new file mode 100644
index 0000000000..7e3c06f6f1
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_5_overdown.png
diff --git a/res/skins/Shade/btn/btn_hotcue_6.png b/res/skins/Shade/btn/btn_hotcue_6.png
index dffdf0b39c..6e679a722c 100644
--- a/res/skins/Shade/btn/btn_hotcue_6.png
+++ b/res/skins/Shade/btn/btn_hotcue_6.png
diff --git a/res/skins/Shade/btn/btn_hotcue_6_over.png b/res/skins/Shade/btn/btn_hotcue_6_over.png
new file mode 100644
index 0000000000..bb11f9e8b4
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_6_over.png
diff --git a/res/skins/Shade/btn/btn_hotcue_6_overdown.png b/res/skins/Shade/btn/btn_hotcue_6_overdown.png
new file mode 100644
index 0000000000..cdfbfb7448
--- /dev/null
+++ b/res/skins/Shade/btn/btn_hotcue_6_overdown.png
diff --git a/res/skins/Shade/btn/btn_hotcue_7.png b/res/skins/Shade/btn/btn_hotcue_7.png
index 998978cde5..eeabda8614 100644
--- a/res/skins/Shade/btn/btn_hotcue_7.png
+++ b/