QScrollBar handle

[Comfy.n]

Hello Kovid,

I remember you're not much a fan of adding CSS/QSS in the code, because it tends to break things.

Today I went to update Xnview, which is also a Qt-based program, then I found it has an option to skin the scrollbar handle, as shown in the screenshot for a test I did:



So I wonder: since Qt has been updated in recent Calibre versions, would it be possible now to change the scrollbar handle color?

This is the relevant code in that screencap:

PHP Code:

QScrollBar::handle{
    background-color: rgb(176, 49, 49);
    border: 1px solid yellow;
}

QScrollBar::handle:horizontal{
    min-width: 20px;
}

QScrollBar::handle:vertical{
    min-height: 20px;
}

QScrollBar::handle:hover {
    background-color: rgb(130, 130, 130);
}

QScrollBar::handle:pressed {
    background-color: rgb(180, 180, 180);
} 


Their complete QSS is below:

Spoiler:

QScrollBar{
background-color: rgb(40, 40, 40);
}

QScrollBar::add-page, QScrollBar::sub-page {
background: none;
}

QScrollBar::horizontal{
border: 1px solid rgb(90, 90, 90);
border-left: 0px solid red;
border-right: 0px solid red;

margin: 0px 16px 0px 16px;
}

QScrollBar::vertical {
border: 1px solid rgb(90, 90, 90);
border-top: 0px solid red;
border-bottom: 0px solid red;

margin: 16px 0px 16px 0px;
}

QScrollBar::handle{
background-color: rgb(176, 49, 49);
border: 1px solid yellow;
}

QScrollBar::handle:horizontal{
min-width: 20px;
}

QScrollBar::handle:vertical{
min-height: 20px;
}

QScrollBar::handle:hover {
background-color: rgb(130, 130, 130);
}

QScrollBar::handle:pressed {
background-color: rgb(180, 180, 180);
}

QScrollBar::add-line:horizontal {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(60, 60, 60), stop:1 rgb(90, 90, 90));
border: 1px solid rgb(90, 90, 90);
border-left:0px;

width: 15px;
subcontrol-position: right;
subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(90, 90, 90), stop:1 rgb(60, 60, 60));
border: 1px solid rgb(90, 90, 90);
border-right:0px;

width: 15px;
subcontrol-position: left;
subcontrol-origin: margin;
}

QScrollBar::add-line:horizontal:hover{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(100, 100, 100), stop:1 rgb(150, 150, 150));
}

QScrollBar::sub-line:horizontal:hover{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(150, 150, 150), stop:1 rgb(100, 100, 100));
}

QScrollBar::add-line:horizontal:pressed{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(130, 130, 130), stop:1 rgb(180, 180, 180));
}

QScrollBar::sub-line:horizontal:pressed{
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgb(180, 180, 180), stop:1 rgb(130, 130, 130));
}

QScrollBar::add-line:vertical {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(60, 60, 60), stop:1 rgb(90, 90, 90));
border: 1px solid rgb(90, 90, 90);
border-top:0px;

height: 15px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical{
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(90, 90, 90), stop:1 rgb(60, 60, 60));
border: 1px solid rgb(90, 90, 90);
border-bottom:0px;

height: 15px;
subcontrol-position: top;
subcontrol-origin: margin;
}

QScrollBar::add-line:vertical:hover{
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(100, 100, 100), stop:1 rgb(150, 150, 150));
}

QScrollBar::sub-line:vertical:hover{
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(150, 150, 150), stop:1 rgb(100, 100, 100));
}

QScrollBar::add-line:vertical:pressed{
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(130, 130, 130), stop:1 rgb(180, 180, 180));
}

QScrollBar::sub-line:vertical:pressed{
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(180, 180, 180), stop:1 rgb(130, 130, 130));
}

QScrollBar::left-arrow:horizontal{
background-image: url("UI:arrow_left_V2.png");
background-position: center;
}

QScrollBar::right-arrow{
background-image: url("UI:arrow_right_V2.png");
background-position: center;
}

QScrollBar::up-arrow:vertical{
background-image: url("UI:arrow_up_V2.png");
background-position: center;
}

QScrollBar::down-arrow:vertical{
background-image: url("UI:arrow_down_V2.png");
background-position: center;
}

[kovidgoyal]

I'm afraid I am still not a fan of themeing Qt via stylesheets.

[Comfy.n]

Oh well.

[thiago.eec]

I find the calibre scrollbar really difficult to see in dark mode. Both viewer and editor preview windows have great scrollbars, with great contrast. IRC, @Kovid said that they were generated by QtWebengine.

Maybe just the scrollbars in dark mode could be changed. It's really hard to see.

[Brett Merkey]

Originally Posted by thiago.eec

I find the calibre scrollbar really difficult to see in dark mode.

If you find the scrollbars merely really difficult to see in dark mode, then your eyes are better than mine. Black on black it is.