diff --git a/src/components/KeployCloud.js b/src/components/KeployCloud.js index 1650346c8..e09c328fb 100644 --- a/src/components/KeployCloud.js +++ b/src/components/KeployCloud.js @@ -3,28 +3,31 @@ import React from "react"; export const KeployCloud = () => { return (
-
-

Questions? 🤔💭

-

- For any support please{" "} - - join keploy slack community - {" "} - to get help from fellow users, or{" "} - - book a demo - {" "} - if you're exploring enterprise use cases. -

+
+ Need help? + + + Join Slack + + + | + + + Book a Demo +
); diff --git a/src/css/custom.css b/src/css/custom.css index a719f5d91..01870d515 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -426,6 +426,54 @@ html[data-theme="dark"] .navbar { color: #ffffff; } +/* 1. Create gap between Magnifying Glass and the orange input box */ +.DocSearch-MagnifierLabel { + margin-left: 0.2px !important; /* Adjust this value for a larger/smaller gap */ + margin-right: 8px !important; /* Space between icon and the text you type */ + color: var(--ifm-color-primary) !important; /* Optional: makes icon match Keploy blue */ +} + +/* Make form stretch fully */ +.DocSearch-Form { + display: flex; + align-items: center; + width: 100%; + border: 2px solid orange !important; + border-radius: 6px; + padding: 0; +} + +/* Let wrapper take full width */ +.DocSearch-InputWrapper { + flex: 1; + display: flex; + align-items: center; + box-shadow: none !important; + border: none !important; + padding-left: 12px; +} + +/* Clean input */ +.DocSearch-Input { + flex: 1; + border: none !important; + outline: none !important; + min-width: 0; + background: transparent; + + /* 👇 prevents text from going under clear button */ + padding-right: 110px; +} + +/* Keep clear text spacing */ +.DocSearch-Clear { + margin-left: 8px; + white-space: nowrap; +} + + + + /* Footer */ footer svg { @@ -2094,24 +2142,6 @@ html[data-theme="dark"] .navbar__items--right .dropdown > .navbar__link { EDIT THIS PAGE / REQUEST CHANGES LINKS ============================================ */ -/* Bottom of page links */ -.theme-doc-footer { - margin-top: 3rem; - padding-top: 1.5rem; - border-top: 1px solid rgba(0, 0, 0, 0.06); -} - -html[data-theme="dark"] .theme-doc-footer { - border-top-color: rgba(255, 255, 255, 0.06); -} - -.theme-doc-footer-edit-meta-row { - display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-bottom: 1rem; -} - /* Edit this page link */ .theme-edit-this-page { display: inline-flex; @@ -2599,3 +2629,143 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite } +/* Support strip (Need help? Slack | Demo) */ +.support-strip { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + padding: 10px; + background: var(--ifm-color-emphasis-100); /* Slim strip look */ + border-radius: 4px; + margin-bottom: 20px; +} + +#support span { + color: #252525; + font-weight: 400; +} + +/* Dark mode */ +[data-theme='dark'] #support span { + color: #ffffff; /* or a softer light gray like #e0e0e0 */ +} + +#support a { + font-weight: 600; + color: #ff7849; + text-decoration: none; +} + +#support a:hover { + color: #ffa07a; + text-decoration: underline; +} + +/* ===== FINAL Compact Pagination ===== */ + +.pagination-nav { + border-top: 2.5px solid var(--ifm-color-emphasis-200); + padding-top: 2rem; + margin-top: 2rem; +} + +.pagination-nav__link { + padding: 0.5rem 1rem !important; + border-radius: 6px !important; + box-shadow: none !important; + border: 1.5px solid var(--ifm-color-emphasis-200) !important; + background: transparent !important; + min-height: auto !important; + display: flex; + flex-direction: column; +} + +.pagination-nav__label { + font-weight: 700 !important; + color: var(--ifm-color-emphasis-900) !important; + font-size: 0.9rem; +} + +.pagination-nav__sublabel { + font-weight: 500; + color: var(--ifm-color-emphasis-600); +} + +/* Hover */ +.pagination-nav__link:hover { + border-color: var(--ifm-color-primary); + background-color: var(--ifm-color-emphasis-100); + text-decoration: none; +} + + + +/* Title */ +.pagination-nav__title { + font-size: 0.82rem; + font-weight: 600; + color: var(--ifm-font-color-base); + line-height: 1.9; +} + +/* Arrows subtle */ +.pagination-nav__link svg { + transform: scale(0.7); + opacity: 1.65; +} + +[data-theme='dark'] .pagination-nav__link { + border-color: var(--ifm-color-emphasis-100); /* softer than before */ +} + +[data-theme='dark'] .pagination-nav__label { + color: var(--ifm-color-emphasis-500); +} + +/* ===== Divider Between Pagination and Footer ===== */ + +/* Add space below pagination */ +.pagination-nav { + margin-bottom: 3rem; +} + +/* ===== Remove footer border on landing page only ===== */ + +/* Default: footer border ON everywhere */ +.theme-layout-footer.footer { + border-top: 1px solid var(--ifm-toc-border-color); + margin-top: 0; + padding-top: 2rem; +} + +/* Remove border ONLY on landing page */ +.plugin-pages.plugin-id-default .theme-layout-footer.footer { + border-top: none !important; +} + + + +/* ===== MOBILE FIX FOR PREV / NEXT CARDS ===== */ +@media (max-width: 768px) { + + .pagination-nav { + display: flex !important; + flex-direction: column !important; /* stack vertically */ + gap: 12px; + } + + .pagination-nav__link { + width: 100% !important; + padding: 14px !important; + } + + .pagination-nav__label { + font-size: 0.85rem !important; + } + + .pagination-nav__title { + font-size: 0.9rem !important; + line-height: 1.4; + } +}