mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less
Volker E dd154b4ea7 styles: Replace deprecated breakpoints
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Also removing one out-dated feature phone clause.

TECHNICAL CHANGES:
* The previous breakpoint was tied to the maximum content width.
The previous maximum content width is preserved, and several media
queries are adjusted to make use of it.
* The header (logo) is not optimized for  640px-720px. For now
a temporary fix is but in place which will be investigated as part
of T366859

VISUAL CHANGES:
* 6 visual changes which improve alignment in language and
visual editor overlay and diffs (where wikidiff2 is not
installed)

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
2024-06-07 12:52:39 -07:00

40 lines
862 B
Plaintext

@import '../../minerva.less/minerva.variables.less';
.notifications-overlay {
visibility: visible;
}
// needs to be more specific than .overlay rules
.notifications-overlay.navigation-drawer {
display: block;
width: auto;
right: 0;
box-shadow: @box-shadow-drop-medium;
transform: translate( 100%, 0 );
transition: transform @transition-duration-medium @transition-timing-function-menu;
&.visible {
transform: translate( 0, 0 );
}
}
@media all and ( min-width: @min-width-breakpoint-tablet ) {
@rightDrawerLeftOffset: 100% - @drawer-width-right;
.notifications-overlay.navigation-drawer {
left: @rightDrawerLeftOffset;
.overlay-header {
margin: 0; // T210191
width: 100%; // T218731
// T170903
max-width: none;
.cancel {
// 0 because we want to have some tappable area to the left of the icon
left: 0;
}
}
}
}