MediaWiki:Common.css: Difference between revisions

From Melvor Idle
(Dark mode: Adjustments for category pages & various special pages)
(Dark mode: Amend cell colour rules to also apply to row styles)
Line 292: Line 292:
}
}
body.darkMode td[style*="background-color:lightpink;"],
body.darkMode td[style*="background-color:lightpink;"],
body.darkMode td[style*="background-color:#FFE8E8;"] {
body.darkMode td[style*="background-color:#FFE8E8;"],
body.darkMode tr[style*="background-color:lightpink;"],
body.darkMode tr[style*="background-color:#FFE8E8;"] {
background-color:#6a2731!important
background-color:#6a2731!important
}
}
body.darkMode td[style*="background-color:lightgreen;"],
body.darkMode td[style*="background-color:lightgreen;"],
body.darkMode td[style*="background-color:#E8FFEB;"] {
body.darkMode td[style*="background-color:#E8FFEB;"],
body.darkMode tr[style*="background-color:lightgreen;"],
body.darkMode tr[style*="background-color:#E8FFEB;"] {
background-color:#285128!important
background-color:#285128!important
}
}

Revision as of 12:32, 2 January 2022

/* CSS placed here will be applied to all skins */
.stickyHeader th {
	position:-webkit-sticky;
	position:sticky
}

table.lighttable .highlight-over {
	background-color:#ccc
}
table.lighttable .highlight-on {
	background-color:#cfc
}

.wikitable.headerBorders th:first-child,
.wikitable.headerBorders th:last-child,
body.darkMode .wikitable.headerBorders th:first-child,
body.darkMode .wikitable.headerBorders th:last-child {
	border-left: none;
	border-right:none
}
.wikitable.headerBorders th {
	border:solid 1px #fff;
	background-clip: padding-box
}
body.darkMode .wikitable.headerBorders th {
	border:solid 1px #2c343f;
	background-clip: padding-box
}

.mw-code,
.mw-script {
	tab-size: 4
}

.col-1-left td:nth-child(1) { text-align: left; }
.col-2-left td:nth-child(2) { text-align: left; }
.col-3-left td:nth-child(3) { text-align: left; }
.col-4-left td:nth-child(4) { text-align: left; }
.col-5-left td:nth-child(5) { text-align: left; }
.col-6-left td:nth-child(6) { text-align: left; }
.col-7-left td:nth-child(7) { text-align: left; }
.col-8-left td:nth-child(8) { text-align: left; }
.col-9-left td:nth-child(9) { text-align: left; }

.col-1-center td:nth-child(1) { text-align: center; }
.col-2-center td:nth-child(2) { text-align: center; }
.col-3-center td:nth-child(3) { text-align: center; }
.col-4-center td:nth-child(4) { text-align: center; }
.col-5-center td:nth-child(5) { text-align: center; }
.col-6-center td:nth-child(6) { text-align: center; }
.col-7-center td:nth-child(7) { text-align: center; }
.col-8-center td:nth-child(8) { text-align: center; }
.col-9-center td:nth-child(9) { text-align: center; }

.col-1-right td:nth-child(1) { text-align: right; }
.col-2-right td:nth-child(2) { text-align: right; }
.col-3-right td:nth-child(3) { text-align: right; }
.col-4-right td:nth-child(4) { text-align: right; }
.col-5-right td:nth-child(5) { text-align: right; }
.col-6-right td:nth-child(6) { text-align: right; }
.col-7-right td:nth-child(7) { text-align: right; }
.col-8-right td:nth-child(8) { text-align: right; }
.col-9-right td:nth-child(9) { text-align: right; }

/* Dark mode specific rules below this point */
body.darkMode #mw-page-header-links li.selected a,
body.darkMode #p-logo-text a,
body.darkMode #searchInput,
body.darkMode .diff-context,
body.darkMode .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
body.darkMode .mw-body .mw-search-profile-tabs,
body.darkMode .mw-body fieldset#mw-searchoptions,
body.darkMode .mw-changeslist-legend,
body.darkMode .mwe-popups .mwe-popups-extract,
body.darkMode .mw-rcfilters-ui-itemMenuOptionWidget-label-title,
body.darkMode .mw-rcfilters-ui-filterMenuHeaderWidget-title,
body.darkMode .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title,
body.darkMode .mw-rcfilters-ui-filterTagMultiselectWidget-resetButton > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
body.darkMode .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
body.darkMode .mw-rcfilters-ui-savedLinksListWidget-placeholder.oo-ui-optionWidget .oo-ui-labelElement-label,
body.darkMode .mw-rcfilters-ui-tagItemWidget-popup-content,
body.darkMode .mw-rcfilters-ui-viewSwitchWidget > .oo-ui-labelElement-label,
body.darkMode .mw-widget-calendarWidget-day,
body.darkMode .mw-widget-calendarWidget-labelButton > .oo-ui-buttonElement-button,
body.darkMode .oo-ui-buttonOptionWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
body.darkMode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
body.darkMode .search-types .current a,
body.darkMode .suggestions .suggestions-result,
body.darkMode .suggestions a.mw-searchSuggest-link,
body.darkMode .suggestions a.mw-searchSuggest-link:active,
body.darkMode .suggestions a.mw-searchSuggest-link:focus,
body.darkMode .suggestions a.mw-searchSuggest-link:hover,
body.darkMode .suggestions-special .special-query,
body.darkMode .wikitable,
body.darkMode code,
body.darkMode {
	color:#eee
}
body.darkMode #pagehistory li {
	border:1px solid #2c343f
}
body.darkMode .diff-addedline .diffchange {
	background:#4f6334
}
body.darkMode .diff-deletedline .diffchange {
	background:#775353
}
body.darkMode .diff-addedline {
	border-color:#4f6334
}
body.darkMode .diff-deletedline {
	border-color:#775353
}
body.darkMode .updatedmarker {
	background-color:#4f6334
}
body.darkMode #pagehistory li.selected {
	background-color:#353d48;
	color:#eee;
	border:1px dashed #465160
}
body.darkMode .mw-plusminus-pos {
	color:#18b918
}
body.darkMode .mw-plusminus-neg {
	color:#f94e4e
}
body.darkMode .editOptions,
body.darkMode .mw-rcfilters-ui-filterMenuSectionOptionWidget {
	background-color:#232a35
}
body.darkMode pre,
body.darkMode textarea,
body.darkMode #mw-header-container,
body.darkMode .oo-ui-textInputWidget .oo-ui-inputWidget-input,
body.darkMode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
body.darkMode .oo-ui-checkboxInputWidget [type='checkbox'] + span,
body.darkMode .oo-ui-toggleSwitchWidget,
body.darkMode .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip,
body.darkMode .mw-code,
body.darkMode .mw-widget-dateInputWidget-handle,
body.darkMode mw-tagfilter-input mw-ui-input mw-ui-input-inline {
	background-color:#323942;
	color:#eee
}
body.darkMode .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-flaggedElement-progressive):not([aria-selected="true"]) > .oo-ui-buttonElement-button,
body.darkMode .oo-ui-popupWidget-popup,
body.darkMode .oo-ui-menuOptionWidget.oo-ui-optionWidget,
body.darkMode .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
body.darkMode .mw-widget-dateInputWidget-calendar {
	background-color:#323942;
	border-color:#465160;
	color:#eee
}
body.darkMode .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-flaggedElement-progressive):not([aria-selected="true"]) > .oo-ui-buttonElement-button:hover,
body.darkMode .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:hover,
body.darkMode .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
body.darkMode .mw-rcfilters-ui-savedLinksListItemWidget:hover {
	background-color:#3c424a
}
body.darkMode .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
body.darkMode .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
	background-color:#223145
}
body.darkMode .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
	color:#a4a1a1;
}
body.darkMode .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle,
body.darkMode .mw-rcfilters-ui-filterMenuHeaderWidget-header,
body.darkMode .mw-rcfilters-ui-menuSelectWidget-footer {
	background-color:#282e37;
}
body.darkMode .mw-widget-calendarWidget-day-heading {
  color:#a6a6a6;
}
body.darkMode .mw-widget-calendarWidget-day-additional {
	color:#222
}
body.darkMode .oo-ui-toggleSwitchWidget:hover {
	background-color:#323942
}
body.darkMode .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
	border-color:#72777d
}
body.darkMode .pokey,
body.darkMode .pokey:after {
	border-bottom:10px solid #323942
}
body.darkMode .pokey {
	border-bottom-color:#465160
}
body.darkMode .oo-ui-popupWidget-anchor:before {
	border-top-color:#465160
}
body.darkMode .oo-ui-popupWidget-anchor:after {
	border-top-color:#323942
}
body.darkMode #simpleSearch,
body.darkMode .editOptions {
	border-color:#465160
}
body.darkMode #mw-content-container,
body.darkMode #simpleSearch,
body.darkMode .cn-formsection-emphasis {
	background-color:#232a35
}
body.darkMode .mw-parser-output a.external,
a {
	color:#29d
}
body.darkMode .mw-parser-output a.external:visited,
a:visited {
	color:#18c
}
body.darkMode .mw-parser-output a.external:active,
body.darkMode .mw-parser-output a.external:hover,
body.darkMode a:active,
body.darkMode a:hover {
	color:#5bf
}
body.darkMode .mw-spinner-container > div:after {
	background:#eee
}
body.darkMode #mw-content {
	background-color:#2c343f;
	border-color:#2c343f
}
body.darkMode .not-patrolled {
	background-color:#594215
}
body.darkMode .tocnumber {
	color:#ccc
}
body.darkMode .toctogglelabel {
	color:#28c
}
body.darkMode .diff-context,
body.darkMode .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
body.darkMode .mw-body .mw-search-profile-tabs,
body.darkMode .mw-body fieldset#mw-searchoptions,
body.darkMode .mw-body li.gallerybox div.thumb,
body.darkMode .mw-changeslist-legend,
body.darkMode .mw-warning,
body.darkMode .suggestions,
body.darkMode .suggestions .suggestions-results,
body.darkMode .suggestions .suggestions-special,
body.darkMode .thumbinner,
body.darkMode .toc,
body.darkMode .wikitable,
body.darkMode ul#filetoc {
	background-color:#323942;
	border-color:#465160
}
body.darkMode pre,
body.darkMode .mw-code,
body.darkMode .thumbborder,
body.darkMode .thumbinner .thumbimage,
body.darkMode .wikitable>*>tr>td,
body.darkMode .wikitable>*>tr>th,
body.darkMode .wikitable>tr>td,
body.darkMode .wikitable>tr>th {
	border-color:#465160
}
body.darkMode .wikitable>*>tr>th,
body.darkMode .wikitable>tr>th {
	background-color:#465160
}
body.darkMode .mw-datatable {
	border:1px solid #465160;
	border-collapse:collapse
}
body.darkMode .mw-datatable td,
body.darkMode .mw-datatable th {
	border:1px solid #465160;
	padding:0.2em 0.4em
}
body.darkMode .mw-datatable th {
	background-color:#465160
}
body.darkMode .mw-datatable td {
	background-color:#323942
}
body.darkMode .mw-datatable tr:hover td,
body.darkMode #mw-allmessagestable tbody:hover td {
	background-color:#3c424a
}
body.darkMode .mwe-popups {
	background:#323942
}
body.darkMode .mwe-popups .mwe-popups-extract[dir=ltr]::after {
	background-image:linear-gradient(to right,rgba(255,255,255,0),#323942 50%)
}
body.darkMode td[style*="background-color:lightpink;"],
body.darkMode td[style*="background-color:#FFE8E8;"],
body.darkMode tr[style*="background-color:lightpink;"],
body.darkMode tr[style*="background-color:#FFE8E8;"] {
	background-color:#6a2731!important
}
body.darkMode td[style*="background-color:lightgreen;"],
body.darkMode td[style*="background-color:#E8FFEB;"],
body.darkMode tr[style*="background-color:lightgreen;"],
body.darkMode tr[style*="background-color:#E8FFEB;"] {
	background-color:#285128!important
}
body.darkMode span[style*="color:green"] {
	color:#3ec83e!important
}
body.darkMode table[style*="background:#FFF7F7;"] {
	background-color:#465160!important
}
body.darkMode #mw-header-nav-hack {
	background:#323942;
	border-top-color:#465160
}
@media only screen and (min-width:1100px) {
	body.darkMode #mw-related-navigation .sidebar-chunk,
	body.darkMode #mw-site-navigation .sidebar-chunk {
		background-color:#323942;
		border-color:#323942;
		box-shadow:0 1px 2px rgb(33 34 35/50%),0 1px 2px rgb(26 26 27/50%)
	}
}
body.darkMode #mw-related-navigation .sidebar-inner,
body.darkMode #mw-site-navigation .sidebar-inner,
body.darkMode #personal .dropdown {
	background:#323942;
	border-color:#465160
}
body.darkMode #menus-cover {
	background:#111
}
body.darkMode table.lighttable .highlight-over {
	background-color:#465160
}
body.darkMode table.lighttable .highlight-on {
	background-color:#285128
}
body.darkMode code,
body.darkMode .mw-notification {
	background-color: #353d48;
	border-color:#465160;
	color:#eee
}
/* Scribunto/Lua Module Editing */
body.darkMode .mw-scribunto-console-fieldset,
body.darkMode .mw-scribunto-error,
body.darkMode .mw-scribunto-message,
body.darkMode .mw-scribunto-print {
	background-color:#2c343f;
}
body.darkMode .mw-scribunto-console-fieldset {
	border-color:#465160;
	color:#eee
}
body.darkMode .mw-scribunto-error {
	color:#ff4242;
}
body.darkMode .mw-scribunto-input {
	color:#0897c4;
}
body.darkMode #mw-scribunto-input {
	background-color:#3c4653;
}
body.darkMode .mw-scribunto-print {
	color:#a65709;
}
body.darkMode .codeEditor-status {
	color:#001133
}