feat: added hover effect on the clear button

[Bashamega]

I have added a hover effect on the clear button.

[netlify]

✅ Deploy Preview for scientific-python-hugo-theme ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3cc3e1c
🔍 Latest deploy log	https://app.netlify.com/sites/scientific-python-hugo-theme/deploys/67cb308a5712db0008b60b0b
😎 Deploy Preview	https://deploy-preview-669--scientific-python-hugo-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 97 Accessibility: 100 Best Practices: 100 SEO: 91 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stefanv]

Not sure why, the classes look OK, but it doesn't work for me in Firefox.

[Bashamega]

Hello @stefanv,

Thank you for your reply.

This is my first time contributing to this repository or any Hugo theme. I wasn’t able to see my changes locally, so I copied my CSS changes and applied them via the browser's inspect tool.

Could you guide me on how to set up the theme locally?

Thanks!

[agriyakhetarpal]

I think the reason why it doesn't work is because Svelte appends an identifier at the end of the class, so it's always pagefind-ui__search-clear svelte-e9gkc3 or so on, so it would need to be accessed in the CSS as .pagefind-ui__search-clear.svelte-e9gkc3. I imagine we can't do that as this will be different on each build of the site.

Perhaps https://pagefind.app/docs/ui-usage/#customising-the-styles would be useful? It mentions:

Pagefind UI can be styled manually by omitting the /pagefind/pagefind-ui.css stylesheet. In this case it will function as a pure HTML component.

so we could probably copy the styles and override the ones we need. However, that means we won't get any updates to the styles that Pagefind makes.