From 40a069e0289bd8ed4797456ef75732281f2baf7a Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Tue, 1 Nov 2022 14:04:59 +0100 Subject: [PATCH] Use button gradient only on hover --- qt/aqt/data/web/css/toolbar.scss | 11 ++++-- qt/aqt/stylesheets.py | 63 +++++++++----------------------- sass/_button-mixins.scss | 35 ++++++------------ sass/_vars.scss | 58 ++++++++++------------------- ts/components/LabelButton.svelte | 2 +- ts/components/SpinBox.svelte | 2 +- 6 files changed, 58 insertions(+), 113 deletions(-) diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss index a832c1e7f..40aca21e3 100644 --- a/qt/aqt/data/web/css/toolbar.scss +++ b/qt/aqt/data/web/css/toolbar.scss @@ -15,9 +15,14 @@ border-radius: prop(border-radius); border-bottom-left-radius: prop(border-radius-large); border-bottom-right-radius: prop(border-radius-large); - @include button.base($with-hover: false); - @include elevation.elevation(2); + @include button.base($with-hover: false, $with-active: false); overflow: hidden; + padding: 0; + @include elevation.elevation(1, $opacity-boost: -0.08); + &:hover { + @include elevation.elevation(2); + transition: box-shadow 0.2s linear; + } } body { @@ -37,7 +42,7 @@ body { text-decoration: none; color: color(fg); display: inline-block; - @include button.base($elevation: 0); + @include button.base; border: none; &:first-child { padding-left: 18px; diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py index 81a1939a4..4199039e0 100644 --- a/qt/aqt/stylesheets.py +++ b/qt/aqt/stylesheets.py @@ -4,13 +4,12 @@ from aqt import colors, props from aqt.theme import ThemeManager -def button_gradient(start: str, end: str, shadow: str) -> str: +def button_gradient(start: str, end: str) -> str: return f""" qlineargradient( spread:pad, x1:0.5, y1:0, x2:0.5, y2:1, stop:0 {start}, - stop:0.94 {end} - stop:1 {shadow} + stop:1 {end} ); """ @@ -109,13 +108,7 @@ QPushButton {{ QPushButton, QTabBar::tab:!selected, QComboBox:!editable {{ - background: { - button_gradient( - tm.var(colors.BUTTON_GRADIENT_START), - tm.var(colors.BUTTON_GRADIENT_END), - tm.var(colors.SHADOW) - ) - }; + background: {tm.var(colors.BUTTON_BG)}; border-bottom: 1px solid {tm.var(colors.SHADOW)}; }} QPushButton:hover, @@ -123,9 +116,8 @@ QTabBar::tab:hover, QComboBox:!editable:hover {{ background: { button_gradient( - tm.var(colors.BUTTON_HOVER_GRADIENT_START), - tm.var(colors.BUTTON_HOVER_GRADIENT_END), - tm.var(colors.SHADOW) + tm.var(colors.BUTTON_GRADIENT_START), + tm.var(colors.BUTTON_GRADIENT_END), ) }; }} @@ -202,21 +194,14 @@ QComboBox::down-arrow {{ image: url({tm.themed_icon("mdi:chevron-down")}); }} QComboBox::drop-down {{ - background: { - button_gradient( - tm.var(colors.BUTTON_GRADIENT_START), - tm.var(colors.BUTTON_GRADIENT_END), - tm.var(colors.SHADOW) - ) - }; + background: {tm.var(colors.BUTTON_BG)}; border-bottom: 1px solid {tm.var(colors.SHADOW)}; }} QComboBox::drop-down:hover {{ background: { button_gradient( - tm.var(colors.BUTTON_HOVER_GRADIENT_START), - tm.var(colors.BUTTON_HOVER_GRADIENT_END), - tm.var(colors.SHADOW) + tm.var(colors.BUTTON_GRADIENT_START), + tm.var(colors.BUTTON_GRADIENT_END), ) }; border-bottom: 1px solid {tm.var(colors.SHADOW)}; @@ -262,11 +247,13 @@ QTabBar::tab:last {{ }} QTabBar::tab:selected {{ color: white; + background: {tm.var(colors.BUTTON_PRIMARY_BG)}; +}} +QTabBar::tab:selected:hover {{ background: { - button_gradient( + button_gradient( tm.var(colors.BUTTON_PRIMARY_GRADIENT_START), tm.var(colors.BUTTON_PRIMARY_GRADIENT_END), - tm.var(colors.SHADOW) ) }; }} @@ -286,13 +273,7 @@ QHeaderView {{ }} QHeaderView::section {{ border: 1px solid {tm.var(colors.BORDER_SUBTLE)}; - background: { - button_gradient( - tm.var(colors.BUTTON_GRADIENT_START), - tm.var(colors.BUTTON_GRADIENT_END), - tm.var(colors.SHADOW) - ) - }; + background: {tm.var(colors.BUTTON_BG)}; }} QHeaderView::section:pressed, QHeaderView::section:pressed:!first {{ @@ -308,9 +289,8 @@ QHeaderView::section:pressed:!first {{ QHeaderView::section:hover {{ background: { button_gradient( - tm.var(colors.BUTTON_HOVER_GRADIENT_START), - tm.var(colors.BUTTON_HOVER_GRADIENT_END), - tm.var(colors.SHADOW) + tm.var(colors.BUTTON_GRADIENT_START), + tm.var(colors.BUTTON_GRADIENT_END), ) }; }} @@ -352,13 +332,7 @@ QSpinBox::down-button {{ subcontrol-origin: border; width: 16px; border: 1px solid {tm.var(colors.BORDER_SUBTLE)}; - background: { - button_gradient( - tm.var(colors.BUTTON_GRADIENT_START), - tm.var(colors.BUTTON_GRADIENT_END), - tm.var(colors.SHADOW) - ) - }; + background: {tm.var(colors.BUTTON_BG)}; }} QSpinBox::up-button:pressed, QSpinBox::down-button:pressed {{ @@ -375,9 +349,8 @@ QSpinBox::up-button:hover, QSpinBox::down-button:hover {{ background: { button_gradient( - tm.var(colors.BUTTON_HOVER_GRADIENT_START), - tm.var(colors.BUTTON_HOVER_GRADIENT_END), - tm.var(colors.SHADOW) + tm.var(colors.BUTTON_GRADIENT_START), + tm.var(colors.BUTTON_GRADIENT_END), ) }; }} diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss index 286435962..8e4c25152 100644 --- a/sass/_button-mixins.scss +++ b/sass/_button-mixins.scss @@ -20,45 +20,31 @@ border-bottom-right-radius: var(--border-right-radius); } -@mixin background($primary: false, $elevation: 1, $hover: true) { +@mixin background($primary: false, $hover: true) { @if $primary { - background: linear-gradient( - 180deg, - var(--button-primary-gradient-start) 0%, - var(--button-primary-gradient-end) 100% - ); + background: var(--button-primary-bg); @if $hover { &:hover { background: linear-gradient( 180deg, - var(--button-primary-hover-gradient-start) 0%, - var(--button-primary-hover-gradient-end) 100% + var(--button-primary-gradient-start) 0%, + var(--button-primary-gradient-end) 100% ); border-color: var(--button-hover-border); } } - @if $elevation != 0 { - @include elevation($elevation, 0.2); - } } @else { - background: linear-gradient( - 180deg, - var(--button-gradient-start) 0%, - var(--button-gradient-end) 100% - ); + background: var(--button-bg); @if $hover { &:hover { background: linear-gradient( 180deg, - var(--button-hover-gradient-start) 0%, - var(--button-hover-gradient-end) 100% + var(--button-gradient-start) 0%, + var(--button-gradient-end) 100% ); border-color: var(--button-hover-border); } } - @if $elevation != 0 { - @include elevation($elevation); - } } } @@ -68,8 +54,7 @@ $with-hover: true, $with-active: true, $active-class: "", - $with-disabled: true, - $elevation: 1 + $with-disabled: true ) { -webkit-appearance: none; cursor: pointer; @@ -78,11 +63,12 @@ border: none; } @else { border: 1px solid var(--border-subtle); + border-bottom-color: var(--shadow); } } @else { border: none; } - @include background($primary, $elevation, $hover: $with-hover); + @include background($primary, $hover: $with-hover); @if ($primary) { color: white; @@ -110,6 +96,7 @@ color: var(--fg-disabled); box-shadow: none !important; background-color: var(--button-gradient-end); + border-bottom-color: var(--border-subtle); } } } diff --git a/sass/_vars.scss b/sass/_vars.scss index 73837a541..43f0e7719 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -134,11 +134,11 @@ $vars: ( ), ), button: ( - disabled: ( - "Background color of disabled buttons", + bg: ( + "Background color of buttons", ( - light: color.scale(palette(lightgray, 5), $alpha: -50%), - dark: color.scale(palette(darkgray, 3), $alpha: -50%), + light: white, + dark: palette(darkgray, 4), ), ), gradient: ( @@ -158,22 +158,6 @@ $vars: ( ), ), hover: ( - gradient: ( - start: ( - "Start value of default button gradient in hover state", - ( - light: palette(lightgray, 1), - dark: palette(darkgray, 3), - ), - ), - end: ( - "End value of default button gradient in hover state", - ( - light: palette(lightgray, 2), - dark: palette(darkgray, 4), - ), - ), - ), border: ( "Border color of default button in hover state", ( @@ -182,7 +166,21 @@ $vars: ( ), ), ), + disabled: ( + "Background color of disabled button", + ( + light: color.scale(palette(lightgray, 5), $alpha: -50%), + dark: color.scale(palette(darkgray, 3), $alpha: -50%), + ), + ), primary: ( + bg: ( + "Background color of primary button", + ( + light: palette(blue, 4), + dark: color.scale(palette(blue, 6), $saturation: -10%), + ), + ), gradient: ( start: ( "Start value of primary button gradient", @@ -199,26 +197,8 @@ $vars: ( ), ), ), - hover: ( - gradient: ( - start: ( - "Start value of primary button gradient in hover state", - ( - light: palette(blue, 3), - dark: color.scale(palette(blue, 5), $saturation: -10%), - ), - ), - end: ( - "End value of primary button gradient in hover state", - ( - light: palette(blue, 5), - dark: color.scale(palette(blue, 7), $saturation: -10%), - ), - ), - ), - ), disabled: ( - "Background of primary button in disabled state", + "Background color of primary button in disabled state", ( light: palette(blue, 3), dark: color.scale(palette(blue, 5), $saturation: -10%), diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte index 2b0af551e..f0810e453 100644 --- a/ts/components/LabelButton.svelte +++ b/ts/components/LabelButton.svelte @@ -39,7 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html