MediaWiki:Vector.css: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
No edit summary |
No edit summary |
||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* skin error overrides */ |
|||
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child( even ) td { |
|||
background-color: inherit !important; /* avoids white-on-white in dark skin */ |
|||
} |
|||
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td { |
|||
background-color: inherit !important; /* avoids white-on-white in dark skin */ |
|||
} |
|||
/*********************************************************************************************************** |
|||
* css reset for browser default rules and MediaWiki internal rules |
|||
***********************************************************************************************************/ |
|||
* { |
|||
outline: 0; |
|||
} |
|||
table { |
|||
white-space: unset; /* be set to `no-wrap` in MW internal css */ |
|||
} |
|||
html { |
|||
font-size: 16px; /* reset rem size */ |
|||
} |
|||
body { |
|||
overflow-y: unset; |
|||
} |
|||
pre { |
|||
margin: 0; |
|||
} |
|||
h1, h2, h3, h4, h5, h6 { |
|||
padding: 0; |
|||
border: 0 solid transparent; |
|||
} |
|||
table { |
|||
background-color: transparent; |
|||
display: table; |
|||
white-space: unset; |
|||
} |
|||
@media (max-width: calc(639px)) { |
|||
.mw-parser-output table { |
|||
display: table; |
|||
} |
|||
} |
|||
body, code { |
|||
background: none; |
|||
} |
|||
html { |
|||
color-scheme: dark; |
|||
} |
|||
.mw-body { |
.mw-body { |
||
background-color: #202020; |
|||
color: #ccc; |
|||
border: 1px solid #ed7117; |
border: 1px solid #ed7117; |
||
font-family: sans-serif; |
|||
} |
} |
||
#mw-panel .portal h3 { |
|||
color: #ed7117; |
|||
.mw-body-content h1, |
|||
.mw-body-content h2, |
|||
.vector-body h3, |
|||
.vector-body h4, |
|||
.vector-body h5, |
|||
.vector-body h6 { |
|||
font-family: sans-serif; |
|||
} |
|||
.mw-heading, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
color: #ccc; |
|||
font-family: sans-serif; |
|||
} |
|||
.mw-footer li { |
|||
color: #ccc; |
|||
} |
|||
#mw-head #p-search .vector-search-box-input { |
|||
color: #ccc; |
|||
background: #202020; |
|||
box-shadow: none; |
|||
} |
|||
#mw-head #p-search .vector-search-box-inner { |
|||
border-color: #ed7117; |
|||
} |
|||
#filetoc { |
|||
background-color: #111; |
|||
border: 1px solid #383838; |
|||
} |
|||
div#simpleSearch { |
|||
background: 202020; |
|||
border: 1px solid #ed7117; |
|||
} |
|||
body { |
|||
background-color: #111; |
|||
} |
|||
ul { |
|||
list-style-image: none; |
|||
} |
|||
a { |
|||
color: #518fce; |
|||
} |
|||
a:visited { |
|||
color: #518fce; |
|||
} |
|||
code { |
|||
border-radius: 2px; |
|||
padding: 1px 4px; |
|||
} |
|||
pre, code, .mw-code { |
|||
color: #fff; |
|||
border: 1px solid #383838; |
|||
background: #181818; |
|||
} |
|||
#mw-page-base { |
|||
background-color: #111; |
|||
background-image: none; |
|||
background-position: bottom left; |
|||
height: 5em; |
|||
} |
|||
.vector-menu-tabs-legacy li { |
|||
float: left; |
|||
height: 100%; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
background-image: linear-gradient(to top,#ed7117 1px,#101010 0,#111 100%); |
|||
} |
|||
.vector-menu-tabs-legacy li a { |
|||
color: #518fce; |
|||
} |
|||
.vector-menu-tabs-legacy li a:visited { |
|||
color: #518fce; |
|||
} |
|||
.vector-menu-tabs-legacy .selected { |
|||
background: #111; |
|||
background-image: linear-gradient(to top,#202020 0,#111 100%); |
|||
border-bottom: none; |
|||
} |
|||
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited { |
|||
color: #ccc; |
|||
} |
|||
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { |
|||
background-image: linear-gradient(rgba(0,0,0,0) 0,#ed7117 100%); |
|||
background-repeat: no-repeat; |
|||
background-size: 1px 100%; |
|||
} |
|||
.vector-menu-heading-label { |
|||
color: #ae7117; |
|||
font-size: 14px; |
font-size: 14px; |
||
} |
} |
||
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read { |
|||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { |
|||
display: block; |
|||
color: #ed7117; |
|||
margin: 0.5em 0 0 0.66666667em; |
|||
border: 0; |
|||
padding: 0.25em 0; |
|||
font-size: 0.75em; |
|||
font-weight: normal; |
|||
background-image: linear-gradient(to right,rgba(0,0,0,0) 0, #ed7117 33%, #ed7117 66%, rgba(0,0,0,0) 100%); |
|||
background-position: center bottom; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 1px; |
|||
} |
|||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited { |
|||
color: #518fce; |
|||
} |
|||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a { |
|||
color: #518fce; |
|||
} |
|||
#catlinks { |
|||
--theme-box-border-radius: 0; |
|||
} |
|||
#catlinks { |
|||
text-align: left; |
|||
background: #111; |
|||
border: 1px solid #383838; |
|||
border-radius: 0; |
|||
margin: 16px 0 0 0; |
|||
padding: 0.5em 1em; |
|||
} |
|||
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, |
|||
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read { |
|||
opacity: 0.51; |
opacity: 0.51; |
||
filter: invert(1); |
|||
} |
} |
||
.vector-menu-tabs-legacy .selected a, |
|||
input[type="submit"], |
|||
.vector-menu-tabs-legacy .selected a:visited { |
|||
button[type="submit"] { |
|||
background-color: #0077cc; |
|||
color: #ccc; |
color: #ccc; |
||
background-image: linear-gradient(to bottom, #111 0, #ed7117 100%); |
|||
padding: 0.5em 1em; |
|||
border: none; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
} |
} |
||
.vector-menu-tabs-legacy li { |
|||
input[type="submit"]:hover, |
|||
background-image: linear-gradient(to top, #ed7117 0, #222 1px, #111 100%); |
|||
button[type="submit"]:hover { |
|||
background-color: #005fa3; |
|||
} |
|||
/*********************************************************************************************************** |
|||
* css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on |
|||
***********************************************************************************************************/ |
|||
/********* ooui *********/ |
|||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined, |
|||
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { |
|||
background: none; |
|||
} |
|||
.oo-ui-textInputWidget .oo-ui-inputWidget-input { |
|||
color: var(--theme-text-color); |
|||
} |
|||
.oo-ui-tabOptionWidget { |
|||
color: var(--theme-text-color); |
|||
} |
|||
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { |
|||
color: var(--theme-text-color); |
|||
background: none; |
|||
} |
|||
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { |
|||
color: var(--theme-content-text-mix-color); |
|||
} |
|||
.oo-ui-tabSelectWidget-framed { |
|||
background: none; |
|||
} |
|||
/********* Special:Preferences *********/ |
|||
#preferences .mw-htmlform-submit-buttons { |
|||
background-color: var(--theme-background-color--secondary); |
|||
border-top: 1px solid var(--theme-border-color); |
|||
border-left: 1px solid var(--theme-border-color); |
|||
border-right: 1px solid var(--theme-border-color); |
|||
} |
|||
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { border-color: var(--theme-border-color); } |
|||
fieldset { |
|||
border: 1px solid #ed711788; |
|||
} |
|||
.toc { |
|||
background-color: #111; |
|||
border:1px solid #ed711744; |
|||
} |
|||
.tocnumber { |
|||
color: #aaa; |
|||
} |
|||
dev#content table { |
|||
color: #ccc; |
|||
} |
|||
.darktable, .darkbox, div#content table.wikitable, div#content table.cargoTable { |
|||
border: 1px solid var(--theme-border-color); |
|||
padding: 5px; |
|||
background: var(--theme-background-color); |
|||
margin: 0.5em 0em 1em 0.5em; |
|||
} |
|||
table.darktable th, |
|||
table.darkbox th, |
|||
.navbox-title, |
|||
table.navbox th, |
|||
table.stylish td:first-child { |
|||
background-color: #062544; |
|||
} |
|||
table.darktable th, |
|||
table.darktable tr:not(:first-child) th.outer, |
|||
table.darkbox th, |
|||
table.darkbox tr:not(:first-child) th.outer, |
|||
table.stylish td:first-child, |
|||
div#content table.wikitable > tr > th, |
|||
div#content table.wikitable > * > tr > th, |
|||
div#content table.cargoTable > tr > th, |
|||
div#content table.cargoTable > * > tr > th { |
|||
background-color: #062544; |
|||
padding: 0 0.5em; |
|||
} |
|||
div#content, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
pre, |
|||
div#content table { |
|||
color: #ccc; |
|||
} |
|||
table.wikitable > tr > th, table.wikitable > * > tr > th { |
|||
border-color: #303030; |
|||
color: #ccc; |
|||
} |
|||
.darktable,.darkbox,div#content table.wikitable,div#content table.cargoTable { |
|||
border: 1px solid var(--theme-border-color); |
|||
padding: 5px; |
|||
background: var(--theme-background-color); |
|||
margin: 0.5em 0em 1em 0.5em |
|||
} |
|||
table.wikitable,table.cargoTable { |
|||
border-collapse: unset |
|||
} |
|||
.wikitable > tr > th,.wikitable > tr > td,.wikitable > * > tr > th,.wikitable > * > tr > td,.cargoTable > tr > th,.cargoTable > tr > td,.cargoTable > * > tr > th,.cargoTable > * > tr > td { |
|||
border: none |
|||
} |
|||
.darktable,.stylish { |
|||
font-size: 89% |
|||
} |
|||
.stylish { |
|||
padding: 5px; |
|||
margin: 0.5em 0em 1em 0.5em |
|||
} |
|||
table.darktable th,table.darktable tr:not(:first-child) th.outer,table.darkbox th,table.darkbox tr:not(:first-child) th.outer,table.stylish td:first-child,div#content table.wikitable > tr > th,div#content table.wikitable > * > tr > th,div#content table.cargoTable > tr > th,div#content table.cargoTable > * > tr > th { |
|||
background-color: var(--theme-header-background-color); |
|||
padding: 0 0.5em; |
|||
} |
|||
table.darktable caption { |
|||
font-size: 120%; |
|||
font-weight: bold |
|||
} |
|||
table.darktable tr:not(:first-child) th,table.darkbox tr:not(:first-child) th,div#content table.wikitable tr:not(:first-child) th,div#content table.cargoTable tr:not(:first-child) th { |
|||
background-color: var(--theme-header-background-color) |
|||
} |
|||
.rowtitle { |
|||
font-size: 1.15em; |
|||
padding: 0.2em 2em 0.2em 0.5em |
|||
} |
|||
table.extrapadding td { |
|||
padding-left: 4px; |
|||
padding-right: 4px |
|||
} |
|||
table.td-right td { |
|||
text-align: right |
|||
} |
|||
div#content .title { |
|||
background-color: var(--theme-background-color--secondary); |
|||
text-align: center; |
|||
font-weight: bold; |
|||
padding: 1px 2px |
|||
} |
|||
.theme-dark table.darktable td.title,.theme-dark .darkbox td.title { |
|||
background-color: #303030 |
|||
} |
|||
.alt,.rowtitle { |
|||
background-color: var(--theme-background-color-alt) |
|||
} |
|||
table.zebra > tbody > tr:nth-child(2n+1),table.zebra.darktable > tbody > tr:nth-child(2n+1),table.zebra.wikitable > tbody > tr:nth-child(2n+1),table.zebra.darkbox > tbody > tr:nth-child(2n+1),table.filehistory > tbody > tr:nth-child(2n+1) { |
|||
background-color: var(--theme-background-color-alt) |
|||
} |
|||
table .hover:hover { |
|||
background-color: orange |
|||
} |
|||
/* Gadget description length */ |
|||
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, |
|||
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body { |
|||
max-width: unset; |
|||
} |
|||
/******* Search result page. (Special:Search) ******/ |
|||
.mw-search-form-wrapper { |
|||
font-size: 1em; |
|||
} |
|||
.mw-search-form-wrapper #mw-search-top-table { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.mw-search-form-wrapper #mw-search-top-table > div { |
|||
float: none; |
|||
} |
|||
.mw-search-form-wrapper .results-info { |
|||
color: var(--theme-content-text-mix-color); |
|||
font-size: 1em; |
|||
padding: 0 0 0 3em; |
|||
white-space: nowrap; |
|||
text-align: right; |
|||
flex: 1 1 auto; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-visualclear { |
|||
display: none; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-profile-tabs { |
|||
border: 0; |
|||
margin: 1em 0; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div { |
|||
display: none; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-profile-tabs .search-types { |
|||
width: 100%; |
|||
float: none; |
|||
padding: 0; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li { |
|||
float: none; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current { |
|||
background:var(--theme-border-color); |
|||
border-radius: 2px; |
|||
overflow: hidden; |
|||
} |
|||
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current:nth-child(1) { |
|||
border-radius: 0 2px 2px 0; |
|||
} |
|||
.mw-search-form-wrapper #mw-searchoptions { |
|||
padding: 1em; |
|||
background: var(--theme-background-color-alt); |
|||
border: 1px solid var(--theme-accent-color); |
|||
border-radius: 4px; |
|||
} |
|||
/* New inline in Special:History diffs */ |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { |
|||
background-color: var(--theme-accent-color-bright); |
|||
border-color: var(--theme-accent-color); |
|||
} |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover { |
|||
background-color: var(--theme-accent-color); |
|||
border-color: var(--theme-accent-color); |
|||
} |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover { |
|||
background-color: var(--theme-accent-color); |
|||
border-color: var(--theme-accent-color-bright); |
|||
} |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus { |
|||
border-color: var(--theme-accent-color-bright); |
|||
box-shadow: inset 0 0 0 1px var(--theme-accent-color-bright); |
|||
} |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip { |
|||
border-color: var(--theme-accent-color-bright); |
|||
} |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip { |
|||
background-color: var(--theme-accent-color); |
|||
border-color: var(--theme-accent-color); |
|||
} |
|||
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { |
|||
background-color: var(--theme-accent-color-bright); |
|||
border-color: #0006; |
|||
} |
|||
/* Edit conflict */ |
|||
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice { |
|||
background-color: var(--theme-background-color--secondary); |
|||
border-color: var(--theme-border-color); |
|||
} |
|||
.mw-twocolconflict-single-column.mw-twocolconflict-split-copy, .mw-twocolconflict-split-column.mw-twocolconflict-split-copy { |
|||
border-color: var(--theme-border-color); |
|||
background-color: var(--theme-background-color--secondary); |
|||
color: var(--theme-text-color); |
|||
} |
|||
.mw-twocolconflict-single-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade, .mw-twocolconflict-split-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade { |
|||
background-image: linear-gradient(transparent,var(--theme-background-color-alt)); |
|||
} |
|||
.mw-twocolconflict-single-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-delete, .mw-twocolconflict-split-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-delete { |
|||
border-color: var(--theme-border-color); |
|||
} |
|||
.mw-twocolconflict-single-column, .mw-twocolconflict-split-column { |
|||
background-color: var(--theme-background-color--secondary); |
|||
color: var(--theme-text-color); |
|||
} |
|||
.mw-twocolconflict-single-column.mw-twocolconflict-split-unselected ins.mw-twocolconflict-diffchange, .mw-twocolconflict-split-column.mw-twocolconflict-split-unselected ins.mw-twocolconflict-diffchange { |
|||
background-color: var(--theme-border-color); |
|||
} |
|||
.mw-twocolconflict-single-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-add, .mw-twocolconflict-split-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-add { |
|||
border-color: var(--theme-border-color); |
|||
} |
|||
.mw-twocolconflict-split-selection > div:nth-child(2) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span, .mw-twocolconflict-split-selection > div:nth-child(2) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span, .mw-twocolconflict-split-selection > div:nth-child(2) .oo-ui-radioInputWidget [type="radio"] + span { |
|||
background: var(--theme-background-color--secondary); |
|||
} |
|||
.mw-twocolconflict-split-selection > div:nth-child(1) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span, .mw-twocolconflict-split-selection > div:nth-child(1) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span, .mw-twocolconflict-split-selection > div:nth-child(1) .oo-ui-radioInputWidget [type="radio"] + span { |
|||
background: var(--theme-background-color--secondary); |
|||
} |
} |
||
.mw-twocolconflict-split-editable .mw-twocolconflict-split-editor, .mw-twocolconflict-split-difftext { color: var(--theme-text-color); } |
|||
.vector-menu-tabs-legacy li.selected { |
|||
/* ?action=history */ |
|||
background-image: linear-gradient(to top, #202020 0, #111 100%); |
|||
#pagehistory li { |
|||
border: dashed 1px var(--theme-border-color); |
|||
} |
} |
||
.vector-menu-tabs, |
|||
/* Wiki editor */ |
|||
.vector-menu-tabs a, |
|||
.wikiEditor-ui-toolbar .tabs span.tab a::before { |
|||
#mw-head .vector-menu-dropdown .vector-menu-heading { |
|||
left: 5px; |
|||
background-image: linear-gradient(to bottom, #111 0, #ed7117 100%); |
|||
} |
} |
||
Latest revision as of 06:12, 9 August 2025
.mw-body {
border: 1px solid #ed7117;
}
#mw-panel .portal h3 {
color: #ed7117;
font-size: 14px;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
opacity: 0.51;
filter: invert(1);
}
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited {
color: #ccc;
background-image: linear-gradient(to bottom, #111 0, #ed7117 100%);
}
.vector-menu-tabs-legacy li {
background-image: linear-gradient(to top, #ed7117 0, #222 1px, #111 100%);
}
.vector-menu-tabs-legacy li.selected {
background-image: linear-gradient(to top, #202020 0, #111 100%);
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient(to bottom, #111 0, #ed7117 100%);
}