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

MediaWiki:Citizen.css

MediaWiki interface page
Revision as of 11:16, 25 June 2026 by Simon (talk | contribs) (Add create-page button styles matching Citizen's own header icon buttons (via update-page on MediaWiki MCP Server))

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.
/* Default: Full width */
:root.citizen-feature-custom-width-clientpref-standard,
:root {
	--width-layout: 100vw;
}

/* Override for specific pages using body class */
.page-Main_Page,
.page-Hauptseite {
	--width-layout: 1600px;
}

/* Fix main page layout on mobile - override inline styles */
@media (max-width: 768px) {
	/* Override the min-width: 480px inline style */
	.mw-parser-output > div[style*="min-width: 480px"] {
		min-width: 100% !important;
		width: 100% !important;
		flex-basis: 100% !important;
	}
	
	/* Make parent flex container stack vertically on mobile */
	.mw-parser-output > div[style*="display: flex"] {
		flex-direction: column !important;
	}
}
@media screen {
  .citizen-footer__container {
    max-width: 100vw;
    margin-inline: auto;
  }
}


#footer-places {
    margin-left: auto; 
    display: flex;
    justify-content: flex-end;
}


#footer-places ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns the <li> items to the right */
    text-align: right;    /* Ensures text alignment is consistent */
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}


#footer-places li {
    margin: 0;
    display: block;
}

#footer-sitetitle .mw-logo-icon {
    display: none !important;
}

/* Create-page button in the sidebar header */
.citizen-header__create-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-base);
    background-color: transparent;
    color: var(--color-base);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms;
}

.citizen-header__create-page:hover {
    background-color: var(--background-color-quiet--hover);
    color: var(--color-base);
    text-decoration: none;
}

.citizen-header__create-page:active {
    background-color: var(--background-color-quiet--active);
}