Fix slideshow controls alignment

[MattNotarangelo]

Summary

Small PR to fix the slider alignment

• Centers the page number readout by removing the default left: -0.3em offset on .slideshow-nav-readout
• Aligns the slider with the pause button by zeroing the asymmetric vertical margins (-11px top, 7px bottom) on the jQuery UI slider
• Rounds all corners of the pause button evenly instead of only the right side (ui-corner-right)

Before

After

Console commands to test before merging:

var s = document.createElement('style');
s.innerHTML = '.srf-slideshow .slideshow-nav-readout { left: 0; } .srf-slideshow .slideshow-nav.ui-slider { margin-top: 0; margin-bottom: 0; } .srf-slideshow .slideshow-nav-wrapper .ui-button-icon-only { border-radius: 4px; }';
document.body.appendChild(s);

[hcooper]

Thanks for addressing this @MattNotarangelo - I hadn't even noticed the problem, but now I do I can't unsee it!

It looks like this is solely injecting css. Would it be better to place this in the central css config instead? (The setup is just like js, but for css: https://github.com/RopeWiki/commoncss)

[MattNotarangelo]

Thanks for addressing this @MattNotarangelo - I hadn't even noticed the problem, but now I do I can't unsee it!

It looks like this is solely injecting css. Would it be better to place this in the central css config instead? (The setup is just like js, but for css: RopeWiki/commoncss)

Ah yep good callout. I'll make a new PR there!

[MattNotarangelo]

Moved to commoncss repo (RopeWiki/commoncss#1). Closing