From 414ff5db1ca2beff3a4da634405f7a7c38ed8c59 Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Thu, 8 Sep 2022 12:44:38 +0200 Subject: [PATCH] Redesign Qt widgets with stylesheets (#2050) * Remove --medium-border variable * Implement color palette using Sass maps I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette. Significant changes: - light theme is brighter - dark theme is darker - borders are softer I also deleted some platform- and night-mode-specific code. * Use custom colors for note view switch * Use same placeholder color for all inputs * Skew color palette for more dark values by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones. * Adjust frame- window- and border colors * Give deck browser entries --frame-bg as background color * Define styling for QComboBox and QLineEdit globally * Experiment with CSS filter for inline-colors Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme. * Use different map structure for _vars.scss after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871 * Move custom QLineEdit styles out of searchbar.py * Merge branch 'main' into color-palette * Revert QComboBox stylesheet override * Align gray color palette more with macOS * Adjust light theme * Add custom styling for Qt controls * Use --slightly-grey-text for options tab color * Replace gray tones with more neutral values * Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. * Saturate highlight-bg in light theme * Tweak gray tones * Adjust box-shadow of EditingArea to make fields look inset * Add Sass functions to access color palette and semantic variables in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076 * Showcase use of access functions in several locations @hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."? * Fix focus box shadow transition and remove default shadow for a cleaner look I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing. * Tweak light theme border and shadow colors * Add functions and colors to base_lib * Add vars_lib as dependency to base_lib and button_mixins_lib * Improve uses of default-themed variables * Use old --frame-bg color and use darker tone for canvas-default * Return CSS var by default and add palette-of function for raw value * Showcase use of palette-of function The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice. * Light theme: decrease brightness of canvas-default and adjust fg-default * Use canvas-inset variable for switch knob * Adjust light theme * Add back box-shadow to EditingArea * Light theme: darken background and flatten transition also set hue and saturation of gray-8 to 0 (like all the other grays). * Reduce flag colors to single default value * Tweak card/note accent colors * Experiment with inset look for fields again Is this too dark in night mode? It's the same color used for all other text inputs. * Dark theme: make border-default one shade darker * Tweak inset shadow color * Dark theme: make border-faint darker than canvas-default meaning two shades darker than it currently was. * Fix PlainTextInput not expanding * Dark theme: use less saturated flag colors * Adjust gray tones * Create stylesheet overrides for various Qt widgets Including QPushButton, QComboBox, QSpinBox, QLineEdit, QListWidget, QTabWidget, QTreeWidget, QToolTip, QTableView, QScrollBar and sub-widgets. * Make webview scrollbar look identical to Qt one * Add blue colors for primary buttons * Tweak disabled state of SpinBox button * Apply styles to all platforms mainly so people like @hgiesel can easily test the widget style overrides, but maybe you actually prefer them over the native ones, who knows :) * Tweak webview button borders * Add type annotations to eventFilter * Adjust padding of QComboBox and its drop-down arrow * Use isinstance for comparison * Remove reimport of Any * Revert "Merge branch 'redesign-test' into custom-qt-controls" This reverts commit ff36297456b693a0d4b4b69f5f487ac1a01c1861, reversing changes made to 6bb45355d143aa081d2d643933bd02ddc43206de. * Add missing copyright header * Left-align QTabWidget headers * Exclude macOS from stylesheet overrides * Fix failure to start on macOS (dae) * Use standard macOS theme in dark mode (dae) I believe this was originally behind a feature flag because the user had to use a hack to get it to work (https://forums.ankiweb.net/t/title-bar-dark-mode-fix-broken/1189), and it did not work correctly when the system theme was changed. Since the introduction of libankihelper and the app automatically updating as the system theme changes, these issues no longer seem to exist, and switching between light and dark appears to work consistently. Pushed into this PR because it addresses the background color issue mentioned in code review. Closes #2054 --- qt/aqt/__init__.py | 20 ++ qt/aqt/browser/sidebar/searchbar.py | 24 -- qt/aqt/browser/sidebar/tree.py | 1 - qt/aqt/data/qt/icons/BUILD.bazel | 4 + qt/aqt/data/qt/icons/chevron-down.svg | 3 + qt/aqt/data/qt/icons/chevron-up.svg | 3 + qt/aqt/data/web/css/webview.scss | 5 +- qt/aqt/profiles.py | 3 - qt/aqt/stylesheets.py | 399 ++++++++++++++++++++++++++ qt/aqt/theme.py | 81 ++---- sass/_button-mixins.scss | 38 +-- sass/_fusion-vars.scss | 12 +- sass/_vars.scss | 34 ++- sass/base.scss | 5 +- sass/buttons.scss | 1 - sass/scrollbar.scss | 19 +- ts/editable/editable-base.scss | 4 +- ts/editor/legacy.scss | 14 +- 18 files changed, 529 insertions(+), 141 deletions(-) create mode 100644 qt/aqt/data/qt/icons/chevron-down.svg create mode 100644 qt/aqt/data/qt/icons/chevron-up.svg create mode 100644 qt/aqt/stylesheets.py diff --git a/qt/aqt/__init__.py b/qt/aqt/__init__.py index 47a8a0feb..f3ea4fad6 100644 --- a/qt/aqt/__init__.py +++ b/qt/aqt/__init__.py @@ -282,6 +282,7 @@ class AnkiApp(QApplication): def __init__(self, argv: list[str]) -> None: QApplication.__init__(self, argv) + self.installEventFilter(self) self._argv = argv def secondInstance(self) -> bool: @@ -340,6 +341,25 @@ class AnkiApp(QApplication): return True return QApplication.event(self, evt) + # Global cursor: pointer for Qt buttons + ################################################## + + def eventFilter(self, src: Any, evt: QEvent) -> bool: + if evt.type() == QEvent.Type.HoverEnter: + if isinstance(src, QPushButton): + # TODO: apply drop-shadow with setGraphicsEffect(QGraphicsDropShadowEffect) + # issue: can't access attributes of QClassProxy (Qt5-compat) + self.setOverrideCursor(QCursor(Qt.CursorShape.PointingHandCursor)) + else: + self.restoreOverrideCursor() + return False + + elif evt.type() == QEvent.Type.HoverLeave or isinstance(evt, QCloseEvent): + self.restoreOverrideCursor() + return False + + return False + def parseArgs(argv: list[str]) -> tuple[argparse.Namespace, list[str]]: "Returns (opts, args)." diff --git a/qt/aqt/browser/sidebar/searchbar.py b/qt/aqt/browser/sidebar/searchbar.py index d8f11f6ee..b73d90f12 100644 --- a/qt/aqt/browser/sidebar/searchbar.py +++ b/qt/aqt/browser/sidebar/searchbar.py @@ -6,9 +6,7 @@ from __future__ import annotations import aqt import aqt.browser import aqt.gui_hooks -from aqt import colors from aqt.qt import * -from aqt.theme import theme_manager class SidebarSearchBar(QLineEdit): @@ -20,29 +18,10 @@ class SidebarSearchBar(QLineEdit): self.timer.setInterval(600) self.timer.setSingleShot(True) self.setFrame(False) - self.setup_style() qconnect(self.timer.timeout, self.onSearch) qconnect(self.textChanged, self.onTextChanged) - aqt.gui_hooks.theme_did_change.append(self.setup_style) - - def setup_style(self) -> None: - styles = [ - "padding: 2px", - f"border: 1px solid {theme_manager.color(colors.BORDER)}", - "border-radius: 5px", - ] - - self.setStyleSheet( - "QLineEdit { %s }" % ";".join(styles) - + f""" -QLineEdit:focus {{ - border: 1px solid {theme_manager.color(colors.FOCUS_BORDER)}; -}} - """ - ) - def onTextChanged(self, text: str) -> None: if not self.timer.isActive(): self.timer.start() @@ -57,6 +36,3 @@ QLineEdit:focus {{ self.onSearch() else: QLineEdit.keyPressEvent(self, evt) - - def cleanup(self) -> None: - aqt.gui_hooks.theme_did_change.remove(self.setup_style) diff --git a/qt/aqt/browser/sidebar/tree.py b/qt/aqt/browser/sidebar/tree.py index d173d65e0..cbdaca784 100644 --- a/qt/aqt/browser/sidebar/tree.py +++ b/qt/aqt/browser/sidebar/tree.py @@ -116,7 +116,6 @@ class SidebarTreeView(QTreeView): def cleanup(self) -> None: self.toolbar.cleanup() - self.searchBar.cleanup() gui_hooks.flag_label_did_change.remove(self.refresh) gui_hooks.theme_did_change.remove(self._setup_style) diff --git a/qt/aqt/data/qt/icons/BUILD.bazel b/qt/aqt/data/qt/icons/BUILD.bazel index bf5c44ba4..1043ca7d3 100644 --- a/qt/aqt/data/qt/icons/BUILD.bazel +++ b/qt/aqt/data/qt/icons/BUILD.bazel @@ -33,6 +33,10 @@ copy_mdi_icons( # tags "tag-outline.svg", "tag-off-outline.svg", + + # 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/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss index 71a377303..f96d5f65b 100644 --- a/qt/aqt/data/web/css/webview.scss +++ b/qt/aqt/data/web/css/webview.scss @@ -17,6 +17,7 @@ body { transition: opacity 0.5s ease-out; margin: 2em; overscroll-behavior: none; + @include scrollbar.custom; } a { @@ -27,7 +28,3 @@ a { h1 { margin-bottom: 0.2em; } - -.night-mode { - @include scrollbar.night-mode; -} diff --git a/qt/aqt/profiles.py b/qt/aqt/profiles.py index 75cc87cde..b3f8fe2d6 100644 --- a/qt/aqt/profiles.py +++ b/qt/aqt/profiles.py @@ -542,9 +542,6 @@ create table if not exists profiles def set_theme(self, theme: Theme) -> None: self.meta["theme"] = theme.value - def dark_mode_widgets(self) -> bool: - return self.meta.get("dark_mode_widgets", False) - def legacy_import_export(self) -> bool: return self.meta.get("legacy_import", False) diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py new file mode 100644 index 000000000..5a27df1e8 --- /dev/null +++ b/qt/aqt/stylesheets.py @@ -0,0 +1,399 @@ +# Copyright: Ankitects Pty Ltd and contributors +# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +from aqt import colors +from aqt.theme import ThemeManager + + +def general_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QFrame {{ + background: none; +}} +QPushButton, +QComboBox, +QSpinBox, +QLineEdit, +QListWidget, +QTreeWidget, +QListView {{ + border: 1px solid {tm.color(colors.BORDER)}; + border-radius: 5px; +}} +QLineEdit {{ + padding: 2px; +}} +QLineEdit:focus {{ + border-color: {tm.color(colors.FOCUS_BORDER)}; +}} +QPushButton {{ + margin-top: 1px; +}} +QPushButton, +QComboBox, +QSpinBox {{ + padding: 2px 6px; +}} +QToolTip {{ + background: {tm.color(colors.TOOLTIP_BG)}; +}} + """ + return buf + + +def button_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QPushButton, +QComboBox:!editable {{ + 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)} + ); + +}} +QPushButton: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 + + +def combobox_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QComboBox {{ + padding: 1px 4px 2px 6px; +}} +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 {{ + margin: -1px; + subcontrol-origin: padding; + padding: 2px; + width: 16px; + subcontrol-position: top right; + border: 1px solid {tm.color(colors.BUTTON_BORDER)}; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +}} +QComboBox::down-arrow {{ + 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 + + +def tabwidget_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QTabWidget {{ + border-radius: 5px; + border: none; + background: none; +}} +QTabWidget::pane {{ + border: 1px solid {tm.color(colors.FRAME_BG)}; + border-radius: 5px; + background: {tm.color(colors.FRAME_BG)}; +}} +QTabBar::tab {{ + background: none; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + padding: 5px 10px; + margin-bottom: 0px; +}} +QTabBar::tab:!selected:hover, +QTabBar::tab:selected {{ + background: {tm.color(colors.FRAME_BG)}; +}} +QTabBar::tab:selected {{ + margin-bottom: -1px; +}} +QTabBar::tab:!selected {{ + margin-top: 5px; + background: {tm.color(colors.WINDOW_BG)}; +}} +QTabBar::tab {{ + min-width: 8ex; + padding: 5px 10px 5px 10px; +}} +QTabBar::tab:selected {{ + border-bottom-color: none; +}} +QTabBar::tab:bottom:selected {{ + border-top-color: none; +}} +QTabBar::tab:previous-selected {{ + border-top-left-radius: 0; +}} +QTabBar::tab:next-selected {{ + border-top-right-radius: 0; +}} + """ + return buf + + +def table_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QTableView {{ + margin: -1px -1px 1px -1px; + background: none; + border: 2px solid {tm.color(colors.WINDOW_BG)}; + border-radius: 5px; +}} +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)}; + border-left: 2px solid {tm.color(colors.WINDOW_BG)}; + border-top-left-radius: 5px; +}} +QHeaderView::section:!first {{ + border-left: none; +}} +QHeaderView::section:last {{ + border-top: 2px solid {tm.color(colors.WINDOW_BG)}; + border-right: 2px solid {tm.color(colors.WINDOW_BG)}; + border-top-right-radius: 5px; +}} +QHeaderView::section:next-selected {{ + border-right: none; +}} +QHeaderView::section:previous-selected {{ + border-left: none; +}} +QHeaderView::section:only-one {{ + border-left: 2px solid {tm.color(colors.WINDOW_BG)}; + border-top: 2px solid {tm.color(colors.WINDOW_BG)}; + border-right: 2px solid {tm.color(colors.WINDOW_BG)}; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +}} +QHeaderView::up-arrow, +QHeaderView::down-arrow {{ + width: 20px; + height: 20px; +}} +QHeaderView::up-arrow {{ + image: url(icons:menu-up.svg); +}} +QHeaderView::down-arrow {{ + image: url(icons:menu-down.svg); +}} + """ + return buf + + +def spinbox_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QSpinBox::up-button, +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; + subcontrol-position: top right; + border-top-right-radius: 5px; +}} +QSpinBox::down-button {{ + margin-top: -1px; + subcontrol-position: bottom right; + border-bottom-right-radius: 5px; +}} +QSpinBox::up-arrow {{ + image: url(icons:chevron-up.svg); +}} +QSpinBox::down-arrow {{ + image: url(icons:chevron-down.svg); +}} +QSpinBox::up-arrow, +QSpinBox::down-arrow, +QSpinBox::up-arrow:pressed, +QSpinBox::down-arrow:pressed, +QSpinBox::up-arrow:disabled:hover, QSpinBox::up-arrow:off:hover, +QSpinBox::down-arrow:disabled:hover, QSpinBox::down-arrow:off:hover {{ + width: 16px; + height: 16px; +}} +QSpinBox::up-arrow:hover, +QSpinBox::down-arrow:hover {{ + width: 20px; + height: 20px; +}} +QSpinBox::up-button:disabled, QSpinBox::up-button:off, +QSpinBox::down-button:disabled, QSpinBox::down-button:off {{ + background: {tm.color(colors.BUTTON_PRIMARY_DISABLED)}; +}} + """ + return buf + + +def scrollbar_styles(tm: ThemeManager, buf: str) -> str: + buf += f""" +QAbstractScrollArea::corner {{ + background: none; + border: none; +}} +QScrollBar {{ + background-color: {tm.color(colors.WINDOW_BG)}; +}} +QScrollBar::handle {{ + border-radius: 5px; + background-color: {tm.color(colors.SCROLLBAR_BG)}; +}} +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; +}} +QScrollBar::handle:horizontal {{ + min-width: 50px; +}} +QScrollBar:vertical {{ + width: 12px; +}} +QScrollBar::handle:vertical {{ + min-height: 50px; +}} +QScrollBar::add-line {{ + border: none; + background: none; +}} +QScrollBar::sub-line {{ + border: none; + background: none; +}} + """ + return buf + + +def win10_styles(tm: ThemeManager, buf: str) -> str: + + # day mode is missing a bottom border; background must be + # also set for border to apply + buf += f""" +QMenuBar {{ + border-bottom: 1px solid {tm.color(colors.BORDER)}; + background: {tm.color(colors.WINDOW_BG) if tm.night_mode else "white"}; +}} + """ + + # qt bug? setting the above changes the browser sidebar + # to white as well, so set it back + buf += f""" +QTreeWidget {{ + background: {tm.color(colors.WINDOW_BG)}; +}} + """ + + if tm.night_mode: + buf += """ +QToolTip { + border: 0; +} + """ + return buf diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py index 36b536d59..c4393be01 100644 --- a/qt/aqt/theme.py +++ b/qt/aqt/theme.py @@ -60,7 +60,7 @@ class ThemeManager: DARK_MODE_BUTTON_BG_MIDPOINT = "#555555" def macos_dark_mode(self) -> bool: - "True if the user has night mode on, and has forced native widgets." + "True if the user has night mode on." if not is_mac: return False @@ -70,9 +70,7 @@ class ThemeManager: if self._dark_mode_available is None: self._dark_mode_available = set_macos_dark_mode(True) - from aqt import mw - - return self._dark_mode_available and mw.pm.dark_mode_widgets() + return self._dark_mode_available def get_night_mode(self) -> bool: return self._night_mode_preference @@ -189,59 +187,32 @@ class ThemeManager: def _apply_style(self, app: QApplication) -> None: buf = "" + if not is_mac: + from aqt.stylesheets import ( + button_styles, + combobox_styles, + general_styles, + scrollbar_styles, + spinbox_styles, + table_styles, + tabwidget_styles, + win10_styles, + ) + + buf += "".join( + [ + general_styles(self, buf), + button_styles(self, buf), + combobox_styles(self, buf), + tabwidget_styles(self, buf), + table_styles(self, buf), + spinbox_styles(self, buf), + scrollbar_styles(self, buf), + ] + ) if is_win and platform.release() == "10": - # day mode is missing a bottom border; background must be - # also set for border to apply - buf += f""" -QMenuBar {{ - border-bottom: 1px solid {self.color(colors.BORDER)}; - background: {self.color(colors.WINDOW_BG) if self.night_mode else "white"}; -}} -""" - # qt bug? setting the above changes the browser sidebar - # to white as well, so set it back - buf += f""" -QTreeWidget {{ - background: {self.color(colors.WINDOW_BG)}; -}} - """ - - if self.night_mode: - buf += """ -QToolTip { - border: 0; -} - """ - - if not self.macos_dark_mode(): - buf += """ -QScrollBar {{ background-color: {}; }} -QScrollBar::handle {{ background-color: {}; border-radius: 5px; }} - -QScrollBar:horizontal {{ height: 12px; }} -QScrollBar::handle:horizontal {{ min-width: 50px; }} - -QScrollBar:vertical {{ width: 12px; }} -QScrollBar::handle:vertical {{ min-height: 50px; }} - -QScrollBar::add-line {{ - border: none; - background: none; -}} - -QScrollBar::sub-line {{ - border: none; - background: none; -}} - -QTabWidget {{ background-color: {}; }} -""".format( - self.color(colors.WINDOW_BG), - # fushion-button-hover-bg - "#656565", - self.color(colors.WINDOW_BG), - ) + buf += win10_styles(self, buf) # allow addons to modify the styling buf = gui_hooks.style_did_init(buf) diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss index aa7f74961..6dc2e186f 100644 --- a/sass/_button-mixins.scss +++ b/sass/_button-mixins.scss @@ -1,6 +1,7 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ @use "fusion-vars"; +@use "sass:color"; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @@ -26,12 +27,7 @@ $btn-base-color-day: white; border-color: var(--medium-border) !important; } -@mixin btn-day( - $with-hover: true, - $with-active: true, - $with-disabled: true, - $with-margin: true -) { +@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true) { .btn-day { @include btn-day-base; @content ($btn-base-color-day); @@ -39,7 +35,7 @@ $btn-base-color-day: white; @if ($with-hover) { &:hover, &.hover { - background-color: darken($btn-base-color-day, 8%); + background-color: color.scale($btn-base-color-day, $lightness: -20%); } } @@ -60,10 +56,6 @@ $btn-base-color-day: white; box-shadow: none !important; } } - - @if ($with-margin) { - margin-left: -1px; - } } } @@ -72,23 +64,17 @@ $btn-base-color-night: fusion-vars.$button-border; @mixin btn-night-base { color: var(--text-fg); background: linear-gradient( - 0deg, + 180deg, fusion-vars.$button-gradient-start 0%, fusion-vars.$button-gradient-end 100% ); } -@mixin btn-night( - $with-hover: true, - $with-active: true, - $with-disabled: true, - $with-margin: true -) { +@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true) { .btn-night { @include btn-night-base; @content ($btn-base-color-night); - box-shadow: 0 0 3px fusion-vars.$button-outline; border: 1px solid fusion-vars.$button-border; -webkit-appearance: none; @@ -96,11 +82,11 @@ $btn-base-color-night: fusion-vars.$button-border; &:hover, &.hover { background: linear-gradient( - 0deg, - lighten(fusion-vars.$button-gradient-start, 8%) 0%, - lighten(fusion-vars.$button-gradient-end, 8%) 100% + 180deg, + color.scale(fusion-vars.$button-gradient-start, $lightness: 20%) 0%, + color.scale(fusion-vars.$button-gradient-end, $lightness: 20%) 100% ); - border-color: lighten(fusion-vars.$button-border, 8%); + border-color: color.scale(fusion-vars.$button-border, $lightness: 20%); } } @@ -108,7 +94,7 @@ $btn-base-color-night: fusion-vars.$button-border; &:active, &.active { @include impressed-shadow(0.35); - border-color: darken($btn-base-color-night, 8%); + border-color: color.scale($btn-base-color-night, $lightness: -20%); } &:active.active { @@ -124,10 +110,6 @@ $btn-base-color-night: fusion-vars.$button-border; border-color: $btn-base-color-night !important; } } - - @if ($with-margin) { - margin-left: 1px; - } } } diff --git a/sass/_fusion-vars.scss b/sass/_fusion-vars.scss index 9b91fb531..717d3450d 100644 --- a/sass/_fusion-vars.scss +++ b/sass/_fusion-vars.scss @@ -1,7 +1,7 @@ /* night-mode-specific colours */ -$button-gradient-start: #555555; -$button-gradient-end: #656565; -$button-outline: #222222; -$button-hover-bg: #656565; -$button-border: #646464; -$button-base-bg: #454545; +$button-gradient-start: #3f3f3f; +$button-gradient-end: #363636; +$button-outline: #202020; +$button-hover-bg: #404040; +$button-border: #202020; +$button-base-bg: #343434; diff --git a/sass/_vars.scss b/sass/_vars.scss index 1a2efce62..d0b1ab343 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -39,13 +39,28 @@ --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-primary-disabled: #8fc5fc; + --button-gradient-start: white; + --button-gradient-end: #f6f6f6; + --button-hover-gradient-start: #fefefe; + --button-hover-gradient-end: #f1f1f1; + --button-pressed-shadow: #555; + --button-border: #666; + --button-pressed-border: #8f8f8f; + --scrollbar-bg: #d8d8d8; + --scrollbar-hover-bg: #d0d0d0; + --scrollbar-active-bg: #c8c8c8; } :root[class*="night-mode"] { --text-fg: white; --window-bg: #2f2f31; --frame-bg: #3a3a3a; - --border: #777; + --border: #1f1f1f; --medium-border: #444; --faint-border: #29292b; --link: #77ccff; @@ -54,7 +69,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; @@ -79,5 +94,20 @@ --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-primary-disabled: #4977a1; + --button-gradient-start: #3f3f3f; + --button-gradient-end: #363636; + --button-hover-gradient-start: #434343; + --button-hover-gradient-end: #404040; + --button-pressed-shadow: #232323; + --button-border: #2f2f31; + --button-pressed-border: #0a0a0a; + --scrollbar-bg: #434343; + --scrollbar-hover-bg: #4e4e4e; + --scrollbar-active-bg: #464646; color-scheme: dark; } diff --git a/sass/base.scss b/sass/base.scss index 7b907140e..9dcd6552e 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -34,10 +34,7 @@ $utilities: ( body { overscroll-behavior: none; -} - -.night-mode { - @include scrollbar.night-mode; + @include scrollbar.custom; } button { diff --git a/sass/buttons.scss b/sass/buttons.scss index 413bdc7e4..e79b02310 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -42,7 +42,6 @@ fusion-vars.$button-gradient-start 0%, fusion-vars.$button-gradient-end 100% ); - box-shadow: 0 0 3px fusion-vars.$button-outline; border: 1px solid fusion-vars.$button-border; border-radius: 5px; diff --git a/sass/scrollbar.scss b/sass/scrollbar.scss index e448be308..4b47b91d8 100644 --- a/sass/scrollbar.scss +++ b/sass/scrollbar.scss @@ -4,7 +4,7 @@ @use "vars"; @use "fusion-vars"; -@mixin night-mode { +@mixin custom { ::-webkit-scrollbar { background-color: var(--window-bg); @@ -18,8 +18,8 @@ } ::-webkit-scrollbar-thumb { - background: fusion-vars.$button-hover-bg; - border-radius: 8px; + background: var(--scrollbar-bg); + border-radius: 5px; &:horizontal { min-width: 50px; @@ -28,9 +28,22 @@ &:vertical { min-height: 50px; } + + &:hover { + background: var(--scrollbar-hover-bg); + } + + &:active { + background: var(--scrollbar-active-bg); + } } ::-webkit-scrollbar-corner { background-color: var(--window-bg); } + + ::-webkit-scrollbar-track { + border-radius: 5px; + background-color: transparent; + } } diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss index a0df4e886..ea21d81f4 100644 --- a/ts/editable/editable-base.scss +++ b/ts/editable/editable-base.scss @@ -18,8 +18,8 @@ p { display: none; } -:host(.night-mode) { - @include scrollbar.night-mode; +:host(body) { + @include scrollbar.custom; } pre { diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index 1bf6d591b..817256259 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -1,6 +1,7 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ @use "fusion-vars"; +@use "sass:color"; @use "sass/button-mixins" as button; $btn-base-color-day: white; @@ -17,10 +18,8 @@ $padding: 2px; background-color: $btn-base-color-day; border: 1px solid var(--medium-border); @include button.btn-border-radius; - margin-left: -1px; - &:hover { - background-color: darken($btn-base-color-day, 8%); + background-color: color.scale($btn-base-color-day, $lightness: -20%); } &:active, @@ -29,7 +28,6 @@ $padding: 2px; } .nightMode & { - box-shadow: 0 0 3px fusion-vars.$button-outline; border: 1px solid fusion-vars.$button-border; -webkit-appearance: none; background: linear-gradient( @@ -43,15 +41,15 @@ $padding: 2px; &:hover { background: linear-gradient( 0deg, - lighten(fusion-vars.$button-gradient-start, 8%) 0%, - lighten(fusion-vars.$button-gradient-end, 8%) 100% + color.scale(fusion-vars.$button-gradient-start, $lightness: 20%) 0%, + color.scale(fusion-vars.$button-gradient-end, $lightness: 20%) 100% ); - border-color: lighten(fusion-vars.$button-border, 8%); + border-color: color.scale(fusion-vars.$button-border, $lightness: 20%); } &:active { @include button.impressed-shadow(0.35); - border-color: darken($btn-base-color-night, 8%); + border-color: color.scale($btn-base-color-night, $lightness: -20%); } } }