From 45893934dbac8983a2a33bd0e2c75696a24a8804 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Mon, 13 Jul 2026 13:18:48 -0500 Subject: [PATCH 01/11] style(docs): modernize prose surfaces (blockquotes, inline code, admonitions) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Continues the visual refresh started in #1344. Three additions: - Blockquotes: subtle gray background, 3px accent border-left, rounded right side. Matches the muted palette used by the new table style. - Inline code: lighter tint than pre blocks so it stops competing with fenced code, with subtle border and tighter padding. Scoped to markdown prose so OpenAPI/Explorer code surfaces are untouched. - Admonitions: thinner accent (border-left only), rounded right side, softer dark-mode background. Selectors use [class*=] prefix matching for the css-module admonition internals so they survive theme version bumps. Pure CSS — no component changes. --- src/css/custom.scss | 96 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/src/css/custom.scss b/src/css/custom.scss index 92a4e09ed..cf940b004 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -660,6 +660,102 @@ html[data-theme="dark"] .markdown { } /* END MARKDOWN TABLES */ +/* START MARKDOWN BLOCKQUOTES */ +.markdown { + blockquote { + margin: 1.5rem 0; + padding: 0.75rem 1.25rem; + background-color: var(--ifm-color-gray-100); + border-left: 3px solid var(--ifm-color-gray-400); + border-radius: 0 0.375rem 0.375rem 0; + color: var(--ifm-color-gray-700); + font-style: normal; + box-shadow: none; + } + + blockquote > :first-child { + margin-top: 0; + } + + blockquote > :last-child { + margin-bottom: 0; + } +} + +html[data-theme="dark"] .markdown { + blockquote { + background-color: var(--ifm-color-gray-900); + border-left-color: var(--ifm-color-gray-600); + color: var(--ifm-color-gray-300); + } +} +/* END MARKDOWN BLOCKQUOTES */ + +/* START INLINE CODE */ +.markdown :not(pre) > code { + background-color: var(--ifm-color-gray-100) !important; + border: 1px solid var(--ifm-color-gray-200); + border-radius: 0.25rem; + padding: 0.125rem 0.375rem; + font-size: 0.875em; + color: var(--ifm-color-emphasis-900); + vertical-align: baseline; +} + +html[data-theme="dark"] .markdown :not(pre) > code { + background-color: var(--ifm-color-gray-900) !important; + border-color: var(--ifm-color-gray-800); + color: var(--ifm-color-gray-100); +} + +.markdown a > code, +.markdown a:hover > code { + color: var(--ifm-link-color); +} +/* END INLINE CODE */ + +/* START ADMONITIONS */ +.markdown .admonition, +.markdown .theme-admonition { + border: 0; + border-left: 3px solid var(--ifm-alert-border-color); + border-radius: 0 0.375rem 0.375rem 0; + padding: 1rem 1.25rem; + margin: 1.5rem 0; + box-shadow: none; +} + +.markdown .admonition .admonition-heading, +.markdown .theme-admonition [class*="admonitionHeading_"] { + margin-bottom: 0.5rem; + font-weight: 600; + letter-spacing: 0.01em; +} + +.markdown .admonition .admonition-icon, +.markdown .theme-admonition [class*="admonitionIcon_"] { + display: inline-flex; + align-items: center; + margin-right: 0.5rem; +} + +.markdown .admonition .admonition-icon svg, +.markdown .theme-admonition [class*="admonitionIcon_"] svg { + width: 1.25rem; + height: 1.25rem; +} + +.markdown .admonition > :last-child, +.markdown .theme-admonition > :last-child { + margin-bottom: 0; +} + +html[data-theme="dark"] .markdown .admonition.alert, +html[data-theme="dark"] .markdown .theme-admonition { + background-color: var(--ifm-color-gray-900); +} +/* END ADMONITIONS */ + /* START LINK BUG */ a { &:any-link { From 2c2b1eaff9e704daf1a1b2a7c1aacb6a8bc5be4d Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Mon, 13 Jul 2026 14:04:03 -0500 Subject: [PATCH 02/11] style(docs): heading, code-block, details, and schema-summary polish MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Round two of the visual refresh. Same file (custom.scss), same theme as the previous commit — pure CSS, no component changes. Additions: - Heading scroll-margin: deep links to h1..h6 no longer hide under the sticky navbar. Uses calc(navbar-height + 1rem) for breathing room. - Heading hover anchor color polish: gray-500 idle, primary on hover, in both themes. Docusaurus already handles the opacity/reveal. - Code block title bar: dark bg + light text in both themes so it visually attaches to the (always-dark) code area instead of clashing. Rounded top corners match --ifm-code-border-radius. Uses !important to defeat CSS-module specificity from Docusaurus. - Prose
polish: border-left accent + rounded right, matching the admonition treatment. Scoped to .markdown ... :not(.theme-api-markdown *) so API-doc details keep their existing .theme-api-markdown styling (the .markdown wrapper is a shared ancestor). - Schema summary flex fix (openapi-docs 5.1.2): when the schema-depth toggle is present, the title's h3/strong was wrapping the "required" chip to a new line. Force nowrap on the header, wrap on the summary itself so the toggle drops below only when there's truly no room. --- src/css/custom.scss | 110 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) diff --git a/src/css/custom.scss b/src/css/custom.scss index cf940b004..869bf6081 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -756,6 +756,105 @@ html[data-theme="dark"] .markdown .theme-admonition { } /* END ADMONITIONS */ +/* START HEADING SCROLL MARGIN */ +.markdown h1, +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem); +} +/* END HEADING SCROLL MARGIN */ + +/* START HEADING HOVER ANCHORS */ +.markdown .hash-link { + color: var(--ifm-color-gray-500); + font-weight: 400; + margin-left: 0.375rem; + text-decoration: none; +} + +.markdown .hash-link:hover { + color: var(--ifm-color-primary); + text-decoration: none; +} + +html[data-theme="dark"] .markdown .hash-link { + color: var(--ifm-color-gray-500); +} + +html[data-theme="dark"] .markdown .hash-link:hover { + color: var(--ifm-color-primary); +} +/* END HEADING HOVER ANCHORS */ + +/* START CODE BLOCK TITLE */ +.markdown [class*="codeBlockTitle_"] { + padding: 0.5rem 1rem; + font-size: 0.8125rem; + font-weight: 600; + color: var(--ifm-color-gray-100) !important; + background-color: var(--ifm-color-gray-800); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + border-top-left-radius: var(--ifm-code-border-radius); + border-top-right-radius: var(--ifm-code-border-radius); + letter-spacing: 0.01em; + font-family: var(--ifm-font-family-monospace); +} +/* END CODE BLOCK TITLE */ + +/* START DETAILS */ +/* Excludes API-doc details (.theme-api-markdown) which have their own styling at the API markdown rules further down. */ +.markdown details[class*="details_"]:not(.theme-api-markdown *) { + background-color: var(--ifm-color-gray-100) !important; + border-top: 0 !important; + border-right: 0 !important; + border-bottom: 0 !important; + border-left: 3px solid var(--ifm-color-gray-400) !important; + border-radius: 0 0.375rem 0.375rem 0 !important; + padding: 0.75rem 1.25rem !important; + margin: 1.5rem 0 !important; + box-shadow: none !important; + --docusaurus-details-decoration-color: var(--ifm-color-gray-600); +} + +.markdown details[class*="details_"]:not(.theme-api-markdown *) > summary { + cursor: pointer; + font-weight: 600; + color: var(--ifm-color-gray-800); +} + +.markdown + details[class*="details_"]:not(.theme-api-markdown *) + > summary:hover { + color: var(--ifm-color-primary); +} + +.markdown + details[class*="details_"]:not(.theme-api-markdown *) + > div[class*="collapsibleContent_"] { + margin-top: 0.75rem !important; + padding-top: 0 !important; + border-top: 0 !important; +} + +html[data-theme="dark"] + .markdown + details[class*="details_"]:not(.theme-api-markdown *) { + background-color: var(--ifm-color-gray-900) !important; + border-left-color: var(--ifm-color-gray-600) !important; + --docusaurus-details-decoration-color: var(--ifm-color-gray-400); +} + +html[data-theme="dark"] + .markdown + details[class*="details_"]:not(.theme-api-markdown *) + > summary { + color: var(--ifm-color-gray-100); +} +/* END DETAILS */ + /* START LINK BUG */ a { &:any-link { @@ -767,6 +866,17 @@ a { /* END LINK BUG */ /* START OPENAPI */ +/* Keep the title + "required" chip on one line when the schema-depth control is present. */ +.openapi-markdown__details-summary--with-control { + flex-wrap: wrap !important; + + > h3, + > strong { + flex-wrap: nowrap !important; + white-space: nowrap; + } +} + .api-method { > .menu__link { align-items: center; From ca088eb72ad6b07535d77e923feb6f64b735e013 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Mon, 13 Jul 2026 16:53:32 -0500 Subject: [PATCH 03/11] style(docs): modernize Algolia DocSearch modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ride on top of DocSearch's own --docsearch-* CSS variables so the modal, searchbox, footer, and kbd keys all track site tokens (--ifm-color-*, --ifm-background-color) in both themes instead of raw hex values. - Modal background uses --ifm-background-color in both themes; overflow: hidden clips the searchbox/footer to the rounded corners so they no longer bleed past the border-radius. - Dark-mode overrides scoped to html[data-theme="dark"] .DocSearch to match the specificity of DocSearch's own dark block; a :root-level selector loses to it. - Selected result uses a neutral emphasis-200 tint (gray in both themes) instead of a full primary-color fill — subtler, closer to macOS Spotlight / Raycast conventions. Matched-text stays primary blue so hits are still easy to spot. - Backdrop gets a subtle blur; navbar trigger button picks up the same rounded/bordered treatment as the search input. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.scss | 111 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) diff --git a/src/css/custom.scss b/src/css/custom.scss index 869bf6081..16cb79ef3 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1015,6 +1015,117 @@ a { } /* END 404 PAGE */ +/* START DOCSEARCH - Algolia modal + trigger button + Uses DocSearch's own --docsearch-* CSS variables so we ride on top of + its theming API rather than fighting individual selectors. */ +:root { + --docsearch-primary-color: var(--ifm-color-primary); + --docsearch-highlight-color: var(--ifm-color-primary); + --docsearch-text-color: var(--ifm-color-emphasis-900); + --docsearch-muted-color: var(--ifm-color-emphasis-600); + --docsearch-icon-color: var(--ifm-color-emphasis-600); + --docsearch-logo-color: var(--ifm-color-primary); + --docsearch-container-background: rgba(15, 23, 42, 0.5); + --docsearch-modal-background: var(--ifm-background-color); + --docsearch-modal-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08); + --docsearch-searchbox-background: var(--ifm-color-emphasis-100); + --docsearch-searchbox-focus-background: var(--ifm-background-color); + --docsearch-hit-color: var(--ifm-color-emphasis-800); + --docsearch-hit-shadow: none; + --docsearch-hit-background: transparent; + --docsearch-hit-active-color: var(--ifm-color-emphasis-900); + --docsearch-footer-background: var(--ifm-color-emphasis-100); + --docsearch-footer-shadow: 0 -1px 0 var(--ifm-color-emphasis-200); + --docsearch-key-gradient: linear-gradient( + -225deg, + var(--ifm-color-emphasis-200), + var(--ifm-color-emphasis-100) + ); + --docsearch-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); +} + +/* DocSearch's own dark-theme block scopes overrides to `.DocSearch`, so ours + must match that specificity or the defaults will win. */ +html[data-theme="dark"] .DocSearch { + --docsearch-highlight-color: var(--ifm-color-primary); + --docsearch-text-color: var(--ifm-color-emphasis-900); + --docsearch-muted-color: var(--ifm-color-emphasis-500); + --docsearch-icon-color: var(--ifm-color-emphasis-500); + --docsearch-logo-color: var(--ifm-color-primary); + --docsearch-container-background: rgba(0, 0, 0, 0.6); + --docsearch-modal-background: var(--ifm-background-color); + --docsearch-modal-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); + --docsearch-searchbox-background: var(--ifm-color-emphasis-100); + --docsearch-searchbox-focus-background: var(--ifm-background-color); + --docsearch-hit-color: var(--ifm-color-emphasis-800); + --docsearch-hit-shadow: none; + --docsearch-hit-background: transparent; + --docsearch-hit-active-color: var(--ifm-color-emphasis-900); + --docsearch-footer-background: var(--ifm-color-emphasis-100); + --docsearch-footer-shadow: 0 -1px 0 var(--ifm-color-emphasis-200); + --docsearch-key-gradient: linear-gradient( + -225deg, + var(--ifm-color-emphasis-200), + var(--ifm-color-emphasis-100) + ); + --docsearch-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + +/* Container backdrop: subtle blur for a modern feel */ +.DocSearch-Container { + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); +} + +/* Modal shape matches the card treatment. overflow: hidden clips the + searchbox and footer to the rounded corners; without it those children + extend past the border-radius and look like the corners are cut. */ +.DocSearch-Modal { + border-radius: 0.75rem !important; + border: 1px solid var(--ifm-color-emphasis-200); + overflow: hidden; +} + +html[data-theme="dark"] .DocSearch-Modal { + border-color: var(--ifm-color-emphasis-300); +} + +/* Result rows: rounded hover + selected state uses site primary */ +.DocSearch-Hit a { + border-radius: 0.5rem; +} + +.DocSearch .DocSearch-Hit[aria-selected="true"] a { + background-color: var(--ifm-color-emphasis-200) !important; +} + +/* Kbd keys — match the modernized aesthetic */ +.DocSearch-Commands-Key, +.DocSearch-Button-Key { + border-radius: 0.25rem !important; + border: 1px solid var(--ifm-color-emphasis-300) !important; + padding: 0 0.35rem !important; + font-weight: 600; +} + +/* Trigger button in the navbar */ +.DocSearch-Button { + border-radius: 0.5rem; + border: 1px solid var(--ifm-color-emphasis-200); + transition: + background-color 150ms ease, + border-color 150ms ease; + + &:hover { + box-shadow: none; + border-color: var(--ifm-color-emphasis-300); + background-color: var(--ifm-color-emphasis-100); + } +} +/* END DOCSEARCH */ + /* START EDIT THIS PAGE */ .theme-edit-this-page { display: flex; From 8d42fc87be60a98942dd29a879559eb78684a620 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Mon, 13 Jul 2026 17:04:42 -0500 Subject: [PATCH 04/11] style(docs): modernize tabs component to primary-tinted pill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bring code-language tabs and MIME tabs in line with the pill-and-tint treatment now used by sidebar, TOC, and breadcrumbs so the active state reads consistently across every navigation surface. - Every .tabs__item gets rounded corners, a muted default color, and a smooth emphasis-100 hover tint. - Active tab: primary-blue text + soft primary-tinted bg (color-mix), dropping the default bottom-border underline in favor of the pill. - MIME tabs (openapi-docs request-body variants) switched from the CSS-module-hashed selector to a [class*="mimeTabActive_"] prefix match — survives openapi-docs version bumps. - Response tabs (200/400/etc.) left alone; they already use a primary-outlined pattern that reads well. - Dropped the dark-mode raw gray-800 !important overrides for tabs and MIME tabs — the color-mix + primary vars handle both themes. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.scss | 57 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 16cb79ef3..1796919a1 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -179,16 +179,6 @@ html[data-theme="dark"] { filter: invert(1); } - /* START CODE TABS */ - .tabs__item--active { - background-color: var(--ifm-color-gray-800) !important; - } - - /* START MIME TABS */ - .mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module { - background-color: var(--ifm-color-gray-800) !important; - } - /* START SIDEBAR COLORS */ .theme-doc-sidebar-container { button[class*="collapseSidebarButton_"], @@ -308,9 +298,43 @@ html[data-theme="dark"] { background-color: #ffffff; } -/* START CODE TABS */ +/* START CODE TABS - pill-style tabs matching sidebar/TOC active treatment */ +.tabs { + gap: 0.25rem; +} + +.tabs__item { + border-radius: 0.375rem; + border-bottom-width: 0; + padding: 0.4rem 0.85rem; + color: var(--ifm-color-emphasis-700); + transition: + color 150ms ease, + background-color 150ms ease; + + &:hover { + background-color: var(--ifm-color-emphasis-100); + border-bottom-color: transparent; + color: var(--ifm-color-emphasis-900); + } +} + .tabs__item--active { - background-color: var(--ifm-color-gray-200) !important; + color: var(--ifm-color-primary) !important; + background-color: color-mix( + in srgb, + var(--ifm-color-primary), + transparent 88% + ) !important; + border-bottom-color: transparent !important; + + &:hover { + background-color: color-mix( + in srgb, + var(--ifm-color-primary), + transparent 84% + ) !important; + } } .responseTabsListContainer_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module { @@ -336,8 +360,13 @@ html[data-theme="dark"] { /* END CODE TABS */ /* START MIME TABS */ -.mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module { - background-color: var(--ifm-color-gray-200) !important; +[class*="mimeTabActive_"] { + color: var(--ifm-color-primary) !important; + background-color: color-mix( + in srgb, + var(--ifm-color-primary), + transparent 88% + ) !important; } /* END MIME TABS */ From 1953dc82fbadc1e877d9b5d230bff687a36f3ee4 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Mon, 13 Jul 2026 17:30:59 -0500 Subject: [PATCH 05/11] style(docs): polish 404 page result cards + inline search Frame the inline DocSearch trigger so it doesn't render as a bare full-width bar mid-sentence, and turn the algolia suggestion rows into cards using the shared --pan-card-* tokens for hover consistency with pagination and the homepage. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.scss | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 1796919a1..78f79c3f0 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1035,12 +1035,39 @@ a { /* END VERSION BADGES */ /* START 404 PAGE */ -.result { - padding: 0 var(--ifm-spacing-horizontal); +/* The inline DocSearch trigger inside the "use our search" sentence. + The DocSearch button is normally full-width; constrain and frame it here. */ +.dummy-search { + vertical-align: middle; + margin: 0 0.25rem; } - .dummy-search > button { pointer-events: none; + padding: 0.4rem 0.75rem; + border-radius: 0.375rem; +} + +/* Suggested-result cards under "We found some pages that might match". */ +.result { + margin: 0.5rem 0; + + a { + display: block; + padding: 0.75rem 1rem; + border: var(--pan-card-border); + border-radius: var(--pan-card-radius); + box-shadow: var(--pan-card-shadow); + color: var(--ifm-color-emphasis-800); + transition: var(--pan-card-transition); + text-decoration: none; + + &:hover { + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); + box-shadow: var(--pan-card-shadow-hover); + transform: translateY(var(--pan-card-hover-lift)); + } + } } /* END 404 PAGE */ From c48eb1a415aa0cb824ded88001629a85c9e6c90b Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Mon, 13 Jul 2026 18:01:10 -0500 Subject: [PATCH 06/11] style(docs): modernize footer chip row and floating island MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Unify the doc footer's Copy / Edit / Report links as sibling pill chips using the pan-card border token and primary-tint hover, and switch to flex-wrap with gap so labels never break mid-word. Below the 996px mobile breakpoint the chips collapse to 36px circular icon-only buttons so all three sit on one row on tablet/phone. The floating island (visible when the footer scrolls off-screen) is rewritten as a single glass pill — content-driven width, backdrop blur, per-icon circular hover targets in primary tint. All three legacy width variants now share the same treatment. Drop the empty layout column in the footer so the chip row can flex across the full width, and neutralize the base styles of the Copy and Issue components so the containing surface (chip row or island) controls color and spacing. Co-Authored-By: Claude Opus 4.7 --- src/components/CopyButton/styles.css | 65 +++------ src/components/FloatingIsland/styles.css | 156 +++++++++++++-------- src/components/Issue/styles.css | 12 +- src/css/custom.scss | 96 +++++++++++++ src/theme/DocItem/Footer/index.tsx | 4 +- src/theme/DocItem/Footer/styles.module.css | 16 +-- 6 files changed, 231 insertions(+), 118 deletions(-) diff --git a/src/components/CopyButton/styles.css b/src/components/CopyButton/styles.css index 679afd19d..96217a1bd 100644 --- a/src/components/CopyButton/styles.css +++ b/src/components/CopyButton/styles.css @@ -1,71 +1,48 @@ +/* CopyButton — base styles are intentionally neutral so the containing + surface (footer chip row or floating island) controls color and spacing. */ .copy-markdown-btn { position: relative; + display: inline-flex; + align-items: center; border: none; - flex-direction: row; - display: flex; background: none; - align-items: center; cursor: pointer; - position: relative; outline: none; - transition: all 0.3s ease; -} - -.sparkles { - width: 20px; - height: 20px; -} - -.sparkles.is-visible { - fill: var(--ifm-link-color); - margin-right: 0.3rem; -} - -html[data-theme="dark"] .sparkles { - fill: #ffffff; + color: inherit; + transition: color 0.3s ease; } .copy-markdown-btn__text { - color: var(--ifm-link-color); + color: inherit; transition: opacity 0.3s ease; - margin-left: 0.3rem; - font-size: 1rem; -} - -html[data-theme="dark"] .copy-markdown-btn__text { - color: var(--ifm-color-gray-100); -} - -.copy-markdown-btn:hover { - cursor: pointer; + font-size: inherit; } .icon-container { position: relative; - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; width: 16px; height: 16px; pointer-events: none; } -.icon-container.not-visible { - margin-right: 0.5rem; +.sparkles { + width: 16px; + height: 16px; + fill: currentColor; + transition: opacity 0.3s ease; } .copy-markdown-btn i { - color: var(--ifm-color-secondary); + color: currentColor; position: absolute; - top: 0; - left: 0; - transition: opacity 0.3s ease; -} - -.copy-markdown-btn .sparkles { - opacity: 1; -} - -.copy-markdown-btn i.fa-check { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); opacity: 0; + transition: opacity 0.3s ease; } .copy-markdown-btn.copied .sparkles { diff --git a/src/components/FloatingIsland/styles.css b/src/components/FloatingIsland/styles.css index 83c0dd2d8..ee5868751 100644 --- a/src/components/FloatingIsland/styles.css +++ b/src/components/FloatingIsland/styles.css @@ -1,67 +1,111 @@ -.floating-island-container { - height: 40px; - width: 150px; - align-items: center; - display: flex; - border-radius: 20px; - background-color: var(--ifm-color-emphasis-200); - box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px; - z-index: calc(var(--ifm-z-index-fixed) - 1); +/* Floating action island — appears when the doc footer scrolls off-screen. + One shared treatment for all three width variants; content sizes the pill. */ +.floating-island-container, +.floating-island-container-single, +.floating-island-container-double { position: fixed; bottom: 1.3rem; - right: 0; - left: 0; - margin-left: auto; - margin-right: auto; - justify-content: space-between; - padding-left: 1.5rem; - padding-right: 1.5rem; - opacity: 1; + left: 50%; + transform: translateX(-50%); + z-index: calc(var(--ifm-z-index-fixed) - 1); + + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.35rem 0.75rem; + width: auto; + height: auto; + + background-color: color-mix( + in srgb, + var(--ifm-background-surface-color), + transparent 20% + ); + backdrop-filter: blur(12px) saturate(180%); + -webkit-backdrop-filter: blur(12px) saturate(180%); + border: var(--pan-card-border); + border-radius: 999px; + box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.18); } -.floating-island-container-single { - height: 40px; - width: 130px; +.floating-island-divider { + width: 1px; + height: 1rem; + background-color: var(--ifm-color-emphasis-300); + border: 0; + flex-shrink: 0; +} + +/* Icon buttons inside the island */ +.floating-island-container a, +.floating-island-container-single a, +.floating-island-container-double a { + display: inline-flex; align-items: center; - display: flex; - border-radius: 20px; - background-color: var(--ifm-color-emphasis-200); - box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px; - z-index: calc(var(--ifm-z-index-fixed) - 1); - position: fixed; - bottom: 1.3rem; - right: 0; - left: 0; - margin-left: auto; - margin-right: auto; justify-content: center; - padding-left: 1.5rem; - padding-right: 1.5rem; - opacity: 1; + width: 32px; + height: 32px; + padding: 0; + border-radius: 50%; + color: var(--ifm-color-emphasis-700); + text-decoration: none; + transition: + background-color 150ms ease, + color 150ms ease; } -.floating-island-container-double { - height: 40px; - width: 180px; - align-items: center; - display: flex; - border-radius: 20px; - background-color: var(--ifm-color-emphasis-200); - box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px; - z-index: calc(var(--ifm-z-index-fixed) - 1); - position: fixed; - bottom: 1.3rem; - right: 0; - left: 0; - margin-left: auto; - margin-right: auto; - justify-content: space-between; - padding-left: 1.5rem; - padding-right: 1.5rem; - opacity: 1; +.floating-island-container a:hover, +.floating-island-container a:focus-visible, +.floating-island-container-single a:hover, +.floating-island-container-single a:focus-visible, +.floating-island-container-double a:hover, +.floating-island-container-double a:focus-visible { + background-color: color-mix( + in srgb, + var(--ifm-color-primary), + transparent 88% + ); + color: var(--ifm-color-primary); + text-decoration: none; } -.floating-island-divider { - border-right: 1px solid var(--ifm-color-emphasis-300); - height: 1rem; +.floating-island-container a svg, +.floating-island-container-single a svg, +.floating-island-container-double a svg { + width: 16px; + height: 16px; + fill: currentColor; +} + +.floating-island-container a i, +.floating-island-container-single a i, +.floating-island-container-double a i { + color: inherit; + margin: 0; + font-size: 14px; +} + +/* Icon-only mode used inside the island: neutralize CopyButton's default + sparkle offset and let the flex-centered chip control positioning. */ +.floating-island-container .copy-markdown-btn .icon-container, +.floating-island-container-single .copy-markdown-btn .icon-container, +.floating-island-container-double .copy-markdown-btn .icon-container { + margin-right: 0; + width: 16px; + height: 16px; +} + +.floating-island-container .copy-markdown-btn .sparkles, +.floating-island-container-single .copy-markdown-btn .sparkles, +.floating-island-container-double .copy-markdown-btn .sparkles { + margin-right: 0; + fill: currentColor; +} + +.floating-island-container .issue-button > i, +.floating-island-container-single .issue-button > i, +.floating-island-container-double .issue-button > i { + margin-left: 0; + width: auto; + height: auto; } diff --git a/src/components/Issue/styles.css b/src/components/Issue/styles.css index 89c653518..21ce2ff7c 100644 --- a/src/components/Issue/styles.css +++ b/src/components/Issue/styles.css @@ -1,6 +1,8 @@ -.issue-button > i { - color: var(--ifm-font-color-base); - width: 20px; - height: 20px; - margin-left: 0.5rem; +/* Issue button — neutral defaults; containing surface controls color/spacing. */ +.issue-button { + color: inherit; +} + +.issue-button i { + color: inherit; } diff --git a/src/css/custom.scss b/src/css/custom.scss index 78f79c3f0..4c50a79d0 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -594,6 +594,102 @@ html[data-theme="dark"] { } /* END SIDEBAR */ +/* START DOC FOOTER META (Copy / Edit / Report chips) */ +.theme-doc-footer-edit-meta-row { + a { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.4rem 0.85rem; + border: var(--pan-card-border); + border-radius: 999px; + background-color: transparent; + color: var(--ifm-color-emphasis-700); + font-size: 0.8125rem; + line-height: 1; + white-space: nowrap; + text-decoration: none; + cursor: pointer; + transition: + border-color 150ms ease, + background-color 150ms ease, + color 150ms ease; + + &:hover, + &:focus-visible { + border-color: var(--ifm-color-primary); + background-color: color-mix( + in srgb, + var(--ifm-color-primary), + transparent 92% + ); + color: var(--ifm-color-primary); + text-decoration: none; + } + + svg { + width: 16px; + height: 16px; + fill: currentColor; + } + + /* Issue button: icon+text wrapped in — make span the flex row */ + &.issue-button > span { + display: inline-flex; + align-items: center; + gap: 0.4rem; + } + &.issue-button i { + font-size: 0.875rem; + color: inherit; + } + + /* Copy button: normalize its internal spacing so the chip stays tidy */ + &.copy-markdown-btn { + .icon-container { + width: 16px; + height: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + } + .sparkles { + width: 16px; + height: 16px; + margin-right: 0; + fill: currentColor; + } + .copy-markdown-btn__text { + color: inherit; + margin-left: 0; + font-size: inherit; + } + i.fa-check { + color: inherit; + font-size: 14px !important; + } + } + } + + /* Narrow widths: collapse to icon-only circular chips so all three fit + on one row regardless of viewport. */ + @media (max-width: 996px) { + a { + width: 36px; + height: 36px; + padding: 0; + justify-content: center; + gap: 0; + font-size: 0; + + &.copy-markdown-btn .copy-markdown-btn__text { + display: none; + } + } + } +} +/* END DOC FOOTER META */ + /* START TOC */ .table-of-contents { margin-left: 0; diff --git a/src/theme/DocItem/Footer/index.tsx b/src/theme/DocItem/Footer/index.tsx index 9b3889e66..2301f34a2 100644 --- a/src/theme/DocItem/Footer/index.tsx +++ b/src/theme/DocItem/Footer/index.tsx @@ -45,9 +45,7 @@ function EditMetaRow({ return ( <>
-
-
-
+
{editUrl && } diff --git a/src/theme/DocItem/Footer/styles.module.css b/src/theme/DocItem/Footer/styles.module.css index 763b0ff57..255f7d6dc 100644 --- a/src/theme/DocItem/Footer/styles.module.css +++ b/src/theme/DocItem/Footer/styles.module.css @@ -1,4 +1,5 @@ .docFooterEditMetaRow { + display: flex; justify-content: flex-end; } @@ -10,10 +11,11 @@ .docFooterEditMetaRowItemRight { display: flex; -} - -.docFooterEditMetaRowItemRight a { - margin-right: 1.25rem; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: flex-end; + align-items: center; + width: 100%; } @media (min-width: 997px) { @@ -21,9 +23,3 @@ text-align: right; } } - -@media (max-width: 996px) { - .docFooterEditMetaRowItem { - flex-basis: content; - } -} From e97697efb172ef9eecaad2d96ac3cac8a4efab29 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Wed, 15 Jul 2026 13:29:48 -0500 Subject: [PATCH 07/11] style(theme): add --pan-card-* tokens consumed by footer chips and 404 cards The footer chip row and 404 result cards reference --pan-card-border, --pan-card-radius, --pan-card-shadow, --pan-card-shadow-hover, --pan-card-transition, and --pan-card-hover-lift. Define them in :root with a dark-theme override that strengthens the border and deepens the shadow so those surfaces render with the intended elevation. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/css/custom.scss b/src/css/custom.scss index 4c50a79d0..42c5b6623 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -127,6 +127,17 @@ html:has(body):has(div):has(div):has(.homepage) { --ifm-container-width-xl: calc(1600px - var(--doc-sidebar-width)); + /* START CARD */ + --pan-card-radius: 0.5rem; + --pan-card-border: 1px solid var(--ifm-color-emphasis-200); + --pan-card-shadow: + 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06); + --pan-card-shadow-hover: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --pan-card-transition: 200ms ease; + --pan-card-hover-lift: -2px; + /* END CARD */ + /* START NAVBAR LOGOS */ --ifm-github-logo: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); --ifm-medium-logo: url('data:image/svg+xml;utf8,'); @@ -292,6 +303,13 @@ html[data-theme="dark"] { .homepage-main { background-color: #000000; } + + /* START CARD */ + --pan-card-border: 1px solid var(--ifm-color-emphasis-300); + --pan-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); + --pan-card-shadow-hover: + 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); + /* END CARD */ } .homepage-main { From 0199e79a7dd6713ea208c977a29ad10ceac1f82d Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Wed, 15 Jul 2026 14:00:42 -0500 Subject: [PATCH 08/11] fix(theme): align nested sidebar border to caret visual center MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The nested .menu__list used padding-left: 1.1rem, so the child border sat ~0.15rem left of the parent chevron's visual center (chevron pseudo is 1.5rem wide with 1rem of left padding, background-centered → center lands at ~1.25rem from the item edge). Derive the padding from --ifm-menu-link-padding-horizontal so the border tracks any future change to the menu padding token instead of drifting again. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 42c5b6623..7ce2df15c 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -534,7 +534,7 @@ html[data-theme="dark"] { .theme-doc-sidebar-menu { .theme-doc-sidebar-item-category { .menu__list-item-collapsible + .menu__list { - padding-left: 1.1rem; + padding-left: calc(var(--ifm-menu-link-padding-horizontal) + 0.25rem); } .theme-doc-sidebar-item-link { From 28b5350efd4ec11aa74e917954cce09430801e51 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Wed, 15 Jul 2026 14:28:46 -0500 Subject: [PATCH 09/11] Revert "fix(theme): align nested sidebar border to caret visual center" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts the calc(var + 0.25rem) attempt. Infima's default --ifm-menu-link-padding-horizontal is 0.75rem, so the calc resolved to 1.0rem — smaller than the original 1.1rem, shifting the border further left instead of right. Restore the prior value; a proper fix needs a browser to verify the target. --- src/css/custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 7ce2df15c..42c5b6623 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -534,7 +534,7 @@ html[data-theme="dark"] { .theme-doc-sidebar-menu { .theme-doc-sidebar-item-category { .menu__list-item-collapsible + .menu__list { - padding-left: calc(var(--ifm-menu-link-padding-horizontal) + 0.25rem); + padding-left: 1.1rem; } .theme-doc-sidebar-item-link { From a8a9dbcfcbee754502bfb77fd702719c9687fc2f Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Wed, 15 Jul 2026 14:51:41 -0500 Subject: [PATCH 10/11] fix(theme): align nested sidebar border to parent caret center MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nest padding was 1.1rem, which placed the child border a few pixels left of the parent caret's visible chevron center. 1.4rem lines them up. Value chosen empirically — the exact number depends on box-sizing, the chevron pseudo's background-position, and the outer menu list padding cascade, so a calc() from any single token would be misleading. --- src/css/custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 42c5b6623..21ac6dc73 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -534,7 +534,7 @@ html[data-theme="dark"] { .theme-doc-sidebar-menu { .theme-doc-sidebar-item-category { .menu__list-item-collapsible + .menu__list { - padding-left: 1.1rem; + padding-left: 1.4rem; } .theme-doc-sidebar-item-link { From 9ba163f93051dd8055fc2541d24745caad605ec4 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Wed, 15 Jul 2026 15:03:02 -0500 Subject: [PATCH 11/11] Revert "fix(theme): align nested sidebar border to parent caret center" This reverts commit a8a9dbcfcbee754502bfb77fd702719c9687fc2f. --- src/css/custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.scss b/src/css/custom.scss index 21ac6dc73..42c5b6623 100755 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -534,7 +534,7 @@ html[data-theme="dark"] { .theme-doc-sidebar-menu { .theme-doc-sidebar-item-category { .menu__list-item-collapsible + .menu__list { - padding-left: 1.4rem; + padding-left: 1.1rem; } .theme-doc-sidebar-item-link {