Several CSS fixes - Editor Cleanup (#1470)

* Refactor editor css, fix editor button highlight

- Avoid using webview.css
- Move more buttons css into button_mixins

* Fix DropdownItem appearance

* Fix the visuals of tags

* Make dropdown font slightly smaller

* Give SelectOption a background color

* Move some css from deck-options-base to CardStateCustomizer

* Avoid using core.scss for CardStats

* Avoid using sass/core in congrats package

* Inline core.scss into webview.scss

* Include fusion-vars for base.scss

* need to keep core.scss around for now (dae)

qt/aqt/data/web/css/BUILD.bazel

@@ -9,7 +9,6 @@ compile_sass(
     ),
     group = "css_local",
     deps = [
-        "//sass:core_lib",
         "//sass:buttons_lib",
         "//sass:scrollbar_lib",
         "//sass:card_counts_lib",
@@ -29,7 +28,7 @@ copy_files_into_group(
 copy_files_into_group(
     name = "editable",
     srcs = [
-        "editable-build.css",
+        "editable.css",
     ],
     package = "//ts/editable",
 )

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

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'sass/card-counts';
+@use "sass/card-counts";
 
 a.deck {
     color: var(--text-fg);

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

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'sass/card-counts';
+@use "sass/card-counts";
 
 .smallLink {
     font-size: 10px;

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

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'sass/card-counts';
+@use "sass/card-counts";
 
 :root {
     --focus-color: #0078d7;

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

@@ -1,17 +1,29 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'sass/core';
+@use "sass/scrollbar";
-@use 'sass/scrollbar';
+@use "sass/buttons";
-@use 'sass/buttons';
 
-// core.scss sets border-box, but we need to
-// keep the old behaviour for now to avoid breaking
-// add-ons/card templates
 * {
+    // border-box would be better, but we need to
+    // keep the old behaviour for now to avoid breaking
+    // add-ons/card templates
     box-sizing: content-box;
 }
 
+body {
+    color: var(--text-fg);
+    background: var(--window-bg);
+    margin: 1em;
+    transition: opacity 0.5s ease-out;
+    overscroll-behavior: none;
+}
+
+a {
+    color: var(--link);
+    text-decoration: none;
+}
+
 body {
     margin: 2em;
     overscroll-behavior: none;

qt/aqt/data/web/js/compile_ts.bzl

@@ -9,7 +9,7 @@ def compile_ts(group, srcs):
             name = name,
             src = ts_file,
             sourcemap = False,
-            deps = ["//sass:core_lib"],
+            deps = [],
         )
 
     native.filegroup(

qt/aqt/editor.py

@@ -130,7 +130,7 @@ class Editor:
             css=["css/editor.css"],
             js=["js/editor.js"],
             context=self,
-            default_css=True,
+            default_css=False,
         )
 
         lefttopbtns: list[str] = []

sass/BUILD.bazel

@@ -3,13 +3,16 @@ load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
 sass_library(
     name = "base_lib",
     srcs = [
-        "_vars.scss",
         "_fusion-vars.scss",
+        "_vars.scss",
         "base.scss",
         "bootstrap-dark.scss",
     ],
     visibility = ["//visibility:public"],
-    deps = ["//sass/bootstrap", "//sass/codemirror"],
+    deps = [
+        "//sass/bootstrap",
+        "//sass/codemirror",
+    ],
 )
 
 sass_library(
@@ -29,6 +32,8 @@ sass_library(
     visibility = ["//visibility:public"],
 )
 
+# minimal definitions used by AnkiMobile's editor - should be safe to remove
+# once AnkiMobile switches to the new editor code in the future
 sass_library(
     name = "core_lib",
     srcs = [
@@ -49,7 +54,8 @@ sass_library(
 sass_library(
     name = "button_mixins_lib",
     srcs = [
-        "button-mixins.scss",
+        "_button-mixins.scss",
+        "_fusion-vars.scss",
     ],
     visibility = ["//visibility:public"],
 )

sass/_button-mixins.scss

@@ -1,6 +1,13 @@
+@use "fusion-vars";
+
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 
+@mixin impressed-shadow($intensity) {
+    box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
+        rgba(black, $intensity);
+}
+
 @mixin btn-border-radius {
     border-top-left-radius: var(--border-left-radius);
     border-bottom-left-radius: var(--border-left-radius);
@@ -58,12 +65,15 @@ $btn-base-color-day: white;
     }
 }
 
-$btn-base-color-night: #666;
+$btn-base-color-night: fusion-vars.$button-border;
 
 @mixin btn-night-base {
     color: var(--text-fg);
-    background-color: $btn-base-color-night;
+    background: linear-gradient(
-    border-color: $btn-base-color-night;
+        0deg,
+        fusion-vars.$button-gradient-start 0%,
+        fusion-vars.$button-gradient-end 100%
+    );
 }
 
 @mixin btn-night(
@@ -76,15 +86,23 @@ $btn-base-color-night: #666;
         @include btn-night-base;
         @content ($btn-base-color-night);
 
+        box-shadow: 0 0 3px fusion-vars.$button-outline;
+        border: 1px solid fusion-vars.$button-border;
+        -webkit-appearance: none;
+
         @if ($with-hover) {
             &:hover,
             &.hover {
-                background-color: lighten($btn-base-color-night, 8%);
+                background: linear-gradient(
-                border-color: lighten($btn-base-color-night, 8%);
+                    0deg,
+                    lighten(fusion-vars.$button-gradient-start, 8%) 0%,
+                    lighten(fusion-vars.$button-gradient-end, 8%) 100%
+                );
+                border-color: lighten(fusion-vars.$button-border, 8%);
             }
         }
 
-        @if ($with-disabled) {
+        @if ($with-active) {
             &:active,
             &.active {
                 @include impressed-shadow(0.35);
@@ -114,11 +132,6 @@ $btn-base-color-night: #666;
 // should be similar to -webkit-focus-ring-color
 $focus-color: rgba(21 97 174);
 
-@mixin impressed-shadow($intensity) {
-    box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
-        rgba(black, $intensity);
-}
-
 @function down-arrow($color) {
     @return url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
 }

sass/_vars.scss

@@ -76,5 +76,5 @@
     --marked-bg: #77c;
     --tooltip-bg: #272727;
     --focus-border: #316dca;
-    --focus-shadow: #143d79;
+    --focus-shadow: #194380;
 }

sass/base.scss

@@ -1,4 +1,5 @@
 @use "vars";
+@use "scrollbar";
 
 $body-color: var(--text-fg);
 $body-bg: var(--window-bg);
@@ -31,10 +32,19 @@ $utilities: (
     flex-basis: 75%;
 }
 
+html,
+body {
+    height: 100%;
+}
+
 * {
     overscroll-behavior: none;
 }
 
+.nightMode {
+    @include scrollbar.night-mode;
+}
+
 button {
     /* override transition for instant hover response */
     transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
@@ -43,3 +53,15 @@ button {
 pre, code, kbd, samp {
     unicode-bidi: normal !important;
 }
+
+.isWin {
+    --base-font-size: 12px;
+}
+
+.isMac {
+    --base-font-size: 13px;
+}
+
+.isLin {
+    --base-font-size: 14px;
+}

sass/bootstrap-forms.scss

@@ -0,0 +1,10 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+@import "sass/bootstrap/scss/forms";
+
+.form-control,
+.form-select {
+    // the unprefixed version wasn't added until Chrome 81
+    -webkit-appearance: none;
+}

sass/bootstrap-tooltip.scss

@@ -0,0 +1,25 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+$tooltip-padding-y: 0.45rem;
+$tooltip-padding-x: 0.65rem;
+$tooltip-max-width: 300px;
+
+@import "sass/bootstrap/scss/tooltip";
+
+.tooltip-inner {
+    text-align: start;
+
+    // marked transpiles tooltips into multiple paragraphs
+    // where trailing <p>s cause a bottom margin
+    > p:last-child {
+        display: inline;
+    }
+
+    // the default code color in tooltips is difficult to read; we'll probably
+    // want to add more of our own styling in the future
+    code {
+        color: #ffaaaa;
+        direction: inherit;
+    }
+}

sass/buttons.scss

@@ -38,9 +38,7 @@
         border: 1px solid fusion-vars.$button-border;
 
         border-radius: 5px;
-        padding: 10px;
+        padding: 3px 10px 3px;
-        padding-top: 3px;
-        padding-bottom: 3px;
     }
 
     button:hover {
@@ -53,13 +51,7 @@
     background: #656565;
     box-shadow: 0 1px 2px #222222;
     border-top-color: #848484;
-    border-top-width: 0.5px;
+    border-width: 0.5px 0 0;
-    border-bottom: 0;
+    padding: 2px 15px;
-    border-left: 0;
-    border-right: 0;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 15px;
-    padding-right: 15px;
     color: #e5e5e5;
 }

ts/card-info/CardStats.svelte

@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import Container from "../components/Container.svelte";
     import * as tr2 from "../lib/ftl";
     import { Stats, unwrapOptionalNumber } from "../lib/proto";
     import { Timestamp, timeSpan, DAY } from "../lib/time";
@@ -94,14 +95,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: statsRows = rowsFromStats(stats);
 </script>
 
-<table class="stats-table">
+<Container>
+    <table class="stats-table">
         {#each statsRows as row, _index}
             <tr>
                 <th style="text-align:start">{row.label}</th>
                 <td>{row.value}</td>
             </tr>
         {/each}
-</table>
+    </table>
+</Container>
 
 <style>
     .stats-table {

ts/card-info/card-info-base.scss

@@ -1,6 +1,3 @@
-@use "core";
+@import "sass/base";
-@use "scrollbar";
 
-.night-mode {
+@import "sass/bootstrap/scss/containers";
-    @include scrollbar.night-mode;
-}

ts/change-notetype/change-notetype-base.scss

@@ -1,26 +1,19 @@
 @use "sass/vars";
-@use "sass/scrollbar";
 @use "sass/bootstrap-dark";
 
 @import "sass/base";
 
 @import "sass/bootstrap/scss/alert";
-@import "sass/bootstrap/scss/forms";
 @import "sass/bootstrap/scss/buttons";
 @import "sass/bootstrap/scss/button-group";
 @import "sass/bootstrap/scss/close";
 @import "sass/bootstrap/scss/grid";
+@import "sass/bootstrap-forms";
 
 .night-mode {
-    @include scrollbar.night-mode;
     @include bootstrap-dark.night-mode;
 }
 
-// the unprefixed version wasn't added until Chrome 81
-.form-select {
-    -webkit-appearance: none;
-}
-
 body {
     width: min(100vw, 35em);
     margin: 0 auto;

ts/components/DropdownItem.svelte

@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     tabindex={tabbable ? 0 : -1}
     bind:this={buttonRef}
-    class={`btn dropdown-item ${className}`}
+    class="dropdown-item btn {className}"
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     title={tooltip}
@@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         justify-content: space-between;
 
-        font-size: calc(var(--buttons-size) / 2.3);
+        font-size: calc(var(--base-font-size) * 0.8);
 
         background: none;
         box-shadow: none !important;

ts/components/IconButton.svelte

@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <button
     bind:this={buttonRef}
     {id}
-    class="btn {className}"
+    class="icon-button btn {className}"
     class:active
     class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
@@ -53,8 +53,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     @use "sass/button-mixins" as button;
 
-    button {
+    .icon-button {
         padding: 0;
+        font-size: var(--base-font-size);
+        height: var(--buttons-size);
+
         @include button.btn-border-radius;
     }
 

ts/components/LabelButton.svelte

@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <button
     bind:this={buttonRef}
     {id}
-    class={extendClassName(className, theme)}
+    class="label-button {extendClassName(className, theme)}"
     class:active
     class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={theme === "anki" && !nightMode}
@@ -53,6 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     button {
         padding: 0 calc(var(--buttons-size) / 3);
+        font-size: var(--base-font-size);
         width: auto;
         height: var(--buttons-size);
 

ts/components/SelectOption.svelte

@@ -7,6 +7,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let selected = false;
 </script>
 
-<option {value} {selected}>
+<option class="select-option" {value} {selected}>
     <slot />
 </option>
+
+<style lang="scss">
+    .select-option {
+        background-color: var(--frame-bg);
+    }
+</style>

ts/congrats/BUILD.bazel

@@ -7,7 +7,7 @@ load("//ts:typescript.bzl", "typescript")
 
 compile_sass(
     srcs = ["congrats-base.scss"],
-    group = "base_css",
+    group = "congrats_css",
     visibility = ["//visibility:public"],
     deps = [
         "//sass:base_lib",
@@ -20,10 +20,11 @@ compile_svelte(
 )
 
 typescript(
-    name = "index",
+    name = "congrats_ts",
     deps = [
         ":svelte",
         "//ts/lib",
+        "//ts/components",
         "@npm//@fluent",
         "@npm//svelte",
         "@npm//svelte2tsx",
@@ -39,8 +40,8 @@ esbuild(
     output_css = "congrats.css",
     visibility = ["//visibility:public"],
     deps = [
-        ":base_css",
+        ":congrats_css",
-        ":index",
+        ":congrats_ts",
         ":svelte",
     ],
 )

ts/congrats/CongratsPage.svelte

@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import Container from "../components/Container.svelte";
     import type { Scheduler } from "../lib/proto";
     import { buildNextLearnMsg } from "./lib";
     import { bridgeLink } from "../lib/bridgecommand";
@@ -24,8 +25,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 </script>
 
-<div class="congrats-outer">
+<Container class="d-flex justify-content-center pt-3">
-    <div class="congrats-inner">
+    <div class="congrats">
         <h3>{congrats}</h3>
 
         <p>{nextLearnMsg}</p>
@@ -58,16 +59,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </div>
         {/if}
     </div>
-</div>
+</Container>
 
-<style>
+<style lang="scss">
-    .congrats-outer {
+    .congrats {
-        display: flex;
-        justify-content: center;
-    }
-
-    .congrats-inner {
         max-width: 30em;
+        font-size: var(--base-font-size);
+
+        :global(a) {
+            color: var(--link);
+            text-decoration: none;
+        }
     }
 
     .description {

ts/congrats/congrats-base.scss

@@ -1,6 +1,3 @@
-@use "sass/core";
+@import "sass/base";
-@use "sass/scrollbar";
 
-.night-mode {
+@import "sass/bootstrap/scss/containers";
-    @include scrollbar.night-mode;
-}

ts/deck-options/CardStateCustomizer.svelte

@@ -23,13 +23,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </Col>
 </Row>
 
-<textarea class="form-control" bind:value spellcheck="false" autocapitalize="none" />
+<textarea
+    class="card-state-customizer form-control"
+    bind:value
+    spellcheck="false"
+    autocapitalize="none"
+/>
 
 <style lang="scss">
     .text {
         min-height: 2em;
     }
-    textarea {
+
+    .card-state-customizer {
+        color: var(--text-fg);
+        background-color: var(--frame-bg);
+
         width: 100%;
         height: 10em;
         font-family: monospace;
@@ -37,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     @supports (-webkit-touch-callout: none) {
         // mobile compat
-        textarea {
+        .card-state-customizer {
             font-size: 16px;
             overflow-x: hidden;
         }

ts/deck-options/deck-options-base.scss

@@ -1,52 +1,14 @@
-$tooltip-padding-y: 0.45rem;
-$tooltip-padding-x: 0.65rem;
-$tooltip-max-width: 300px;
-
-@use "sass/vars";
-@use "sass/scrollbar";
-
 @import "sass/base";
+
 @import "sass/bootstrap/scss/containers";
 @import "sass/bootstrap/scss/grid";
 @import "sass/bootstrap/scss/dropdown";
-@import "sass/bootstrap/scss/forms";
 @import "sass/bootstrap/scss/buttons";
 @import "sass/bootstrap/scss/button-group";
 @import "sass/bootstrap/scss/transitions";
 @import "sass/bootstrap/scss/modal";
 @import "sass/bootstrap/scss/close";
 @import "sass/bootstrap/scss/alert";
-@import "sass/bootstrap/scss/tooltip";
 @import "sass/bootstrap/scss/badge";
-
+@import "sass/bootstrap-forms";
-.night-mode {
+@import "sass/bootstrap-tooltip";
-    @include scrollbar.night-mode;
-}
-
-.form-control,
-.form-select {
-    // the unprefixed version wasn't added until Chrome 81
-    -webkit-appearance: none;
-}
-
-.tooltip-inner {
-    text-align: start;
-
-    // marked transpiles tooltips into multiple paragraphs
-    // where trailing <p>s cause a bottom margin
-    > p:last-child {
-        display: inline;
-    }
-
-    // the default code color in tooltips is difficult to read; we'll probably
-    // want to add more of our own styling in the future
-    code {
-        color: #ffaaaa;
-        direction: inherit;
-    }
-}
-
-textarea.form-control {
-    color: var(--text-fg);
-    background-color: var(--frame-bg) !important;
-}

ts/editable/BUILD.bazel

@@ -9,7 +9,7 @@ compile_sass(
     srcs = [
         "editable-base.scss",
     ],
-    group = "editable_scss",
+    group = "editable_css",
     visibility = ["//visibility:public"],
     deps = [
         "//sass:scrollbar_lib",
@@ -30,23 +30,23 @@ _ts_deps = [
 compile_svelte(deps = _ts_deps)
 
 typescript(
-    name = "editable",
+    name = "editable_ts",
     deps = _ts_deps + [
         ":svelte",
     ],
 )
 
 esbuild(
-    name = "editable-build",
+    name = "editable",
     args = {
         "loader": {".svg": "text"},
     },
     entry_point = "index.ts",
-    output_css = "editable-build.css",
+    output_css = "editable.css",
     visibility = ["//visibility:public"],
     deps = [
-        "editable",
+        ":editable_ts",
-        "editable_scss",
+        ":editable_css",
         "//ts/components",
         "@npm//@mdi",
         "@npm//protobufjs",

ts/editor/BUILD.bazel

@@ -9,33 +9,20 @@ load("//ts:typescript.bzl", "typescript")
 compile_sass(
     srcs = [
         "editor-base.scss",
+        "legacy.scss",
     ],
-    group = "base_css",
+    group = "editor_css",
     visibility = ["//visibility:public"],
     deps = [
         "//sass:base_lib",
         "//sass:button_mixins_lib",
-        "//sass:buttons_lib",
         "//sass:scrollbar_lib",
     ],
 )
 
-compile_sass(
-    srcs = [
-        "bootstrap.scss",
-        "legacy.scss",
-    ],
-    group = "local_css",
-    visibility = ["//visibility:public"],
-    deps = [
-        "//sass:button_mixins_lib",
-        "//sass/bootstrap",
-    ],
-)
-
 _ts_deps = [
     "//ts/components",
-    "//ts/editable",
+    "//ts/editable:editable_ts",
     "//ts/html-filter",
     "//ts/lib",
     "//ts/sveltelib",
@@ -63,12 +50,12 @@ esbuild(
     output_css = "editor.css",
     visibility = ["//visibility:public"],
     deps = [
-        ":base_css",
         ":editor_ts",
-        ":local_css",
+        ":editor_css",
         "@npm//@mdi",
         "@npm//bootstrap-icons",
         "@npm//protobufjs",
+        "//sass:button_mixins_lib",
     ],
 )
 
@@ -88,7 +75,7 @@ svelte_check(
         "//sass:button_mixins_lib",
         "//sass/bootstrap",
         "//ts/components",
-        "//ts/editable",
+        "//ts/editable:editable_ts",
         "@npm//@types/bootstrap",
         "@npm//@types/codemirror",
         "@npm//codemirror",

ts/editor/CodeMirror.svelte

@@ -68,3 +68,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div class="code-mirror">
     <textarea tabindex="-1" hidden use:openCodeMirror />
 </div>
+
+<style lang="scss">
+    .code-mirror :global(.CodeMirror) {
+        height: auto;
+        border-radius: 0 0 5px 5px;
+        padding: 6px 0;
+    }
+</style>

ts/editor/RichTextStyles.svelte

@@ -46,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {
             id: "rootStyle",
             type: "link" as "link",
-            href: "./_anki/css/editable-build.css",
+            href: "./_anki/css/editable.css",
         } as StyleLinkType,
     ];
 

ts/editor/Tag.svelte

@@ -58,9 +58,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    button {
+    .tag {
-        padding-top: 0.1rem;
+        font-size: var(--base-font-size);
-        padding-bottom: 0.1rem;
+        padding: 0;
+
+        --border-color: var(--medium-border);
+
+        border: 1px solid var(--border-color) !important;
+        border-radius: 5px;
 
         &:focus,
         &:active {
@@ -68,13 +73,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             box-shadow: none;
         }
 
-        &.tag {
-            --border-color: var(--medium-border);
-
-            border: 1px solid var(--border-color) !important;
-            border-radius: 5px;
-        }
-
         &.flashing {
             animation: flash 0.3s linear;
         }
@@ -85,15 +83,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    @include button.btn-day(
+    @include button.btn-day($with-active: false, $with-disabled: false);
-        $with-active: false,
-        $with-disabled: false,
-        $with-hover: false
-    );
 
-    @include button.btn-night(
+    @include button.btn-night($with-active: false, $with-disabled: false);
-        $with-active: false,
-        $with-disabled: false,
-        $with-hover: false
-    );
 </style>

ts/editor/TagDeleteBadge.svelte

@@ -10,6 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 </script>
 
-<Badge class="rounded-circle d-flex align-items-center ms-1 {className}" on:click
+<Badge class="d-flex align-items-center ms-1 {className}" on:click iconSize={80}
     >{@html deleteIcon}</Badge
 >

ts/editor/TagEditor.svelte

@@ -460,7 +460,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         >
                             <TagInput
                                 id={tag.id}
-                                class="tag-input position-absolute start-0 top-0 ps-2 py-0"
+                                class="position-absolute start-0 top-0 ps-2 py-0"
                                 disabled={autocompleteDisabled}
                                 bind:name={activeName}
                                 bind:input={activeInput}
@@ -526,6 +526,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         :global(.tag-input) {
             /* recreates positioning of Tag component */
             border-left: 1px solid transparent;
+            border-bottom: 2px solid transparent;
         }
 
         :global(.cap-items) {

ts/editor/TagInput.svelte

@@ -234,7 +234,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <input
     {id}
-    class={className}
+    class="tag-input {className}"
     class:disabled
     bind:this={input}
     bind:value={name}
@@ -252,7 +252,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    input {
+    .tag-input {
         width: 100%;
         height: 100%;
 
@@ -261,8 +261,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         resize: none;
         appearance: none;
         font: inherit;
-        /* TODO we need something like --base-font-size for buttons' 13px */
+        font-size: var(--base-font-size);
-        font-size: 13px;
         outline: none;
         border: none;
         margin: 0;

ts/editor/TagWithTooltip.svelte

@@ -109,13 +109,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    :global(.tag-icon-hover):hover {
+    :global(.tag-icon-hover svg:hover) {
-        $white-translucent: rgba(255 255 255 / 0.5);
+        border-radius: 5px;
-        $dark-translucent: rgba(0 0 0 / 0.2);
+
+        $white-translucent: rgb(255 255 255 / 0.35);
+        $dark-translucent: rgb(0 0 0 / 0.1);
 
-        div & {
         background-color: $dark-translucent;
-        }
 
         .night-mode & {
             background-color: $white-translucent;

ts/editor/bootstrap.scss

@@ -1,13 +0,0 @@
-@import "sass/bootstrap/scss/functions";
-@import "sass/bootstrap/scss/variables";
-@import "sass/bootstrap/scss/mixins";
-
-$btn-disabled-opacity: 0.4;
-
-@import "sass/bootstrap/scss/buttons";
-@import "sass/bootstrap/scss/button-group";
-@import "sass/bootstrap/scss/dropdown";
-
-$tooltip-max-width: 600px;
-
-@import "sass/bootstrap/scss/tooltip";

ts/editor/code-mirror.ts

@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/monokai.css";
+import "codemirror/addon/fold/foldgutter.css";
+
 import CodeMirror from "codemirror";
 import "codemirror/mode/htmlmixed/htmlmixed";
 import "codemirror/mode/stex/stex";

ts/editor/editor-base.scss

@@ -1,55 +1,10 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "base";
+@import "sass/base";
-@use "scrollbar";
-@use "button-mixins";
 
-html,
+$btn-disabled-opacity: 0.4;
-body {
+@import "sass/bootstrap/scss/buttons";
-    height: 100%;
+@import "sass/bootstrap/scss/button-group";
-}
+@import "sass/bootstrap/scss/dropdown";
-
+@import "sass/bootstrap-tooltip";
-.nightMode {
-    @include scrollbar.night-mode;
-}
-
-#dupes,
-#cloze-hint {
-    position: sticky;
-    bottom: 0;
-
-    text-align: center;
-    background-color: var(--window-bg);
-
-    a {
-        color: var(--link);
-    }
-}
-
-.icon > svg {
-    fill: var(--text-fg);
-}
-
-.pin-icon {
-    cursor: pointer;
-
-    &.is-inactive {
-        opacity: 0.2;
-    }
-
-    &.icon--hover {
-        opacity: 0.5;
-    }
-}
-
-/* CodeMirror */
-@import "codemirror/lib/codemirror";
-@import "codemirror/theme/monokai";
-@import "codemirror/addon/fold/foldgutter";
-
-.CodeMirror {
-    height: auto;
-    border-radius: 0 0 5px 5px;
-    padding: 6px 0;
-}

ts/editor/index.ts

@@ -1,6 +1,9 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import "./legacy.css";
+import "./editor-base.css";
+
 /* eslint
 @typescript-eslint/no-non-null-assertion: "off",
 @typescript-eslint/no-explicit-any: "off",
@@ -63,10 +66,6 @@ import OldEditorAdapter from "./OldEditorAdapter.svelte";
 import type { NoteEditorAPI } from "./OldEditorAdapter.svelte";
 import { nightModeKey } from "../components/context-keys";
 
-import "./editor-base.css";
-import "./bootstrap.css";
-import "./legacy.css";
-
 async function setupNoteEditor(): Promise<NoteEditorAPI> {
     const context = new Map<symbol, unknown>();
 

ts/editor/mathjax-overlay/Editor.svelte

@@ -69,10 +69,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    /* TODO there is global CSS in fields.scss */
     div :global(.mathjax-editor) {
         border-radius: 0;
         border-width: 0 1px;
         border-color: var(--medium-border);
+
+        height: auto;
+        border-radius: 0 0 5px 5px;
+        padding: 6px 0;
     }
 </style>

ts/graphs/graphs-base.scss

@@ -1,6 +1 @@
 @use "sass/base";
-@use "sass/scrollbar";
-
-.night-mode {
-    @include scrollbar.night-mode;
-}