By using inline style attributes there is no possibility anymore to adjust the corresponding values via CSS selectors. It must be examined which inline styles are necessary and which can be outsourced by CSS classes or where theme variables can be used.
Theme variables for sizes
'"Place of menus" => the top menu bar is not positioned in a grid or flex-box, but has inline "style" attributes, which thus cannot be changed by CSS.' (see #24071)
The theme variables marked with an asterisk have been newly introduced. The rest have been mentioned for 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*
- LICENSE_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
'Generally too many style attributes are used that override CSS styles.' (see #24071) The following script has 90+ as output:
{{#!js tags = Array.from(document.querySelectorAll("div")).filter((e)=>{
return e.style.length !== 0;
}); }}}
Test
In the theme editor, the appropriate variables must be found:
Modern Theme
- TITLEBAR_HEIGHT
- TOOL_ROW_HEIGHT
- MAIN_NAVIGATION_BAR_HEIGHT
- VERSION_ROW_HEIGHT
Sidebar Theme
- QUICK_SEARCH_HEIGHT
- MAIN_NAVIGATION_BAR_HEIGHT
- LICENSE_EXPIRE_BAR_HEIGHT
- MAINTAINANCE_BAR_HEIGHT