From 3d58c7d9e2a528ca856d50e1fd4c34476f7abc06 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 16:58:12 -0700 Subject: [PATCH 01/13] Align base styles with VUI. --- package-lock.json | 2 +- www/src/css/custom.css | 259 ++++++++++++++++++++++++++++++----------- 2 files changed, 194 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index d95f1251a..bacc0c2a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "zir-api-docs", + "name": "vectara-docs", "lockfileVersion": 2, "requires": true, "packages": {} diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 04d6150e3..261cbdb60 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -1,22 +1,193 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ +/* Reset */ -/* stylelint-disable docusaurus/copyright-header */ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ +:root { + /* --ifm-code-font-size: 95%; */ + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; + font-size: 14px; + + --ifm-link-color: rgb(38, 76, 214); + --ifm-color-primary: rgb(38, 76, 214); + --ifm-button-background-color: rgb(38, 76, 214); +} + +[data-theme="dark"] { + /* --ifm-code-font-size: 95%; */ + --ifm-link-color: rgb(131 158 255); + --ifm-color-primary: rgb(131 158 255); +} + +/* Typography */ + +h1 { + font-size: 30px; + font-weight: 400; + color: #2c313a; +} + +[data-theme="dark"] h1 { + color: #fff; +} + +h2 { + font-size: 24px; + font-weight: 600; + color: #2c313a; +} + +[data-theme="dark"] h2 { + color: #fff; +} + +h3 { + font-size: 18px; + font-weight: 600; + color: #69707d; +} + +[data-theme="dark"] h3 { + color: #fff; +} + +/* Button */ + +.button.button--secondary.button--outline:not(.button--active):not(:hover) { + color: #fff; +} + +/* .button { + --ifm-button-background-color: #c9ff06; +} + +.button:hover { + --ifm-button-background-color: #effcbb; +} + +[data-theme="dark"] .button { + --ifm-button-background-color: #00895f; +} + +[data-theme="dark"] .button:hover { + --ifm-button-background-color: #22ffca; +} */ + +/* Hero */ + +.hero__title { + color: #fff; +} + +[data-theme="dark"] .hero--primary { + --ifm-hero-background-color: #344caa; +} + +[data-theme="dark"] .hero__subtitle { + color: #fff; +} + +/* +[data-theme="dark"] .hero { + --ifm-hero-background-color: #ef0078; +} */ + +/* Side nav */ + +.menu__list-item:not(:first-child) { + margin-top: 0; +} + +.theme-doc-sidebar-menu .menu__link { + color: #2c313a; + border-radius: 16px; +} + +[data-theme="dark"] .theme-doc-sidebar-menu .menu__link { + color: #fff; +} + +.theme-doc-sidebar-menu .menu__list-item-collapsible { + border-radius: 16px; +} + +.theme-doc-sidebar-item-link .menu__link--active { + background-color: rgb(217, 226, 255); +} -/* You can override the default Infima variables here. */ -@font-face { - font-family: Circular; - src: url(/static/CircularXXWeb-Regular.woff2) format('woff2'); +[data-theme="dark"] .theme-doc-sidebar-item-link .menu__link--active { + background-color: rgb(67, 68, 73); } +.menu__link--sublist-caret:after { + background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem; + transition: none; +} + +/* Table of contents */ + +.table-of-contents__link { + font-size: 14px; +} + +/* Breadcrumbs */ + +.breadcrumbs__link { + font-size: 14px; +} + +.breadcrumbHomeIcon_node_modules-\@docusaurus-theme-classic-lib-theme-DocBreadcrumbs-styles-module { + top: 0 !important; + vertical-align: middle !important; +} + +.breadcrumbs__item--active .breadcrumbs__link { + color: #2c313a; +} + +[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link { + color: #fff; +} + +.breadcrumbs__item--active .breadcrumbs__link { + background-color: transparent; + font-weight: 700; +} + +/* Tabs */ + +.tabs { + border-bottom: 1px solid #cbcdde; + overflow: initial; +} + +.tabs__item { + padding: 8px 12px; + font-size: 14px; + font-weight: 400; + line-height: 1; +} + +.tabs__item--active { + box-shadow: #7027f6 0px 1px 0px; + border-bottom: none; + color: #2c313a; +} + +[data-theme="dark"] .tabs { + border-bottom-color: #393a43; +} + +[data-theme="dark"] .tabs__item--active { + color: #ffffff; +} + +/* Tables */ + +table { + margin-top: var(--ifm-spacing-vertical); +} + +/* API specs */ + .api-method > .menu__link { align-items: center; justify-content: start; @@ -39,21 +210,21 @@ } .details__demo-panel { - --openapi-input-background: #FFFFFF; + --openapi-input-background: #ffffff; --docusaurus-details-decoration-color: #FFFFF; } -[data-theme='dark'] .details__demo-panel { - --openapi-input-background: #282A36; +[data-theme="dark"] .details__demo-panel { + --openapi-input-background: #282a36; } .details__demo-panel [contenteditable]:focus { border: 2px solid var(--ifm-color-primary); - } - - .details__demo-panel div[class^="optionsPanel_"]::before { +} + +.details__demo-panel div[class^="optionsPanel_"]::before { content: "Fill out the parameters below to test an API request"; color: var(--ifm-color-emphasis-600); - } +} .post > .menu__link::before { content: "[POST]"; @@ -85,50 +256,6 @@ color: var(--ifm-color-secondary-darkest); } -:root { - --ifm-color-primary: #6900FF; - --ifm-color-primary-dark: #4300C4; - --ifm-color-primary-darker: #1E007C; - --ifm-color-primary-darkest: #110033; - --ifm-color-primary-light: #976CFF; - --ifm-color-primary-lighter: #C2AEFF; - --ifm-color-primary-lightest: #C2AEFF; - --ifm-code-font-size: 95%; - font-family: Circular; -} - -[data-theme='dark'] { - --ifm-color-primary: #F9CAEA; - --ifm-color-primary-dark: #BF0050; - --ifm-color-primary-darker: #870050; - --ifm-color-primary-darkest: #010101; - --ifm-color-primary-light: #F495D3; - --ifm-color-primary-lighter: #F9CAEA; - --ifm-color-primary-lightest: #F9CAEA; - --ifm-code-font-size: 95%; - --ifm-color-content-inverse: #FFFFFF; -} - -.button { - --ifm-button-background-color: #C9FF06; -} - -.button:hover { - --ifm-button-background-color: #EFFCBB; -} - -[data-theme='dark'] .button { - --ifm-button-background-color: #00895F; -} - -[data-theme='dark'] .button:hover { - --ifm-button-background-color: #22FFCA; -} - -[data-theme='dark'] .hero { - --ifm-hero-background-color: #EF0078; -} - .docusaurus-highlight-code-line { background-color: rgb(72, 77, 91); display: block; From 691017f20a58c4d11f74b7c47001e1ff351065b2 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 19:09:15 -0700 Subject: [PATCH 02/13] Style tables. --- www/src/css/custom.css | 56 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 55 insertions(+), 1 deletion(-) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 261cbdb60..e380c5730 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -126,6 +126,16 @@ h3 { .table-of-contents__link { font-size: 14px; + padding-left: 8px; + padding-bottom: 8px; +} + +.table-of-contents__link:hover { + text-decoration: underline; +} + +.table-of-contents li { + margin: 0; } /* Breadcrumbs */ @@ -149,7 +159,7 @@ h3 { .breadcrumbs__item--active .breadcrumbs__link { background-color: transparent; - font-weight: 700; + font-weight: 600; } /* Tabs */ @@ -183,7 +193,51 @@ h3 { /* Tables */ table { + display: table; margin-top: var(--ifm-spacing-vertical); + width: 100%; + table-layout: fixed; + border: 1px solid #e3e4f3; + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 18px; +} + +table thead { + background-color: #f3f7fb; + border-bottom: 1px solid #e3e4f3; +} + +table thead tr { + border-bottom: none; + border-top: none; +} + +tbody tr:hover { + background-color: #f3f7fb !important; +} + +table tr:nth-child(2n) { + background-color: transparent; +} + +table th { + font-size: 12px; + font-weight: 600; + padding: 8px 12px; + text-align: left; + border: none; + color: #2c313a; + max-width: 100%; +} + +table td { + font-size: 14px; + vertical-align: middle; + border: none; + padding: 8px 12px; + color: #2c313a; + max-width: 100%; } /* API specs */ From e81e8bcaea784c9a9a5d07f5bad2e9bcfaa4efd8 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 19:19:23 -0700 Subject: [PATCH 03/13] Style code. --- www/src/css/custom.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index e380c5730..911e98677 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -49,6 +49,27 @@ h3 { color: #fff; } +/* Code */ + +code { + padding: 2px 4px; + background: transparent; + border-radius: 0; + border: 1px solid #cbcdde; +} + +.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module { + background-color: #f3f7fb; + font-weight: 600 !important; + font-size: 12px !important; +} + +.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module { + box-shadow: none !important; + border-radius: 0 !important; + border: 1px solid #e3e4f3; +} + /* Button */ .button.button--secondary.button--outline:not(.button--active):not(:hover) { From 86893b04d9fb9b7fdf892bf73845c6dcf926801e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 20:08:50 -0700 Subject: [PATCH 04/13] Layout adjustments. --- www/src/css/custom.css | 46 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 911e98677..fba1bf055 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -111,8 +111,36 @@ code { --ifm-hero-background-color: #ef0078; } */ +/* Header */ + +.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module { + background-color: rgb(38, 76, 214) !important; + color: #fff !important; +} + +.close { + color: #fff !important; + opacity: 1 !important; + transition: all 0.2s; +} + +.close:hover { + background-color: rgba(255, 255, 255, 0.25); +} + +.navbar { + background-color: #f3f7fb; + padding: 8px 16px; + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, + rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; +} + /* Side nav */ +.theme-doc-sidebar-menu { + padding: 12px 8px; +} + .menu__list-item:not(:first-child) { margin-top: 0; } @@ -130,6 +158,10 @@ code { border-radius: 16px; } +.theme-doc-sidebar-item-link .menu__link { + transition: none; +} + .theme-doc-sidebar-item-link .menu__link--active { background-color: rgb(217, 226, 255); } @@ -143,6 +175,12 @@ code { transition: none; } +/* Content */ + +.container { + padding-top: 12px; +} + /* Table of contents */ .table-of-contents__link { @@ -165,6 +203,14 @@ code { font-size: 14px; } +.breadcrumbs__item:first-child a { + margin-left: -9px; +} + +.breadcrumbs__link:any-link:hover { + background-color: transparent; +} + .breadcrumbHomeIcon_node_modules-\@docusaurus-theme-classic-lib-theme-DocBreadcrumbs-styles-module { top: 0 !important; vertical-align: middle !important; From 193ca5dd23970cc61c28958878505c686363a03e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 20:46:57 -0700 Subject: [PATCH 05/13] Refine dark styles. --- www/src/css/custom.css | 61 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index fba1bf055..89a2d0cb8 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -58,18 +58,32 @@ code { border: 1px solid #cbcdde; } +[data-theme="dark"] code { + border-color: #69707d; +} + .codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module { background-color: #f3f7fb; font-weight: 600 !important; font-size: 12px !important; } +[data-theme="dark"] + .codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module { + background-color: #2c313a; +} + .codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module { box-shadow: none !important; border-radius: 0 !important; border: 1px solid #e3e4f3; } +[data-theme="dark"] + .codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module { + border-color: #69707d; +} + /* Button */ .button.button--secondary.button--outline:not(.button--active):not(:hover) { @@ -116,6 +130,7 @@ code { .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module { background-color: rgb(38, 76, 214) !important; color: #fff !important; + font-size: 16px; } .close { @@ -135,6 +150,15 @@ code { rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; } +[data-theme="dark"] .navbar { + background-color: #2c313a; + box-shadow: none; +} + +.navbar__link { + transition: none; +} + /* Side nav */ .theme-doc-sidebar-menu { @@ -187,6 +211,7 @@ code { font-size: 14px; padding-left: 8px; padding-bottom: 8px; + transition: none; } .table-of-contents__link:hover { @@ -264,26 +289,52 @@ table { margin-top: var(--ifm-spacing-vertical); width: 100%; table-layout: fixed; - border: 1px solid #e3e4f3; + border: 1px solid #cbcdde; border-collapse: collapse; border-spacing: 0; margin-bottom: 18px; } +[data-theme="dark"] table { + border-color: #69707d; +} + table thead { background-color: #f3f7fb; border-bottom: 1px solid #e3e4f3; } +[data-theme="dark"] table thead { + background-color: #2c313a; + border-bottom-color: #393a43; +} + table thead tr { border-bottom: none; border-top: none; } +table tbody tr { + border-top: none; + border-bottom: 1px solid #e3e4f3; +} + +[data-theme="dark"] table tbody tr { + border-color: #393a43; +} + +table tbody tr:last-child { + border-bottom: none; +} + tbody tr:hover { background-color: #f3f7fb !important; } +[data-theme="dark"] tbody tr:hover { + background-color: #2c313a !important; +} + table tr:nth-child(2n) { background-color: transparent; } @@ -298,6 +349,10 @@ table th { max-width: 100%; } +[data-theme="dark"] table th { + color: #fff; +} + table td { font-size: 14px; vertical-align: middle; @@ -307,6 +362,10 @@ table td { max-width: 100%; } +[data-theme="dark"] table td { + color: #fff; +} + /* API specs */ .api-method > .menu__link { From aa6d948f725ce3d024235a53a306014983e02c1d Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 20:48:35 -0700 Subject: [PATCH 06/13] Refine colors. --- www/src/css/custom.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 89a2d0cb8..16176fe0c 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -128,7 +128,7 @@ code { /* Header */ .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module { - background-color: rgb(38, 76, 214) !important; + background-color: #7027f6 !important; color: #fff !important; font-size: 16px; } @@ -266,6 +266,8 @@ code { font-size: 14px; font-weight: 400; line-height: 1; + border-radius: 0; + transition: none; } .tabs__item--active { From c32a45d893494609fbd8a6bd92b9c50bf3aae815 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 21:48:31 -0700 Subject: [PATCH 07/13] Tweak logo size. --- www/src/css/custom.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 16176fe0c..0c08df245 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -155,7 +155,13 @@ code { box-shadow: none; } +.navbar__logo { + height: 24px; + margin-top: -3px; +} + .navbar__link { + font-size: 16px; transition: none; } From 5065e916648180f8221288d2b3ac364d5bc4ded9 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 21:50:05 -0700 Subject: [PATCH 08/13] Remove images from home page. --- www/src/pages/index.js | 51 +++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/www/src/pages/index.js b/www/src/pages/index.js index 531a0e880..07b7ba5b1 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -1,49 +1,48 @@ -import React from 'react'; -import clsx from 'clsx'; -import Layout from '@theme/Layout'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './styles.module.css'; +import React from "react"; +import clsx from "clsx"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./styles.module.css"; const features = [ { title: <>Powerful Semantic Search, - imageUrl: 'img/undraw_docusaurus_mountain.svg', description: ( <> - Our semantic search, based on the latest Neural IR - research, returns results that keyword search often misses. + Our semantic search, based on the latest Neural IR research, returns + results that keyword search often misses. ), }, { title: <>Easy to Use, - imageUrl: 'img/undraw_docusaurus_tree.svg', description: ( <> - Our intuitive cloud-based API makes it easy to index and query - your textual data, making it easy to create generative AI advanced - applications like our AskNews demo quickly. + Our intuitive cloud-based API makes it easy to index and query your + textual data, making it easy to create generative AI advanced + applications like{" "} + our AskNews demo + quickly. ), }, { title: <>Designed by Experts, - imageUrl: 'img/undraw_docusaurus_react.svg', description: ( <> - We are experts in language understanding and machine - learning with over twenty-five years of industry experience. + We are experts in language understanding and machine learning with over + twenty-five years of industry experience. ), }, ]; -function Feature({imageUrl, title, description}) { +function Feature({ imageUrl, title, description }) { const imgUrl = useBaseUrl(imageUrl); return ( -
+
{imgUrl && (
{title} @@ -57,22 +56,24 @@ function Feature({imageUrl, title, description}) { function Home() { const context = useDocusaurusContext(); - const {siteConfig = {}} = context; + const { siteConfig = {} } = context; return ( -
+ description="Description will go into a meta tag in " + > +

{siteConfig.title}

{siteConfig.tagline}

+ to={useBaseUrl("docs/")} + > Get Started
From 37ec236e524cbec385df8fbc4bdcb8d653a72731 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 21:52:01 -0700 Subject: [PATCH 09/13] Refine callout styles. --- www/src/css/custom.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 0c08df245..bb696f209 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -374,6 +374,13 @@ table td { color: #fff; } +/* Callouts */ + +.admonition_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module { + box-shadow: none; + border-radius: 0; +} + /* API specs */ .api-method > .menu__link { From d90bb9dce85f780ce4faae79ad5db28c8ee84b2c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 14 Aug 2023 22:12:03 -0700 Subject: [PATCH 10/13] Refine pagination styles. --- www/src/css/custom.css | 46 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index bb696f209..0f92bba7b 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -260,6 +260,52 @@ code { font-weight: 600; } +/* Page edit */ + +.theme-edit-this-page { + margin-left: -14px; + padding: 4px 12px; + border: 1px dotted #69707d; + color: #2c313a; +} + +.theme-edit-this-page:hover { + color: rgb(38, 76, 214); + border-color: rgb(38, 76, 214); +} + +.theme-edit-this-page svg { + display: none; +} + +/* Pagination */ + +.pagination-nav { + gap: initial; + margin: 0 -14px; +} + +.pagination-nav__label { + color: #2c313a; +} + +.pagination-nav__link { + border: none; + border-bottom: 4px solid transparent; + border-radius: 0; + transition: none; + padding-left: 0; + padding-right: 0; +} + +.pagination-nav__link:hover { + border-bottom-color: rgb(38, 76, 214); +} + +.pagination-nav__link:hover .pagination-nav__label { + color: rgb(38, 76, 214); +} + /* Tabs */ .tabs { From 8bc73a57a5d3ad64c679be7e7d2feb4bf6562687 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 15 Aug 2023 21:51:58 -0700 Subject: [PATCH 11/13] Update API playground styles. --- www/src/css/custom.css | 379 +++++++++++++++++++++++++++++++++-------- 1 file changed, 310 insertions(+), 69 deletions(-) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 0f92bba7b..53d4a6b71 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -19,6 +19,10 @@ /* Typography */ +strong { + font-weight: 600; +} + h1 { font-size: 30px; font-weight: 400; @@ -46,7 +50,47 @@ h3 { } [data-theme="dark"] h3 { - color: #fff; + color: #fff !important; +} + +h4 { + font-size: 14px; + font-weight: 600; +} + +[data-theme="dark"] hr { + background-color: #69707d !important; +} + +/* API Playground typography */ + +.details_node_modules-\@docusaurus-theme-classic-lib-theme-Details-styles-module + > summary + > strong:not(:first-child) { + margin-left: 8px; +} + +.responseTabsTopSection_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module + > strong { + font-size: 18px; + font-weight: 600; + color: #69707d; +} + +[data-theme="dark"] + .responseTabsTopSection_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module + > strong { + color: #fff !important; +} + +.schemaName_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaItem-styles-module, +.schemaName_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ParamsItem-styles-module { + margin-left: 8px; +} + +.required_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaItem-styles-module, +.paramsRequired_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ParamsItem-styles-module { + margin-left: 8px; } /* Code */ @@ -84,27 +128,43 @@ code { border-color: #69707d; } +/* API Playground code */ + +pre { + background: transparent !important; +} + /* Button */ .button.button--secondary.button--outline:not(.button--active):not(:hover) { color: #fff; } -/* .button { - --ifm-button-background-color: #c9ff06; -} +/* API Playground button */ -.button:hover { - --ifm-button-background-color: #effcbb; +.export-button { + opacity: 1 !important; + visibility: visible !important; + background-color: transparent !important; + transition: all 0.2s !important; + font-weight: 400; + font-size: 14px !important; + padding: 4px 8px !important; + height: 24px !important; + line-height: 0 !important; + border: 1px solid #cbcdde !important; + color: #2c313a !important; } -[data-theme="dark"] .button { - --ifm-button-background-color: #00895f; +.export-button:hover { + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, + rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; } -[data-theme="dark"] .button:hover { - --ifm-button-background-color: #22ffca; -} */ +[data-theme="dark"] .export-button { + border-color: #69707d !important; + color: #cbcdde !important; +} /* Hero */ @@ -120,11 +180,6 @@ code { color: #fff; } -/* -[data-theme="dark"] .hero { - --ifm-hero-background-color: #ef0078; -} */ - /* Header */ .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module { @@ -153,6 +208,7 @@ code { [data-theme="dark"] .navbar { background-color: #2c313a; box-shadow: none; + border-bottom: 1px solid #69707d; } .navbar__logo { @@ -165,6 +221,12 @@ code { transition: none; } +/* API playground page header */ + +.theme-doc-version-badge { + margin-bottom: 12px; +} + /* Side nav */ .theme-doc-sidebar-menu { @@ -188,23 +250,54 @@ code { border-radius: 16px; } +.menu__link:hover, +.menu__list-item-collapsible:hover { + background: transparent; + color: var(--ifm-link-color); +} + +.menu__link:hover { + text-decoration: underline; +} + .theme-doc-sidebar-item-link .menu__link { transition: none; } +.menu__list-item-collapsible--active, +.menu__list-item-collapsible--active:hover, .theme-doc-sidebar-item-link .menu__link--active { background-color: rgb(217, 226, 255); } +[data-theme="dark"] .menu__list-item-collapsible--active, +[data-theme="dark"] .menu__list-item-collapsible--active:hover, [data-theme="dark"] .theme-doc-sidebar-item-link .menu__link--active { - background-color: rgb(67, 68, 73); + background-color: rgb(67, 68, 73) !important; } +.menu__caret:before, .menu__link--sublist-caret:after { background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem; transition: none; } +.menu__caret { + background-color: transparent; + transition: none; + border: 1px solid transparent; +} + +.menu__caret:hover { + border-color: rgba(44, 49, 58, 0.8); + background-color: #fff; +} + +[data-theme="dark"] .menu__caret:hover { + border-color: rgb(67, 68, 73); + background-color: #2c313a; +} + /* Content */ .container { @@ -289,6 +382,10 @@ code { color: #2c313a; } +[data-theme="dark"] .pagination-nav__label { + color: #fff; +} + .pagination-nav__link { border: none; border-bottom: 4px solid transparent; @@ -299,13 +396,34 @@ code { } .pagination-nav__link:hover { - border-bottom-color: rgb(38, 76, 214); + border-bottom-color: #cbcdde; } +[data-theme="dark"] .pagination-nav__link:hover { + border-bottom-color: #69707d; +} + +.pagination-nav__link:hover .pagination-nav__sublabel, .pagination-nav__link:hover .pagination-nav__label { color: rgb(38, 76, 214); } +[data-theme="dark"] .pagination-nav__link:hover .pagination-nav__sublabel, +[data-theme="dark"] .pagination-nav__link:hover .pagination-nav__label { + color: var(--ifm-link-color); +} + +/* Cards */ + +.card { + border-radius: 0 !important; + box-shadow: none !important; +} + +[data-theme="light"] .card { + border-color: #cbcdde; +} + /* Tabs */ .tabs { @@ -336,6 +454,66 @@ code { color: #ffffff; } +/* API playground tabs */ + +.responseTabsListContainer_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module, +.schemaTabsListContainer_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaTabs-styles-module { + overflow-x: initial !important; + overflow-y: initial !important; +} + +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaTabs-styles-module, +.mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module, +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module { + background-color: transparent !important; + border: none !important; + color: #2c313a !important; + border-radius: 0 !important; + opacity: 1 !important; +} + +[data-theme="dark"] + .tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaTabs-styles-module, +[data-theme="dark"] + .mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module, +[data-theme="dark"] + .tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module { + color: #fff !important; +} + +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module { + opacity: 1 !important; +} + +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaTabs-styles-module:hover, +.mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module:hover, +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module:hover, +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module:hover { + background-color: #f3f7fb !important; +} + +[data-theme="dark"] + .tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaTabs-styles-module:hover, +[data-theme="dark"] + .mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module:hover, +[data-theme="dark"] + .tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module:hover, +[data-theme="dark"] + .tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module:hover { + background-color: #2c313a !important; +} + +.active_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module, +.schemaTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaTabs-styles-module { + box-shadow: #7027f6 0px 1px 0px; +} + +/* Hide application/json tab */ +.mimeTabsTopSection_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module, +.tabItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module:only-child { + display: none !important; +} + /* Tables */ table { @@ -427,79 +605,142 @@ table td { border-radius: 0; } -/* API specs */ +/* API Playground panels */ -.api-method > .menu__link { - align-items: center; - justify-content: start; +.theme-api-markdown .details__demo-panel, +.optionsPanel_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-Request-styles-module { + border-radius: 0 !important; + background: transparent !important; } -.api-method > .menu__link::before { - width: 50px; - height: 20px; - font-size: 12px; - line-height: 20px; - text-transform: uppercase; - font-weight: 600; - border-radius: 0.25rem; - border: 1px solid; - margin-right: var(--ifm-spacing-horizontal); - text-align: center; - flex-shrink: 0; - border-color: transparent; - color: white; +.theme-api-markdown .details__demo-panel { + border: 1px solid #cbcdde !important; +} + +[data-theme="dark"] .theme-api-markdown .details__demo-panel { + border-color: #69707d !important; + background-color: #282a36 !important; +} + +.formItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FormItem-styles-module + code { + border: none !important; +} + +.details__request-summary:hover > h4 { + text-decoration: underline; +} + +.optionsPanel_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-Server-styles-module { + background: transparent !important; +} + +.details__request-summary > button, +.floatingButton_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FloatingButton-styles-module + > button { + opacity: 1 !important; + visibility: visible !important; + background-color: transparent !important; + transition: all 0.2s !important; + font-weight: 400; + font-size: 14px !important; + padding: 4px 8px !important; + height: 24px !important; + line-height: 0 !important; +} + +.floatingButton_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FloatingButton-styles-module + > button { + border: 1px solid #cbcdde !important; + color: #2c313a !important; +} + +[data-theme="dark"] + .floatingButton_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FloatingButton-styles-module + > button { + border-color: #69707d !important; + color: #cbcdde !important; +} + +.details__request-summary > button { + border: 1px solid rgba(38, 76, 214, 0.5) !important; + color: rgb(38, 76, 214) !important; } -.details__demo-panel { - --openapi-input-background: #ffffff; - --docusaurus-details-decoration-color: #FFFFF; +[data-theme="dark"] .details__request-summary > button { + border-color: var(--ifm-color-primary) !important; + color: var(--ifm-color-primary) !important; } -[data-theme="dark"] .details__demo-panel { - --openapi-input-background: #282a36; + +.details__request-summary > button:hover, +.floatingButton_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FloatingButton-styles-module + > button:hover { + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, + rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; } -.details__demo-panel [contenteditable]:focus { - border: 2px solid var(--ifm-color-primary); +.selectInput_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FormSelect-styles-module { + margin-top: 12px !important; + appearance: none; + border-radius: 4px !important; + border: 1px solid #cbcdde !important; + background-color: transparent !important; + width: 100% !important; + padding: 8px 16px !important; + font-size: 14px !important; } -.details__demo-panel div[class^="optionsPanel_"]::before { - content: "Fill out the parameters below to test an API request"; - color: var(--ifm-color-emphasis-600); +.input_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FormTextInput-styles-module { + appearance: none; + border-radius: 4px !important; + border: 1px solid #cbcdde !important; + background-color: transparent !important; + width: 100% !important; + padding: 8px 16px !important; + font-size: 14px !important; } -.post > .menu__link::before { - content: "[POST]"; - color: var(--openapi-code-green); +[data-theme="dark"] + .selectInput_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FormSelect-styles-module, +[data-theme="dark"] + .input_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-FormTextInput-styles-module { + border-color: #69707d !important; + color: #cbcdde !important; } -.get > .menu__link::before { - content: "[GET]"; - color: var(--ifm-color-primary); +.playgroundContainer_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-LiveEditor-styles-module { + box-shadow: none !important; + border-radius: 0 !important; + border: 1px solid #cbcdde !important; } -.delete > .menu__link::before { - content: "[DEL]"; - color: var(--openapi-code-red); +[data-theme="dark"] + .playgroundContainer_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiDemoPanel-LiveEditor-styles-module { + border-color: #69707d !important; } -.put > .menu__link::before { - content: "[PUT]"; - color: var(--openapi-code-blue); +/* API Playground accordions */ +.schemaItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaItem-styles-module:hover { + background-color: transparent !important; } -.patch > .menu__link::before { - content: "[PATCH]"; - color: var(--openapi-code-orange); +.schemaItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaItem-styles-module:has( + details + ) + summary:hover, +.details_node_modules-\@docusaurus-theme-common-lib-components-Details-styles-module + > summary:hover { + text-decoration: underline; } -.head > .menu__link::before { - content: "[HEAD]"; - color: var(--ifm-color-secondary-darkest); +.details_node_modules-\@docusaurus-theme-classic-lib-theme-Details-styles-module + > summary::before, +.details_node_modules-\@docusaurus-theme-classic-lib-theme-Details-styles-module + > div { + transition: none !important; } -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); +.schemaItem_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-SchemaItem-styles-module + code { + border: none !important; } From d1ff22d57d96ce8ffedac80fe5a2a869ccd2ac12 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 15 Aug 2023 21:56:53 -0700 Subject: [PATCH 12/13] Remove Vectara logo from API playground introduction page. --- www/src/css/custom.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 53d4a6b71..02359c80b 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -227,6 +227,11 @@ pre { margin-bottom: 12px; } +h1 + + .themedImage--light_node_modules-\@docusaurus-theme-classic-lib-theme-ThemedImage-styles-module { + display: none !important; +} + /* Side nav */ .theme-doc-sidebar-menu { From de9cfc76eacded25683223e1a87e28c76b1194a4 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 16 Aug 2023 10:33:53 -0700 Subject: [PATCH 13/13] Fix page edit button in dark mode. --- www/src/css/custom.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/www/src/css/custom.css b/www/src/css/custom.css index 02359c80b..d39cd9436 100644 --- a/www/src/css/custom.css +++ b/www/src/css/custom.css @@ -367,11 +367,21 @@ h1 color: #2c313a; } +[data-theme="dark"] .theme-edit-this-page { + border-color: #69707d; + color: #fff; +} + .theme-edit-this-page:hover { color: rgb(38, 76, 214); border-color: rgb(38, 76, 214); } +[data-theme="dark"] .theme-edit-this-page:hover { + color: var(--ifm-link-color); + border-color: var(--ifm-link-color); +} + .theme-edit-this-page svg { display: none; }