diff --git a/res/skins/QMLDemo/Button.qml b/res/skins/QMLDemo/Button.qml
new file mode 100644
index 00000000000..f667a118512
--- /dev/null
+++ b/res/skins/QMLDemo/Button.qml
@@ -0,0 +1,128 @@
+import "." as Skin
+import QtGraphicalEffects 1.12
+import QtQml 2.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+AbstractButton {
+    id: root
+
+    property color normalColor: Theme.buttonNormalColor
+    property color activeColor // required
+    property color pressedColor: activeColor
+    property bool highlight: false
+
+    implicitWidth: 52
+    implicitHeight: 26
+    states: [
+        State {
+            name: "pressed"
+            when: root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: "images/button_pressed.svg"
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.pressedColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: true
+            }
+
+        },
+        State {
+            name: "active"
+            when: (root.highlight || root.checked) && !root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: "images/button.svg"
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.activeColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: true
+            }
+
+        },
+        State {
+            name: "inactive"
+            when: !root.checked && !root.highlight && !root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: "images/button.svg"
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.normalColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: false
+            }
+
+        }
+    ]
+
+    background: BorderImage {
+        id: backgroundImage
+
+        anchors.fill: parent
+        horizontalTileMode: BorderImage.Stretch
+        verticalTileMode: BorderImage.Stretch
+        source: "images/button.svg"
+
+        border {
+            top: 10
+            left: 10
+            right: 10
+            bottom: 10
+        }
+
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+
+        Glow {
+            id: labelGlow
+
+            anchors.fill: parent
+            radius: 5
+            spread: 0.1
+            samples: 1 + radius * 2
+            color: label.color
+            source: label
+        }
+
+        Label {
+            id: label
+
+            anchors.fill: parent
+            text: root.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.family: Theme.fontFamily
+            font.capitalization: Font.AllUppercase
+            font.bold: true
+            font.pixelSize: Theme.buttonFontPixelSize
+            color: root.normalColor
+        }
+
+    }
+
+}
diff --git a/res/skins/QMLDemo/ControlButton.qml b/res/skins/QMLDemo/ControlButton.qml
new file mode 100644
index 00000000000..eb7a15ddf6a
--- /dev/null
+++ b/res/skins/QMLDemo/ControlButton.qml
@@ -0,0 +1,16 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+
+Skin.Button {
+    id: root
+
+    property string group // required
+    property string key // required
+
+    Mixxx.ControlProxy {
+        group: root.group
+        key: root.key
+        value: root.checked || root.down
+    }
+
+}
diff --git a/res/skins/QMLDemo/CrossfaderRow.qml b/res/skins/QMLDemo/CrossfaderRow.qml
new file mode 100644
index 00000000000..559f187cd52
--- /dev/null
+++ b/res/skins/QMLDemo/CrossfaderRow.qml
@@ -0,0 +1,49 @@
+import "." as Skin
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+Item {
+    id: root
+
+    property real crossfaderWidth // required
+
+    implicitHeight: crossfaderSlider.width
+
+    Item {
+        id: effectUnitLeftPlaceholder
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+    }
+
+    Skin.Slider {
+        id: crossfaderSlider
+
+        anchors.centerIn: parent
+        height: root.crossfaderWidth
+        group: "[Master]"
+        key: "crossfader"
+        barColor: Theme.crossfaderBarColor
+        barStart: 0.5
+        fg: "images/slider_handle_crossfader.svg"
+        bg: "images/slider_crossfader.svg"
+
+        transform: Rotation {
+            origin.x: crossfaderSlider.width / 2
+            origin.y: crossfaderSlider.height / 2
+            angle: 90
+        }
+
+    }
+
+    Item {
+        id: effectUnitRightPlaceholder
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
+
+}
diff --git a/res/skins/QMLDemo/Deck.qml b/res/skins/QMLDemo/Deck.qml
index 2cbe3c6544f..58a86a615f8 100644
--- a/res/skins/QMLDemo/Deck.qml
+++ b/res/skins/QMLDemo/Deck.qml
@@ -1,400 +1,357 @@
+import "." as Skin
 import Mixxx 0.1 as Mixxx
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.11
+import "Theme"
 
 Item {
     id: root
 
-    required property string group
+    property string group // required
 
-    ColumnLayout {
-        anchors.fill: parent
+    Skin.DeckInfoBar {
+        id: infoBar
 
-        RowLayout {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                Rectangle {
-                    id: trackInfo
-
-                    Layout.fillWidth: true
-                    height: 60
-                    color: "#121213"
-
-                    Rectangle {
-                        id: coverArt
-
-                        anchors.top: parent.top
-                        anchors.left: parent.left
-                        anchors.bottom: parent.bottom
-                        width: height
-                        color: "black"
-                    }
-
-                    Item {
-                        id: spinny
-
-                        anchors.fill: coverArt
-
-                        // The Spinnies are automatically hidden if the track
-                        // is stopped. This is not really useful, but is nice for
-                        // demo'ing transitions.
-                        Mixxx.ControlProxy {
-                            group: root.group
-                            key: "play"
-                            onValueChanged: spinnyIndicator.indicatorVisible = (value > 0)
-                        }
-
-                        MixxxControls.Spinny {
-                            id: spinnyIndicator
-
-                            anchors.fill: parent
-                            group: root.group
-                            indicatorVisible: false
-
-                            indicatorDelegate: Image {
-                                mipmap: true
-                                width: spinnyIndicator.width
-                                height: spinnyIndicator.height
-                                source: "../LateNight/palemoon/style/spinny_indicator.svg"
-                            }
-
-                        }
-
-                    }
-
-                    Item {
-                        id: trackText
-
-                        anchors.top: parent.top
-                        anchors.left: coverArt.right
-                        anchors.right: parent.right
-                        anchors.bottom: parent.bottom
-
-                        ColumnLayout {
-                            anchors.fill: parent
-                            anchors.margins: 5
-
-                            Text {
-                                id: trackTitle
-
-                                Layout.fillWidth: true
-                                Layout.fillHeight: true
-                                text: "Title Placeholder"
-                                elide: Text.ElideRight
-                                color: "#c2b3a5"
-                            }
-
-                            Rectangle {
-                                id: trackColor
-
-                                Layout.fillWidth: true
-                                implicitHeight: 3
-                                color: "black"
-                            }
-
-                            Text {
-                                id: trackArtist
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        color: Theme.deckBackgroundColor
+        group: root.group
+    }
 
-                                Layout.fillWidth: true
-                                Layout.fillHeight: true
-                                text: "Artist Placeholder"
-                                elide: Text.ElideRight
-                                color: "#c2b3a5"
-                            }
+    Skin.Slider {
+        id: rateSlider
+
+        anchors.topMargin: 5
+        anchors.bottomMargin: 5
+        anchors.top: infoBar.bottom
+        anchors.right: parent.right
+        anchors.bottom: buttonBar.top
+        width: syncButton.width
+        group: root.group
+        key: "rate"
+        barStart: 0.5
+        barColor: Theme.bpmSliderBarColor
+        bg: "images/slider_bpm.svg"
+    }
 
-                        }
+    Rectangle {
+        id: overview
+
+        anchors.topMargin: 5
+        anchors.bottomMargin: 5
+        anchors.rightMargin: 5
+        anchors.top: infoBar.bottom
+        anchors.bottom: buttonBar.top
+        anchors.left: parent.left
+        anchors.right: rateSlider.left
+        radius: 5
+        color: Theme.deckBackgroundColor
+        height: 56
+
+        Skin.WaveformOverview {
+            group: root.group
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height - 26
+        }
 
-                    }
+        Item {
+            id: waveformBar
 
-                }
+            height: 26
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+
+            Rectangle {
+                id: waveformBarVSeparator
+
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.rightMargin: 5
+                anchors.leftMargin: 5
+                height: 2
+                color: infoBar.lineColor
+            }
 
-                WaveformOverview {
-                    Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                    group: root.group
+            InfoBarButton {
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.leftMargin: 5
+                width: rateSlider.width
+                group: "[EffectRack1_EffectUnit1]"
+                key: "group_" + root.group + "_enable"
+                checkable: true
+                activeColor: Theme.deckActiveColor
+
+                foreground: Text {
+                    anchors.centerIn: parent
+                    text: "FX 1"
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    font.family: Theme.fontFamily
+                    font.bold: true
+                    font.pixelSize: Theme.textFontPixelSize
+                    color: infoBar.textColor
                 }
 
             }
 
-            Item {
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                Layout.fillHeight: true
-                implicitWidth: 50
-
-                MixxxControls.ToggleButton {
-                    id: syncButton
+            Rectangle {
+                id: waveformBarHSeparator1
 
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: 24
-                    group: root.group
-                    key: "sync_enabled"
-                    icon.width: 50
-                    icon.height: 24
-
-                    State {
-                        name: "0"
-
-                        PropertyChanges {
-                            target: syncButton
-                            icon.source: "../LateNight/palemoon/buttons/btn__sync_deck.svg"
-                            icon.color: "#777777"
-                            background.color: "transparent"
-                            background.border.width: 2
-                        }
-
-                        PropertyChanges {
-                            target: syncButtonBgImage
-                            source: "../LateNight/palemoon/buttons/btn_embedded_sync.svg"
-                        }
-
-                    }
-
-                    State {
-                        name: "1"
-
-                        PropertyChanges {
-                            target: syncButton
-                            icon.source: "../LateNight/palemoon/buttons/btn__sync_deck_active.svg"
-                            icon.color: "transparent"
-                            background.color: "#b24c12"
-                            background.border.width: 2
-                        }
-
-                        PropertyChanges {
-                            target: syncButtonBgImage
-                            source: "../LateNight/palemoon/buttons/btn_embedded_sync_active.svg"
-                        }
-
-                    }
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: waveformBarVSeparator.left
+                anchors.leftMargin: rateSlider.width
+                width: 2
+                color: infoBar.lineColor
+            }
 
-                    background: Rectangle {
-                        anchors.fill: parent
+            InfoBarButton {
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: waveformBarHSeparator1.left
+                width: rateSlider.width
+                group: "[EffectRack1_EffectUnit2]"
+                key: "group_" + root.group + "_enable"
+                checkable: true
+                activeColor: Theme.deckActiveColor
+
+                foreground: Text {
+                    anchors.centerIn: parent
+                    text: "FX 2"
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    font.family: Theme.fontFamily
+                    font.bold: true
+                    font.pixelSize: Theme.textFontPixelSize
+                    color: infoBar.textColor
+                }
 
-                        data: Image {
-                            id: syncButtonBgImage
+            }
 
-                            anchors.fill: parent
-                        }
+            Rectangle {
+                id: waveformBarHSeparator2
 
-                    }
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: waveformBarHSeparator1.right
+                anchors.leftMargin: rateSlider.width
+                width: 2
+                color: infoBar.lineColor
+            }
 
+            Text {
+                id: waveformBarPosition
+
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: waveformBarHSeparator2.right
+                anchors.leftMargin: 5
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignLeft
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.textFontPixelSize
+                color: infoBar.textColor
+                text: {
+                    const positionSeconds = samplesControl.value / 2 / sampleRateControl.value * playPositionControl.value;
+                    if (isNaN(positionSeconds))
+                        return "";
+
+                    let minutes = Math.floor(positionSeconds / 60);
+                    let seconds = positionSeconds - (minutes * 60);
+                    let centiseconds = Math.trunc((seconds - Math.trunc(seconds)) * 100);
+                    seconds = Math.trunc(seconds);
+                    if (minutes < 10)
+                        minutes = "0" + minutes;
+
+                    if (seconds < 10)
+                        seconds = "0" + seconds;
+
+                    if (centiseconds < 10)
+                        centiseconds = "0" + centiseconds;
+
+                    return minutes + ':' + seconds + "." + centiseconds;
                 }
 
                 Mixxx.ControlProxy {
-                    id: bpmControl
+                    id: playPositionControl
 
                     group: root.group
-                    key: "bpm"
-                }
-
-                Text {
-                    id: bpmText
-
-                    anchors.top: syncButton.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: contentHeight
-                    text: bpmControl.value.toFixed(2)
-                    horizontalAlignment: Text.AlignHCenter
-                    font.family: "Open Sans"
-                    font.bold: true
-                    font.pixelSize: 11
-                    color: "#777"
+                    key: "playposition"
                 }
 
                 Mixxx.ControlProxy {
-                    id: rateRatioControl
+                    id: sampleRateControl
 
                     group: root.group
-                    key: "rate_ratio"
+                    key: "track_samplerate"
                 }
 
-                Text {
-                    id: bpmRatioText
-
-                    property real ratio: ((rateRatioControl.value - 1) * 100).toPrecision(2)
-
-                    anchors.top: bpmText.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: contentHeight
-                    text: (ratio > 0) ? "+" + ratio.toFixed(2) : ratio.toFixed(2)
-                    horizontalAlignment: Text.AlignHCenter
-                    font.family: "Open Sans"
-                    font.bold: true
-                    font.pixelSize: 10
-                    color: "#404040"
-                }
-
-                MixxxControls.Slider {
-                    id: rateSlider
+                Mixxx.ControlProxy {
+                    id: samplesControl
 
-                    anchors.top: bpmRatioText.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
                     group: root.group
-                    key: "rate"
-                    bar: true
-                    barColor: "#257b82"
-                    barMargin: 10
-                    barStart: 0.5
-
-                    handle: Image {
-                        source: "../LateNight/palemoon/sliders/knob_volume_deck.svg"
-                        width: 42
-                        height: 19
-                    }
-
-                    background: Image {
-                        anchors.fill: parent
-                        source: "../LateNight/palemoon/sliders/slider_volume_deck.svg"
-                    }
-
+                    key: "track_samples"
                 }
 
             }
 
-        }
-
-        Rectangle {
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-            Layout.fillWidth: true
-            height: 26
-            color: "transparent"
+            Item {
+                id: waveformBarRightSpace
 
-            RowLayout {
-                anchors.fill: parent
+                anchors.top: waveformBar.top
+                anchors.bottom: waveformBar.bottom
+                anchors.right: waveformBar.right
+                width: rateSlider.width
+            }
 
-                Rectangle {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                    implicitWidth: 68
-                    implicitHeight: 26
-                    color: "#121213"
+            Rectangle {
+                id: waveformBarHSeparator
 
-                    MixxxControls.ToggleButton {
-                        id: playButton
+                anchors.top: waveformBar.top
+                anchors.bottom: waveformBar.bottom
+                anchors.right: waveformBarRightSpace.left
+                anchors.bottomMargin: 5
+                width: 2
+                color: infoBar.lineColor
+            }
 
-                        anchors.fill: parent
-                        group: root.group
-                        key: "play"
-                        icon.width: 50
-                        icon.height: 24
+            InfoBarButton {
+                anchors.top: waveformBarVSeparator.bottom
+                anchors.bottom: waveformBar.bottom
+                anchors.left: waveformBarRightSpace.left
+                anchors.right: waveformBarRightSpace.right
+                group: root.group
+                key: "quantize"
+                checkable: true
+                activeColor: Theme.deckActiveColor
+
+                foreground: Image {
+                    anchors.centerIn: parent
+                    source: "images/icon_quantize.svg"
+                }
 
-                        State {
-                            name: "0"
+            }
 
-                            PropertyChanges {
-                                target: playButton
-                                icon.source: "../LateNight/palemoon/buttons/btn__play_deck.svg"
-                                icon.color: "#777777"
-                                background.color: "transparent"
-                                background.border.width: 2
-                            }
+            Item {
+                id: waveformBarLeftSpace
 
-                            PropertyChanges {
-                                target: playButtonBgImage
-                                source: "../LateNight/palemoon/buttons/btn_embedded_play.svg"
-                            }
+                anchors.top: waveformBar.top
+                anchors.bottom: waveformBar.bottom
+                anchors.right: waveformBarHSeparator.left
+                width: rateSlider.width
+            }
 
-                        }
+            Rectangle {
+                id: waveformBarHSeparator3
 
-                        State {
-                            name: "1"
+                anchors.top: waveformBar.top
+                anchors.bottom: waveformBar.bottom
+                anchors.right: waveformBarLeftSpace.left
+                anchors.bottomMargin: 5
+                width: 2
+                color: infoBar.lineColor
+            }
 
-                            PropertyChanges {
-                                target: playButton
-                                icon.source: "../LateNight/palemoon/buttons/btn__play_deck_active.svg"
-                                icon.color: "transparent"
-                                background.color: "#b24c12"
-                                background.border.width: 2
-                            }
+            InfoBarButton {
+                anchors.top: waveformBarVSeparator.bottom
+                anchors.bottom: waveformBar.bottom
+                anchors.left: waveformBarLeftSpace.left
+                anchors.right: waveformBarLeftSpace.right
+                group: root.group
+                key: "passthrough"
+                checkable: true
+                activeColor: Theme.deckActiveColor
+
+                foreground: Image {
+                    anchors.centerIn: parent
+                    source: "images/icon_passthrough.svg"
+                }
 
-                            PropertyChanges {
-                                target: playButtonBgImage
-                                source: "../LateNight/palemoon/buttons/btn_embedded_play_active.svg"
-                            }
+            }
 
-                        }
+        }
 
-                        background: Rectangle {
-                            anchors.fill: parent
+    }
 
-                            data: Image {
-                                id: playButtonBgImage
+    Item {
+        id: buttonBar
 
-                                anchors.fill: parent
-                            }
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 56
 
-                        }
+        Skin.ControlButton {
+            id: cueButton
 
-                    }
+            anchors.left: parent.left
+            anchors.top: parent.top
+            group: root.group
+            key: "cue_default"
+            text: "Cue"
+            activeColor: Theme.deckActiveColor
+        }
 
-                }
+        Skin.ControlButton {
+            id: playButton
+
+            anchors.top: cueButton.bottom
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.topMargin: 5
+            group: root.group
+            key: "play"
+            text: "Play"
+            checkable: true
+            activeColor: Theme.deckActiveColor
+        }
 
-                Item {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
+        Row {
+            anchors.left: cueButton.right
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.leftMargin: 10
+            spacing: -1
+
+            Repeater {
+                model: 8
+
+                Skin.HotcueButton {
+                    // TODO: Once we require Qt >= 5.14, we're going to re-add
+                    // the `required` keyword. If the component has any
+                    // required properties, we'll stumble over a Qt bug and
+                    // need the following workaround:
+                    //     required property int index
+                    // See this for details:
+                    // https://bugreports.qt.io/browse/QTBUG-86009, and need
+
+                    hotcueNumber: index + 1
+                    group: root.group
                 }
 
-                Item {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                    implicitWidth: 50
-                    implicitHeight: 20
-
-                    Mixxx.ControlProxy {
-                        id: passthroughControl
-
-                        group: root.group
-                        key: "passthrough"
-                    }
-
-                    Switch {
-                        id: passthroughSwitch
-
-                        width: parent.implicitWidth
-                        height: 18
-                        anchors.margins: 5
-                        text: "Passthrough"
-                        checked: passthroughControl.value
-                        onCheckedChanged: passthroughControl.value = checked
-
-                        indicator: Rectangle {
-                            anchors.fill: parent
-                            x: passthroughSwitch.leftPadding
-                            y: parent.height / 2 - height / 2
-                            radius: height / 2
-                            color: passthroughSwitch.checked ? "#202020" : "#121213"
-                            border.color: "#404040"
-
-                            Rectangle {
-                                x: passthroughSwitch.checked ? parent.width - width : 0
-                                height: passthroughSwitch.height
-                                width: height
-                                radius: height / 2
-                                color: passthroughSwitch.checked ? "#777" : "#404040"
-                                border.color: "#404040"
-                            }
-
-                        }
-
-                    }
+            }
 
-                }
+        }
 
-            }
+        Skin.ControlButton {
+            id: syncButton
 
+            anchors.right: parent.right
+            anchors.top: parent.top
+            text: "Sync"
+            group: root.group
+            key: "sync_enabled"
+            checkable: true
+            activeColor: Theme.deckActiveColor
         }
 
     }
diff --git a/res/skins/QMLDemo/DeckInfoBar.qml b/res/skins/QMLDemo/DeckInfoBar.qml
new file mode 100644
index 00000000000..ee897b247ef
--- /dev/null
+++ b/res/skins/QMLDemo/DeckInfoBar.qml
@@ -0,0 +1,200 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import Mixxx.Controls 0.1 as MixxxControls
+import QtQuick 2.12
+import "Theme"
+
+Rectangle {
+    id: root
+
+    property string group // required
+    property color textColor: Theme.deckTextColor
+    property color lineColor: Theme.deckLineColor
+
+    radius: 5
+    height: 56
+
+    Rectangle {
+        id: coverArt
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.margins: 5
+        width: height
+        radius: height / 2
+        border.width: 2
+        border.color: Theme.deckLineColor
+        color: "transparent"
+    }
+
+    Item {
+        id: spinny
+
+        anchors.fill: coverArt
+
+        // The Spinnies are automatically hidden if the track
+        // is stopped. This is not really useful, but is nice for
+        // demo'ing transitions.
+        Mixxx.ControlProxy {
+            group: root.group
+            key: "play"
+            onValueChanged: spinnyIndicator.indicatorVisible = (value > 0)
+        }
+
+        MixxxControls.Spinny {
+            id: spinnyIndicator
+
+            anchors.fill: parent
+            group: root.group
+            indicatorVisible: false
+
+            indicator: Item {
+                width: spinnyIndicator.width
+                height: spinnyIndicator.height
+
+                Rectangle {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: 2
+                    height: parent.height / 2
+                    color: Theme.deckTextColor
+                }
+
+            }
+
+        }
+
+    }
+
+    Text {
+        id: infoBarTitle
+
+        text: "Title Placeholder"
+        anchors.top: infoBarHSeparator1.top
+        anchors.left: infoBarVSeparator.left
+        anchors.right: infoBarHSeparator1.left
+        anchors.bottom: infoBarVSeparator.bottom
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
+        color: infoBar.textColor
+    }
+
+    Rectangle {
+        id: infoBarVSeparator
+
+        anchors.left: coverArt.right
+        anchors.right: infoBar.right
+        anchors.verticalCenter: infoBar.verticalCenter
+        anchors.margins: 5
+        height: 2
+        color: infoBar.lineColor
+    }
+
+    Text {
+        id: infoBarArtist
+
+        text: "Artist Placeholder"
+        anchors.top: infoBarVSeparator.bottom
+        anchors.left: infoBarVSeparator.left
+        anchors.right: infoBarHSeparator1.left
+        anchors.bottom: infoBarHSeparator1.bottom
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
+        color: infoBar.textColor
+    }
+
+    Rectangle {
+        id: infoBarHSeparator1
+
+        anchors.top: infoBar.top
+        anchors.bottom: infoBar.bottom
+        anchors.right: infoBarKey.left
+        anchors.topMargin: 5
+        anchors.bottomMargin: 5
+        width: 2
+        color: infoBar.lineColor
+    }
+
+    Text {
+        id: infoBarKey
+
+        anchors.top: infoBarHSeparator1.top
+        anchors.bottom: infoBarVSeparator.top
+        width: rateSlider.width
+        anchors.right: infoBarHSeparator2.left
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: "KEY"
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
+        color: infoBar.textColor
+    }
+
+    Rectangle {
+        id: infoBarHSeparator2
+
+        anchors.top: infoBar.top
+        anchors.bottom: infoBar.bottom
+        anchors.right: infoBarRateRatio.left
+        anchors.topMargin: 5
+        anchors.bottomMargin: 5
+        width: 2
+        color: infoBar.lineColor
+    }
+
+    Text {
+        id: infoBarRate
+
+        anchors.top: infoBarHSeparator2.top
+        anchors.bottom: infoBarVSeparator.top
+        width: rateSlider.width
+        anchors.right: infoBar.right
+        anchors.rightMargin: 5
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: bpmControl.value.toFixed(2)
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
+        color: infoBar.textColor
+
+        Mixxx.ControlProxy {
+            id: bpmControl
+
+            group: root.group
+            key: "bpm"
+        }
+
+    }
+
+    Text {
+        id: infoBarRateRatio
+
+        property real ratio: ((rateRatioControl.value - 1) * 100).toPrecision(2)
+
+        anchors.top: infoBarVSeparator.bottom
+        anchors.bottom: infoBarHSeparator1.bottom
+        width: rateSlider.width
+        anchors.right: infoBar.right
+        anchors.rightMargin: 5
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        font.family: Theme.fontFamily
+        font.pixelSize: Theme.textFontPixelSize
+        color: infoBar.textColor
+        text: (ratio > 0) ? "+" + ratio.toFixed(2) : ratio.toFixed(2)
+
+        Mixxx.ControlProxy {
+            id: rateRatioControl
+
+            group: root.group
+            key: "rate_ratio"
+        }
+
+    }
+
+}
diff --git a/res/skins/QMLDemo/DeckRow.qml b/res/skins/QMLDemo/DeckRow.qml
index f6725626bd8..e33d8e7d30d 100644
--- a/res/skins/QMLDemo/DeckRow.qml
+++ b/res/skins/QMLDemo/DeckRow.qml
@@ -1,72 +1,44 @@
-import Mixxx 0.1 as Mixxx
-import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
 import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.11
 
 Item {
     id: root
 
-    required property string leftDeck
-    required property string rightDeck
+    property string leftDeckGroup // required
+    property string rightDeckGroup // required
+    property alias mixer: mixer
 
-    RowLayout {
-        anchors.fill: parent
-        anchors.leftMargin: 10
-        anchors.rightMargin: 10
-        Layout.margins: 10
+    implicitHeight: mixer.height
 
-        Deck {
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            group: root.leftDeck
-        }
+    Deck {
+        id: leftDeck
 
-        Rectangle {
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            implicitWidth: 200
-            Layout.fillHeight: true
-            color: "#1e1e20"
-            border.color: "#121213"
-            border.width: 2
-            radius: 1
-
-            RowLayout {
-                anchors.fill: parent
-                anchors.margins: 10
-
-                EqColumn {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-                    group: root.leftDeck
-                }
-
-                MixerColumn {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-                    group: root.leftDeck
-                }
-
-                MixerColumn {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-                    group: root.rightDeck
-                }
-
-                EqColumn {
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-                    group: root.rightDeck
-                }
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: mixer.left
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 5
+        group: root.leftDeckGroup
+    }
 
-            }
+    Mixer {
+        id: mixer
 
-        }
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        leftDeckGroup: root.leftDeckGroup
+        rightDeckGroup: root.rightDeckGroup
+    }
 
-        Deck {
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            group: root.rightDeck
-        }
+    Deck {
+        id: rightDeck
 
+        anchors.top: parent.top
+        anchors.left: mixer.right
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.leftMargin: 5
+        group: root.rightDeckGroup
     }
 
 }
diff --git a/res/skins/QMLDemo/EqColumn.qml b/res/skins/QMLDemo/EqColumn.qml
index bf3af882c4a..cc82669640b 100644
--- a/res/skins/QMLDemo/EqColumn.qml
+++ b/res/skins/QMLDemo/EqColumn.qml
@@ -1,57 +1,51 @@
+import "." as Skin
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
-import QtQuick.Layouts 1.11
+import QtQuick.Shapes 1.12
+import "Theme"
 
-Item {
+Column {
     id: root
 
-    required property string group
-
-    implicitWidth: 35
-    implicitHeight: 150
-
-    ColumnLayout {
-        EqKnob {
-            channelGroup: root.group
-            key: "parameter3"
-        }
-
-        EqKnob {
-            channelGroup: root.group
-            key: "parameter2"
-        }
-
-        EqKnob {
-            channelGroup: root.group
-            key: "parameter1"
-        }
-
-        MixxxControls.Knob {
-            id: filterKnob
-
-            width: 35
-            height: width
-            group: "[QuickEffectRack1_" + root.group + "]"
-            key: "super1"
-            arc: true
-            arcRadius: 15
-            arcColor: "#518f00"
-            arcWidth: 2
-
-            background: Image {
-                source: "../LateNight/palemoon/knobs/knob_bg_master.svg"
-                width: filterKnob.width
-                height: filterKnob.width / 7 * 6
-            }
-
-            foreground: Image {
-                source: "../LateNight/palemoon/knobs/knob_indicator_regular_green.svg"
-                width: filterKnob.width
-                height: filterKnob.width / 7 * 6
-            }
-
-        }
+    property string group // required
 
+    spacing: 4
+
+    EqKnob {
+        group: "[EqualizerRack1_" + root.group + "_Effect1]"
+        key: "parameter3"
+        statusKey: "button_parameter3"
+        color: Theme.eqHighColor
+    }
+
+    EqKnob {
+        group: "[EqualizerRack1_" + root.group + "_Effect1]"
+        key: "parameter2"
+        statusKey: "button_parameter2"
+        color: Theme.eqMidColor
+    }
+
+    EqKnob {
+        group: "[EqualizerRack1_" + root.group + "_Effect1]"
+        key: "parameter1"
+        statusKey: "button_parameter1"
+        color: Theme.eqLowColor
+    }
+
+    EqKnob {
+        group: "[QuickEffectRack1_" + root.group + "]"
+        key: "super1"
+        statusGroup: "[QuickEffectRack1_" + root.group + "_Effect1]"
+        statusKey: "enabled"
+        arcStyle: ShapePath.DashLine
+        arcStylePattern: [2, 2]
+        color: Theme.eqFxColor
+    }
+
+    Skin.OrientationToggleButton {
+        group: root.group
+        key: "orientation"
+        color: Theme.crossfaderOrientationColor
     }
 
 }
diff --git a/res/skins/QMLDemo/EqKnob.qml b/res/skins/QMLDemo/EqKnob.qml
index d00d7de8ca6..171c65d9192 100644
--- a/res/skins/QMLDemo/EqKnob.qml
+++ b/res/skins/QMLDemo/EqKnob.qml
@@ -1,35 +1,39 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
 import Mixxx.Controls 0.1 as MixxxControls
 import QtQuick 2.12
+import "Theme"
 
-Item {
+Skin.Knob {
     id: root
 
-    required property string channelGroup
-    property alias key: knob.key
+    property string statusGroup: root.group // required
+    property string statusKey // required
 
-    width: 35
-    height: 35
+    Mixxx.ControlProxy {
+        id: statusControl
 
-    MixxxControls.Knob {
-        id: knob
-
-        anchors.fill: parent
-        group: "[EqualizerRack1_" + channelGroup + "_Effect1]"
-        arc: true
-        arcRadius: 15
-        arcColor: "#858585"
-        arcWidth: 2
-
-        background: Image {
-            source: "../LateNight/palemoon/knobs/knob_bg_master.svg"
-            width: 35
-            height: 30
-        }
+        group: root.statusGroup
+        key: root.statusKey
+    }
 
-        foreground: Image {
-            source: "../LateNight/palemoon/knobs/knob_indicator_regular_red.svg"
-            width: 35
-            height: 30
+    Rectangle {
+        id: statusButton
+
+        anchors.left: root.left
+        anchors.bottom: root.bottom
+        anchors.leftMargin: 6
+        anchors.bottomMargin: 2
+        width: 8
+        height: width
+        radius: width / 2
+        border.width: 1
+        border.color: Theme.buttonNormalColor
+        color: statusControl.value ? root.color : "transparent"
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: statusControl.value = !statusControl.value
         }
 
     }
diff --git a/res/skins/QMLDemo/HiddenState.qml b/res/skins/QMLDemo/HiddenState.qml
new file mode 100644
index 00000000000..19435a9b3e3
--- /dev/null
+++ b/res/skins/QMLDemo/HiddenState.qml
@@ -0,0 +1,15 @@
+import QtQuick 2.12
+
+State {
+    property alias target: changes.target
+
+    name: "hidden"
+
+    PropertyChanges {
+        id: changes
+
+        opacity: 0
+        visible: false
+    }
+
+}
diff --git a/res/skins/QMLDemo/HiddenTransition.qml b/res/skins/QMLDemo/HiddenTransition.qml
new file mode 100644
index 00000000000..65379d70b53
--- /dev/null
+++ b/res/skins/QMLDemo/HiddenTransition.qml
@@ -0,0 +1,25 @@
+import QtQuick 2.12
+
+Transition {
+    id: root
+
+    property var target // required
+
+    to: "hidden"
+    reversible: true
+
+    SequentialAnimation {
+        NumberAnimation {
+            target: root.target
+            property: "opacity"
+            duration: 150
+        }
+
+        PropertyAction {
+            target: root.target
+            property: "visible"
+        }
+
+    }
+
+}
diff --git a/res/skins/QMLDemo/HotcueButton.qml b/res/skins/QMLDemo/HotcueButton.qml
new file mode 100644
index 00000000000..c5aec57558e
--- /dev/null
+++ b/res/skins/QMLDemo/HotcueButton.qml
@@ -0,0 +1,97 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+Skin.Button {
+    id: root
+
+    property int hotcueNumber // required
+    property string group // required
+
+    text: hotcueNumber
+    width: playButton.height
+    height: playButton.height
+    activeColor: {
+        if (hotcueColorControl.value < 0)
+            return Theme.deckActiveColor;
+
+        return "#" + hotcueColorControl.value.toString(16).padStart(6, "0");
+    }
+    highlight: hotcueControl.value
+
+    Mixxx.ControlProxy {
+        id: hotcueColorControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_color"
+    }
+
+    Mixxx.ControlProxy {
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_activate"
+        value: root.down
+    }
+
+    Mixxx.ControlProxy {
+        id: hotcueControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_enabled"
+    }
+
+    Mixxx.ControlProxy {
+        id: hotcueClearControl
+
+        group: root.group
+        key: "hotcue_" + hotcueNumber + "_clear"
+    }
+
+    MouseArea {
+        id: mousearea
+
+        anchors.fill: parent
+        acceptedButtons: Qt.RightButton
+        onClicked: {
+            popup.x = mouse.x;
+            popup.y = mouse.y;
+            popup.open();
+        }
+    }
+
+    Popup {
+        id: popup
+
+        modal: true
+        focus: true
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+        Text {
+            text: "Cue Popup Placeholder"
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.textFontPixelSize
+            color: Theme.deckTextColor
+            anchors.centerIn: parent
+        }
+
+        background: BorderImage {
+            id: backgroundImage
+
+            anchors.fill: parent
+            horizontalTileMode: BorderImage.Stretch
+            verticalTileMode: BorderImage.Stretch
+            source: "images/button.svg"
+
+            border {
+                top: 10
+                left: 20
+                right: 20
+                bottom: 10
+            }
+
+        }
+
+    }
+
+}
diff --git a/res/skins/QMLDemo/InfoBarButton.qml b/res/skins/QMLDemo/InfoBarButton.qml
new file mode 100644
index 00000000000..c252b57066f
--- /dev/null
+++ b/res/skins/QMLDemo/InfoBarButton.qml
@@ -0,0 +1,71 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtGraphicalEffects 1.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+AbstractButton {
+    id: root
+
+    property string group // required
+    property string key // required
+    property alias foreground: foreground.data
+    property color normalColor: Theme.buttonNormalColor
+    property color activeColor // required
+    property color pressedColor: activeColor
+
+    states: [
+        State {
+            name: "pressed"
+            when: root.pressed
+
+            PropertyChanges {
+                target: colorOverlay
+                color: root.pressedColor
+            }
+
+        },
+        State {
+            name: "active"
+            when: root.checked && !root.pressed
+
+            PropertyChanges {
+                target: colorOverlay
+                color: root.activeColor
+            }
+
+        },
+        State {
+            name: "inactive"
+            when: !root.checked && !root.pressed
+
+            PropertyChanges {
+                target: colorOverlay
+                color: root.normalColor
+            }
+
+        }
+    ]
+
+    Mixxx.ControlProxy {
+        group: root.group
+        key: root.key
+        value: root.checked || root.down
+    }
+
+    Item {
+        id: foreground
+
+        anchors.fill: parent
+    }
+
+    ColorOverlay {
+        id: colorOverlay
+
+        anchors.fill: foreground
+        source: foreground
+        color: root.normalColor
+    }
+
+}
diff --git a/res/skins/QMLDemo/Knob.qml b/res/skins/QMLDemo/Knob.qml
new file mode 100644
index 00000000000..5d8acdc0c96
--- /dev/null
+++ b/res/skins/QMLDemo/Knob.qml
@@ -0,0 +1,38 @@
+import Mixxx.Controls 0.1 as MixxxControls
+import QtQuick 2.12
+import "Theme"
+
+MixxxControls.Knob {
+    id: root
+
+    property color color // required
+
+    implicitWidth: 56
+    implicitHeight: implicitWidth
+    arc: true
+    arcRadius: 20
+    arcColor: root.color
+    arcWidth: 2
+    angle: 117
+
+    background: Image {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.right: parent.right
+        source: "images/knob.svg"
+    }
+
+    foreground: Item {
+        anchors.fill: parent
+
+        Rectangle {
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: root.width / 30
+            height: root.width / 7
+            y: parent.height / 4
+            color: root.color
+        }
+
+    }
+
+}
diff --git a/res/skins/QMLDemo/Library.qml b/res/skins/QMLDemo/Library.qml
index ee0ad35b48d..f8437c5813f 100644
--- a/res/skins/QMLDemo/Library.qml
+++ b/res/skins/QMLDemo/Library.qml
@@ -1,15 +1,19 @@
+import "." as Skin
 import Qt.labs.qmlmodels 1.0
 import QtQuick 2.12
 import QtQuick.Controls 1.4
+import "Theme"
 
 Item {
     Rectangle {
-        color: "#121213"
+        color: Theme.deckBackgroundColor
         anchors.fill: parent
 
         Text {
             text: "Library Placeholder"
-            color: "white"
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.textFontPixelSize
+            color: Theme.deckTextColor
             anchors.centerIn: parent
         }
 
diff --git a/res/skins/QMLDemo/Mixer.qml b/res/skins/QMLDemo/Mixer.qml
new file mode 100644
index 00000000000..11ecd0390e0
--- /dev/null
+++ b/res/skins/QMLDemo/Mixer.qml
@@ -0,0 +1,33 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+Row {
+    id: mixer
+
+    property string leftDeckGroup // required
+    property string rightDeckGroup // required
+    property bool show4decks: false
+
+    EqColumn {
+        group: root.leftDeckGroup
+    }
+
+    MixerColumn {
+        width: 56
+        height: parent.height
+        group: root.leftDeckGroup
+    }
+
+    MixerColumn {
+        width: 56
+        height: parent.height
+        group: root.rightDeckGroup
+    }
+
+    EqColumn {
+        width: 56
+        height: parent.height
+        group: root.rightDeckGroup
+    }
+
+}
diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml
index 94d18a13384..580bffc374f 100644
--- a/res/skins/QMLDemo/MixerColumn.qml
+++ b/res/skins/QMLDemo/MixerColumn.qml
@@ -1,69 +1,50 @@
-import Mixxx.Controls 0.1 as MixxxControls
+import "." as Skin
 import QtQuick 2.12
 import QtQuick.Layouts 1.11
+import "Theme"
 
 Item {
     id: root
 
-    required property string group
+    property string group // required
 
-    implicitWidth: 47
-    implicitHeight: 150
+    Knob {
+        id: gainKnob
 
-    ColumnLayout {
-        MixxxControls.Knob {
-            id: gainKnob
-
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-            width: 35
-            height: width
-            group: root.group
-            key: "pregain"
-            arc: true
-            arcRadius: 15
-            arcColor: "#b96300"
-            arcWidth: 2
-
-            background: Image {
-                source: "../LateNight/palemoon/knobs/knob_bg_master.svg"
-                width: gainKnob.width
-                height: gainKnob.width / 7 * 6
-            }
-
-            foreground: Image {
-                source: "../LateNight/palemoon/knobs/knob_indicator_regular_orange.svg"
-                width: gainKnob.width
-                height: gainKnob.width / 7 * 6
-            }
-
-        }
-
-        MixxxControls.Slider {
-            id: volumeSlider
-
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
-            width: root.width
-            height: 107
-            group: root.group
-            key: "volume"
-            bar: true
-            barColor: "#257b82"
-            barMargin: 10
-
-            handle: Image {
-                source: "../LateNight/palemoon/sliders/knob_volume_deck.svg"
-                width: 42
-                height: 19
-            }
-
-            background: Image {
-                width: volumeSlider.width
-                height: volumeSlider.height
-                source: "../LateNight/palemoon/sliders/slider_volume_deck.svg"
-            }
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: width
+        group: root.group
+        key: "pregain"
+        color: Theme.gainKnobColor
+    }
 
-        }
+    Slider {
+        id: volumeSlider
+
+        anchors.top: gainKnob.bottom
+        anchors.topMargin: 5
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: pflButton.top
+        group: root.group
+        key: "volume"
+        barColor: Theme.volumeSliderBarColor
+        bg: "images/slider_volume.svg"
+    }
 
+    Skin.ControlButton {
+        id: pflButton
+
+        group: root.group
+        key: "pfl"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        text: "PFL"
+        activeColor: Theme.pflActiveButtonColor
+        checkable: true
     }
 
 }
diff --git a/res/skins/QMLDemo/Mixxx/Controls/Knob.qml b/res/skins/QMLDemo/Mixxx/Controls/Knob.qml
index 28bae664e85..c69bfb9f86f 100644
--- a/res/skins/QMLDemo/Mixxx/Controls/Knob.qml
+++ b/res/skins/QMLDemo/Mixxx/Controls/Knob.qml
@@ -32,22 +32,16 @@ Item {
         key: root.key + "_set_default"
     }
 
-    Rectangle {
+    Item {
         id: background
 
-        width: root.width
-        height: root.height
-        anchors.centerIn: root
-        color: "transparent"
+        anchors.fill: parent
     }
 
-    Rectangle {
+    Item {
         id: foreground
 
-        width: root.width
-        height: root.height
-        anchors.centerIn: root
-        color: "transparent"
+        anchors.fill: parent
         rotation: (control.parameter - (root.max - root.min) / 2) * 2 * root.angle
     }
 
@@ -84,9 +78,9 @@ Item {
         anchors.fill: root
         onWheel: {
             if (wheel.angleDelta.y < 0)
-                control.parameter = control.parameter + 0.1;
+                control.parameter = Math.min(root.max, control.parameter + 0.1);
             else
-                control.parameter = control.parameter - 0.1;
+                control.parameter = Math.max(root.min, control.parameter - 0.1);
         }
         onDoubleClicked: resetcontrol.value = 1
         onPressed: {
@@ -94,8 +88,9 @@ Item {
         }
         onPositionChanged: {
             if (mousearea.pressed) {
-                var dy = mousearea.posy - mouse.y;
-                control.parameter += Math.max(Math.min(dy, 100), -100) / 100;
+                const dy = mousearea.posy - mouse.y;
+                let parameter = control.parameter + Math.max(Math.min(dy, 100), -100) / 100;
+                control.parameter = Math.max(root.min, Math.min(root.max, parameter));
                 mousearea.posy = mouse.y;
             }
         }
diff --git a/res/skins/QMLDemo/Mixxx/Controls/Spinny.qml b/res/skins/QMLDemo/Mixxx/Controls/Spinny.qml
index d95d0516a8d..07c8012cb7b 100644
--- a/res/skins/QMLDemo/Mixxx/Controls/Spinny.qml
+++ b/res/skins/QMLDemo/Mixxx/Controls/Spinny.qml
@@ -1,13 +1,14 @@
 import Mixxx 0.1 as Mixxx
 import QtQuick 2.12
+import QtQuick.Controls 2.12
 
 Item {
     id: root
 
-    required property string group
+    property string group // required
     property real rpm: 33
     property bool indicatorVisible: true
-    property alias indicatorDelegate: indicatorContainer.data
+    property alias indicator: indicatorContainer.contentItem
 
     // Avoid animation short blinking of spinny during startup
     Component.onCompleted: indicatorTransition.enabled = true
@@ -33,22 +34,17 @@ Item {
         key: "playposition"
     }
 
-    Item {
+    Control {
         id: indicatorContainer
 
         anchors.fill: parent
         visible: opacity > 0
 
-        Item {
-            anchors.fill: parent
-
-            data: Rectangle {
-                height: root.height / 2
-                width: height / 12
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: parent.top
-            }
-
+        contentItem: Rectangle {
+            height: root.height / 2
+            width: height / 12
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
         }
 
         transform: Rotation {
diff --git a/res/skins/QMLDemo/Mixxx/Controls/ToggleButton.qml b/res/skins/QMLDemo/Mixxx/Controls/ToggleButton.qml
deleted file mode 100644
index f029bcc642c..00000000000
--- a/res/skins/QMLDemo/Mixxx/Controls/ToggleButton.qml
+++ /dev/null
@@ -1,37 +0,0 @@
-import Mixxx 0.1 as Mixxx
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-
-Item {
-    id: root
-
-    property alias group: control.group
-    property alias key: control.key
-    property alias icon: button.icon
-    property alias background: button.background
-    property alias state: buttonRect.state
-    default property alias states: buttonRect.states
-
-    Rectangle {
-        id: buttonRect
-
-        anchors.fill: parent
-        color: "transparent"
-
-        Button {
-            id: button
-
-            anchors.fill: parent
-            onPressed: control.value ? control.value = 0 : control.value = 1
-
-            Mixxx.ControlProxy {
-                id: control
-
-                onValueChanged: root.state = control.value
-            }
-
-        }
-
-    }
-
-}
diff --git a/res/skins/QMLDemo/OrientationToggleButton.qml b/res/skins/QMLDemo/OrientationToggleButton.qml
new file mode 100644
index 00000000000..c255bf96b56
--- /dev/null
+++ b/res/skins/QMLDemo/OrientationToggleButton.qml
@@ -0,0 +1,92 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+AbstractButton {
+    id: root
+
+    property string group // required
+    property string key // required
+    property alias orientation: control.value
+    property color color: "white"
+
+    implicitWidth: 56
+    implicitHeight: 26
+    onClicked: control.value = Math.trunc(3 * pressX / root.width)
+    states: [
+        State {
+            name: "left"
+            when: orientation == 0
+
+            PropertyChanges {
+                target: indicator
+                x: 0
+            }
+
+        },
+        State {
+            name: "right"
+            when: orientation == 2
+
+            PropertyChanges {
+                target: indicator
+                x: parent.width - width
+            }
+
+        },
+        State {
+            name: "mid"
+            when: orientation == 1
+
+            PropertyChanges {
+                target: indicator
+                x: parent.width / 2 - width / 2
+            }
+
+        }
+    ]
+
+    Mixxx.ControlProxy {
+        id: control
+
+        group: root.group
+        key: root.key
+    }
+
+    Item {
+        anchors.fill: root
+        anchors.leftMargin: 10
+        anchors.rightMargin: 10
+        anchors.topMargin: 2
+        anchors.bottomMargin: 2
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            height: 2
+            color: root.color
+        }
+
+        Rectangle {
+            id: indicator
+
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.margins: 5
+            width: 3
+            color: root.color
+
+            Behavior on x {
+                NumberAnimation {
+                    duration: 150
+                }
+
+            }
+
+        }
+
+    }
+
+}
diff --git a/res/skins/QMLDemo/Slider.qml b/res/skins/QMLDemo/Slider.qml
new file mode 100644
index 00000000000..be1786dee65
--- /dev/null
+++ b/res/skins/QMLDemo/Slider.qml
@@ -0,0 +1,32 @@
+import "." as Skin
+import Mixxx.Controls 0.1 as MixxxControls
+import QtQuick 2.12
+import "Theme"
+
+MixxxControls.Slider {
+    id: root
+
+    property alias fg: handleImage.source
+    property alias bg: backgroundImage.source
+
+    bar: true
+    barColor: Theme.sliderBarColor
+    barMargin: 10
+    implicitWidth: handleImage.implicitWidth + 10
+    implicitHeight: handleImage.implicitHeight + 10
+
+    handle: Image {
+        id: handleImage
+
+        anchors.top: parent.top
+        source: "images/slider_handle.svg"
+    }
+
+    background: Image {
+        id: backgroundImage
+
+        anchors.fill: parent
+        anchors.margins: 10
+    }
+
+}
diff --git a/res/skins/QMLDemo/Theme/Theme.qml b/res/skins/QMLDemo/Theme/Theme.qml
new file mode 100644
index 00000000000..1b9b678acbb
--- /dev/null
+++ b/res/skins/QMLDemo/Theme/Theme.qml
@@ -0,0 +1,37 @@
+import QtQuick 2.12
+pragma Singleton
+
+QtObject {
+    property color white: "#e3d7fb"
+    property color yellow: "#fca001"
+    property color red: "#ea2a4e"
+    property color blue: "#01dcfc"
+    property color green: "#85c85b"
+    property color lightGray: "#747474"
+    property color lightGray2: "#b0b0b0"
+    property color midGray: "#696969"
+    property color darkGray: "#0f0f0f"
+    property color darkGray2: "#2e2e2e"
+    property color eqHighColor: white
+    property color eqMidColor: white
+    property color eqLowColor: white
+    property color eqFxColor: red
+    property color bpmSliderBarColor: green
+    property color volumeSliderBarColor: blue
+    property color gainKnobColor: blue
+    property color crossfaderOrientationColor: lightGray
+    property color crossfaderBarColor: red
+    property color toolbarBackgroundColor: darkGray2
+    property color pflActiveButtonColor: blue
+    property color backgroundColor: "#1e1e20"
+    property color deckActiveColor: green
+    property color deckBackgroundColor: darkGray
+    property color deckLineColor: darkGray2
+    property color deckTextColor: lightGray2
+    property color buttonNormalColor: midGray
+    property color textColor: lightGray2
+    property color toolbarActiveColor: white
+    property string fontFamily: "Open Sans"
+    property int textFontPixelSize: 14
+    property int buttonFontPixelSize: 10
+}
diff --git a/res/skins/QMLDemo/Theme/qmldir b/res/skins/QMLDemo/Theme/qmldir
new file mode 100644
index 00000000000..5023b9dc1c4
--- /dev/null
+++ b/res/skins/QMLDemo/Theme/qmldir
@@ -0,0 +1 @@
+singleton Theme 0.1 Theme.qml
diff --git a/res/skins/QMLDemo/WaveformOverview.qml b/res/skins/QMLDemo/WaveformOverview.qml
index 8ed1da2f170..37690f74f94 100644
--- a/res/skins/QMLDemo/WaveformOverview.qml
+++ b/res/skins/QMLDemo/WaveformOverview.qml
@@ -1,11 +1,12 @@
 import Mixxx 0.1 as Mixxx
 import QtQuick 2.12
 import QtQuick.Shapes 1.12
+import "Theme"
 
 Item {
     id: root
 
-    required property string group
+    property string group // required
 
     states: [
         State {
@@ -119,14 +120,13 @@ Item {
         id: waveformContainer
 
         anchors.fill: parent
-        color: "#121213"
+        color: Theme.deckBackgroundColor
 
         Text {
             anchors.centerIn: parent
-            font.family: "Open Sans"
-            font.bold: true
-            font.pixelSize: 11
-            color: "#777777"
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.textFontPixelSize
+            color: Theme.deckTextColor
             text: "Waveform Placeholder"
         }
 
@@ -140,10 +140,9 @@ Item {
 
         Text {
             anchors.centerIn: parent
-            font.family: "Open Sans"
-            font.bold: true
-            font.pixelSize: 11
-            color: "#777777"
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.textFontPixelSize
+            color: Theme.deckTextColor
             text: "Passthrough Enabled"
         }
 
diff --git a/res/skins/QMLDemo/images/button.svg b/res/skins/QMLDemo/images/button.svg
new file mode 100644
index 00000000000..c7f76d1717e
--- /dev/null
+++ b/res/skins/QMLDemo/images/button.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="58" height="26" version="1.1" viewBox="0 0 15.346 6.8793" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="linearGradient8762" x1="762.5" x2="762.5" y1="119.01" y2="158.99" gradientTransform="matrix(.25135 0 0 .25135 -88.524 90.712)" gradientUnits="userSpaceOnUse"><stop stop-color="#303030" offset="0"/><stop stop-color="#181818" offset="1"/></linearGradient><linearGradient id="linearGradient8764" x1="748" x2="748" y1="139" y2="169" gradientTransform="translate(-170)" gradientUnits="userSpaceOnUse"><stop stop-opacity=".75294" offset="0"/><stop stop-opacity="0" offset="1"/></linearGradient><filter id="filter7885"><feGaussianBlur stdDeviation="0.6"/></filter><linearGradient id="linearGradient8766" x1="763" x2="763" y1="119" y2="159" gradientTransform="matrix(.19844 0 0 .19844 -48.149 98.067)" gradientUnits="userSpaceOnUse"><stop stop-color="#404040" offset="0"/><stop stop-color="#282828" offset="1"/></linearGradient><linearGradient id="linearGradient8560" x1="754" x2="754" y1="287" y2="303" gradientTransform="translate(13.544,50.067)" gradientUnits="userSpaceOnUse"><stop stop-color="#282828" offset="0"/><stop stop-color="#202020" offset="1"/></linearGradient></defs><g transform="translate(-108 -125.98)" display="none"><rect x="95.851" y="117.98" width="14.817" height="14.817" rx=".79375" ry=".79375" display="inline" fill="#fff" fill-opacity=".031372"/><circle cx="103.26" cy="125.65" r="5.2917" display="inline" fill-opacity=".50196"/><path d="m96.917 125.86c-0.0052 0.10557-0.0083 0.21561-0.0083 0.32247 0 1.1574 0.31065 2.2406 0.85163 3.175v-0.52917c-0.50847-0.87827-0.80854-1.8891-0.84336-2.9683zm0.84336 2.9683c0.05542 0.0956 0.11349 0.18875 0.17363 0.28112l0.678-0.42995c0.04787 0.0734 0.09762 0.14399 0.14883 0.21498 0.02096 0.0291 0.03638 0.0623 0.05788 0.0909 0.04113 0.0548 0.08922 0.10388 0.13229 0.15708 0.02207 0.0273 0.04358 0.0558 0.06615 0.0827 0.02133 0.0253 0.04438 0.0495 0.06615 0.0744 0.07195 0.0827 0.14663 0.16146 0.22324 0.23978 0.0069 7e-3 0.0096 0.0178 0.01654 0.0248 0.05152 0.0521 0.10357 0.0988 0.1571 0.14884 0.08354 0.0781 0.16809 0.15037 0.25632 0.22324 0.06369 0.0526 0.12415 0.10732 0.19017 0.1571 0.04867 0.0368 0.09893 0.0722 0.14883 0.10748 0.0466 0.0328 0.093 0.0679 0.14057 0.0992 0.0512 0.0339 0.1047 0.067 0.1571 0.0992 0.0535 0.0327 0.11069 0.06 0.16537 0.0909 0.0138 8e-3 0.0275 0.0171 0.0413 0.0248 0.0795 0.0441 0.15796 0.092 0.23979 0.13231 0.0542 0.0267 0.11016 0.0494 0.16536 0.0744 0.049 0.0222 0.0991 0.0454 0.14883 0.0661 0.0193 8e-3 0.0384 0.017 0.0579 0.0248 0.10597 0.0428 0.21336 0.0794 0.32245 0.11575 0.0429 0.0143 0.0889 0.0281 0.1323 0.0413 0.0442 0.0135 0.0877 0.029 0.13229 0.0413 0.0241 7e-3 0.0502 0.0102 0.0744 0.0165 0.0938 0.0246 0.18545 0.0464 0.28111 0.0661 0.0717 0.0149 0.14224 0.0293 0.21498 0.0413 0.0632 0.0104 0.12621 0.0165 0.19016 0.0248 0.0406 5e-3 0.0833 0.0122 0.12403 0.0165 0.19543 0.0209 0.39418 0.0331 0.59531 0.0331s0.3999-0.0121 0.59531-0.0331c0.0414-4e-3 0.0828-0.0112 0.12402-0.0165 0.064-8e-3 0.12693-0.0144 0.19017-0.0248 0.0727-0.0121 0.14323-0.0265 0.21498-0.0413 0.0731-0.0151 0.14297-0.0317 0.21497-0.0496 0.0907-0.0227 0.184-0.0473 0.27284-0.0744 0.0725-0.0221 0.14381-0.0494 0.21499-0.0744 0.20937-0.0735 0.41488-0.15094 0.61187-0.24804 0.0652-0.0321 0.12644-0.073 0.19015-0.10749 0.0604-0.0329 0.12284-0.0642 0.18191-0.0992 0.0551-0.0326 0.11147-0.0648 0.16535-0.0992 0.047-0.0302 0.0945-0.0594 0.14057-0.091 0.047-0.0321 0.0946-0.0657 0.14056-0.0992 0.0913-0.0667 0.17759-0.14296 0.26458-0.21498 0.0882-0.0729 0.17277-0.14517 0.25632-0.22324 0.0535-0.0501 0.10558-0.0967 0.1571-0.14884 0.0273-0.0276 0.0559-0.0545 0.0829-0.0827 0.13647-0.14404 0.26784-0.29681 0.38858-0.45475 0.0169-0.022 0.0331-0.0439 0.0496-0.0661 0.0542-0.0731 0.10642-0.14748 0.1571-0.22324 0.0123-0.0184 0.021-0.0394 0.0331-0.0579l0.678 0.42995c0.0601-0.0924 0.1182-0.18549 0.17362-0.28112l-0.69453-0.39687-0.22324-0.13231c-0.0541 0.0935-0.11408 0.18312-0.17364 0.27287-0.0166 0.0251-0.0326 0.0497-0.0496 0.0744-0.0434 0.0631-0.0864 0.12909-0.1323 0.19017-0.0568 0.0752-0.1213 0.15122-0.1819 0.22324-0.0693 0.0824-0.14087 0.16182-0.21497 0.23978-0.0659 0.0693-0.12893 0.13277-0.19845 0.19844-0.017 0.0161-0.0324 0.0337-0.0496 0.0496-0.0523 0.0482-0.11112 0.0945-0.16536 0.14056-0.0462 0.0392-0.093 0.0781-0.14056 0.11575-0.037 0.0293-0.078 0.0543-0.11575 0.0827-0.025 0.0188-0.049 0.0396-0.0744 0.0579-0.0825 0.0595-0.1622 0.11883-0.24806 0.17364-0.091 0.0581-0.18639 0.11277-0.28111 0.16536-0.0947 0.0526-0.19121 0.10202-0.28938 0.14883-0.0816 0.0388-0.16434 0.0728-0.24806 0.10748-0.017 7e-3 -0.0325 0.0179-0.0496 0.0248-0.0738 0.0297-0.14784 0.0563-0.22323 0.0827-0.0739 0.0259-0.14787 0.0518-0.22327 0.0744-0.0354 0.0107-0.0717 0.0231-0.10748 0.0331-0.0246 7e-3 -0.0497 0.0101-0.0744 0.0165-0.20351 0.0534-0.40777 0.0951-0.62012 0.12402-0.0905 0.0124-0.1809 0.0253-0.27285 0.0331-0.14675 0.0123-0.29653 0.0166-0.44648 0.0166-0.12165 0-0.24423-1.7e-4 -0.3638-8e-3 -0.028-2e-3 -0.0549-6e-3 -0.0825-8e-3 -0.16268-0.0136-0.32142-0.0381-0.47955-0.0661-0.0299-5e-3 -0.0613-0.0107-0.0909-0.0165-0.0193-4e-3 -0.0386-4e-3 -0.0579-8e-3 -0.15258-0.0315-0.29902-0.0715-0.44649-0.11576-0.0754-0.0226-0.14929-0.0485-0.22324-0.0744-0.093-0.0326-0.18225-0.0699-0.27281-0.10749-0.0836-0.0346-0.16671-0.0688-0.24805-0.10748-0.0982-0.0468-0.19466-0.0962-0.28939-0.14883-0.0947-0.0526-0.19008-0.10725-0.28114-0.16537-0.0858-0.0548-0.16564-0.11411-0.24804-0.17363-0.0255-0.0184-0.0493-0.039-0.0744-0.0579-0.0378-0.0283-0.0787-0.0534-0.11577-0.0827-0.04716-0.0374-0.09472-0.0768-0.14056-0.11575-0.0552-0.0469-0.11214-0.0915-0.16536-0.14056-0.01723-0.0159-0.03259-0.0335-0.04961-0.0496-0.06819-0.0645-0.13374-0.13042-0.19844-0.19844-0.0741-0.078-0.14568-0.15744-0.21497-0.23978-0.05191-0.0617-0.108-0.12613-0.1571-0.19017-0.0083-0.0108-0.01659-0.0222-0.02481-0.0331-0.04663-0.0618-0.08834-0.12634-0.13229-0.19017-0.0168-0.0244-0.03321-0.0497-0.04961-0.0744-0.0077-0.0116-0.01722-0.0214-0.02482-0.0331-0.04996-0.0767-0.10276-0.16039-0.14882-0.23979l-0.22324 0.13231-0.69453 0.39687zm10.997 0v0.52917c0.54098-0.93444 0.85163-2.0176 0.85163-3.175 0-0.10686-3e-3 -0.2169-8e-3 -0.32247-0.0348 1.0792-0.33489 2.09-0.84336 2.9683z" display="inline" fill="#fff" fill-opacity=".062745"/><circle cx="103.26" cy="125.65" r="5.0271" display="inline" fill="url(#linearGradient8762)"/><path d="m103.26 119.3c-3.507 0-6.35 2.843-6.35 6.35 0 1.1574 0.31065 2.2406 0.85163 3.175l0.91778-0.52918c-0.45115-0.77889-0.71107-1.6809-0.71107-2.6458 0-2.9225 2.3692-5.2917 5.2917-5.2917s5.2917 2.3692 5.2917 5.2917c0 0.9649-0.25992 1.8669-0.71107 2.6458l0.91777 0.52918c0.54098-0.93443 0.85163-2.0176 0.85163-3.175 0-3.507-2.843-6.35-6.35-6.35z" display="inline" fill-opacity=".25098"/><path d="m103.26 119.3c-3.507 0-6.35 2.843-6.35 6.35 0 1.1574 0.31065 2.2406 0.85163 3.175l0.23151-0.13229c-0.51747-0.8949-0.81856-1.9346-0.81856-3.0427 0-3.3609 2.7245-6.0854 6.0855-6.0854 3.3609 0 6.0854 2.7245 6.0854 6.0854 0 1.1081-0.30109 2.1478-0.81856 3.0427l0.23151 0.13229c0.54098-0.93443 0.85163-2.0176 0.85163-3.175 0-3.507-2.843-6.35-6.35-6.35z" display="inline" fill-opacity=".25098"/><path transform="matrix(.26458 0 0 .26458 -53.639 88.609)" d="m578 139v15c0 8.2843 6.7157 15 15 15s15-6.7157 15-15v-15c0 8.2843-6.7157 15-15 15s-15-6.7157-15-15z" display="inline" fill="url(#linearGradient8764)" filter="url(#filter7885)"/><circle cx="103.26" cy="125.65" r="3.9687" display="inline" fill="url(#linearGradient8766)"/><g fill-opacity=".12549"><path d="m103.26 120.62c-2.7764 0-5.0271 2.2507-5.0271 5.0271 0 0.0448 0.0071 0.0878 0.0083 0.13229 0.07104-2.7144 2.2873-4.8948 5.0189-4.8948s4.9478 2.1804 5.0188 4.8948c1e-3 -0.0445 8e-3 -0.0875 8e-3 -0.13229 0-2.7764-2.2507-5.0271-5.0271-5.0271z" display="inline" fill="#fff"/><path d="m103.26 121.68c-2.1919 0-3.9688 1.7769-3.9688 3.9688 0 0.0448 0.0068 0.0879 0.0083 0.13229 0.07056-2.1299 1.8134-3.8365 3.9606-3.8365 2.1471 0 3.8899 1.7065 3.9605 3.8365 2e-3 -0.0444 8e-3 -0.0875 8e-3 -0.13229 0-2.1919-1.7769-3.9688-3.9688-3.9688z" display="inline" fill="#fff"/><path d="m103.26 129.62c-2.1919 0-3.9688-1.7769-3.9688-3.9688 0-0.0448 0.0068-0.0879 0.0083-0.13229 0.07055 2.13 1.8134 3.8365 3.9605 3.8365s3.8899-1.7065 3.9605-3.8365c2e-3 0.0444 8e-3 0.0875 8e-3 0.13229 0 2.1919-1.7769 3.9688-3.9688 3.9688z" display="inline"/></g></g><g transform="matrix(.26459 0 0 .26459 -200.44 -88.392)"><rect x="757.54" y="334.07" width="58" height="26" rx="3" ry="3" fill-opacity=".50196"/><rect x="759.54" y="336.07" width="54" height="22" rx="1" ry="1" fill="url(#linearGradient8560)"/><path d="m760.54 336.07c-0.554 0-1 0.446-1 1v1c0-0.554 0.446-1 1-1h52c0.554 0 1 0.446 1 1v-1c0-0.554-0.446-1-1-1z" fill="#fff" fill-opacity=".062745"/><path d="m760.54 358.07c-0.554 0-1-0.446-1-1v-1c0 0.554 0.446 1 1 1h52c0.554 0 1-0.446 1-1v1c0 0.554-0.446 1-1 1z" fill-opacity=".25098"/></g></svg>
diff --git a/res/skins/QMLDemo/images/button_pressed.svg b/res/skins/QMLDemo/images/button_pressed.svg
new file mode 100644
index 00000000000..1c669f0ab31
--- /dev/null
+++ b/res/skins/QMLDemo/images/button_pressed.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="58" height="27" version="1.1" viewBox="0 0 15.346 7.1439" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient8762" x1="762.5" x2="762.5" y1="119.01" y2="158.99" gradientTransform="matrix(.25135 0 0 .25135 -88.524 90.712)" gradientUnits="userSpaceOnUse"><stop stop-color="#303030" offset="0"/><stop stop-color="#181818" offset="1"/></linearGradient><linearGradient id="linearGradient8764" x1="748" x2="748" y1="139" y2="169" gradientTransform="translate(-170)" gradientUnits="userSpaceOnUse"><stop stop-opacity=".75294" offset="0"/><stop stop-opacity="0" offset="1"/></linearGradient><filter id="filter7885"><feGaussianBlur stdDeviation="0.6"/></filter><linearGradient id="linearGradient8766" x1="763" x2="763" y1="119" y2="159" gradientTransform="matrix(.19844 0 0 .19844 -48.149 98.067)" gradientUnits="userSpaceOnUse"><stop stop-color="#404040" offset="0"/><stop stop-color="#282828" offset="1"/></linearGradient><linearGradient id="linearGradient8504"><stop stop-opacity=".29804" offset="0"/><stop stop-opacity=".060976" offset=".5"/><stop stop-opacity="0" offset="1"/></linearGradient><linearGradient id="linearGradient8638" x1="754" x2="754" y1="287" y2="303" gradientTransform="translate(-9.0139 79.594)" gradientUnits="userSpaceOnUse"><stop stop-color="#202020" offset="0"/><stop stop-color="#181818" offset="1"/></linearGradient><linearGradient id="linearGradient8640" x1="747" x2="799" y1="285.5" y2="285.5" gradientTransform="translate(-9.0139 79.594)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0" offset="0"/><stop stop-color="#fff" stop-opacity=".39216" offset=".5"/><stop stop-color="#fff" stop-opacity="0" offset="1"/></linearGradient><linearGradient id="linearGradient8642" x1="747" x2="799" y1="285.5" y2="285.5" gradientTransform="translate(-9.0139 102.59)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0" offset="0"/><stop stop-color="#fff" stop-opacity=".39216" offset=".5"/><stop stop-color="#fff" stop-opacity="0" offset="1"/></linearGradient><linearGradient id="linearGradient8644" x1="747" x2="799" y1="285.5" y2="285.5" gradientTransform="matrix(.38462 0 0 1 79.287 -1022)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0" offset="0"/><stop stop-color="#fff" stop-opacity=".39216" offset=".5"/><stop stop-color="#fff" stop-opacity="0" offset="1"/></linearGradient><linearGradient id="linearGradient8646" x1="747" x2="799" y1="285.5" y2="285.5" gradientTransform="matrix(.38462 0 0 1 79.287 -1077)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0" offset="0"/><stop stop-color="#fff" stop-opacity=".39216" offset=".5"/><stop stop-color="#fff" stop-opacity="0" offset="1"/></linearGradient><linearGradient id="linearGradient8648" x1="579" x2="579" y1="290" y2="296" gradientTransform="translate(170.99 75.594)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient8504"/><linearGradient id="linearGradient8650" x1="579" x2="579" y1="290" y2="296" gradientTransform="rotate(-90 700.29 253.3)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient8504"/><linearGradient id="linearGradient8652" x1="579" x2="579" y1="290" y2="296" gradientTransform="matrix(0 -1 -1 0 1081 953.59)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient8504"/></defs><g transform="translate(-102.03 -133.79)" display="none"><rect x="95.851" y="117.98" width="14.817" height="14.817" rx=".79375" ry=".79375" display="inline" fill="#fff" fill-opacity=".031372"/><circle cx="103.26" cy="125.65" r="5.2917" display="inline" fill-opacity=".50196"/><path d="m96.917 125.86c-0.0052 0.10557-0.0083 0.21561-0.0083 0.32247 0 1.1574 0.31065 2.2406 0.85163 3.175v-0.52917c-0.50847-0.87827-0.80854-1.8891-0.84336-2.9683zm0.84336 2.9683c0.05542 0.0956 0.11349 0.18875 0.17363 0.28112l0.678-0.42995c0.04787 0.0734 0.09762 0.14399 0.14883 0.21498 0.02096 0.0291 0.03638 0.0623 0.05788 0.0909 0.04113 0.0548 0.08922 0.10388 0.13229 0.15708 0.02207 0.0273 0.04358 0.0558 0.06615 0.0827 0.02133 0.0253 0.04438 0.0495 0.06615 0.0744 0.07195 0.0827 0.14663 0.16146 0.22324 0.23978 0.0069 7e-3 0.0096 0.0178 0.01654 0.0248 0.05152 0.0521 0.10357 0.0988 0.1571 0.14884 0.08354 0.0781 0.16809 0.15037 0.25632 0.22324 0.06369 0.0526 0.12415 0.10732 0.19017 0.1571 0.04867 0.0368 0.09893 0.0722 0.14883 0.10748 0.0466 0.0328 0.093 0.0679 0.14057 0.0992 0.0512 0.0339 0.1047 0.067 0.1571 0.0992 0.0535 0.0327 0.11069 0.06 0.16537 0.0909 0.0138 8e-3 0.0275 0.0171 0.0413 0.0248 0.0795 0.0441 0.15796 0.092 0.23979 0.13231 0.0542 0.0267 0.11016 0.0494 0.16536 0.0744 0.049 0.0222 0.0991 0.0454 0.14883 0.0661 0.0193 8e-3 0.0384 0.017 0.0579 0.0248 0.10597 0.0428 0.21336 0.0794 0.32245 0.11575 0.0429 0.0143 0.0889 0.0281 0.1323 0.0413 0.0442 0.0135 0.0877 0.029 0.13229 0.0413 0.0241 7e-3 0.0502 0.0102 0.0744 0.0165 0.0938 0.0246 0.18545 0.0464 0.28111 0.0661 0.0717 0.0149 0.14224 0.0293 0.21498 0.0413 0.0632 0.0104 0.12621 0.0165 0.19016 0.0248 0.0406 5e-3 0.0833 0.0122 0.12403 0.0165 0.19543 0.0209 0.39418 0.0331 0.59531 0.0331s0.3999-0.0121 0.59531-0.0331c0.0414-4e-3 0.0828-0.0112 0.12402-0.0165 0.064-8e-3 0.12693-0.0144 0.19017-0.0248 0.0727-0.0121 0.14323-0.0265 0.21498-0.0413 0.0731-0.0151 0.14297-0.0317 0.21497-0.0496 0.0907-0.0227 0.184-0.0473 0.27284-0.0744 0.0725-0.0221 0.14381-0.0494 0.21499-0.0744 0.20937-0.0735 0.41488-0.15094 0.61187-0.24804 0.0652-0.0321 0.12644-0.073 0.19015-0.10749 0.0604-0.0329 0.12284-0.0642 0.18191-0.0992 0.0551-0.0326 0.11147-0.0648 0.16535-0.0992 0.047-0.0302 0.0945-0.0594 0.14057-0.091 0.047-0.0321 0.0946-0.0657 0.14056-0.0992 0.0913-0.0667 0.17759-0.14296 0.26458-0.21498 0.0882-0.0729 0.17277-0.14517 0.25632-0.22324 0.0535-0.0501 0.10558-0.0967 0.1571-0.14884 0.0273-0.0276 0.0559-0.0545 0.0829-0.0827 0.13647-0.14404 0.26784-0.29681 0.38858-0.45475 0.0169-0.022 0.0331-0.0439 0.0496-0.0661 0.0542-0.0731 0.10642-0.14748 0.1571-0.22324 0.0123-0.0184 0.021-0.0394 0.0331-0.0579l0.678 0.42995c0.0601-0.0924 0.1182-0.18549 0.17362-0.28112l-0.69453-0.39687-0.22324-0.13231c-0.0541 0.0935-0.11408 0.18312-0.17364 0.27287-0.0166 0.0251-0.0326 0.0497-0.0496 0.0744-0.0434 0.0631-0.0864 0.12909-0.1323 0.19017-0.0568 0.0752-0.1213 0.15122-0.1819 0.22324-0.0693 0.0824-0.14087 0.16182-0.21497 0.23978-0.0659 0.0693-0.12893 0.13277-0.19845 0.19844-0.017 0.0161-0.0324 0.0337-0.0496 0.0496-0.0523 0.0482-0.11112 0.0945-0.16536 0.14056-0.0462 0.0392-0.093 0.0781-0.14056 0.11575-0.037 0.0293-0.078 0.0543-0.11575 0.0827-0.025 0.0188-0.049 0.0396-0.0744 0.0579-0.0825 0.0595-0.1622 0.11883-0.24806 0.17364-0.091 0.0581-0.18639 0.11277-0.28111 0.16536-0.0947 0.0526-0.19121 0.10202-0.28938 0.14883-0.0816 0.0388-0.16434 0.0728-0.24806 0.10748-0.017 7e-3 -0.0325 0.0179-0.0496 0.0248-0.0738 0.0297-0.14784 0.0563-0.22323 0.0827-0.0739 0.0259-0.14787 0.0518-0.22327 0.0744-0.0354 0.0107-0.0717 0.0231-0.10748 0.0331-0.0246 7e-3 -0.0497 0.0101-0.0744 0.0165-0.20351 0.0534-0.40777 0.0951-0.62012 0.12402-0.0905 0.0124-0.1809 0.0253-0.27285 0.0331-0.14675 0.0123-0.29653 0.0166-0.44648 0.0166-0.12165 0-0.24423-1.7e-4 -0.3638-8e-3 -0.028-2e-3 -0.0549-6e-3 -0.0825-8e-3 -0.16268-0.0136-0.32142-0.0381-0.47955-0.0661-0.0299-5e-3 -0.0613-0.0107-0.0909-0.0165-0.0193-4e-3 -0.0386-4e-3 -0.0579-8e-3 -0.15258-0.0315-0.29902-0.0715-0.44649-0.11576-0.0754-0.0226-0.14929-0.0485-0.22324-0.0744-0.093-0.0326-0.18225-0.0699-0.27281-0.10749-0.0836-0.0346-0.16671-0.0688-0.24805-0.10748-0.0982-0.0468-0.19466-0.0962-0.28939-0.14883-0.0947-0.0526-0.19008-0.10725-0.28114-0.16537-0.0858-0.0548-0.16564-0.11411-0.24804-0.17363-0.0255-0.0184-0.0493-0.039-0.0744-0.0579-0.0378-0.0283-0.0787-0.0534-0.11577-0.0827-0.04716-0.0374-0.09472-0.0768-0.14056-0.11575-0.0552-0.0469-0.11214-0.0915-0.16536-0.14056-0.01723-0.0159-0.03259-0.0335-0.04961-0.0496-0.06819-0.0645-0.13374-0.13042-0.19844-0.19844-0.0741-0.078-0.14568-0.15744-0.21497-0.23978-0.05191-0.0617-0.108-0.12613-0.1571-0.19017-0.0083-0.0108-0.01659-0.0222-0.02481-0.0331-0.04663-0.0618-0.08834-0.12634-0.13229-0.19017-0.0168-0.0244-0.03321-0.0497-0.04961-0.0744-0.0077-0.0116-0.01722-0.0214-0.02482-0.0331-0.04996-0.0767-0.10276-0.16039-0.14882-0.23979l-0.22324 0.13231-0.69453 0.39687zm10.997 0v0.52917c0.54098-0.93444 0.85163-2.0176 0.85163-3.175 0-0.10686-3e-3 -0.2169-8e-3 -0.32247-0.0348 1.0792-0.33489 2.09-0.84336 2.9683z" display="inline" fill="#fff" fill-opacity=".062745"/><circle cx="103.26" cy="125.65" r="5.0271" display="inline" fill="url(#linearGradient8762)"/><path d="m103.26 119.3c-3.507 0-6.35 2.843-6.35 6.35 0 1.1574 0.31065 2.2406 0.85163 3.175l0.91778-0.52918c-0.45115-0.77889-0.71107-1.6809-0.71107-2.6458 0-2.9225 2.3692-5.2917 5.2917-5.2917s5.2917 2.3692 5.2917 5.2917c0 0.9649-0.25992 1.8669-0.71107 2.6458l0.91777 0.52918c0.54098-0.93443 0.85163-2.0176 0.85163-3.175 0-3.507-2.843-6.35-6.35-6.35z" display="inline" fill-opacity=".25098"/><path d="m103.26 119.3c-3.507 0-6.35 2.843-6.35 6.35 0 1.1574 0.31065 2.2406 0.85163 3.175l0.23151-0.13229c-0.51747-0.8949-0.81856-1.9346-0.81856-3.0427 0-3.3609 2.7245-6.0854 6.0855-6.0854 3.3609 0 6.0854 2.7245 6.0854 6.0854 0 1.1081-0.30109 2.1478-0.81856 3.0427l0.23151 0.13229c0.54098-0.93443 0.85163-2.0176 0.85163-3.175 0-3.507-2.843-6.35-6.35-6.35z" display="inline" fill-opacity=".25098"/><path transform="matrix(.26458 0 0 .26458 -53.639 88.609)" d="m578 139v15c0 8.2843 6.7157 15 15 15s15-6.7157 15-15v-15c0 8.2843-6.7157 15-15 15s-15-6.7157-15-15z" display="inline" fill="url(#linearGradient8764)" filter="url(#filter7885)"/><circle cx="103.26" cy="125.65" r="3.9687" display="inline" fill="url(#linearGradient8766)"/><g fill-opacity=".12549"><path d="m103.26 120.62c-2.7764 0-5.0271 2.2507-5.0271 5.0271 0 0.0448 0.0071 0.0878 0.0083 0.13229 0.07104-2.7144 2.2873-4.8948 5.0189-4.8948s4.9478 2.1804 5.0188 4.8948c1e-3 -0.0445 8e-3 -0.0875 8e-3 -0.13229 0-2.7764-2.2507-5.0271-5.0271-5.0271z" display="inline" fill="#fff"/><path d="m103.26 121.68c-2.1919 0-3.9688 1.7769-3.9688 3.9688 0 0.0448 0.0068 0.0879 0.0083 0.13229 0.07056-2.1299 1.8134-3.8365 3.9606-3.8365 2.1471 0 3.8899 1.7065 3.9605 3.8365 2e-3 -0.0444 8e-3 -0.0875 8e-3 -0.13229 0-2.1919-1.7769-3.9688-3.9688-3.9688z" display="inline" fill="#fff"/><path d="m103.26 129.62c-2.1919 0-3.9688-1.7769-3.9688-3.9688 0-0.0448 0.0068-0.0879 0.0083-0.13229 0.07055 2.13 1.8134 3.8365 3.9605 3.8365s3.8899-1.7065 3.9605-3.8365c2e-3 0.0444 8e-3 0.0875 8e-3 0.13229 0 2.1919-1.7769 3.9688-3.9688 3.9688z" display="inline"/></g></g><g transform="matrix(.26459 0 0 .26459 -194.47 -96.204)"><rect x="734.99" y="363.59" width="58" height="26" rx="3" ry="3" fill-opacity=".50196"/><path d="m734.99 386.59v1c0 1.662 1.338 3 3 3h52c1.662 0 3-1.338 3-3v-1c0 1.662-1.338 3-3 3h-52c-1.662 0-3-1.338-3-3z" fill="#fff" fill-opacity=".031372"/><rect x="736.99" y="365.59" width="54" height="22" rx="1" ry="1" fill="url(#linearGradient8638)"/><path d="m737.99 387.59c-0.554 0-1-0.446-1-1v-1c0 0.554 0.446 1 1 1h52c0.554 0 1-0.446 1-1v1c0 0.554-0.446 1-1 1z" fill-opacity=".25098"/><g><rect x="737.99" y="364.59" width="52" height="1" fill="url(#linearGradient8640)" opacity=".75"/><rect x="737.99" y="387.59" width="52" height="1" fill="url(#linearGradient8642)"/><rect transform="rotate(90)" x="366.59" y="-736.99" width="20" height="1" fill="url(#linearGradient8644)" opacity=".5"/><rect transform="rotate(90)" x="366.59" y="-791.99" width="20" height="1" fill="url(#linearGradient8646)" opacity=".5"/><path d="m737.99 365.59c-0.554 0-1 0.446-1 1v5h54v-5c0-0.554-0.446-1-1-1z" fill="url(#linearGradient8648)"/><path d="m736.99 386.59c0 0.554 0.446 1 1 1h5v-22h-5c-0.554 0-1 0.446-1 1z" fill="url(#linearGradient8650)"/><path d="m790.99 386.59c0 0.554-0.446 1-1 1h-5v-22h5c0.554 0 1 0.446 1 1z" fill="url(#linearGradient8652)"/></g><path d="m737.99 365.59c-0.554 0-1 0.446-1 1v1c0-0.554 0.446-1 1-1h52c0.554 0 1 0.446 1 1v-1c0-0.554-0.446-1-1-1z" fill="#fff" fill-opacity=".031372"/></g></svg>
diff --git a/res/skins/QMLDemo/images/icon_passthrough.svg b/res/skins/QMLDemo/images/icon_passthrough.svg
new file mode 100644
index 00000000000..cd74c2b7f2d
--- /dev/null
+++ b/res/skins/QMLDemo/images/icon_passthrough.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="7.276mm" height="2.6458mm" version="1.1" viewBox="0 0 7.276 2.6458" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-116.42 -196.74)" fill="#fff"><path d="m119.33 196.74c-0.73063 0-1.3229 0.5923-1.3229 1.3229 0 0.73063 0.59229 1.3229 1.3229 1.3229s1.3229-0.59228 1.3229-1.3229c0-0.73062-0.59229-1.3229-1.3229-1.3229zm0 0.52917c0.43838 0 0.79375 0.35538 0.79375 0.79375 0 0.43838-0.35537 0.79375-0.79375 0.79375s-0.79375-0.35537-0.79375-0.79375c0-0.43837 0.35537-0.79375 0.79375-0.79375z"/><path d="m119.06 197.79h-2.6458v0.52916h2.6458z"/><path transform="matrix(1.1066 0 0 1.0953 -8.7713 -18.739)" d="m116.23 197.94-0.83681 0.48313v-0.96627l0.41841 0.24157z"/><path d="m122.9 197.79h-2.6458v0.52916h2.6458z"/><path transform="matrix(1.1066 0 0 1.0953 -4.9348 -18.739)" d="m116.23 197.94-0.83681 0.48313v-0.96627l0.41841 0.24157z"/></g></svg>
diff --git a/res/skins/QMLDemo/images/icon_quantize.svg b/res/skins/QMLDemo/images/icon_quantize.svg
new file mode 100644
index 00000000000..63d974c43c9
--- /dev/null
+++ b/res/skins/QMLDemo/images/icon_quantize.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="8.46667mm"
+   height="2.6458299mm"
+   viewBox="0 0 8.46667 2.6458299"
+   version="1.1"
+   id="svg9300">
+  <defs
+     id="defs9294" />
+  <metadata
+     id="metadata9297">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-112.18333,-196.73661)">
+    <path
+       id="path18754"
+       d="m 112.18333,196.73661 v 2.64583 h 0.52917 v -2.64583 z m 1.32292,0 v 2.64583 h 0.52917 v -2.64583 z m 1.32292,0 v 2.64583 h 0.52916 v -2.64583 z m 1.85208,0 v 0.52916 h 2.64583 c 0.43838,0 0.79375,0.35538 0.79375,0.79375 0,0.43838 -0.35537,0.79375 -0.79375,0.79375 h -2.64583 v 0.52917 h 2.64583 c 0.73063,0 1.32292,-0.59229 1.32292,-1.32292 0,-0.73062 -0.59229,-1.32291 -1.32292,-1.32291 z"
+       style="display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.264583" />
+  </g>
+</svg>
diff --git a/res/skins/QMLDemo/images/knob.svg b/res/skins/QMLDemo/images/knob.svg
new file mode 100644
index 00000000000..d75a207454f
--- /dev/null
+++ b/res/skins/QMLDemo/images/knob.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="61" height="61" version="1.1" viewBox="0 0 16.14 16.14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient8762" x1="762.5" x2="762.5" y1="119.01" y2="158.99" gradientTransform="matrix(.25135 0 0 .25135 -88.524 90.712)" gradientUnits="userSpaceOnUse"><stop stop-color="#303030" offset="0"/><stop stop-color="#181818" offset="1"/></linearGradient><linearGradient id="linearGradient8764" x1="748" x2="748" y1="139" y2="169" gradientTransform="translate(-170)" gradientUnits="userSpaceOnUse"><stop stop-opacity=".75294" offset="0"/><stop stop-opacity="0" offset="1"/></linearGradient><filter id="filter7885"><feGaussianBlur stdDeviation="0.6"/></filter><linearGradient id="linearGradient8766" x1="763" x2="763" y1="119" y2="159" gradientTransform="matrix(.19844 0 0 .19844 -48.149 98.067)" gradientUnits="userSpaceOnUse"><stop stop-color="#404040" offset="0"/><stop stop-color="#282828" offset="1"/></linearGradient><linearGradient id="linearGradient8768" x1="761" x2="761" y1="196" y2="185" gradientTransform="matrix(.26458 0 0 .26458 -193.81 -44.979)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".031373" offset="0"/><stop stop-color="#fff" stop-opacity=".062745" offset="1"/></linearGradient></defs><g transform="translate(-95.189 -117.98)"><rect x="95.851" y="117.98" width="14.817" height="14.817" rx=".79375" ry=".79375" fill="#fff" fill-opacity=".031372"/><ellipse cx="103.26" cy="125.65" rx="5.2917" ry="5.2917" fill-opacity=".50196"/><path d="m96.917 125.86c-0.0052 0.10557-0.0083 0.21561-0.0083 0.32247 0 1.1574 0.31065 2.2406 0.85163 3.175v-0.52917c-0.50847-0.87827-0.80854-1.8891-0.84336-2.9683zm0.84336 2.9683c0.05542 0.0956 0.11349 0.18875 0.17363 0.28112l0.678-0.42995c0.04787 0.0734 0.09762 0.14399 0.14883 0.21498 0.02096 0.0291 0.03638 0.0623 0.05788 0.0909 0.04113 0.0548 0.08922 0.10388 0.13229 0.15708 0.02207 0.0273 0.04358 0.0558 0.06615 0.0827 0.02133 0.0253 0.04438 0.0495 0.06615 0.0744 0.07195 0.0827 0.14663 0.16146 0.22324 0.23978 0.0069 7e-3 0.0096 0.0178 0.01654 0.0248 0.05152 0.0521 0.10357 0.0988 0.1571 0.14884 0.08354 0.0781 0.16809 0.15037 0.25632 0.22324 0.06369 0.0526 0.12415 0.10732 0.19017 0.1571 0.04867 0.0368 0.09893 0.0722 0.14883 0.10748 0.0466 0.0328 0.093 0.0679 0.14057 0.0992 0.0512 0.0339 0.1047 0.067 0.1571 0.0992 0.0535 0.0327 0.11069 0.06 0.16537 0.0909 0.0138 8e-3 0.0275 0.0171 0.0413 0.0248 0.0795 0.0441 0.15796 0.092 0.23979 0.13231 0.0542 0.0267 0.11016 0.0494 0.16536 0.0744 0.049 0.0222 0.0991 0.0454 0.14883 0.0661 0.0193 8e-3 0.0384 0.017 0.0579 0.0248 0.10597 0.0428 0.21336 0.0794 0.32245 0.11575 0.0429 0.0143 0.0889 0.0281 0.1323 0.0413 0.0442 0.0135 0.0877 0.029 0.13229 0.0413 0.0241 7e-3 0.0502 0.0102 0.0744 0.0165 0.0938 0.0246 0.18545 0.0464 0.28111 0.0661 0.0717 0.0149 0.14224 0.0293 0.21498 0.0413 0.0632 0.0104 0.12621 0.0165 0.19016 0.0248 0.0406 5e-3 0.0833 0.0122 0.12403 0.0165 0.19543 0.0209 0.39418 0.0331 0.59531 0.0331s0.3999-0.0121 0.59531-0.0331c0.0414-4e-3 0.0828-0.0112 0.12402-0.0165 0.064-8e-3 0.12693-0.0144 0.19017-0.0248 0.0727-0.0121 0.14323-0.0265 0.21498-0.0413 0.0731-0.0151 0.14297-0.0317 0.21497-0.0496 0.0907-0.0227 0.184-0.0473 0.27284-0.0744 0.0725-0.0221 0.14381-0.0494 0.21499-0.0744 0.20937-0.0735 0.41488-0.15094 0.61187-0.24804 0.0652-0.0321 0.12644-0.073 0.19015-0.10749 0.0604-0.0329 0.12284-0.0642 0.18191-0.0992 0.0551-0.0326 0.11147-0.0648 0.16535-0.0992 0.047-0.0302 0.0945-0.0594 0.14057-0.091 0.047-0.0321 0.0946-0.0657 0.14056-0.0992 0.0913-0.0667 0.17759-0.14296 0.26458-0.21498 0.0882-0.0729 0.17277-0.14517 0.25632-0.22324 0.0535-0.0501 0.10558-0.0967 0.1571-0.14884 0.0273-0.0276 0.0559-0.0545 0.0829-0.0827 0.13647-0.14404 0.26784-0.29681 0.38858-0.45475 0.0169-0.022 0.0331-0.0439 0.0496-0.0661 0.0542-0.0731 0.10642-0.14748 0.1571-0.22324 0.0123-0.0184 0.021-0.0394 0.0331-0.0579l0.678 0.42995c0.0601-0.0924 0.1182-0.18549 0.17362-0.28112l-0.69453-0.39687-0.22324-0.13231c-0.0541 0.0935-0.11408 0.18312-0.17364 0.27287-0.0166 0.0251-0.0326 0.0497-0.0496 0.0744-0.0434 0.0631-0.0864 0.12909-0.1323 0.19017-0.0568 0.0752-0.1213 0.15122-0.1819 0.22324-0.0693 0.0824-0.14087 0.16182-0.21497 0.23978-0.0659 0.0693-0.12893 0.13277-0.19845 0.19844-0.017 0.0161-0.0324 0.0337-0.0496 0.0496-0.0523 0.0482-0.11112 0.0945-0.16536 0.14056-0.0462 0.0392-0.093 0.0781-0.14056 0.11575-0.037 0.0293-0.078 0.0543-0.11575 0.0827-0.025 0.0188-0.049 0.0396-0.0744 0.0579-0.0825 0.0595-0.1622 0.11883-0.24806 0.17364-0.091 0.0581-0.18639 0.11277-0.28111 0.16536-0.0947 0.0526-0.19121 0.10202-0.28938 0.14883-0.0816 0.0388-0.16434 0.0728-0.24806 0.10748-0.017 7e-3 -0.0325 0.0179-0.0496 0.0248-0.0738 0.0297-0.14784 0.0563-0.22323 0.0827-0.0739 0.0259-0.14787 0.0518-0.22327 0.0744-0.0354 0.0107-0.0717 0.0231-0.10748 0.0331-0.0246 7e-3 -0.0497 0.0101-0.0744 0.0165-0.20351 0.0534-0.40777 0.0951-0.62012 0.12402-0.0905 0.0124-0.1809 0.0253-0.27285 0.0331-0.14675 0.0123-0.29653 0.0166-0.44648 0.0166-0.12165 0-0.24423-1.7e-4 -0.3638-8e-3 -0.028-2e-3 -0.0549-6e-3 -0.0825-8e-3 -0.16268-0.0136-0.32142-0.0381-0.47955-0.0661-0.0299-5e-3 -0.0613-0.0107-0.0909-0.0165-0.0193-4e-3 -0.0386-4e-3 -0.0579-8e-3 -0.15258-0.0315-0.29902-0.0715-0.44649-0.11576-0.0754-0.0226-0.14929-0.0485-0.22324-0.0744-0.093-0.0326-0.18225-0.0699-0.27281-0.10749-0.0836-0.0346-0.16671-0.0688-0.24805-0.10748-0.0982-0.0468-0.19466-0.0962-0.28939-0.14883-0.0947-0.0526-0.19008-0.10725-0.28114-0.16537-0.0858-0.0548-0.16564-0.11411-0.24804-0.17363-0.0255-0.0184-0.0493-0.039-0.0744-0.0579-0.0378-0.0283-0.0787-0.0534-0.11577-0.0827-0.04716-0.0374-0.09472-0.0768-0.14056-0.11575-0.0552-0.0469-0.11214-0.0915-0.16536-0.14056-0.01723-0.0159-0.03259-0.0335-0.04961-0.0496-0.06819-0.0645-0.13374-0.13042-0.19844-0.19844-0.0741-0.078-0.14568-0.15744-0.21497-0.23978-0.05191-0.0617-0.108-0.12613-0.1571-0.19017-0.0083-0.0108-0.01659-0.0222-0.02481-0.0331-0.04663-0.0618-0.08834-0.12634-0.13229-0.19017-0.0168-0.0244-0.03321-0.0497-0.04961-0.0744-0.0077-0.0116-0.01722-0.0214-0.02482-0.0331-0.04996-0.0767-0.10276-0.16039-0.14882-0.23979l-0.22324 0.13231-0.69453 0.39687zm10.997 0v0.52917c0.54098-0.93444 0.85163-2.0176 0.85163-3.175 0-0.10686-3e-3 -0.2169-8e-3 -0.32247-0.0348 1.0792-0.33489 2.09-0.84336 2.9683z" fill="#fff" fill-opacity=".062745"/><ellipse cx="103.26" cy="125.65" rx="5.0271" ry="5.0271" fill="url(#linearGradient8762)"/><path d="m103.26 119.3c-3.507 0-6.35 2.843-6.35 6.35 0 1.1574 0.31065 2.2406 0.85163 3.175l0.91778-0.52918c-0.45115-0.77889-0.71107-1.6809-0.71107-2.6458 0-2.9225 2.3692-5.2917 5.2917-5.2917 2.9225 0 5.2917 2.3692 5.2917 5.2917 0 0.9649-0.25992 1.8669-0.71107 2.6458l0.91777 0.52918c0.54098-0.93443 0.85163-2.0176 0.85163-3.175 0-3.507-2.843-6.35-6.35-6.35z" fill-opacity=".25098"/><path d="m103.26 119.3c-3.507 0-6.35 2.843-6.35 6.35 0 1.1574 0.31065 2.2406 0.85163 3.175l0.23151-0.13229c-0.51747-0.8949-0.81856-1.9346-0.81856-3.0427 0-3.3609 2.7245-6.0854 6.0855-6.0854 3.3609 0 6.0854 2.7245 6.0854 6.0854 0 1.1081-0.30109 2.1478-0.81856 3.0427l0.23151 0.13229c0.54098-0.93443 0.85163-2.0176 0.85163-3.175 0-3.507-2.843-6.35-6.35-6.35z" fill-opacity=".25098"/><path transform="matrix(.26458 0 0 .26458 -53.639 88.609)" d="m578 139v15c0 8.2843 6.7157 15 15 15s15-6.7157 15-15v-15c0 8.2843-6.7157 15-15 15s-15-6.7157-15-15z" fill="url(#linearGradient8764)" filter="url(#filter7885)"/><ellipse cx="103.26" cy="125.65" rx="3.9687" ry="3.9687" fill="url(#linearGradient8766)"/><g fill-opacity=".12549"><path d="m103.26 120.62c-2.7764 0-5.0271 2.2507-5.0271 5.0271 0 0.0448 0.0071 0.0878 0.0083 0.13229 0.07104-2.7144 2.2873-4.8948 5.0189-4.8948 2.7316 0 4.9478 2.1804 5.0188 4.8948 1e-3 -0.0445 8e-3 -0.0875 8e-3 -0.13229 0-2.7764-2.2507-5.0271-5.0271-5.0271z" fill="#fff"/><path d="m103.26 121.68c-2.1919 0-3.9688 1.7769-3.9688 3.9688 0 0.0448 0.0068 0.0879 0.0083 0.13229 0.07056-2.1299 1.8134-3.8365 3.9606-3.8365 2.1471 0 3.8899 1.7065 3.9605 3.8365 2e-3 -0.0444 8e-3 -0.0875 8e-3 -0.13229 0-2.1919-1.7769-3.9688-3.9688-3.9688z" fill="#fff"/><path d="m103.26 129.62c-2.1919 0-3.9688-1.7769-3.9688-3.9688 0-0.0448 0.0068-0.0879 0.0083-0.13229 0.07055 2.13 1.8134 3.8365 3.9605 3.8365 2.1471 0 3.8899-1.7065 3.9605-3.8365 2e-3 0.0444 8e-3 0.0875 8e-3 0.13229 0 2.1919-1.7769 3.9688-3.9688 3.9688z"/></g></g><g display="none"><rect x="7.8053" y="3.9688" width=".52917" height="2.6458" display="inline" fill="#fff"/><path d="m7.5407 3.9687v2.6458h0.26459v-2.6458zm0.26459 2.6458v0.26458h0.52916v-0.26458zm0.52916 0h0.26459v-2.6458h-0.26459z" display="inline" fill="url(#linearGradient8768)"/></g></svg>
diff --git a/res/skins/QMLDemo/images/slider_bpm.svg b/res/skins/QMLDemo/images/slider_bpm.svg
new file mode 100644
index 00000000000..bdeb7176abb
--- /dev/null
+++ b/res/skins/QMLDemo/images/slider_bpm.svg
@@ -0,0 +1,1812 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   width="11.641666mm"
+   height="33.866665mm"
+   viewBox="0 0 11.641666 33.866664"
+   version="1.1"
+   id="svg6049">
+  <defs
+     id="defs6043">
+    <linearGradient
+       xlink:href="#linearGradient9019"
+       id="linearGradient18830"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,0.26458333,-0.26458333,0,-162.18958,166.78199)"
+       x1="87"
+       y1="-713"
+       x2="218"
+       y2="-713" />
+    <linearGradient
+       id="linearGradient9019">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="0"
+         id="stop9021" />
+      <stop
+         id="stop9036"
+         offset="0.19607843"
+         style="stop-color:#ffffff;stop-opacity:0.03921569;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.04705882;"
+         offset="1"
+         id="stop9023" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata6046">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-20.637501,-190.06532)">
+    <path
+       id="path18280"
+       d="m 26.458338,189.80074 c -0.439737,0 -0.79375,0.35402 -0.79375,0.79375 v 33.07292 c 0,0.43974 0.354013,0.79375 0.79375,0.79375 0.439738,0 0.79375,-0.35401 0.79375,-0.79375 v -33.07292 c 0,-0.43973 -0.354012,-0.79375 -0.79375,-0.79375 z m -0.03307,0.26459 h 0.06615 c 0.273786,0 0.496094,0.23601 0.496094,0.52916 v 33.07292 c 0,0.29316 -0.222308,0.52917 -0.496094,0.52917 h -0.06615 c -0.273785,0 -0.496093,-0.23601 -0.496093,-0.52917 v -33.07292 c 0,-0.29315 0.222308,-0.52916 0.496093,-0.52916 z"
+       style="display:inline;fill:url(#linearGradient18830);fill-opacity:1;stroke:none;stroke-width:0.264583" />
+    <rect
+       transform="rotate(90)"
+       style="display:inline;fill:#000000;fill-opacity:0.501961;stroke:none;stroke-width:0.263177"
+       id="rect18282"
+       width="33.769573"
+       height="1.0583333"
+       x="190.06532"
+       y="-26.987505"
+       rx="0.52355927"
+       ry="0.49419662" />
+    <g
+       transform="matrix(0.26458333,0,0,0.26458333,-146.31458,166.78199)"
+       id="g18284"
+       style="display:inline">
+      <g
+         id="g18286">
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18288"
+           width="15"
+           height="1"
+           x="-675"
+           y="89"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="88"
+           x="-675"
+           height="1"
+           width="15"
+           id="rect18290"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="89"
+           x="-646"
+           height="1"
+           width="15"
+           id="rect18292"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18294"
+           width="15"
+           height="1"
+           x="-646"
+           y="88"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+      </g>
+      <g
+         id="g18296">
+        <rect
+           ry="1"
+           rx="0"
+           y="215"
+           x="-675"
+           height="1"
+           width="15"
+           id="rect18298"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18300"
+           width="15"
+           height="1"
+           x="-675"
+           y="214"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18302"
+           width="15"
+           height="1"
+           x="-646"
+           y="215"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="214"
+           x="-646"
+           height="1"
+           width="15"
+           id="rect18304"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+      </g>
+      <g
+         id="g18306">
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18308"
+           width="15"
+           height="1"
+           x="-675"
+           y="152"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="151"
+           x="-675"
+           height="1"
+           width="15"
+           id="rect18310"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="152"
+           x="-646"
+           height="1"
+           width="15"
+           id="rect18312"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18314"
+           width="15"
+           height="1"
+           x="-646"
+           y="151"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+      </g>
+      <g
+         id="g18316">
+        <rect
+           ry="1"
+           rx="0"
+           y="92"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18318"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18320"
+           width="9"
+           height="1"
+           x="-669"
+           y="91"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18322"
+           width="9"
+           height="1"
+           x="-646"
+           y="92"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="91"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18324"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18326"
+           width="9"
+           height="1"
+           x="-669"
+           y="95"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="94"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18328"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="95"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18330"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18332"
+           width="9"
+           height="1"
+           x="-646"
+           y="94"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="98"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18334"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18336"
+           width="9"
+           height="1"
+           x="-669"
+           y="97"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18338"
+           width="9"
+           height="1"
+           x="-646"
+           y="98"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="97"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18340"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18342"
+           width="9"
+           height="1"
+           x="-669"
+           y="101"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="100"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18344"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="101"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18346"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18348"
+           width="9"
+           height="1"
+           x="-646"
+           y="100"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="104"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18350"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18352"
+           width="9"
+           height="1"
+           x="-669"
+           y="103"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18354"
+           width="9"
+           height="1"
+           x="-646"
+           y="104"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="103"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18356"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18358"
+           width="9"
+           height="1"
+           x="-669"
+           y="107"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="106"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18360"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="107"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18362"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18364"
+           width="9"
+           height="1"
+           x="-646"
+           y="106"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="110"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18366"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18368"
+           width="9"
+           height="1"
+           x="-669"
+           y="109"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18370"
+           width="9"
+           height="1"
+           x="-646"
+           y="110"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="109"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18372"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18374"
+           width="9"
+           height="1"
+           x="-669"
+           y="113"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="112"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18376"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="113"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18378"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18380"
+           width="9"
+           height="1"
+           x="-646"
+           y="112"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="116"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18382"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18384"
+           width="9"
+           height="1"
+           x="-669"
+           y="115"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18386"
+           width="9"
+           height="1"
+           x="-646"
+           y="116"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="115"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18388"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18390"
+           width="9"
+           height="1"
+           x="-669"
+           y="119"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="118"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18392"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="119"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18394"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18396"
+           width="9"
+           height="1"
+           x="-646"
+           y="118"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="122"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18398"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18400"
+           width="9"
+           height="1"
+           x="-669"
+           y="121"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18402"
+           width="9"
+           height="1"
+           x="-646"
+           y="122"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="121"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18404"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18406"
+           width="9"
+           height="1"
+           x="-669"
+           y="125"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="124"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18408"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="125"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18410"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18412"
+           width="9"
+           height="1"
+           x="-646"
+           y="124"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="128"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18414"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18416"
+           width="9"
+           height="1"
+           x="-669"
+           y="127"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18418"
+           width="9"
+           height="1"
+           x="-646"
+           y="128"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="127"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18420"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18422"
+           width="9"
+           height="1"
+           x="-669"
+           y="131"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="130"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18424"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="131"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18426"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18428"
+           width="9"
+           height="1"
+           x="-646"
+           y="130"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="134"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18430"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18432"
+           width="9"
+           height="1"
+           x="-669"
+           y="133"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18434"
+           width="9"
+           height="1"
+           x="-646"
+           y="134"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="133"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18436"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18438"
+           width="9"
+           height="1"
+           x="-669"
+           y="137"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="136"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18440"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="137"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18442"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18444"
+           width="9"
+           height="1"
+           x="-646"
+           y="136"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="140"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18446"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18448"
+           width="9"
+           height="1"
+           x="-669"
+           y="139"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18450"
+           width="9"
+           height="1"
+           x="-646"
+           y="140"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="139"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18452"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18454"
+           width="9"
+           height="1"
+           x="-669"
+           y="143"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="142"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18456"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="143"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18458"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18460"
+           width="9"
+           height="1"
+           x="-646"
+           y="142"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="146"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18462"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18464"
+           width="9"
+           height="1"
+           x="-669"
+           y="145"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18466"
+           width="9"
+           height="1"
+           x="-646"
+           y="146"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="145"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18468"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18470"
+           width="9"
+           height="1"
+           x="-669"
+           y="149"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="148"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18472"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="149"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18474"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18476"
+           width="9"
+           height="1"
+           x="-646"
+           y="148"
+           rx="0"
+           ry="1" />
+      </g>
+      <g
+         transform="translate(0,63)"
+         id="g18478">
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18480"
+           width="9"
+           height="1"
+           x="-669"
+           y="92"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="91"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18482"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="92"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18484"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18486"
+           width="9"
+           height="1"
+           x="-646"
+           y="91"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="95"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18488"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18490"
+           width="9"
+           height="1"
+           x="-669"
+           y="94"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18492"
+           width="9"
+           height="1"
+           x="-646"
+           y="95"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="94"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18494"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18496"
+           width="9"
+           height="1"
+           x="-669"
+           y="98"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="97"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18498"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="98"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18500"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18502"
+           width="9"
+           height="1"
+           x="-646"
+           y="97"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="101"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18504"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18506"
+           width="9"
+           height="1"
+           x="-669"
+           y="100"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18508"
+           width="9"
+           height="1"
+           x="-646"
+           y="101"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="100"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18510"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18512"
+           width="9"
+           height="1"
+           x="-669"
+           y="104"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="103"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18514"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="104"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18516"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18518"
+           width="9"
+           height="1"
+           x="-646"
+           y="103"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="107"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18520"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18522"
+           width="9"
+           height="1"
+           x="-669"
+           y="106"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18524"
+           width="9"
+           height="1"
+           x="-646"
+           y="107"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="106"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18526"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18528"
+           width="9"
+           height="1"
+           x="-669"
+           y="110"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="109"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18530"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="110"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18532"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18534"
+           width="9"
+           height="1"
+           x="-646"
+           y="109"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="113"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18536"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18538"
+           width="9"
+           height="1"
+           x="-669"
+           y="112"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18540"
+           width="9"
+           height="1"
+           x="-646"
+           y="113"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="112"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18542"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18544"
+           width="9"
+           height="1"
+           x="-669"
+           y="116"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="115"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18546"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="116"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18548"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18550"
+           width="9"
+           height="1"
+           x="-646"
+           y="115"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="119"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18552"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18554"
+           width="9"
+           height="1"
+           x="-669"
+           y="118"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18556"
+           width="9"
+           height="1"
+           x="-646"
+           y="119"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="118"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18558"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18560"
+           width="9"
+           height="1"
+           x="-669"
+           y="122"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="121"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18562"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="122"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18564"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18566"
+           width="9"
+           height="1"
+           x="-646"
+           y="121"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="125"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18568"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18570"
+           width="9"
+           height="1"
+           x="-669"
+           y="124"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18572"
+           width="9"
+           height="1"
+           x="-646"
+           y="125"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="124"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18574"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18576"
+           width="9"
+           height="1"
+           x="-669"
+           y="128"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="127"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18578"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="128"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18580"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18582"
+           width="9"
+           height="1"
+           x="-646"
+           y="127"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="131"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18584"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18586"
+           width="9"
+           height="1"
+           x="-669"
+           y="130"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18588"
+           width="9"
+           height="1"
+           x="-646"
+           y="131"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="130"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18590"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18592"
+           width="9"
+           height="1"
+           x="-669"
+           y="134"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="133"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18594"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="134"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18596"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18598"
+           width="9"
+           height="1"
+           x="-646"
+           y="133"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="137"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18600"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18602"
+           width="9"
+           height="1"
+           x="-669"
+           y="136"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18604"
+           width="9"
+           height="1"
+           x="-646"
+           y="137"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="136"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18606"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18608"
+           width="9"
+           height="1"
+           x="-669"
+           y="140"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="139"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18610"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="140"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18612"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18614"
+           width="9"
+           height="1"
+           x="-646"
+           y="139"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="143"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18616"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18618"
+           width="9"
+           height="1"
+           x="-669"
+           y="142"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18620"
+           width="9"
+           height="1"
+           x="-646"
+           y="143"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="142"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18622"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18624"
+           width="9"
+           height="1"
+           x="-669"
+           y="146"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="145"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18626"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           ry="1"
+           rx="0"
+           y="146"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18628"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="scale(-1,1)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18630"
+           width="9"
+           height="1"
+           x="-646"
+           y="145"
+           rx="0"
+           ry="1" />
+        <rect
+           ry="1"
+           rx="0"
+           y="149"
+           x="-669"
+           height="1"
+           width="9"
+           id="rect18632"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect18634"
+           width="9"
+           height="1"
+           x="-669"
+           y="148"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect18636"
+           width="9"
+           height="1"
+           x="-646"
+           y="149"
+           rx="0"
+           ry="1"
+           transform="scale(-1,1)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="148"
+           x="-646"
+           height="1"
+           width="9"
+           id="rect18638"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="scale(-1,1)" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res/skins/QMLDemo/images/slider_crossfader.svg b/res/skins/QMLDemo/images/slider_crossfader.svg
new file mode 100644
index 00000000000..4f9f28ad4cf
--- /dev/null
+++ b/res/skins/QMLDemo/images/slider_crossfader.svg
@@ -0,0 +1,360 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="11.641666mm"
+   height="58.737503mm"
+   viewBox="0 0 11.641666 58.737502"
+   version="1.1"
+   id="svg7436">
+  <defs
+     id="defs7430">
+    <filter
+       id="filter8857"
+       x="-0.26800001"
+       width="1.536"
+       y="-0.077307694"
+       height="1.1546154">
+      <feGaussianBlur
+         stdDeviation="1.675"
+         id="feGaussianBlur8859" />
+    </filter>
+    <linearGradient
+       id="linearGradient8129">
+      <stop
+         id="stop8131"
+         offset="0"
+         style="stop-color:#282828;stop-opacity:1;" />
+      <stop
+         id="stop8133"
+         offset="1"
+         style="stop-color:#202020;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient8865">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.02745098;"
+         offset="0"
+         id="stop8867" />
+      <stop
+         id="stop8875"
+         offset="0.5"
+         style="stop-color:#ffffff;stop-opacity:0.03529412;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0165232;"
+         offset="1"
+         id="stop8869" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient8803">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.37195122;"
+         offset="0"
+         id="stop8805" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop8807" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata7433">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-70.530361,-135.39107)">
+    <g
+       id="g10551"
+       transform="matrix(0.26458333,0,0,0.26458333,-114.94255,72.949406)"
+       style="display:inline" />
+    <g
+       id="g8951"
+       transform="rotate(-90,76.351193,164.75982)">
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:0.0627451;stroke:none;stroke-width:0.264583"
+         d="m 46.998981,164.89211 c -0.01085,0.0423 -0.01654,0.0865 -0.01654,0.13229 0,0.29316 0.236008,0.52917 0.529166,0.52917 h 57.679173 c 0.29316,0 0.52916,-0.23601 0.52916,-0.52917 0,-0.0458 -0.006,-0.09 -0.0165,-0.13229 -0.0586,0.2286 -0.26528,0.39688 -0.51263,0.39688 H 47.511611 c -0.247351,0 -0.454085,-0.16828 -0.51263,-0.39688 z"
+         id="rect8881" />
+      <rect
+         style="display:inline;fill:#000000;fill-opacity:0.501961;stroke:none;stroke-width:0.264583"
+         id="rect8772"
+         width="58.737499"
+         height="1.0583333"
+         x="46.982445"
+         y="164.23065"
+         rx="0.52916664"
+         ry="0.52916664" />
+      <g
+         id="g10836"
+         transform="matrix(0.26458333,0,0,0.26458333,-104.35922,72.949406)"
+         style="display:inline">
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect10209"
+           width="15"
+           height="1"
+           x="-369"
+           y="-574"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           ry="1"
+           rx="0"
+           y="-575"
+           x="-369"
+           height="1"
+           width="15"
+           id="rect10211"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           ry="1"
+           rx="0"
+           y="-574"
+           x="-340"
+           height="1"
+           width="15"
+           id="rect10213"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10215"
+           width="15"
+           height="1"
+           x="-340"
+           y="-575"
+           rx="0"
+           ry="1" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10832"
+           width="15"
+           height="1"
+           x="-369"
+           y="-573"
+           rx="0"
+           ry="1"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="-573"
+           x="-340"
+           height="1"
+           width="15"
+           id="rect10834"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="matrix(0,-1,-1,0,0,0)" />
+      </g>
+      <g
+         id="g10844"
+         transform="matrix(0.26458333,0,0,0.26458333,-46.415471,72.949406)"
+         style="display:inline">
+        <rect
+           ry="1"
+           rx="0"
+           y="-574"
+           x="-369"
+           height="1"
+           width="15"
+           id="rect10846"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10848"
+           width="15"
+           height="1"
+           x="-369"
+           y="-575"
+           rx="0"
+           ry="1"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect10850"
+           width="15"
+           height="1"
+           x="-340"
+           y="-574"
+           rx="0"
+           ry="1"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="-575"
+           x="-340"
+           height="1"
+           width="15"
+           id="rect10852"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           ry="1"
+           rx="0"
+           y="-573"
+           x="-369"
+           height="1"
+           width="15"
+           id="rect10854"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10856"
+           width="15"
+           height="1"
+           x="-340"
+           y="-573"
+           rx="0"
+           ry="1" />
+      </g>
+      <g
+         id="g10860"
+         transform="matrix(0.26458333,0,0,0.26458333,-85.044637,72.949406)"
+         style="display:inline">
+        <rect
+           ry="1"
+           rx="0"
+           y="-574"
+           x="-369"
+           height="1"
+           width="15"
+           id="rect10862"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10864"
+           width="15"
+           height="1"
+           x="-369"
+           y="-575"
+           rx="0"
+           ry="1"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect10866"
+           width="15"
+           height="1"
+           x="-340"
+           y="-574"
+           rx="0"
+           ry="1"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="-575"
+           x="-340"
+           height="1"
+           width="15"
+           id="rect10868"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           ry="1"
+           rx="0"
+           y="-573"
+           x="-369"
+           height="1"
+           width="15"
+           id="rect10870"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10872"
+           width="15"
+           height="1"
+           x="-340"
+           y="-573"
+           rx="0"
+           ry="1" />
+      </g>
+      <g
+         transform="matrix(0.26458333,0,0,0.26458333,-65.730054,72.949406)"
+         id="g10876"
+         style="display:inline">
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none"
+           id="rect10878"
+           width="15"
+           height="1"
+           x="-369"
+           y="-574"
+           rx="0"
+           ry="1" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           ry="1"
+           rx="0"
+           y="-575"
+           x="-369"
+           height="1"
+           width="15"
+           id="rect10880"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           ry="1"
+           rx="0"
+           y="-574"
+           x="-340"
+           height="1"
+           width="15"
+           id="rect10882"
+           style="fill:#ffffff;fill-opacity:0.12549;stroke:none" />
+        <rect
+           transform="matrix(0,-1,-1,0,0,0)"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10884"
+           width="15"
+           height="1"
+           x="-340"
+           y="-575"
+           rx="0"
+           ry="1" />
+        <rect
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           id="rect10886"
+           width="15"
+           height="1"
+           x="-369"
+           y="-573"
+           rx="0"
+           ry="1"
+           transform="matrix(0,-1,-1,0,0,0)" />
+        <rect
+           ry="1"
+           rx="0"
+           y="-573"
+           x="-340"
+           height="1"
+           width="15"
+           id="rect10888"
+           style="fill:#000000;fill-opacity:0.12549;stroke:none"
+           transform="matrix(0,-1,-1,0,0,0)" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res/skins/QMLDemo/images/slider_handle.svg b/res/skins/QMLDemo/images/slider_handle.svg
new file mode 100644
index 00000000000..58d3f8ae294
--- /dev/null
+++ b/res/skins/QMLDemo/images/slider_handle.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80" height="20" version="1.1" viewBox="0 0 21.167 5.2916" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient9034" x1="87" x2="218" y1="-713" y2="-713" gradientTransform="matrix(0 .26458 -.26458 0 -182.83 -23.019)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0" offset="0"/><stop stop-color="#fff" stop-opacity=".039216" offset=".19608"/><stop stop-color="#fff" stop-opacity=".047059" offset="1"/></linearGradient><filter id="filter8954" x="-.077308" y="-.268" width="1.1546" height="1.536"><feGaussianBlur stdDeviation="1.675"/></filter><linearGradient id="linearGradient25272" x1="754" x2="754" y1="287" y2="343" gradientTransform="translate(-701,-1028)" gradientUnits="userSpaceOnUse"><stop stop-color="#282828" offset="0"/><stop stop-color="#202020" offset="1"/></linearGradient><linearGradient id="linearGradient25274" x1="789" x2="789" y1="321" y2="373" gradientTransform="matrix(1.2857 0 0 1 -927.43 -1060)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".015686" offset="0"/><stop stop-color="#fff" stop-opacity=".035294" offset=".5"/><stop stop-color="#fff" stop-opacity=".016523" offset="1"/></linearGradient><linearGradient id="linearGradient25276" x1="789" x2="786" y1="347" y2="347" gradientTransform="rotate(90,881,179)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".097561" offset="0"/><stop stop-color="#fff" stop-opacity=".079268" offset=".5"/><stop stop-color="#fff" stop-opacity=".036585" offset="1"/></linearGradient><linearGradient id="linearGradient25278" x1="789" x2="786" y1="347" y2="347" gradientTransform="matrix(0,-1,-1,0,1060,885)" gradientUnits="userSpaceOnUse"><stop stop-opacity=".37195" offset="0"/><stop stop-opacity="0" offset="1"/></linearGradient></defs><path d="m5.8208 0c-0.43974 0-0.79375 0.35401-0.79375 0.79375v33.073c0 0.43974 0.35401 0.79375 0.79375 0.79375s0.79375-0.35401 0.79375-0.79375v-33.073c0-0.43974-0.35401-0.79375-0.79375-0.79375zm-0.0331 0.26458h0.0661c0.27379 0 0.4961 0.23601 0.4961 0.52917v33.073c0 0.29316-0.22231 0.52917-0.4961 0.52917h-0.0661c-0.27379 0-0.4961-0.23601-0.4961-0.52917v-33.073c0-0.29316 0.22231-0.52917 0.4961-0.52917z" fill="url(#linearGradient9034)"/><g transform="matrix(.26459 0 0 .26459 -178.09 -22.226)"><rect transform="rotate(90,-2,2)" x="83" y="-739" width="15" height="52" rx="1" ry="1" fill-opacity=".62745" filter="url(#filter8954)"/><g><rect transform="rotate(90)" x="84" y="-739" width="15" height="52" rx="1" ry="1" fill="url(#linearGradient25272)"/><rect transform="rotate(90)" x="87" y="-739" width="9" height="52" fill="url(#linearGradient25274)"/><path d="m739 85c0-0.554-0.446-1-1-1h-50c-0.554 0-1 0.446-1 1v2h52z" fill="url(#linearGradient25276)"/><path d="m739 98c0 0.554-0.446 1-1 1h-50c-0.554 0-1-0.446-1-1v-2h52z" fill="url(#linearGradient25278)"/></g><rect transform="rotate(90)" x="91" y="-739" width="1" height="52" fill="#fff" fill-opacity=".25098"/><rect transform="rotate(90)" x="90" y="-739" width="1" height="52" fill-opacity=".12549"/></g></svg>
diff --git a/res/skins/QMLDemo/images/slider_handle_crossfader.svg b/res/skins/QMLDemo/images/slider_handle_crossfader.svg
new file mode 100644
index 00000000000..4ceec575bd2
--- /dev/null
+++ b/res/skins/QMLDemo/images/slider_handle_crossfader.svg
@@ -0,0 +1,163 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   width="13.758337mm"
+   height="3.96875mm"
+   viewBox="0 0 13.758337 3.96875"
+   version="1.1"
+   id="svg8247">
+  <defs
+     id="defs8241">
+    <linearGradient
+       xlink:href="#linearGradient8129"
+       id="linearGradient10563"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.26458333,0,0,0.26458333,-189.27157,101.86458)"
+       x1="754"
+       y1="287"
+       x2="754"
+       y2="343" />
+    <linearGradient
+       id="linearGradient8129">
+      <stop
+         id="stop8131"
+         offset="0"
+         style="stop-color:#282828;stop-opacity:1;" />
+      <stop
+         id="stop8133"
+         offset="1"
+         style="stop-color:#202020;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient8865"
+       id="linearGradient10565"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.34017854,0,0,0.26458333,-249.1808,93.397918)"
+       x1="789"
+       y1="321"
+       x2="789"
+       y2="373" />
+    <linearGradient
+       id="linearGradient8865">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.02745098;"
+         offset="0"
+         id="stop8867" />
+      <stop
+         id="stop8875"
+         offset="0.5"
+         style="stop-color:#ffffff;stop-opacity:0.03529412;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0165232;"
+         offset="1"
+         id="stop8869" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient8803"
+       id="linearGradient10567"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.26458333,0,0,0.26458333,-189.53615,93.397918)"
+       x1="789"
+       y1="347"
+       x2="786"
+       y2="347" />
+    <linearGradient
+       id="linearGradient8803">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.37195122;"
+         offset="0"
+         id="stop8805" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop8807" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient8803"
+       id="linearGradient10569"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-0.26458333,0,0,0.26458333,230.35759,93.397918)"
+       x1="789"
+       y1="347"
+       x2="786"
+       y2="347" />
+  </defs>
+  <metadata
+     id="metadata8244">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-13.531552,-183.22395)">
+    <g
+       id="g8901"
+       transform="rotate(-90,20.410719,185.20833)">
+      <rect
+         style="display:inline;fill:url(#linearGradient10563);fill-opacity:1;stroke:none;stroke-width:0.264583"
+         id="rect8786"
+         width="3.96875"
+         height="13.758333"
+         x="18.426344"
+         y="178.32916"
+         rx="0.26458332"
+         ry="0.26458332" />
+      <rect
+         style="display:inline;fill:url(#linearGradient10565);fill-opacity:1;stroke:none;stroke-width:0.264583"
+         id="rect8863"
+         width="2.3812499"
+         height="13.758333"
+         x="19.220095"
+         y="178.32916" />
+      <path
+         id="path8790"
+         d="m 19.484677,192.0875 c -0.146579,0 -0.264583,-0.118 -0.264583,-0.26458 v -0.26459 c 0,0.14658 0.118004,0.26459 0.264583,0.26459 h 1.852084 c 0.146579,0 0.264583,-0.11801 0.264583,-0.26459 v 0.26459 c 0,0.14658 -0.118004,0.26458 -0.264583,0.26458 z"
+         style="display:inline;fill:#000000;fill-opacity:0.25098;stroke:none;stroke-width:0.264583" />
+      <path
+         id="rect8796"
+         d="m 18.690927,178.32917 c -0.146579,0 -0.264583,0.118 -0.264583,0.26458 v 13.22917 c 0,0.14658 0.118004,0.26458 0.264583,0.26458 h 0.529167 v -13.75833 z"
+         style="display:inline;fill:url(#linearGradient10567);fill-opacity:1;stroke:none;stroke-width:0.264583" />
+      <path
+         style="display:inline;fill:url(#linearGradient10569);fill-opacity:1;stroke:none;stroke-width:0.264583"
+         d="m 22.130511,178.32917 c 0.146579,0 0.264583,0.118 0.264583,0.26458 v 13.22917 c 0,0.14658 -0.118004,0.26458 -0.264583,0.26458 h -0.529167 v -13.75833 z"
+         id="path8813" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:0.0627451;stroke:none;stroke-width:0.264583"
+         d="m 19.484677,178.32917 c -0.146579,0 -0.264583,0.118 -0.264583,0.26458 v 0.26458 c 0,-0.14658 0.118004,-0.26458 0.264583,-0.26458 h 1.852084 c 0.146579,0 0.264583,0.118 0.264583,0.26458 v -0.26458 c 0,-0.14658 -0.118004,-0.26458 -0.264583,-0.26458 z"
+         id="path8788" />
+      <rect
+         y="178.32916"
+         x="20.278427"
+         height="13.758333"
+         width="0.26458332"
+         id="rect8861"
+         style="display:inline;fill:#ffffff;fill-opacity:0.25098;stroke:none;stroke-width:0.264583" />
+      <rect
+         style="display:inline;fill:#000000;fill-opacity:0.12549;stroke:none;stroke-width:0.264583"
+         id="rect8877"
+         width="0.26458332"
+         height="13.758333"
+         x="20.013844"
+         y="178.32916" />
+      <rect
+         y="178.32916"
+         x="20.543011"
+         height="13.758333"
+         width="0.26458332"
+         id="rect8879"
+         style="display:inline;fill:#000000;fill-opacity:0.12549;stroke:none;stroke-width:0.264583" />
+    </g>
+  </g>
+</svg>
diff --git a/res/skins/QMLDemo/images/slider_volume.svg b/res/skins/QMLDemo/images/slider_volume.svg
new file mode 100644
index 00000000000..e9999d57630
--- /dev/null
+++ b/res/skins/QMLDemo/images/slider_volume.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="44" height="131" version="1.1" viewBox="0 0 11.642 34.66" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient9034" x1="87" x2="218" y1="-713" y2="-713" gradientTransform="matrix(0 .26458 -.26458 0 -182.83 -23.019)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0" offset="0"/><stop stop-color="#fff" stop-opacity=".039216" offset=".19608"/><stop stop-color="#fff" stop-opacity=".047059" offset="1"/></linearGradient></defs><path d="m5.8208 0c-0.43974 0-0.79375 0.35401-0.79375 0.79375v33.073c0 0.43974 0.35401 0.79375 0.79375 0.79375s0.79375-0.35401 0.79375-0.79375v-33.073c0-0.43974-0.35401-0.79375-0.79375-0.79375zm-0.0331 0.26458h0.0661c0.27379 0 0.4961 0.23601 0.4961 0.52917v33.073c0 0.29316-0.22231 0.52917-0.4961 0.52917h-0.0661c-0.27379 0-0.4961-0.23601-0.4961-0.52917v-33.073c0-0.29316 0.22231-0.52917 0.4961-0.52917z" fill="url(#linearGradient9034)"/><rect transform="rotate(90)" x=".26458" y="-6.35" width="34.131" height="1.0583" rx=".52917" ry=".4942" fill-opacity=".50196"/><g transform="matrix(.26458 0 0 .26458 -166.95 -23.019)" fill-opacity=".12549"><rect transform="scale(-1,1)" x="-675" y="89" width="15" height="1" rx="0" ry="1" fill="#fff"/><rect transform="scale(-1,1)" x="-675" y="88" width="15" height="1" rx="0" ry="1"/><rect transform="scale(-1,1)" x="-646" y="89" width="15" height="1" rx="0" ry="1" fill="#fff"/><rect transform="scale(-1,1)" x="-646" y="88" width="15" height="1" rx="0" ry="1"/><g transform="translate(0 2)"><rect transform="scale(-1,1)" x="-675" y="215" width="15" height="1" rx="0" ry="1" fill="#fff"/><rect transform="scale(-1,1)" x="-675" y="214" width="15" height="1" rx="0" ry="1"/><rect transform="scale(-1,1)" x="-646" y="215" width="15" height="1" rx="0" ry="1" fill="#fff"/><rect transform="scale(-1,1)" x="-646" y="214" width="15" height="1" rx="0" ry="1"/></g><g transform="translate(0 1.5)"><rect transform="scale(-1,1)" x="-675" y="152" width="15" height="1" rx="0" ry="1" fill="#fff"/><rect transform="scale(-1,1)" x="-675" y="151" width="15" height="1" rx="0" ry="1"/><rect transform="scale(-1,1)" x="-646" y="152" width="15" height="1" rx="0" ry="1" fill="#fff"/><rect transform="scale(-1,1)" x="-646" y="151" width="15" height="1" rx="0" ry="1"/></g></g></svg>
diff --git a/res/skins/QMLDemo/main.qml b/res/skins/QMLDemo/main.qml
index 275d50af2bd..1369972ccda 100644
--- a/res/skins/QMLDemo/main.qml
+++ b/res/skins/QMLDemo/main.qml
@@ -1,13 +1,17 @@
+import "." as Skin
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.11
+import "Theme"
 
 Rectangle {
     id: root
 
+    property alias show4decks: show4DecksButton.checked
+
     width: 1920
     height: 1080
-    color: "#1e1e20"
+    color: Theme.backgroundColor
     visible: true
 
     Column {
@@ -19,165 +23,59 @@ Rectangle {
 
             width: parent.width
             height: 36
-            color: "#151517"
-            border.color: "#020202"
-            border.width: 1
+            color: Theme.toolbarBackgroundColor
             radius: 1
 
             Row {
                 padding: 5
                 spacing: 5
 
-                Button {
-                    id: decksCDToggle
-
-                    width: 100
-                    height: 26
-                    text: "4 DECKS"
-                    font.family: "Open Sans"
-                    font.bold: true
-                    font.pixelSize: 11
-                    onClicked: decksCD.stateHidden = !decksCD.stateHidden
-                    states: [
-                        State {
-                            when: decksCD.stateHidden
-
-                            PropertyChanges {
-                                target: decksCDToggle
-                                background.color: "#151517"
-                                contentItem.color: "#777777"
-                            }
-
-                            PropertyChanges {
-                                target: decksCDToggleBgImage
-                                source: "../LateNight/palemoon/buttons/btn___active.svg"
-                            }
-
-                        },
-                        State {
-                            when: !decksCD.stateHidden
-
-                            PropertyChanges {
-                                target: decksCDToggle
-                                background.color: "#777777"
-                                contentItem.color: "#000000"
-                            }
-
-                            PropertyChanges {
-                                target: decksCDToggleBgImage
-                                source: "../LateNight/palemoon/buttons/btn__.svg"
-                            }
-
-                        }
-                    ]
-
-                    contentItem: Text {
-                        text: decksCDToggle.text
-                        font: decksCDToggle.font
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-                    }
-
-                    background: Rectangle {
-                        anchors.fill: parent
-                        border.width: 2
-
-                        Image {
-                            id: decksCDToggleBgImage
-
-                            anchors.fill: parent
-                        }
-
-                    }
+                Skin.Button {
+                    id: show4DecksButton
 
+                    text: "4 Decks"
+                    activeColor: Theme.white
+                    checkable: true
                 }
 
             }
 
         }
 
-        DeckRow {
-            id: decksAB
+        Skin.DeckRow {
+            id: decks12
 
-            width: root.width
-            height: 180
-            leftDeck: "[Channel1]"
-            rightDeck: "[Channel2]"
+            leftDeckGroup: "[Channel1]"
+            rightDeckGroup: "[Channel2]"
+            width: parent.width - 10
+            x: 5
         }
 
-        DeckRow {
-            id: decksCD
+        Skin.CrossfaderRow {
+            id: crossfader
 
-            property bool stateHidden: true
+            crossfaderWidth: decks12.mixer.width
+            width: parent.width - 10
+            x: 5
+        }
 
-            function toggle() {
-                stateHidden = !stateHidden;
-            }
+        Skin.DeckRow {
+            id: decks34
 
-            width: root.width
-            height: 180
-            leftDeck: "[Channel3]"
-            rightDeck: "[Channel4]"
-            states: [
-                State {
-                    when: !decksCD.stateHidden
-
-                    PropertyChanges {
-                        target: decksCD
-                        opacity: 1
-                        visible: true
-                    }
-
-                },
-                State {
-                    when: decksCD.stateHidden
-
-                    PropertyChanges {
-                        target: decksCD
-                        opacity: 0
-                        visible: false
-                    }
+            leftDeckGroup: "[Channel3]"
+            rightDeckGroup: "[Channel4]"
+            width: parent.width - 10
+            x: 5
 
-                }
-            ]
-            transitions: [
-                Transition {
-                    enabled: !decksCD.stateHidden
-
-                    SequentialAnimation {
-                        NumberAnimation {
-                            target: decksCD
-                            property: "opacity"
-                            duration: 150
-                        }
-
-                        PropertyAction {
-                            target: decksCD
-                            property: "visible"
-                        }
-
-                    }
-
-                },
-                Transition {
-                    enabled: decksCD.stateHidden
-
-                    SequentialAnimation {
-                        PropertyAction {
-                            target: decksCD
-                            property: "visible"
-                        }
-
-                        NumberAnimation {
-                            target: decksCD
-                            property: "opacity"
-                            duration: 150
-                        }
-
-                    }
+            states: Skin.HiddenState {
+                when: !root.show4decks
+                target: decks34
+            }
+
+            transitions: Skin.HiddenTransition {
+                target: decks34
+            }
 
-                }
-            ]
         }
 
         Library {
diff --git a/src/skin/qml/qmlcontrolproxy.h b/src/skin/qml/qmlcontrolproxy.h
index 8ecedee1f62..1e62590b0ee 100644
--- a/src/skin/qml/qmlcontrolproxy.h
+++ b/src/skin/qml/qmlcontrolproxy.h
@@ -14,14 +14,11 @@ namespace qml {
 class QmlControlProxy : public QObject, public QQmlParserStatus {
     Q_OBJECT
     Q_INTERFACES(QQmlParserStatus)
-    // The REQUIRED flag only exists in Qt 5.14 and later.
-#if QT_VERSION >= QT_VERSION_CHECK(5, 14, 0)
-    Q_PROPERTY(QString group READ getGroup WRITE setGroup NOTIFY groupChanged REQUIRED)
-    Q_PROPERTY(QString key READ getKey WRITE setKey NOTIFY keyChanged REQUIRED)
-#else
+    // TODO: The REQUIRED flag only exists in Qt 5.14 and later. Once we
+    // require that as minimum dependency, add it to the group and key
+    // properties.
     Q_PROPERTY(QString group READ getGroup WRITE setGroup NOTIFY groupChanged)
     Q_PROPERTY(QString key READ getKey WRITE setKey NOTIFY keyChanged)
-#endif
     Q_PROPERTY(QString keyValid READ isKeyValid NOTIFY keyValidChanged)
     Q_PROPERTY(QString initialized READ isInitialized NOTIFY initializedChanged)
     Q_PROPERTY(double value READ getValue WRITE setValue NOTIFY valueChanged)