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:

  1. Extension:TemplateStyles, you will also need Extension:TemplateStylesExtender to use CSS variables
  2. Extension:CSS
  3. 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 #36c
--color-destructive Destructive color #d33 #d33
--color-success Success color #00af89 #00af89
--color-warning Warning color #fc3 #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 #fff
--color-surface-1 Surface background 1 (This is not the same as background 0) #fff #fff
--color-surface-2 Surface background 2 #f8f9fa #f8f9fa
--color-surface-3 Surface background 3 #eaecf0 #eaecf0
--color-surface-4 Surface background 4 #c8ccd1 #c8ccd1, #a2a9b1 #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 #000
--color-base Base text color for body text #202122 #202122
--color-subtle Subtle text color for caption text #54595d #54595d, #72777d #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;
}