Made reference filter bar sticky and added some styles

[vidhihattar]

The reference filter bar is sticky and I added some styles to it as well.

This is how it looks like.

[jcubic]

It looks good, but this is how it looks in Dark Mode:

[jcubic]

You can use html[data-theme=dark] selector to change color only for dark mode.

[vidhihattar]

Okay! will do.

…

On Thu, May 23, 2024 at 4:09 AM Jakub T. Jankiewicz < ***@***.***> wrote: You can use html[data-theme=dark] selector to change color only for dark mode. — Reply to this email directly, view it on GitHub <#365 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUILXCMS5TXAK77SMC3JJGLZDUNBXAVCNFSM6AAAAABIEJSCQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRVHA4DSMJQHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[vidhihattar]

This is how it looks now:

Let me know if you'd like any changes.

[jcubic]

I think that you can use one color from CSS variable added by Docusaurus:

background-color: var(--ifm-background-color);

[vidhihattar]

do you mean that i should remove this whole:
html[data-theme=dark] .input{
background-color: #1b1b1d;
}
and add the variable to .input class?
if so then for light mode the search area becomes transparent like this :

or should I just add the variable to this html[data-theme=dark] .input?

[jcubic]

Yeah, you're right, then use:

.input {
  /* ... */
  background-color: #fff;
}

html[data-theme=dark] .input {
  background-color: var(--ifm-background-color);
} 

[vidhihattar]

Made the changes, please check.

[jcubic]

One more thing, when you click on the anchor (h2 tag) the header is not visible behind the search bar.

You need to overwrite this CSS

.anchorWithStickyNavbar_node_modules-\@docusaurus-theme-classic-lib-theme-Heading-styles-module {
    scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
}

To increase the offset. So the header is visible below the search bar. You can also save the height of input in variable same:

:root {
    --lips-search-height: 80px;
}

And use in both places.

[vidhihattar]

Got it, will do.

…

On Sat, May 25, 2024 at 3:26 PM Jakub T. Jankiewicz < ***@***.***> wrote: One more thing, when you click on the anchor (h2 tag) the header is not visible behind the search bar. You need to overwrite this CSS .***@***.*** { scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem); } To increase the offset. So the header is visible below the search bar. You can also save the height of input in variable same: :root { --lips-search-height: 80px; } And use in both places. — Reply to this email directly, view it on GitHub <#365 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUILXCKISWM3U34Z57UTDZDZEBN4RAVCNFSM6AAAAABIEJSCQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGE3TAMRRGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[vidhihattar]

Made the changes, please check.

[jcubic]

Looks good. Thanks for your contribution.