Sugarcube 2 CSS help - link and hovering on button colors not changing

Question

Honestly, I'm fumbling about with sugarcube but I do know somewhat what I'm doing when it comes to CSS thanks to messing around with it for a full day. But I'm running into the problem that the links are changing despite me having changed it in the stylesheet and I can't manage to get the hovering on the buttons to change colors. I'm going for an old console terminal look and I've almost got it. 

The text input box submit button is the button I'm talking bout hovering over.

So I guess the question is, what's wrong with my code? I'm sorry if it's messing or things are where they're not supposed to be or duplicated. I may have messed around with it a lot but I'm still unsure of what I'm doing.

body {
position:relative;
font-family: 'VT323', monospace;
font-size: 1.1em;
background: black;
color: #21f838;
padding: 5px;
overflow: auto;
height: 20px;
}
#passage {
float: left; 
padding-left: 3px;
white-space: pre;
position:relative;
left:0px;
top:-30px;
opacity: 0; 
filter:alpha(opacity=0);
}
.passage {
  position:relative;
  width: 60%;
  font-size:1.3em;
  letter-spacing: 0.1em;
  font-family: 'VT323', monospace;
}
.passage .content {
  width:60%;
  border: #fff double 0.5em;
  border-radius: 1em;
  padding: 1em;
}
a.internalLink, a.externalLink {
  border-bottom: solid #fff 1px;
  color: #21f838;
  font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: none;
  color: #21f838;
  background-color:#fff;
  font-weight:normal;
}
a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
  color: #21f838;
}
button {
  color: #21f838;
  background-color: #000;
  border: 1px solid #eee;
}
button:hover {
    color: #eee;
}
button:disabled {
    color: #eee;
    background-color: #000;
    border: 1px solid #eee;
}
#ui-bar {
  background-color: transparent;
  border: 1px solid #eee;
}

 

Answer 1

You didn't supply an example of the TwineScript you are trying to style, so I will assume it looks something like the following:

What's your favorite pie? <<textbox "$pie" "Blueberry">>

<<button "Cakes" "Cakes">><</button>>

<<link "Cakes" "Cakes">><</link>>

If you use the Developer Tools built into your web-browser to Inspect the HTML elements generated for the <<button>> macro and the <<link>> macro you will see something like the following:

<button data-passage="Cakes" class="link-internal macro-button" type="button" tabindex="0">Cakes</button>

<a data-passage="Cakes" class="link-internal macro-link" tabindex="0">Cakes</a>

... and you will notice that the internalLink class (and the externalLink class) are named link-internal (and link-external) in SugarCube 2.

Simply fix the related CSS selectors within your CSS to use the correct class and they will work.

Comments

How do I get the color to change when I hover over it? I've gotten the button to change when it's just sitting there to match with the rest of my theme but when I hover over it, it's the default blue and ruins the whole color scheme.

---

Nevermind, I figured it out, thanks for your help. I just didn't change the background color at the appropriate place, oops, lol. Thanks as always greyelf! You're like the magical fairy of these forums, especially for me ;)

I look forward to having a plethora of more of my problems and confusions solved by you!