qt: Redesign scrollbar styles (#3571)

* qt: Add platform specific css style for scrollbars

This disabled scrollbars.css loading and adds a "windows,other" section in general.css, dark.css and light.css where it adds customizations for scrollbars in each theme.

* qt: Remove scrollbar.css and all its remaining mentions

* qt: Run update-css-files.py
This commit is contained in:
dustinface 2020-07-26 13:19:34 +02:00 committed by xdustinface
parent 1a2867f886
commit b073ae9853
8 changed files with 240 additions and 31 deletions

View File

@ -356,7 +356,6 @@ RES_CSS = \
qt/res/css/dark.css \
qt/res/css/general.css \
qt/res/css/light.css \
qt/res/css/scrollbars.css \
qt/res/css/traditional.css
RES_FONTS = \

View File

@ -56,7 +56,6 @@
</qresource>
<qresource prefix="/css">
<file alias="general">res/css/general.css</file>
<file alias="scrollbars">res/css/scrollbars.css</file>
<file alias="Dark">res/css/dark.css</file>
<file alias="Light">res/css/light.css</file>
<file alias="Traditional">res/css/traditional.css</file>

View File

@ -109,8 +109,7 @@ static const std::map<QString, QString> mapStyleToTheme{
{"general.css", ""},
{"dark.css", "Dark"},
{"light.css", "Light"},
{"traditional.css", "Traditional"},
{"scrollbars.css", ""}
{"traditional.css", "Traditional"}
};
/** loadFonts stores the SystemDefault font in osDefaultFont to be able to reference it later again */
@ -1218,9 +1217,6 @@ void loadStyleSheet(QWidget* widget, bool fForceUpdate)
std::vector<QString> vecFiles;
// If light/dark theme is used load general styles first
if (dashThemeActive()) {
#ifndef Q_OS_MAC
vecFiles.push_back(pathToFile("scrollbars"));
#endif
vecFiles.push_back(pathToFile("general"));
}
vecFiles.push_back(pathToFile(getActiveTheme()));

View File

@ -17,7 +17,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
/* do not modify! section updated by update-css-files.py
<colors>
# Used colors in dark.css for commit a50bd2371b
# Used colors in dark.css for commit 44de8a93f2
#00000000
#333
@ -487,7 +487,8 @@ QScrollBar
******************************************************/
/* Do NOT apply any styles to QScrollBar here,
* it's OS dependent and should be handled via platform specific code.
* it's OS dependent and should be handled via platform specific code at the
* end of the file.
*/
/******************************************************
@ -829,11 +830,45 @@ be kept in mind when adding sections to avoid unexpected overwriting.
*******************************************************
******************************************************/
<os="macosx, windows, other">
<os="windows,other">
/* Example section to add styles for all operating systems
Remove any to exclude it.
*/
/******************************************************
QScrollBar
******************************************************/
QScrollBar::add-page,
QScrollBar::sub-page {
background-color: #39393b;
}
QScrollBar::handle:vertical,
QScrollBar::handle:horizontal {
background-color: #4a4a4b;
}
QScrollBar:handle:horizontal:hover,
QScrollBar:handle:vertical:hover {
background-color: #585858;
}
QScrollBar:handle:horizontal:pressed,
QScrollBar:handle:vertical:pressed {
background-color: #4a4a4b;
}
QScrollBar::add-line:vertical,
QScrollBar::sub-line:vertical,
QScrollBar::add-line:horizontal,
QScrollBar::sub-line:horizontal {
background-color: #585858;
}
QScrollBar::add-line:vertical:hover,
QScrollBar::sub-line:vertical:hover,
QScrollBar::add-line:horizontal:hover,
QScrollBar::sub-line:horizontal:hover {
background-color: #4a4a4b;
}
QScrollBar::add-line:vertical:pressed,
QScrollBar::sub-line:vertical:pressed,
QScrollBar::add-line:horizontal:pressed,
QScrollBar::sub-line:horizontal:pressed {
background-color: #39393b;
}
</os>

View File

@ -11,8 +11,7 @@ loaded and combined in `GUIUtil::loadStyleSheet()` in guitil.cpp.
Hierarchy:
* general.css - base layout: Loaded first if selected theme is not "Traditional" (traditional.css)
* scrollbars.css - custom scrollbars: Loaded second only for windows/linux if general.css is loaded
* <theme.css> - theme css file: Always loaded and loaded last.
* <theme.css> - theme css file: Always loaded last.
To replace <theme.css> there are currently the following themes available:
@ -31,7 +30,7 @@ in the <theme.css> file.
/* do not modify! section updated by update-css-files.py
<colors>
# Used colors in general.css for commit a50bd2371b
# Used colors in general.css for commit 44de8a93f2
#00000000
#096e03
@ -801,7 +800,8 @@ QScrollBar
******************************************************/
/* Do NOT apply any styles to QScrollBar here,
* it's OS dependent and should be handled via platform specific code.
* it's OS dependent and should be handled via platform specific code at the
* end of the file.
*/
/******************************************************
@ -1935,12 +1935,156 @@ be kept in mind when adding sections to avoid unexpected overwriting.
*******************************************************
******************************************************/
<os="windows,other">
<os="macosx, windows, other">
/******************************************************
QScrollBar
******************************************************/
/* Example section to add styles for all operating systems
Remove any to exclude it.
*/
QScrollBar:vertical { /* Vertical Scroll Bar Attributes */
border: 0;
width: 18px;
margin: 18px 0px 18px 0px;
}
QScrollBar:horizontal { /* Horizontal Scroll Bar Attributes */
border: 0;
height: 18px;
padding: 0px 18px 0px 18px;
}
QScrollBar:handle:horizontal:hover,
QScrollBar:handle:vertical:hover { /* Horizontal Scroll Bar Attributes */
background-color: red;
}
QScrollBar:handle:horizontal:pressed,
QScrollBar:handle:vertical:pressed { /* Horizontal Scroll Bar Attributes */
background-color: red;
}
QScrollBar::handle:vertical { /* Scroll Bar Slider - vertical */
background-color: red;
min-height: 10px;
}
QScrollBar::handle:horizontal { /* Scroll Bar Slider - horizontal */
background-color: red;
min-width: 10px;
}
QScrollBar::add-page,
QScrollBar::sub-page { /* Scroll Bar Background */
background-color: red;
}
QScrollBar::add-line:vertical,
QScrollBar::sub-line:vertical,
QScrollBar::add-line:horizontal,
QScrollBar::sub-line:horizontal { /* Define Arrow Button Dimensions */
background-color: red;
border: 0px solid red;
width: 18px;
height: 18px;
}
QScrollBar::add-line:vertical:hover,
QScrollBar::sub-line:vertical:hover,
QScrollBar::add-line:horizontal:hover,
QScrollBar::sub-line:horizontal:hover { /* Define Arrow Button Dimensions */
background-color: red;
}
QScrollBar::add-line:vertical:pressed,
QScrollBar::sub-line:vertical:pressed,
QScrollBar::add-line:horizontal:pressed,
QScrollBar::sub-line:horizontal:pressed {
background-color: red;
}
QScrollBar::sub-line:vertical { /* Vertical - top button position */
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical { /* Vertical - bottom button position */
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal { /* Vertical - left button position */
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal { /* Vertical - right button position */
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar:up-arrow,
QScrollBar:down-arrow,
QScrollBar:left-arrow,
QScrollBar:right-arrow { /* Arrows Icon */
width: 18px;
height: 18px;
}
QScrollBar:up-arrow {
border-image: url(':/images/arrow_up_normal');
}
QScrollBar:up-arrow:hover {
border-image: url(':/images/arrow_up_hover');
}
QScrollBar:up-arrow:pressed {
border-image: url(':/images/arrow_up_pressed');
}
QScrollBar:up-arrow:disabled {
border-image: url(':/images/arrow_light_up_hover');
}
QScrollBar:down-arrow {
border-image: url(':/images/arrow_down_normal');
}
QScrollBar:down-arrow:hover {
border-image: url(':/images/arrow_down_hover');
}
QScrollBar:down-arrow:pressed {
border-image: url(':/images/arrow_down_pressed');
}
QScrollBar:down-arrow:disabled {
border-image: url(':/images/arrow_light_down_hover');
}
QScrollBar:left-arrow {
border-image: url(':/images/arrow_left_normal');
}
QScrollBar:left-arrow:hover {
border-image: url(':/images/arrow_left_hover');
}
QScrollBar:left-arrow:pressed {
border-image: url(':/images/arrow_left_pressed');
}
QScrollBar:left-arrow:disabled {
border-image: url(':/images/arrow_light_left_hover');
}
QScrollBar:right-arrow {
border-image: url(':/images/arrow_right_normal');
}
QScrollBar:right-arrow:hover {
border-image: url(':/images/arrow_right_hover');
}
QScrollBar:right-arrow:pressed {
border-image: url(':/images/arrow_right_pressed');
}
QScrollBar:right-arrow:disabled {
border-image: url(':/images/arrow_light_right_hover');
}
QDialog#HelpMessageDialog QScrollBar:vertical,
QDialog#HelpMessageDialog QScrollBar:horizontal {
border: 0;
}
</os>

View File

@ -17,7 +17,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
/* do not modify! section updated by update-css-files.py
<colors>
# Used colors in light.css for commit a50bd2371b
# Used colors in light.css for commit 44de8a93f2
#00000000
#555
@ -27,6 +27,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
#c7c7c7
#d2d2d2
#dcdcdc
#e0e0e0
#eaeaec
#f2f2f4
#ccfafafa
@ -468,7 +469,8 @@ QScrollBar
******************************************************/
/* Do NOT apply any styles to QScrollBar here,
* it's OS dependent and should be handled via platform specific code.
* it's OS dependent and should be handled via platform specific code at the
* end of the file.
*/
/******************************************************
@ -811,12 +813,46 @@ be kept in mind when adding sections to avoid unexpected overwriting.
*******************************************************
******************************************************/
<os="windows,other">
<os="macosx, windows, other">
/******************************************************
QScrollBar
******************************************************/
/* Example section to add styles for all operating systems
Remove any to exclude it.
*/
QScrollBar::add-page,
QScrollBar::sub-page {
background-color: #f2f2f4;
}
QScrollBar::handle:vertical,
QScrollBar::handle:horizontal {
background-color: #dcdcdc;
}
QScrollBar:handle:horizontal:hover,
QScrollBar:handle:vertical:hover {
background-color: #d2d2d2;
}
QScrollBar:handle:horizontal:pressed,
QScrollBar:handle:vertical:pressed {
background-color: #c7c7c7;
}
QScrollBar::add-line:vertical,
QScrollBar::sub-line:vertical,
QScrollBar::add-line:horizontal,
QScrollBar::sub-line:horizontal {
background-color: #dcdcdc;
}
QScrollBar::add-line:vertical:hover,
QScrollBar::sub-line:vertical:hover,
QScrollBar::add-line:horizontal:hover,
QScrollBar::sub-line:horizontal:hover {
background-color: #d2d2d2;
}
QScrollBar::add-line:vertical:pressed,
QScrollBar::sub-line:vertical:pressed,
QScrollBar::add-line:horizontal:pressed,
QScrollBar::sub-line:horizontal:pressed {
background-color: #e0e0e0;
}
</os>

View File

@ -19,7 +19,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
/* do not modify! section updated by update-css-files.py
<colors>
# Used colors in scrollbars.css for commit a50bd2371b
# Used colors in scrollbars.css for commit 44de8a93f2
#e0e0e0
#f2f0f0

View File

@ -17,7 +17,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
/* do not modify! section updated by update-css-files.py
<colors>
# Used colors in traditional.css for commit a50bd2371b
# Used colors in traditional.css for commit 44de8a93f2
#00000000
#333