2015-06-05 20:56:58 +00:00
|
|
|
.mw-cite-backlink,
|
|
|
|
|
.cite-accessibility-label {
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
Implement responsive columns for reference lists
This is based on the popular 'count' parameter from Template:Reflist on
English Wikipedia, which has also been adopted by many other wikis.
That template's 'count' parameter allows maximum flexibility on a per-
page basis. This was important because the template can't know how many
references the list will contain. Users typically manually add (and
later, increment) the 'count' parameter when the list exceeds a certain
threshold.
The template currently sets an exact column count (via the CSS3
property `column-count`).
This patch improves on that by instead using the closely related CSS3
`column-width` property. This automatically derives the column count
based on the available space in the browser window. It will thus create
two or three columns on a typical desktop screen, and two or no columns
on a mobile device.
The specified width is the minimum width of a column. This ensures that
the list is not split when rendered on a narrow screen or mobile device.
It also hooks into the raw list before parsing and adds the class only
when the list will contain more than a certain number of items. This
prevents very short lists from being split into multiple columns.
Templates like Template:Reflist on English Wikipedia currently are not
able to set inline styles on the list element directly, which is why
they set it on a `<div>` wrapping the `<references />` output. Because
of this, the feature of the Cite extension must not be enabled at the
same time, as that would result in both the template's wrapper and the
references list being split. The end result would involve sitations with
three columns split in four sub-columns, creating a complicated mess of
nine intermixed columns.
To provide a smooth migration for wikis, this feature can be disabled by
default using `$wgCiteResponsiveReferences = false`. Each individual
template createing reference list can then be migrated, by removing the
wrapper column styles and instead settting the new "responsive"
attribute, like so: `<references responsive />`.
Once any conflicting templates have been migrated, the default for the
wiki can be swapped by setting `$wgCiteResponsiveReferences = true`.
If wikis wish for some templates to keep their custom column splitting
behaviour, templates can also opt-out by setting `responsive="0"`, which
will make sure that it will keep behaving the current way even after the
feature becomes enabled by default for the wiki.
In summary, when disabled by default, pages can opt into this system
with `<references responsive />`. When enabled by default, pages can opt
out of the system with `<references responsive=0 />`.
* Deprecate cite_references_prefix/cite_references_suffix.
This message is rarely used and opens up compatibility hazards.
It was already removed by Parsoid, but the PHP implementation
still had it. It's typically used to add inline styles to the
wrapper which is more appropiately done in Common.css (or
obsoleted as part of the skin or Cite extenion itself nowadays
depending on what style in question).
It was also a HTML-style message with separated open and close
segments, which is an anti-pattern in itself.
* Declare module target explicitly and include mobile. The absence of
this stylesheet caused subtle BiDi/RTL bugs on mobile.
Bug: T33597
Change-Id: Ia535f9b722e825e71e792b36356febc3bd444387
2015-07-21 02:33:50 +00:00
|
|
|
.mw-references-columns {
|
2017-05-11 19:56:34 +00:00
|
|
|
-webkit-column-width: 30em;
|
|
|
|
|
-moz-column-width: 30em;
|
|
|
|
|
column-width: 30em;
|
2021-02-08 05:49:51 +00:00
|
|
|
margin-top: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Lines first column up nicely. */
|
|
|
|
|
.mw-parser-output .mw-references-columns .references {
|
|
|
|
|
margin-top: 0;
|
Implement responsive columns for reference lists
This is based on the popular 'count' parameter from Template:Reflist on
English Wikipedia, which has also been adopted by many other wikis.
That template's 'count' parameter allows maximum flexibility on a per-
page basis. This was important because the template can't know how many
references the list will contain. Users typically manually add (and
later, increment) the 'count' parameter when the list exceeds a certain
threshold.
The template currently sets an exact column count (via the CSS3
property `column-count`).
This patch improves on that by instead using the closely related CSS3
`column-width` property. This automatically derives the column count
based on the available space in the browser window. It will thus create
two or three columns on a typical desktop screen, and two or no columns
on a mobile device.
The specified width is the minimum width of a column. This ensures that
the list is not split when rendered on a narrow screen or mobile device.
It also hooks into the raw list before parsing and adds the class only
when the list will contain more than a certain number of items. This
prevents very short lists from being split into multiple columns.
Templates like Template:Reflist on English Wikipedia currently are not
able to set inline styles on the list element directly, which is why
they set it on a `<div>` wrapping the `<references />` output. Because
of this, the feature of the Cite extension must not be enabled at the
same time, as that would result in both the template's wrapper and the
references list being split. The end result would involve sitations with
three columns split in four sub-columns, creating a complicated mess of
nine intermixed columns.
To provide a smooth migration for wikis, this feature can be disabled by
default using `$wgCiteResponsiveReferences = false`. Each individual
template createing reference list can then be migrated, by removing the
wrapper column styles and instead settting the new "responsive"
attribute, like so: `<references responsive />`.
Once any conflicting templates have been migrated, the default for the
wiki can be swapped by setting `$wgCiteResponsiveReferences = true`.
If wikis wish for some templates to keep their custom column splitting
behaviour, templates can also opt-out by setting `responsive="0"`, which
will make sure that it will keep behaving the current way even after the
feature becomes enabled by default for the wiki.
In summary, when disabled by default, pages can opt into this system
with `<references responsive />`. When enabled by default, pages can opt
out of the system with `<references responsive=0 />`.
* Deprecate cite_references_prefix/cite_references_suffix.
This message is rarely used and opens up compatibility hazards.
It was already removed by Parsoid, but the PHP implementation
still had it. It's typically used to add inline styles to the
wrapper which is more appropiately done in Common.css (or
obsoleted as part of the skin or Cite extenion itself nowadays
depending on what style in question).
It was also a HTML-style message with separated open and close
segments, which is an anti-pattern in itself.
* Declare module target explicitly and include mobile. The absence of
this stylesheet caused subtle BiDi/RTL bugs on mobile.
Bug: T33597
Change-Id: Ia535f9b722e825e71e792b36356febc3bd444387
2015-07-21 02:33:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Avoid elements from breaking between columns */
|
|
|
|
|
.mw-references-columns li {
|
|
|
|
|
-webkit-column-break-inside: avoid;
|
|
|
|
|
page-break-inside: avoid;
|
|
|
|
|
break-inside: avoid-column;
|
|
|
|
|
}
|
|
|
|
|
|
2019-11-18 14:49:51 +00:00
|
|
|
ol.references {
|
2022-12-16 21:42:17 +00:00
|
|
|
/**
|
|
|
|
|
* Resetting *any* counter on an <ol> element messes up the built-in numbering in Firefox.
|
|
|
|
|
* Explicitly resetting the built-in "list-item" counter fixes this.
|
|
|
|
|
*
|
|
|
|
|
* We have 2 counters for Parsoid HTML for different functionality.
|
|
|
|
|
* Make sure both are reset!
|
|
|
|
|
**/
|
|
|
|
|
counter-reset: mw-ref-extends-parent mw-references list-item;
|
2019-11-18 14:49:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ol.references > li {
|
2022-12-16 21:42:17 +00:00
|
|
|
/**
|
|
|
|
|
* We have 2 counters for Parsoid HTML for different functionality.
|
|
|
|
|
* Make sure both are incremented!
|
|
|
|
|
**/
|
|
|
|
|
counter-increment: mw-ref-extends-parent mw-references;
|
2019-12-04 11:02:32 +00:00
|
|
|
counter-reset: mw-ref-extends-child;
|
2019-12-03 10:09:28 +00:00
|
|
|
}
|
|
|
|
|
|
2020-01-07 12:04:52 +00:00
|
|
|
ol.references .mw-extended-references {
|
2019-12-03 10:09:28 +00:00
|
|
|
list-style: none;
|
2020-01-07 12:04:52 +00:00
|
|
|
margin-left: 2em;
|
2019-12-03 10:09:28 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mw-extended-references > li:before {
|
2019-12-04 11:02:32 +00:00
|
|
|
counter-increment: mw-ref-extends-child;
|
2019-12-09 08:48:34 +00:00
|
|
|
content: counter( mw-ref-extends-parent, decimal ) '.' counter( mw-ref-extends-child, decimal ) '. ';
|
2019-11-18 14:49:51 +00:00
|
|
|
}
|
|
|
|
|
|
2015-06-05 20:56:58 +00:00
|
|
|
sup.reference {
|
2016-03-19 11:55:04 +00:00
|
|
|
/* Isolation to fix references in case of RTL words at the end of a reference */
|
2015-08-24 18:48:15 +00:00
|
|
|
unicode-bidi: -moz-isolate;
|
|
|
|
|
unicode-bidi: -webkit-isolate;
|
|
|
|
|
unicode-bidi: isolate;
|
2016-03-19 11:55:04 +00:00
|
|
|
|
|
|
|
|
/* Don't allow a reference that includes a group name
|
|
|
|
|
to break in the end of the line */
|
|
|
|
|
white-space: nowrap;
|
2018-08-01 12:57:37 +00:00
|
|
|
|
|
|
|
|
/* Do not inherit bold or italic */
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-style: normal;
|
2015-06-05 20:56:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Highlight clicked reference in blue to help navigation */
|
|
|
|
|
ol.references li:target,
|
|
|
|
|
sup.reference:target {
|
2017-11-02 19:40:04 +00:00
|
|
|
background-color: #eaf3ff;
|
2015-06-05 20:56:58 +00:00
|
|
|
}
|
2016-02-18 06:35:42 +00:00
|
|
|
|
|
|
|
|
/* Make cite errors "strong" */
|
|
|
|
|
.mw-ext-cite-error {
|
|
|
|
|
font-weight: bold;
|
2015-10-08 20:38:01 +00:00
|
|
|
/* For the case that the error is embedded in an element with a different direction */
|
|
|
|
|
unicode-bidi: embed;
|
2016-02-18 06:35:42 +00:00
|
|
|
}
|
2012-05-15 18:31:23 +00:00
|
|
|
|
2019-12-20 09:58:56 +00:00
|
|
|
.mw-ext-cite-error code {
|
2020-03-17 21:18:18 +00:00
|
|
|
/* As code is inheriting `#f8f9fa` as background color from `code`,
|
|
|
|
|
we need to increase contrast, by setting it to `transparent`. See T247903. */
|
|
|
|
|
background-color: transparent;
|
2019-12-20 09:58:56 +00:00
|
|
|
color: inherit;
|
2020-03-17 21:34:32 +00:00
|
|
|
/* Reduce inherited `padding` to make code fit in better in Resources list. */
|
|
|
|
|
padding: 1px 2px;
|
2019-12-20 09:58:56 +00:00
|
|
|
}
|
|
|
|
|
|
2012-05-15 18:31:23 +00:00
|
|
|
/* @noflip */
|
|
|
|
|
.mw-cite-dir-ltr .reference-text {
|
|
|
|
|
direction: ltr;
|
|
|
|
|
unicode-bidi: embed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* @noflip */
|
|
|
|
|
.mw-cite-dir-rtl .reference-text {
|
|
|
|
|
direction: rtl;
|
|
|
|
|
unicode-bidi: embed;
|
|
|
|
|
}
|