Difference between revisions of "MediaWiki:Vector.css"
From ZeTranslation
| (13 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will affect users of the Vector skin */ | /* CSS placed here will affect users of the Vector skin */ | ||
| − | /*@darkmode-table-background-color: #ddd; | + | /* |
| + | @darkmode-table-background-color: #ddd; | ||
@darkmode-border-color: #cdcbc8; | @darkmode-border-color: #cdcbc8; | ||
@darkmode-link-color: #69f; | @darkmode-link-color: #69f; | ||
@darkmode-link-visited-color: #709bbd; | @darkmode-link-visited-color: #709bbd; | ||
| − | @darkmode-red-link-color: #ff6e6e;*/ | + | @darkmode-red-link-color: #ff6e6e; |
| + | */ | ||
html, | html, | ||
| Line 35: | Line 37: | ||
} | } | ||
| + | input[type=text], | ||
| + | input[type=number], | ||
textarea { | textarea { | ||
color: #acb0b8; | color: #acb0b8; | ||
background-color: transparent; | background-color: transparent; | ||
| − | border | + | border: 1px solid #aaa; |
| + | outline: none; | ||
} | } | ||
| + | input[type=text]:focus, | ||
| + | input[type=number]:focus, | ||
textarea:focus { | textarea:focus { | ||
border-color: #5983c3; | border-color: #5983c3; | ||
| − | |||
} | } | ||
| Line 52: | Line 58: | ||
background-image: none; | background-image: none; | ||
border-color: #5983c3; | border-color: #5983c3; | ||
| + | outline: none; | ||
} | } | ||
| Line 72: | Line 79: | ||
filter: invert( 1 ) hue-rotate( 180deg ); | filter: invert( 1 ) hue-rotate( 180deg ); | ||
-webkit-filter: invert( 1 ) hue-rotate( 180deg ); | -webkit-filter: invert( 1 ) hue-rotate( 180deg ); | ||
| + | } | ||
| + | |||
| + | #toc, | ||
| + | .toc, | ||
| + | .mw-warning { | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | .previewnote { | ||
| + | color: #ff6e6e; | ||
| + | } | ||
| + | |||
| + | input#wpSummary, | ||
| + | input#wpReason, | ||
| + | input#mwProtect-edit-expires { | ||
| + | color: #acb0b8; | ||
| + | background-color: transparent; | ||
| + | border: 1px solid #aaa; | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | input#wpSummary:focus, | ||
| + | input#wpReason:focus, | ||
| + | input#mwProtect-edit-expires:focus { | ||
| + | border-color: #5983c3; | ||
| + | } | ||
| + | |||
| + | #pagehistory li { | ||
| + | border-color: #aaa; | ||
| + | } | ||
| + | |||
| + | #pagehistory li.selected { | ||
| + | background-color: #333b50; | ||
| + | } | ||
| + | |||
| + | .mw-plusminus-pos { | ||
| + | color: #00f11e; | ||
| + | } | ||
| + | |||
| + | .mw-plusminus-neg { | ||
| + | color: #ff6e6e; | ||
| + | } | ||
| + | |||
| + | table.diff { | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | td.diff-context { | ||
| + | color: #acb0b8; | ||
| + | background-color: transparent; | ||
| + | border-color: #aaa; | ||
| + | } | ||
| + | |||
| + | .diffchange { | ||
| + | color: #aaa; | ||
| + | } | ||
| + | |||
| + | #preferences { | ||
| + | background-color: transparent; | ||
| + | border-color: #aaa; | ||
| + | } | ||
| + | |||
| + | #preferences legend, | ||
| + | .htmlform-tip { | ||
| + | color: #acb0b8; | ||
| + | } | ||
| + | |||
| + | #preftoc a, | ||
| + | #preftoc a:active { | ||
| + | color: #69f; | ||
| + | } | ||
| + | |||
| + | #preftoc { | ||
| + | background-image: none; | ||
| + | } | ||
| + | |||
| + | #preftoc li { | ||
| + | background-image: none; | ||
| + | border: 1px solid #aaa; | ||
| + | } | ||
| + | |||
| + | #preftoc li.selected a { | ||
| + | color: #d8d8d8; | ||
| + | background-image: none; | ||
| + | } | ||
| + | |||
| + | table.mw-babel-wrapper { | ||
| + | background-color: transparent; | ||
| + | border-color: #5983c3; | ||
| + | } | ||
| + | |||
| + | .catlinks { | ||
| + | background-color: transparent; | ||
} | } | ||
| Line 108: | Line 208: | ||
#mw-panel .portal .body li a, | #mw-panel .portal .body li a, | ||
.toctogglelabel, | .toctogglelabel, | ||
| − | .mw- | + | .mw-body a.external, |
| − | .mw- | + | .mw-body a.extiw, |
| − | + | ||
div#mw-panel div.portal div.body ul li a, | div#mw-panel div.portal div.body ul li a, | ||
#mw-panel.collapsible-nav .portal h3 a { | #mw-panel.collapsible-nav .portal h3 a { | ||
color: #69f; | color: #69f; | ||
| + | } | ||
| + | |||
| + | /* Active links (on click) */ | ||
| + | a:active, | ||
| + | .mw-body a.extiw:active, { | ||
| + | color: #d8d8d8; | ||
} | } | ||
/* Visited links */ | /* Visited links */ | ||
a:visited, | a:visited, | ||
| + | .mw-body a.external:visited, | ||
| + | .mw-body a.extiw:visited, | ||
#mw-panel .portal .body li a:visited, | #mw-panel .portal .body li a:visited, | ||
div#mw-panel div.portal div.body ul li a:visited { | div#mw-panel div.portal div.body ul li a:visited { | ||
| Line 125: | Line 232: | ||
/* Red links */ | /* Red links */ | ||
a.new, | a.new, | ||
| − | .new a { | + | .new a, |
| + | a.stub { | ||
color: #ff6e6e; | color: #ff6e6e; | ||
} | } | ||
| Line 181: | Line 289: | ||
div.vectorMenu li a { | div.vectorMenu li a { | ||
color: #69f; | color: #69f; | ||
| + | } | ||
| + | |||
| + | div.vectorMenu li.selected a, | ||
| + | div.vectorMenu li.selected a:visited { | ||
| + | color: #709bbd; | ||
| + | } | ||
| + | |||
| + | div#simpleSearch { | ||
| + | background-color: transparent; | ||
| + | background-image: none; | ||
| + | } | ||
| + | |||
| + | div#simpleSearch input#searchInput { | ||
| + | color: #acb0b8; | ||
} | } | ||
| Line 230: | Line 352: | ||
background-color: transparent; | background-color: transparent; | ||
border-color: #aaa; | border-color: #aaa; | ||
| + | outline: none; | ||
} | } | ||
.tux-messagetable-header input.tux-message-filter-box:focus { | .tux-messagetable-header input.tux-message-filter-box:focus { | ||
border-color: #5983c3; | border-color: #5983c3; | ||
| − | |||
} | } | ||
| Line 320: | Line 442: | ||
.tux-list-translation { | .tux-list-translation { | ||
color: #d8d8d8; | color: #d8d8d8; | ||
| + | } | ||
| + | |||
| + | .tux-status-unsaved { | ||
| + | background-color: #1f2531; | ||
} | } | ||
Latest revision as of 05:03, 23 May 2026
/* CSS placed here will affect users of the Vector skin */
/*
@darkmode-table-background-color: #ddd;
@darkmode-border-color: #cdcbc8;
@darkmode-link-color: #69f;
@darkmode-link-visited-color: #709bbd;
@darkmode-red-link-color: #ff6e6e;
*/
html,
body,
#mw-page-base {
background-color: #1f2531;
background-image: none;
color: #acb0b8;
}
#content.mw-body {
background-color: #252c3c;
border-color: #5983c3;
color: #acb0b8;
}
h1, h2, h3, h4, h5, h6 {
color: #d8d8d8;
}
.editOptions {
background-color: #333b50;
}
pre, .mw-code {
color: inherit;
background-color: transparent;
border-color: #aaa;
}
input[type=text],
input[type=number],
textarea {
color: #acb0b8;
background-color: transparent;
border: 1px solid #aaa;
outline: none;
}
input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
border-color: #5983c3;
}
button.button {
color: #acb0b8;
text-shadow: none;
background-color: transparent;
background-image: none;
border-color: #5983c3;
outline: none;
}
button.button:hover {
background-color: #333b50;
background-image: none;
border-color: #5983c3;
}
&,
img,
video,
svg,
iframe, /* some maps are iframes */
.mw-no-invert,
.mw-mmv-overlay,
.mw-mmv-pre-image,
.mw-kartographer-map,
.mw-kartographer-mapDialog-map {
filter: invert( 1 ) hue-rotate( 180deg );
-webkit-filter: invert( 1 ) hue-rotate( 180deg );
}
#toc,
.toc,
.mw-warning {
background-color: transparent;
}
.previewnote {
color: #ff6e6e;
}
input#wpSummary,
input#wpReason,
input#mwProtect-edit-expires {
color: #acb0b8;
background-color: transparent;
border: 1px solid #aaa;
outline: none;
}
input#wpSummary:focus,
input#wpReason:focus,
input#mwProtect-edit-expires:focus {
border-color: #5983c3;
}
#pagehistory li {
border-color: #aaa;
}
#pagehistory li.selected {
background-color: #333b50;
}
.mw-plusminus-pos {
color: #00f11e;
}
.mw-plusminus-neg {
color: #ff6e6e;
}
table.diff {
background-color: transparent;
}
td.diff-context {
color: #acb0b8;
background-color: transparent;
border-color: #aaa;
}
.diffchange {
color: #aaa;
}
#preferences {
background-color: transparent;
border-color: #aaa;
}
#preferences legend,
.htmlform-tip {
color: #acb0b8;
}
#preftoc a,
#preftoc a:active {
color: #69f;
}
#preftoc {
background-image: none;
}
#preftoc li {
background-image: none;
border: 1px solid #aaa;
}
#preftoc li.selected a {
color: #d8d8d8;
background-image: none;
}
table.mw-babel-wrapper {
background-color: transparent;
border-color: #5983c3;
}
.catlinks {
background-color: transparent;
}
/* Backgrounds */
/*.toc,
.thumbinner,
#simpleSearch,
#searchInput,
#searchButton,
#searchGoButton,
table,
table.toccolours,
.wikitable,
.mw-notification {
background-color: #ddd;
}*/
/* Borders */
/*#mw-head,
#mw-panel,
.toc,
div.thumbinner,
#simpleSearch,
#searchInput,
table.toccolours,
.mw-notification {
border-color: #cdcbc8;
}*/
.thumbimage {
border: 0;
}
/* Normal links */
a,
#mw-panel .portal .body li a,
.toctogglelabel,
.mw-body a.external,
.mw-body a.extiw,
div#mw-panel div.portal div.body ul li a,
#mw-panel.collapsible-nav .portal h3 a {
color: #69f;
}
/* Active links (on click) */
a:active,
.mw-body a.extiw:active, {
color: #d8d8d8;
}
/* Visited links */
a:visited,
.mw-body a.external:visited,
.mw-body a.extiw:visited,
#mw-panel .portal .body li a:visited,
div#mw-panel div.portal div.body ul li a:visited {
color: #709bbd;
}
/* Red links */
a.new,
.new a,
a.stub {
color: #ff6e6e;
}
/**
* Skin-specific overrides
*/
div.vectorTabs {
background-image: none;
}
div.vectorTabs ul li {
background-image: none;
background-color: #252c3c;
border: 1px solid #5983c3;
}
div.vectorTabs li.selected {
background-image: none;
border-bottom: none;
}
div.vectorTabs li a {
color: #69f;
}
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited {
color: #d8d8d8;
}
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited {
color: #ff6e6e;
}
div.vectorTabs span {
background-image: none;
}
div.vectorMenu {
border-top: 1px solid #5983c3;
border-right: 1px solid #5983c3;
}
div.vectorMenu h3 a {
background-image: none;
}
div.vectorMenu ul {
background-color: #252c3c;
border-color: #5983c3;
}
div.vectorMenu li a {
color: #69f;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
color: #709bbd;
}
div#simpleSearch {
background-color: transparent;
background-image: none;
}
div#simpleSearch input#searchInput {
color: #acb0b8;
}
/**
* Non-MediaWiki overrides
*/
.infobox, /* English Wikipedia, most other wikis with infoboxes */
.infobox_v2 { /* French/Portuguese Wikipedia, etc. */
background-color: #ddd;
border-color: #cdcbc8;
}
/* Maintenance templates you see atop some articles */
.ambox-content {
background-color: #ddd;
border-color: #cdcbc8;
}
/* Extension: Translate */
.ext-translate-msggroup-selector span,
.ext-translate-language-selector-label,
.tux-editor-header,
.tux-message-selector li a {
color: #acb0b8;
}
.ext-translate-msggroup-selector span.grouplink,
.ext-translate-language-selector .uls,
.tux-message-selector li.selected a {
color: #69f;
}
.tux-message-selector .more ul {
background-color: #333b50;
border-color: #5983c3;
}
.tux-message-selector label {
color: #acb0b8;
}
.tux-messagetable-header {
border-bottom-color: #5983c3;
}
.tux-messagetable-header input.tux-message-filter-box {
color: #acb0b8;
background-color: transparent;
border-color: #aaa;
outline: none;
}
.tux-messagetable-header input.tux-message-filter-box:focus {
border-color: #5983c3;
}
.tux-messagetable-header.floating {
background-color: #333b50;
}
.tux-messagetable-loader {
color: #acb0b8;
background-color: #252c3c;
border-color: #5983c3;
}
.tux-messagelist {
color: #acb0b8;
background-color: #252c3c;
}
.tux-empty-list-guide {
color: #acb0b8;
}
.tux-message-item,
.tux-message-editor {
color: #acb0b8;
background-color: #252c3c;
border-color: #5983c3;
}
.tux-message-item:hover {
background-color: #333b50;
}
.tux-message-editor .messagekey,
.tux-message-editor .shortcutinfo {
color: #acb0b8;
}
.tux-message-editor textarea {
border-color: #aaa;
}
.tux-message-editor textarea:focus {
border-color: #5983c3;
outline: none;
}
.tux-editor-insert-buttons .tux-editor-paste-original-button {
color: #acb0b8;
background-color: transparent;
border-color: #aaa;
}
.tux-message-editor .infocolumn-block {
background-color: transparent;
}
.infocolumn .loading {
color: #acb0b8;
}
.tm-suggestion, .in-other-language {
background-color: transparent;
border-color: #aaa;
border-left-color: #3366bb;
}
.in-other-language .language {
color: #acb0b8;
}
.shortcut-popup {
color: #acb0b8;
background-color: #252c3c;
border-color: #aaa;
}
.tux-message-item.translated,
.tux-message-item.translated:hover,
.tux-message-item.proofread,
.tux-message-item.proofread:hover {
background-color: #333b50;
}
.tux-list-translation {
color: #d8d8d8;
}
.tux-status-unsaved {
background-color: #1f2531;
}
.ext-translate-container .tux-messagelist .tux-message-pagemode {
background-color: transparent;
}
.ext-translate-container .tux-messagelist .tux-message-pagemode .tux-message-item-compact,
.ext-translate-container .tux-messagelist .tux-message-proofread .tux-message-item-compact {
background-color: transparent;
border-color: #5983c3;
}
.ext-translate-container .tux-messagelist .tux-message-pagemode .tux-message-item-compact:hover,
.ext-translate-container .tux-messagelist .tux-message-proofread .tux-message-item-compact:hover {
background-color: #333b50;
}
.ext-translate-container .tux-messagelist .tux-message-pagemode:first-child .tux-message-item-compact,
.ext-translate-container .tux-messagelist .tux-message-pagemode:last-child .tux-message-item-compact,
.ext-translate-container .tux-messagelist .tux-message-proofread:first-child .tux-message-item-compact,
.ext-translate-container .tux-messagelist .tux-message-proofread:last-child .tux-message-item-compact {
border-color: #5983c3;
}
.tux-messagelist .tux-message-pagemode .tux-pagemode-source,
.tux-messagelist .tux-message-proofread .tux-proofread-source {
color: #acb0b8;
}
.tux-messagelist .tux-message-pagemode .tux-pagemode-translation,
.tux-messagelist .tux-message-proofread .tux-proofread-translation {
color: #d8d8d8;
}
.ext-translate-container .tux-messagelist .tux-message-proofread.own-translation,
.ext-translate-container .tux-messagelist .tux-message-proofread.own-translation:hover {
background-color: transparent;
}
.tux-proofread-edit-label {
color: #acb0b8;
}
.tux-action-bar {
background-color: #333b50;
}
.tux-action-bar.floating {
border-top-color: #5983c3;
}
.tux-statsbar-info {
color: #acb0b8;
}
.tux-action-bar .toggle.button {
color: #acb0b8;
background-color: #252c3c;
background-image: none;
border-color: #5983c3;
}
.tux-action-bar .toggle.button:hover,
.tux-action-bar .toggle.button.down {
background-color: #333b50;
}