MediaWiki:Citizen.css

/***
****
****	CSS Variables
****
***/
@media screen {
	:root {
		--border-color-1:hsl(0, 0%, 69%);
		--border-color-2:hsl(0, 0%, 88%);
		--color-surface-2:hsl(0,0%,97%);
		--color-surface-4:hsl(213,30%,85%);
		--color-surface-5:hsl(220,17%,93%);
		--color-surface-6:hsl(200,2%,60%);
		--color-surface-7:hsl(180,2%,40%);
		--color-surface-subtle-red:hsl(0, 100%, 97%);
		--color-success2:hsl(167,70%,31%);
		--color-red-3:#b50014;
		--color-base:#262e35;
		--color-base--subtle:#646464;
		--color-base--emphasized:#202020;
		--color-primary:#143fbf;
	}
	:root.skin-citizen-dark {
		--border-color-1:hsl(220, 28%, 23%);
		--border-color-2:hsl(220,25%,20%);
		--color-surface-5:hsl(220,25%,15%);
		--color-surface-6:hsl(220,12%,35%);
		--color-surface-7:hsl(220,12%,40%);
		--color-red-3:#b50014;
		--color-surface-subtle-red:hsl(0, 45%, 28%);
		--color-primary:#5c85d6;
	}
}

/***
****
****	Mobile Citzen CSS
****
***/
@media (max-width: 720px) {
  table {
  	width:100% !important;
  	display: table;
  }
}




/**
 *		General theming
 *		
**/

.toccolours {
  background-color: var(--color-surface-2);
  border: 1px solid var(--border-color-1);
}

blockquote {
  font-family: inherit;
  color: inherit;
  font-style: inherit;
  font-size: 95%;
}

			/*	CSS for input textboxes	*/
.mw-ui-input {
	border-color: var(--border-color-1);
}




			/*	CSS for Infoboxes	*/
.infobox {
	border: 1px solid var(--border-color-1)	!important;
	background-color: var(--color-surface-2)	!important;
	color: var(--color-base)	!important;
}
.infobox.geography td, .infobox.geography th, .infobox.geography .mergedtoprow td, .infobox.geography .mergedtoprow th{
	border-top: 1px solid var(--border-color-1)	!important;
}
.infobox.geography .mergedbottomrow td, .infobox.geography .mergedbottomrow th {
	border-bottom: 1px solid var(--border-color-1)	!important;
}
.infobox.geography .mergedrow td, .infobox.geography .mergedrow th {
	border:0 !important;
}





			/*	CSS for Navboxes	*/
.navbox th, .navbox-title {
	background-color: var(--color-surface-4);
}
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
	background-color: var(--color-surface-5);
}
.navbox {
	background-color: var(--color-surface-1);
	border: 1px solid var(--border-color-1);
}
.navbox-list {
	border-color: var(--border-color-2);
}
.navbox-even {
	background-color: var(--color-surface-2);
}
tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {
	border-top: 2px solid var(--border-color-2);
}


			/*	CSS for Message boxes	*/
.mbox {
	border: 1px solid var(--border-color-1) !important;
	background-color: var(--color-surface-2) !important;
	border-left: 10px solid var(--color-red-3) !important;
}




/**
 *		StructuredDiscussions theming (discussion pages)
 *		
**/
.flow-post {
  color: var(--color-base);
}
.flow-topic-titlebar {
	background-color: var(--color-surface-3);
}





/**
 *		ConfirmAcccount theming
 *		
**/
.mw-confirmaccount-type-0 {
	  background-color: var(--color-surface-4);
}
.mw-confirmaccount-body-0 {
	background-color: var(--color-surface-5);
}
.wpNewBio {
	background-color: var(--color-surface-2);
}
.mw-special-ConfirmAccounts fieldset {
	border: 1px solid var(--border-color-1);
}
.mw-confirmaccount-bar {
  border: 1px solid var(--border-color-1);
  background-color: var(--color-surface-2);
}





/***
****	Code editor interface
***/
.ace-tm .ace_gutter {
	background-color:var(--color-surface-2);
	border-right:1px solid var(--border-color-2);
}






/***
****
****	Source editor interface
****
***/
.wikiEditor-ui-toolbar {
	padding: 0.25em;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
	background-color:var(--color-surface-2);
}
.wikiEditor-ui .wikiEditor-ui-view {
	border:1px solid var(--border-color-1);
}
.wikiEditor-ui .wikiEditor-ui-top::before {
	backdrop-filter: none;
	background-color: transparent;
}
.CodeMirror-gutters {
	background-color:var(--color-surface-2);
	border-right:1px solid var(--border-color-2);
}
.skin-citizen .mw-editform .editOptions {
	background-color: var(--color-surface-5);
	border: 1px solid var(--border-color-1);
	border-top: 0px;
}
.oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary) {
  border:1px solid var(--border-color-1);
  border-radius: 5px
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	background-color: var(--color-surface-0);
	border: 1px solid var(--border-color-1);
}
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
	background-color: var(--color-surface-0);
	border: 1px solid var(--border-color-1);
}




/***
****	Recent changes theming
***/
.rc-sidebar-user {
	color: var(--color-base--subtle);
}




/***
****
****	Success message after publishing an edit
****
***/
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
	color:var(--color-success2);
}