pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-24 00:39:35 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
feat/a2a-message-send
langflow/docs/css/sidebar.css
Antônio Alexandre Borges Lima bbe2ccdc91 docs: fix sidebar and TOC styles for Redocusaurus (#12748) 
* docs: improve sidebar and TOC readability + scroll progress

- Fix left nav sidebar hugging the left edge (remove margin-left)
- Increase sidebar font sizes and lift muted colors for legibility
- TOC right-side: white inactive items, pink active, gray for passed sections
- Add clientModule (tocProgress.js) to track scroll progress in TOC
- Add Redocusaurus API page styles to match site theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: fix sidebar/TOC height stability and active item reflow

- Force sidebarViewport to 100vh to prevent shrinking during scroll
- Replace font-weight on active TOC item with text-shadow to avoid reflow

* docs: left-anchor sidebar and increase fonts on large screens

* docs: constrain prev/next nav to match content max-width

* docs: fix sidebar jump on scroll by moving padding-top inside menu

* docs: fix sidebar-ad spacing with transparent padding on li

* docs: fix sidebarViewport height and MutationObserver leak

* docs: constrain doc content to 75vw and remove dead CSS comments

- Cap docMainContainer at 75vw
- Set pagination-nav to 100% width to match content column
- Remove commented-out .markdown and .ch-scrollycoding blocks

* docs: set docMainContainer max-width to 75% for better reading width

* docs: center main-wrapper on large screens and center docItemWrapper

* fix: revert lodash override to stable 4.17.21

lodash 4.18.0 is a broken release — template.js uses assignWith and
arrayEach without importing them, crashing npm start. Pin to 4.17.21
across all nested overrides.

* fix: prevent horizontal scroll on mobile docs pages

docsWrapper has flex:1 0 auto (flex-shrink:0), so it never shrinks below
the natural content width (~570px on iPhone). Cap it to 100vw and add
min-width:0 down the flex chain (docRoot, docMainContainer) so the
layout stays within viewport on narrow screens.

Also remove the overflow:visible override from ch-code-wrapper, which
was defeating the code block's own horizontal containment.

* feat: responsive navbar search and hide social icons on mobile

Shrink search bar as viewport narrows (160px at 1100px, 100px at 996px),
collapse to icon-only at 960px. Hide GitHub, X, and Discord icons below
996px where the hamburger menu takes over navigation.

* fix: images always respect container width above 996px

Use min(100%, 600px) so images are capped at 600px but never overflow
their container when the content area is narrower (e.g. sidebar open).

* fix: improve TOC progress scroll tracking and bottom-of-page detection

Adds scroll handler with RAF throttle, pauses/resumes MutationObserver
to avoid loops, and forces last TOC link active when scrolled to page bottom.

* fix: translate Portuguese comments to English in custom.css

* fix: sidebar viewport fills full screen height

* feat: sidebar section icon turns pink with ease transition when active

* fix: reduce TOC font size to 0.8rem

* fix: remove docMainContainer right padding and add 48px gap to content col

* fix: card header responsive alignment and title margin reset

* fix: darken card background and active sidebar item bg on light theme

* fix: revert TOC colors and add inline code border radius tweak

* fix: minimal scrollbar for sidebar and TOC — thumb only on hover

* fix: scrollbar fade-in/out transition at 0.25s ease

* feat: add rehype plugin for table column wrapping and centering

Inserts zero-width space after underscores in inline code cells so long
env-var names wrap at underscore boundaries. Also centers Format/Default
columns via a col-center class applied at build time.

* fix: use --ifm-heading-color for sidebar group labels in both themes

* refactor: split docs custom.css into themed partials

Breaks the 1,658-line monolithic custom.css into 8 focused files
(tokens, layout, navbar, sidebar, typography, components, code,
redocusaurus). custom.css is now a thin entry point with @imports.

* fix: align sidebar and navbar with shared --docs-gutter token

Introduces --docs-gutter: 1rem in tokens.css and applies it to both
navbar__inner horizontal padding and sidebar nav.menu padding-left,
keeping the Langflow logo and sidebar items visually aligned.

* fix: match sidebar ad background to page background color

Dark mode uses #111 (same as sidebar bg); light mode uses --ifm-background-color.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 22:11:36 +00:00

514 lines
21 KiB
CSS
Raw Permalink Blame History

[data-theme="dark"] .main-wrapper .theme-doc-sidebar-container {
background: #111;
border-right: none;
}
/* Sidebar - flush with left edge, internal padding only */
.theme-doc-sidebar-container {
margin-left: 0;
border-right: none !important;
}
.theme-doc-sidebar-container nav.menu {
padding-top: 0.75rem;
padding-left: var(--docs-gutter);
padding-right: 0.75rem;
}
/* Remove sidebar border globally */
[class*="docSidebarContainer"] {
border-right: none !important;
}
/* Fix sidebar and TOC column heights — prevent shrinking during scroll */
@media (min-width: 997px) {
[class*="sidebarViewport"] {
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.25s ease;
}
[class*="sidebarViewport"]:hover {
scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
[class*="sidebarViewport"]::-webkit-scrollbar {
width: 4px;
}
[class*="sidebarViewport"]::-webkit-scrollbar-track {
background: transparent;
}
[class*="sidebarViewport"]::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
transition: background 0.25s ease;
}
[class*="sidebarViewport"]:hover::-webkit-scrollbar-thumb {
background: rgba(128, 128, 128, 0.35);
}
[class*="tableOfContents"] {
max-height: calc(100vh - var(--ifm-navbar-height) - 2rem) !important;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.25s ease;
}
[class*="tableOfContents"]:hover {
scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
[class*="tableOfContents"]::-webkit-scrollbar {
width: 4px;
}
[class*="tableOfContents"]::-webkit-scrollbar-track {
background: transparent;
}
[class*="tableOfContents"]::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
transition: background 0.25s ease;
}
[class*="tableOfContents"]:hover::-webkit-scrollbar-thumb {
background: rgba(128, 128, 128, 0.35);
}
}
.theme-doc-sidebar-item-category.menu__list-item:not(:first-child) {
margin-top: 0.5rem !important;
}
.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(
:first-child
) {
margin-top: 0.15rem !important;
}
/* Sidebar Styles */
.theme-doc-sidebar-container nav.menu {
padding-bottom: 0;
}
.theme-doc-sidebar-menu {
display: flex;
flex-direction: column;
height: 100%;
}
/* Pin the Desktop CTA (last item) to the bottom of the sidebar column */
@media (min-width: 997px) {
.theme-doc-sidebar-container nav.menu {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
/* Docusaurus default .menu padding includes bottom gap under the last item */
padding-bottom: 0 !important;
}
.theme-doc-sidebar-container nav.menu .menu__list {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding-bottom: 0;
margin-bottom: 0;
}
/* HTML sidebar item: className is on the <li> (may not include .menu__list-item) */
.theme-doc-sidebar-container nav.menu .menu__list > li.sidebar-ad {
margin-top: auto;
flex-shrink: 0;
}
}
/* Sidebar Chevrons - tiny, subtle arrows */
.menu__link--sublist-caret::after,
.menu__caret::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f3f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
background-size: 12px 12px !important;
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
min-height: 12px !important;
opacity: 0.65;
transition: transform 0.2s ease, opacity 0.15s ease;
}
.menu__link--sublist-caret:hover::after,
.menu__caret:hover::before {
opacity: 0.85;
}
/* Dark theme chevrons: higher-contrast strokes */
[data-theme="dark"] .menu__link--sublist-caret::after,
[data-theme="dark"] .menu__caret::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
opacity: 0.45;
}
[data-theme="dark"] .menu__link--sublist-caret:hover::after,
[data-theme="dark"] .menu__caret:hover::before {
opacity: 0.7;
}
/* Expanded state rotation */
.menu__list-item--collapsed .menu__link--sublist-caret::after,
.menu__list-item--collapsed .menu__caret::before {
transform: rotate(0deg);
}
.menu__link--sublist-caret::after,
.menu__caret::before {
transform: rotate(90deg);
}
/* Sidebar font size */
.menu__link {
font-size: 0.875rem; /* 14px — readable without feeling heavy */
padding: 0.3rem var(--ifm-menu-link-padding-horizontal);
line-height: 1.4;
}
[data-theme="dark"] .menu__link {
color: #ababb5; /* lifted from #8a8a92 — noticeably more legible */
}
[data-theme="dark"] .menu__link:hover {
color: #d0d0d8;
background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .menu__link--active:not(.menu__link--sublist) {
color: var(--ifm-color-primary);
background: rgba(255, 255, 255, 0.04);
}
/* Subcategory items — slightly smaller than top-level, but still readable */
.menu__list .menu__list .menu__link {
font-size: 0.85rem; /* 13.6px */
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
/* Sidebar Group Dividers (Langfuse-style section headers) */
.sidebar-group-divider {
margin-top: 1.25rem !important;
margin-bottom: 0.25rem !important;
padding: 0 !important;
list-style: none;
}
.sidebar-group-divider:first-child {
margin-top: 0.25rem !important;
}
.sidebar-group-label {
font-size: 0.6875rem; /* 11px — one notch up from 10px, still compact */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--ifm-color-emphasis-500);
padding: 0.25rem var(--ifm-menu-link-padding-horizontal);
opacity: 0.6;
}
/* Light theme */
html[data-theme="light"] .sidebar-group-label {
color: var(--ifm-heading-color) !important;
opacity: 1 !important;
}
/* Dark theme */
[data-theme="dark"] .sidebar-group-label {
color: var(--ifm-heading-color) !important;
opacity: 1 !important;
}
/* Sidebar Category Icons */
.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link::before {
content: "";
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-webkit-mask-size: 18px 18px;
mask-size: 18px 18px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: 0.45;
transition: background-color 0.25s ease, opacity 0.25s ease;
}
/* Active section: icon turns primary pink */
.sidebar-category-with-icon > .menu__list-item-collapsible > .menu__link--active::before {
background-color: var(--ifm-color-primary) !important;
opacity: 0.9;
}
/* Sidebar icon colors via CSS filters / mask approach */
.sidebar-icon-rocket > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-workflow > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2'/%3E%3Cpath d='M7 11v4a2 2 0 0 0 2 2h4'/%3E%3Crect width='8' height='8' x='13' y='13' rx='2'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-bot > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-plug > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a6 6 0 0 1-6 6v0a6 6 0 0 1-6-6V8z'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-code > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-cloud > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-blocks > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Cpath d='M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-fileCode > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m10 13-2 2 2 2'/%3E%3Cpath d='m14 17 2-2-2-2'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-gitPR > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M6 9v12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M6 9v12'/%3E%3C/svg%3E");
background-color: currentColor;
}
.sidebar-icon-helpCircle > .menu__list-item-collapsible > .menu__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
background-color: currentColor;
}
/* Sidebar Ad — <li> is only spacing; card styles live on the <a> inside */
.sidebar-ad {
margin-left: 0.5rem;
margin-right: 0.75rem;
margin-top: auto;
padding-top: 1rem; /* transparent gap above the card */
padding-left: 0;
padding-right: 0;
padding-bottom: 1rem;
list-style: none;
}
.sidebar-ad a.menu__link {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.625rem;
padding: 0.65rem 0.75rem;
font-family: var(--ifm-font-family-base);
text-decoration: none !important;
border-radius: var(--ifm-global-radius);
border: 1px solid var(--ifm-color-emphasis-300);
position: relative;
overflow: hidden;
transition:
box-shadow 0.18s ease,
border-color 0.18s ease;
}
[data-theme="dark"] .sidebar-ad a.menu__link {
background-color: #111;
border-color: var(--ifm-card-border-color, #303038);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 4px 6px rgba(0, 0, 0, 0.25),
0 12px 28px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .sidebar-ad a.menu__link {
background-color: var(--ifm-background-color);
border-color: var(--ifm-color-emphasis-200);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 4px 12px rgba(15, 23, 42, 0.08),
0 12px 28px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .sidebar-ad a.menu__link:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--ifm-color-emphasis-400);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 6px 10px rgba(0, 0, 0, 0.3),
0 16px 36px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .sidebar-ad a.menu__link:hover {
background: var(--ifm-hover-overlay);
border-color: var(--ifm-color-emphasis-300);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 6px 16px rgba(15, 23, 42, 0.1),
0 16px 36px rgba(15, 23, 42, 0.08);
}
.sidebar-ad a.menu__link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.85;
color: var(--ifm-color-emphasis-700);
}
[data-theme="dark"] .sidebar-ad a.menu__link svg {
color: #8a8a92;
}
.sidebar-ad-text-container {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
text-align: left;
}
.sidebar-ad-text {
font-size: 0.8125rem;
line-height: 1.4;
font-family: inherit;
font-weight: 400;
}
/* Muted line — same family as nav, reads like helper copy */
.sidebar-ad-text-container > .sidebar-ad-text:first-of-type {
color: #4b4b55;
}
[data-theme="dark"] .sidebar-ad-text-container > .sidebar-ad-text:first-of-type {
color: #bdbdc7;
}
/* CTA line — primary color + medium weight, aligned with active nav / category labels */
.sidebar-ad-text-gradient {
color: var(--ifm-color-primary);
font-weight: 500;
background: none;
-webkit-text-fill-color: unset;
}
[data-theme="dark"] .sidebar-ad-text-gradient {
/* Brighter pink for WCAG contrast on dark background */
color: #ff6ad0;
}
/* Active item - subtle left border indicator */
.menu__link--active:not(.menu__link--sublist) {
border-left: 2px solid var(--ifm-color-primary);
padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 2px);
background: rgba(255, 255, 255, 0.03);
font-weight: 500;
}
html[data-theme="light"] .menu__link--active:not(.menu__link--sublist) {
background: rgba(0, 0, 0, 0.06);
}
/* Sidebar category label styling */
.theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
font-weight: 500;
font-size: 0.8125rem; /* 13px - same as items */
}
[data-theme="dark"] .theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
color: #c0c0ca; /* Category headers: clearly brighter than items */
}
/* ========================================
Table of Contents (TOC) - Right side
======================================== */
.table-of-contents {
font-size: 0.8rem;
border-left: 1px solid var(--ifm-color-emphasis-200);
}
/* Unvisited — white/light */
.table-of-contents__link {
color: #2f2f38;
transition: color 0.2s ease;
}
[data-theme="dark"] .table-of-contents__link {
color: #e0e0e8;
}
/* Passed — muted gray */
.table-of-contents__link--passed {
color: #9090a0;
}
[data-theme="dark"] .table-of-contents__link--passed {
color: #8a8a9a;
}
/* Hover */
.table-of-contents__link:hover {
color: var(--ifm-color-primary);
}
/* Active — pink, bold simulated via text-shadow to avoid reflow */
.table-of-contents__link--active {
color: var(--ifm-color-primary) !important;
text-shadow: 0 0 0.4px var(--ifm-color-primary);
}
[data-theme="dark"] .table-of-contents__link--active {
color: hsla(329, 55%, 68%, 1) !important;
text-shadow: 0 0 0.4px hsla(329, 55%, 68%, 1);
}
[data-theme="dark"] .table-of-contents {
border-left-color: #2c2c32;
}
Reference in New Issue View Git Blame Copy Permalink