mediawiki-extensions-Cite/modules/ve-cite/ve.ui.MWReferenceResultWidget.less
WMDE-Fisch bcd76a24c4 Allow the ref re-use sub-menu options to wrap
We discovered that the label can be really long depending on the
language. On mobile, where the screen is quite narrow it seems
more useful to let it wrap.

In this context it's even more relevant, because the options you
can choose from might only differ in the last parts of the message.

Bug: T375053
Change-Id: I9ec111ab1b80843f993d605ff11a1702c3d7b37c
2024-10-04 11:11:22 +02:00

89 lines
2.2 KiB
Plaintext

/*!
* VisualEditor MediaWiki UserInterface MWReferenceResultWidget styles.
*
* @copyright 2011-2018 VisualEditor Team's Cite sub-team and others; see AUTHORS.txt
* @license MIT
*/
@import 'mediawiki.skin.variables.less';
.ve-ui-mwReferenceResultWidget {
padding: 1em;
// Limit extremely large references to not overflow the dialog
max-height: 12em;
overflow: hidden;
border-bottom: @border-width-base @border-style-base @border-color-muted;
// Class applied only to subrefs
&-sub .oo-ui-labelElement-label {
margin-left: 2em;
}
&:last-child {
border-bottom: 0;
}
&.oo-ui-optionWidget-highlighted {
// OOUI's SearchWidget doesn't come with a style for this, so we copy MenuOptionWidget
background-color: @background-color-interactive;
color: @color-emphasized;
}
&.oo-ui-labelElement .oo-ui-labelElement-label {
white-space: normal;
// Ignore clicks on e.g. <a> elements that are part of the reference's text
pointer-events: none;
word-wrap: break-word;
}
// How the footnote marker appears in the text, e.g. [1]
&-footnote {
float: left;
margin-right: 0.75em;
}
// A reference's unique identifier as provided via the name="…" attribute
&-name {
opacity: @opacity-medium;
float: right;
margin-left: 0.75em;
margin-bottom: 0.05em;
// Limit overly long names and push them to the side
max-width: 40%;
text-align: right;
// Names like ":0" are less meaningful, still useful esp. when switching to wikitext
&-autogenerated {
opacity: @opacity-low;
}
}
// Preview the reference's content with less whitespace, relevant when it contains e.g. tables
.ve-ui-mwPreviewElement * {
margin-bottom: 0;
margin-top: 0;
}
}
.ve-ui-mwReferenceResultsReuseOptionsItem .oo-ui-menuOptionWidget > .oo-ui-labelElement-label {
white-space: initial;
}
// FIXME: T375053 Should just be temporary to test some UI changes
.ve-ui-mwReferenceSearchReuseHacks .ve-ui-mwReferenceResultWidget {
display: flex;
.ve-ui-mwReferenceResultsReuseOptions .oo-ui-buttonElement-button:hover {
border: @border-progressive;
}
.oo-ui-labelElement-label {
flex-grow: 1;
}
// FIXME: Waiting on a design that accomodates the ref name.
.ve-ui-mwReferenceResultWidget-name {
display: none;
}
}