mediawiki-skins-Vector/skinStyles/mediawiki.notification.less

@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 );
}