Give containers brighter color than canvas (#2220)

* Give deck browser table an elevated container look

* Tweak colors of elevated containers (e.g. in deck options)

* Prepare editor fields for custom backgrounds

* Tweak field margin and add explanatory comment

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

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 {

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: (

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

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

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;

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

ts/editor/EditorField.svelte

@@ -120,9 +120,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     @use "sass/elevation" as *;
 
+    /* Make sure labels are readable on custom Qt backgrounds */
+    .field-container {
+        background: var(--canvas);
+        border-radius: var(--border-radius);
+        overflow: hidden;
+    }
+
     .editor-field {
         overflow: hidden;
-        margin: 1px 3px 0 3px;
+        /* make room for thicker focus border */
+        margin: 1px;
 
         border-radius: 5px;
         border: 1px solid var(--border);

ts/editor/LabelContainer.svelte

@@ -39,6 +39,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         justify-content: space-between;
         background: var(--canvas);
+        border-top-right-radius: var(--border-radius);
+        border-top-left-radius: var(--border-radius);
         padding: 0 3px 1px;
 
         position: sticky;

ts/import-csv/Preview.svelte

@@ -55,7 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         tr {
             &:nth-child(even) {
-                background: var(--canvas-elevated);
+                background: var(--canvas);
             }
         }