[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;
}