This is a reference of the out-of-the-box CSS available for bots and chat plugins to use. The CSS for all of this is in battle-log.css, because, since they could appear in battle logs, Replays needs them as well as the client itself.
It's also useful for servers wanting to write custom CSS, to see how the changes look. Add a file named custom.css in this directory and refresh to see how it looks.
We tend not to follow modern flat design. Instead, we give buttons a 3D effect, to improve their accessibility.
Buttons and links are grouped together because they're kind of similar: If you click them, they perform an action. A link is just a special kind of button, a button that only performs navigation.
It's common practice to make important links look like buttons, but buttons should never look like links. Links should be implemented with an <a> tag, never with a button, so that they can be opened in a new window (by middle-clicking or right-clicking).
Buttons always get the pointer-finger mouse cursor, like links. This helps reinforce that they're clickable.
.button
Regular buttons always need class="button" to look like buttons – this is so you can apply other classes/styles if you want them to look like other things. You can also add the class to other elements, like links, to make them look like buttons.
Notice the active (pressed down) styling.
.button.big, .button.small
You may prefer buttons of different sizes. These should never be used next to each other, and very sparingly otherwise. When next to each other, we use bold and non-bold buttons to show importance, like above.
.button.disabled, .button:disabled
Disabled buttons are faded out. Implementing disabled as a class lets you detect when they're moused-over (for tooltips) and clicked, and also lets you style links, if necessary. If not necessary, do set the disabled attribute instead, though, for accessibility reasons.
.button.notifying
Notifying buttons are intended for situations where we're trying to get the user's attention. As usual, you can also style links or any other element.
.button.subtle-notifying, .button.alt-notifying
If you have different kinds of notifications, consider these.
.button.button-first, .button.button-middle, .button.button-last, .button.cur
These are used to group buttons together. cur works a lot like disabled, except the text isn't as greyed out, and is used to denote a current selection.
a
Links use a nicer blue than browser default, and visited links are a nicer purple. Dark mode lightens the default styling a bit, to keep them readable. Hover styles use :where(:hover) for lowest specificity, so the colors are easy to override.
.blocklink
Links that span an entire block.
.subtle
Subtle links are links that are unimportant. They look like normal text until moused over, because they would make text look unnecessarily cluttered.
Buttons can also be subtle. They'll look the same as subtle links (and not like buttons at all).
Subtle links are used in credits, and for usernames in battle logs.
.ilink
An ilink is just a link whose underline doesn't appear unless hovered, and also doesn't have a visited style. It's sort of halfway between subtle links (which are entirely invisible unless hovered) and normal links (which are very in-your-face about being clickable, with the underline and all).
Buttons can also be ilinks. They'll look the same as links (and not like buttons at all).
Not currently available to bots or chat plugins.
.textbox
Has hover and focus appearances, unlike most native text boxes. Label optional.
.option, .option.sel
This is used for a button taking the role of <option> (in a drop-down selection menu). Normal button styling would look really cluttered, so option buttons are much subtler.
The currently-selected option should be given the cur class.
.checkbox
This makes checkboxes and radio buttons look slightly nicer. We don't currently try to override the built-in checkbox widget, just make it a bit bigger, add the usual finger-cursor, and add a hover effect.
code
/([a-z]*)/g is a regex.
/([a-z]*)/g is a regex.
kbd
.spoiler
Clicking the spoiler tag in PS will make the spoiler stay visible (requires JavaScript).
Remember that spoilers can have <code> tags inside them, which should only be readable if shown.
butler did itbutler did it
butler did itbutler did it
details.readmore
Does not require JavaScript! As you can see, it's implemented with <details> and <summary>.
For accessibility reasons, the "read more" button can only appear at the end of a line (using </summary> to replace a <br />).
details.details, .details-preview, span.ilink
A nicer looking details element. .details-preview can be used to show certain things only when collapsed. span.ilink can be used to make a fake link (like "show more" below) for expanding it. Real links (like "do something" below) will suppress the hover effect (because they do something other than expanding).
.broadcast-blue, .broadcast-green, .broadcast-red
Remember that broadcasts can have links inside them, which should be readable.
.infobox, .gray
Infoboxes are used for organization. Gray makes things gray.
.message-error
.message-log