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%); } } }