Please specify version and format if asking for help, or apply optional tags above:
Twine Version: Twine 2.3.5
Story Format: SugarCube 2.30.0
I’m fairly new to Javascript and CSS, so I’m sorry if this is a simple question that I’m just overcomplicating, but basically I’m looking to style the close button of the Dialog box specifically. I currently have my the buttons in my story styled to have a box shadow, but it also affects the “close” button of my Dialog boxes and makes it stick out from the title bar:
I’ve looked around a fair bit and found similar questions regarding Dialog box styling, but I couldn’t find an answer addressing the close button specifically. I’ve also been through the SugarCube documentation but couldn’t find any info regarding it. The closest I found was the Dialog widget API (https://api.jqueryui.com/dialog/) which states that I should be looking at the ui-dialog-titlebar-close class, so I tried adding this to my Stylesheet, but it didn’t work:
#ui-dialog-titlebar-close { box-shadow: none; }
My styling for buttons currently looks like this:
button {
color: black;
background-color: #614d6f;
border: none;
margin-bottom: 5px;
padding: 10px;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
Basically, I want all other buttons in the story to look like that except for the “close” button on Dialog boxes. Is it possible to change just the Dialog close button/override my button style somehow? Or is there something wrong with how I’m styling my Story buttons to begin with? Any help would be sincerely appreciated!