GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make button color and hover gradient fit together (#2232)

Browse source 
* Fix QMenu item not having different color on hover

due to the color changes in #2220.

* Remove strong border on pressed Qt widgets

* Make button gradient more subtle

by changing gradient-start on hover instead of gradient-end.

* Apply QPushButton style to QSpinBox buttons

* Improve margin of QComboBox arrow

* Make button-bg same color as button-gradient-end

This makes the hover gradient more subtle.
This commit is contained in:
Matthias Metelka 2022-12-04 02:48:09 +01:00 committed by GitHub
parent 430f5613d6
commit fdaa65e064
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
qt/aqt/stylesheets.py
View file

@ -83,8 +83,7 @@ QMenu::item {{
margin-bottom: 4px; margin-bottom: 4px;
}} }}
QMenu::item:selected {{ QMenu::item:selected {{
background-color: {tm.var(colors.CANVAS_INSET)}; background-color: {tm.var(colors.CANVAS_ELEVATED)};
color: {tm.var(colors.HIGHLIGHT_FG)};
border-radius: {tm.var(props.BORDER_RADIUS)}; border-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QMenu::separator {{ QMenu::separator {{
@ -107,13 +106,18 @@ QPushButton {{
}} }}
QPushButton, QPushButton,
QTabBar::tab:!selected, QTabBar::tab:!selected,
QComboBox:!editable {{ QComboBox:!editable,
QComboBox::drop-down:editable,
QSpinBox::up-button,
QSpinBox::down-button {{
background: {tm.var(colors.BUTTON_BG)}; background: {tm.var(colors.BUTTON_BG)};
border-bottom: 1px solid {tm.var(colors.SHADOW)}; border-bottom: 1px solid {tm.var(colors.SHADOW)};
}} }}
QPushButton:hover, QPushButton:hover,
QTabBar::tab:hover, QTabBar::tab:hover,
QComboBox:!editable:hover {{ QComboBox:!editable:hover,
QSpinBox::up-button,
QSpinBox::down-button {{
background: { background: {
button_gradient( button_gradient(
tm.var(colors.BUTTON_GRADIENT_START), tm.var(colors.BUTTON_GRADIENT_START),
@ -122,8 +126,8 @@ QComboBox:!editable:hover {{
}; };
}} }}
QPushButton:pressed, QPushButton:pressed,
QComboBox:!editable:pressed {{ QSpinBox::up-button,
border: 1px solid {tm.var(colors.BORDER_STRONG)}; QSpinBox::down-button {{
background: { background: {
button_pressed_gradient( button_pressed_gradient(
tm.var(colors.BUTTON_GRADIENT_START), tm.var(colors.BUTTON_GRADIENT_START),
@ -181,30 +185,30 @@ QComboBox::item::icon:selected {{
position: absolute; position: absolute;
}} }}
QComboBox::drop-down {{ QComboBox::drop-down {{
margin: -1px; subcontrol-origin: border;
subcontrol-origin: padding;
padding: 2px; padding: 2px;
padding-left: 4px;
padding-right: 4px;
width: 16px; width: 16px;
subcontrol-position: top right; subcontrol-position: top right;
border: 1px solid {tm.var(colors.BORDER_SUBTLE)}; border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)}; border-top-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)}; border-bottom-{tm.right()}-radius: {tm.var(props.BORDER_RADIUS)};
}} }}
QComboBox::drop-down:!editable {{
background: none;
border-color: transparent;
}}
QComboBox::down-arrow {{ QComboBox::down-arrow {{
image: url({tm.themed_icon("mdi:chevron-down")}); image: url({tm.themed_icon("mdi:chevron-down")});
}} }}
QComboBox::drop-down {{ QComboBox::drop-down:hover:editable {{
background: {tm.var(colors.BUTTON_BG)};
border-bottom: 1px solid {tm.var(colors.SHADOW)};
}}
QComboBox::drop-down:hover {{
background: { background: {
button_gradient( button_gradient(
tm.var(colors.BUTTON_GRADIENT_START), tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END), tm.var(colors.BUTTON_GRADIENT_END),
) )
}; };
border-bottom: 1px solid {tm.var(colors.SHADOW)};
}} }}
""" """
@ -286,7 +290,6 @@ QHeaderView::section:first {{
}} }}
QHeaderView::section:pressed, QHeaderView::section:pressed,
QHeaderView::section:pressed:!first {{ QHeaderView::section:pressed:!first {{
border: 1px solid {tm.var(colors.BORDER_STRONG)};
background: { background: {
button_pressed_gradient( button_pressed_gradient(
tm.var(colors.BUTTON_GRADIENT_START), tm.var(colors.BUTTON_GRADIENT_START),
@ -341,28 +344,6 @@ QSpinBox::up-button,
QSpinBox::down-button {{ QSpinBox::down-button {{
subcontrol-origin: border; subcontrol-origin: border;
width: 16px; width: 16px;
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
background: {tm.var(colors.BUTTON_BG)};
}}
QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed {{
border: 1px solid {tm.var(colors.BORDER_STRONG)};
background: {
button_pressed_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
tm.var(colors.SHADOW)
)
}
}}
QSpinBox::up-button:hover,
QSpinBox::down-button:hover {{
background: {
button_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
)
};
}} }}
QSpinBox::up-button {{ QSpinBox::up-button {{
margin-bottom: -1px; margin-bottom: -1px;

10
sass/_vars.scss
View file

@ -142,8 +142,8 @@ $vars: (
bg: ( bg: (
"Background color of buttons", "Background color of buttons",
( (
light: white, light: palette(lightgray, 0),
dark: palette(darkgray, 4), dark: color.scale(palette(darkgray, 4), $lightness: 5%),
), ),
), ),
gradient: ( gradient: (
@ -151,14 +151,14 @@ $vars: (
"Start value of default button gradient", "Start value of default button gradient",
( (
light: white, light: white,
dark: palette(darkgray, 4), dark: color.scale(palette(darkgray, 4), $lightness: 10%),
), ),
), ),
end: ( end: (
"End value of default button gradient", "End value of default button gradient",
( (
light: palette(lightgray, 3), light: palette(lightgray, 0),
dark: palette(darkgray, 5), dark: color.scale(palette(darkgray, 4), $lightness: 5%),
), ),
), ),
), ),