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

Merge branch 'main' into collapsible-patch

Browse source
This commit is contained in:
Matthias Metelka 2022-09-09 19:22:55 +02:00 committed by GitHub
commit 6929af6d43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 529 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
qt/aqt/__init__.py
View file

@ -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)."

24
qt/aqt/browser/sidebar/searchbar.py
View file

@ -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)

1
qt/aqt/browser/sidebar/tree.py
View file

@ -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)

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

@ -33,6 +33,10 @@ copy_mdi_icons(
# tags
"tag-outline.svg",
"tag-off-outline.svg",
# 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

5
qt/aqt/data/web/css/webview.scss
View file

@ -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;
}

3
qt/aqt/profiles.py
View file

@ -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)

399
qt/aqt/stylesheets.py Normal file
View file

@ -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

81
qt/aqt/theme.py
View file

@ -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)

38
sass/_button-mixins.scss
View file

@ -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;
}
}
}

12
sass/_fusion-vars.scss
View file

@ -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;

34
sass/_vars.scss
View file

@ -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;
}

5
sass/base.scss
View file

@ -34,10 +34,7 @@ $utilities: (
body {
overscroll-behavior: none;
}
.night-mode {
@include scrollbar.night-mode;
@include scrollbar.custom;
}
button {

1
sass/buttons.scss
View file

@ -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;

19
sass/scrollbar.scss
View file

@ -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;
}
}

4
ts/editable/editable-base.scss
View file

@ -18,8 +18,8 @@ p {
display: none;
}
:host(.night-mode) {
@include scrollbar.night-mode;
:host(body) {
@include scrollbar.custom;
}
pre {

14
ts/editor/legacy.scss
View file

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