Make your extension feel like part of ScorePlay
panel.css gives your extension the same fonts, colours
and controls as the rest of ScorePlay. It follows each workspace's
theme, including dark mode and its brand colour, so you never
hard-code a colour.
Add these two lines to the <head> of your
extension's HTML:
Text
Headings and body text use ScorePlay's typefaces automatically. Use
.sp-muted for supporting text such as captions and
timestamps.
Badges
Short labels for a status, such as the state of a match. Add a modifier to set the colour.
Alerts
Tell people what is happening in your extension: updates, success, warnings and errors.
Fields
Wrap each input in .sp-field to give it a label and an
optional hint. To show a problem, add
.sp-field--error and aria-invalid.
Tabs
Switch between views inside your extension. Give each tab
role="tab", and mark the open one with
aria-selected="true".
Goals, cards and substitutions in order.
Starters and substitutes for each team.
Possession, shots and fouls.
List and table
Use a list for events in order, and a table for figures people compare.
- 88 min Goal, M. Salah
- 63 min Yellow card, J. McGinn
| Player | Goals |
|---|---|
| M. Salah | 1 |
Layout
Three helpers for spacing: .sp-stack for a column,
.sp-row for a row and .sp-card for a
bordered block.
.sp-card with .sp-stack
.sp-row
A
B
Empty and loading
Show a message when there is nothing to display, and a spinner or skeleton while data loads.
Tokens
Every colour, size and spacing value comes from the workspace's theme as a CSS variable. Use these in your own CSS instead of fixed values, so your extension follows the theme, including dark mode.