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

MediaWiki:Gadget-Citizenstuff.css: Difference between revisions

MediaWiki interface page
(darken documentation template)
(attempt to fix dark theme for recent changes to Citizen)
 
(10 intermediate revisions by the same user not shown)
Line 5: Line 5:
content: "\A";
content: "\A";
white-space: pre-wrap;
white-space: pre-wrap;
}
/* a change to Citizen made these hidden checkboxes accidentally visible */
input.citizen-menu-checkbox-checkbox {
display: none;
}
/*
tables seem to be wrapped by a div.citizen-table-wrapper
this doesn't fit the content of the table so it pushes everything else down
*/
.citizen-table-wrapper {
overflow-x: initial;
}
.mw-content-ltr ol,
.mw-content-rtl .mw-content-ltr ol,
.mw-content-ltr ul,
.mw-content-rtl .mw-content-ltr ul {
padding-inline-start: 40px;
margin-left: 0;
}
/* un-reset padding for plainlist */
.plainlist ul,
.plainlist ol{
padding-inline-start: 0;
}
}


Line 16: Line 42:
}
}
}
}
/*
fix infobox display problems on citizen applying rules for tables
that do not work well for this one
*/
@media screen {
.infobox {
display: table;
}
}
/*
in tables, the top part of the first p/ul/ol has its margin-top removed
but it doesn't remove margin-bottom for the last one, making it look wrong
(in my opinion)
*/
@media screen {
td > p:last-child, td > ul:last-child, td > ol:last-child {
margin-bottom: 0;
}
}
/* navbox margin fix */
div.navbox table { margin-top: 0; }


/* testing dark mode stuff */
/* testing dark mode stuff */


/*
https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/a741639085d70c22a9f49890542a142a223bf981
After this commit, "Auto" won't auto-apply the CSS class for what theme to apply (e.g. skin-citizen-dark)
so I have to use @media (prefers-color-scheme: dark) for that too.
https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis
*/
/* FOR WHEN DARK MODE IS EXPLICITLY SET */
/* message boxes */
/* message boxes */
html.skin-citizen-dark table.ambox,
html.skin-theme-clientpref-night body.skin-citizen table.ambox,
html.skin-citizen-dark table.imbox {
html.skin-theme-clientpref-night body.skin-citizen table.imbox {
background-color: #36415b /*#fbfbfb*/;
background-color: #202c49 /*#fbfbfb*/;
}
}
html.skin-citizen-dark table.fmbox-system,
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-system,
html.skin-citizen-dark table.ombox {
html.skin-theme-clientpref-night body.skin-citizen table.ombox {
background-color: #343e57 /*#f8f9fa*/;
background-color: #343e57 /*#f8f9fa*/;
}
}
html.skin-citizen-dark table.ambox {
html.skin-theme-clientpref-night body.skin-citizen table.ambox {
/* this box puts a 10px border on the left with a special color that should be preserved */
/* this box puts a 10px border on the left with a special color that should be preserved */
border-top-color: #5e7288;
border-top-color: #5e7288;
Line 34: Line 94:
border-bottom-color: #5e7288;
border-bottom-color: #5e7288;
}
}
html.skin-citizen-dark table.tmbox {
html.skin-theme-clientpref-night body.skin-citizen table.tmbox {
background-color: #5d5848;
background-color: #5d5848;
}
}
html.skin-citizen-dark table.fmbox-editnotice,
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-editnotice,
html.skin-citizen-dark table.fmbox-system,
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-system,
html.skin-citizen-dark table.ombox-protection,
html.skin-theme-clientpref-night body.skin-citizen table.ombox-protection,
html.skin-citizen-dark table.imbox-protection,
html.skin-theme-clientpref-night body.skin-citizen table.imbox-protection,
html.skin-citizen-dark table.ombox-notice,
html.skin-theme-clientpref-night body.skin-citizen table.ombox-notice,
html.skin-citizen-dark table.cmbox-delete,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-delete,
html.skin-citizen-dark table.cmbox-content,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-content,
html.skin-citizen-dark table.cmbox-style,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-style,
html.skin-citizen-dark table.cmbox-notice,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-notice,
html.skin-citizen-dark table.cmbox-move,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-move,
html.skin-citizen-dark table.cmbox-protection {
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-protection {
border-color: #5e7288;
border-color: #5e7288;
}
}
html.skin-citizen-dark table.ambox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.ambox-speedy,
html.skin-citizen-dark table.cmbox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-speedy,
html.skin-citizen-dark table.cmbox-delete,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-delete,
html.skin-citizen-dark table.imbox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.imbox-speedy,
html.skin-citizen-dark table.tmbox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.tmbox-speedy,
html.skin-citizen-dark table.fmbox-warning,
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-warning,
html.skin-citizen-dark table.ombox-speedy {
html.skin-theme-clientpref-night body.skin-citizen table.ombox-speedy {
background-color: #6c4543;
background-color: #45201e;
}
}
html.skin-citizen-dark table.cmbox-content {
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-content {
background-color: #504438;
background-color: #504438;
}
}
html.skin-citizen-dark table.cmbox-style {
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-style {
background-color: #635f46;
background-color: #635f46;
}
}
html.skin-citizen-dark table.cmbox-notice {
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-notice {
background-color: #3a4759;
background-color: #3a4759;
}
}
html.skin-citizen-dark table.cmbox-move {
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-move {
background-color: #453b5c;
background-color: #453b5c;
}
}
html.skin-citizen-dark table.cmbox-protection {
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-protection {
background-color: #4a4a36;
background-color: #4a4a36;
}
}
Line 77: Line 137:
/* documentation template */
/* documentation template */
/* this is using TemplateStyles, so I need to remember to move this over some day... */
/* this is using TemplateStyles, so I need to remember to move this over some day... */
html.skin-citizen-dark .mw-parser-output .documentation,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output .documentation,
html.skin-citizen-dark .mw-parser-output .documentation-metadata {
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output .documentation-metadata {
border: 1px solid #909090!important;
border: 1px solid #909090!important;
background-color: #1e2a24!important;
background-color: #1e2a24!important;
Line 86: Line 146:
infobox
infobox
*/
*/
html.skin-citizen-dark .infobox {
html.skin-theme-clientpref-night body.skin-citizen .infobox {
color: #fff;
color: #fff;
background: #20262f;
background: #20262f;
Line 92: Line 152:
}
}


/* navbox margin fix */
div.navbox table { margin-top: 0; }
/* navbox dark theme */
/* navbox dark theme */
html.skin-citizen-dark .navbox-group {
html.skin-theme-clientpref-night body.skin-citizen .navbox-group {
background-color: #3e3e52;
background-color: #3e3e52;
}
}
html.skin-citizen-dark .navbox-subgroup .navbox-group {
html.skin-theme-clientpref-night body.skin-citizen .navbox-subgroup .navbox-group {
background-color: #383847;
background-color: #383847;
}
}
html.skin-citizen-dark .navbox {
html.skin-theme-clientpref-night body.skin-citizen .navbox {
border: 1px solid #3f4f61;
border: 1px solid #3f4f61;
}
}
html.skin-citizen-dark .navbox,
html.skin-theme-clientpref-night body.skin-citizen .navbox,
html.skin-citizen-dark .navbox-subgroup {
html.skin-theme-clientpref-night body.skin-citizen .navbox-subgroup {
background-color: #272834;
background-color: #272834;
}
}
html.skin-citizen-dark .navbox-even {
html.skin-theme-clientpref-night body.skin-citizen .navbox-even {
background-color: #22232b;
background-color: #22232b;
}
}
html.skin-citizen-dark .navbox-list {
html.skin-theme-clientpref-night body.skin-citizen .navbox-list {
border-color: #121a20;
border-color: #121a20;
}
}
/* don't understand this entirely... */
/* don't understand this entirely... */
html.skin-citizen-dark .mw-parser-output tr+tr>.navbox-abovebelow,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-abovebelow,
html.skin-citizen-dark .mw-parser-output tr+tr>.navbox-group,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-group,
html.skin-citizen-dark .mw-parser-output tr+tr>.navbox-image,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-image,
html.skin-citizen-dark .mw-parser-output tr+tr>.navbox-list {
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-list {
border-top: 2px solid #121a20;
border-top: 2px solid #121a20;
}
}


html.skin-citizen-dark .navbox-title {
html.skin-theme-clientpref-night body.skin-citizen .navbox-title {
background-color: #4b4b69;
background-color: #4b4b69;
}
}


/* fix citizen showing collapse icons even for pages where it shouldn't be */
/* fix bright background with white text for certain warnings (like protected notices) */
.section-indicator {
html.skin-theme-clientpref-night body.skin-citizen div.mw-warning-with-logexcerpt,
display: none;
html.skin-theme-clientpref-night body.skin-citizen div.mw-lag-warn-high,
}
html.skin-theme-clientpref-night body.skin-citizen div.mw-cascadeprotectedwarning,
.citizen-sections-enabled .section-indicator {
html.skin-theme-clientpref-night body.skin-citizen div#mw-protect-cascadeon,
display: block;
html.skin-theme-clientpref-night body.skin-citizen div.titleblacklist-warning {
background-color: #5b4343;
}
}


/* fix bright background with white text for certain warnings (like protected notices) */
/* FOR WHEN AUTO IS SET AND THE CLIENT REQUESTS A DARK THEME */
html.skin-citizen-dark div.mw-warning-with-logexcerpt,
@media (prefers-color-scheme: dark) {
html.skin-citizen-dark div.mw-lag-warn-high,
/* message boxes */
html.skin-citizen-dark div.mw-cascadeprotectedwarning,
html.skin-theme-clientpref-os body.skin-citizen table.ambox,
html.skin-citizen-dark div#mw-protect-cascadeon,
html.skin-theme-clientpref-os body.skin-citizen table.imbox {
html.skin-citizen-dark div.titleblacklist-warning {
background-color: #202c49 /*#fbfbfb*/;
background-color: #5b4343;
}
html.skin-theme-clientpref-os body.skin-citizen table.fmbox-system,
html.skin-theme-clientpref-os body.skin-citizen table.ombox {
background-color: #343e57 /*#f8f9fa*/;
}
html.skin-theme-clientpref-os body.skin-citizen table.ambox {
/* this box puts a 10px border on the left with a special color that should be preserved */
border-top-color: #5e7288;
border-right-color: #5e7288;
border-bottom-color: #5e7288;
}
html.skin-theme-clientpref-os body.skin-citizen table.tmbox {
background-color: #5d5848;
}
html.skin-theme-clientpref-os body.skin-citizen table.fmbox-editnotice,
html.skin-theme-clientpref-os body.skin-citizen table.fmbox-system,
html.skin-theme-clientpref-os body.skin-citizen table.ombox-protection,
html.skin-theme-clientpref-os body.skin-citizen table.imbox-protection,
html.skin-theme-clientpref-os body.skin-citizen table.ombox-notice,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-delete,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-content,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-style,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-notice,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-move,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-protection {
border-color: #5e7288;
}
html.skin-theme-clientpref-os body.skin-citizen table.ambox-speedy,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-speedy,
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-delete,
html.skin-theme-clientpref-os body.skin-citizen table.imbox-speedy,
html.skin-theme-clientpref-os body.skin-citizen table.tmbox-speedy,
html.skin-theme-clientpref-os body.skin-citizen table.fmbox-warning,
html.skin-theme-clientpref-os body.skin-citizen table.ombox-speedy {
background-color: #45201e;
}
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-content {
background-color: #504438;
}
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-style {
background-color: #635f46;
}
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-notice {
background-color: #3a4759;
}
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-move {
background-color: #453b5c;
}
html.skin-theme-clientpref-os body.skin-citizen table.cmbox-protection {
background-color: #4a4a36;
}
 
/* documentation template */
/* this is using TemplateStyles, so I need to remember to move this over some day... */
html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output .documentation,
html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output .documentation-metadata {
border: 1px solid #909090!important;
background-color: #1e2a24!important;
}
 
/*
infobox
*/
html.skin-theme-clientpref-os body.skin-citizen .infobox {
color: #fff;
background: #20262f;
border-color: #2f394d;
}
/* navbox dark theme */
html.skin-theme-clientpref-os body.skin-citizen .navbox-group {
background-color: #3e3e52;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox-subgroup .navbox-group {
background-color: #383847;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox {
border: 1px solid #3f4f61;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox,
html.skin-theme-clientpref-os body.skin-citizen .navbox-subgroup {
background-color: #272834;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox-even {
background-color: #22232b;
}
html.skin-theme-clientpref-os body.skin-citizen .navbox-list {
border-color: #121a20;
}
/* don't understand this entirely... */
html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-abovebelow,
html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-group,
html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-image,
html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-list {
border-top: 2px solid #121a20;
}
 
html.skin-theme-clientpref-os body.skin-citizen .navbox-title {
background-color: #4b4b69;
}
 
/* fix bright background with white text for certain warnings (like protected notices) */
html.skin-theme-clientpref-os body.skin-citizen div.mw-warning-with-logexcerpt,
html.skin-theme-clientpref-os body.skin-citizen div.mw-lag-warn-high,
html.skin-theme-clientpref-os body.skin-citizen div.mw-cascadeprotectedwarning,
html.skin-theme-clientpref-os body.skin-citizen div#mw-protect-cascadeon,
html.skin-theme-clientpref-os body.skin-citizen div.titleblacklist-warning {
background-color: #5b4343;
}
}
}

Latest revision as of 02:32, 2 May 2024

/* fix ApprovedRevs awkwardness with subpages */
.approvedRevs-approved .subpages::after,
.approvedRevs-notapproved .subpages::after,
.approvedRevs-noapprovedrev .subpages::after {
	content: "\A";
	white-space: pre-wrap;
}

/* a change to Citizen made these hidden checkboxes accidentally visible */
input.citizen-menu-checkbox-checkbox {
	display: none;
}

/*
	tables seem to be wrapped by a div.citizen-table-wrapper
	this doesn't fit the content of the table so it pushes everything else down
*/
.citizen-table-wrapper {
	overflow-x: initial;
}

.mw-content-ltr ol,
.mw-content-rtl .mw-content-ltr ol,
.mw-content-ltr ul,
.mw-content-rtl .mw-content-ltr ul {
	padding-inline-start: 40px;
	margin-left: 0;
}
/* un-reset padding for plainlist */
.plainlist ul,
.plainlist ol{
	padding-inline-start: 0;
}

/* fix infobox width on mobile */

@media screen and (max-width: 500px) {
	.infobox {
		margin-left: auto!important;
		margin-right: auto!important;
		float: none!important;
	}
}

/*
	fix infobox display problems on citizen applying rules for tables
	that do not work well for this one
*/

@media screen {
	.infobox {
		display: table;
	}
}

/*
	in tables, the top part of the first p/ul/ol has its margin-top removed
	but it doesn't remove margin-bottom for the last one, making it look wrong
	(in my opinion)
*/
@media screen {
	td > p:last-child, td > ul:last-child, td > ol:last-child {
		margin-bottom: 0;
	}
}

/* navbox margin fix */
div.navbox table { margin-top: 0; }

/* testing dark mode stuff */

/*
	https://github.com/StarCitizenTools/mediawiki-skins-Citizen/commit/a741639085d70c22a9f49890542a142a223bf981
	After this commit, "Auto" won't auto-apply the CSS class for what theme to apply (e.g. skin-citizen-dark)
	so I have to use @media (prefers-color-scheme: dark) for that too.
	
	https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis
*/

/* FOR WHEN DARK MODE IS EXPLICITLY SET */
/* message boxes */
html.skin-theme-clientpref-night body.skin-citizen table.ambox,
html.skin-theme-clientpref-night body.skin-citizen table.imbox {
	background-color: #202c49 /*#fbfbfb*/;
}
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-system,
html.skin-theme-clientpref-night body.skin-citizen table.ombox {
	background-color: #343e57 /*#f8f9fa*/;
}
html.skin-theme-clientpref-night body.skin-citizen table.ambox {
	/* this box puts a 10px border on the left with a special color that should be preserved */
	border-top-color: #5e7288;
	border-right-color: #5e7288;
	border-bottom-color: #5e7288;
}
html.skin-theme-clientpref-night body.skin-citizen table.tmbox {
	background-color: #5d5848;
}
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-editnotice,
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-system,
html.skin-theme-clientpref-night body.skin-citizen table.ombox-protection,
html.skin-theme-clientpref-night body.skin-citizen table.imbox-protection,
html.skin-theme-clientpref-night body.skin-citizen table.ombox-notice,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-delete,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-content,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-style,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-notice,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-move,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-protection {
	border-color: #5e7288;
}
html.skin-theme-clientpref-night body.skin-citizen table.ambox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-delete,
html.skin-theme-clientpref-night body.skin-citizen table.imbox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.tmbox-speedy,
html.skin-theme-clientpref-night body.skin-citizen table.fmbox-warning,
html.skin-theme-clientpref-night body.skin-citizen table.ombox-speedy {
	background-color: #45201e;
}
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-content {
	background-color: #504438;
}
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-style {
	background-color: #635f46;
}
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-notice {
	background-color: #3a4759;
}
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-move {
	background-color: #453b5c;
}
html.skin-theme-clientpref-night body.skin-citizen table.cmbox-protection {
	background-color: #4a4a36;
}

/* documentation template */
/* this is using TemplateStyles, so I need to remember to move this over some day... */
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output .documentation,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output .documentation-metadata {
	border: 1px solid #909090!important;
	background-color: #1e2a24!important;
}

/*
infobox
*/
html.skin-theme-clientpref-night body.skin-citizen .infobox {
	color: #fff;
	background: #20262f;
	border-color: #2f394d;
}

/* navbox dark theme */
html.skin-theme-clientpref-night body.skin-citizen .navbox-group {
	background-color: #3e3e52;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox-subgroup .navbox-group {
	background-color: #383847;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox {
	border: 1px solid #3f4f61;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox,
html.skin-theme-clientpref-night body.skin-citizen .navbox-subgroup {
	background-color: #272834;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox-even {
	background-color: #22232b;
}
html.skin-theme-clientpref-night body.skin-citizen .navbox-list {
	border-color: #121a20;
}
/* don't understand this entirely... */
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-abovebelow,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-group,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-image,
html.skin-theme-clientpref-night body.skin-citizen .mw-parser-output tr+tr>.navbox-list {
	border-top: 2px solid #121a20;
}

html.skin-theme-clientpref-night body.skin-citizen .navbox-title {
	background-color: #4b4b69;
}

/* fix bright background with white text for certain warnings (like protected notices) */
html.skin-theme-clientpref-night body.skin-citizen div.mw-warning-with-logexcerpt,
html.skin-theme-clientpref-night body.skin-citizen div.mw-lag-warn-high,
html.skin-theme-clientpref-night body.skin-citizen div.mw-cascadeprotectedwarning,
html.skin-theme-clientpref-night body.skin-citizen div#mw-protect-cascadeon,
html.skin-theme-clientpref-night body.skin-citizen div.titleblacklist-warning {
	background-color: #5b4343;
}

/* FOR WHEN AUTO IS SET AND THE CLIENT REQUESTS A DARK THEME */
@media (prefers-color-scheme: dark) {
	/* message boxes */
	html.skin-theme-clientpref-os body.skin-citizen table.ambox,
	html.skin-theme-clientpref-os body.skin-citizen table.imbox {
		background-color: #202c49 /*#fbfbfb*/;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.fmbox-system,
	html.skin-theme-clientpref-os body.skin-citizen table.ombox {
		background-color: #343e57 /*#f8f9fa*/;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.ambox {
		/* this box puts a 10px border on the left with a special color that should be preserved */
		border-top-color: #5e7288;
		border-right-color: #5e7288;
		border-bottom-color: #5e7288;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.tmbox {
		background-color: #5d5848;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.fmbox-editnotice,
	html.skin-theme-clientpref-os body.skin-citizen table.fmbox-system,
	html.skin-theme-clientpref-os body.skin-citizen table.ombox-protection,
	html.skin-theme-clientpref-os body.skin-citizen table.imbox-protection,
	html.skin-theme-clientpref-os body.skin-citizen table.ombox-notice,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-delete,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-content,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-style,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-notice,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-move,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-protection {
		border-color: #5e7288;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.ambox-speedy,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-speedy,
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-delete,
	html.skin-theme-clientpref-os body.skin-citizen table.imbox-speedy,
	html.skin-theme-clientpref-os body.skin-citizen table.tmbox-speedy,
	html.skin-theme-clientpref-os body.skin-citizen table.fmbox-warning,
	html.skin-theme-clientpref-os body.skin-citizen table.ombox-speedy {
		background-color: #45201e;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-content {
		background-color: #504438;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-style {
		background-color: #635f46;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-notice {
		background-color: #3a4759;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-move {
		background-color: #453b5c;
	}
	html.skin-theme-clientpref-os body.skin-citizen table.cmbox-protection {
		background-color: #4a4a36;
	}

	/* documentation template */
	/* this is using TemplateStyles, so I need to remember to move this over some day... */
	html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output .documentation,
	html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output .documentation-metadata {
		border: 1px solid #909090!important;
		background-color: #1e2a24!important;
	}

	/*
	infobox
	*/
	html.skin-theme-clientpref-os body.skin-citizen .infobox {
		color: #fff;
		background: #20262f;
		border-color: #2f394d;
	}
	/* navbox dark theme */
	html.skin-theme-clientpref-os body.skin-citizen .navbox-group {
		background-color: #3e3e52;
	}
	html.skin-theme-clientpref-os body.skin-citizen .navbox-subgroup .navbox-group {
		background-color: #383847;
	}
	html.skin-theme-clientpref-os body.skin-citizen .navbox {
		border: 1px solid #3f4f61;
	}
	html.skin-theme-clientpref-os body.skin-citizen .navbox,
	html.skin-theme-clientpref-os body.skin-citizen .navbox-subgroup {
		background-color: #272834;
	}
	html.skin-theme-clientpref-os body.skin-citizen .navbox-even {
		background-color: #22232b;
	}
	html.skin-theme-clientpref-os body.skin-citizen .navbox-list {
		border-color: #121a20;
	}
	/* don't understand this entirely... */
	html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-abovebelow,
	html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-group,
	html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-image,
	html.skin-theme-clientpref-os body.skin-citizen .mw-parser-output tr+tr>.navbox-list {
		border-top: 2px solid #121a20;
	}

	html.skin-theme-clientpref-os body.skin-citizen .navbox-title {
		background-color: #4b4b69;
	}

	/* fix bright background with white text for certain warnings (like protected notices) */
	html.skin-theme-clientpref-os body.skin-citizen div.mw-warning-with-logexcerpt,
	html.skin-theme-clientpref-os body.skin-citizen div.mw-lag-warn-high,
	html.skin-theme-clientpref-os body.skin-citizen div.mw-cascadeprotectedwarning,
	html.skin-theme-clientpref-os body.skin-citizen div#mw-protect-cascadeon,
	html.skin-theme-clientpref-os body.skin-citizen div.titleblacklist-warning {
		background-color: #5b4343;
	}
}