mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/drawers.less
Bartosz Dziewoński 75751e5512 Improve styles for mw.notify and post-edit messages
* Allow multiple notifications to be visible at the same time without
  overlapping
* Don't allow notifications to cover the entire screen
* Fix icon placement in post-edit notifications

Bug: T336001
Change-Id: I7b76b0f97bc4b5ca85f4b47bd27ae7568bcbe353
2023-05-04 21:54:24 +02:00

48 lines
1.1 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
.drawer {
background-color: @background-color-lightest;
// needed for Android 4.x
position: absolute;
}
// Basic toast notification
//
// Toast must have visible class to be shown
//
// Markup:
// <div class="toast visible">
// Notification for user.
// </div>
// <div class="mw-notification-area">
// <div class="mw-notification">Notification 1 for user.</div>
// <div class="mw-notification">Notification 2 for user.</div>
// </div>
.mw-notification-area,
.toast,
.drawer {
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
right: 0;
// don't allow notifications to cover the entire screen
max-height: 50%;
// needs to be higher than for overlays to show on top of overlays
z-index: @z-indexOverOverlay;
}
.mw-notification,
.toast,
.drawer {
box-sizing: border-box;
box-shadow: 0 -1px 8px 0 @box-shadow-color-drawer;
word-wrap: break-word;
// don't use visibility: hidden in old browsers that don't support animations
display: none;
&.visible, &.mw-notification-visible {
display: block;
}
}