mediawiki-skins-Vector/skinStyles/mediawiki.notification.less
Esanders 651b7aea6f Reapply "mw.notify: Limit width of overlay to max-width-page-container"
Limit this change to fixed width 2022, as it isn't necessary in full width mode.

This reverts commit 45ded33a4c.

Bug: T349622
Change-Id: Iba1c26dd6b1039bfd11764585ed43064aa886403
2024-01-10 20:33:53 +00:00

47 lines
1.3 KiB
Plaintext

@import '../resources/skins.vector.styles/variables.less';
/* mediawiki.notification */
.mw-notification-area {
font-size: @font-size-notification;
// Center the notification area with a maximum width.
// We can't center .mw-notification-area-overlay as that would break position:fixed.
width: 100%;
box-sizing: border-box;
left: 50%;
transform: translateX( -50% );
.vector-feature-limited-width-clientpref-1 & {
max-width: @max-width-page-container / @font-size-notification;
}
}
.mw-notification-area-layout {
top: 3.5em;
}
.mw-notification {
border: @border-base;
border-radius: @border-radius-base;
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
// As the notification area was centered and given variable width, restore
// the fixed width of notifications here. Matches .mw-notification-area
// rule in core.
width: 20em;
box-sizing: border-box;
margin-left: auto;
}
.vector-sticky-header-enabled .mw-notification-area {
transition: @transition-sticky-header;
}
/**
* When the sticky header is open in modern Vector,
* and the notification bar is also open, the notification
* should be moved so that it doesn't obstruct the sticky header
*/
.vector-sticky-header-visible .mw-notification-area-overlay > .mw-notification-area-floating {
transform: translate( -50%, @height-header );
}