Improve appearance of main window

qt/aqt/data/web/css/deckbrowser.scss

@@ -1,6 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-@use "sass/base";
+@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 
@@ -38,6 +38,9 @@ body {
 
 .current {
     background-color: color(shadow-subtle);
+    .gears {
+        visibility: visible;
+    }
 }
 
 .decktd {
@@ -72,6 +75,11 @@ body {
     opacity: 0.5;
     padding-top: 0.2em;
     cursor: pointer;
+    visibility: hidden;
+}
+
+tr:hover .gears {
+    visibility: visible;
 }
 
 .nightMode {

qt/aqt/data/web/css/reviewer-bottom.scss

@@ -1,12 +1,12 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "sass/base";
+@use "root-vars";
-@use "vars";
+@use "sass/vars" as *;
 @use "sass/card-counts";
 
 :root {
-    --focus-color: #{vars.palette-of(border-focus)};
+    --focus-color: #{palette-of(border-focus)};
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);
@@ -52,11 +52,11 @@ button {
 }
 
 :focus {
-    outline: 1px auto var(--focus-color);
+    outline: 1px auto color(focus-color);
 
     .nightMode & {
         outline: none;
-        box-shadow: 0 0 0 2px var(--focus-color);
+        box-shadow: 0 0 0 2px color(focus-color);
     }
 }
 
@@ -75,13 +75,13 @@ button {
 }
 
 #outer {
-    border-top: 1px solid var(--border);
+    border-top: 1px solid color(border);
     /* Better compatibility with graphics pad/touchscreen */
     -webkit-user-select: none;
 }
 
 .nightMode {
     #outer {
-        border-top-color: var(--border-subtle);
+        border-top-color: color(border-subtle);
     }
 }

qt/aqt/data/web/css/toolbar.scss

@@ -1,16 +1,22 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "sass/base";
+@use "root-vars";
+@use "sass/vars" as *;
+@use "sass/elevation";
+@use "sass/button-mixins" as button;
 
 #header {
-    padding: 3px;
+    padding-bottom: 12px;
-    font-weight: bold;
-    border-bottom: 1px solid var(--border);
 }
 
 .tdcenter {
     white-space: nowrap;
+    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);
 }
 
 body {
@@ -25,28 +31,17 @@ body {
 }
 
 .hitem {
-    padding-right: 12px;
+    font-weight: bold;
-    padding-left: 12px;
+    margin: 6px 12px;
     text-decoration: none;
-    color: var(--fg);
+    color: color(fg);
-}
+    display: inline-block;
-
-.hitem:hover {
-    text-decoration: underline;
 }
 
 .hitem:focus {
     outline: 0;
 }
 
-.nightMode #header {
-    border-bottom-color: var(--border-subtle);
-}
-
-.isMac.nightMode #header {
-    border-bottom-color: var(--canvas-elevated);
-}
-
 @keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
@@ -57,25 +52,27 @@ body {
 }
 
 .spin {
+    width: 16px;
     animation: spin;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     display: inline-block;
     visibility: visible !important;
     animation-timing-function: linear;
+    transition: all 0.2s ease-in;
 }
 
 #sync-spinner {
-    width: 16px;
     height: 16px;
     margin-bottom: -3px;
     visibility: hidden;
+    width: 0;
 }
 
 .normal-sync {
-    color: var(--state-new);
+    color: color(state-new);
 }
 
 .full-sync {
-    color: var(--state-learn);
+    color: color(state-learn);
 }

qt/aqt/toolbar.py

@@ -196,7 +196,7 @@ class Toolbar:
 
     _body = """
 <center id=outer>
-<table id=header width=100%%>
+<table id=header>
 <tr>
 <td class=tdcenter align=center>%s</td>
 </tr></table>

sass/buttons.scss

@@ -1,5 +1,6 @@
 @use "vars";
 @use "button-mixins" as button;
+@use "elevation";
 
 :root {
     --focus-color: #{vars.palette-of(shadow-focus)};
@@ -23,6 +24,8 @@
 
 button {
     @include button.base;
-    border-radius: var(--border-radius);
+    @include elevation.elevation(2);
-    padding: 5px 10px;
+    border-radius: var(--border-radius-large);
+    padding: 6px 12px;
+    font-weight: 500;
 }

ts/graphs/graphs-base.scss

@@ -1,4 +1,4 @@
-@use "sass/base";
+@use "root-vars";
 @use "sass/button-mixins" as button;
 
 label,