Think I have stumbled across a bug relating to loading of custom CSS when running in “om” (distraction-free) mode.
I am trying to customize the CSS for #findInput (basically the width of #findInput) when running in “om” (distraction-free) mode, however the custom CSS is down-prioritized when #findInput receives focus (by #findInput.focused).
This is not an issue in non-distraction-free mode, as there is no CSS overloading that happens when the #findInput receives focus.
The above issue makes it impossible to be able to customize the search field in the distraction-free mode.
Could you please tell what exactly you’d like to do with CSS? Just increase the width of the #findInput?
You can specify a couple of CSS rules, like #findInput, #findInput.focused - would it work?
Yes, I have already tried to customize the width using #findInput and #findInput.focussed.
But that does not work due to the issue I described in my post i.e. my custom CSS is down-prioritized when #findInput receives focus (by #findInput.focused) (e.g. when it has a search filter).
I have tested this in distraction-free mode.
However, after playing around, what did work was setting the following CSS
span#ffContainer {
width: 200px;
}
With this I am able to set the width. I am not sure if this is the ideal solution, but it does work as compared to #findInput which does not work.
