modules/gui/qt/Makefile.am

@@ -754,6 +754,8 @@ libqt_plugin_la_QML = \
 	gui/qt/util/qml/Helpers.js \
 	gui/qt/util/qml/KeyHelper.js \
 	gui/qt/util/qml/SelectableDelegateModel.qml \
+	gui/qt/widgets/qml/ActionButtonOverlay.qml \
+	gui/qt/widgets/qml/ActionButtonPrimary.qml \
 	gui/qt/widgets/qml/BannerTabButton.qml \
 	gui/qt/widgets/qml/BusyIndicatorExt.qml \
 	gui/qt/widgets/qml/CaptionLabel.qml \
@@ -777,6 +779,7 @@ libqt_plugin_la_QML = \
 	gui/qt/widgets/qml/IconButton.qml \
 	gui/qt/widgets/qml/IconControlButton.qml \
 	gui/qt/widgets/qml/IconToolButton.qml \
+	gui/qt/widgets/qml/IconTrackButton.qml \
 	gui/qt/widgets/qml/ImageToolButton.qml \
 	gui/qt/widgets/qml/KeyNavigableGridView.qml \
 	gui/qt/widgets/qml/KeyNavigableListView.qml \

modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml

@@ -122,20 +122,18 @@ FocusScope {
                 Layout.topMargin: VLCStyle.margin_large
 
                 model: ObjectModel {
-                    Widgets.TabButtonExt {
+                    Widgets.ActionButtonPrimary {
                         id: playActionBtn
                         iconTxt: VLCIcons.play
                         text: i18n.qtr("Play all")
-                        color: "white"
                         focus: true
                         onClicked: medialib.addAndPlay( artist.id )
                     }
 
-                    Widgets.TabButtonExt {
+                    Widgets.ActionButtonOverlay {
                         id: enqueueActionBtn
                         iconTxt: VLCIcons.enqueue
                         text: i18n.qtr("Enqueue all")
-                        color: "white"
                         onClicked: medialib.addToPlaylist( artist.id )
                     }
                 }

modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml

@@ -130,7 +130,7 @@ FocusScope {
                     Layout.alignment: Qt.AlignCenter
 
                     model: ObjectModel {
-                        Widgets.TabButtonExt {
+                        Widgets.ActionButtonPrimary {
                             id: playActionBtn
 
                             iconTxt: VLCIcons.play_outline

modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml

@@ -118,7 +118,7 @@ FocusScope {
                         spacing: VLCStyle.margin_large
 
                         model: ObjectModel {
-                            Widgets.TabButtonExt {
+                            Widgets.ActionButtonPrimary {
                                 id: playActionBtn
 
                                 iconTxt: VLCIcons.play_outline

modules/gui/qt/player/qml/ButtonsLayout.qml

@@ -90,20 +90,8 @@ FocusScope {
                         buttonloader.item.size = Qt.binding(function() { return defaultSize; })
 
                     // force colors:
-                    if (!!colors) {
-                        if (!!buttonloader.item.colors)
-                            buttonloader.item.colors = Qt.binding(function() { return colors; })
-                        else
-                            // legacy color forcing for IconToolButton etc. :
-                            if (!!buttonloader.item.color)
-                                buttonloader.item.color = Qt.binding(function() { return colors.playerFg; })
-                            if (!!buttonloader.item.bgColor)
-                                buttonloader.item.bgColor = Qt.binding(function() {
-                                    return VLCStyle.colors.setColorAlpha(colors.playerBg, 0.8); })
-                            if (!!buttonloader.item.borderColor)
-                                buttonloader.item.borderColor = Qt.binding(function() { return colors.playerBorder; })
-                            if (!!buttonloader.item.colorFocus)
-                                buttonloader.item.colorFocus = Qt.binding(function() { return colors.bgFocus; })
+                    if (!!colors && !!buttonloader.item.colors) {
+                        buttonloader.item.colors = Qt.binding(function() { return colors; })
                     }
 
                     buttonloader.item.Navigation.parentItem = buttonsLayout

modules/gui/qt/player/qml/ControlButtons.qml

@@ -155,11 +155,13 @@ Item{
             width: VLCStyle.icon_medium
             height: width
 
-            property bool isOpaque: history.current.view === "player"
+            scale: (playBtnMouseArea.pressed) ? 0.95 : 1.0
 
             property VLCColors colors: VLCStyle.colors
-            property color color: isOpaque ? colors.buttonText : "#303030"
-            property color colorDisabled: isOpaque ? colors.textInactive : "#7f8c8d"
+
+            property color color: colors.buttonPlayIcon
+
+            property color colorDisabled: colors.textInactive
 
             property bool paintOnly: false
 
@@ -181,11 +183,6 @@ Item{
                     name: "hovered"
                     when: interactionIndicator
 
-                    PropertyChanges {
-                        target: contentLabel
-                        color: "#FF610A"
-                    }
-
                     PropertyChanges {
                         target: hoverShadow
                         radius: VLCStyle.dp(24, VLCStyle.scale)
@@ -223,30 +220,6 @@ Item{
                     }
                 }
 
-                Behavior on text {
-                    SequentialAnimation {
-                        NumberAnimation {
-                            target: contentLabel
-                            property: "font.pixelSize"
-                            to: 0
-                            easing.type: Easing.OutSine
-                            duration: 75
-                        }
-
-                        // this blank PropertyAction triggers the
-                        // text (icon) change amidst the size animation
-                        PropertyAction { }
-
-                        NumberAnimation {
-                            target: contentLabel
-                            property: "font.pixelSize"
-                            to: VLCIcons.pixelSize(VLCStyle.icon_normal)
-                            easing.type: Easing.InSine
-                            duration: 75
-                        }
-                    }
-                }
-
                 font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_normal)
                 font.family: VLCIcons.fontFamily
 
@@ -257,8 +230,8 @@ Item{
             background: Item {
                 Gradient {
                     id: playBtnGradient
-                    GradientStop { position: 0.0; color: "#f89a06" }
-                    GradientStop { position: 1.0; color: "#e25b01" }
+                    GradientStop { position: 0.0; color: VLCStyle.colors.buttonPlayA }
+                    GradientStop { position: 1.0; color: VLCStyle.colors.buttonPlayB }
                 }
 
                 MouseArea {
@@ -332,7 +305,6 @@ Item{
                     anchors.margins: VLCStyle.dp(1, VLCStyle.scale)
 
                     color: VLCStyle.colors.white
-                    opacity: playBtn.isOpaque ? 0.4 : 1.0
                 }
 
                 Rectangle {

modules/gui/qt/player/qml/LanguageMenu.qml

@@ -147,17 +147,15 @@ T.Popup {
                         "component": undefined
                     }]
 
-                delegate: Widgets.IconToolButton {
-                    id: btn
-
+                delegate: Widgets.IconTrackButton {
                     iconText: modelData.icon
-                    color: "white"
+
                     size: VLCStyle.dp(40, VLCStyle.scale)
                     x: (btnsCol.width - width) / 2
                     highlighted: index === 3
                                  && player.subtitleTracks.multiSelect
 
-                    ToolTip.visible: btn.hovered || btn.activeFocus
+                    ToolTip.visible: (hovered || activeFocus)
                     ToolTip.text: modelData.tooltip
                     ToolTip.delay: 1000
                     ToolTip.toolTip.z: 2
@@ -217,7 +215,7 @@ T.Popup {
 
                            x: 0
                            y: 0
-                           width: VLCStyle.dp(2, VLCStyle.scale)
+                           width: VLCStyle.margin_xxxsmall
 
                            height: tracksListContainer.height
                            color: "white"
@@ -246,12 +244,11 @@ T.Popup {
                                    - parent.leftPadding - parent.rightPadding
                         }
 
-                        Widgets.IconToolButton {
+                        Widgets.IconTrackButton {
                             id: addBtn
 
                             iconText: VLCIcons.add
                             size: VLCStyle.icon_normal
-                            color: "white"
                             focus: true
                             onClicked: {
                                 switch (index) {
@@ -293,7 +290,7 @@ T.Popup {
 
                             focus: true
                             text: model.display
-                            width: tracksListContainer.width
+                            width: tracksListContainer.width - VLCStyle.margin_xxxsmall
                             height: VLCStyle.dp(40, VLCStyle.scale)
                             opacity: hovered || activeFocus || checked ? 1 : .6
                             font.weight: hovered
@@ -332,13 +329,12 @@ T.Popup {
                 Layout.topMargin: VLCStyle.margin_large
                 Layout.fillHeight: true
 
-                Widgets.IconToolButton {
+                Widgets.IconTrackButton {
                     id: backBtn
 
                     anchors.horizontalCenter: parent.horizontalCenter
                     size: VLCStyle.dp(36, VLCStyle.scale)
                     iconText: VLCIcons.back
-                    color: "white"
 
                     onClicked: {
                         control._updateWidth(true)
@@ -349,7 +345,7 @@ T.Popup {
             }
 
             Rectangle {
-                Layout.preferredWidth: VLCStyle.dp(2, VLCStyle.scale)
+                Layout.preferredWidth: VLCStyle.margin_xxxsmall
                 Layout.fillHeight: true
                 color: "white"
                 opacity: .1
@@ -426,11 +422,10 @@ T.Popup {
                         Navigation.rightItem: audioDelaySpinReset
                     }
 
-                    Widgets.TabButtonExt {
+                    Widgets.ActionButtonOverlay {
                         id: audioDelaySpinReset
 
                         text: i18n.qtr("Reset")
-                        color: "white"
 
                         onClicked: audioDelaySpin.value = 0
                         Navigation.leftItem: audioDelaySpin
@@ -492,11 +487,10 @@ T.Popup {
                         Navigation.rightItem: primarySubSpinReset
                     }
 
-                    Widgets.TabButtonExt {
+                    Widgets.ActionButtonOverlay {
                         id: primarySubSpinReset
 
                         text: i18n.qtr("Reset")
-                        color: "white"
                         focus: true
                         onClicked: primarySubSpin.value = 0
                         Navigation.leftItem: primarySubSpin
@@ -552,11 +546,10 @@ T.Popup {
                         Navigation.rightItem: secondarySubSpinReset
                     }
 
-                    Widgets.TabButtonExt {
+                    Widgets.ActionButtonOverlay {
                         id: secondarySubSpinReset
 
                         text: i18n.qtr("Reset")
-                        color: "white"
                         onClicked: secondarySubSpin.value = 0
                         Navigation.leftItem: secondarySubSpin
                         Navigation.upItem: primarySubSpinReset
@@ -583,13 +576,12 @@ T.Popup {
                 Layout.topMargin: VLCStyle.margin_large
                 Layout.fillHeight: true
 
-                Widgets.IconToolButton {
+                Widgets.IconTrackButton {
                     id: backBtn
 
                     anchors.horizontalCenter: parent.horizontalCenter
                     size: VLCStyle.dp(36, VLCStyle.scale)
                     iconText: VLCIcons.back
-                    color: "white"
 
                     onClicked: {
                         control._updateWidth(true)
@@ -600,7 +592,7 @@ T.Popup {
             }
 
             Rectangle {
-                Layout.preferredWidth: VLCStyle.dp(2, VLCStyle.scale)
+                Layout.preferredWidth: VLCStyle.margin_xxxsmall
                 Layout.fillHeight: true
                 color: "white"
                 opacity: .1
@@ -678,11 +670,10 @@ T.Popup {
                         Navigation.rightItem: subSpeedSpinReset
                     }
 
-                    Widgets.TabButtonExt {
+                    Widgets.ActionButtonOverlay {
                         id: subSpeedSpinReset
 
                         text: i18n.qtr("Reset")
-                        color: "white"
                         onClicked: subSpeedSpin.value = 10
 
 

modules/gui/qt/player/qml/Player.qml

@@ -466,6 +466,7 @@ FocusScope {
                         onClicked: player.jumpBwd()
                         text: i18n.qtr("Step back")
                         color: rootPlayer.colors.playerFg
+                        colorHover: rootPlayer.colors.buttonTextHover
                         colorFocus: rootPlayer.colors.bgFocus
                     }
 
@@ -475,6 +476,7 @@ FocusScope {
                         onClicked: player.toggleVisualization()
                         text: i18n.qtr("Visualization")
                         color: rootPlayer.colors.playerFg
+                        colorHover: rootPlayer.colors.buttonTextHover
                         colorFocus: rootPlayer.colors.bgFocus
                     }
 
@@ -484,6 +486,7 @@ FocusScope {
                         onClicked: player.jumpFwd()
                         text: i18n.qtr("Step forward")
                         color: rootPlayer.colors.playerFg
+                        colorHover: rootPlayer.colors.buttonTextHover
                         colorFocus: rootPlayer.colors.bgFocus
                     }
                 }

modules/gui/qt/player/qml/VolumeWidget.qml

@@ -68,6 +68,7 @@ FocusScope{
                     VLCIcons.volume_high
             text: i18n.qtr("Mute")
             color: widgetfscope.color
+            colorHover: colors.buttonTextHover
             colorFocus: colors.bgFocus
             onClicked: player.muted = !player.muted
 

modules/gui/qt/playlist/qml/PlaylistDelegate.qml

@@ -38,26 +38,20 @@ Rectangle {
 
     property alias hovered: mouseArea.containsMouse
 
-    border.width: VLCStyle.dp(1)
-    border.color: {
-        if (activeFocus && (listView.mode === PlaylistListView.Mode.Select))
-            colors.caption
-        else
-            "transparent"
-    }
+    height: artworkItem.height * 1.5
 
     color: {
-        if ((selected && activeFocus && listView.mode !== PlaylistListView.Mode.Select) || (hovered && selected))
-            colors.plItemFocused
+        if (selected)
+            return colors.gridSelect;
         else if (hovered)
-            colors.plItemHovered
-        else if (selected)
-            colors.plItemSelected
+            return colors.listHover;
         else
-            "transparent"
+            return "transparent";
     }
 
-    height: artworkItem.height * 1.5
+    border.width: (activeFocus) ? VLCStyle.focus_border : 0
+
+    border.color: VLCStyle.colors.bgFocus
 
     onHoveredChanged: {
         if(hovered)

modules/gui/qt/style/VLCColors.qml

@@ -67,34 +67,56 @@ Item {
 
     property color bgFocus: (isThemeDark) ? white : black
 
-    //---------------------------------------------------------------------------------------------
     // Button
 
     property color button: systemPalette.button
 
     property color buttonHover: (isThemeDark) ? "#303030" : "#f2f2f2"
 
-    property color buttonText     : systemPalette.buttonText
+    property color buttonText: systemPalette.buttonText
     property color buttonTextHover: bgFocus
 
     property color buttonBorder: blendColors(systemPalette.button, systemPalette.buttonText, 0.8)
 
-    //---------------------------------------------------------------------------------------------
-    // DropDown
+    // ButtonBanner (BannerTabButton)
 
-    property color dropDown: (isThemeDark) ? "#272727" : "#e9e9e9"
+    property color buttonBannerDark: "#a6a6a6"
 
-    // FIXME: We might want another color for this.
-    property color dropDownBorder: text
+    property color buttonBanner: (isThemeDark) ? buttonBannerDark : "#666666"
+
+    // ButtonPrimary (ActionButtonPrimary)
+
+    property color buttonPrimaryHover: (isThemeDark) ? "#e67A00" : "#e65609"
+
+    // ButtonPlayer (IconControlButton)
+
+    property color buttonPlayer: (isThemeDark) ? "#e5e5e5" : "#484848"
+
+    // ButtonPlay (ControlButtons)
+
+    property color buttonPlayA: "#f89a06"
+    property color buttonPlayB: "#e25b01"
+
+    property color buttonPlayIcon: "#333333"
+
+    // GridItem
+
+    property color gridSelect: (isThemeDark) ? "#303030" : "#e5e5e5"
+
+    // ListItem
+
+    property color listHover: (isThemeDark) ? "#272727" : "#e9e9e9"
+
+    // TrackItem (CheckedDelegate)
+
+    property color trackItem: "#303030"
+    property color trackItemHover: "#2a2a2a"
 
-    //---------------------------------------------------------------------------------------------
     // TextField
 
-    property color textField     : (isThemeDark) ? "#6f6f6f" : "#999999"
+    property color textField: (isThemeDark) ? "#6f6f6f" : "#999999"
     property color textFieldHover: (isThemeDark) ? "#b7b7b7" : "#4c4c4c"
 
-    //---------------------------------------------------------------------------------------------
-
     property color icon: isThemeDark ? white : "#616161"
 
     property color textActiveSource: "red";
@@ -136,7 +158,7 @@ Item {
     property color tooltipColor: systemPalette.tooltip
 
     //vlc orange
-    property color accent: (isThemeDark) ? "ff8800" : "#ff610a"
+    property color accent: (isThemeDark) ? "#ff8800" : "#ff610a"
 
     property color accentText: "#ffffff";
 

modules/gui/qt/vlc.qrc

@@ -190,6 +190,8 @@
         <file alias="MiniPlayerBottomMargin.qml">maininterface/qml/MiniPlayerBottomMargin.qml</file>
     </qresource>
     <qresource prefix="/widgets">
+        <file alias="ActionButtonOverlay.qml">widgets/qml/ActionButtonOverlay.qml</file>
+        <file alias="ActionButtonPrimary.qml">widgets/qml/ActionButtonPrimary.qml</file>
         <file alias="BannerTabButton.qml">widgets/qml/BannerTabButton.qml</file>
         <file alias="BusyIndicatorExt.qml">widgets/qml/BusyIndicatorExt.qml</file>
         <file alias="AnimatedBackground.qml">widgets/qml/AnimatedBackground.qml</file>
@@ -211,6 +213,7 @@
         <file alias="ImageToolButton.qml">widgets/qml/ImageToolButton.qml</file>
         <file alias="TextToolButton.qml">widgets/qml/TextToolButton.qml</file>
         <file alias="IconToolButton.qml">widgets/qml/IconToolButton.qml</file>
+        <file alias="IconTrackButton.qml">widgets/qml/IconTrackButton.qml</file>
         <file alias="StackViewExt.qml">widgets/qml/StackViewExt.qml</file>
         <file alias="ComboBoxExt.qml">widgets/qml/ComboBoxExt.qml</file>
         <file alias="SpinBoxExt.qml">widgets/qml/SpinBoxExt.qml</file>

modules/gui/qt/widgets/qml/ActionButtonOverlay.qml

+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee@omega.gg>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+
+import "qrc:///style/"
+
+TabButtonExt {
+    // Style
+    foregroundColor: (hovered) ? VLCStyle.colors.white
+                               : VLCStyle.colors.buttonBannerDark
+
+    colorFocus: VLCStyle.colors.white
+}

modules/gui/qt/widgets/qml/ActionButtonPrimary.qml

+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee@omega.gg>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+
+import "qrc:///style/"
+
+TabButtonExt {
+    // Style
+
+    backgroundColor: (hovered) ? VLCStyle.colors.buttonPrimaryHover
+                               : VLCStyle.colors.accent
+
+    foregroundColor: "white"
+
+    colorFocus: VLCStyle.colors.white
+}

modules/gui/qt/widgets/qml/BannerTabButton.qml

@@ -29,32 +29,65 @@ import "qrc:///style/"
 T.TabButton {
     id: control
 
-    property color color: VLCStyle.colors.banner
+    // Properties
+
+    property bool selected: false
+
+    property string iconTxt: ""
+
     property bool showText: true
     property bool showCurrentIndicator: true
 
-    text: model.displayText
-    padding: 0
-    width: control.showText ? VLCStyle.bannerTabButton_width_large : VLCStyle.banner_icon_size
+    property color color: VLCStyle.colors.banner
+
+    // Settings
+
+    width: control.showText ? VLCStyle.bannerTabButton_width_large
+                            : VLCStyle.banner_icon_size
+
     height: implicitHeight
+
     implicitWidth: contentItem.implicitWidth
     implicitHeight: contentItem.implicitHeight
 
-    property string iconTxt: ""
-    property bool selected: false
+    padding: 0
+
+    text: model.displayText
+
+    // Keys
 
     Keys.priority: Keys.AfterItem
+
     Keys.onPressed: Navigation.defaultKeyAction(event)
 
+    // Private functions
+
+    function _getBackground() {
+        if (activeFocus || hovered)
+            return VLCStyle.colors.buttonHover;
+        else
+            return color;
+    }
+
+    function _getForeground() {
+        if (activeFocus || hovered || selected)
+            return VLCStyle.colors.buttonTextHover;
+        else
+            return VLCStyle.colors.buttonBanner;
+    }
+
+    // Childs
+
     background: Widgets.AnimatedBackground {
         height: control.height
         width: control.width
+
         active: control.activeFocus
+
         animationDuration: 140
-        foregroundColor: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonTextHover
-                                                                  : ((control.selected) ? VLCStyle.colors.text : VLCStyle.colors.menuCaption)
-        backgroundColor: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonHover
-                                                                  : control.color
+
+        backgroundColor: _getBackground()
+        foregroundColor: _getForeground()
     }
 
     contentItem: Item {
@@ -65,33 +98,44 @@ T.TabButton {
             id: tabRow
 
             anchors.centerIn: parent
+
             spacing: VLCStyle.margin_xsmall
 
             Widgets.IconLabel {
-                id: icon
-
                 text: control.iconTxt
+
+                color: (control.activeFocus ||
+                        control.hovered     ||
+                        control.selected) ? VLCStyle.colors.accent
+                                          : VLCStyle.colors.text
+
                 font.pixelSize: VLCIcons.pixelSize(VLCStyle.banner_icon_size)
-                color: (control.activeFocus || control.hovered || control.selected) ? VLCStyle.colors.accent
-                                                                                    : VLCStyle.colors.text
             }
 
             Label {
-                id: txt
-
                 visible: showText
-                font.pixelSize: VLCStyle.fontSize_normal
-                font.weight: (control.activeFocus || control.hovered || control.selected) ? Font.DemiBold : Font.Normal
+
                 text: control.text
+
                 color: control.background.foregroundColor
+
+                font.pixelSize: VLCStyle.fontSize_normal
+
+                font.weight: (control.activeFocus ||
+                              control.hovered     ||
+                              control.selected) ? Font.DemiBold
+                                                : Font.Normal
             }
         }
 
         Widgets.CurrentIndicator {
             width: tabRow.width
+
             orientation: Qt.Horizontal
+
             margin: VLCStyle.dp(3, VLCStyle.scale)
-            visible: control.showCurrentIndicator && control.selected
+
+            visible: (control.showCurrentIndicator && control.selected)
         }
     }
 }

modules/gui/qt/widgets/qml/CheckedDelegate.qml

@@ -26,38 +26,68 @@ import "qrc:///util/KeyHelper.js" as KeyHelper
 T.ItemDelegate {
     id: control
 
-    checkable: true
-    font.pixelSize: VLCStyle.fontSize_large
+    // Settings
+
     leftPadding: VLCStyle.margin_xlarge
     rightPadding: VLCStyle.margin_xsmall
 
-    background: Rectangle {
-        color: control.hovered || control.activeFocus ? "#2A2A2A" : "transparent"
+    checkable: true
+
+    font.pixelSize: VLCStyle.fontSize_large
+
+    // Childs
+
+    background: AnimatedBackground {
+        active: control.activeFocus
+
+        backgroundColor: {
+            if (control.hovered) {
+                if (control.checked)
+                    return VLCStyle.colors.trackItemHover;
+                else
+                    return VLCStyle.colors.trackItem;
+            } else if (control.checked)
+                return VLCStyle.colors.trackItem;
+            else
+                return "transparent"
+        }
+
+        activeBorderColor: VLCStyle.colors.white
     }
 
     contentItem: Item { // don't use a row, it will move text when control is unchecked
         IconLabel {
             id: checkIcon
 
-            text: VLCIcons.check
-            visible: control.checked
             height: parent.height
-            font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_checkedDelegate)
-            color: "white"
+
             verticalAlignment: Text.AlignVCenter
+
+            visible: control.checked
+
+            text: VLCIcons.check
+
+            color: "white"
+
+            font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_checkedDelegate)
         }
 
         MenuLabel {
             id: text
 
             anchors.left: checkIcon.right
+
             height: parent.height
-            font: control.font
+            width: parent.width - checkIcon.width
+
+            leftPadding: VLCStyle.margin_normal
+
+            verticalAlignment: Text.AlignVCenter
+
             text: control.text
+            font: control.font
+
             color: "white"
-            verticalAlignment: Text.AlignVCenter
-            leftPadding: VLCStyle.margin_normal
-            width: parent.width - checkIcon.width
         }
     }
 }

modules/gui/qt/widgets/qml/GridItem.qml

@@ -191,8 +191,8 @@ MouseArea {
         active: root.activeFocus
 
         backgroundColor: root.selected
-                         ? VLCStyle.colors.bgHover
-                         : VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHover, 0)
+                         ? VLCStyle.colors.gridSelect
+                         : VLCStyle.colors.setColorAlpha(VLCStyle.colors.gridSelect, 0)
 
         visible: backgroundAnimationRunning || borderColorAnimationRunning || background.active || root.selected
     }

modules/gui/qt/widgets/qml/IconControlButton.qml

@@ -15,22 +15,22 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  *****************************************************************************/
+
 import QtQuick 2.11
-import QtQuick.Controls 2.4
 
 import "qrc:///style/"
 
 IconToolButton {
-    id: control
+    // Properties
 
     property VLCColors colors: VLCStyle.colors
 
-    backgroundColor: "transparent"
-    backgroundColorHover: "transparent"
+    // Style
 
-    color: colors.playerControlBarFg
-    colorHover: colors.playerControlBarFg
+    color: colors.buttonPlayer
+    colorHover: colors.buttonTextHover
     colorHighlighted: colors.accent
-    colorDisabled: colors.blendColors(control.colors.playerBg, control.colors.playerControlBarFg, .75)
+    colorDisabled: colors.blendColors(colors.playerBg, colors.playerControlBarFg, 0.75)
+
     colorFocus: colors.bgFocus
 }

modules/gui/qt/widgets/qml/IconToolButton.qml

@@ -15,8 +15,10 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  *****************************************************************************/
+
 import QtQuick 2.11
 import QtQuick.Controls 2.4
+
 import org.videolan.vlc 0.1
 
 import "qrc:///style/"
@@ -24,15 +26,20 @@ import "qrc:///style/"
 ToolButton {
     id: control
 
+    // Properties
+
     property bool paintOnly: false
 
     property int size: VLCStyle.icon_normal
 
     property string iconText: ""
 
+    // Style
+
     // background colors
+    // NOTE: We want the background to be transparent for IconToolButton(s).
     property color backgroundColor: "transparent"
-    property color backgroundColorHover: VLCStyle.colors.buttonHover
+    property color backgroundColorHover: "transparent"
 
     // foreground colors based on state
     property color color: VLCStyle.colors.icon
@@ -40,79 +47,92 @@ ToolButton {
     property color colorHighlighted: VLCStyle.colors.accent
     property color colorDisabled: VLCStyle.colors.textInactive
 
+    // Aliases
+
     // active border color
-    property color colorFocus: VLCStyle.colors.bgFocus
+    property alias colorFocus: background.activeBorderColor
 
-    enabled: !paintOnly
+    // Settings
 
     padding: 0
 
-    ToolTip.text: control.text
+    enabled: !paintOnly
+
+    ToolTip.text: text
     ToolTip.delay: 500
 
-    contentItem: Label {
-        id: text
+    // Keys
 
-        text: control.iconText
-        color: background.foregroundColor
+    Keys.priority: Keys.AfterItem
 
-        anchors.centerIn: parent
+    Keys.onPressed: Navigation.defaultKeyAction(event)
 
-        font.pixelSize: VLCIcons.pixelSize(control.size)
-        font.family: VLCIcons.fontFamily
-        font.underline: control.font.underline
+    // Childs
+
+    background: AnimatedBackground {
+        id: background
+
+        implicitWidth: size
+        implicitHeight: size
+
+        active: control.activeFocus
+
+        backgroundColor: {
+            if (control.hovered)
+                return control.backgroundColorHover;
+            // if base color is transparent, animation starts with black color
+            else if (control.backgroundColor.a === 0)
+                return VLCStyle.colors.setColorAlpha(control.backgroundColorHover, 0);
+            else
+                return control.backgroundColor;
+        }
+
+        foregroundColor: {
+            if (control.highlighted)
+                return control.colorHighlighted;
+            else if (control.hovered)
+                return control.colorHover;
+            else if (!control.enabled)
+                return control.colorDisabled;
+            else
+                return control.color;
+        }
+
+        activeBorderColor: VLCStyle.colors.bgFocus
+    }
+
+    contentItem: Label {
+        anchors.centerIn: parent
 
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
 
+        text: iconText
+
+        color: background.foregroundColor
+
+        font.pixelSize: VLCIcons.pixelSize(size)
+        font.family: VLCIcons.fontFamily
+        font.underline: control.font.underline
+
         Accessible.ignored: true
 
         Label {
-            text: VLCIcons.active_indicator
-            color: background.foregroundColor
-            visible: !control.paintOnly && control.checked
-
             anchors.centerIn: parent
 
-            font.pixelSize: VLCIcons.pixelSize(control.size)
-            font.family: VLCIcons.fontFamily
-
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
 
-            Accessible.ignored: true
-        }
-    }
+            visible: !paintOnly && control.checked
 
-    background: AnimatedBackground {
-        id: background
+            text: VLCIcons.active_indicator
 
-        active: control.activeFocus
+            color: background.foregroundColor
 
-        backgroundColor: {
-            if (control.hovered)
-                return control.backgroundColorHover
-            if (control.backgroundColor.a === 0) // if base color is transparent, animation starts with black color
-                return VLCStyle.colors.setColorAlpha(control.backgroundColorHover, 0)
-            return control.backgroundColor
-        }
+            font.pixelSize: VLCIcons.pixelSize(size)
+            font.family: VLCIcons.fontFamily
 
-        foregroundColor: {
-            if (control.hovered)
-                return control.colorHover
-            if (control.highlighted)
-                return control.colorHighlighted
-            if (!control.enabled)
-                return control.colorDisabled
-            return control.color
+            Accessible.ignored: true
         }
-
-        activeBorderColor: control.colorFocus
-
-        implicitHeight: control.size
-        implicitWidth : control.size
     }
-
-    Keys.priority: Keys.AfterItem
-    Keys.onPressed: Navigation.defaultKeyAction(event)
 }

modules/gui/qt/widgets/qml/IconTrackButton.qml

+/*****************************************************************************
+ * Copyright (C) 2021 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee@omega.gg>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+
+import "qrc:///style/"
+
+IconToolButton {
+    // Style
+    color: VLCStyle.colors.white
+    colorHover: VLCStyle.colors.buttonBannerDark
+    colorFocus: VLCStyle.colors.white
+}