search

RobinCK / vue-gallery

:camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. 🇺🇦
https://robinck.github.io/vue-gallery/
MIT License
471 stars 84 forks source link

Lightbox prev, next and close symbols CSS #42

Open focussing opened 6 years ago

focussing commented 6 years ago

Please look at this and click on one of the graphs at the page-bottom.

The prev, next and close symbols are not shown. When I use the developer tools I can switch off color: inherit and they are back. I tried to set a prevClass option but that does not help.

`<gallery :images="images" :index="index" :options="{prevClass: 'prv'}" @close="index=null"> ...

.prv {
    color: white;
}

In your jsfiddle you do not set anything and your examples work fine. So I think maybe it has a relation with my usage of Bootstrap4.

How can I fix that?

focussing commented 6 years ago

Maybe add something like this in the component?

blueimp-gallery-controls a.close,
blueimp-gallery-controls a.next,
blueimp-gallery-controls a.prev,
blueimp-gallery-controls h3.title {
    color: white !important;
}
JonasJW commented 6 years ago

I found a solution to this. The color of the next button is based on the (text)color property. So when you change the color of the parent to white, it will effect the button color because its inherit. So I did this:

<vue-gallery :images="images" :index="index" @close="index = null" style="color: white;"> and now the button are white.

Hope this helps.

fajicbenjamin commented 6 years ago

You can also use deep selector as in

.blueimp-gallery >>> a { color: white!important; font-weight: 400; }

CrBoy commented 5 years ago

I am using Sass, so that >>> is not working. Use /deep/ instead, and it works fine.

chhamza commented 4 years ago

How to hide next, prev and cross controls?? And how to display download button on carousel?