mediawiki-extensions-Popups/src/ui/templates/referencePreview/referencePreview.less
gerritbot 5775a5a37f styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Also
- replacing several static values with new Codex design token featuring
  skin variables of `background-color`, `color`, `border-` and
  `opacity` category
- renaming three Less variables to variable naming standard

Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.

Bump MediaWiki core required version to >= v1.41.0.

Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Change-Id: If35605e8336c8619c6230bc892b360edbfd16f62
2023-04-13 05:31:50 -07:00

82 lines
1.8 KiB
Plaintext

@import 'mediawiki.skin.variables.less';
// Don't do any event bubbling on childs like <a><span>[</span>2]</a>, see T214693
#mw-content-text .reference a[ href*='#' ] * {
pointer-events: none;
}
.mwe-popups.mwe-popups-type-reference {
.mwe-popups-title {
// align icon with outer padding
margin: 0 0 12px 0;
.mw-ui-icon {
padding: 0 8px 0 0;
&:hover {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
}
}
// 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;
// Same as the --pointer-height in popup.less
@pointerHeight: 8px;
max-height: 403px - @popupPadding - @marginBottom + @pointerHeight;
overflow: auto;
padding-right: @popupPadding;
}
.mw-parser-output {
overflow-wrap: break-word;
}
// Remove the default fade-out effect set by popup.less
&::after {
display: none;
}
.mwe-popups-fade {
position: absolute;
width: 100%;
height: @lineHeight;
background-color: transparent;
background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
opacity: 0;
pointer-events: none; // Allows clicking "through" the element
transition: opacity 250ms ease;
}
&.mwe-popups-fade-out .mwe-popups-fade {
opacity: 1;
}
}
.mwe-collapsible-placeholder {
font-weight: bold;
margin: 1em 0;
position: relative;
.mw-ui-icon {
margin-left: -0.78em;
position: absolute;
}
.mwe-collapsible-placeholder-label {
margin-left: 2.5em;
}
}
}