GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Several CSS fixes - Editor Cleanup (#1470)

Browse source 
* 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)
This commit is contained in:
Henrik Giesel 2021-10-31 00:29:22 +02:00 committed by GitHub
parent 9f8be1af93
commit 09c29219b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 242 additions and 261 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
qt/aqt/data/web/css/BUILD.bazel
View file

@ -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",
)

2
qt/aqt/data/web/css/deckbrowser.scss
View file

@ -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);

2
qt/aqt/data/web/css/overview.scss
View file

@ -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;

2
qt/aqt/data/web/css/reviewer-bottom.scss
View file

@ -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;

24
qt/aqt/data/web/css/webview.scss
View file

@ -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;

2
qt/aqt/data/web/js/compile_ts.bzl
View file

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

2
qt/aqt/editor.py
View file

@ -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] = []

12
sass/BUILD.bazel
View file

@ -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"],
)

35
sass/button-mixins.scss → sass/_button-mixins.scss
View file

@ -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");
}

2
sass/_vars.scss
View file

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

22
sass/base.scss
View file

@ -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;
}

10
sass/bootstrap-forms.scss vendored Normal file
View file

@ -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;
}

25
sass/bootstrap-tooltip.scss vendored Normal file
View file

@ -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;
}
}

14
sass/buttons.scss
View file

@ -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;
}

19
ts/card-info/CardStats.svelte
View file

@ -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">
{#each statsRows as row, _index}
<tr>
<th style="text-align:start">{row.label}</th>
<td>{row.value}</td>
</tr>
{/each}
</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>
</Container>
<style>
.stats-table {

7
ts/card-info/card-info-base.scss
View file

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

9
ts/change-notetype/change-notetype-base.scss
View file

@ -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;

4
ts/components/DropdownItem.svelte
View file

@ -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;

7
ts/components/IconButton.svelte
View file

@ -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;
}

3
ts/components/LabelButton.svelte
View file

@ -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);

8
ts/components/SelectOption.svelte
View file

@ -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>

9
ts/congrats/BUILD.bazel
View file

@ -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",
],
)

22
ts/congrats/CongratsPage.svelte
View file

@ -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">
<div class="congrats-inner">
<Container class="d-flex justify-content-center pt-3">
<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>
.congrats-outer {
display: flex;
justify-content: center;
}
.congrats-inner {
<style lang="scss">
.congrats {
max-width: 30em;
font-size: var(--base-font-size);
:global(a) {
color: var(--link);
text-decoration: none;
}
}
.description {

7
ts/congrats/congrats-base.scss
View file

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

15
ts/deck-options/CardStateCustomizer.svelte
View file

@ -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;
}

44
ts/deck-options/deck-options-base.scss
View file

@ -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";
.night-mode {
@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;
}
@import "sass/bootstrap-forms";
@import "sass/bootstrap-tooltip";

12
ts/editable/BUILD.bazel
View file

@ -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_scss",
":editable_ts",
":editable_css",
"//ts/components",
"@npm//@mdi",
"@npm//protobufjs",

25
ts/editor/BUILD.bazel
View file

@ -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",

8
ts/editor/CodeMirror.svelte
View file

@ -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>

2
ts/editor/RichTextStyles.svelte
View file

@ -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,
];

30
ts/editor/Tag.svelte
View file

@ -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);
</style>

2
ts/editor/TagDeleteBadge.svelte
View file

@ -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
>

3
ts/editor/TagEditor.svelte
View file

@ -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) {

7
ts/editor/TagInput.svelte
View file

@ -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: 13px;
font-size: var(--base-font-size);
outline: none;
border: none;
margin: 0;

12
ts/editor/TagWithTooltip.svelte
View file

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

13
ts/editor/bootstrap.scss vendored
View file

@ -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";

4
ts/editor/code-mirror.ts
View file

@ -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";

57
ts/editor/editor-base.scss
View file

@ -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";
@use "scrollbar";
@use "button-mixins";
@import "sass/base";
html,
body {
height: 100%;
}
.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;
}
$btn-disabled-opacity: 0.4;
@import "sass/bootstrap/scss/buttons";
@import "sass/bootstrap/scss/button-group";
@import "sass/bootstrap/scss/dropdown";
@import "sass/bootstrap-tooltip";

7
ts/editor/index.ts
View file

@ -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>();

5
ts/editor/mathjax-overlay/Editor.svelte
View file

@ -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>

5
ts/graphs/graphs-base.scss
View file

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