diff --git a/modules/ve-cite/ve.ui.MWReferenceResultWidget.less b/modules/ve-cite/ve.ui.MWReferenceResultWidget.less index bc731648d..d5ea3d7df 100644 --- a/modules/ve-cite/ve.ui.MWReferenceResultWidget.less +++ b/modules/ve-cite/ve.ui.MWReferenceResultWidget.less @@ -8,8 +8,10 @@ @import 'mediawiki.skin.variables.less'; .ve-ui-mwReferenceResultWidget { - position: relative; 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; &:last-child { @@ -24,7 +26,8 @@ &.oo-ui-labelElement .oo-ui-labelElement-label { white-space: normal; - // Disable click events in the preview + // Ignore clicks on e.g. elements that are part of the reference's text pointer-events: none; + word-wrap: break-word; } } diff --git a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less index ef6f03abd..e4fcf3a48 100644 --- a/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less +++ b/modules/ve-cite/ve.ui.MWReferenceSearchWidget.less @@ -5,20 +5,34 @@ * @license MIT */ +@import 'mediawiki.skin.variables.less'; + .ve-ui-mwReferenceSearchWidget { + // How the footnote marker appears in the text, e.g. [1] &-citation { float: left; margin-right: 0.75em; } + // A reference's unique identifier as provided via the name="…" attribute &-name { - opacity: 0.53; /* results in #787878 which is almost exactly Gray500 */ + 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; + } } - &-name-autogenerated { - opacity: 0.2; /* results in #cccccc which is almost exactly Gray300 */ + // Preview the reference's content with less whitespace, relevant when it contains e.g. tables + .ve-ui-mwPreviewElement * { + margin-bottom: 0; + margin-top: 0; } }