UI size tweaks (#2184)

* Reduce font size of answer button indicators

* Increase padding of browser rows with ResizeToContents on vertical header

* Remove 0.8 scale factor for dropdown item font-size

* Remove font-size prop entirely from DropdownItem

* Revert "Remove font-size prop entirely from DropdownItem"

This reverts commit bb0a158f96.

* Remove hard-coded Python font sizes

* Move font size and scrollbar into _root-vars.scss

* Revert editor size variable to 1.6

* Fix icon alignment

* Fix checkbox alignment for dropdown items

* Remove unused classes from Tag.svelte

* Revert "Increase padding of browser rows with ResizeToContents on vertical header"

This reverts commit 77bfc854ba.

* Remove option to set font size of browser entries

* Add setting for browser row padding to preferences

* Revert "Add setting for browser row padding to preferences"

This reverts commit 75c59da65a.

* Revert "Remove option to set font size of browser entries"

This reverts commit a543783d8e.

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

@@ -63,7 +63,7 @@ button {
 .stattxt {
     position: absolute;
     white-space: nowrap;
-    font-size: medium;
+    font-size: small;
     top: -3px;
     left: 50%;
     transform: translate(-50%, -100%);

qt/aqt/webview.py

@@ -413,10 +413,10 @@ class AnkiWebView(QWebEngineView):
             button_style = f"""
 button {{ font-family: {family}; }}
             """
-            font = f"font-size:12px;font-family:{family};"
+            font = f"font-family:{family};"
         elif is_mac:
             family = "Helvetica"
-            font = f'font-size:14px;font-family:"{family}";'
+            font = f'font-family:"{family}";'
             button_style = """
 button {
     --canvas: #fff;
@@ -432,7 +432,7 @@ button {
 """
         else:
             family = self.font().family()
-            font = f'font-size:14px;font-family:"{family}", sans-serif;'
+            font = f'font-family:"{family}", sans-serif;'
             button_style = """
 /* Buttons */
 button{{ 

qt/tools/extract_sass_vars.py

@@ -25,6 +25,8 @@ for line in re.split(r"[;\{\}]|\*\/", open(root_vars_css).read()):
     if line.startswith("/*!"):
         if "props" in line:
             reached_props = True
+        elif "rest" in line:
+            break
         else:
             comment = re.match(r"\/\*!\s*(.*)$", line)[1]
         continue

sass/_root-vars.scss

@@ -4,6 +4,7 @@
 @use "sass:map";
 @use "vars" as *;
 @use "functions" as *;
+@use "scrollbar";
 
 /*! colors */
 :root {
@@ -50,3 +51,15 @@
         }
     }
 }
+
+/*! rest */
+:root {
+    font-size: prop(font-size);
+    body {
+        overscroll-behavior: none;
+        &:not(.isMac),
+        &:not(.isMac) * {
+            @include scrollbar.custom;
+        }
+    }
+}

sass/_vars.scss

@@ -13,6 +13,11 @@
 
 $vars: (
     props: (
+        font: (
+            size: (
+                default: 15px,
+            ),
+        ),
         border-radius: (
             default: (
                 "Used to round corners of various UI elements",
@@ -177,8 +182,8 @@ $vars: (
                 bg: (
                     "Background color of primary button",
                     (
-                        light: palette(blue, 4),
+                        light: palette(blue, 5),
-                        dark: color.scale(palette(blue, 6), $saturation: -10%),
+                        dark: color.scale(palette(blue, 7), $saturation: -10%),
                     ),
                 ),
                 gradient: (

sass/base.scss

@@ -1,6 +1,5 @@
 @use "vars" as *;
 @use "root-vars";
-@use "scrollbar";
 @use "button-mixins" as button;
 
 $body-color: color(fg);
@@ -43,15 +42,6 @@ html {
     overflow-x: hidden;
 }
 
-body {
-    --base-font-size: 13px;
-    overscroll-behavior: none;
-    &:not(.isMac),
-    &:not(.isMac) * {
-        @include scrollbar.custom;
-    }
-}
-
 button {
     /* override transition for instant hover response */
     transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;

ts/components/ButtonToolbar.svelte

@@ -27,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class="button-toolbar btn-toolbar {className}"
     class:nightMode={$pageTheme.isDark}
+    style:--icon-align="baseline"
     {style}
     role="toolbar"
     on:focusout

ts/components/CheckBox.svelte

@@ -10,6 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     label {
-        line-height: 1;
+        line-height: inherit;
     }
 </style>

ts/components/DropdownItem.svelte

@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         justify-content: start;
         width: 100%;
 
-        font-size: var(--dropdown-font-size, calc(0.8 * var(--base-font-size)));
+        font-size: var(--dropdown-font-size, var(--font-size));
 
         background: none;
         box-shadow: none !important;

ts/components/IconButton.svelte

@@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         @include button.border-radius;
 
         padding: 0 var(--padding-inline, 0);
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         height: var(--buttons-size);
         min-width: calc(var(--buttons-size) * 0.75);
     }

ts/components/LabelButton.svelte

@@ -50,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0 calc(var(--buttons-size) / 3);
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         width: auto;
         height: var(--buttons-size);
     }

ts/congrats/CongratsPage.svelte

@@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .congrats {
         margin-top: 2em;
         max-width: 30em;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
 
         :global(a) {
             color: var(--fg-link);

ts/editor/CollapseBadge.svelte

@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div class="collapse-badge" class:collapsed class:highlighted>
-    <Badge iconSize={80} --icon-align="text-bottom">{@html chevronDown}</Badge>
+    <Badge iconSize={80}>{@html chevronDown}</Badge>
 </div>
 
 <style lang="scss">

ts/editor/NoteEditor.svelte

@@ -78,7 +78,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return fontFamily;
     }
 
-    const size = 1.5;
+    const size = 1.6;
     const wrap = true;
 
     const fieldStores: Writable<string>[] = [];
@@ -457,6 +457,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         richTextsHidden[index] = true;
                                     }
                                 }}
+                                --icon-align="bottom"
                             >
                                 <svelte:fragment slot="field-name">
                                     <LabelName>

ts/editor/image-overlay/FloatButtons.svelte

@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup size={1.5} wrap={false}>
+<ButtonGroup size={1.6} wrap={false}>
     <IconButton
         tooltip={tr.editingFloatLeft()}
         active={floatStyle === "left"}

ts/editor/image-overlay/SizeSelect.svelte

@@ -22,7 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup size={1.5}>
+<ButtonGroup size={1.6}>
     <IconButton
         disabled={shrinkingDisabled}
         flipX={$direction === "rtl"}

ts/editor/mathjax-overlay/MathjaxButtons.svelte

@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonToolbar size={1.5} wrap={false}>
+<ButtonToolbar size={1.6} wrap={false}>
     <ButtonGroup>
         <IconButton
             tooltip={tr.editingMathjaxInline()}

ts/tag-editor/Tag.svelte

@@ -5,8 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
 
-    import { pageTheme } from "../sveltelib/theme";
-
     let className: string = "";
     export { className as class };
 
@@ -29,11 +27,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <button
     bind:this={button}
-    class="tag btn d-inline-flex align-items-center text-nowrap ps-2 pe-1 {className}"
+    class="tag d-inline-flex align-items-center text-nowrap ps-2 pe-1 {className}"
     class:selected
     class:flashing
-    class:btn-day={!$pageTheme.isDark}
-    class:btn-night={$pageTheme.isDark}
     tabindex="-1"
     title={tooltip}
     on:mousemove
@@ -60,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag {
         @include button.base($with-active: false, $with-disabled: false);
 
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         padding: 0;
 
         --border-color: var(--border);

ts/tag-editor/TagInput.svelte

@@ -267,7 +267,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         resize: none;
         appearance: none;
         font: inherit;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         outline: none;
         border: none;
         margin: 0;