search

jessuni / shikwasa

An audio player born for podcast
https://shikwasa.js.org
MIT License
477 stars 31 forks source link

Some SVG icons not visible #12

Closed flvx closed 4 years ago

flvx commented 5 years ago

Using /dist the svg images for download, rewind, forward, and volume are not visible in the player. ThemeColor has been declared in the script creating an instance of the player and is correctly applied to all other elements. Same faulty behavior using Safari 12 and Chrome build 77.0.3865.120. Can you please help?

jessuni commented 5 years ago

Sorry for the late reply. Did you import the stylesheet? Please make sure that you import the stylesheet from shikwasa/dist/shikwasa.min.css I created a simple demo here https://jsfiddle.net/jessuni/netgvbwy/

flvx commented 5 years ago

Thanks. I did of course import the css. But you got me thinking. For my website I'm using Bulma [https://bulma.io], a free, open source CSS framework based on Flexbox, and that's what is affecting the display of the SVG images of your beautiful script. Removing the reference to Bulma css, all controls in your script are shown. Unfortunately, I do not have the time to address the issue right now, but you may want to have a look at it as Bulma is used by many developers. Thanks!

jessuni commented 5 years ago

The problem is Bulma hardwiring box-sizing of all elements to inherit:

*, *::before, *::after {
  box-sizing: inherit;
}

I'll add a rule to prevent icons from disappearing in the next version. A temporary solution will be applying an extra line of code to your stylesheet:

.shk_btn svg {
  box-sizing: content-box;
}

The updated jsfiddle: https://jsfiddle.net/jessuni/netgvbwy/4/

flvx commented 5 years ago

Thanks. That solved the issue. Looking forward to Shikwasa next releases especially for playlist support. Keep up the good work <3

jessuni commented 4 years ago

This is fixed under v2.0.0-beta.0. Closing the issue.