Styling the find and replace result "flash"


#1

When you tab from one find and replace result to the next within a buffer, the new one flashes or pulses once and then is highlighted slightly differently from the others. Unfortunately for me, I’m using a dark background and the flash color is a dark blue … almost unnoticeable unless I’m looking right at it. I’d like to change the color to something like sunburst-burn-your-eyes-out-yellow like in Chrome, XCode and other OS X applications.

Does anyone know where the styling for this animation is? I haven’t been able to find it.


What is the class used to style the search results?
Archived FAQs (see FAQ category for all current FAQs)
FAQ: Best Practices
#2

I agree, I’m also using a dark syntax theme and the blue color is hard to see. Finally tracked down how to change it. Add the following to your stylesheet (~/.atom/styles.less):

@syntax-selection-flash-color: #FFFF00;

@-webkit-keyframes flash {
  from { background-color: @syntax-selection-flash-color; }
  to { background-color: null; }
}

I am not sure why only setting the variable is not enough, but without the bottom part it stays blue for me.

Reference: the ability to flash selections was added in the this pull request (see here for the commit adding the flash class):


#3

To my understanding, this is because the styles.less is loaded at a different time than the stylesheets from the packages … so the package stylesheets have had their variables all compiled out of them. In other words, variables can be inherited by styles.less (using @import) but not the other way around.

And the change works great, thanks!


#4

True, the user stylesheet is always loaded at the end, it makes overriding styles less painful as, given a same specificity, the last definition always prevail.

@leedohm This is typically the type of q/a that I would pick into an atom digest. Maybe we can start bookmarking all these useful tricks for later :wink:


#5

Thanks for the clarification @leedohm @abe, makes perfect sense.


#6

Generally, styling the highlighted results would be nice. Is there a way for the boxes around results to be changed?

I’m a fan of subtlety, don’t get me wrong. But this is really taking it a bit too far on my theme:


#7

Hmm, if you’re using the built-in find and replace the highlights can be targeted using the following rules:

  • .highlight.current-result: The result that is actually selected.
  • .highlight.find-result: The styles for all the other results.

Changing their border-color property should be enough to make them stand out.


#8

Excellent, thank you. I’ll try this out and see what works best for me.


#9

hi,
i added to style.less`but not work?
thanks

.highlight.current-result {
    border-color: red;
}
.highlight.find-result {
    border-color: red;
}

idk


#10

Your selectors are not complete, here what’s you should write:

.editor .current-result .region {
    border-color: red;
}
.editor .find-result .region {
    border-color: red;
}

The thing is that the .highlight div is just a wrapper for one or many regions (you got many regions when the highlight span multiple rows) so you need to styles the regions and not just the highlight.

Another thing that play is that you must use a selector that is at least as strong as the original selector that apply. In that case search highlights selector is .editor .find-result .region, so if you omit the .editor your selector will have a lesser strength and won’t prevail. You can always use an !important rule but as it’s considered harmful you should try to avoid it at all cost.


#11

I know this is old, but…

When you guys are using a theme with result highlights that are too subtle, can you open an issue on the syntax theme? There are defaults set, but they are probably incorrect for many themes.


"Syntax" Theme Terminology
#12

I’d love to experiment with removing the flash. (I’m coming from Sublime, where it does not exist, and I don’t feel the need to waste time on an animation that makes things feel slower.) I’m not famililar with CSS keyframes or how it’s being referenced in Atom. Is the best way to just:

@keyframes flash { /* a single keyframe that is the selection color */ }

…or should I be modifying a higher rule to not use the animation at all? If the latter, what is that rule?


#13

Ah, found it. You can modify the @keyframes (as shown above) if you want to reduce the number or color of the blinks. Or, you can modify the atom-text-editor .flash.selection .region if you want to speed up the animation:

atom-text-editor .flash.selection .region { animation-duration: .1s }

…or if you want to disable it altogether:

atom-text-editor .flash.selection .region { animation-name: none }

I’m currently torn between completely disabled (crisp, like Sublime) versus a single, fast flash:

@keyframes flash { from { background-color: rgba(255,255,255,0.5) } }
atom-text-editor .flash.selection .region { animation-duration: .2s }

Advice to interface designers: while a slow animation usually looks pretty, a quick animation is often far more functional. IMHO. YMMV.