Skip to content

Commit b3be0ba

Browse files
xdustinfacexdustinface
authored
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
1 parent 9774f46 commit b3be0ba

File tree

8 files changed

+240
-31
lines changed

8 files changed

+240
-31
lines changed

‎src/Makefile.qt.include‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,6 @@ RES_CSS = \
356356
qt/res/css/dark.css \
357357
qt/res/css/general.css \
358358
qt/res/css/light.css \
359-
qt/res/css/scrollbars.css \
360359
qt/res/css/traditional.css
361360

362361
RES_FONTS = \

‎src/qt/dash.qrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@
5656
</qresource>
5757
<qresource prefix="/css">
5858
<file alias="general">res/css/general.css</file>
59-
<file alias="scrollbars">res/css/scrollbars.css</file>
6059
<file alias="Dark">res/css/dark.css</file>
6160
<file alias="Light">res/css/light.css</file>
6261
<file alias="Traditional">res/css/traditional.css</file>

‎src/qt/guiutil.cpp‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,7 @@ static const std::map<QString, QString> mapStyleToTheme{
102102
{"general.css", ""},
103103
{"dark.css", "Dark"},
104104
{"light.css", "Light"},
105-
{"traditional.css", "Traditional"},
106-
{"scrollbars.css", ""}
105+
{"traditional.css", "Traditional"}
107106
};
108107

109108
/** loadFonts stores the SystemDefault font in osDefaultFont to be able to reference it later again */
@@ -1179,9 +1178,6 @@ void loadStyleSheet(QWidget* widget, bool fForceUpdate)
11791178
std::vector<QString> vecFiles;
11801179
// If light/dark theme is used load general styles first
11811180
if (dashThemeActive()) {
1182-
#ifndef Q_OS_MAC
1183-
vecFiles.push_back(pathToFile("scrollbars"));
1184-
#endif
11851181
vecFiles.push_back(pathToFile("general"));
11861182
}
11871183
vecFiles.push_back(pathToFile(getActiveTheme()));

‎src/qt/res/css/dark.css‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
1717
/* do not modify! section updated by update-css-files.py
1818
<colors>
1919
20-
# Used colors in dark.css for commit a50bd2371b
20+
# Used colors in dark.css for commit 44de8a93f2
2121
2222
#00000000
2323
#333
@@ -487,7 +487,8 @@ QScrollBar
487487
******************************************************/
488488

489489
/* Do NOT apply any styles to QScrollBar here,
490-
* it's OS dependent and should be handled via platform specific code.
490+
* it's OS dependent and should be handled via platform specific code at the
491+
* end of the file.
491492
*/
492493

493494
/******************************************************
@@ -829,11 +830,45 @@ be kept in mind when adding sections to avoid unexpected overwriting.
829830
*******************************************************
830831
******************************************************/
831832

832-
<os="macosx, windows, other">
833+
<os="windows,other">
833834

834-
/* Example section to add styles for all operating systems
835-
Remove any to exclude it.
836-
*/
835+
/******************************************************
836+
QScrollBar
837+
******************************************************/
837838

838-
</os>
839+
QScrollBar::add-page,
840+
QScrollBar::sub-page {
841+
background-color: #39393b;
842+
}
843+
QScrollBar::handle:vertical,
844+
QScrollBar::handle:horizontal {
845+
background-color: #4a4a4b;
846+
}
847+
QScrollBar:handle:horizontal:hover,
848+
QScrollBar:handle:vertical:hover {
849+
background-color: #585858;
850+
}
851+
QScrollBar:handle:horizontal:pressed,
852+
QScrollBar:handle:vertical:pressed {
853+
background-color: #4a4a4b;
854+
}
855+
QScrollBar::add-line:vertical,
856+
QScrollBar::sub-line:vertical,
857+
QScrollBar::add-line:horizontal,
858+
QScrollBar::sub-line:horizontal {
859+
background-color: #585858;
860+
}
861+
QScrollBar::add-line:vertical:hover,
862+
QScrollBar::sub-line:vertical:hover,
863+
QScrollBar::add-line:horizontal:hover,
864+
QScrollBar::sub-line:horizontal:hover {
865+
background-color: #4a4a4b;
866+
}
867+
QScrollBar::add-line:vertical:pressed,
868+
QScrollBar::sub-line:vertical:pressed,
869+
QScrollBar::add-line:horizontal:pressed,
870+
QScrollBar::sub-line:horizontal:pressed {
871+
background-color: #39393b;
872+
}
839873

874+
</os>

‎src/qt/res/css/general.css‎

Lines changed: 153 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ loaded and combined in `GUIUtil::loadStyleSheet()` in guitil.cpp.
1111
Hierarchy:
1212
1313
* general.css - base layout: Loaded first if selected theme is not "Traditional" (traditional.css)
14-
* scrollbars.css - custom scrollbars: Loaded second only for windows/linux if general.css is loaded
15-
* <theme.css> - theme css file: Always loaded and loaded last.
14+
* <theme.css> - theme css file: Always loaded last.
1615
1716
To replace <theme.css> there are currently the following themes available:
1817
@@ -31,7 +30,7 @@ in the <theme.css> file.
3130
/* do not modify! section updated by update-css-files.py
3231
<colors>
3332
34-
# Used colors in general.css for commit a50bd2371b
33+
# Used colors in general.css for commit 44de8a93f2
3534
3635
#00000000
3736
#096e03
@@ -801,7 +800,8 @@ QScrollBar
801800
******************************************************/
802801

803802
/* Do NOT apply any styles to QScrollBar here,
804-
* it's OS dependent and should be handled via platform specific code.
803+
* it's OS dependent and should be handled via platform specific code at the
804+
* end of the file.
805805
*/
806806

807807
/******************************************************
@@ -1935,12 +1935,156 @@ be kept in mind when adding sections to avoid unexpected overwriting.
19351935
*******************************************************
19361936
******************************************************/
19371937

1938+
<os="windows,other">
19381939

1939-
<os="macosx, windows, other">
1940+
/******************************************************
1941+
QScrollBar
1942+
******************************************************/
19401943

1941-
/* Example section to add styles for all operating systems
1942-
Remove any to exclude it.
1943-
*/
1944+
QScrollBar:vertical { /* Vertical Scroll Bar Attributes */
1945+
border: 0;
1946+
width: 18px;
1947+
margin: 18px 0px 18px 0px;
1948+
}
19441949

1945-
</os>
1950+
QScrollBar:horizontal { /* Horizontal Scroll Bar Attributes */
1951+
border: 0;
1952+
height: 18px;
1953+
padding: 0px 18px 0px 18px;
1954+
}
1955+
1956+
QScrollBar:handle:horizontal:hover,
1957+
QScrollBar:handle:vertical:hover { /* Horizontal Scroll Bar Attributes */
1958+
background-color: red;
1959+
}
1960+
1961+
QScrollBar:handle:horizontal:pressed,
1962+
QScrollBar:handle:vertical:pressed { /* Horizontal Scroll Bar Attributes */
1963+
background-color: red;
1964+
}
1965+
1966+
QScrollBar::handle:vertical { /* Scroll Bar Slider - vertical */
1967+
background-color: red;
1968+
min-height: 10px;
1969+
}
1970+
1971+
QScrollBar::handle:horizontal { /* Scroll Bar Slider - horizontal */
1972+
background-color: red;
1973+
min-width: 10px;
1974+
}
1975+
1976+
QScrollBar::add-page,
1977+
QScrollBar::sub-page { /* Scroll Bar Background */
1978+
background-color: red;
1979+
}
1980+
1981+
QScrollBar::add-line:vertical,
1982+
QScrollBar::sub-line:vertical,
1983+
QScrollBar::add-line:horizontal,
1984+
QScrollBar::sub-line:horizontal { /* Define Arrow Button Dimensions */
1985+
background-color: red;
1986+
border: 0px solid red;
1987+
width: 18px;
1988+
height: 18px;
1989+
}
1990+
1991+
QScrollBar::add-line:vertical:hover,
1992+
QScrollBar::sub-line:vertical:hover,
1993+
QScrollBar::add-line:horizontal:hover,
1994+
QScrollBar::sub-line:horizontal:hover { /* Define Arrow Button Dimensions */
1995+
background-color: red;
1996+
}
19461997

1998+
QScrollBar::add-line:vertical:pressed,
1999+
QScrollBar::sub-line:vertical:pressed,
2000+
QScrollBar::add-line:horizontal:pressed,
2001+
QScrollBar::sub-line:horizontal:pressed {
2002+
background-color: red;
2003+
}
2004+
2005+
QScrollBar::sub-line:vertical { /* Vertical - top button position */
2006+
subcontrol-position: top;
2007+
subcontrol-origin: margin;
2008+
}
2009+
2010+
QScrollBar::add-line:vertical { /* Vertical - bottom button position */
2011+
subcontrol-position: bottom;
2012+
subcontrol-origin: margin;
2013+
}
2014+
2015+
QScrollBar::sub-line:horizontal { /* Vertical - left button position */
2016+
subcontrol-position: left;
2017+
subcontrol-origin: margin;
2018+
}
2019+
2020+
QScrollBar::add-line:horizontal { /* Vertical - right button position */
2021+
subcontrol-position: right;
2022+
subcontrol-origin: margin;
2023+
}
2024+
2025+
QScrollBar:up-arrow,
2026+
QScrollBar:down-arrow,
2027+
QScrollBar:left-arrow,
2028+
QScrollBar:right-arrow { /* Arrows Icon */
2029+
width: 18px;
2030+
height: 18px;
2031+
}
2032+
2033+
QScrollBar:up-arrow {
2034+
border-image: url(':/images/arrow_up_normal');
2035+
}
2036+
QScrollBar:up-arrow:hover {
2037+
border-image: url(':/images/arrow_up_hover');
2038+
}
2039+
QScrollBar:up-arrow:pressed {
2040+
border-image: url(':/images/arrow_up_pressed');
2041+
}
2042+
QScrollBar:up-arrow:disabled {
2043+
border-image: url(':/images/arrow_light_up_hover');
2044+
}
2045+
2046+
QScrollBar:down-arrow {
2047+
border-image: url(':/images/arrow_down_normal');
2048+
}
2049+
QScrollBar:down-arrow:hover {
2050+
border-image: url(':/images/arrow_down_hover');
2051+
}
2052+
QScrollBar:down-arrow:pressed {
2053+
border-image: url(':/images/arrow_down_pressed');
2054+
}
2055+
QScrollBar:down-arrow:disabled {
2056+
border-image: url(':/images/arrow_light_down_hover');
2057+
}
2058+
2059+
QScrollBar:left-arrow {
2060+
border-image: url(':/images/arrow_left_normal');
2061+
}
2062+
QScrollBar:left-arrow:hover {
2063+
border-image: url(':/images/arrow_left_hover');
2064+
}
2065+
QScrollBar:left-arrow:pressed {
2066+
border-image: url(':/images/arrow_left_pressed');
2067+
}
2068+
QScrollBar:left-arrow:disabled {
2069+
border-image: url(':/images/arrow_light_left_hover');
2070+
}
2071+
2072+
QScrollBar:right-arrow {
2073+
border-image: url(':/images/arrow_right_normal');
2074+
}
2075+
QScrollBar:right-arrow:hover {
2076+
border-image: url(':/images/arrow_right_hover');
2077+
}
2078+
QScrollBar:right-arrow:pressed {
2079+
border-image: url(':/images/arrow_right_pressed');
2080+
}
2081+
QScrollBar:right-arrow:disabled {
2082+
border-image: url(':/images/arrow_light_right_hover');
2083+
}
2084+
2085+
QDialog#HelpMessageDialog QScrollBar:vertical,
2086+
QDialog#HelpMessageDialog QScrollBar:horizontal {
2087+
border: 0;
2088+
}
2089+
2090+
</os>

‎src/qt/res/css/light.css‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
1717
/* do not modify! section updated by update-css-files.py
1818
<colors>
1919
20-
# Used colors in light.css for commit a50bd2371b
20+
# Used colors in light.css for commit 44de8a93f2
2121
2222
#00000000
2323
#555
@@ -27,6 +27,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
2727
#c7c7c7
2828
#d2d2d2
2929
#dcdcdc
30+
#e0e0e0
3031
#eaeaec
3132
#f2f2f4
3233
#ccfafafa
@@ -468,7 +469,8 @@ QScrollBar
468469
******************************************************/
469470

470471
/* Do NOT apply any styles to QScrollBar here,
471-
* it's OS dependent and should be handled via platform specific code.
472+
* it's OS dependent and should be handled via platform specific code at the
473+
* end of the file.
472474
*/
473475

474476
/******************************************************
@@ -811,12 +813,46 @@ be kept in mind when adding sections to avoid unexpected overwriting.
811813
*******************************************************
812814
******************************************************/
813815

816+
<os="windows,other">
814817

815-
<os="macosx, windows, other">
818+
/******************************************************
819+
QScrollBar
820+
******************************************************/
816821

817-
/* Example section to add styles for all operating systems
818-
Remove any to exclude it.
819-
*/
822+
QScrollBar::add-page,
823+
QScrollBar::sub-page {
824+
background-color: #f2f2f4;
825+
}
826+
QScrollBar::handle:vertical,
827+
QScrollBar::handle:horizontal {
828+
background-color: #dcdcdc;
829+
}
830+
QScrollBar:handle:horizontal:hover,
831+
QScrollBar:handle:vertical:hover {
832+
background-color: #d2d2d2;
833+
}
834+
QScrollBar:handle:horizontal:pressed,
835+
QScrollBar:handle:vertical:pressed {
836+
background-color: #c7c7c7;
837+
}
838+
QScrollBar::add-line:vertical,
839+
QScrollBar::sub-line:vertical,
840+
QScrollBar::add-line:horizontal,
841+
QScrollBar::sub-line:horizontal {
842+
background-color: #dcdcdc;
843+
}
844+
QScrollBar::add-line:vertical:hover,
845+
QScrollBar::sub-line:vertical:hover,
846+
QScrollBar::add-line:horizontal:hover,
847+
QScrollBar::sub-line:horizontal:hover {
848+
background-color: #d2d2d2;
849+
}
850+
QScrollBar::add-line:vertical:pressed,
851+
QScrollBar::sub-line:vertical:pressed,
852+
QScrollBar::add-line:horizontal:pressed,
853+
QScrollBar::sub-line:horizontal:pressed {
854+
background-color: #e0e0e0;
855+
}
820856

821857
</os>
822858

‎src/qt/res/css/scrollbars.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
1919
/* do not modify! section updated by update-css-files.py
2020
<colors>
2121
22-
# Used colors in scrollbars.css for commit a50bd2371b
22+
# Used colors in scrollbars.css for commit 44de8a93f2
2323
2424
#e0e0e0
2525
#f2f0f0

‎src/qt/res/css/traditional.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Loaded in GUIUtil::loadStyleSheet() in guitil.cpp.
1717
/* do not modify! section updated by update-css-files.py
1818
<colors>
1919
20-
# Used colors in traditional.css for commit a50bd2371b
20+
# Used colors in traditional.css for commit 44de8a93f2
2121
2222
#00000000
2323
#333

0 commit comments

Comments
 (0)