mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-04 20:28:49 +00:00
02252d0531
FloatableElement incorrectly believes it doesn't need to position itself when its closest scrollable is the same as the closest scrollable of the container. This causes the dotdotdot menu to be placed at the top left of the screen if the notifications popup is not scrollable. If it is scrollable, everything works fine. This regression was introduced by I5b5d7936c4d. Work around this by setting overflow-x: auto; on the popup body. This is a no-op, but tricks OOUI into thinking that the popup body is scrollable even when it visually isn't. We can't use overflow-y for this, because we still need to set overflow-y: auto; on the popup body to work around a Chrome bug where right-floated elements don't move over when the scrollbar appears. Bug: T130153 Change-Id: I8bd8a26a4931444a760d2159779240272c51f966
86 lines
1.8 KiB
Plaintext
86 lines
1.8 KiB
Plaintext
@import '../../echo.variables';
|
|
|
|
.mw-echo-ui-notificationBadgeButtonPopupWidget {
|
|
position: relative;
|
|
|
|
> .oo-ui-popupWidget {
|
|
// #p-personal li has a font-size of 0.75em, but we want the
|
|
// font size here to be exactly 0.875em, so we must override
|
|
// the parent em sizing by dividing.
|
|
font-size: 0.875em / 0.75em;
|
|
|
|
// Align the popup with the center of the button
|
|
/* @noflip */
|
|
left: 1em;
|
|
|
|
> .oo-ui-popupWidget-popup {
|
|
> .oo-ui-popupWidget-head {
|
|
height: 3.5em;
|
|
border-bottom: 1px solid #dddddd;
|
|
|
|
> .oo-ui-iconWidget {
|
|
margin: 0.7em 0 1em 1em;
|
|
float: left;
|
|
opacity: @opacity-mid;
|
|
}
|
|
|
|
> .oo-ui-labelElement-label {
|
|
font-size: 1.2em;
|
|
padding: 0.3em;
|
|
margin-left: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mw-echo-ui-notificationsWidget-markAllReadButton {
|
|
margin: 1.25em 1em;
|
|
}
|
|
}
|
|
|
|
> .oo-ui-popupWidget-body {
|
|
// Work around scrollbar rendering bug in Chrome
|
|
overflow-y: visible;
|
|
// Work around OO.ui.FloatableElement bug (T130153)
|
|
overflow-x: auto;
|
|
}
|
|
|
|
> .oo-ui-popupWidget-footer {
|
|
border-top: 1px solid #DDDDDD;
|
|
width: 100%;
|
|
|
|
> .oo-ui-buttonGroupWidget {
|
|
display: block;
|
|
}
|
|
|
|
.oo-ui-buttonElement {
|
|
display: table-cell;
|
|
white-space: normal;
|
|
font-weight: bold;
|
|
width: @notification-popup-width / 2;
|
|
box-sizing: border-box;
|
|
|
|
&:last-child {
|
|
border-left: 1px solid #DDDDDD;
|
|
}
|
|
|
|
> .oo-ui-buttonElement-button {
|
|
display: block;
|
|
line-height: 2.6em;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0.5em;
|
|
|
|
.oo-ui-iconElement-icon {
|
|
// HACK: these are absolutely positioned in OOUI, and our line-height: 4em;
|
|
// rule breaks that.
|
|
// FIXME: We should really use a different widget here
|
|
position: static;
|
|
opacity: @opacity-mid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|