How Do You Change The Prompt Box button's colour?

Authoring Twine
,
1

Twine Version: 2.3.13
Story Format: Harlowe 3.2.1

I’m relatively new to twine, and I’ve recently started messing around with CSS. While experimenting I noticed that the colour of the Prompt Box button’s , “Ok” and “Cancel”, change along with the colour of the links. This isn’t ideal because I’ve set the links colour to solid black. Which makes it impossible for the user to see the buttons against the default black background.

Is there a way to change only those button colours or at least change the background of the The Prompt Box?

2

If you use web-browser’s Web Developer Tools to Inspect the HTML elements generated by a (prompt:) macro call like the following…

(prompt: "Displayed Text", "Default Value", "Confirm Text", "Cancel Text")

…you wills see that it looks something like this…

<tw-dialog>
	Displayed Text
	<input type="text" style="display:block;margin:0 auto">
	<tw-dialog-links>
		<tw-link style="margin:0 0.5em 0 0" tabindex="0">Cancel Text</tw-link>
		<tw-link style="margin:0 0 0 0.5em" tabindex="0">Confirm Text</tw-link>
	</tw-dialog-links>
</tw-dialog>

…and that the <tw-link> elements used to represent the ‘Cancel’ & ‘Confirm’ buttons are children of a <tw-dialog-links> element.

This means you can use a CSS selector like the following to target those ‘buttons’ and a color CSS property to assign a text colour to them.

tw-dialog-links tw-link {
	color: orange;
}
3

Thank you so much.