#kapa-widget-container { z-index: 10000 !important; position: absolute !important; } .mantine-Modal-root { z-index: 10000; position: absolute; } #kapa-widget-container figure { padding: 0 !important; } .mantine-Modal-root figure { padding: 0 !important; } /* RTD Flyout */ .rst-versions { z-index: 10001 !important; /* Set to 10001 to avoid overlap with kapa */ } /* Override the default PyData sphinx theme announcement styling */ .bd-header-announcement { background-color: var(--pst-color-surface) !important; border: none !important; padding: 4px !important; min-height: 0 !important; height: auto !important; } .bd-header-announcement__content { background-color: var(--pst-color-surface) !important; color: var(--pst-color-text-base) !important; padding: 0 !important; } .bd-header-announcement__content > div { padding: 4px 8px !important; line-height: 1 !important; } .bd-header-announcement a { color: var(--pst-color-link) !important; } html[data-theme="light"] { --pst-color-link: #176de8; --pst-color-primary: #176de8; --pst-color-secondary: var(--pst-color-primary); --pst-color-text-base: #4c4c4d; --logo-text-color: #0E2E65; } html[data-theme="dark"] { --pst-color-link: #176de8; --pst-color-primary: #176de8; --pst-color-secondary: var(--pst-color-primary); --pst-color-text-base: #d8d8d8; --logo-text-color: #D8D8D8; .bd-sidebar::-webkit-scrollbar { width: 6px; background-color: #2e2e2e; } .bd-sidebar::-webkit-scrollbar-thumb { background-color: #565656; border-radius: 6px; } .bd-sidebar::-webkit-scrollbar-thumb:hover { background-color: #6f6f6f; } /* Common hidden scrollbar when not hovered */ .bd-sidebar:not(:hover) { -ms-overflow-style: none; } .bd-sidebar:not(:hover)::-webkit-scrollbar { background: var(--pst-color-background); } .bd-sidebar:not(:hover)::-webkit-scrollbar-thumb { background: var(--pst-color-background); } } /* Light mode scrollbar styles */ .bd-sidebar::-webkit-scrollbar { width: 6px; background-color: #f0f0f0; } .bd-sidebar::-webkit-scrollbar-thumb { background-color: #c1c1c1; /* rounded corners */ border-radius: 6px; } .bd-sidebar::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } /* Common hidden scrollbar when not hovered */ .bd-sidebar:not(:hover) { -ms-overflow-style: none; } .bd-sidebar:not(:hover)::-webkit-scrollbar { background: var(--pst-color-background); } .bd-sidebar:not(:hover)::-webkit-scrollbar-thumb { background: var(--pst-color-background); } /* Avoid the border of the search box when click on it */ .form-control:focus,:focus-visible { border: none; box-shadow: none; outline: none; background-color: var(--pst-color-background); color: var(--pst-color-text-muted); } /* Display a "New" icon for new items (custom.js) */ .new-item::after { content: "New"; display: inline-block; color: white; /* Keeps the text color white for contrast */ font-size: 12px; /* Adjusted for a smaller font size */ background-color: #0d6efd; /* Bootstrap's 'primary' blue color for Bootstrap 5 */ border-radius: 2px; margin: 0px 0px 0px 4px; padding: 2px 5px; /* Reduced padding for a more compact label */ margin-left: 6px; /* Space between the text and the label */ vertical-align: text-bottom; line-height: 1; /* Adjust line height to ensure vertical alignment */ } /* External sidebar links flagged as new: the theme renders its external-link icon via the same ::after pseudo-element (nav.bd-links li>a.reference.external:after, which out-specifies .new-item::after), so re-assert the badge at higher specificity to replace the icon. */ nav.bd-links li > a.reference.external.new-item::after { content: "New"; font: 12px/1 var(--pst-font-family-base); margin-left: 6px; } .navbar { --bs-navbar-nav-link-padding-x: 1rem; } .navbar-brand.logo>svg { width: 120px; } .navbar-brand.logo>svg .cls-6 { fill: var(--pst-color-text-base); } /********************************************* * Footer - content * *********************************************/ .footer { font-size: var(--sbt-font-size-small-1); &.bd-footer-content { display: flex; flex-wrap: wrap; padding: 15px; border-top: 1px solid #ccc; font-size: 85%; .bd-footer-content__inner { padding-left: 0px; p { margin-bottom: 0px; } } } } .bd-header .navbar-nav li a.nav-link:hover { text-decoration: none; } /* Add transparent underline for the other tabs that are not active to avoid active tab to be moved up. */ .nav-link { border-bottom: none; } .bd-header .navbar-nav>.current>.nav-link { border-bottom: none; } /* Avoid layout shifts in the right-hand navbar block during the first ~150ms of page load. Four post-paint events would otherwise reflow the search button + icons + kbd shortcut and visibly jiggle Slack/Twitter/GitHub: (a) The pydata theme's inline

script sets html[data-mode] to "" when localStorage has no "mode" entry. The theme CSS only shows a theme-switch icon when data-mode equals light/dark/auto, so the button collapses to ~2px until the theme JS resets data-mode to "auto" post-DCL — at which point the auto icon snaps in and pushes the icon links right by ~32px. (b) On Mac, the same theme JS swaps the search-button modifier kbd from "Ctrl" to "⌘", which is ~22px narrower and shrinks the search button. (c) FontAwesome's all.min.js replaces placeholders with inline elements whose intrinsic widths don't match the 's ::before fallback-font codepoint glyph — so the magnifying glass icon resizes when the JS replacement runs. (d) The pydata theme renders the navbar external-link icon ("Case Studies", "Blog") via .nav-link.nav-external::after whose content is a PUA codepoint rendered in the FA font; while FA is still loading the codepoint renders in a fallback glyph with different metrics, causing a few-px shift on font-ready. Fix each by reserving the final width up-front. */ /* (a) */ html[data-mode=""] .theme-switch-button span[data-mode=auto] { display: flex; } /* (b) Strip the kbd shortcut from the navbar search button — pydata's post-DCL "Ctrl"→"⌘" swap on Mac would otherwise shrink the search button by ~22px. Pin the button to its original width with the icon and "Search" label centered together. The keyboard binding still works; pydata's Cmd+K / Ctrl+K listener doesn't depend on the indicator. Scoped to the navbar so the hidden search modal in .bd-search is left alone. */ .navbar-header-items__end .search-button__kbd-shortcut, .navbar-persistent--mobile .search-button__kbd-shortcut { display: none; } .navbar-header-items__end .search-button-field, .navbar-persistent--mobile .search-button-field { min-width: 183px; justify-content: center; } /* Match the visual weight of the navbar nav-links — the pill background makes the default 16px feel heavier than its peers. */ .navbar-header-items__end .search-button-field .search-button__default-text, .navbar-persistent--mobile .search-button-field .search-button__default-text { font-size: 0.875rem; } /* (c) Lock every FontAwesome icon to a fixed-width box regardless of whether it's currently the placeholder (rendered via the FA webfont's ::before codepoint) or the inline that FA's all.min.js inserts to replace it. The two have different intrinsic widths (e.g., fa-list =19px vs =14px), so without this lock text next to the icon shifts when the JS replacement runs. Applies site-wide because the same flicker is visible in the secondary sidebar ("On this page", "Edit on GitHub") as well as the navbar. */ i[class*="fa-"]:not(.fa-stack-1x):not(.fa-stack-2x), svg.svg-inline--fa:not(.fa-stack-1x):not(.fa-stack-2x) { display: inline-block; width: 1em; text-align: center; } i[class*="fa-"].fa-lg, svg.svg-inline--fa.fa-lg { width: 1.25em; } /* (d) */ .nav-link.nav-external::after { display: inline-block; width: 0.75em; text-align: center; } /* Index page hero title — shrunk slightly so the long title fits beside the copy-page button on a full-width laptop viewport. */ .hero-title h1 { font-size: 2.1rem; } /* Copy page as Markdown — split button next to title */ .bd-title-row { display: flex; align-items: flex-end; gap: 0.6rem; /* Absorb the h1's natural margin-bottom onto the row so the button aligns with the title and the gap to the following content is preserved. */ margin-bottom: 1.05rem; } .bd-title-row > h1 { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } .copy-page-wrapper { position: relative; /* anchor for the dropdown below */ flex-shrink: 0; z-index: 10; } .copy-page-split { display: inline-flex; align-items: stretch; border: 1px solid var(--pst-color-border); border-radius: 6px; background: var(--pst-color-background); overflow: hidden; } .copy-page-main, .copy-page-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; cursor: pointer; color: var(--pst-color-text-muted); font-size: 0.72rem; font-family: inherit; transition: background 0.12s, color 0.12s; } .copy-page-main { padding: 0.3rem 0.5rem; } .copy-page-toggle { padding: 0.3rem 0.4rem; border-left: 1px solid var(--pst-color-border); } .copy-page-main:hover, .copy-page-toggle:hover { background: var(--pst-color-surface); color: var(--pst-color-text-base); } .copy-page-success .copy-page-main { color: var(--pst-color-success, #28a745); } /* Dropdown */ .copy-page-dropdown { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 210px; background: var(--pst-color-background); border: 1px solid var(--pst-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 4px 0; z-index: 100; } .copy-page-dropdown.open { display: block; } .copy-page-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.75rem; background: none; border: none; cursor: pointer; color: var(--pst-color-text-base); font-size: 0.82rem; font-family: inherit; text-align: left; white-space: nowrap; transition: background 0.12s; } .copy-page-item:hover { background: var(--pst-color-surface); } /* Hide on very small screens */ @media (max-width: 480px) { .copy-page-wrapper { display: none; } } /* Assuming your breakpoints are defined in pixels */ @media (min-width: 959.98px) { .bd-sidebar-primary { width: 20% !important; } }