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

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
More languages
(test removing what we changed for dark mode)
(Trying to add option to load multiple CSS from MediaWiki namespace (avoiding TemplateStyles limitations), to increase modularity and improving maintenance)
Line 1: Line 1:
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Templates.css");
/***
/***
****
****

Revision as of 13:18, 26 August 2024

@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:Templates.css");
/***
****
****	CSS Variables
****
***/
@media screen{
	:root.skin-citizen-light { /*Light mode*/
	/***** 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;
		--border-color-1:#b0b0b0;
		--border-color-2:#c7c7c7;
	}
	
	:root.skin-citizen-dark { /*dark mode*/
	/***** actual Citizen variables *****/

		
	/** 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%);
		--border-color-1:hsl(220, 28%, 23%);
		--border-color-2:hsl(220,25%,20%);
	}
	:root.skin-citizen-auto{ /*auto mode*/
		
	}
	.skin-citizen-dark .mw-portlet a::before{ /* inverts preprended icon colour in dark theme */
		filter:invert(1);
	}
}

/*********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-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);
}

/*

/***
****	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);
	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);
}

/*Adds an icon to Request Account link when not logged in*/
@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");
	}
}


/**
	* 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;
}