Remove the drop shadow on next/prev buttons

[razzeee]

Is your feature request related to a problem? Please describe.

I seem to not be able to remove the drop shadow on the next/previous buttons. I've tried various things and checked the code, but I'm unsure how to get around that.

Describe the solution you'd like

Either the shadow being overwriteable (as in removable) as I'm setting my own buttons in render

Describe alternatives you've considered

No response

Additional context

Trying to switch to this library coming from react-responsive-carousel

[igordanchenko]

Did you have a chance to review the customization document? While it doesn't call out the drop shadow property by name, it clearly describes multiple different approaches to customize the lightbox styles.

Here is how your can remove the drop shadow filter.

1. Using the buttons styles slot:

styles={{ button: { filter: "none" } }}

2. Via CSS variable:

styles={{ root: { "--yarl__button_filter": "none" } }}

3. With pure CSS:

.yarl__button { filter: none }

[razzeee]

Yeah, I've seen the page and tried via way 2. and actually with "--yarl__button_filter_drop_shadow": "unset", too, as I think the reason it's not removable is, that it's set in addition to the filter?

I've also tried none and unset and tried just now again, with way 2, but it doesn't work.

Tried 3 too, and didn't seem to work.

1. seems to work. Thank you.

[igordanchenko]

I think the reason it's not removable is, that it's set in addition to the filter?

I'm not sure what you mean.

and actually with "--yarl__button_filter_drop_shadow": "unset", too

This is not a valid YARL CSS variable. You can only use variables that are actually used in the stylesheet.

I've also tried none and unset and tried just now again, with way 2, but it doesn't work.

"it ain't working" is not a valid argument when you are not showing your code.

All 3 methods are working just fine.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-156-1-s8xw8h
https://codesandbox.io/p/sandbox/yet-another-react-lightbox-156-2-j5ykw6
https://codesandbox.io/p/sandbox/yet-another-react-lightbox-156-3-h35hpn

[razzeee]

Code is here flathub-infra/website#1686 currently using 1. which works fine.

It's used with the inline plugin. But could also just not work due to the project being setup differently. For what it's worth, I'm happy to use the button approach.

This is not a valid YARL CSS variable. You can only use variables that are actually used in the stylesheet.

I'm aware, just grasping at straws at that moment

[igordanchenko]

It's used with the inline plugin.

Ah, the devil is in the details. Turns out there was a bug in the Inline plugin. Fixed in v3.11.4