From 09c29219b4ca6bcc0a8ce20c09a76efe180e2bc2 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sun, 31 Oct 2021 00:29:22 +0200 Subject: [PATCH] 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 | 3 +- qt/aqt/data/web/css/deckbrowser.scss | 2 +- qt/aqt/data/web/css/overview.scss | 2 +- qt/aqt/data/web/css/reviewer-bottom.scss | 2 +- qt/aqt/data/web/css/webview.scss | 24 ++++++-- qt/aqt/data/web/js/compile_ts.bzl | 2 +- qt/aqt/editor.py | 2 +- sass/BUILD.bazel | 12 +++- ...button-mixins.scss => _button-mixins.scss} | 35 ++++++++---- sass/_vars.scss | 2 +- sass/base.scss | 22 +++++++ sass/bootstrap-forms.scss | 10 ++++ sass/bootstrap-tooltip.scss | 25 ++++++++ sass/buttons.scss | 14 +---- ts/card-info/CardStats.svelte | 19 ++++--- ts/card-info/card-info-base.scss | 7 +-- ts/change-notetype/change-notetype-base.scss | 9 +-- ts/components/DropdownItem.svelte | 4 +- ts/components/IconButton.svelte | 7 ++- ts/components/LabelButton.svelte | 3 +- ts/components/SelectOption.svelte | 8 ++- ts/congrats/BUILD.bazel | 9 +-- ts/congrats/CongratsPage.svelte | 22 +++---- ts/congrats/congrats-base.scss | 7 +-- ts/deck-options/CardStateCustomizer.svelte | 15 ++++- ts/deck-options/deck-options-base.scss | 44 +------------- ts/editable/BUILD.bazel | 12 ++-- ts/editor/BUILD.bazel | 25 ++------ ts/editor/CodeMirror.svelte | 8 +++ ts/editor/RichTextStyles.svelte | 2 +- ts/editor/Tag.svelte | 30 ++++------ ts/editor/TagDeleteBadge.svelte | 2 +- ts/editor/TagEditor.svelte | 3 +- ts/editor/TagInput.svelte | 7 +-- ts/editor/TagWithTooltip.svelte | 12 ++-- ts/editor/bootstrap.scss | 13 ----- ts/editor/code-mirror.ts | 4 ++ ts/editor/editor-base.scss | 57 ++----------------- ts/editor/index.ts | 7 +-- ts/editor/mathjax-overlay/Editor.svelte | 5 +- ts/graphs/graphs-base.scss | 5 -- 41 files changed, 242 insertions(+), 261 deletions(-) rename sass/{button-mixins.scss => _button-mixins.scss} (80%) create mode 100644 sass/bootstrap-forms.scss create mode 100644 sass/bootstrap-tooltip.scss delete mode 100644 ts/editor/bootstrap.scss diff --git a/qt/aqt/data/web/css/BUILD.bazel b/qt/aqt/data/web/css/BUILD.bazel index 9af8f32c0..cbcda756f 100644 --- a/qt/aqt/data/web/css/BUILD.bazel +++ b/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", ) diff --git a/qt/aqt/data/web/css/deckbrowser.scss b/qt/aqt/data/web/css/deckbrowser.scss index 930d5f527..8b420b3ff 100644 --- a/qt/aqt/data/web/css/deckbrowser.scss +++ b/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); diff --git a/qt/aqt/data/web/css/overview.scss b/qt/aqt/data/web/css/overview.scss index 2120d1476..23565f573 100644 --- a/qt/aqt/data/web/css/overview.scss +++ b/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; diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss index cd2fd94b5..5cdaddaea 100644 --- a/qt/aqt/data/web/css/reviewer-bottom.scss +++ b/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; diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss index ff5909313..d6b85081c 100644 --- a/qt/aqt/data/web/css/webview.scss +++ b/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/buttons'; +@use "sass/scrollbar"; +@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; diff --git a/qt/aqt/data/web/js/compile_ts.bzl b/qt/aqt/data/web/js/compile_ts.bzl index fbcb03397..31704f2d8 100644 --- a/qt/aqt/data/web/js/compile_ts.bzl +++ b/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( diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 31fe1be98..9e4e21fdd 100644 --- a/qt/aqt/editor.py +++ b/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] = [] diff --git a/sass/BUILD.bazel b/sass/BUILD.bazel index a35d13a5f..b1183f8f1 100644 --- a/sass/BUILD.bazel +++ b/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"], ) diff --git a/sass/button-mixins.scss b/sass/_button-mixins.scss similarity index 80% rename from sass/button-mixins.scss rename to sass/_button-mixins.scss index f39f37e9a..7934aaf08 100644 --- a/sass/button-mixins.scss +++ b/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; - border-color: $btn-base-color-night; + background: linear-gradient( + 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%); - border-color: lighten($btn-base-color-night, 8%); + background: linear-gradient( + 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"); } diff --git a/sass/_vars.scss b/sass/_vars.scss index bac3d4816..a92eefccc 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -76,5 +76,5 @@ --marked-bg: #77c; --tooltip-bg: #272727; --focus-border: #316dca; - --focus-shadow: #143d79; + --focus-shadow: #194380; } diff --git a/sass/base.scss b/sass/base.scss index 9c1fa8c1b..27c8612cf 100644 --- a/sass/base.scss +++ b/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; +} diff --git a/sass/bootstrap-forms.scss b/sass/bootstrap-forms.scss new file mode 100644 index 000000000..940d50fce --- /dev/null +++ b/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; +} diff --git a/sass/bootstrap-tooltip.scss b/sass/bootstrap-tooltip.scss new file mode 100644 index 000000000..a4d57e81d --- /dev/null +++ b/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

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; + } +} diff --git a/sass/buttons.scss b/sass/buttons.scss index bf029e226..2561efe23 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -38,9 +38,7 @@ border: 1px solid fusion-vars.$button-border; border-radius: 5px; - padding: 10px; - padding-top: 3px; - padding-bottom: 3px; + padding: 3px 10px 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-bottom: 0; - border-left: 0; - border-right: 0; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 15px; - padding-right: 15px; + border-width: 0.5px 0 0; + padding: 2px 15px; color: #e5e5e5; } diff --git a/ts/card-info/CardStats.svelte b/ts/card-info/CardStats.svelte index ccaef6672..319e25351 100644 --- a/ts/card-info/CardStats.svelte +++ b/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 --> - - {#each statsRows as row, _index} - - - - - {/each} -
{row.label}{row.value}
+ + + {#each statsRows as row, _index} + + + + + {/each} +
{row.label}{row.value}
+ diff --git a/ts/congrats/BUILD.bazel b/ts/congrats/BUILD.bazel index ae1dccdee..abe73fc5f 100644 --- a/ts/congrats/BUILD.bazel +++ b/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", - ":index", + ":congrats_css", + ":congrats_ts", ":svelte", ], ) diff --git a/ts/congrats/CongratsPage.svelte b/ts/congrats/CongratsPage.svelte index 792f33546..c37181e28 100644 --- a/ts/congrats/CongratsPage.svelte +++ b/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 --> -

-
+ +

{congrats}

{nextLearnMsg}

@@ -58,16 +59,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{/if}
-
+ - diff --git a/ts/editor/RichTextStyles.svelte b/ts/editor/RichTextStyles.svelte index 8a3d1d7cf..9c597fef2 100644 --- a/ts/editor/RichTextStyles.svelte +++ b/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, ]; diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte index fd6233d2e..eb22c792b 100644 --- a/ts/editor/Tag.svelte +++ b/ts/editor/Tag.svelte @@ -58,9 +58,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } - button { - padding-top: 0.1rem; - padding-bottom: 0.1rem; + .tag { + font-size: var(--base-font-size); + 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( - $with-active: false, - $with-disabled: false, - $with-hover: false - ); + @include button.btn-day($with-active: false, $with-disabled: false); - @include button.btn-night( - $with-active: false, - $with-disabled: false, - $with-hover: false - ); + @include button.btn-night($with-active: false, $with-disabled: false); diff --git a/ts/editor/TagDeleteBadge.svelte b/ts/editor/TagDeleteBadge.svelte index 5f78fd4d3..15dcd69e2 100644 --- a/ts/editor/TagDeleteBadge.svelte +++ b/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 }; -{@html deleteIcon} diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index 86eef9ff2..d69b29768 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -460,7 +460,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html > diff --git a/ts/graphs/graphs-base.scss b/ts/graphs/graphs-base.scss index 44b85cf14..29ec0742b 100644 --- a/ts/graphs/graphs-base.scss +++ b/ts/graphs/graphs-base.scss @@ -1,6 +1 @@ @use "sass/base"; -@use "sass/scrollbar"; - -.night-mode { - @include scrollbar.night-mode; -}