How do I change the colour of (click: "")[(goto: "")] style links?

Question

tw-link
{
  color: #f1a056;
}

tw-link:hover
{
  color:  #FFDAB9;
}

tw-link.visited
{
  color: #f1a056;
}

tw-link.visited:hover
{
  color:  #FFDAB9;
}

So I've added this to the stylesheet and it does normal links fine. Most of the links in my story are however generated in this way: (click: "word")[(goto: "passage")]. How can I change their colour? At the moment they stay the default blue colour.

Answer 1

WARNING: Due to how the (click:) related macros are implemented any dynamic updating of the page (like that done by the (append:) & (replace:) macros) can cause the process that applies the (click:) macros link to its target to be run again. This process needs to scan the contents of whole page for each of active (click:) macros within the current passage, this scanning takes time and interferes with the user's ability to interact with the page.

RECOMMENDATION: Use the (link:) related macros instead, and only use the (click:) related macros when absolutely necessary.

The following are the current default CSS style rules used by:

Harlowe 1.x

tw-link, .enchantment-link {
    color: #4169E1;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

tw-link:hover, .enchantment-link:hover {
    color: DeepSkyBlue;
}

.visited {
    color: #6941e1;
}

.visited:hover {
    color: #E3E;
}

Harlowe 2.x

tw-link, .enchantment-link {
    color: #4169E1;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

tw-link:hover, .enchantment-link:hover {
    color: #00bfff;
}

.visited {
    color: #6941e1;
}

.visited:hover {
    color: #E3E;
}

note: You can use the Web Developer Tools built into modern web-browsers to Inspect the HTML elements that make up the structure of the story's page, and the CSS currently being applied to each of the elements of that structure.

Comments

Thanks Greyelf, you're a life saver as always.

The reason I use the (click:) macro is because this particular game works a bit like wikipedia. Every time a relevant word is mentioned it's a passage link. So one word for instance is "her". Making a link macro for every time the word "her" is mentioned is a pain in the arse. So every passage starts with a list of (click:) macros. It used to be a header with them in, but it slowed the passages down a lot with every passage (and click macro added), so I had to swap to doing it per passage instead of in a header. Having to do it per word would make it pretty much an impossible task. At the moment there are about 50 words and the amount keeps increasing.

Answer 2

On harlowe 2.2.1 I have this to change the colour of links in the stylesheet:

tw-hook[style*="color:"] tw-link, tw-hook[style*="color:"] .enchantment-link {
	color: inherit;
}

I'm not sure about 1.2.2 - sorry about that - but it's probably something similar.

Comments

I know about that one. Issue with it is that you have to then change the colour for every individual hook and there are a lot of them (and I want them all the same colour).