mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/userMenu.less
Bartosz Dziewoński 433458ba98 Tweak margins/paddings of Echo icons
On desktop, the "Alert" icon had more white space around it than the
"Notice" icon, and its popup displayed with a different offset.

On mobile, the combined icon jumped around while the page was loading.

Change-Id: Icdd5bc6e8478f3453b6461a35b7fb53e8ab014e9
2022-12-14 04:36:14 +01:00

47 lines
1.3 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
// stylelint-disable selector-max-id
// The top level user account button in the upper right near the notifications button.
.minerva-user-navigation {
display: flex;
// Keep space for at least two buttons.
min-width: 2 * @menuButtonIconSize;
// Support Firefox: Needs `min-height` to vertically align icons in menu. See T233517.
min-height: @siteHeaderHeight;
height: 100%;
// FIXME: for cached HTML. Merge with `.minerva-search-form + .minerva-user-navigation`.
width: 100%;
// Center vertically.
align-items: center;
// Layout from right / end.
justify-content: flex-end;
// Show the list relative the button.
position: relative;
// align the last icon (i.e. notification or use menu) with the container edge.
& > *:last-child {
margin-right: -@icon-padding-md;
}
// desktop mode modifications
.minerva-user-notifications {
ul {
display: flex;
align-items: center;
}
li#pt-notifications-notice,
li#pt-notifications-alert {
display: block;
}
}
}
// Different rule for cached HTML
// Can be merged into `.minerva-user-navigation` rule one week after this
// change was introduced and minerva-search-form class is present everywhere.
.minerva-search-form + .minerva-user-navigation {
min-width: auto;
width: auto;
}