With the change of the personal toolbar to align with the style guide (T160918), the layout of some elements need adjustment:
- The title of the page ("Translations") looks too large compared to the Wikipedia wordmark, and it is too close to it. We can use a 20px font size for the title instead, and make the separation be 8px.
- The drop-down looks too large. Since the spacing used for the control is proportional to the font size, we can make the font size to be 14px. We can use the same 14px size for the language label to keep both sizes consistent.
- The user drop-down can get too close to the notification indicators. We can use an additional 4px separation.
Current status
Proposed changes
The CSS overrides I used to achieve the changes are the following (these may need refactoring and removing the "!important" when applied to the real code):
/*Title is too large and too close to logo*/
.cx-header__trademark-text {
font-size: 20px !important;
margin-left: 8px !important;
}
/*Increase separation between notifications and user drop-down*/
.cx-header__personal-menu{
margin-left: 4px !important;
}
/*Make controls smaller*/
.cx-header__personal .pt-uls, .cx-header__personal .cx-header__personal-menu {
font-size: 14px !important;
}