From 0645aef8c65ab2cb0b97558006509ceeb6c4660b Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Fri, 21 Oct 2022 00:55:30 +0200 Subject: [PATCH] Tweak main window styles --- qt/aqt/data/web/css/deckbrowser.scss | 30 ++++++++++++++++------- qt/aqt/data/web/css/overview.scss | 4 +++- qt/aqt/data/web/css/toolbar.scss | 5 +++- qt/aqt/stylesheets.py | 2 +- sass/_button-mixins.scss | 36 +++++++++++++++------------- sass/_vars.scss | 25 ++++--------------- sass/buttons.scss | 2 ++ ts/congrats/congrats-base.scss | 1 + 8 files changed, 57 insertions(+), 48 deletions(-) diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss index 3904867e7..9833ff494 100644 --- a/qt/aqt/data/web/css/deckbrowser.scss +++ b/qt/aqt/data/web/css/deckbrowser.scss @@ -15,8 +15,13 @@ a.deck:hover { text-decoration: underline; } -tr.deck td { +th { border-bottom: 1px solid color(border-subtle); + padding-bottom: 5px; +} + +tr.deck td { + padding: 5px 12px; } tr.top-level-drag-row td { @@ -36,10 +41,21 @@ body { -webkit-user-select: none; } -.current { - background-color: color(shadow-subtle); - .gears { - visibility: visible; +.current, +tr:hover { + td { + background: color(canvas-inset); + &:first-child { + border-top-left-radius: prop(border-radius-large); + border-bottom-left-radius: prop(border-radius-large); + } + &:last-child { + border-top-right-radius: prop(border-radius-large); + border-bottom-right-radius: prop(border-radius-large); + } + .gears { + visibility: visible; + } } } @@ -78,10 +94,6 @@ body { visibility: hidden; } -tr:hover .gears { - visibility: visible; -} - .nightMode { .gears { filter: invert(180); diff --git a/qt/aqt/data/web/css/overview.scss b/qt/aqt/data/web/css/overview.scss index 719581eef..8902899a1 100644 --- a/qt/aqt/data/web/css/overview.scss +++ b/qt/aqt/data/web/css/overview.scss @@ -1,6 +1,8 @@ /* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ +@use "root-vars"; +@use "sass/vars" as *; @use "sass/card-counts"; .smallLink { @@ -13,7 +15,7 @@ h3 { .descfont { padding: 1em; - color: var(--fg-subtle); + color: color(fg-subtle); } .description { diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss index c7d08efbc..cb05cb794 100644 --- a/qt/aqt/data/web/css/toolbar.scss +++ b/qt/aqt/data/web/css/toolbar.scss @@ -17,6 +17,7 @@ border-bottom-right-radius: prop(border-radius-large); @include button.base($with-hover: false); @include elevation.elevation(2); + overflow: hidden; } body { @@ -32,10 +33,12 @@ body { .hitem { font-weight: bold; - margin: 6px 12px; + padding: 6px 12px; text-decoration: none; color: color(fg); display: inline-block; + @include button.base; + border: none; } .hitem:focus { diff --git a/qt/aqt/stylesheets.py b/qt/aqt/stylesheets.py index a50468e48..007e356a0 100644 --- a/qt/aqt/stylesheets.py +++ b/qt/aqt/stylesheets.py @@ -62,7 +62,7 @@ QSpinBox {{ def menu_styles(tm: ThemeManager) -> str: return f""" QMenuBar {{ - border-bottom: 1px solid {tm.var(colors.BORDER_FAINT)}; + border-bottom: 1px solid {tm.var(colors.BORDER_SUBTLE)}; }} QMenuBar::item {{ background-color: transparent; diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss index 9026c2a8d..542a00852 100644 --- a/sass/_button-mixins.scss +++ b/sass/_button-mixins.scss @@ -19,20 +19,22 @@ border-bottom-right-radius: var(--border-right-radius); } -@mixin background($primary: false) { +@mixin background($primary: false, $hover: true) { @if $primary { background: linear-gradient( 180deg, var(--button-primary-gradient-start) 0%, var(--button-primary-gradient-end) 100% ); - &:hover { - background: linear-gradient( - 180deg, - var(--button-primary-hover-gradient-start) 0%, - var(--button-primary-hover-gradient-end) 100% - ); - border-color: var(--button-hover-border); + @if $hover { + &:hover { + background: linear-gradient( + 180deg, + var(--button-primary-hover-gradient-start) 0%, + var(--button-primary-hover-gradient-end) 100% + ); + border-color: var(--button-hover-border); + } } } @else { background: linear-gradient( @@ -40,13 +42,15 @@ var(--button-gradient-start) 0%, var(--button-gradient-end) 100% ); - &:hover { - background: linear-gradient( - 180deg, - var(--button-hover-gradient-start) 0%, - var(--button-hover-gradient-end) 100% - ); - border-color: var(--button-hover-border); + @if $hover { + &:hover { + background: linear-gradient( + 180deg, + var(--button-hover-gradient-start) 0%, + var(--button-hover-gradient-end) 100% + ); + border-color: var(--button-hover-border); + } } } } @@ -66,7 +70,7 @@ } @else { border: none; } - @include background($primary); + @include background($primary, $hover: $with-hover); @if ($primary) { color: white; diff --git a/sass/_vars.scss b/sass/_vars.scss index 796d05e81..5058b09bf 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -89,14 +89,11 @@ $vars: ( ), ), overlay: ( - <<<<<<< HEAD "Background of floating elements (menus, tooltips)", + "Background of floating elements (menus, tooltips)", ( - light: white, - dark: black, + light: palette(lightgray, 0), + dark: palette(darkgray, 5), ), - ======= light: palette(lightgray, 0), - dark: palette(darkgray, 5), - >>>>>>> main, ), code: ( "Background of code editors", @@ -108,8 +105,7 @@ $vars: ( ), border: ( default: ( - <<<<<<< HEAD - "Border color with medium contrast against window background", + "Border color with medium contrast against window background", ( light: palette(lightgray, 6), dark: palette(darkgray, 7), @@ -118,12 +114,9 @@ $vars: ( subtle: ( "Border color with low contrast against window background", ( - light: palette(lightgray, 5), + light: palette(lightgray, 4), dark: palette(darkgray, 6), ), - ======= light: palette(lightgray, 6), - dark: palette(darkgray, 4), - >>>>>>> main, ), strong: ( "Border color with high contrast against window background", @@ -132,14 +125,6 @@ $vars: ( dark: palette(darkgray, 1), ), ), - subtle: ( - light: palette(lightgray, 5), - dark: palette(darkgray, 7), - ), - faint: ( - light: palette(lightgray, 4), - dark: palette(darkgray, 6), - ), focus: ( "Border color of focused input elements", ( diff --git a/sass/buttons.scss b/sass/buttons.scss index 5658fe51d..b6d87f504 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -23,9 +23,11 @@ } button { + outline: none; @include button.base; @include elevation.elevation(2); border-radius: var(--border-radius-large); padding: 6px 12px; font-weight: 500; + margin: 0 4px; } diff --git a/ts/congrats/congrats-base.scss b/ts/congrats/congrats-base.scss index 37f13a154..11c8767fc 100644 --- a/ts/congrats/congrats-base.scss +++ b/ts/congrats/congrats-base.scss @@ -1,3 +1,4 @@ +@use "sass/root-vars"; @import "sass/base"; @import "sass/bootstrap/scss/containers";