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 https://github.com/LIPS-scheme/lips/pull/365#issuecomment-2125889109, 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 https://github.com/LIPS-scheme/lips/pull/365#issuecomment-2131170211, 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.