mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-27 04:53:10 +00:00
0ca85691dd
Based on list on [[mw:Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis]] and running color contrast checker on every project. Bug: T358164 Change-Id: I1ecbc1bac060eae4b9d99f461284d15b5da3d576
274 lines
6.5 KiB
Plaintext
274 lines
6.5 KiB
Plaintext
/*
|
|
A file for css that corrects known rendering issues on known Wikimedia wikis.
|
|
|
|
the following definitions exist to deal with certain inline styles
|
|
present in wikitext.
|
|
|
|
This selectors used here should reflect the list on:
|
|
https://www.mediawiki.org/wiki/Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis#Use_standardized_class_names_in_HTML_markup_for_components_in_templates_across_projects
|
|
|
|
FIXME: Review all of these hacks to see if they still apply.
|
|
*/
|
|
@import '../../../minerva.less/minerva.variables.less';
|
|
@import '../../../minerva.less/minerva.mixins.less';
|
|
@import 'templates/ambox.less';
|
|
@import 'templates/reflist.less';
|
|
|
|
.collapsible td {
|
|
width: auto !important;
|
|
}
|
|
|
|
.content {
|
|
.vertical-navbox,
|
|
.navbox {
|
|
display: none;
|
|
}
|
|
|
|
// stylelint-disable selector-max-id
|
|
#coordinates,
|
|
/* Hide article badges, clean-up notices, stub notices, and navigation boxes */
|
|
.topicon {
|
|
// It's important as some of these are tables which become display: table on larger screens
|
|
display: none !important;
|
|
}
|
|
// stylelint-enable selector-max-id
|
|
|
|
table,
|
|
.infobox {
|
|
// Unfloat tables and infoboxes:;
|
|
// A lot of templates introduce floating and horizontal margins inline styles
|
|
float: none !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.infobox {
|
|
font-size: 90%;
|
|
position: relative;
|
|
border: @border-width-base @border-style-base var( --border-color-muted );
|
|
margin-bottom: 2em;
|
|
color: var( --color-base );
|
|
background-color: var( --background-color-interactive-subtle );
|
|
display: flex;
|
|
flex: 1 1 100%;
|
|
flex-flow: column nowrap;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
|
|
caption {
|
|
padding: 10px 10px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
th, td {
|
|
vertical-align: top;
|
|
border: 0;
|
|
border-bottom: @border-width-base @border-style-base var( --border-color-muted );
|
|
padding: 7px 10px;
|
|
}
|
|
|
|
tbody > tr > td,
|
|
tbody > tr > th {
|
|
flex: 1 0;
|
|
}
|
|
|
|
td:only-child,
|
|
th:only-child {
|
|
width: 100%;
|
|
}
|
|
|
|
tr:last-child th,
|
|
tr:last-child td {
|
|
border: 0;
|
|
}
|
|
|
|
& > tbody,
|
|
& > caption {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
& > tbody > tr {
|
|
min-width: 100%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
}
|
|
|
|
// Hack to assign info boxes properly when using RTL languages on LTR wiki
|
|
.mw-content-ltr .infobox {
|
|
/* @noflip */
|
|
text-align: left;
|
|
}
|
|
|
|
// Hack to assign info boxes properly when using LTR languages on RTL wiki
|
|
.mw-content-rtl .infobox {
|
|
/* @noflip */
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// FIXME: Remove when filetoc is stripped from file pages a la table of contents (toc)
|
|
#filetoc { // stylelint-disable-line selector-max-id
|
|
display: none;
|
|
}
|
|
|
|
/* T36878: Set an optimal width for a column.
|
|
* Makes sure that on small screens column-count is only honored if column-width hint is not violated.
|
|
* https://developer.mozilla.org/en-US/docs/CSS/column-width
|
|
*/
|
|
.references-column-count,
|
|
.column-count {
|
|
-moz-column-width: 35em;
|
|
-webkit-column-width: 35em;
|
|
column-width: 35em;
|
|
}
|
|
|
|
// When JavaScript is disabled clarify to the user which reference they clicked on
|
|
.references li:target {
|
|
background-color: var( --background-color-progressive-subtle );
|
|
}
|
|
|
|
.hatnote,
|
|
.dablink,
|
|
.rellink {
|
|
padding: 5px 7px;
|
|
color: var( --color-subtle );
|
|
font-size: @font-size-minerva-smallest;
|
|
background-color: var( --background-color-interactive-subtle );
|
|
margin-bottom: 1px;
|
|
overflow: hidden;
|
|
|
|
a {
|
|
color: var( --color-progressive );
|
|
}
|
|
}
|
|
|
|
@media all and ( min-width: @width-breakpoint-tablet ) {
|
|
// When in the HTML these should be revealed at tablet resolution (T172078)
|
|
.content {
|
|
.vertical-navbox,
|
|
.navbox {
|
|
display: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hacks to render galleries and multicol tables better on mobile
|
|
@media all and ( max-width: @width-breakpoint-tablet ) {
|
|
.content {
|
|
table {
|
|
// Make {{col-beg}}, {{col-break}}, and {{col-end}} templates display single column tables
|
|
&.multicol {
|
|
> tr > td,
|
|
> tbody > tr > td {
|
|
display: block !important;
|
|
width: auto !important;
|
|
}
|
|
}
|
|
}
|
|
// Deal with Template:Multiple_image. T38030 and T148505
|
|
.thumb .thumbinner {
|
|
.flex-display( flex );
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
// avoid image child overflowing the container (T200518)
|
|
// stylelint-disable-next-line declaration-block-no-redundant-longhand-properties
|
|
flex-direction: column;
|
|
|
|
> .thumbcaption {
|
|
.flex( 1, 0, 100% );
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* T358385 */
|
|
[ bgcolor ] {
|
|
// Important: this should correspond with the light mode theme version of color-base
|
|
color: #333;
|
|
}
|
|
|
|
html.skin-night-mode-clientpref-1 {
|
|
// These colors become !important in night mode to avoid color contrast issues.
|
|
.hatnote:not( .notheme ),
|
|
.dablink:not( .notheme ),
|
|
.rellink:not( .notheme ),
|
|
.infobox:not( .notheme ) {
|
|
color: var( --color-base ) !important;
|
|
background-color: var( --background-color-interactive-subtle ) !important;
|
|
}
|
|
|
|
/* T357453 - attempt to strip colors from the majority of infoboxes in night mode (unless notheme specified) */
|
|
// please forgive me for bypassing the linter there is no easy way to keep all of the infobox classes grouped without
|
|
// stylelint-disable no-descending-specificity
|
|
.infobox td,
|
|
.infobox th,
|
|
.infobox-above,
|
|
/* itwiki */.sinottico th,
|
|
.infobox-header,
|
|
/* T358164 General case that templates/extensions can opt into */
|
|
.skin-nightmode-reset-color,
|
|
.navigation-box,
|
|
.metadata,
|
|
/* T357735 */
|
|
.quotebox,
|
|
/* T357726 */
|
|
.side-box,
|
|
.side-box div,
|
|
/* T358012 */
|
|
.navbox,
|
|
.navbox-subgroup,
|
|
.navbox-group,
|
|
.navbox-even,
|
|
.navbox-abovebelow,
|
|
.navbox-title {
|
|
&:not( .notheme ) {
|
|
.night-mode-strip-all-colors-when-safe();
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-night-mode-clientpref-2 {
|
|
/* T357453 */
|
|
.infobox td,
|
|
.infobox th,
|
|
.infobox-above,
|
|
/* itwiki */.sinottico th,
|
|
.infobox-header,
|
|
/* T358164 General case that templates/extensions can opt into */
|
|
.skin-nightmode-reset-color,
|
|
.navigation-box,
|
|
.metadata,
|
|
/* T357735 */
|
|
.quotebox,
|
|
/* T357726 */
|
|
.side-box,
|
|
.side-box div,
|
|
/* T358012 */
|
|
.navbox,
|
|
.navbox-subgroup,
|
|
.navbox-group,
|
|
.navbox-even,
|
|
.navbox-abovebelow,
|
|
.navbox-title {
|
|
&:not( .notheme ) {
|
|
.night-mode-strip-all-colors-when-safe();
|
|
}
|
|
}
|
|
|
|
// These colors become !important in night mode to avoid color contrast issues.
|
|
.hatnote:not( .notheme ),
|
|
.dablink:not( .notheme ),
|
|
.rellink:not( .notheme ),
|
|
.infobox:not( .notheme ) {
|
|
color: var( --color-base ) !important;
|
|
background-color: var( --background-color-interactive-subtle ) !important;
|
|
}
|
|
}
|
|
}
|
|
// stylelint-enable no-descending-specificity
|