Changing link colors for tagged passages in Harlowe?

CMG

I'm trying to make a specific style to use for certain tagged passages. Right now I have this code in a passage called Header, which is also tagged header:

{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}

Then in my Story Stylesheet, I've got some code like this:

html.dim tw-passage {
	color: gray;
}

It works. I just add the tag "dim" to a passage and all the text becomes gray. But I want to make the links also become gray, particularly the click-replace links. Right now I have this code, but it does not work:

html.dim enchantment-link, tw-link {
	color: gray;
	font-weight: normal;
	text-decoration: underline;
}
html.dim enchantment-link:hover, tw-link:hover {
	color: gray;
	font-weight: normal;
}
html.dim enchantment-link:active, tw-link:active {
	color:black;
	font-weight: normal;
	outline: none;
	text-shadow: 0px 0px 0px gray;
}

I feel like I'm close and just using the wrong syntax? Maybe I'm not close at all. Any help would be appreciated!

TheMadExile

I don't know if you're styling the correct elements, however, the second selectors with your rules are incomplete.

For example, the following lines:

html.dim enchantment-link, tw-link {
html.dim enchantment-link:hover, tw-link:hover {
html.dim enchantment-link:active, tw-link:active {

Should be:

html.dim enchantment-link, html.dim tw-link {
html.dim enchantment-link:hover, html.dim tw-link:hover {
html.dim enchantment-link:active, html.dim tw-link:active {

Each selector within the group is a separate entity, so each must contain everything necessary to select the elements you want.

CMG

Oh right, thanks! Yeah, I just changed it and this still doesn't seem to work:

html.dim enchantment-link, html.dim tw-link {
	color: gray;
	font-weight: normal;
	text-decoration: underline;
}
html.dim enchantment-link:hover, html.dim tw-link:hover {
	color: gray;
	font-weight: normal;
}
html.dim enchantment-link:active, html.dim tw-link:active {
	color:black;
	font-weight: normal;
	outline: none;
	text-shadow: 0px 0px 0px gray;
}

CMG

I should've waited a little longer to ask this question... I just figured it out myself. I was indeed styling the wrong elements! This is what I needed:

html.dim tw-hook tw-link, html.dim tw-hook .enchantment-link {
	color: gray;
	font-weight: normal;
	text-decoration: underline;
}

greyelf

This comment in the Harlowe -Changing color of text when hovering over a link... thread explains which CSS selectors are used by Harlowe to represent the standard normal, hover, and visited link states.

Based on that information your example could look something like the following:

html.dim tw-link, html.dim .enchantment-link {
    ...
}
html.dim tw-link:hover, html.dim .enchantment-link:hover {
    ...
}
html.dim .visited {
    ...
}
html.dim .visited:hover {
    ...
}

note: The above has not been tested, and I have never tried the :active state.