diff --git a/en/theme/material/assets/css/theme.css b/en/theme/material/assets/css/theme.css index 4e9ea9494d..3626be64df 100644 --- a/en/theme/material/assets/css/theme.css +++ b/en/theme/material/assets/css/theme.css @@ -385,7 +385,13 @@ font-size: 14px; font-style: italic; color: var(--md-default-fg-color--light); - } +} + +.tabbed-content.tab_with_no_code { + background: var(--md-default-fg-color--lightest); + padding: 0 20px 10px; + border-radius: 0 0 var(--md-code-block-radius) var(--md-code-block-radius); +} /* Media query breakpoints diff --git a/en/theme/material/assets/js/theme.js b/en/theme/material/assets/js/theme.js index 9a4a8b5e6f..cc578c3314 100644 --- a/en/theme/material/assets/js/theme.js +++ b/en/theme/material/assets/js/theme.js @@ -34,3 +34,17 @@ dropdownLink.addEventListener('click', function(event) { event.stopPropagation(); // Prevent the event from propagating to the document dropdown.classList.toggle('open'); // Toggle the "open" class }); + +// Add a class to tasb that has multiple child elements rather than a code block +document.querySelectorAll('.tabbed-content').forEach(tabbedContent => { + const tabbedBlocks = Array.from(tabbedContent.querySelectorAll('.tabbed-block')); + + // Check if each .tabbed-block has more than 1 child or if its immediate child is not .highlight + const shouldAddClass = tabbedBlocks.some(tabbedBlock => + tabbedBlock.children.length > 1 || !tabbedBlock.firstElementChild.classList.contains('highlight') + ); + + if (shouldAddClass) { + tabbedContent.classList.add('tab_with_no_code'); + } +});