inconsistent colors in the default skin
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Mixxx |
Won't Fix
|
Wishlist
|
jus |
Bug Description
I use the default skin with the 1440x900 resolution (Deere144x900-
Here is a complete list of controls that follow the kde color scheme:
- menubar
- headers of Library, Autodj etc. tables
- buttons of autodj (shuffle and enable)
- scrollbars of the lists.
I could fix the scrollbars and the buttons by adding the following line to the <Style> section skin.xml, before the QToolTip definition:
QPushButton,
Unfortunately I don't know how to fix the menubar (QMenuBar has no effect), or the table headers, but I'm sure they are not hardcoded, because if I change the KDE color scheme, mixxx's menubar and table headers follow it.
Anyway, I think it's worth fixing these colors not only for me, but for everyone, especially because it's the default skin.
The current stylesheets leave the styling of buttons and scrollbars to QT itself, which uses the native theme engine to draw these elements following the operating systems style guide. Moreover it respects the controls active states. It is tested to work correctly across all supported OS, but especially on Linux, you can't test all possible variants.
There are suggestions to completely style all elements of the user interface ( see lp:1094928) across the different OS, something we target for v1.12.
That Mixxx does not look optimal with your selected KDE scheme is annoying, but as you found out, you can customize the stylesheet pretty easily.
Example to style the header: :section { padding: 2px; background: #808080; border-top: none; border-bottom: 1px solid #061319; border- left: 1px solid #061319; border-right: none; } :section: selected { padding: 2px; background: #E4E4E4; border-top: none; border-bottom: 1px solid #061319; border- left: 1px solid #061319; border-right: none; } :up-arrow { image: url(skin: /style/ foo.png) } :down-arrow {image: url(skin: /style/ foo.png) }
QHeaderView { font: 13px/15px Lucida Grande; background: #061319; border-bottom: 1px solid #404040;}
QHeaderView:
QHeaderView:
QHeaderView:
QHeaderView: