5f6ac1a916
* Adjust size of legacy buttons * Revert "Adjust size of legacy buttons" This reverts commit fb888fe1db9050c34b1a7b0820e6da5ac91ccee6. * Remove unused function from #1476 * Use outline version for tag icon * Add chevron icons * Remove code icons, keep one pin icon version * Add code-bg color * Redesign fields * Remove unused import * Fix imports * Move PlainTextBadge between editing inputs where it belongs :) * Make whole separator line clickable * Fix transition and format * Don't show toggle when field is collapsed * Show toggle only on hover for mobile I'd like to implement a swipe mechanism. * Use tweened SVG for triangle instead of CSS hack * Implement more obvious HTML toggle on bottom right * Reduce field height by a few pixels * Reduce field height by two pixels * Show HTML toggle when PlainTextInput is active, regardless of hover/focus * Remove RichTextBadge.svelte * Create separate collapsed field state this means users can collapse fields with the HTML editor open and it will stay open when the field is expanded again. * Add slide out animation to EditingArea, RichTextInput and PlainTextInput only for collapsing, because it is choppy on expansion (common issue with Svelte transitions). * Fix aliasing issue on focused field corners * Make StickyBadge feel more responsive * Move StickyBadge closer to field border * Adjust field gutter/margins * Make LabelContainer sticky to make field operations accessible on fields with a lot of content. * Add back html icons, remove visual editor icons * Revert "Add code-bg color" This reverts commit 4200f354193710b3acd9bcf84b67958e200ddcdb. * Add rich text icon, remove strikethrough code icon * Revert PlainTextBadge to original position * Adjust margins in FieldState * Rename PlainTextBadge to SecondaryInputBadge in preparation for #1987 * Run eslint and prettier * Make whole LabelContainer clickable area for collapse/expand * Revert "Add slide out animation to EditingArea, RichTextInput and PlainTextInput" This reverts commit 9a2b3410d0ead37ae1da408d68e14507a058a613. * Fix error on collapse/expansion this was caused by the {#if} blocks, which resulted in the deletion of original EditingAreas. * Refocus when toggling chevron and secondary input badge * Revert "Revert "Add code-bg color"" This reverts commit 1cfd3bda65354ab90c1ab4cbbef47596a1be8754. * Use single rotating chevron icon and make it RTL-compatible * Remove redundant CSS transition rule * Introduce animated Collapsible component and fix refocus on toggle * Do not try to force repaint, as it is not required * Remove RTL store from LabelContainer the direction is already applied globally. * Collapse secondary input with field * Add focusedField to NoteEditorAPI * Replace :global CSS selector with class .visible thus removing the assumption that the component is used inside an EditorField. https://github.com/ankitects/anki/pull/2002#discussion_r944876448 * Use named function syntax instead of function expressions * Add explanation comment * Remove unnecessary :bind directive * Create CollapseBadge component * Move :global selector into .plain-text-input * Add comment explaining box-shadow pseudo-element * Move Collapsible from EditingArea, PlainTextInput and RichTextInput into user components * Rename SecondaryInputBadge to PlainTextBadge and remove generalization logic I kept the rich text icon inside icons.ts for future use. * Sort imports * Fix background-color for duplicates not showing with yet another pseudo-element :) The pseudo-element that covers up field borders on scroll caused this issue. Fighting fire with fire here. * Increase size of plain text toggle to original value again This makes the clickable area a bit bigger and looks slightly more consistent with StickyBadge. * Scrap pseudo-element mess in LabelContainer and tackle the actual issue * Add class .visible to StickyBadge too This introduces a peculiar bug: The active prop of StickyBadge resets to false when the mouse leaves the field - regardless of the actual back-end value. * Fix sticky badge resetting on mouseleave/blur * Apply overflow: hidden only during transition fixes MathJax handle getting cut off by fields * Remove unused variable * Fix visual bug caused by overflow:hidden not applying in time I tried several asynchronous approaches, but they all caused issues: either they prevented the CSS transition or they made field inputs lose focus. In the end I resorted to direct, synchronous DOM-manipulation and added an explanatory comment. * Decrease Collapsible load time by blocking first transition I noticed the sliding animation has a hefty performance impact when a large number of fields is loaded simultaneously. Blocking the first transition (which isn't even visible) results in a big boost in load time. * Replace usages of gap with margins for children * Revert unnecessary removal of grid-gap definition * Correct comments about flex-gap property mistook that for grid-gap. * Resolve style issues * Add minimum targets to gap comment Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
84 lines
2.1 KiB
SCSS
84 lines
2.1 KiB
SCSS
/* Copyright: Ankitects Pty Ltd and contributors
|
|
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
|
|
|
|
:root {
|
|
--text-fg: black;
|
|
--window-bg: #ececec;
|
|
--frame-bg: white;
|
|
--border: #aaa;
|
|
--medium-border: #b6b6b6;
|
|
--faint-border: #e7e7e7;
|
|
--link: #00a;
|
|
--review-count: #0a0;
|
|
--new-count: #00a;
|
|
--learn-count: #c35617;
|
|
--zero-count: #ddd;
|
|
--slightly-grey-text: #333;
|
|
--highlight-bg: #77ccff;
|
|
--highlight-fg: black;
|
|
--disabled: #777;
|
|
--flag1-fg: #e25252;
|
|
--flag2-fg: #ffb347;
|
|
--flag3-fg: #54c414;
|
|
--flag4-fg: #578cff;
|
|
--flag5-fg: #ff82ee;
|
|
--flag6-fg: #00d1b5;
|
|
--flag7-fg: #9649dd;
|
|
--flag1-bg: #ff9b9b;
|
|
--flag2-bg: #ffb347;
|
|
--flag3-bg: #93e066;
|
|
--flag4-bg: #9dbcff;
|
|
--flag5-bg: #f5a8eb;
|
|
--flag6-bg: #7edbd7;
|
|
--flag7-bg: #cca3f1;
|
|
--buried-fg: #aaaa33;
|
|
--suspended-fg: #dd0;
|
|
--suspended-bg: #ffffb2;
|
|
--marked-bg: #cce;
|
|
--tooltip-bg: #fcfcfc;
|
|
--focus-border: #0969da;
|
|
--focus-shadow: rgba(9 105 218 / 0.3);
|
|
--code-bg: white;
|
|
}
|
|
|
|
:root[class*="night-mode"] {
|
|
--text-fg: white;
|
|
--window-bg: #2f2f31;
|
|
--frame-bg: #3a3a3a;
|
|
--border: #777;
|
|
--medium-border: #444;
|
|
--faint-border: #29292b;
|
|
--link: #77ccff;
|
|
--review-count: #5ccc00;
|
|
--new-count: #77ccff;
|
|
--learn-count: #ff935b;
|
|
--zero-count: #444;
|
|
--slightly-grey-text: #ccc;
|
|
--highlight-bg: #77ccff;
|
|
--highlight-fg: white;
|
|
--disabled: #777;
|
|
--flag1-fg: #ff7b7b;
|
|
--flag2-fg: #f5aa41;
|
|
--flag3-fg: #86ce5d;
|
|
--flag4-fg: #6f9dff;
|
|
--flag5-fg: #f097e4;
|
|
--flag6-fg: #5ccfca;
|
|
--flag7-fg: #9f63d3;
|
|
--flag1-bg: #aa5555;
|
|
--flag2-bg: #ac653a;
|
|
--flag3-bg: #559238;
|
|
--flag4-bg: #506aa3;
|
|
--flag5-bg: #975d8f;
|
|
--flag6-bg: #399185;
|
|
--flag7-bg: #624b77;
|
|
--buried-fg: #777733;
|
|
--suspended-fg: #ffffb2;
|
|
--suspended-bg: #aaaa33;
|
|
--marked-bg: #77c;
|
|
--tooltip-bg: #272727;
|
|
--focus-border: #316dca;
|
|
--focus-shadow: #194380;
|
|
--code-bg: #272822;
|
|
color-scheme: dark;
|
|
}
|