anki/ts/editable/editable-base.scss

@use "sass/scrollbar";

* {
    max-width: 100%;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;

    &:empty::after {
        content: "\a";
        white-space: pre;
    }
}

[hidden] {
    display: none;
}

:host(body) {
    @include scrollbar.custom;
}

pre {
    white-space: pre-wrap;
}
Put sass into repo directory (#1409) Fix Sass build 2021-10-09 02:25:03 +02:00			`@use "sass/scrollbar";`
Fix scrollbar issue in anki-editable component in two ways - using :host-context(.nightMode) allows for applying the nightmode scroll bar inside the component - apply max-width: 100% to all element within editable, not just images 2021-02-23 15:52:20 +01:00
Translate Editor entirely to Svelte (#1403) * Translate editor to Svelte Make editor fields grid rather than flexbox Refactor ButtonToolbar margins Remove remaining svelte.d.ts symlinks Implement saveNow Fix text surrounding Remove HTML editor button Clean up some empty files Add visual for new field state badges * Adds new IconConstrain.svelte to generalize the icon handling for IconButton and Badge Implement sticky functionality again Enable Editable and Codable field state badges Add shortcuts to FieldState badges Add Shift+F9 shortcut back Add inline padding back to editor fields, tag editor and toolbar Make Editable and Codable only "visually hidden" This way they are still updated in the background Otherwise reshowing them will always start them up empty Make empty editing area focusable Start with moving fieldsKey and currentFieldKey to context.ts Fix Codable being wrong size when opening for first time Add back drag'n'drop Make ButtonItem display: contents again * This will break the gap between ButtonGroup items, however once we have a newer Chromium version we should use CSS gap property anyway Fix most of typing issues Use --label-color background color LabelContainer Add back red color for dupes Generalize the editor toolbar in the multiroot editor to widgets Implement Notification.svelte for showing cloze hints Add colorful icon to notification Hook up Editable to EditingArea Move EditingArea into EditorField Include editorField in editor/context Fix rebasing issues Uniformly use SvelteComponentTyped Take LabelContainer out of EditingArea Use mirror-dom and node-store to export editable content Fix editable update mechanism Prepare passing the editing inputs as slots Pass in editing inputs as slots Use codable options again in codemirror Delete editor/lib.ts Remove CodableAdapter, Use more generic CodeMirror component Fix clicking LabelContainer to focus Use prettier Rename Editable to ContentEditable Fix writing Mathjax from Codable to Editable Correctly adjust output HTML from editable Refactor EditableStyles out of EditableContainer Pass Image and Mathjax Handle via slots to Editable Make Editable add its editingInputApi Make Editable hideable Fix font size not being set correctly Refactor both fieldFocused and focusInCodable to focusInEditable Fix focusIfField Bring back $activeInput Fix ClozeButton Remove signifyCustomInput Refactor MathjaxHandle Refactor out some logic into store-subscribe Fix Mathjax editor Use focusTrap instead of focusing div Delegate focus back to editingInput when refocusing focusTrap Elegantly move focus between editing inputs when closing/opening Make Codable tabbable Automatically move caret to end on editable and codable + remove from editingInput api Fix ButtonDropdown having two rows and missing button margins Make svelte_check and eslint pass Satisfy editor svelte_check Save field updates to db again Await editable styles before mounting content editable Remove unused import from OldEditorAdapter Add copyright header to OldEditorAdapter Update button active state from contenteditable * Use activateStickyShortcuts after waiting for noteEditorPromise * Set fields via stores, make tags correctly set * Add explaining comment to setFields * Fix ClozeButton * Send focus and blur events again * Fix Codable not correctly updating on blur with invalid HTML * Remove old code for special Enter behavior in tags * Do not use logical properties for ButtonToolbar margins * Remove getCurrentField Instead use noteEditor->currentField or noteEditor->activeInput * Remove Extensible type * Use context-property for NoteEditor, EditorField and EditingArea * Rename parameter in mirror-dom.allowResubscription * Fix cutOrCopy * Refactor context.ts into the individual components * Move focusing of editingArea up to editorField * Rename promiseResolve -> promiseWithResolver * Rename Editable->RichTextInput and Codable->PlainTextInput * Remove now unnecessary type assertion for `getNoteEditor` and `getEditingArea` * Refocus field after adding, so subscription to editing area is refreshed 2021-10-18 14:01:15 +02:00			`* {`
			`max-width: 100%;`
Fix some cases where Mathjax whitespace formatting is destroyed 2021-08-06 18:39:08 +02:00			`}`

Add CSS for making empty paragraph elements visible 2021-04-19 16:03:47 +02:00			`p {`
			`margin-top: 0;`
			`margin-bottom: 1rem;`

			`&:empty::after {`
			`content: "\a";`
			`white-space: pre;`
			`}`
			`}`

Make editable hide correctly when activating codable 2021-06-17 19:08:14 +02:00			`[hidden] {`
			`display: none;`
			`}`
Fix custom CSS not being applied to scrollbars in night mode (#1525) 2021-12-04 23:20:42 +01:00
Redesign Qt widgets with stylesheets (#2050) * Remove --medium-border variable * Implement color palette using Sass maps I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette. Significant changes: - light theme is brighter - dark theme is darker - borders are softer I also deleted some platform- and night-mode-specific code. * Use custom colors for note view switch * Use same placeholder color for all inputs * Skew color palette for more dark values by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones. * Adjust frame- window- and border colors * Give deck browser entries --frame-bg as background color * Define styling for QComboBox and QLineEdit globally * Experiment with CSS filter for inline-colors Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme. * Use different map structure for _vars.scss after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871 * Move custom QLineEdit styles out of searchbar.py * Merge branch 'main' into color-palette * Revert QComboBox stylesheet override * Align gray color palette more with macOS * Adjust light theme * Add custom styling for Qt controls * Use --slightly-grey-text for options tab color * Replace gray tones with more neutral values * Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. * Saturate highlight-bg in light theme * Tweak gray tones * Adjust box-shadow of EditingArea to make fields look inset * Add Sass functions to access color palette and semantic variables in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076 * Showcase use of access functions in several locations @hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."? * Fix focus box shadow transition and remove default shadow for a cleaner look I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing. * Tweak light theme border and shadow colors * Add functions and colors to base_lib * Add vars_lib as dependency to base_lib and button_mixins_lib * Improve uses of default-themed variables * Use old --frame-bg color and use darker tone for canvas-default * Return CSS var by default and add palette-of function for raw value * Showcase use of palette-of function The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice. * Light theme: decrease brightness of canvas-default and adjust fg-default * Use canvas-inset variable for switch knob * Adjust light theme * Add back box-shadow to EditingArea * Light theme: darken background and flatten transition also set hue and saturation of gray-8 to 0 (like all the other grays). * Reduce flag colors to single default value * Tweak card/note accent colors * Experiment with inset look for fields again Is this too dark in night mode? It's the same color used for all other text inputs. * Dark theme: make border-default one shade darker * Tweak inset shadow color * Dark theme: make border-faint darker than canvas-default meaning two shades darker than it currently was. * Fix PlainTextInput not expanding * Dark theme: use less saturated flag colors * Adjust gray tones * Create stylesheet overrides for various Qt widgets Including QPushButton, QComboBox, QSpinBox, QLineEdit, QListWidget, QTabWidget, QTreeWidget, QToolTip, QTableView, QScrollBar and sub-widgets. * Make webview scrollbar look identical to Qt one * Add blue colors for primary buttons * Tweak disabled state of SpinBox button * Apply styles to all platforms mainly so people like @hgiesel can easily test the widget style overrides, but maybe you actually prefer them over the native ones, who knows :) * Tweak webview button borders * Add type annotations to eventFilter * Adjust padding of QComboBox and its drop-down arrow * Use isinstance for comparison * Remove reimport of Any * Revert "Merge branch 'redesign-test' into custom-qt-controls" This reverts commit ff36297456b693a0d4b4b69f5f487ac1a01c1861, reversing changes made to 6bb45355d143aa081d2d643933bd02ddc43206de. * Add missing copyright header * Left-align QTabWidget headers * Exclude macOS from stylesheet overrides * Fix failure to start on macOS (dae) * Use standard macOS theme in dark mode (dae) I believe this was originally behind a feature flag because the user had to use a hack to get it to work (https://forums.ankiweb.net/t/title-bar-dark-mode-fix-broken/1189), and it did not work correctly when the system theme was changed. Since the introduction of libankihelper and the app automatically updating as the system theme changes, these issues no longer seem to exist, and switching between light and dark appears to work consistently. Pushed into this PR because it addresses the background color issue mentioned in code review. Closes #2054 2022-09-08 12:44:38 +02:00			`:host(body) {`
			`@include scrollbar.custom;`
Fix custom CSS not being applied to scrollbars in night mode (#1525) 2021-12-04 23:20:42 +01:00			`}`
Break long words in pre tags (#2045) * Break long words in pre tags * Move rule to editable-base.scss 2022-09-01 15:31:47 +02:00
			`pre {`
			`white-space: pre-wrap;`
			`}`