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.
2025-09-19 14:32:22 -04:00 · 2022-11-23 07:50:15 +01:00 · 2022-11-23 07:50:15 +01:00 · 365c5e1fb2
commit 365c5e1fb2
parent fdfdd67c3a
19 changed files with 41 additions and 33 deletions
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/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%);
--- a/qt/aqt/webview.py
+++ b/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{{ 
--- a/qt/tools/extract_sass_vars.py
+++ b/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
--- a/sass/_root-vars.scss
+++ b/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;
+        }
+    }
+}
--- a/sass/_vars.scss
+++ b/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),
-                        dark: color.scale(palette(blue, 6), $saturation: -10%),
+                        light: palette(blue, 5),
+                        dark: color.scale(palette(blue, 7), $saturation: -10%),
                    ),
                ),
                gradient: (
--- a/sass/base.scss
+++ b/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;
--- a/ts/components/ButtonToolbar.svelte
+++ b/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
--- a/ts/components/CheckBox.svelte
+++ b/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>
--- a/ts/components/DropdownItem.svelte
+++ b/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;
--- a/ts/components/IconButton.svelte
+++ b/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);
    }
--- a/ts/components/LabelButton.svelte
+++ b/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);
    }
--- a/ts/congrats/CongratsPage.svelte
+++ b/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);
--- a/ts/editor/CollapseBadge.svelte
+++ b/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">
--- a/ts/editor/NoteEditor.svelte
+++ b/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>
--- a/ts/editor/image-overlay/FloatButtons.svelte
+++ b/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"}
--- a/ts/editor/image-overlay/SizeSelect.svelte
+++ b/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"}
--- a/ts/editor/mathjax-overlay/MathjaxButtons.svelte
+++ b/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()}
--- a/ts/tag-editor/Tag.svelte
+++ b/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);
--- a/ts/tag-editor/TagInput.svelte
+++ b/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;