Fix invisible arrows on spin boxes, combo boxes, and headers

The QSS arrow styles only set width/height without specifying an image
or border-based triangle, so Qt fell back to platform-drawn arrows that
were invisible against the dark button background (#45475a).

Use CSS border triangles to render visible arrows in #cdd6f4 (Catppuccin
Mocha text color) with hover (#f5e0dc) and disabled (#6c7086) states
for spin boxes, combo boxes, and header sort indicators.
This commit is contained in:
forbes
2026-01-29 22:31:30 -06:00
parent 9c14f17bee
commit c9da41f10c

View File

@@ -465,13 +465,35 @@ QSpinBox::down-button:pressed, QDoubleSpinBox::down-button:pressed {
}
QSpinBox::up-arrow, QDoubleSpinBox::up-arrow {
width: 8px;
height: 8px;
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #cdd6f4;
}
QSpinBox::up-arrow:hover, QDoubleSpinBox::up-arrow:hover {
border-bottom-color: #f5e0dc;
}
QSpinBox::up-arrow:disabled, QDoubleSpinBox::up-arrow:disabled {
border-bottom-color: #6c7086;
}
QSpinBox::down-arrow, QDoubleSpinBox::down-arrow {
width: 8px;
height: 8px;
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #cdd6f4;
}
QSpinBox::down-arrow:hover, QDoubleSpinBox::down-arrow:hover {
border-top-color: #f5e0dc;
}
QSpinBox::down-arrow:disabled, QDoubleSpinBox::down-arrow:disabled {
border-top-color: #6c7086;
}
/* =============================================================================
@@ -516,8 +538,15 @@ QComboBox::drop-down:hover {
}
QComboBox::down-arrow {
width: 10px;
height: 10px;
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #cdd6f4;
}
QComboBox::down-arrow:disabled {
border-top-color: #6c7086;
}
QComboBox QAbstractItemView {
@@ -842,13 +871,19 @@ QHeaderView::section:checked {
}
QHeaderView::down-arrow {
width: 10px;
height: 10px;
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #cdd6f4;
}
QHeaderView::up-arrow {
width: 10px;
height: 10px;
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #cdd6f4;
}
/* =============================================================================