Using Citizen styles - StarCitizenTools/mediawiki-skins-Citizen GitHub Wiki
This page is about how you can use Citizen styles on your wiki pages and templates.
Click here for information on how to customize Citizen styles for your wiki.
Applying Citizen styles in templates
There are multiple ways to apply Citizen styles in your wiki's templates through CSS variables:
- Extension:TemplateStyles, you will also need Extension:TemplateStylesExtender to use CSS variables
- Extension:CSS
MediaWiki:Citizen.css
on your wiki
It is recommended to use CSS variables as they adjust according to the current theme.
Helpful classes
Class | Description |
---|---|
.floatright |
Responsive float right, commonly used in templates like infobox |
.floatleft |
Responsive float left |
.floatnone |
Clear both sides |
.citizen-overflow |
Wrap content in a container and add overflow handling |
.citizen-overflow-sticky-header |
Make an element sticky in the overflow container (put it on the <tr> if it is a table) |
.citizen-table-nowrap |
Disable table wrapping |
.wikitable |
Apply Citizen's wikitable styles |
.wikitable--border |
Add vertical border to Citizen wikitable, use with .wikitable |
.wikitable--stripe |
Add striped rows to Citizen wikitable, use with .wikitable |
For more detailed usage on defining specific styles for each theme, see the guide for adapting dark mode on MediaWiki.
Common conversions
Colors
Accent
Name | Description | WMUI equivalent |
---|---|---|
--color-progressive |
Primary color | #36c |
--color-destructive |
Destructive color | #d33 |
--color-success |
Success color | #00af89 |
--color-warning |
Warning color | #fc3 |
Border
Use the following rule, you might have to specify which border (e.g. border-top-color
for border-top
)
border-color: var( --border-color-base );
Surface
Name | Description | WMUI equivalent |
---|---|---|
--color-surface-0 |
Site background only | #fff |
--color-surface-1 |
Surface background 1 (This is not the same as background 0) | #fff |
--color-surface-2 |
Surface background 2 | #f8f9fa |
--color-surface-3 |
Surface background 3 | #eaecf0 |
--color-surface-4 |
Surface background 4 | #c8ccd1 , #a2a9b1 |
Shadow
Name | Description | WMUI equivalent |
---|---|---|
--box-shadow-card |
Card shadow | @box-shadow-card |
--box-shadow-dialog |
Dialog shadow | @box-shadow-dialog |
Text
Name | Description | WMUI equivalent |
---|---|---|
--color-emphasized |
Emphasized text color for title text | #000 |
--color-base |
Base text color for body text | #202122 |
--color-subtle |
Subtle text color for caption text | #54595d , #72777d |
Icons
Patching icon color in dark theme
Icons might need to be "flipped" to be visible in dark theme. Simply add the following rule to the direct element that contains the icon:
filter: var( --filter-invert );
Disable sticky header
Sticky header can be disabled per page or globally by setting display: none
on the #citizen-page-header-sticky-sentinel
element:
#citizen-page-header-sticky-sentinel {
display: none;
}