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

Add blue colors for primary buttons

Browse source
This commit is contained in:
Matthias Metelka 2022-09-04 13:38:30 +02:00
parent 970148e231
commit b4101d9d97
6 changed files with 123 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
qt/aqt/data/qt/icons/BUILD.bazel
View file

@ -34,7 +34,7 @@ copy_mdi_icons(
"tag-outline.svg",
"tag-off-outline.svg",
# QComboBox and QSpinBox arrows
# QHeaderView arrows
"menu-up.svg",
"menu-down.svg",
],

3
qt/aqt/data/qt/icons/chevron-down.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#f4f4f4" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 157 B

3
qt/aqt/data/qt/icons/chevron-up.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#f4f4f4" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 159 B

136
qt/aqt/stylesheets.py
View file

@ -14,15 +14,13 @@ QLineEdit,
QListWidget,
QTreeWidget,
QListView {{
border: 1px solid {tm.color(colors.BUTTON_BORDER)};
border: 1px solid {tm.color(colors.BORDER)};
border-radius: 5px;
}}
QComboBox,
QLineEdit {{
padding: 2px;
}}
QComboBox:focus,
QComboBox:on,
QLineEdit:focus {{
border-color: {tm.color(colors.FOCUS_BORDER)};
}}
@ -43,25 +41,8 @@ QToolTip {{
def button_styles(tm: ThemeManager, buf: str) -> str:
buf += f"""
QPushButton:pressed,
QHeaderView::section:pressed,
QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed {{
border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
stop:0.1 {tm.color(colors.BUTTON_GRADIENT_START)},
stop:0.9 {tm.color(colors.BUTTON_GRADIENT_END)}
stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
);
}}
QPushButton,
QHeaderView::section,
QSpinBox::up-button,
QSpinBox::down-button,
QComboBox:!editable,
QComboBox::drop-down:editable {{
QComboBox:!editable {{
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_GRADIENT_START)},
@ -70,16 +51,23 @@ QComboBox::drop-down:editable {{
}}
QPushButton:hover,
QHeaderView::section:hover,
QSpinBox::up-button:hover,
QSpinBox::down-button:hover,
QComboBox:!editable:hover,
QComboBox::drop-down:editable:hover {{
QComboBox:!editable:hover {{
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
stop:0 {tm.color(colors.BUTTON_HOVER_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_HOVER_GRADIENT_END)}
);
}}
QPushButton:pressed,
QComboBox:!editable:pressed {{
border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
stop:0.1 {tm.color(colors.BUTTON_GRADIENT_START)},
stop:0.9 {tm.color(colors.BUTTON_GRADIENT_END)},
stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
);
}}
"""
return buf
@ -87,26 +75,55 @@ QComboBox::drop-down:editable:hover {{
def combobox_styles(tm: ThemeManager, buf: str) -> str:
buf += f"""
QComboBox:editable:on,
QComboBox:editable:focus,
QComboBox::drop-down:focus:editable,
QComboBox::drop-down:pressed {{
border-color: {tm.color(colors.FOCUS_BORDER)};
}}
QComboBox:on {{
border-bottom: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}}
QComboBox::item {{
color: {tm.color(colors.TEXT_FG)};
background: {tm.color(colors.FRAME_BG)};
}}
QComboBox::item:selected {{
background: {tm.color(colors.HIGHLIGHT_BG)};
color: {tm.color(colors.HIGHLIGHT_FG)};
}}
QComboBox::item::icon:selected {{
position: absolute;
}}
QComboBox::drop-down {{
border: 0px;
margin: -1px;
subcontrol-origin: padding;
padding: 4px;
subcontrol-position: top right;
width: 18px;
}}
QComboBox::drop-down:editable {{
margin: 1px;
subcontrol-position: top right;
border: 1px solid {tm.color(colors.BUTTON_BORDER)};
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 1px solid {tm.color(colors.BUTTON_BORDER)};
}}
QComboBox::down-arrow {{
image: url(icons:menu-down.svg);
image: url(icons:chevron-down.svg);
}}
QComboBox::drop-down {{
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_END)}
);
}}
QComboBox::drop-down:hover {{
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
stop:0 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)}
);
}}
"""
return buf
@ -176,6 +193,28 @@ QTableView {{
QHeaderView::section {{
border: 2px solid {tm.color(colors.WINDOW_BG)};
margin: -1px;
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_GRADIENT_END)}
);
}}
QHeaderView::section:pressed {{
border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
stop:0.1 {tm.color(colors.BUTTON_GRADIENT_START)},
stop:0.9 {tm.color(colors.BUTTON_GRADIENT_END)},
stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
);
}}
QHeaderView::section:hover {{
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
stop:0 {tm.color(colors.BUTTON_HOVER_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_HOVER_GRADIENT_END)}
);
}}
QHeaderView::section:first {{
border-top: 2px solid {tm.color(colors.WINDOW_BG)};
@ -225,6 +264,30 @@ QSpinBox::down-button {{
subcontrol-origin: border;
width: 16px;
border: 1px solid {tm.color(colors.BUTTON_BORDER)};
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_END)}
);
}}
QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed {{
border: 1px solid {tm.color(colors.BUTTON_PRESSED_BORDER)};
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
stop:0.1 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_START)},
stop:0.9 {tm.color(colors.BUTTON_PRIMARY_GRADIENT_END)},
stop:1 {tm.color(colors.BUTTON_PRESSED_SHADOW)},
);
}}
QSpinBox::up-button:hover,
QSpinBox::down-button:hover {{
background: qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
stop:0 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)},
stop:1 {tm.color(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)}
);
}}
QSpinBox::up-button {{
margin-bottom: -1px;
@ -237,10 +300,10 @@ QSpinBox::down-button {{
border-bottom-right-radius: 5px;
}}
QSpinBox::up-arrow {{
image: url(icons:menu-up.svg);
image: url(icons:chevron-up.svg);
}}
QSpinBox::down-arrow {{
image: url(icons:menu-down.svg);
image: url(icons:chevron-down.svg);
}}
QSpinBox::up-arrow,
QSpinBox::down-arrow,
@ -273,6 +336,9 @@ QScrollBar::handle {{
}}
QScrollBar::handle:hover {{
background-color: {tm.color(colors.SCROLLBAR_HOVER_BG)};
}}
QScrollBar::handle:pressed {{
background-color: {tm.color(colors.SCROLLBAR_ACTIVE_BG)};
}}
QScrollBar:horizontal {{
height: 12px;

4
sass/_fusion-vars.scss
View file

@ -1,7 +1,7 @@
/* night-mode-specific colours */
$button-gradient-start: #3f3f3f;
$button-gradient-end: #363636;
$button-outline: #212121;
$button-outline: #2f2f31;
$button-hover-bg: #404040;
$button-border: #212121;
$button-border: #2f2f31;
$button-base-bg: #343434;

18
sass/_vars.scss
View file

@ -39,12 +39,16 @@
--focus-border: #0969da;
--focus-shadow: rgba(9 105 218 / 0.3);
--code-bg: white;
--button-primary-gradient-start: #69b3fa;
--button-primary-gradient-end: #087fff;
--button-primary-hover-gradient-start: #69b3fa;
--button-primary-hover-gradient-end: #087fff;
--button-gradient-start: white;
--button-gradient-end: #f6f6f6;
--button-hover-gradient-start: #f4f4f4;
--button-hover-gradient-end: #efefef;
--button-hover-gradient-start: #fefefe;
--button-hover-gradient-end: #f1f1f1;
--button-pressed-shadow: #555;
--button-border: #aaa;
--button-border: #666;
--button-pressed-border: #8f8f8f;
--scrollbar-bg: #d8d8d8;
--scrollbar-hover-bg: #d0d0d0;
@ -55,7 +59,7 @@
--text-fg: white;
--window-bg: #2f2f31;
--frame-bg: #3a3a3a;
--border: #4a4a4a;
--border: #1f1f1f;
--medium-border: #444;
--faint-border: #29292b;
--link: #77ccff;
@ -64,7 +68,7 @@
--learn-count: #ff935b;
--zero-count: #444;
--slightly-grey-text: #ccc;
--highlight-bg: #77ccff;
--highlight-bg: #1e95df;
--highlight-fg: white;
--disabled: #777;
--flag1-fg: #ff7b7b;
@ -89,6 +93,10 @@
--focus-border: #316dca;
--focus-shadow: #194380;
--code-bg: #272822;
--button-primary-gradient-start: #1769e2;
--button-primary-gradient-end: #014996;
--button-primary-hover-gradient-start: #2877c2;
--button-primary-hover-gradient-end: #0d5db3;
--button-gradient-start: #3f3f3f;
--button-gradient-end: #363636;
--button-hover-gradient-start: #434343;