MediaWiki:Common.css: Difference between revisions
m Add sitewide dark theme (Vector legacy) v1 + Fleet News article styling |
m Dark theme part 2: diffs, changes lists, special pages, edit view, OOUI, search |
||
| Line 291: | Line 291: | ||
.tf-newspage .tf-np-foot a, .tf-newspage .tf-np-foot a:visited { color:var(--d-muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; } | .tf-newspage .tf-np-foot a, .tf-newspage .tf-np-foot a:visited { color:var(--d-muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; } | ||
@media (max-width:700px){ .tf-newspage .tf-np-head,.tf-newspage .tf-np-body,.tf-newspage .tf-np-foot{padding-left:22px;padding-right:22px;} .tf-newspage .tf-np-title{font-size:22px;} } | @media (max-width:700px){ .tf-newspage .tf-np-head,.tf-newspage .tf-np-body,.tf-newspage .tf-np-foot{padding-left:22px;padding-right:22px;} .tf-newspage .tf-np-title{font-size:22px;} } | ||
/* ============================================================ | |||
DARK THEME part 2 — editing, diffs, changes lists, special pages | |||
============================================================ */ | |||
/* --- Diffs (the light green/red cells are unreadable on dark) --- */ | |||
td.diff-otitle, td.diff-ntitle, td.diff-marker { color: var(--d-text); } | |||
td.diff-context { background: var(--d-panel2); color: var(--d-muted); border-color: var(--d-border); } | |||
td.diff-addedline { background: #13261b; border-color: #2c5a3a; } | |||
td.diff-deletedline { background: #2b1618; border-color: #5a2c30; } | |||
td.diff-addedline .diffchange { background: #1f5133; color: #c7f0d5; } | |||
td.diff-deletedline .diffchange { background: #5a2330; color: #f2c9d0; } | |||
.diff-lineno { color: var(--d-gold); } | |||
table.diff, table.diff td, div.mw-diff-inline-changes { border-color: var(--d-border); color: var(--d-text); } | |||
/* --- Changes lists: Recent Changes, Watchlist, History --- */ | |||
.mw-changeslist, .mw-changeslist a, .mw-history-histlinks a, | |||
.special li, .special li a, .mw-contributions-list a { color: var(--d-text); } | |||
.mw-changeslist a, .mw-changeslist-links a, .mw-history-histlinks a { color: var(--d-link); } | |||
.mw-plusminus-pos { color: #6fbf7f; } | |||
.mw-plusminus-neg { color: #d98a8a; } | |||
.mw-plusminus-null { color: var(--d-muted); } | |||
abbr.newpage, abbr.minoredit, abbr.botedit, abbr.unpatrolled { color: var(--d-gold); } | |||
.mw-changeslist-date { color: var(--d-muted); } | |||
/* --- Data tables / pagers (most special pages use these) --- */ | |||
.mw-datatable, table.mw-datatable, .TablePager, .wikitable.sortable { | |||
background: var(--d-panel); color: var(--d-text); border-color: var(--d-border); | |||
} | |||
.mw-datatable th, .TablePager th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); } | |||
.mw-datatable td, .TablePager td { border-color: var(--d-border); } | |||
.mw-datatable tr:hover td, .TablePager tr:hover td { background: var(--d-panel2); } | |||
.oo-ui-tag-item, .cloud a { color: var(--d-link); } | |||
/* --- Edit view extras: summary, options, toolbar, checkboxes --- */ | |||
fieldset { border-color: var(--d-border); } | |||
legend { color: var(--d-gold); } | |||
label, .mw-label { color: var(--d-text); } | |||
#wpSummary, input#wpSummary { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); } | |||
.editOptions { background: var(--d-panel2); border-color: var(--d-border); color: var(--d-text); } | |||
.templatesUsed, .hiddencats, .mw-editTools, .editCheckboxes, .editHelp { color: var(--d-muted); } | |||
.wikiEditor-ui, .wikiEditor-ui-toolbar, .wikiEditor-ui-toolbar .tabs, | |||
.wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); } | |||
.mw-editform .cancelLink a { color: var(--d-link); } | |||
/* --- OOUI widgets (used across modern special pages / dialogs) --- */ | |||
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea, | |||
.oo-ui-dropdownWidget-handle, .oo-ui-comboBoxInputWidget input, | |||
.oo-ui-selectFileInputWidget-dropTarget { | |||
background: var(--d-panel2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; | |||
} | |||
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { | |||
background: var(--d-panel2); color: var(--d-text); border-color: var(--d-border); | |||
} | |||
.oo-ui-panelLayout-framed, .oo-ui-window-body, .oo-ui-messageDialog-message { | |||
background: var(--d-panel); color: var(--d-text); | |||
} | |||
.oo-ui-labelElement-label, .oo-ui-fieldLayout-header label, .oo-ui-inline-help { color: var(--d-text); } | |||
/* --- Search results --- */ | |||
.searchresults, .mw-search-result-heading a, .mw-search-results li { color: var(--d-text); } | |||
.mw-search-result-data { color: var(--d-muted); } | |||
.searchmatch { color: var(--d-gold); font-weight: bold; } | |||
.mw-search-profile-tabs, .search-types .current a { background: var(--d-panel2); border-color: var(--d-border); } | |||
/* --- Misc content elements --- */ | |||
blockquote { border-left: 3px solid var(--d-border); color: var(--d-text); } | |||
dl dt { color: var(--d-gold); } | |||
.mw-editsection a, .mw-indicators a, .redirectText a { color: var(--d-link); } | |||
#siteNotice, #localNotice, .mw-headline { color: var(--d-text); } | |||
.navbox, .mw-parser-output .navbox { background: var(--d-panel2); border-color: var(--d-border); color: var(--d-text); } | |||
.mw-message-box-warning, .mw-message-box-error, .mw-message-box-success { color: var(--d-text); } | |||