Jump to content
Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css

MediaWiki interface page

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
 * Quick-navigation buttons pinned into the Citizen header rail.
 *
 * Citizen renders an EMPTY <div class="citizen-header__start"> in Header.mustache
 * and never populates it — no config and no hook reaches it. MediaWiki:Common.js
 * fills it with links; this gives that slot the same layout the populated
 * "__end" group already has.
 *
 * --header-direction is Citizen's own variable, so this follows
 * $wgCitizenHeaderPosition automatically (column in the left/right rail, row if
 * the header is ever moved to top/bottom).
 *
 * The buttons themselves need no styling here: Common.js reuses Citizen's own
 * cdx-button classes, so they inherit the exact look of the preferences and
 * user-menu buttons already in the rail.
 *
 * If a Citizen upgrade renames .citizen-header__start, the buttons simply stop
 * appearing and the hamburger menu still has everything. See GOTCHAS #30.
 */
.citizen-header__start {
	display: flex;
	flex-shrink: 0;
	flex-direction: var( --header-direction );
	gap: var( --space-xxs );
}