diff --git a/edit/codemirror-default.css b/edit/codemirror-default.css index 0a8ef287..03b50eea 100644 --- a/edit/codemirror-default.css +++ b/edit/codemirror-default.css @@ -75,6 +75,10 @@ .CodeMirror-linenumber { cursor: pointer; /* for bookmarking */ } +.cm-matchhighlight, +.CodeMirror-selection-highlight-scrollbar { + background: hsla(200, 100%, 50%, var(--match-hl-opacity, .1)); +} /* Custom stuff we add to CodeMirror */ @@ -86,6 +90,9 @@ } @media screen and (prefers-color-scheme: dark), dark { + .CodeMirror { + --match-hl-opacity: .18; + } .CodeMirror-dialog { background-color: #333; } diff --git a/edit/codemirror-factory.js b/edit/codemirror-factory.js index 92b4b9c3..9d5adae6 100644 --- a/edit/codemirror-factory.js +++ b/edit/codemirror-factory.js @@ -83,6 +83,7 @@ const opt = (showToken || value === 'selection') && { showToken, annotateScrollbar: true, + delay: 0, onUpdate: updateMatchHighlightCount, }; cm.setOption('highlightSelectionMatches', opt || null); diff --git a/edit/edit.css b/edit/edit.css index 5485b05a..9fe32b74 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -510,15 +510,6 @@ label { .resize-grip-enabled .CodeMirror-scrollbar-filler { bottom: 7px; /* make space for resize-grip */ } -body:not(.find-open) .cm-matchhighlight, -body:not(.find-open) .CodeMirror-selection-highlight-scrollbar { - animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98); - animation-fill-mode: both; -} -body:not(.find-open) [data-match-highlight-count="1"] .cm-matchhighlight, -body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-highlight-scrollbar { - animation: none; -} @keyframes highlight { from { background-color: #ff9; @@ -535,10 +526,6 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high opacity: 1; } } -@keyframes fadein-match-highlighter { - from { background-color: transparent; } - to { background-color: rgba(1, 151, 193, 0.1); } -} .resize-grip { position: absolute; display: block;