MediaWiki:Citizen.css: mudanças entre as edições

Página de Interface do MediaWiki
(Criou página com '→‎All CSS here will be loaded for users of the Citizen skin: body { font-family: 'Roboto', sans-serif; } blockquote { padding: 8px 16px; font-size: 100%; font-style: inherit; color: var(--color-base) } .skin-citizen-dark .mwe-popups-container { background-color: var(--background-color-dp-03); } .skin-citizen-light { --color-base: #1c2431; } →‎EDITOR CONFIGURATION: .skin-citizen-light .wikiEditor-ui { box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0, 0.5);...')
 
m (Copiando da wiki inglesa)
Linha 1: Linha 1:
/* All CSS here will be loaded for users of the Citizen skin */
/***
****
**** CSS Variables
****
***/
@media screen {
:root {
--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-border-1:hsl(0, 0%, 82%);
--color-border-2:hsl(0, 0%, 88%);
}
:root.skin-citizen-dark {
--color-surface-5:hsl(220,25%,15%);
--color-surface-6:hsl(220,12%,35%);
--color-surface-7:hsl(220,12%,40%);
--color-surface-subtle-red:hsl(0, 45%, 28%);
--color-border-1:hsl(245.6, 27.6%, 22.7%);
--color-border-2:hsl(245.6, 27.6%, 22.7%);
}
}
 


body {
font-family: 'Roboto', sans-serif;
}


blockquote {
padding: 8px 16px;
font-size: 100%;
font-style: inherit;
color: var(--color-base)
}


.skin-citizen-dark .mwe-popups-container {
background-color: var(--background-color-dp-03);
}


.skin-citizen-light {
/**
--color-base: #1c2431;
* ConfirmAcccount theming
*
**/
.mw-confirmaccount-type-0 {
background-color: var(--color-surface-subtle-red);
}
}
/* EDITOR CONFIGURATION */
.mw-confirmaccount-body-0 {
.skin-citizen-light .wikiEditor-ui {
background-color: var(--color-surface-5);
box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0, 0.5);
}
}
.skin-citizen-dark .wikiEditor-ui {
.wpNewBio {
box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0);
background-color: var(--color-surface-2);
}
}
.skin-citizen-dark .ui-state-default {
.mw-special-ConfirmAccounts fieldset {
background: var(--background-color-framed);
border: 1px solid var(--color-border-1);
}
}


.skin-citizen-dark .ace-tm {
 
background-color: var(--background-color-dp-01);
 
color: var(--color-base)
 
}
/***
.skin-citizen-dark .ace-tm .ace_print-margin {
**** Code editor interface
background: var(--background-color-dp-00);
***/
}
.ace-tm .ace_gutter {
.skin-citizen-dark .ace-tm .ace_gutter {
background-color:var(--color-surface-2);
background: var(--color-surface-1);
border-right:1px solid var(--color-border-2);
}
.skin-citizen-dark .ace-tm .ace_gutter-active-line {
background-color: var(--color-surface-2--active);
}
.skin-citizen-dark .codeEditor-status {
background-color: var(--color-surface-2);
border-top:0;
}
}


.skin-citizen-dark .editOptions {
background-color: var(--color-surface-1);
color: var(--color-base);
box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0);
border:0;
}
.skin-citizen-light .editOptions {
border:0;
box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0, 0.5);
}


/* TOC CONFIGURATION */
@media screen {
.skin-citizen-dark #toc {
box-shadow: 0px 2.25em 1em -0.15em rgb(0, 0, 0);
}
.skin-citizen-light #toc {
box-shadow: 0px 2.25em 1em -0.15em rgb(0, 0, 0,0.5);
}
}
@media screen and (max-width: 1300px) {
.skin-citizen-dark #toc {
box-shadow: none;
}
.skin-citizen-light #toc {
box-shadow: none;
}
}


/* INFOBOX CONFIGURATION */
.skin-citizen-dark .infobox {
color: var(--color-base);
background-color: var(--color-surface-2);
box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0);
border: 0;
}
.skin-citizen-light .infobox {
box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0,0.5);
border: 0;
}
.skin-citizen-dark .sidebar {
background-color: var(--color-surface-2) !important;
border: 0 !important;
box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0) !important;
}
.skin-citizen-light .sidebar {
border: 0 !important;
box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0,0.5) !important;
}
.skin-citizen-dark .sidebar-list-title {
border-bottom: 1px solid var(--background-color-dp-24) !important;
}


/* NAVBOX CONFIGURATION */
 
.skin-citizen-dark .navbox {
 
background-color: var(--color-surface-2);
/***
border:0;
****
box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0)
**** 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);
}
}
.skin-citizen-light .navbox {
.wikiEditor-ui .wikiEditor-ui-view {
border:0;
border:1px solid var(--color-border-1);
box-shadow: 0px 0px 0.6em -0.15em rgb(0,0,0,0.5)
}
}
.skin-citizen-dark .navbox-title {
.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-4);
backdrop-filter: none;
background-color: transparent;
}
}
.skin-citizen-dark th.navbox-group {
.CodeMirror-gutters {
background-color: var(--color-surface-4);
background-color:var(--color-surface-2);
border-right:1px solid var(--color-border-2);
}
}
.skin-citizen-dark .navbox-even {
.skin-citizen .mw-editform .editOptions {
background-color: var(--color-surface-2);
background-color: var(--color-surface-5);
border: 1px solid var(--color-border-1);
border-top: 0px;
}
}
.skin-citizen-dark .navbox-odd {
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
background-color: var(--color-surface-0);
border: 1px solid #a2a9b1;
}
}
.skin-citizen-dark tr + tr > .navbox-group {
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
border-top: 2px solid var(--border-color-base);
background-color: var(--color-surface-0);
border: 1px solid #a2a9b1;
}
}
.skin-citizen-dark tr + tr > .navbox-list {
 
border-top: 2px solid var(--border-color-base);
 
}
 
.skin-citizen-dark .navbox-list {
 
border-color: var(--border-color-base);
 
/***
**** Recent changes theming
***/
.rc-sidebar-user {
color: var(--color-base--subtle);
}
}


/* LOGO */
/***
.mw-logo-icon {
****
width:32px;
**** Success message after publishing an edit
object-fit:contain;
****
***/
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
color:var(--color-success2);
}
}

Edição das 03h06min de 9 de março de 2023

/***
****
****	CSS Variables
****
***/
@media screen {
	:root {
		--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-border-1:hsl(0, 0%, 82%);
		--color-border-2:hsl(0, 0%, 88%);
	}
	:root.skin-citizen-dark {
		--color-surface-5:hsl(220,25%,15%);
		--color-surface-6:hsl(220,12%,35%);
		--color-surface-7:hsl(220,12%,40%);
		--color-surface-subtle-red:hsl(0, 45%, 28%);
		--color-border-1:hsl(245.6, 27.6%, 22.7%);
		--color-border-2:hsl(245.6, 27.6%, 22.7%);
	}
}





/**
 *		ConfirmAcccount theming
 *		
**/
.mw-confirmaccount-type-0 {
	background-color: var(--color-surface-subtle-red);
}
.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(--color-border-1);
}




/***
****	Code editor interface
***/
.ace-tm .ace_gutter {
	background-color:var(--color-surface-2);
	border-right:1px solid var(--color-border-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(--color-border-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(--color-border-2);
}
.skin-citizen .mw-editform .editOptions {
	background-color: var(--color-surface-5);
	border: 1px solid var(--color-border-1);
	border-top: 0px;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	background-color: var(--color-surface-0);
	border: 1px solid #a2a9b1;
}
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
	background-color: var(--color-surface-0);
	border: 1px solid #a2a9b1;
}





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