MediaWiki:Citizen.css

/***
****
****	CSS Variables
****
***/
@media screen{
	:root{
	/***** actual Citizen variables *****/
		--color-surface-0:white; /*site background only*/
		--color-surface-1:white; /*Modal, dropdown. Defaults to same as surface-0*/
		--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-progressive:#3366CC; /*Secondary (additional) color, defaults to blue*/
		
		--border-color-base: rgba(0,0,0,0.08) ; /*base border color, defaults to 0.08 alpha black*/
		
	/** Custom variables **/
		--color-surface-subtle-red:hsl(0, 100%, 97%);
		--color-success2:hsl(167,70%,31%);
		--color-codeeditor-select:#b5d5ff;
		--color-codeeditor-similar:#fafaff;
		--color-codeeditor-similar-border:#c8c8fa;
		--color-red-2:#900010;
		--color-red-3:#b50014;
		--color-red-light-3:#c33242;
		--color-base:#262e35;
		--color-base--subtle:#646464;
		--color-base--emphasized:#202020;
	}
	
	:root.skin-citizen-dark { /*dark mode*/
	/***** actual Citizen variables *****/
		--color-surface-0:#101318; /*controls most background colors*/
		--color-surface-1:#101318; /*Modal, dropdown. Defaults to same as surface-0*/
		--color-surface-2:#191E29;
		--color-surface-5:hsl(220,25%,15%);
		--color-surface-6:hsl(220,12%,35%);
		--color-surface-7:hsl(220,12%,40%);
		
		--color-progressive: #3366CC; /*controls secondary color; defaults to blue*/
		
		--border-color-base: rgba(0,0,0,0.08) ; /*base border color, defaults to 0.08 alpha black*/
		
	/** Custom variables **/
		--color-codeeditor-select:#485465;
		--color-codeeditor-similar:#394350;
		--color-codeeditor-similar-border:#4c5561;
		--color-red-2:#900010;
		--color-surface-subtle-red:hsl(0, 45%, 28%);
	}
}



/*********fixing visual glitches from new update. Will be integrated later. ************/

/******* end latest update fixing *******/

/*table fix*/
.wikitable{
	border:none!important;
}

/***
****
****	Mobile Citizen CSS
****
***/
@media (max-width: 720px) {
	table {
		width:100% !important;
		display: table;
		float: unset !important;
		margin: auto !important;
    }
}

/******
 ******	General theming
 ******	
*******/
/* Adds bottom border for Title and level 1 headers */
h1,h2 {
	border-bottom: 1px solid #a2a9b1;
}

h1 {
	width: 100%;
}
/* Removes bottom border from sticky title heading */
.citizen-body-header--sticky h1 {
	border: none;
}

/***
****	CSS for edit buttons
***/

#ca-edit > a:hover, #ca-ve-edit > a:hover, #ca-request-account > a:hover {
	background-color: var(--color-red-light-3);
}

#ca-edit > a, #ca-ve-edit > a, #ca-request-account > a {
	background-color: var(--color-red-3);
	color: #fff;
}

.citizen-ve-edit-merged#ca-edit {
	/*border-left: 1px solid #a20012;*/
}

#citizen-languages__buttonCheckbox::after {
	background: var(--color-red-3);
}

/*
.mw-ui-icon-wikimedia-edit:before{
	background-image:url(/load.php?modules=skins.citizen.icons&image=wikiText&format=original&lang=en&skin=citizen&version=xqufm);
}
.mw-ui-icon-wikimedia-edit.mw-editsection-visualeditor:before , .citizen-ui-icon.mw-ui-icon-edit.mw-ui-icon-wikimedia-edit:before{
	background-image:url(/load.php?modules=skins.citizen.icons&image=edit&format=original&lang=en&skin=citizen&version=xqufm);
}

@media screen{
	#ca-request-account > a::before{
		width:var(--size-icon);
		height:var(--size-icon);
		background-position:var(--size-icon);
		background-repeat:var(--size-icon);
		background-size:var(--size-icon);
		content:'';
		filter:invert(1);
		opacity:1;
		background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22m19.5 9.8 2.2-2.2c.4-.4.4-1.1 0-1.6L18 2.3c-.4-.4-1.1-.4-1.6 0l-2.2 2.2 5.3 5.3zm-6.4-4.1L2 16.7V22h5.3l11.1-11.1c-.1 0-5.3-5.2-5.3-5.2z%22/%3E %3C/g%3E%3C/svg%3E");
	}
}


*/

/***
****	CSS for article references
***/
.rt-tooltip {
	/*background-color: var(--color-surface-2);*/
	/*color: var(--color-base);*/
	/*border:1px solid var(--border-color-1);*/
}
.rt-tooltipTail::after {
	/*background: var(--color-surface-2);*/
}
.rt-tooltipTail {
	/*background:linear-gradient(to top right,var(--border-color-1) 50%,rgba(0,0,0,0) 50%);*/
}
.rt-target {
	/*background-color: var(--color-surface-4);*/
}

.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 wikitables
***/
.wikitable th {
	/*border: 1px solid var(--border-color-2);*/
	/*background-color: var(--color-surface-3);*/
}
.wikitable td {
	/*background-color: var(--color-surface-2);*/
}
.wikitable {
	/*border: 1px solid var(--border-color-2);*/
}

/***
****	CSS for Infoboxes
***/
.infobox {
	/*border: 1px solid var(--border-color-1) !important;*/
	/*background-color: var(--color-surface-2) !important;*/
	/*color: var(--color-base) !important;*/
	margin: 0.5em 0 0.5em 1em;
	border-spacing: 3px;
	float: right;
	clear: right;
	font-size: 88%;
	line-height: 1.5em;
	padding: 1em;
	
}
.infobox td, .infobox th {
	vertical-align: top;
	text-align: left;
}
.infobox.geography {
	border-collapse: collapse;
	line-height: 1.2em;
	font-size: 90%;
}
.infobox.geography td, .infobox.geography th {
	/*border-top: 1px solid var(--border-color-1);*/
	padding: 0.4em 1.5em 0.4em 1.5em;
}
.infobox.geography .mergedtoprow td, .infobox.geography .mergedtoprow th {
	/*border-top: 1px solid var(--border-color-1);*/
	padding: 0.4em 1.5em 0.2em 1.5em;
}

.infobox.geography .mergedbottomrow td, .infobox.geography .mergedbottomrow th {
	border-top: 0;
	/*border-bottom: 1px solid var(--border-color-1);*/
	padding: 0 1.5em 0.4em 1.5em;
}
.infobox.geography .mergedrow td, .infobox.geography .mergedrow th {
	border:0;
	padding: 0 1.5em 0.2em 1.5em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
	border: 0;
	padding: 0;
}




/***
****	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;*/
}
/***
****	Sidebar CSS
***/
.skin-citizen .sidebar {
	/*background: var(--color-surface-2) !important;*/
	/*border: 1px solid var(--border-color-1) !important;*/
}

/*Megamenu list*/
#p-RecentChanges ul{
	list-style-type: none;
	margin:0;
}

/**
 *		StructuredDiscussions theming (discussion pages)
 *		
**/
.flow-post {
	/*color: var(--color-base);*/
}
.flow-topic-titlebar {
	/*background-color: var(--color-surface-3);*/
}
div > .flow-menu ul {
	/*background: var(--color-surface-2);*/
	/*border: 1px solid var(--border-color-1);*/
}
.flow-topic-moderatestate-lock .flow-topic-titlebar {
	/*background-color: var(--color-surface-4);*/
}
.flow-component.flow-board-page .flow-board-header {
	/*background-color: var(--color-surface-2);*/
}
.flow-ui-editorWidget-editor {
	/*border: 1px solid var(--border-color-2);*/
}


@media all and (min-width:1165px) {
	.flow-component.flow-board-page .flow-board-navigation,
	.flow-component.flow-board-page .flow-board {
		float:none;
 }
	.flow-component.flow-board-page .flow-board-header {
		min-height:0;
	}
}


/**
 *		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);*/
}
input, select, textarea {
	/*border: 1px solid var(--border-color-1);*/
	/*background-color: var(--color-surface-2);*/
	/*color: var(--color-base--emphasized);*/
}


/***
****	Code editor interface
***/
.ace-tm .ace_gutter {
	/*background-color:var(--color-surface-2);*/
	/*border-right:1px solid var(--border-color-2);*/
}
.ace-tm .ace_marker-layer .ace_selection {
	/*background: var(--color-codeeditor-select);*/
}
.ace-tm .ace_marker-layer .ace_selected-word {
	/*background:var(--color-codeeditor-similar);*/
	/*border: 1px solid var(--color-codeeditor-similar-border);*/
}
.ace_search {
	/*background-color: var(--color-surface-2);*/
	/*color: var(--color-base);*/
	/*border: 1px solid var(--border-color-2);*/
}
.ace_search_field {
	/*color: var(--color-base);*/
	/*background-color: var(--color-surface-1);*/
	/*border-color: var(--border-color-2)*/
}
.ace_searchbtn {
	/*color: var(--color-base);*/
	/*background-color: var(--color-surface-2);*/
	/*border-color: var(--border-color-2);*/
}
.ace_searchbtn:hover {
	/*background-color: var(--color-surface-4);*/
}
.ace_searchbtn:last-child {
	/*border-color: var(--border-color-2);*/
}
.ace_button {
	/*color: var(--color-base);*/
}
.ace_button:hover {
	/*background-color: var(--color-surface-4);*/
}
/*.ace-tm .ace_constant.ace_numeric {*/
/* color: rgb(200, 100, 200);*/
/*}*/
/*.ace-tm .ace_storage,*/
/*.ace-tm .ace_keyword {*/
/* color: rgb(0,150,200);*/
/*}*/


/***
****
****	Visual editor interface
****
***/
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
	/*border-bottom-color: var(--border-color-1);*/
}
.oo-ui-popupWidget-popup {
	/*border: 1px solid var(--border-color-2);*/
}
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
	/*background-color: var(--color-red-3);*/
}
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
	/*background-color:var(--color-red-light-3);*/
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	/*background-color:var(--color-red-3);*/
	/*border-color: var(--color-red-light-3);*/
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
	/*border-color: var(--color-red-light-3);*/
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{
	/*background-color:var(--color-red-light-3);*/
}

/***
****
****	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-buttonGroupWidget {
	/*border:1px solid var(--border-color-1);*/
}
.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);*/
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	/*border: 1px solid var(--border-color-1);*/
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
	/*border-color: var(--border-color-2);*/
}


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

/***
****	Page view CSS
***/

/* Image CSS */
.citizen-body a.image:hover:not(.lazy):not(.new) > img{
	transform: scale(1.03);
}

	/*not sure why the reduced scaling effect broke and why it needs @media screen, but this is exactly how it renders on a page since 1.4*/
@media screen{
	figure[typeof~="mw:File"] > a:first-child:hover:not(.lazy):not(.new) > img, figure[typeof~="mw:File/Frameless"] > a:first-child:hover:not(.lazy):not(.new) > img, figure[typeof~="mw:File/Thumb"] > a:first-child:hover:not(.lazy):not(.new) > img, figure[typeof~="mw:File/Frame"] > a:first-child:hover:not(.lazy):not(.new) > img {
		transform:scale(1.03);
	}
}

/* Table of Content styling */
.citizen-toc-level--1 > a{
	font-weight:bold;
	font-style:normal;
}

.citizen-toc-level--3 > a{
	font-weight:lighter;
	font-style:normal;
}

.citizen-toc-level--4 > a{
	font-size:0.9em;
	font-style:normal;
	font-weight:lighter;
}

.citizen-toc-level--5 > a{
	display:none;
}

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

/***
****
****	Bug fixes
****
***/
.oo-ui-windowManager-modal > .oo-ui-dialog {
	z-index: 101;
}
/***
****
****	Megamenu icons
****
***/
#n-Library a::before,#n-wantedpages a::before,#n-accrequest a::before,#n-Essays a::before,#n-Articles a::before,#n-Quotes a::before{
	background-repeat:no-repeat;
	content:"";
	height:1rem;
	width:1rem;
	opacity:var(--opacity-icon-base);
	background-size:100%;
}

/* adding icons for megamenu items */

#n-Library a::before{ /*Library*/
	background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-citation&image=book&format=original&skin=citizen);
}

#n-wantedpages a::before { /*Wanted pages*/
	background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-content&image=articleNotFound&format=original&skin=citizen);
}
#n-accrequest a::before { /*Recruitment*/
	background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-user&image=userGroup&format=original&skin=citizen);
}
#n-Essays a::before { /*Essays*/
	background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-citation&image=newspaper&format=original&skin=citizen);
}
#n-Articles a::before { /*All pages*/
	background-image:linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-content&image=articles&format=original&skin=citizen);
}
#n-Quotes a::before{
	background-image:linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-alerts&image=speechBubbles&format=original&skin=citizen);
}
.prolewiki-ui-icon-sandbox::before { /*Sandbox (in bottom left sidebar)*/
	background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=sandbox&format=original&skin=citizen);
}


/**
	* Appended icons in the Citizen sidebar (see Common.js for code)
**/
.sidebar-library > div, .sidebar-essays > div, .sidebar-upload > div{
	height:40px;
	width:100%;
	background-repeat:no-repeat;
	background-size:auto;
	background-position:center;
	opacity:var(--opacity-icon-base);
	content:"";
	filter:var(--filter-invert); /* for dark mode */
}

.sidebar-library > div{
	background-image:linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-citation&image=book&format=original&skin=citizen);
}

.sidebar-essays > div {
	background-image: linear-gradient(transparent,transparent),url(/load.php?modules=oojs-ui.styles.icons-editing-citation&image=newspaper&format=original&skin=citizen);
}

.sidebar-upload > div{
	background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E%3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E%3C/svg%3E");
}

/***
****	Custom pages/templates specific CSS
****	for responsiveness, custom skin and dark mode use
****
***/

/* New library */
.library-card-content{
	/*background:var(--color-surface-0);*/
}

/* New essays page */
.mw-parser-output .essays-sidebar-item > div{
	/*background:var(--color-surface-2)!important;*/
}