mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-28 05:23:05 +00:00
2ee3e27406
This reverts commit 19ea6328b0
.
Reason for revert: Breaks page issues and image overlay. I
will break this up into smaller less risky patches.
Change-Id: If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9
156 lines
3.7 KiB
Plaintext
156 lines
3.7 KiB
Plaintext
@import '../../../../minerva.less/minerva.variables.less';
|
|
|
|
/**
|
|
* Ambox classes are nested in a top-level class
|
|
* for the page issues A/B test.
|
|
* This class is appended to the DOM via JS
|
|
**/
|
|
|
|
@amboxPadding: 8px;
|
|
@amboxIconPadding: @amboxPadding * 4;
|
|
|
|
.ambox,
|
|
/* Be more specific than .content table styles in Minerva */
|
|
table.ambox {
|
|
display: none;
|
|
margin: 0;
|
|
}
|
|
|
|
// Will show FOUC on mobile
|
|
.issues-group-B {
|
|
.ambox {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.client-js .ambox {
|
|
cursor: pointer;
|
|
width: auto;
|
|
background: @background-color-lightest;
|
|
color: @color-subtle;
|
|
margin-bottom: 1px;
|
|
|
|
tbody {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
// Assuming that most ambox templates wrap content in this element.
|
|
// See https://en.wikipedia.org/w/index.php?title=Module:Message_box&action=raw (search for 'mbox-text-span').
|
|
// https://phabricator.wikimedia.org/T206887 suggests .mbox-text-div is also needed.
|
|
.mbox-text-div,
|
|
.mbox-text-span {
|
|
display: block;
|
|
max-height: @line-height-content * 2em;
|
|
// All will have this height (approx 2 lines) even if a single line e.g. {{dictdef}} when on mobile.
|
|
// Overriden later in tablet styles.
|
|
height: @line-height-content * 2em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Wrestle with inline styles that editors may place on elements inside the ambox
|
|
div {
|
|
// e.g. on mw-collapsible inside Multiple issues template
|
|
margin: 0 !important;
|
|
// e.g. on Template:Expand Russian
|
|
padding: 0 !important;
|
|
}
|
|
|
|
td,
|
|
div.mbox-text {
|
|
position: relative;
|
|
// Override !important above if this is a div
|
|
padding: @amboxPadding @amboxPadding @amboxPadding @amboxIconPadding !important;
|
|
|
|
> div,
|
|
> span {
|
|
font-size: @font-size-minerva-smallest;
|
|
}
|
|
}
|
|
|
|
// All text should be treated the same
|
|
b {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
// Hide links in new treatment
|
|
a {
|
|
color: inherit !important;
|
|
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ) !important;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
outline: inherit;
|
|
}
|
|
}
|
|
|
|
small,
|
|
.hide-when-compact,
|
|
/* Template:Expand Russian */
|
|
.mw-collapsible-content,
|
|
/* Remove empty leftmost column when present (.mbox-empty-cell)
|
|
* and .verbose and any hr tags that might be present in the ambox
|
|
* See https://en.wikipedia.org/w/index.php?
|
|
* title=Special:WhatLinksHere/Template:Proposed_deletion_notify
|
|
* (https://phabricator.wikimedia.org/T197265) */
|
|
.mbox-empty-cell,
|
|
hr,
|
|
.verbose,
|
|
/* Nested amboxes (multiple issues) */
|
|
table,
|
|
.mbox-image {
|
|
display: none;
|
|
}
|
|
|
|
.mf-icon {
|
|
position: absolute;
|
|
left: @amboxPadding;
|
|
top: 11px;
|
|
}
|
|
|
|
.ambox-learn-more {
|
|
color: @color-link;
|
|
position: absolute;
|
|
right: @amboxPadding;
|
|
bottom: @amboxPadding;
|
|
z-index: @z-indexBase;
|
|
line-height: @line-height-content; // sets height for fade & aligns "learn more" to ambox text.
|
|
|
|
/* creates a fade under the "learn more" button to avoid overlapping text. */
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: @z-indexOccluded;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%; // width & height defined by length of "learn more".
|
|
height: 100%;
|
|
box-sizing: content-box; // explicitly setting box-sizing so padding extends beyond 100%.
|
|
padding-left: 4em;
|
|
background: linear-gradient( to right, fade( @background-color-lightest, 0 ) 0, @background-color-lightest 3em );
|
|
}
|
|
}
|
|
|
|
@media screen and ( min-width: @width-breakpoint-tablet ) {
|
|
.mbox-text-div,
|
|
.mbox-text-span {
|
|
height: auto;
|
|
margin-bottom: @amboxPadding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
|
|
}
|
|
|
|
.ambox-learn-more {
|
|
left: @amboxIconPadding;
|
|
right: 0;
|
|
background: none;
|
|
|
|
// Move blur to far right last line
|
|
// https://phabricator.wikimedia.org/T197931#4475197
|
|
&::before {
|
|
top: unit( -@line-height-content, em );
|
|
width: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|