# Styling reference

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

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.

Cancel
Cancel
<button class="button"><strong>Do the thing</strong></button> <a href="./" class="button">Cancel</a>

`.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 class="button big">Big</button> <button class="button">Normal</button> <button class="button small">Small</button>

`.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.

Cancel
Cancel
<button class="button disabled"><strong>Do the thing</strong></button> <a href="./" class="button disabled">Cancel</a>

`.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 class="button notifying">2 new battles!</button>

`.button.subtle-notifying, .button.alt-notifying`

If you have different kinds of notifications, consider these.

<button class="button subtle-notifying">5 unimportant battles</button> <button class="button alt-notifying">2 weird battles!</button>

`.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.

<button class="button button-first cur">Charmander</button><button class="button button-middle">Squirtle</button><button class="button button-last">Bulbasaur</button>

`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.

Play Showdown!
Play Showdown!
Play <a href="https://pokemonshowdown.com/">Showdown!</a>

`.blocklink`

Links that span an entire block.

Showdown!
Showdown!
<a class="blocklink" href="https://pokemonshowdown.com/">Showdown!</a>

`.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.

Humans include
and Bob.
Humans include
and Bob.
Humans include <button class="subtle">Alice</button> and <a href="./" class="subtle">Bob</a>.

`.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).

Humans include
and Bob.
Humans include
and Bob.
Humans include <button class="ilink">Alice</button> and <a href="./" class="ilink">Bob</a>.

## Forms

Not currently available to bots or chat plugins.

`.textbox`

Has hover and focus appearances, unlike most native text boxes. Label optional.

Name:
Name:
<label class="label">Name: <input type="text" class="textbox" /></label>

`.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.

<button class="option cur">Do the first thing</button> <button class="option">Do the second thing</button> <button class="option">Do the third thing</button>

`.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.

This is a checkbox
This is a checkbox
<label class="checkbox"><input type="checkbox" /> This is a checkbox</label>

## Chat features

`code`

`/([a-z]*)/g` is a regex.
`/([a-z]*)/g` is a regex.
<code>/([a-z]*)/g</code> is a regex.

`kbd`

Try pressing `Ctrl`+`Alt`+`Del`.
Try pressing `Ctrl`+`Alt`+`Del`.
Try pressing <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</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.

Spoiler: The `butler` did it
Clicked spoiler: The `butler` did it
Spoiler: The `butler` did it
Clicked spoiler: The `butler` did it
Spoiler: <span class="spoiler">The <code>butler</code> did it</span><br /> Clicked spoiler: <span class="spoiler-shown">The <code>butler</code> did it</span>

`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 />`).

This is
some text
This is
some more
This is
some text
This is
some more
<details class="readmore"><summary>This is<br />some text</summary>This is<br />some more</details>

`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).

This is summarized [do something] [show more]
the full results
This is summarized [do something] [show more]
the full results
<details class="details"><summary>This is<span class="details-preview"> summarized <a href="." class="ilink">[do something]</a><span class="ilink">[show more]</span></span></summary>the full results</details>

`.broadcast-blue, .broadcast-green, .broadcast-red`

Remember that broadcasts can have links inside them, which should be readable.

Important: Something happened!
Yay: Something succeeded!
Error: Something failed!
Important: Something happened!
Yay: Something succeeded!
Error: Something failed!
<div class="broadcast-blue"><strong>Important:</strong> Something <a href="./">happened</a>!</div> <div class="broadcast-green"><strong>Yay:</strong> Something <a href="./">succeeded</a>!</div> <div class="broadcast-red"><strong>Error:</strong> Something <a href="./">failed</a>!</div>

`.infobox, .gray`

Infoboxes are used for organization. Gray makes things gray.

These are used all over Showdown.
These are used all over Showdown.
<div class="infobox">These are <span class="gray">used all over</span> Showdown.</div>

`.message-error`

Error: Something went wrong!

Error: Something went wrong!

<p class="message-error"><strong>Error:</strong> Something went wrong!</p>

`.message-log`

[12:34] ~Zarel: Hello!
[12:34] ~Zarel: Hello!
<div class="message-log"><div class="chat"><small>[12:34] </small><strong><small>~</small>Zarel:</strong> <q>Hello!</q></div></div>