From b4101d9d9766dce931f07a0342d6915f45e2164d Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 4 Sep 2022 13:38:30 +0200 Subject: [PATCH] Add blue colors for primary buttons --- qt/aqt/data/qt/icons/BUILD.bazel | 2 +- qt/aqt/data/qt/icons/chevron-down.svg | 3 + qt/aqt/data/qt/icons/chevron-up.svg | 3 + qt/aqt/stylesheets.py | 136 +++++++++++++++++++------- sass/_fusion-vars.scss | 4 +- sass/_vars.scss | 18 +++- 6 files changed, 123 insertions(+), 43 deletions(-) create mode 100644 qt/aqt/data/qt/icons/chevron-down.svg create mode 100644 qt/aqt/data/qt/icons/chevron-up.svg diff --git a/qt/aqt/data/qt/icons/BUILD.bazel b/qt/aqt/data/qt/icons/BUILD.bazel index 70593727c..1043ca7d3 100644 --- a/qt/aqt/data/qt/icons/BUILD.bazel +++ b/qt/aqt/data/qt/icons/BUILD.bazel @@ -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", ], diff --git a/qt/aqt/data/qt/icons/chevron-down.svg b/qt/aqt/data/qt/icons/chevron-down.svg new file mode 100644 index 000000000..7bd900144 --- /dev/null +++ b/qt/aqt/data/qt/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/qt/aqt/data/qt/icons/chevron-up.svg b/qt/aqt/data/qt/icons/chevron-up.svg new file mode 100644 index 000000000..19bdb1440 --- /dev/null +++ b/qt/aqt/data/qt/icons/chevron-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py index d61fdb456..063018614 100644 --- a/qt/aqt/stylesheets.py +++ b/qt/aqt/stylesheets.py @@ -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; diff --git a/sass/_fusion-vars.scss b/sass/_fusion-vars.scss index e19f28bb4..0a89e451f 100644 --- a/sass/_fusion-vars.scss +++ b/sass/_fusion-vars.scss @@ -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; diff --git a/sass/_vars.scss b/sass/_vars.scss index d406a4a80..d36835a65 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -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;