mirror of
https://github.com/langflow-ai/langflow.git
synced 2026-07-24 02:05:11 +08:00
bbe2ccdc91
* 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>
514 lines
21 KiB
CSS
514 lines
21 KiB
CSS
[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;
|
|
}
|