MediaWiki:Citizen.css

MediaWiki interface page
Revision as of 05:58, 14 January 2022 by Forte (talk | contribs) (More box-shadow for dark mode)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */

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

.skin-citizen-light {
	--color-base: #1c2431
}

.skin-citizen-light .wikiEditor-ui {
	box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0, 0.5);
}

.skin-citizen-dark .wikiEditor-ui {
	box-shadow: 0px 0px 0.6em -0.15em rgba(0, 0, 0);
}


/* Code Editor options */

.skin-citizen-dark .ace-tm {
	background-color: var(--background-color-dp-01);
	color: var(--color-base)
}
.skin-citizen-dark .ace-tm .ace_print-margin {
	background: var(--background-color-dp-00);
}

.skin-citizen-dark .ace-tm .ace_gutter {
	background: var(--color-surface-1);
}

.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);
	
}

@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;
	}
}


.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;
}