MediaWiki:Common.css: Difference between revisions
Add shared light and dark styles for wiki content |
Fix repeating table sort icons |
||
| (6 intermediate revisions by 2 users not shown) | |||
| Line 78: | Line 78: | ||
} | } | ||
@media (max-width: 420px) { .elite-home .elite-grid { grid-template-columns: 1fr; } } | @media (max-width: 420px) { .elite-home .elite-grid { grid-template-columns: 1fr; } } | ||
/* Keep Wikipedia TemplateStyles message boxes readable in dark mode. */ | |||
.skin-theme-clientpref-night .mw-parser-output :is(.ambox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox) { background-color: var(--elite-subtle); color: var(--elite-ink); } | |||
@media (prefers-color-scheme: dark) { .skin-theme-clientpref-os .mw-parser-output :is(.ambox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox) { background-color: var(--elite-subtle); color: var(--elite-ink); } } | |||
/* Matched wordmark images for Vector light and dark appearances. */ | |||
html.skin-theme-clientpref-night .mw-logo-container.skin-invert { filter: none; color-scheme: normal; } | |||
html.skin-theme-clientpref-night .mw-logo-wordmark { content: url(/w/images/wiki-brand/wordmark-dark.png); } | |||
@media (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .mw-logo-container.skin-invert { filter: none; color-scheme: normal; } html.skin-theme-clientpref-os .mw-logo-wordmark { content: url(/w/images/wiki-brand/wordmark-dark.png); } } | |||
/* Give the wider wordmark its own space beside search. */ | |||
.mw-header { grid-template-columns: max-content minmax(0, 1fr); } | |||
.mw-header .vector-header-end { min-width: 0; } | |||
@media (max-width: 1100px) { .mw-header .mw-logo-wordmark { width: min(180px, 24vw) !important; height: auto !important; } } | |||
/* The wordmark is the header identity; the emblem remains the browser favicon. */ | |||
.mw-header .mw-logo-icon { display: none !important; } | |||
.mw-header { column-gap: 1.25rem; } | |||
/* Keep Vector search clear of the wider wordmark. */ | |||
.client-js .mw-header .vector-search-box.vector-search-box-auto-expand-width { margin-left: 0; } | |||
/* Imported Fandom tables, adapted to the selected MediaWiki colour scheme. */ | |||
.mw-parser-output table.article-table, | |||
.mw-parser-output table.fandom-table, | |||
.mw-parser-output table.eStationTable { | |||
border-collapse: collapse; | |||
border: 1px solid var(--elite-border, #a2a9b1); | |||
background: var(--elite-surface, #fff); | |||
color: var(--elite-ink, #202122); | |||
margin: 1em 0; | |||
} | |||
.mw-parser-output table.eStationTable { margin-left: auto; margin-right: auto; text-align: left; } | |||
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > :is(thead, tbody, tfoot) > tr > :is(th, td), | |||
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > tr > :is(th, td) { | |||
border: 1px solid var(--elite-border, #a2a9b1); | |||
padding: 0.35em 0.6em; | |||
} | |||
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > :is(thead, tbody, tfoot) > tr > th, | |||
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > tr > th { | |||
background-color: var(--elite-subtle, #f8f9fa); | |||
color: var(--elite-ink, #202122); | |||
text-align: center; | |||
} | |||
.mw-parser-output table.eStationTable > :is(thead, tbody, tfoot) > tr > th, | |||
.mw-parser-output table.eStationTable > tr > th { text-align: right; } | |||
.mw-parser-output table.eTable_RowHighlighting > :is(thead, tbody, tfoot) > tr:nth-child(even), | |||
.mw-parser-output table.eTable_RowHighlighting > tr:nth-child(even) { background: var(--elite-subtle, #f8f9fa); } | |||
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > caption { font-weight: bold; padding: 0.35em; } | |||
.fandom-import-mark { display: inline-block; vertical-align: -0.1em; margin-inline-end: 0.25em; } | |||
.fandom-import-mark img { display: inline-block; width: 48px; height: 12px; object-fit: contain; } | |||
.fandom-import-legend { font-size: 0.875em; margin: 0.5em 0 1em; } | |||
.fandom-import-mark img, .fandom-import-legend img { background: #fff; border-radius: 2px; } | |||