mediawiki-skins-Vector/skinStyles/mediawiki.notification.less
Jan Drewniak aa44696222 Align mw.notify() alerts to avoid overlapping sticky header
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.

Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
2021-12-07 14:41:46 -05:00

38 lines
978 B
Plaintext

@import 'mediawiki.ui/variables.less';
@import '../resources/common/variables.less';
/* mediawiki.notification */
.mw-notification-area {
font-size: @font-size-notification;
}
.mw-notification-area-layout {
top: 7em;
}
.mw-notification {
border: @border-base;
border-radius: @border-radius-base;
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
}
/**
* With the sticky header enabled in modern Vector,
* We lower the z-index to make the user menu and language picker
* useable when a notification is present.
*/
.vector-sticky-header-enabled .mw-notification-area {
transition: @transition-sticky-header;
z-index: @z-index-menu;
}
/**
* 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: translateY( @height-sticky-header );
}