Citizen

Citizen is a responsive skin for MediaWiki built by the Star Citizen Wiki team. Although it is specifically built for the Star Citizen Wiki, the skin is designed to be flexible to run on any Mediawiki installation that is 1.35.2 or higher. Due to resource constraints, we might not be able to provide full support for setups that are vastly different than us, but please feel free to submit patches or bug report!

Live demo can be seen at the Star Citizen Wiki, more avaliable here.

Notable features

• Fully responsive skin: Responsive and able to adapt to different screen sizes. 📱💻🖥️
• Light/dark mode support: Switch between light and dark mode. Require JS ☀️🌙
• Adjustable font size and page width: Read the article the way you wanted. Require JS 👀📃
• Collapsible sections: Collapse and expand article sections. Require JS 📖📕
• Persistent ToC: Access ToC anywhere in the article. Tracking require JS 🔍📖
• Rich search suggestions: More helpful search suggestions with images and descriptions. Require JS 🔍👀
• Webapp manifest: Give a more app-like experience when user add your wiki to their home screen. 📱
• HTTP security response headers: Enhance the security of your wiki from HTTP response headers. 🔒🔑

SkinStyles

Citizen includes numerous skinStyles that applies custom styling to extensions and core libraries. Please feel free to submit PRs if you want to add support for more extensions! Unless the extension has never supported the current minimum required MediaWiki version of the skin, the skinStyles are based on the latest version of the said MW release branch (e.g. REL1_35 for MediaWiki 1.35).

• Grade A - Overhaul - Major adjustments to UI, plus Grade B.
• Grade B - Dynamic - Colors are converted into CSS variables, little to none style adjustments.
• Grade C - Legacy overhaul Major adjustments to UI but using legacy CSS variables.
• Grade D - Legacy dynamic - Color are converted into CSS variables but in old standards (background-color-dp-XX). These should be updated to at least Grade B support.
• Grade E - Legacy static - Dark mode colors are hardcored as LESS variables. These should be updated to at least Grade B support.

Core

Name	Grade	Version	Last updated
MediaWiki UI	B	1.35.3	2021-07-27
OOUI	B	0.39.3 086b4f1	2021-07-26

Extensions

Name	Grade	Version	Last updated
AdvancedSearch	E	N/A	N/A
ApprovedRevs	B	N/A	N/A
Babel	B	MLEB 2021.07	2021-07-29
Capiunto	E	N/A	N/A
CategoryTree	B	N/A	N/A
Cite	A	N/A	N/A
CleanChanges	B	MLEB 2021.07	2021-07-29
CodeMirror	D	N/A	N/A
CookieWarning	A	N/A	N/A
DismissableSiteNotice	A	N/A	N/A
Echo	E	N/A	N/A
Flow (StructuredDiscussions)	E	N/A	N/A
Graph	D	N/A	N/A
Lingo	E	N/A	N/A
MultimediaViewer	C	N/A	N/A
OAuth	D	N/A	N/A
Popups	D	N/A	N/A
RelatedArticles	D	N/A	N/A
Semantic MediaWiki	E	N/A	N/A
Semantic Result Formats	E	N/A	N/A
Tabber	A	N/A	N/A
TabberNeue	A	1.0.1 0dc1b34	2021-06-21
TimedMediaHandler	D	N/A	N/A
Translate	B	MLEB 2021.07	2021-07-29
UniversalLanguageSelector	B	MLEB 2021.07	2021-07-29
UploadWizard	C	N/A	N/A
VisualEditor	C	N/A	N/A
WikiEditor	E	N/A	N/A

Some of the field are tagged as N/A because the information was not tracked before.

Installation

1. Download place the file(s) in a directory called Citizen in your skins/ folder.
2. Add the following code at the bottom of your LocalSettings.php:

wfLoadSkin( 'Citizen' );

3. ✔️Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configurations

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin.

Note that:

• By default, all security-related features are turned off to ensure maximum compatibility.

Appearance

Name	Description	Values	Default
$wgCitizenThemeDefault	The default theme of the skin	auto - switch between light and dark according to OS/browser settings; light; dark	auto
$wgCitizenEnableCollapsibleSections	Enables or disable collapsible sections on content pages	true - enable; false - disable	true
$wgCitizenShowPageTools	The condition of page tools visibility	true - always visible; login - visible to logged-in users; permission - visible to users with the right permissions	true
$wgCitizenEnableDrawerSiteStats	Enables the site statistics in drawer menu	true - enable; false - disable	true
$wgCitizenEnableDrawerSubSearch	Enables the drawer search box for menu entries	true - enable; false - disable	false
$wgCitizenPortalAttach	Label of the portal to attach links to upload and special pages to	string	first
$wgCitizenThemeColor	The color defined in the theme-color meta tag	Hex color code	#131a21

Search suggestions

Name	Description	Values	Default
$wgCitizenEnableSearch	Enable or disable rich search suggestions	true - enable; false - disable	true
$wgCitizenSearchGateway	Which gateway to use for fetching search suggestion	mwActionApi; mwRestApi	mwActionApi
$wgCitizenSearchDescriptionSource	Source of description text on search suggestions (only takes effect if $wgCitizenSearchGateway is mwActionApi)	wikidata - Use description provided by WikibaseLib or ShortDescription; textextracts - Use description provided by TextExtracts; pagedescription - Use description provided by Description2 or any other extension that sets the description page property	textextracts
$wgCitizenMaxSearchResults	Max number of search suggestions	Integer > 0	6

Security-related

Content Security Policy (CSP)

Name	Description	Values	Default
$wgCitizenEnableCSP	Enable or disable Content Security Policy, as an alternative to $wgCSPHeader in Mediawiki 1.32+	true - enable; false - disable	false
$wgCitizenEnableCSPReportMode	Enable or disable CSP report only mode, overrides $wgCitizenEnableCSP	true - enable; false - disable	false
$wgCitizenCSPDirective	The string of yourr CSP directive	See the Content Security Policy page

HTTP Strict Transport Security (HSTS)

Name	Description	Values	Default
$wgCitizenEnableHSTS	Enable or disable HTTP Strict Transport Security	true - enable; false - disable	false
$wgCitizenHSTSMaxAge	Time in second that the browser should remember that a site is only to be accessed using HTTPS	Integer > 0	300
$wgCitizenHSTSIncludeSubdomains	Apply HSTS to all of the site's subdomains	true - enable; false - disable	false
$wgCitizenHSTSPreload	Enable or disable HSTS preload	true - enable; false - disable	false

Other security headers

Name	Description	Values	Default
$wgCitizenEnableDenyXFrameOptions	Enable or disable the deny X-Frame-Options header	true - enable; false - disable	false
$wgCitizenEnableXXSSProtection	Enable or disable the X-XSS-Protection header	true - enable; false - disable	false
$wgCitizenEnableStrictReferrerPolicy	Enable or disable strict-origin-when-cross-origin referrer policy header, should be used in conjunction with $wgReferrerPolicy as that only outputs the meta tags	true - enable; false - disable	false
$wgCitizenEnableFeaturePolicy	Enable or disable Feature Policy	true - enable; false - disable	false
$wgCitizenFeaturePolicyDirective	The string of your Feature Policy directive	See the Feature Policy page
$wgCitizenEnablePermissionsPolicy	Enable or disable Permissions Policy	true - enable; false - disable	false
$wgCitizenPermissionsPolicyDirective	The string of your Permissions Policy directive

Webapp manifest

Name	Description	Values	Default
$wgCitizenEnableManifest	Enable or disable web app manifest	true - enable; false - disable	true
$wgCitizenManifestThemeColor	Theme color of the web app manifest	Hex color code	#131a21
$wgCitizenManifestBackgroundColor	Background color of the web app manifest	Hex color code	#131a21

Miscellaneous

Name	Description	Values	Default
$wgCitizenEnablePreconnect	Enable or disable preconnect to required origin	true - enable; false - disable	false
$wgCitizenPreconnectURL	The URL for preconnect to required origin	URL
$wgCitizenThemeColor	The color defined in the theme-color meta tag	Hex color code	#11151d

Requirements

• MediaWiki 1.35.2 or later
• For the legacy versions, check the other release branches.