defect
Because inline style attributes are used, it is no longer possible to adjust the corresponding values using CSS selectors. It is necessary to determine which inline styles are essential and which can be moved to CSS classes or where theme variables can be used.
Theme Variables for Sizes
'"Menu Position" => The top menu bar is not positioned within a grid or flexbox, but has inline "style" attributes that therefore cannot be modified via CSS." (see #24071)
The theme variables marked with an asterisk are newly introduced. The rest are mentioned for the sake of completeness.
Modern Theme
Header:
- TITLEBAR_HEIGHT*
- MAIN_TAB_BAR_HEIGHT
- TOOL_ROW_HEIGHT*
- MAIN_NAVIGATION_BAR_HEIGHT*
Footer:
- BUTTON_COMP_HEIGHT
- VERSION_ROW_HEIGHT*
Sidebar Theme
Sidebar:
- QUICK_SEARCH_HEIGHT*
Header:
- MAIN_NAVIGATION_BAR_HEIGHT*
- LICENCE_EXPIRE_BAR_HEIGHT*
- MAINTAINANCE_BAR_HEIGHT*
- LEVEL_ONE_BAR_SIZE
- LEVEL_TWO_BAR_SIZE
Footer:
- BUTTON_COMP_HEIGHT
Variables marked with * are new.
Inline Styles in General
"In general, too many style attributes are used that override CSS styles." (see #24071) The following script outputs 90+:
{{{#!js tags = Array.from(document.querySelectorAll("div")).filter((e)=>{
return e.style.length !== 0;
}); }}}
Test
The corresponding variables should be found in the theme editor:
Modern Theme
- TITLEBAR_HEIGHT
- TOOL_ROW_HEIGHT
- MAIN_NAVIGATION_BAR_HEIGHT
- VERSION_ROW_HEIGHT
Sidebar Theme
- QUICK_SEARCH_HEIGHT
- MAIN_NAVIGATION_BAR_HEIGHT
- LICENSE_EXPIRATION_BAR_HEIGHT
- MAINTENANCE_BAR_HEIGHT