diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss index f744f6858..95c618824 100644 --- a/qt/aqt/data/web/css/deckbrowser.scss +++ b/qt/aqt/data/web/css/deckbrowser.scss @@ -3,6 +3,20 @@ @use "sass/root-vars"; @use "sass/vars" as *; @use "sass/card-counts"; +@use "sass/elevation" as *; + +table { + padding: 1rem; + background: var(--canvas-elevated); + border: 1px solid var(--border-subtle); + border-radius: var(--border-radius-large); + + @include elevation(1, $opacity-boost: -0.08); + &:hover { + @include elevation(2); + } + transition: box-shadow 0.2s ease-in-out; +} a.deck { color: color(fg); @@ -44,7 +58,7 @@ body { .current, tr:hover:not(.top-level-drag-row) { td { - background: color(canvas-inset); + background: color(border-subtle); &:first-child { border-top-left-radius: prop(border-radius-large); border-bottom-left-radius: prop(border-radius-large); diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss index b230f5ba7..ee1635043 100644 --- a/qt/aqt/data/web/css/toolbar.scss +++ b/qt/aqt/data/web/css/toolbar.scss @@ -19,11 +19,12 @@ @include button.base($with-hover: false, $with-active: false); overflow: hidden; padding: 0; + @include elevation(1, $opacity-boost: -0.08); &:hover { @include elevation(2); - transition: box-shadow 0.2s linear; } + transition: box-shadow 0.2s ease-in-out; } body { diff --git a/sass/_vars.scss b/sass/_vars.scss index e4d2ad8df..fad899234 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -80,17 +80,17 @@ $vars: ( ), ), elevated: ( - "Slightly brighter than window background", + "Background of containers", ( light: white, dark: palette(darkgray, 4), ), ), inset: ( - "Slightly darker than window background", + "Background of inputs inside containers", ( - light: palette(lightgray, 3), - dark: palette(darkgray, 6), + light: white, + dark: palette(darkgray, 5), ), ), overlay: ( diff --git a/sass/bootstrap-dark.scss b/sass/bootstrap-dark.scss index e32e3ba92..ce26980ff 100644 --- a/sass/bootstrap-dark.scss +++ b/sass/bootstrap-dark.scss @@ -6,11 +6,11 @@ @mixin night-mode { input, select { - background-color: var(--canvas-elevated); + background-color: var(--canvas-inset); border-color: var(--border); &:focus { - background-color: var(--canvas); + background-color: var(--canvas-inset); } } } diff --git a/sass/night-mode.scss b/sass/night-mode.scss index fb5a5c3db..3fb711deb 100644 --- a/sass/night-mode.scss +++ b/sass/night-mode.scss @@ -2,10 +2,10 @@ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ @mixin input { - background-color: var(--canvas-elevated); + background-color: var(--canvas-inset); border-color: var(--border); &:focus { - background-color: var(--canvas); + background-color: var(--canvas-inset); } } diff --git a/ts/components/SpinBox.svelte b/ts/components/SpinBox.svelte index 6fcf57275..46ad98019 100644 --- a/ts/components/SpinBox.svelte +++ b/ts/components/SpinBox.svelte @@ -151,7 +151,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html input { width: 100%; padding: 0.2rem 1.5rem 0.2rem 0.75rem; - background: var(--canvas-elevated); + background: var(--canvas-inset); color: var(--fg); border: none; outline: none; diff --git a/ts/components/TitledContainer.svelte b/ts/components/TitledContainer.svelte index 3a1fc43bf..185f2cc0d 100644 --- a/ts/components/TitledContainer.svelte +++ b/ts/components/TitledContainer.svelte @@ -36,12 +36,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html @use "sass/elevation" as *; .container { width: 100%; + background: var(--canvas-elevated); + border: 1px solid var(--border-subtle); border-radius: var(--border-radius-large, 10px); padding: 1rem 1.75rem 0.75rem 1.25rem; &.rtl { padding: 1rem 1.25rem 0.75rem 1.75rem; } - border: var(--border-subtle); &:hover, &:focus-within { .help-badge { @@ -49,11 +50,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } &.light { - @include elevation(2); + @include elevation(2, $opacity-boost: -0.08); + &:hover, + &:focus-within { + @include elevation(3); + } } &.dark { - @include elevation(3); + @include elevation(3, $opacity-boost: -0.08); + &:hover, + &:focus-within { + @include elevation(4); + } } + transition: box-shadow 0.2s ease-in-out; } h1 { border-bottom: 1px solid var(--border); diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte index e1e7d3e83..82ca7887e 100644 --- a/ts/editor/EditorField.svelte +++ b/ts/editor/EditorField.svelte @@ -120,9 +120,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html