8142176f84
* 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 * 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 * Fix nested variables not getting extracted correctly * Rename canvas-outset to canvas-elevated * Light theme: darken canvas-default * Make canvas-elevated a bit darker * Rename variables and use them in various components * Refactor button mixins * Remove fusion vars from Anki * Adjust button gradients * Refactor button mixins * Fix deck browser table td background color * Use color function in buttons.scss * Rework QTabWidget stylesheet * Fix crash on browser open * Perfect QTableView header * Fix bottom toolbar button gradient * Fix focus outline of bottom toolbar buttons * Fix custom webview scrollbar * Fix uses of vars in various webviews The command @use vars as * lead to repeated inclusion of the CSS vars. * Enable primary button color with mixin * Run prettier * Fix Python code style issues * Tweak colors * Lighten scrollbar shades in light theme * Fix code style issues caused by merge * Fix harsh border color in editor caused by leftover --medium-border variables, probably introduced with a merge commit. * Compile Sass before extracting Python colors/props This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values. * Desaturate primary button colors by 10% * Convert accidentally capitalized variable names to lowercase * Simplify color definitions with qcolor function * Remove default border-focus variable * Remove redundant colon * Apply custom scrollbar CSS only on Windows and Linux * Make border-subtle color brighter than background in dark theme * Make border-subtle color a shade brighter in light theme * Use border-subtle for NoteEditor and EditorToolbar border * Small patches
403 lines
10 KiB
Python
403 lines
10 KiB
Python
# Copyright: Ankitects Pty Ltd and contributors
|
|
# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
from aqt import colors, props
|
|
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.var(colors.BORDER)};
|
|
border-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QLineEdit {{
|
|
padding: 2px;
|
|
}}
|
|
QLineEdit:focus {{
|
|
border-color: {tm.var(colors.BORDER_FOCUS)};
|
|
}}
|
|
QPushButton {{
|
|
margin-top: 1px;
|
|
}}
|
|
QPushButton,
|
|
QComboBox,
|
|
QSpinBox {{
|
|
padding: 2px 6px;
|
|
}}
|
|
QToolTip {{
|
|
background: {tm.var(colors.CANVAS_OVERLAY)};
|
|
}}
|
|
"""
|
|
return buf
|
|
|
|
|
|
def button_styles(tm: ThemeManager, buf: str) -> str:
|
|
buf += f"""
|
|
QPushButton,
|
|
QTabBar::tab:!selected,
|
|
QComboBox:!editable {{
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_GRADIENT_END)}
|
|
);
|
|
|
|
}}
|
|
QPushButton:hover,
|
|
QTabBar::tab:hover,
|
|
QComboBox:!editable:hover {{
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1.25,
|
|
stop:0 {tm.var(colors.BUTTON_HOVER_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_HOVER_GRADIENT_END)}
|
|
);
|
|
}}
|
|
QPushButton:pressed,
|
|
QComboBox:!editable:pressed {{
|
|
border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_PRESSED_SHADOW)},
|
|
stop:0.1 {tm.var(colors.BUTTON_GRADIENT_START)},
|
|
stop:0.9 {tm.var(colors.BUTTON_GRADIENT_END)},
|
|
stop:1 {tm.var(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.var(colors.BORDER_FOCUS)};
|
|
}}
|
|
QComboBox:on {{
|
|
border-bottom: none;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}}
|
|
QComboBox::item {{
|
|
color: {tm.var(colors.FG)};
|
|
background: {tm.var(colors.CANVAS_ELEVATED)};
|
|
}}
|
|
|
|
QComboBox::item:selected {{
|
|
background: {tm.var(colors.HIGHLIGHT_BG)};
|
|
color: {tm.var(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.var(colors.BUTTON_BORDER)};
|
|
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
border-bottom-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
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.var(colors.BUTTON_PRIMARY_GRADIENT_START)},
|
|
stop:1 {tm.var(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.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)}
|
|
);
|
|
}}
|
|
"""
|
|
return buf
|
|
|
|
|
|
def tabwidget_styles(tm: ThemeManager, buf: str) -> str:
|
|
buf += f"""
|
|
QTabWidget {{
|
|
border-radius: {tm.var(props.BORDER_RADIUS)};
|
|
background: none;
|
|
}}
|
|
QTabWidget::pane {{
|
|
top: -15px;
|
|
padding-top: 1em;
|
|
background: {tm.var(colors.CANVAS_ELEVATED)};
|
|
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QTabWidget::tab-bar {{
|
|
alignment: center;
|
|
}}
|
|
QTabBar::tab {{
|
|
background: none;
|
|
padding: 4px 8px;
|
|
min-width: 8ex;
|
|
}}
|
|
QTabBar::tab {{
|
|
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
}}
|
|
QTabBar::tab:first {{
|
|
border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
|
|
border-bottom-left-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QTabBar::tab:!first {{
|
|
margin-left: -1px;
|
|
}}
|
|
QTabBar::tab:last {{
|
|
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
border-bottom-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QTabBar::tab:selected {{
|
|
color: white;
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)}
|
|
);
|
|
}}
|
|
"""
|
|
return buf
|
|
|
|
|
|
def table_styles(tm: ThemeManager, buf: str) -> str:
|
|
buf += f"""
|
|
QTableView {{
|
|
background: none;
|
|
top: 2px;
|
|
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-radius: {tm.var(props.BORDER_RADIUS)};
|
|
gridline-color: {tm.var(colors.BORDER_SUBTLE)};
|
|
}}
|
|
QHeaderView {{
|
|
background: {tm.var(colors.CANVAS)};
|
|
}}
|
|
QHeaderView::section {{
|
|
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_GRADIENT_END)}
|
|
);
|
|
}}
|
|
QHeaderView::section:pressed {{
|
|
border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_PRESSED_SHADOW)},
|
|
stop:0.1 {tm.var(colors.BUTTON_GRADIENT_START)},
|
|
stop:0.9 {tm.var(colors.BUTTON_GRADIENT_END)},
|
|
stop:1 {tm.var(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.var(colors.BUTTON_HOVER_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_HOVER_GRADIENT_END)}
|
|
);
|
|
}}
|
|
QHeaderView::section:first {{
|
|
margin-left: -1px;
|
|
border-top: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QHeaderView::section:!first {{
|
|
border-left: none;
|
|
}}
|
|
QHeaderView::section:last {{
|
|
border-top: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-right: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QHeaderView::section:next-selected {{
|
|
border-right: none;
|
|
}}
|
|
QHeaderView::section:previous-selected {{
|
|
border-left: none;
|
|
}}
|
|
QHeaderView::section:only-one {{
|
|
border-left: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-top: 1px solid {tm.var(colors.BORDER_SUBTLE)};
|
|
border-right: 1px solid {tm.var(colors.CANVAS)};
|
|
border-top-left-radius: {tm.var(props.BORDER_RADIUS)};
|
|
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
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.var(colors.BUTTON_BORDER)};
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)}
|
|
);
|
|
}}
|
|
QSpinBox::up-button:pressed,
|
|
QSpinBox::down-button:pressed {{
|
|
border: 1px solid {tm.var(colors.BUTTON_PRESSED_BORDER)};
|
|
background: qlineargradient(
|
|
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
|
|
stop:0 {tm.var(colors.BUTTON_PRESSED_SHADOW)},
|
|
stop:0.1 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_START)},
|
|
stop:0.9 {tm.var(colors.BUTTON_PRIMARY_GRADIENT_END)},
|
|
stop:1 {tm.var(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.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_START)},
|
|
stop:1 {tm.var(colors.BUTTON_PRIMARY_HOVER_GRADIENT_END)}
|
|
);
|
|
}}
|
|
QSpinBox::up-button {{
|
|
margin-bottom: -1px;
|
|
subcontrol-position: top right;
|
|
border-top-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
QSpinBox::down-button {{
|
|
margin-top: -1px;
|
|
subcontrol-position: bottom right;
|
|
border-bottom-right-radius: {tm.var(props.BORDER_RADIUS)};
|
|
}}
|
|
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.var(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.var(colors.CANVAS)};
|
|
}}
|
|
QScrollBar::handle {{
|
|
border-radius: {tm.var(props.BORDER_RADIUS)};
|
|
background-color: {tm.var(colors.SCROLLBAR_BG)};
|
|
}}
|
|
QScrollBar::handle:hover {{
|
|
background-color: {tm.var(colors.SCROLLBAR_BG_HOVER)};
|
|
}}
|
|
QScrollBar::handle:pressed {{
|
|
background-color: {tm.var(colors.SCROLLBAR_BG_ACTIVE)};
|
|
}}
|
|
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.var(colors.BORDER)};
|
|
background: {tm.var(colors.CANVAS) 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.var(colors.CANVAS)};
|
|
}}
|
|
"""
|
|
|
|
if tm.night_mode:
|
|
buf += """
|
|
QToolTip {
|
|
border: 0;
|
|
}
|
|
"""
|
|
return buf
|