You could play with the code that follows...
///set basic colors
set("newColorFlg"); //new color flag = black background
jQuery('<style>', {id: 'customstyle'}).appendTo('head').text("body {background-color: black; color: Red;}");
jQuery('#customstyle').append("a.squiffy-link {color: LightCoral;}");
jQuery('#customstyle').append("a.squiffy-link.disabled {color: brown !important;}");
jQuery('#customstyle').append("a.squiffy-header-link {color: white; text-decoration: underline !important;}");
This is what I used to change colors and effects. You could possibly change the links this way so they are the same as everything else. Would that work? i.e. Change the squiffy.link value to whatever your text color is.
Good code ☺ For the specific purpose of hiding style for a link, the CSS you want might be something like:
a:link { all: inherit !important; }
"all
" lets you set all of an element's style at once, and "inherit
" makes it the same as the text around it. !important
, as Bluevoss showed, means that this rule overrides any rules that aren't important.
It can be useful to know about these shortcuts. For example, if your game has a light mode and a dark mode, you could use color: inherit
to set links to the same colour as the surrounding text without needing to worry about what that colour is. And text-decoration: inherit
will take away a link's underline unless it's in a paragraph or sentence that's already underlined.
all
may be useful, or maybe not. It affects all style attributes. This includes the mouse pointer, as well as any pronunciation changes for links in screen-readers. This is the best way if you want to hide a link; but not so much if you want the player to have some clue that there is a link there.
If you want to apply this change only to a single passage or section, you could add something to the passage's javascript:
var normalWrite = squiffy.ui.write;
var currentSection = $('#' + squiffy.get('_output-section'));
squiffy.ui.write = function (text) {
squiffy.ui.write = normalWrite;
let existing = currentSection.children();
normalWrite(text);
currentSection.children().not(existing).find('a:link').css({color: 'inherit !important', textDecoration: 'inherit !important'});
};
If I got that right off the top of my head, it will remove the color and underline rules from all links within the next section or paragraph that it output after running the script.
You can do it with nothing but html and Squiffy. No Javascript required:
@set B=<span style="text-decoration:underline; text-decoration-color:white; color:black;">
[{B}Black Link](Black Link)
Then you can set B to other decorations and colors with later {if
statements.
Alternatively, you can set other span styles variables right at the beginning and use them as you want.