diff --git a/docs/css/custom.css b/docs/css/custom.css index d93edc20e..1760ead4a 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -4,10 +4,9 @@ * work well for content-centric websites. */ :root { - --ifm-background-color: var(--token-primary-bg-c); - --ifm-color-primary: hsla(330, 81%, 60%, 1); --ifm-navbar-link-hover-color: initial; --ifm-navbar-padding-vertical: 0; + --ifm-global-radius: 16px; --ifm-navbar-item-padding-vertical: 0; --ifm-font-family-base: Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji"; @@ -15,6 +14,26 @@ "Liberation Mono", Menlo, Courier, monospace; } +/* Light theme - Pure white background */ +html[data-theme="light"] { + --ifm-color-primary: hsla(333, 71%, 51%, 1); /* Slightly darker pink for light theme */ + --ifm-background-color: var(--ifm-color-white); + --ifm-background-surface-color: var(--ifm-color-white); +} + +/* Dark theme - Pure black background */ +html[data-theme="dark"] { + --ifm-color-primary: hsla(329, 86%, 70%, 1); /* Lighter pink for dark theme */ + --ifm-background-color: var(--ifm-color-black); + --ifm-background-surface-color: var(--ifm-color-black); +} + +/* override the infima navbar docs/node_modules/infima/dist/css/default/default.css */ +.navbar { + box-shadow: none !important; + border-bottom: 1px solid var(--ifm-toc-border-color); +} + .theme-doc-sidebar-item-category.menu__list-item:not(:first-child) { margin-top: 0.5rem !important; } @@ -54,6 +73,34 @@ p { text-align: start; } +/* Tabs Styling */ +.tabs-container { + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: var(--ifm-global-radius); + padding: 1rem; + margin-bottom: 1rem; +} + +.tabs { + margin-bottom: 1rem; +} + +.tabs__item { + border: none; + border-bottom: 1px solid var(--ifm-color-emphasis-200); + margin-right: 0rem; + padding-bottom: 0.5rem; + border-radius: 0; +} + +.tabs__item:hover { + background-color: var(--ifm-hover-overlay); +} + +.tabs__item--active { + border-bottom-color: var(--ifm-tabs-color-active); +} + /* apply */ #hero-apply { z-index: -1; @@ -80,21 +127,19 @@ p { ); } -/** - * Hero component title overrides to match other heading styles - */ +/* Hero component title overrides to match other heading styles */ .hero-title { color: rgb(28, 30, 33); font-family: var(--ifm-heading-font-family); } h1 { - font-size: 26px; + font-size: 30px; } h2 { - font-size: 22px; + font-size: 25px; } h3 { - font-size: 18px; + font-size: 22px; } body { @@ -154,7 +199,6 @@ body { } /* Discord */ - .header-discord-link { margin-right: 0.5rem; } @@ -279,8 +323,10 @@ body { /* Footer Styles */ .footer { - padding: 8px 0; - background-color: var(--ifm-navbar-background-color); + /* padding: 8px 0; */ + padding: 1rem 0 0; + background-color: var(--ifm-background-color); + border-top: 1px solid var(--ifm-color-emphasis-200); } [data-theme="light"] .footer { @@ -317,11 +363,16 @@ body { } .footer .container { - padding: 0 5rem; + padding: 0 1.25rem; display: flex; - justify-content: space-between; + justify-content: left; align-items: center; flex-direction: row-reverse; + max-width: 100%; +} + +.footer__title { + margin-bottom: 0; } /* Sidebar Styles */ @@ -416,3 +467,21 @@ body { padding: 0; } +/* DocSearch Input Styling - Simple border override */ +.DocSearch-Button { + border: 1px solid var(--ifm-color-emphasis-300) !important; + border-radius: 6px !important; + background: var(--ifm-color-content-inverse) !important; + color: var(--ifm-color-emphasis-500) !important; +} + +.DocSearch-Button:hover, +.DocSearch-Button:focus { + border-color: var(--ifm-color-primary) !important; + box-shadow: 0 0 0 1px var(--ifm-color-primary) !important; +} + +.DocSearch-Search-Icon { + color: var(--ifm-color-emphasis-500) !important; + size: 16px !important; +} \ No newline at end of file diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index c80d673b3..fc19cf33f 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -400,13 +400,6 @@ const config = { }, }, footer: { - logo: { - alt: "Langflow", - src: "img/lf-docs-light.svg", - srcDark: "img/lf-docs-dark.svg", - width: 160, - height: 40, - }, links: [ { title: null, diff --git a/docs/src/theme/Footer.js b/docs/src/theme/Footer.js index aed2e940b..2a8b4a5e9 100644 --- a/docs/src/theme/Footer.js +++ b/docs/src/theme/Footer.js @@ -24,8 +24,8 @@ export default function FooterWrapper(props) { onMouseLeave={() => setIsHovered(false)} style={{ position: 'fixed', - right: '20px', - bottom: '20px', + right: '21px', + bottom: '21px', zIndex: 100, display: 'flex', alignItems: 'center',