wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-23 15:16:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minimize and optimize reference preview CSS

Browse source 
This minifies the CSS a bit by simplifying some selectors that
don't need to be that specific.

This also optimizes the code for the 3 icons that can appear
in a reference popup:
* The type icon in the title.
* The settings icon in the footer.
* The (i) icon that can appear in the content.

Some of this CSS used "resets on top of resets". This is more
straightforward now.

To fully test all 3 icons please use an example like this:
<ref>
{| class="wikitable mw-collapsible"
| Collapsible table
|}
</ref>

Bug: T234205
Bug: T280762
Change-Id: I9e338475a161164e7707b9bb0498dba640313174
This commit is contained in:
Thiemo Kreuz 2021-02-17 10:50:54 +01:00
parent d7869a0086
commit 729f342aa9
1 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/ui/templates/referencePreview/referencePreview.less
View file

@ -7,22 +7,6 @@
.mwe-popups-title {
margin: 0 0 @popupPadding;
.mw-ui-icon-reference-generic {
/* align narrow icon with the text */
margin-left: -2px;
}
// There is currently no "reference-note" icon specified in extension.json
.mw-ui-icon-reference-note {
display: none;
}
}
.mwe-popups-extract {
margin-right: 0;
max-height: inherit;
// Note: This also affects the icon in .mwe-popups-title
.mw-ui-icon {
// Since 6bc3aada (T277663) this is @min-size-icon = 20px upstream in
// …/mediawiki.ui/components/icons.less, too small for us
@ -41,6 +25,21 @@
}
}
.mw-ui-icon-reference-generic {
/* align narrow icon with the text */
margin-left: -2px;
}
// There is currently no "reference-note" icon specified in extension.json
.mw-ui-icon-reference-note {
display: none;
}
}
.mwe-popups-extract {
margin-right: 0;
max-height: inherit;
.mwe-popups-scroll {
// This is how the `margin-bottom: 47px` in popup.less is calculated
@marginBottom: 2 * @lineHeight + 7px;
@ -75,21 +74,23 @@
&.mwe-popups-fade-out .mwe-popups-fade {
opacity: 1;
}
}
.mwe-collapsible-placeholder {
font-weight: bold;
margin: 1em 0;
position: relative;
.mwe-collapsible-placeholder {
font-weight: bold;
margin: 1em 0;
position: relative;
// This mirrors .oo-ui-iconElement-icon
.mw-ui-icon {
position: absolute;
}
// This mirrors .oo-ui-iconElement-icon
.mw-ui-icon {
margin-left: -@width-icon-gutter;
min-height: @size-icon;
position: absolute;
}
// This mirrors .oo-ui-messageWidget > .oo-ui-labelElement-label
.mwe-collapsible-placeholder-label {
margin-left: 2em;
}
// This mirrors .oo-ui-messageWidget > .oo-ui-labelElement-label
.mwe-collapsible-placeholder-label {
margin-left: @size-icon + 0.5em;
}
}
}