Toggle 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

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */

:root.skin-citizen-dark {
    --color-surface-0: #0d0509;
    --color-surface-1: #1a0d13;
    --color-surface-2: #2e1e26;
    --color-surface-3: #372b31;
    --color-surface-4: #403f40;
    
	--color-primary__h: 328;
	--color-primary__s: 58%;
	--color-primary__l: 51%;
	
	--font-family-base: 'Bahnschrift',system-ui,-apple-system,sans-serif;
	
}

:root.skin-citizen-light {
    --color-surface-0: #e5e5e5;
    --color-surface-1: #cccccc;
    --color-surface-2: #b2b2b2;
    --color-surface-3: #999999;
    --color-surface-4: #808080;
    
	--color-primary__h: 328;
	--color-primary__s: 58%;
	--color-primary__l: 51%;
	
	--font-family-base: 'Bahnschrift',system-ui,-apple-system,sans-serif;
}

/*un-invert footer image bc for some reason its inverted by default*/
.citizen-footer__siteinfo .mw-logo-wordmark {
	filter: invert(0) hue-rotate(0deg) !important;
}


/*GALLERY*/

.gallerybox .thumb, .gallerybox .thumb img {
	background: none !important;
}


/* --- INFOBOXES --- */
/* BORDER & BACKGROUND */
/* set padding and border */
.infobox, .portable-infobox {
	border: 1px solid var(--border-color-base);
	border-radius: 0.6rem;
	padding: 0.3rem;
}

/* GENERAL */
/* infobox title (standard & portable) */
.infobox .infobox-title, .pi-title {
	margin: -0.3rem -0.3rem 0 -0.3rem !important;
	border-radius: 0.6rem 0.6rem 0 0;
	font-size: 1.3rem !important;
	text-align: center;
	background: var(--color-primary)
}

/* add spacing to header and make it go to edge*/
.portable-infobox .pi-header {
	margin: 0.3rem -0.3rem;
}

/* fix headers being spaced out when collapsed & remove dividers at the end of groups */
.pi-group {
	border-bottom-width: 0 !important;
	margin-bottom: 0.3rem;
}
.pi-collapse-closed {
	margin: 0;
}
.pi-collapse-closed .pi-header {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* IMAGES - GENERAL */
/* fit image to box */	
.pi-image-thumbnail {
 	max-width: 100%;
}

/* set border*/
.infobox-image a, .pi-image a {
	border-radius: 6px;
}

/* IMAGES - SPECIFIC */
/* ROUTE SHIELDS*/

/* scale shield correctly */
.pi-image[data-source="shield"] .pi-image-thumbnail {
	margin-top: 0.4rem;
 	max-height: 5rem;
 	width: auto;
}

/* image caption */
.pi-image[data-source="shield"] .pi-caption {
	font-style: normal;
	font-weight: bold;
	font-size: 1.1rem;
	color: inherit;
	padding-bottom: 0;
}

/* IMAGES - SPECIFIC */
/* PLANET INFOBOX */

/* scale image correctly */
.pi-image[data-source="planetImage"] .pi-image-thumbnail {
	margin-top: 0.4rem;
	max-height: 12rem;
	width: auto;
}


/* --- TABLES --- */

.wikitable {
	background-color: var(--color-surface-1);
	border-radius: 8px;
	color: var(--color-base);
	overflow: hidden !important;
	border-collapse: collapse;
	border-style: hidden;
	padding: 0.3rem !important;
	margin: 1px !important;
	
	box-shadow: 0 0 0 1px var(--border-color-base); /* this draws the table border  */ 
}

.wikitable th, .wikitable td {
	border-left: 1px solid var(--border-color-base);
	border-top: 1px solid var(--border-color-base);
	padding: 0.4rem 0.6rem;
}

.wikitable caption {
	text-align: center;
	font-style: italic;
}

.wikitable thead th {
   	text-align: center;
}

.wikitable th {
   	background-color: var(--color-surface-2);
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.