mediawiki-extensions-Echo/modules/styles/mw.echo.ui.NotificationBadgeWidget.less
Bartosz Dziewoński ed76ff596f Avoid hardcoded width for the popup's footer buttons
Hardcoded width interferes with OOUI's attempts to make the popup
narrower on narrow screens.

Minerva low resolution styles are now applied to all skins at
mobile/tablet breakpoints

Bug: T287132
Change-Id: Ifffe8c6330385356d35b7950ce9803f3a9f01b6f
2023-02-03 11:58:35 -08:00

87 lines
2.3 KiB
Plaintext

@import 'mediawiki.mixins.less';
@import '../echo.variables.less';
.mw-echo-ui-notificationBadgeButtonPopupWidget {
position: relative;
&-popup {
> .oo-ui-popupWidget-popup {
> .oo-ui-popupWidget-head {
box-sizing: border-box;
height: 3.1428571em; // = 44px as result of 44 / 16 (font-size browser) / 0.875 (OOUI WikimediaUI theme font-size)
border-bottom: 1px solid #c8ccd1;
margin: 0;
> .oo-ui-iconWidget {
float: left;
height: 100%;
margin: 0 0 0 1.1428571em; // = 16px as result of 16 / 16 / 0.875
opacity: @opacity-mid;
}
> .oo-ui-labelElement-label {
margin: 0 0 0 0.4761905em; // = 8px as result of ≈0.5714286 / 1.2 (element's font-size)
font-size: 1.2em;
font-weight: bold;
line-height: 2.5595238em; // = 43px as result of 43 (44 - 1 because of the border-box) / 16 / 0.875 / 1.2 (element's font-size)
}
.mw-echo-ui-notificationsWidget-markAllReadButton {
margin-top: 0.4285714em; // = 6px as result of 6 / 16 / 0.875
margin-right: 0.5714286em; // = 8px as result of 8 / 16 / 0.875
}
}
> .oo-ui-popupWidget-body {
// Work around scrollbar rendering bug in Chrome
overflow-y: visible;
// ...but make sure we don't actually overflow in the Y direction,
// to avoid breaking ClippableElement
overflow-x: auto;
> .mw-echo-ui-notificationsListWidget > .mw-echo-ui-notificationItemWidget {
// The popup body itself has a border. We need to override the notification
// item widget styles so that the edge borders of the items are not duplicated
border-left: 0;
border-right: 0;
&:last-child {
border-bottom: 0;
}
}
}
> .oo-ui-popupWidget-footer {
width: 100%;
margin: 0; // Override OOUI's popup footer margins (T171302)
border-top: 1px solid #c8ccd1;
> .oo-ui-buttonGroupWidget {
display: block;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
display: flex;
padding-bottom: 0;
.oo-ui-buttonElement {
flex: 1;
&:last-child {
border-left: 1px solid #c8ccd1;
}
> .oo-ui-buttonElement-button {
display: block;
line-height: 3.1428571em;
margin: 0;
border: 0;
padding: 0 0.5em;
}
}
}
}
}
}
}