How to style the Sidebar buttons in Harlowe?

Question

I've searched through the forums, but I can't seem to figure out how to change the color of the forward/backward arrows in the default Sidebar in Harlowe.

With a black background color, I'd like to make them easier to see, changing them to a light gray, then white on mouse hover.  

I tried adding this inline CSS:

<style>
tw-sidebar { color: #DCDCDC; }
</style>

This seemed to change the on-hover color only, but not the resting state of the button.  What do I need to target, if this is possible?

Thanks!

System:

Mac OS Sierra, Twine 2.1.3, Harlowe 2.0.1

Answer 1

Looking at the console, it appears that the <tw-icon> elements containing the buttons are controlled by opacity rather than color, which is pretty neat.

That said I can't for the life of me seem to get the opacity property to obey me using straight CSS, and using jQuery for that (I haven't tried yet) seems like overkill.

This isn't an answer (at least it isn't a good one), but just know that whatever you want to do to those buttons, you'll probably need to get at that opacity first from what I can tell.

Comments

This comment in the How do I replace or style the Back and Forward buttons? thread on the Forum explains which CSS selectors to use to style (colour / opacity) the Undo and Redo links.

The How to make the navigation arrows darker? thread on the Forum shows how to make them darker using the bold property.

 

---

Fantastic resources.  Thank you.

I used this style code in the passage:

<style>
			tw-icon.undo {
				color: white;
				opacity: 0.50;
				}
			tw-icon.redo { 
				color: white;
				opacity:0.50;
				}
			tw-icon:hover {
				color: white;
				opacity: 1.0;
				}
	</style>\

It works very well.  I've tried a few different configurations to implement it into my stylesheet based on tags, but it doesn't seem to work.  What would be the proper CSS syntax?  This is my current style:

body, tw-story[tags~="story_dark"]
{
  background-color: #000000;
  color: #ffffff;
  tw-link color: #422424;
}