(function() { const CONTAINER_SEL = "#content-container"; const TOC_SEL = "section.content-toc"; const BODY_SEL = "section.content-body.grid-75"; const DROPDOWN_CLS = "AIDropdown"; // Load IBM Plex Sans from Google Fonts function loadIBMPlexSans() { const link = document.createElement('link'); link.href = 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&display=swap'; link.rel = 'stylesheet'; document.head.appendChild(link); // Apply fonts after a short delay to ensure they're loaded setTimeout(function() { console.log('IBM Plex Sans loaded from Google Fonts'); applyGlobalFont(); }, 500); } // Load FontAwesome for icons function loadFontAwesome() { // Check if FontAwesome is already loaded if (!document.querySelector('link[href*="fontawesome"]') && !window.FontAwesome) { const link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'; link.rel = 'stylesheet'; link.crossOrigin = 'anonymous'; document.head.appendChild(link); console.log('FontAwesome loaded from CDN'); } } loadIBMPlexSans(); loadFontAwesome(); function updateLayoutClass() { const container = document.querySelector(CONTAINER_SEL); if (!container) return; const toc = container.querySelector(TOC_SEL); const onlyDropdown = toc && toc.children.length === 1 && Array.from(toc.firstElementChild.classList).some(cls => cls.startsWith(DROPDOWN_CLS)); const isEmpty = toc && toc.children.length === 0; const noToc = !toc || isEmpty || onlyDropdown; container.classList.toggle("no-toc", noToc); } // Run on initial load, history nav, ReadMe SPA loads: document.addEventListener("DOMContentLoaded", updateLayoutClass); window.addEventListener("popstate", updateLayoutClass); if (window.jQuery) { $(window).on("pageLoad", updateLayoutClass); } // Watch for dynamic TOC or dropdown insertions/removals new MutationObserver(updateLayoutClass).observe(document.body, { childList: true, subtree: true }); const iconElement = document.querySelector('.icon.icon-text-align-left'); // ----------------- Combined icon replacement ----------------- function replaceSparkleIcons() { const svgIcons = document.querySelectorAll('.Sparkle2v30M7Hw3dl4'); svgIcons.forEach(svgIcon => { if (!svgIcon.dataset.replaced) { const img = document.createElement('img'); img.src = 'https://assets.moveworks.com/retrieve/image/TIw04f6_MOY09VZkxkUpnBv9kskUxdVNvtjULNJIAbGhCrIoTdJj8p89kq17Z7GUO9oyYh1wEijminey-H3AhZt6fP_Tovn5GQZ10ELw17aybisn9L1zRg4u6Noy-dWdQ3T8'; img.width = 16; img.height = 16; img.style.verticalAlign = 'middle'; svgIcon.parentNode.replaceChild(img, svgIcon); svgIcon.dataset.replaced = 'true'; } }); } function replaceCardIcons() { const replacements = { 'fa-robot': 'fa-thin fa-robot', 'fa-gear': 'fa-thin fa-screwdriver-wrench', 'fa-search': 'fa-thin fa-file-magnifying-glass', 'fa-store': 'fa-thin fa-store', 'fa-brain': 'fa-thin fa-brain', 'fa-lock': 'fa-thin fa-lock', // New card icons 'fa-database': 'fa-solid fa-database', 'fa-comments': 'fa-solid fa-comments', 'fa-infinity': 'fa-solid fa-infinity', 'fa-rocket': 'fa-solid fa-rocket', 'fa-book': 'fa-solid fa-book', 'fa-graduation-cap': 'fa-solid fa-graduation-cap', 'fa-clipboard-list': 'fa-solid fa-clipboard-list', 'fa-clone': 'fa-solid fa-clone', 'fa-plug': 'fa-solid fa-plug', }; const firstIcon = document.querySelector('.Card-icon'); const targetSize = firstIcon ? window.getComputedStyle(firstIcon).fontSize : '20px'; const icons = document.querySelectorAll('.Card-icon'); icons.forEach(icon => { if (!icon.dataset.replaced) { const classes = Array.from(icon.classList); const oldIcon = classes.find(cls => Object.keys(replacements).includes(cls)); if (oldIcon) { icon.className = 'Card-icon ' + replacements[oldIcon]; icon.style.fontSize = targetSize; icon.dataset.replaced = 'true'; } } }); } function replacePaginationIcons() { // Debug: Log all potential arrow elements const allIcons = document.querySelectorAll('i, span[class*="icon"], .icon, [class*="arrow"]'); const potentialArrows = Array.from(allIcons).filter(el => el.className.includes('arrow') || el.textContent.includes('‹') || el.textContent.includes('›') || el.textContent.includes('←') || el.textContent.includes('→') ); if (potentialArrows.length > 0) { console.log('Found potential arrow elements:', potentialArrows); } // More comprehensive selectors for pagination arrows const rightArrowSelectors = [ '.PaginationControls-iconZbaZ3tgyhNmI.icon-arrow-right2', '.icon-arrow-right2', '.icon-arrow-right', 'i[class*="arrow-right"]', '[class*="pagination"] i[class*="right"]', '[class*="PaginationControls"] i[class*="right"]', '.pagination-controls .icon-arrow-right', '.pagination .icon-arrow-right', // Generic arrow patterns 'i.icon[class*="right"]', 'span[class*="arrow-right"]', '.icon.right', '[title*="Next"]', '[aria-label*="Next"]' ]; const leftArrowSelectors = [ '.PaginationControls-iconZbaZ3tgyhNmI.icon-arrow-left2', '.icon-arrow-left2', '.icon-arrow-left', 'i[class*="arrow-left"]', '[class*="pagination"] i[class*="left"]', '[class*="PaginationControls"] i[class*="left"]', '.pagination-controls .icon-arrow-left', '.pagination .icon-arrow-left', // Generic arrow patterns 'i.icon[class*="left"]', 'span[class*="arrow-left"]', '.icon.left', '[title*="Previous"]', '[aria-label*="Previous"]' ]; let replacedCount = 0; // Try each selector for right arrows rightArrowSelectors.forEach(selector => { try { const rightArrows = document.querySelectorAll(selector); rightArrows.forEach(icon => { if (!icon.dataset.replaced) { // Ensure FontAwesome is available, fallback to Unicode if not if (document.querySelector('link[href*="fontawesome"]') || window.FontAwesome) { icon.className = 'fas fa-chevron-right'; // Using more common FontAwesome class icon.style.fontSize = icon.style.fontSize || '14px'; } else { // Unicode fallback icon.innerHTML = '→'; icon.style.fontFamily = 'Arial, sans-serif'; icon.style.fontSize = '14px'; } icon.dataset.replaced = 'true'; replacedCount++; } }); } catch (e) { console.log('Error with selector:', selector, e); } }); // Try each selector for left arrows leftArrowSelectors.forEach(selector => { try { const leftArrows = document.querySelectorAll(selector); leftArrows.forEach(icon => { if (!icon.dataset.replaced) { // Ensure FontAwesome is available, fallback to Unicode if not if (document.querySelector('link[href*="fontawesome"]') || window.FontAwesome) { icon.className = 'fas fa-chevron-left'; // Using more common FontAwesome class icon.style.fontSize = icon.style.fontSize || '14px'; } else { // Unicode fallback icon.innerHTML = '←'; icon.style.fontFamily = 'Arial, sans-serif'; icon.style.fontSize = '14px'; } icon.dataset.replaced = 'true'; replacedCount++; } }); } catch (e) { console.log('Error with selector:', selector, e); } }); if (replacedCount > 0) { console.log(`Replaced ${replacedCount} pagination arrow icons`); } } function replaceWatchIcons() { const watchIcons = document.querySelectorAll('i.icon.icon-watch'); watchIcons.forEach(icon => { if (!icon.dataset.replaced) { icon.className = 'fa-thin fa-watch'; icon.dataset.replaced = 'true'; } }); } function styleContentHeader() { const headerH1 = document.querySelector('#content-head h1'); if (headerH1 && !headerH1.dataset.styled) { headerH1.style.color = 'var(--Text-Primary, #1D1D1D)'; headerH1.style.fontFamily = '"IBM Plex Sans"'; headerH1.style.fontSize = '36px'; headerH1.style.fontStyle = 'normal'; headerH1.style.fontWeight = '500'; headerH1.style.lineHeight = '120%'; headerH1.dataset.styled = 'true'; } } function applyGlobalFont() { // Apply font with !important to override any existing styles document.documentElement.style.setProperty('font-family', '"IBM Plex Sans", sans-serif', 'important'); document.body.style.setProperty('font-family', '"IBM Plex Sans", sans-serif', 'important'); // Apply to text elements, excluding icons const textElements = document.querySelectorAll('*:not(i):not([class*="fa-"]):not([class*="icon"]):not(.IconWrapper):not([class*="Icon"])'); textElements.forEach(element => { const computedStyle = window.getComputedStyle(element); if (computedStyle.fontFamily.includes('Times') || computedStyle.fontFamily.includes('serif')) { element.style.setProperty('font-family', '"IBM Plex Sans", sans-serif', 'important'); } }); // Force monospace for code elements by removing inline font-family styles const codeElements = document.querySelectorAll('code, pre, code *, pre *'); codeElements.forEach(element => { element.style.removeProperty('font-family'); element.style.setProperty('font-family', 'monospace', 'important'); }); // Create a style element to ensure global application if (!document.getElementById('ibm-plex-override')) { const style = document.createElement('style'); style.id = 'ibm-plex-override'; style.textContent = ` *:not(i):not([class*="fa-"]):not([class*="icon"]):not(.IconWrapper):not([class*="Icon"]):not(code):not(pre) { font-family: "IBM Plex Sans", sans-serif !important; } body, html { font-family: "IBM Plex Sans", sans-serif !important; } p, span, div, h1, h2, h3, h4, h5, h6, a, button { font-family: "IBM Plex Sans", sans-serif !important; } code, pre, code *, pre * { font-family: monospace !important; } `; document.head.appendChild(style); } document.documentElement.dataset.fontApplied = 'true'; } function styleHeaderLinks() { const headerLinks = document.querySelectorAll('a.Button.Button_md.rm-Header-link.rm-Header-top-link'); headerLinks.forEach(link => { // Skip the Login link if (link.textContent.includes('Login')) { return; } // Remove existing styling and re-apply to override any cached styles link.dataset.styled = ''; // Apply base styles with !important to override any existing CSS link.style.setProperty('color', 'var(--Text-Primary-2, rgba(29, 29, 29, 0.75))', 'important'); link.style.setProperty('text-align', 'center', 'important'); link.style.setProperty('font-family', '"IBM Plex Sans"', 'important'); link.style.setProperty('font-size', '16px', 'important'); link.style.setProperty('font-style', 'normal', 'important'); link.style.setProperty('font-weight', '500', 'important'); link.style.setProperty('line-height', '120%', 'important'); // Disable any existing hover effects by capturing and stopping events link.addEventListener('mouseenter', function(e) { e.stopImmediatePropagation(); e.target.style.setProperty('color', 'var(--Text-Primary-2, rgba(29, 29, 29, 0.75))', 'important'); e.target.style.setProperty('text-align', 'center', 'important'); e.target.style.setProperty('font-family', '"IBM Plex Sans"', 'important'); e.target.style.setProperty('font-size', '16px', 'important'); e.target.style.setProperty('font-style', 'normal', 'important'); e.target.style.setProperty('font-weight', '500', 'important'); e.target.style.setProperty('line-height', '120%', 'important'); }, true); link.addEventListener('mouseleave', function(e) { e.stopImmediatePropagation(); e.target.style.setProperty('color', 'var(--Text-Primary-2, rgba(29, 29, 29, 0.75))', 'important'); e.target.style.setProperty('text-align', 'center', 'important'); e.target.style.setProperty('font-family', '"IBM Plex Sans"', 'important'); e.target.style.setProperty('font-size', '16px', 'important'); e.target.style.setProperty('font-style', 'normal', 'important'); e.target.style.setProperty('font-weight', '500', 'important'); e.target.style.setProperty('line-height', '120%', 'important'); }, true); link.dataset.styled = 'true'; }); } function styleSearchInput() { const searchInput = document.querySelector('input.SearchBert-Prompt3UVFfRcBSAeq#SearchBert'); if (searchInput && !searchInput.dataset.styled) { searchInput.style.fontFamily = '"IBM Plex Sans", sans-serif'; searchInput.style.paddingLeft = '20px'; searchInput.dataset.styled = 'true'; } } function preventAskAITextHiding() { const askAIButtons = document.querySelectorAll('button.Button.Button_sm.Dropdown-toggle.Button_secondary.Button_secondary_outline'); askAIButtons.forEach(button => { const askAISpan = button.querySelector('span:not(.IconWrapper)'); if (askAISpan && askAISpan.textContent.includes('Ask AI') && !button.dataset.textProtected) { askAISpan.style.display = 'inline !important'; askAISpan.style.visibility = 'visible !important'; askAISpan.style.whiteSpace = 'nowrap'; button.style.minWidth = 'fit-content'; button.dataset.textProtected = 'true'; } }); } function styleAskAIButtonHover() { const askAIButtons = document.querySelectorAll('button.Button.Button_sm.Dropdown-toggle.Button_secondary.Button_secondary_outline[data-text-protected="true"]'); askAIButtons.forEach(button => { if (!button.dataset.hoverStyled) { button.style.transition = 'all 0.2s ease'; button.addEventListener('mouseenter', function(e) { e.target.style.borderRadius = '24px'; e.target.style.border = '1px solid var(--border-border-3-black, #1D1D1D)'; e.target.style.background = 'var(--Button-Secoundary-hover, #DFD9D3)'; }); button.addEventListener('mouseleave', function(e) { e.target.style.borderRadius = ''; e.target.style.border = ''; e.target.style.background = ''; }); button.addEventListener('mousedown', function(e) { e.target.style.borderRadius = '24px'; e.target.style.border = '1px solid var(--border-border-3-black, #1D1D1D)'; e.target.style.background = 'var(--Button-Secoundary-hover, #DFD9D3)'; }); button.addEventListener('mouseup', function(e) { e.target.style.borderRadius = ''; e.target.style.border = ''; e.target.style.background = ''; }); button.dataset.hoverStyled = 'true'; } }); } function styleCardHovers() { const cards = document.querySelectorAll('a.Card'); cards.forEach(card => { if (!card.dataset.hoverStyled) { // Remove existing hover styles by clearing any existing hover effects card.style.transition = 'all 0.3s ease'; card.addEventListener('mouseenter', function(e) { e.target.style.borderRadius = '16px'; e.target.style.border = '1px solid var(--border-border-1-card, #DFD9D3)'; e.target.style.background = 'var(--background-background-3-card, #FFF)'; e.target.style.boxShadow = '0 0 20px 1px rgba(0, 0, 0, 0.08)'; }); card.addEventListener('mouseleave', function(e) { e.target.style.borderRadius = ''; e.target.style.border = ''; e.target.style.background = ''; e.target.style.boxShadow = ''; }); card.dataset.hoverStyled = 'true'; } }); } function styleActiveNavLinks() { const navLinks = document.querySelectorAll('nav[aria-label="Primary navigation"] a[aria-current="page"], nav[aria-label="Primary navigation"] a.active'); navLinks.forEach(link => { if (!link.dataset.activeStyled) { link.style.color = 'var(--Text-Primary, #1D1D1D)'; link.style.fontFamily = '"IBM Plex Sans"'; link.style.fontSize = '16px'; link.style.fontStyle = 'normal'; link.style.fontWeight = '400'; link.style.lineHeight = '130%'; link.dataset.activeStyled = 'true'; } }); } function styleLoginLink() { const loginLinks = document.querySelectorAll('a.Button.Button_md.rm-Header-link.rm-Header-top-link'); let loginLink = null; // Find the login link by text content loginLinks.forEach(link => { if (link.textContent.includes('Login')) { loginLink = link; } }); if (loginLink && !loginLink.dataset.loginStyled) { function applyResponsiveStyle() { if (window.innerWidth <= 768) { // Remove background color, border, and border-radius on mobile loginLink.style.setProperty('background-color', 'transparent', 'important'); loginLink.style.setProperty('border', 'none', 'important'); loginLink.style.setProperty('border-radius', '0', 'important'); // Apply same styling as other header links on mobile loginLink.style.setProperty('color', 'var(--Text-Primary-2, rgba(29, 29, 29, 0.75))', 'important'); loginLink.style.setProperty('text-align', 'center', 'important'); loginLink.style.setProperty('font-family', '"IBM Plex Sans"', 'important'); loginLink.style.setProperty('font-size', '16px', 'important'); loginLink.style.setProperty('font-style', 'normal', 'important'); loginLink.style.setProperty('font-weight', '500', 'important'); loginLink.style.setProperty('line-height', '120%', 'important'); } else { // Remove mobile overrides on larger screens loginLink.style.removeProperty('background-color'); loginLink.style.removeProperty('border'); loginLink.style.removeProperty('border-radius'); loginLink.style.removeProperty('color'); loginLink.style.removeProperty('text-align'); loginLink.style.removeProperty('font-family'); loginLink.style.removeProperty('font-size'); loginLink.style.removeProperty('font-style'); loginLink.style.removeProperty('font-weight'); loginLink.style.removeProperty('line-height'); } } // Apply initial styling applyResponsiveStyle(); // Listen for resize events window.addEventListener('resize', applyResponsiveStyle); loginLink.dataset.loginStyled = 'true'; } } function styleTocLinks() { const tocLinks = document.querySelectorAll('nav[role="navigation"] ul.toc-list a'); tocLinks.forEach(link => { if (!link.dataset.styled) { // Apply default styling link.style.color = 'var(--Text-Primary-2, rgba(29, 29, 29, 0.75))'; link.style.fontFamily = '"IBM Plex Sans"'; link.style.fontSize = '14px'; link.style.fontStyle = 'normal'; link.style.fontWeight = '400'; link.style.lineHeight = '130%'; link.addEventListener('mouseenter', function(e) { e.target.style.color = 'var(--Text-Primary, #1D1D1D)'; }); link.addEventListener('mouseleave', function(e) { e.target.style.color = 'var(--Text-Primary-2, rgba(29, 29, 29, 0.75))'; }); link.dataset.styled = 'true'; } }); } function styleTocHeader() { const tocHeader = document.querySelector('a.tocHeader'); if (tocHeader) { // Set fixed left margin to align with child items tocHeader.style.marginLeft = '20px'; if (!tocHeader.dataset.headerStyled) { // Replace the existing icon with new SVG const existingIcon = tocHeader.querySelector('i.icon'); if (existingIcon) { const newIcon = document.createElement('div'); newIcon.innerHTML = ''; tocHeader.replaceChild(newIcon.firstChild, existingIcon); } // Update text content to proper case const textContent = tocHeader.textContent || tocHeader.innerText; if (textContent.includes('TABLE OF CONTENTS')) { tocHeader.innerHTML = tocHeader.innerHTML.replace('TABLE OF CONTENTS', 'Table of Contents'); } tocHeader.dataset.headerStyled = 'true'; } } } function replaceAllIcons() { replaceSparkleIcons(); replaceCardIcons(); replacePaginationIcons(); replaceWatchIcons(); } function createMobileLogo() { const originalLogo = document.querySelector('.rm-Logo-img.Header-logo-img3YvV4lcGKkeb'); if (originalLogo && !document.getElementById('mobile-logo-copy')) { function manageMobileLogo() { if (window.innerWidth <= 768) { // Create mobile copy if it doesn't exist if (!document.getElementById('mobile-logo-copy')) { const mobileLogo = originalLogo.cloneNode(true); mobileLogo.id = 'mobile-logo-copy'; mobileLogo.style.position = 'fixed'; mobileLogo.style.top = '16px'; mobileLogo.style.right = '16px'; mobileLogo.style.zIndex = '1000'; document.body.appendChild(mobileLogo); } } else { // Remove mobile copy on larger screens const mobileLogo = document.getElementById('mobile-logo-copy'); if (mobileLogo) { mobileLogo.remove(); } } } manageMobileLogo(); window.addEventListener('resize', manageMobileLogo); } } function applyAllStyles() { applyGlobalFont(); replaceAllIcons(); styleContentHeader(); styleHeaderLinks(); styleLoginLink(); styleSearchInput(); styleTocLinks(); styleTocHeader(); preventAskAITextHiding(); styleAskAIButtonHover(); styleCardHovers(); styleActiveNavLinks(); createMobileLogo(); } // Run on initial load document.addEventListener('DOMContentLoaded', applyAllStyles); // Observe dynamically added icons and content const observer = new MutationObserver(applyAllStyles); observer.observe(document.body, { childList: true, subtree: true }); })();