Different opacity of lightbox widgets?

Community resources Webflow Tips
1

So I changed my lightbox background to white (like an actual lightbox!).
Then I did not like the white widgets and replaced them with skinnier black ones by adding some custom code (see below, somehow the opening and closing style tags are suppressed.)
However, although I rendered my three svg-widgets the same way (line width and colors), the close X looks darker than the left < and right > (all without hover as shown left). When hovering they look the same (shown right.) I suspect there is a different level of opacity applied somehow, but how to find out and adjust?

lightbox-widgets

My custom code:

<style>
.w-lightbox-backdrop {background: rgba(255,255,255,1);}
.w-lightbox-close { background-size: 21px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 21 21' width='21' height='21'%3E%3Cg transform='rotate(45)'%3E%3Cpath d='m0 0h12v-12h3v12h12v3h-12v12h-3v-12h-12z' opacity='.3' /%3E%3Cpath d='m1 1h12v-12h1v12h12v1h-12v12h-1v-12h-12z' /%3E%3C/g%3E%3C/svg%3E");}  
.w-lightbox-left { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 0 24 40' width='24' height='40'%3E%3Cg transform='rotate(45)'%3E%3Cpath d='m0 0h3v25h25v3h-28z' opacity='.3'/%3E%3Cpath d='m1 1h1v25h25v1h-26z' /%3E%3C/g%3E%3C/svg%3E");}
.w-lightbox-right { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 24 40' width='24' height='40'%3E%3Cg transform='rotate(45)'%3E%3Cpath d='m0-0h28v28h-3v-25h-25z' opacity='.3'/%3E%3Cpath d='m1 1h26v26h-1v-25h-25z' /%3E%3C/g%3E%3C/svg%3E");}0
</style>
2

Snooping around in webflow.css I found my assumption true:

.w-lightbox-left,
.w-lightbox-right { display: block;  opacity: .5;}
.w-lightbox-close { opacity: .8; }

So I added one more line to my custom code and all is great now:

.w-lightbox-close, .w-lightbox-left, .w-lightbox-right { opacity: .5; }

Although I could take down my question, maybe somebody else will benefit from keeping it up.

1 Like