From d9ea05d54fd39727f6d95d446be3973ac1e506f8 Mon Sep 17 00:00:00 2001 From: Prasad Bhat Date: Thu, 24 Jul 2025 16:49:42 +0530 Subject: [PATCH 1/3] docs: added custom css and icons and images --- docs/overview/introduction.md | 62 +- .../YamlEditor/YamlEditor.module.css | 235 +++ src/components/YamlEditor/YamlEditor.tsx | 14 +- src/css/custom.css | 1506 ++++++++++++++++- static/img/Icons/Icons.png | Bin 0 -> 1686 bytes static/img/Icons/Tip.png | Bin 0 -> 487 bytes static/img/Icons/Vector.png | Bin 0 -> 478 bytes static/img/Icons/Warning.png | Bin 0 -> 1631 bytes static/img/overview/Azure.png | Bin 0 -> 1864 bytes static/img/overview/Bitbucket.png | Bin 0 -> 1468 bytes static/img/overview/Github.png | Bin 0 -> 3020 bytes static/img/overview/Gitlab.png | Bin 0 -> 1780 bytes static/img/overview/Jira.png | Bin 0 -> 1756 bytes static/img/overview/Linear.png | Bin 0 -> 2308 bytes 14 files changed, 1771 insertions(+), 46 deletions(-) create mode 100644 src/components/YamlEditor/YamlEditor.module.css create mode 100644 static/img/Icons/Icons.png create mode 100644 static/img/Icons/Tip.png create mode 100644 static/img/Icons/Vector.png create mode 100644 static/img/Icons/Warning.png create mode 100644 static/img/overview/Azure.png create mode 100644 static/img/overview/Bitbucket.png create mode 100644 static/img/overview/Github.png create mode 100644 static/img/overview/Gitlab.png create mode 100644 static/img/overview/Jira.png create mode 100644 static/img/overview/Linear.png diff --git a/docs/overview/introduction.md b/docs/overview/introduction.md index f937ac67..0cc1a925 100644 --- a/docs/overview/introduction.md +++ b/docs/overview/introduction.md @@ -9,6 +9,7 @@ description: slug: "/" --- + # Introduction This page provides a conceptual introduction to CodeRabbit. For a hands-on tutorial, see [Quickstart](/getting-started/quickstart/). @@ -18,7 +19,14 @@ This page provides a conceptual introduction to CodeRabbit. For a hands-on tutor Developers can interact directly with the CodeRabbit bot within their existing Git platform's pull request interface to add context, ask questions, or even have the bot generate code. Over time, CodeRabbit learns from user input and improves its suggestions.
- +
## Core features @@ -58,21 +66,48 @@ No matter how you tune and customize CodeRabbit, its default settings make it us CodeRabbit integrates in just a few clicks with many popular Git platforms: -- GitHub, GitHub Enterprise Cloud, GitHub Enterprise Server, -- GitLab, GitLab Self-Managed -- Azure DevOps -- Bitbucket Cloud - +
+
+ GitHub, including GitHub Enterprise Server + GitHub, including GitHub Enterprise Server +
+
+ GitLab, including self-managed GitLab + GitLab, including self-managed GitLab +
+
+ Bitbucket Cloud + Bitbucket Cloud +
+
+ Azure DevOps + Azure DevOps +
+
For more information, see [Supported Git Platforms](/platforms/). ### Issue-management integration You can integrate CodeRabbit with issue-management platforms. This lets you ask CodeRabbit to create tickets during code reviews, or chat with CodeRabbit about your code from within issue comments. Compatible platforms include the following: -- GitHub Issues -- GitLab Issues -- Jira -- Linear +
+
+ GitHub Issues + GitHub Issues +
+
+ GitLab Issues + GitLab Issues +
+
+ Jira + Jira +
+
+ Linear + Linear +
+
For more information, see [Issue Creation](/guides/issue-creation) and [Issue Chat](/guides/issue-chat). @@ -83,6 +118,7 @@ CodeRabbit collects only the minimum amount of information needed to provide you - All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes. - We don't use your code, code reviews, or other collected data to train LLMs. - CodeRabbit doesn't share any collected customer data with third parties. +- Works with contributors through natural-language conversation in comments. - We keep all customer data confidential, and isolated by organization. - Our data collection and storage practices comply with SOC 2 and GDPR standards. @@ -92,7 +128,9 @@ For more information about how we protect your data, see [the CodeRabbit Trust C Public repositories can use the Pro tier of CodeRabbit at no charge, including all of the code-review features described on this page. Rate limits might apply. -For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support. For more information, see [Pricing](https://www.coderabbit.ai/pricing). +For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support. + +For more information, see [Pricing](https://www.coderabbit.ai/pricing). ## Review local changes from within VSCode @@ -103,7 +141,5 @@ For more information, see [Review local changes](/code-editors). ## What's next - [Quickstart](/getting-started/quickstart/) lets you experience your first CodeRabbit code review first-hand. - - [Review local changes](/code-editors) guides you through installing and using a subset of CodeRabbit features directly from your code editor. - - [Why CodeRabbit?](/overview/why-coderabbit) dives further into the philosophies and technologies that drive CodeRabbit. diff --git a/src/components/YamlEditor/YamlEditor.module.css b/src/components/YamlEditor/YamlEditor.module.css new file mode 100644 index 00000000..29f496bd --- /dev/null +++ b/src/components/YamlEditor/YamlEditor.module.css @@ -0,0 +1,235 @@ +.yamlEditorContainer { + margin: 1rem 0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} + +.yamlEditor { + border-radius: 8px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace !important; + font-size: 14px !important; + line-height: 1.5 !important; +} + +/* Dark theme styling to match the image - using higher specificity */ +.yamlEditor .ace_editor, +.yamlEditor .ace_editor.ace_terminal, +.yamlEditor .ace_scroller, +.yamlEditor .ace_content { + background-color: #000000 !important; + color: #ffffff !important; +} + +.yamlEditor .ace_gutter, +.yamlEditor .ace_editor.ace_terminal .ace_gutter { + background-color: #000000 !important; + color: #6c6c6c !important; + border-right: 1px solid #404040 !important; +} + +.yamlEditor .ace_gutter-active-line, +.yamlEditor .ace_editor.ace_terminal .ace_gutter-active-line { + background-color: #404040 !important; +} + +.yamlEditor .ace_line, +.yamlEditor .ace_editor.ace_terminal .ace_line { + background-color: #000000 !important; +} + +.yamlEditor .ace_cursor, +.yamlEditor .ace_editor.ace_terminal .ace_cursor { + color: #ffffff !important; +} + +.yamlEditor .ace_selection, +.yamlEditor .ace_editor.ace_terminal .ace_selection { + background-color: #44475a !important; +} + +.yamlEditor .ace_selected-word, +.yamlEditor .ace_editor.ace_terminal .ace_selected-word { + background-color: #44475a !important; +} + +.yamlEditor .ace_active-line, +.yamlEditor .ace_editor.ace_terminal .ace_active-line { + background-color: #44475a !important; +} + +/* Additional overrides for all possible background elements */ +.yamlEditor .ace_layer, +.yamlEditor .ace_text-layer, +.yamlEditor .ace_marker-layer, +.yamlEditor .ace_cursor-layer { + background-color: #000000 !important; +} + +/* Global override for any remaining elements */ +.yamlEditor * { + background-color: transparent !important; +} + +.yamlEditor .ace_editor, +.yamlEditor .ace_editor *, +.yamlEditor .ace_scroller, +.yamlEditor .ace_content { + background-color: #000000 !important; +} + +/* YAML syntax highlighting to match the image - using higher specificity */ +.yamlEditor .ace_comment, +.yamlEditor .ace_editor.ace_terminal .ace_comment { + color: #999999 !important; + font-style: italic !important; +} + +/* Target lines that start with # (comments) */ +.yamlEditor .ace_text-layer .ace_line:first-child, +.yamlEditor .ace_text-layer .ace_line:first-child * { + color: #999999 !important; + font-style: italic !important; +} + +/* More specific targeting for any element containing comment-like content */ +.yamlEditor [class*="comment"], +.yamlEditor [class*="Comment"] { + color: #999999 !important; + font-style: italic !important; +} + +.yamlEditor .ace_string, +.yamlEditor .ace_editor.ace_terminal .ace_string { + color: #ff84d6 !important; +} + +.yamlEditor .ace_constant.ace_numeric, +.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_numeric { + color: #b5cea8 !important; +} + +.yamlEditor .ace_constant.ace_language, +.yamlEditor .ace_editor.ace_terminal .ace_constant.ace_language { + color: #569cd6 !important; + font-weight: bold !important; +} + +.yamlEditor .ace_variable, +.yamlEditor .ace_editor.ace_terminal .ace_variable { + color: #ffffff !important; +} + +.yamlEditor .ace_keyword, +.yamlEditor .ace_editor.ace_terminal .ace_keyword { + color: #ffffff !important; +} + +.yamlEditor .ace_storage, +.yamlEditor .ace_editor.ace_terminal .ace_storage { + color: #ffffff !important; +} + +.yamlEditor .ace_entity.ace_name.ace_tag, +.yamlEditor .ace_editor.ace_terminal .ace_entity.ace_name.ace_tag { + color: #ffffff !important; +} + +.yamlEditor .ace_markup.ace_heading, +.yamlEditor .ace_editor.ace_terminal .ace_markup.ace_heading { + color: #ffffff !important; +} + +/* Light theme support */ +[data-theme="light"] .yamlEditor .ace_editor { + background-color: #ffffff !important; + color: #24292e !important; +} + +[data-theme="light"] .yamlEditor .ace_gutter { + background-color: #f6f8fa !important; + color: #6a737d !important; + border-right: 1px solid #e1e4e8 !important; +} + +[data-theme="light"] .yamlEditor .ace_gutter-active-line { + background-color: #f6f8fa !important; +} + +[data-theme="light"] .yamlEditor .ace_line { + background-color: #ffffff !important; +} + +[data-theme="light"] .yamlEditor .ace_cursor { + color: #24292e !important; +} + +[data-theme="light"] .yamlEditor .ace_selection { + background-color: #c8e1ff !important; +} + +[data-theme="light"] .yamlEditor .ace_selected-word { + background-color: #c8e1ff !important; +} + +[data-theme="light"] .yamlEditor .ace_active-line { + background-color: #f6f8fa !important; +} + +[data-theme="light"] .yamlEditor .ace_comment { + color: #999999 !important; +} + +[data-theme="light"] .yamlEditor .ace_string { + color: #032f62 !important; +} + +[data-theme="light"] .yamlEditor .ace_constant.ace_numeric { + color: #005cc5 !important; +} + +[data-theme="light"] .yamlEditor .ace_constant.ace_language { + color: #d73a49 !important; + font-weight: bold !important; +} + +[data-theme="light"] .yamlEditor .ace_variable { + color: #005cc5 !important; +} + +[data-theme="light"] .yamlEditor .ace_keyword { + color: #d73a49 !important; +} + +[data-theme="light"] .yamlEditor .ace_storage { + color: #d73a49 !important; +} + +[data-theme="light"] .yamlEditor .ace_entity.ace_name.ace_tag { + color: #005cc5 !important; +} + +[data-theme="light"] .yamlEditor .ace_markup.ace_heading { + color: #005cc5 !important; +} + +/* Responsive design */ +@media (max-width: 768px) { + .yamlEditor { + font-size: 12px !important; + } + + .yamlEditorContainer { + margin: 0.8rem 0; + } +} + +@media (max-width: 480px) { + .yamlEditor { + font-size: 11px !important; + } + + .yamlEditorContainer { + margin: 0.6rem 0; + } +} diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx index 533d2d90..7488f8f8 100644 --- a/src/components/YamlEditor/YamlEditor.tsx +++ b/src/components/YamlEditor/YamlEditor.tsx @@ -18,11 +18,15 @@ import React, { useState, useEffect } from "react" import AceEditor from "react-ace" import "ace-builds/src-noconflict/theme-github" +import "ace-builds/src-noconflict/theme-monokai" +import "ace-builds/src-noconflict/theme-terminal" import "ace-builds/src-noconflict/ext-language_tools" import "ace-builds/webpack-resolver" import "ace-builds/src-noconflict/mode-yaml" +import styles from "./YamlEditor.module.css" + import jsYaml from "js-yaml" import Ajv from "ajv" @@ -58,7 +62,7 @@ export default function YamlEditor() { function validateAndSetAnnotations(yaml) { try { - const doc = jsYaml.load(yaml, { strict: true }) + const doc = jsYaml.load(yaml) const isValid = validate(doc) if (!isValid && validate.errors) { @@ -151,24 +155,26 @@ export default function YamlEditor() { } return ( -
+
-
) } diff --git a/src/css/custom.css b/src/css/custom.css index 7365089e..520c9645 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -41,6 +41,16 @@ --ifm-background-color-primary: #f6f6f1; --ifm-background-color-secondary: #e8e8e8; --ifm-breadcrumb-item-background-active: #ffe9e2; + --imf-list-card-background-color: #ffffff; + --imf-list-bullets-color: #25bab1; + --imf-color-background-orange-light: #fffcfb; + --imf-color-border-orange: #ffceb6; + --imf-note-border-color: #25bab1; + --imf-note-background-color: #f1fffe; + --imf-note-text-color: #208682; + --imf-text-color-bg: #e8e8e8; + --imf-text-color: #171717; + --imf-text-button-color-bg: #e8e8e8; } [data-theme="dark"] { @@ -55,6 +65,15 @@ --ifm-background-color-primary: #171717; --ifm-background-color-secondary: #232323; --ifm-breadcrumb-item-background-active: #3f322e; + --imf-list-card-background-color: #232323; + --imf-list-bullets-color: #208682; + --imf-color-background-orange-light: #232323; + --imf-color-border-orange: #232323; + --imf-note-border-color: #208682; + --imf-note-background-color: #252828; + --imf-text-color-bg: #232323; + --imf-text-color: #f5f5f5; + --imf-text-button-color-bg: #232323; } #__docusaurus { @@ -73,27 +92,6 @@ a[docid="docs"] > svg { display: none; } -/* Adjustments for mobile view */ -@media (max-width: 768px) { - /* Reduce the logo size for smaller screens */ - .navbar__logo img { - height: 32px; - align-items: center; - } - - /* Reduce the padding around the logo for smaller screens */ - .navbar__logo { - padding: 2px; /* Adjust the padding for smaller screens */ - } -} - -/* Center the Discord link within its parent */ -.navbar__items.navbar__items--right { - display: flex; - justify-content: center; - align-items: center; -} - [data-theme="light"] img[src$="#gh-dark-mode-only"], [data-theme="dark"] img[src$="#gh-light-mode-only"] { display: none; @@ -129,7 +127,12 @@ a[docid="docs"] > svg { display: none; } -/* Adjustments for mobile view */ +.navbar__items.navbar__items--right { + display: flex; + justify-content: center; + align-items: center; +} + @media (max-width: 768px) { /* Reduce the logo size for smaller screens */ .navbar__logo img { @@ -139,15 +142,12 @@ a[docid="docs"] > svg { /* Reduce the padding around the logo for smaller screens */ .navbar__logo { - padding: 2px; /* Adjust the padding for smaller screens */ + padding: 2px; } -} -/* Center the Discord link within its parent */ -.navbar__items.navbar__items--right { - display: flex; - justify-content: center; - align-items: center; + .markdown { + padding-left: 1rem; + } } /* Light mode Discord icon */ @@ -304,6 +304,17 @@ a[docid="docs"] > svg { .pagination-nav { display: none; } +.language-text { + background-color: var(--imf-text-color-bg) !important; +} +.language-text .token-line { + color: var(--imf-text-color) !important; +} +.language-text [class*="buttonGroup"] button { + background-color: var(--imf-text-color-bg) !important; + color: var(--imf-text-color) !important; + border-radius: 4px; +} /* ===== MARKDOWN STYLES ===== */ .theme-doc-markdown.markdown { line-height: 1.8rem; @@ -335,3 +346,1440 @@ a[docid="docs"] > svg { cursor: default; background-color: var(--ifm-breadcrumb-item-background-active); } + +/* Add left spacing to main content */ +.markdown { + padding-left: 1.5rem; +} + +/* Align numbered lists with other content */ +.markdown ol { + padding-left: 1.2rem; + margin-left: 0; +} + +.markdown ol > li { + margin-left: 0; + padding-left: 0.5rem; +} + +/* ===== PLATFORM GRID STYLES ===== */ +.platform-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin: 1.5rem 0; +} + +.platform-card { + display: flex; + align-items: center; + background: var(--imf-list-card-background-color); + border-radius: 8px; + padding: 1.3rem; + border: 2px solid var(--ifm-background-color-secondary); +} + +.platform-icon { + width: 32px; + height: 32px; + margin-right: 16px; +} + +[data-theme="dark"] .platform-icon { + filter: invert(1); +} + +/* Responsive design for mobile */ +@media (max-width: 768px) { + .platform-grid { + grid-template-columns: 1fr; + gap: 0.75rem; + } + + .platform-card { + padding: 1rem; + } + + .platform-icon { + width: 24px; + height: 24px; + margin-right: 12px; + } +} + +/* ===== PLATFORM INTEGRATION GRID STYLES ===== */ +/* Grid layout for displaying supported Git platforms and issue management integrations */ +.platform-integration-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin: 1.5rem 0; +} + +.platform-integration-card { + display: flex; + align-items: center; + padding: 1.5rem; + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 8px; + background-color: var(--ifm-background-surface-color); +} + +.platform-integration-icon { + width: 32px; + height: 32px; + margin-right: 1rem; + flex-shrink: 0; +} + +.platform-integration-card span { + font-size: 1rem; + font-weight: 500; + color: var(--ifm-color-content); + line-height: 1.4; +} + +/* Dark mode adjustments for platform icons */ +[data-theme="dark"] .platform-integration-icon { + filter: invert(1) brightness(0.9); +} + +/* Dark mode styling for platform integration cards */ +[data-theme="dark"] .platform-integration-card { + border-color: var(--ifm-color-emphasis-400); + background-color: var(--ifm-background-color-secondary); +} + +/* Responsive design for mobile */ +@media (max-width: 768px) { + .platform-integration-grid { + grid-template-columns: 1fr; + gap: 0.75rem; + } + + .platform-integration-card { + padding: 1.25rem; + } + + .platform-integration-icon { + width: 28px; + height: 28px; + margin-right: 0.75rem; + } +} + +@media (max-width: 480px) { + .platform-integration-card { + padding: 1rem; + } + + .platform-integration-icon { + width: 24px; + height: 24px; + margin-right: 0.5rem; + } + + .platform-integration-card span { + font-size: 0.9rem; + } +} + +/* ===== PLATFORM TABLES STYLING ===== */ +.markdown table { + display: table; + width: 100%; + border-collapse: separate; + border-spacing: 0; + background: #ffffff !important; + border: none !important; + table-layout: auto; + margin: 2rem 0; + border-radius: 12px !important; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* Create scrollable wrapper for tables on mobile */ +@media (max-width: 768px) { + .markdown { + overflow-x: auto; + } + + .markdown table { + min-width: 600px; + width: auto; + margin: 1.5rem 0; + display: table; + } +} + +.markdown table thead { + background: #ffffff !important; +} + +.markdown table tbody { + background: #ffffff !important; +} + +.markdown table tr { + background: #ffffff !important; + border: none !important; +} + +.markdown table th { + background: #ffffff !important; + color: var(--ifm-heading-color); + padding: 1.5rem 2rem 1.5rem 2rem; + text-align: left; + font-weight: 600; + font-size: 1.1rem; + border: none !important; + border-bottom: 1px solid #e5e7eb !important; + border-right: 1px solid #f3f4f6 !important; + box-sizing: border-box; + margin: 0; +} + +.markdown table th:first-child { + border-top-left-radius: 12px; +} + +.markdown table th:last-child { + border-bottom: 1px solid #e5e7eb !important; + border-right: none !important; + border-top-right-radius: 12px; +} + +.markdown table td { + padding: 1.5rem 2rem 1.5rem 2rem; + border: none !important; + border-bottom: 1px solid #f3f4f6 !important; + border-right: 1px solid #f3f4f6 !important; + color: var(--ifm-color-content); + vertical-align: middle; + background: #ffffff !important; + box-sizing: border-box; + font-size: 1rem; +} + +.markdown table td:last-child { + border-bottom: 1px solid #f3f4f6 !important; + border-right: none !important; +} + +.markdown table tbody tr:last-child td { + border-bottom: none !important; +} + +.markdown table tbody tr:last-child td:first-child { + border-bottom-left-radius: 12px; +} + +.markdown table tbody tr:last-child td:last-child { + border-bottom-right-radius: 12px; +} + +.markdown table tbody tr:hover { + background: #ffffff !important; +} + +.markdown table tbody tr:hover td { + background: #ffffff !important; +} + +/* Responsive design for tables */ +@media (max-width: 768px) { + .markdown table th { + padding: 1.2rem 1.5rem; + font-size: 1rem; + white-space: nowrap; + } + + .markdown table td { + padding: 1.2rem 1.5rem; + font-size: 0.95rem; + white-space: nowrap; + } +} + +@media (max-width: 480px) { + .markdown table { + min-width: 500px; + margin: 1rem 0; + font-size: 0.9rem; + } + + .markdown table th { + padding: 1rem 1.2rem; + font-size: 0.95rem; + white-space: nowrap; + } + + .markdown table td { + padding: 1rem 1.2rem; + font-size: 0.9rem; + white-space: nowrap; + } + + .support-icon { + width: 16px !important; + height: 16px !important; + margin-right: 0.5rem !important; + } +} + +[data-theme="dark"] .markdown table { + background: #232323 !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .markdown table thead { + background: #232323 !important; +} + +[data-theme="dark"] .markdown table tbody { + background: #232323 !important; +} + +[data-theme="dark"] .markdown table tr { + background: #232323 !important; + border: none !important; +} + +[data-theme="dark"] .markdown table th { + background: #232323 !important; + border: none !important; + border-bottom: 1px solid #404040 !important; + border-right: 1px solid #363636 !important; +} + +[data-theme="dark"] .markdown table th:last-child { + border-right: none !important; +} + +[data-theme="dark"] .markdown table td { + border: none !important; + border-bottom: 1px solid #363636 !important; + border-right: 1px solid #363636 !important; + background: #232323 !important; +} + +[data-theme="dark"] .markdown table td:last-child { + border-right: none !important; +} + +[data-theme="dark"] .markdown table tbody tr:last-child td { + border-bottom: none !important; +} + +[data-theme="dark"] .markdown table tbody tr:hover { + background: #232323 !important; +} + +[data-theme="dark"] .markdown table tbody tr:hover td { + background: #232323 !important; +} + +/* Support icon styling */ +.support-icon { + display: inline; + margin-right: 0.75rem; + vertical-align: middle; + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.markdown table td .support-icon + * { + color: var(--ifm-color-content); + font-weight: 400; +} + +[data-theme="dark"] .markdown table td .support-icon + * { + color: var(--ifm-color-content); +} + +@media (max-width: 768px) { + .support-icon { + width: 18px; + height: 18px; + } +} + +@media (max-width: 480px) { + .support-icon { + width: 16px; + height: 16px; + } +} + +/* ===== REUSABLE NOTE COMPONENT STYLES ===== */ +.note-box { + border: 2px solid #25bab1; + border-radius: 12px; + background-color: #f1fffe; + padding: 1rem 1.2rem; + margin: 1.5rem 0; +} + +[data-theme="dark"] .note-box { + border: 2px solid #208682; + background-color: #252828; +} + +/* Responsive design for note box */ +@media (max-width: 768px) { + .note-box { + padding: 0.8rem 1rem; + margin: 1rem 0; + font-size: 0.95rem; + border-radius: 10px; + } + + .note-icon { + width: 18px; + height: 18px; + } +} + +@media (max-width: 480px) { + .note-box { + padding: 0.7rem 0.8rem; + margin: 0.8rem 0; + font-size: 0.9rem; + border-radius: 8px; + } + + .note-icon { + width: 16px; + height: 16px; + } +} + + + +/* ===== WARNING BOX STYLING ===== */ + +.note-header { + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +.note-icon { + width: 1.2rem; + height: 1.2rem; + margin-right: 0.5rem; +} + +.note-title { + color: #208682; + font-weight: 600; + font-size: 1rem; + margin: 0; +} + +.note-content { + color: var(--ifm-color-content); + line-height: 1.6; + margin: 0; +} + +.note-content a { + color: var(--ifm-color-primary); + text-decoration: none; + font-weight: 500; +} + +.note-content a:hover { + text-decoration: underline; +} + + +/* ===== DOCUSAURUS BLOCKQUOTE OVERRIDE ===== */ +/* Override standard markdown blockquotes (>) to match custom design */ +.markdown blockquote { + border-left: 3px solid #9b9b9b; + background-color: transparent; + padding: 1.2rem 1.5rem; + margin: 1.5rem 0; + color: var(--ifm-color-content); + line-height: 1.6; + border-radius: 0; + font-style: normal; + position: relative; +} + +.markdown blockquote p { + margin: 0; + line-height: 1.6; +} + +.markdown blockquote p:not(:last-child) { + margin-bottom: 1rem; +} + +/* Dark theme support for blockquotes */ +[data-theme="dark"] .markdown blockquote { + background-color: #2a2a2a; + border-left: 4px solid #666666; +} + +/* Responsive design for blockquotes */ +@media (max-width: 768px) { + .markdown blockquote { + padding: 1rem 1.2rem; + margin: 1.2rem 0; + border-left-width: 3px; + } +} + +@media (max-width: 480px) { + .markdown blockquote { + padding: 0.8rem 1rem; + margin: 1rem 0; + border-left-width: 3px; + } +} + + +/* ===== REUSABLE CHAT BUBBLE STYLES ===== */ +/* Simple HTML/CSS chat bubble styling to match original ChatBubble component */ +.custom-chat-bubble { + background: #f6f7f8; + border: 1px solid #e0e1e2; + color: var(--imf-text-color); + border-radius: 6px; + padding: 1em 1.2em; + margin: 1em 0; + font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace; + font-size: 0.98em; + white-space: pre-wrap; + word-break: break-word; + position: relative; +} + +.custom-chat-bubble .chat-content { + padding-right: 2.5rem; +} + +.custom-chat-bubble .copy-button { + position: absolute; + top: 0.75rem; + right: 0.75rem; + background: rgba(255, 255, 255, 0.1); + border: none; + border-radius: 4px; + color: var(--imf-text-color); + cursor: pointer; + padding: 0.5rem; + opacity: 0.7; + transition: + opacity 0.2s ease, + background 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.custom-chat-bubble .copy-button:hover { + opacity: 1; + background: rgba(255, 255, 255, 0.2); +} + +.custom-chat-bubble .copy-button:active { + transform: scale(0.95); +} + +/* Responsive design */ +@media (max-width: 768px) { + .custom-chat-bubble { + padding: 0.8rem 1rem; + font-size: 0.95rem; + } + + .custom-chat-bubble .chat-content { + padding-right: 2.2rem; + } + + .custom-chat-bubble .copy-button { + top: 0.6rem; + right: 0.6rem; + padding: 0.4rem; + } +} + +@media (max-width: 480px) { + .custom-chat-bubble { + padding: 0.7rem 0.8rem; + font-size: 0.9rem; + } + + .custom-chat-bubble .chat-content { + padding-right: 2rem; + } + + .custom-chat-bubble .copy-button { + top: 0.5rem; + right: 0.5rem; + padding: 0.3rem; + } +} + +[data-theme="dark"] .custom-chat-bubble { + background: #232323; + border: 1px solid #363636; +} + +[data-theme="dark"] .custom-chat-bubble .copy-button { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; +} + +/* new css changes */ + +/* info component */ +.theme-admonition.theme-admonition-info { + background-color: #e3f2fd !important; + border: 2px solid #4cb3d4 !important; + padding: 16px !important; + border-radius: 8px !important; + font-family: "Roboto", sans-serif !important; + margin: 1.5rem 0 !important; +} + +.theme-admonition.theme-admonition-info p { + color: #333 !important; + font-size: 1rem !important; + line-height: 1.6 !important; +} + +.theme-admonition.theme-admonition-info a { + color: #1976d2 !important; + text-decoration: none !important; +} + +.theme-admonition.theme-admonition-info a:hover { + text-decoration: underline !important; +} + +.theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { + color: #4cb3d4 !important; + display: flex !important; + align-items: center !important; + font-size: 1rem !important; + flex-direction: row !important; + text-transform: capitalize !important; +} + +.theme-admonition.theme-admonition-info .admonitionIcon_Rf37 svg { + display: block !important; + color: #4cb3d4 !important; + fill: #4cb3d4 !important; + width: 16px !important; + height: 16px !important; +} + +/* Dark theme support for info component */ +[data-theme="dark"] .theme-admonition.theme-admonition-info { + background-color: #252828 !important; + border: 2px solid #4cb3d4 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-info p { + color: #f5f5f5 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-info a { + color: #64b5f6 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { + color: #4cb3d4 !important; +} + +/* Responsive design for info component */ +@media (max-width: 768px) { + .theme-admonition.theme-admonition-info { + padding: 12px !important; + margin: 1rem 0 !important; + border-radius: 6px !important; + } + + .theme-admonition.theme-admonition-info p { + font-size: 0.95rem !important; + } + + .theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { + font-size: 0.95rem !important; + } + + .theme-admonition.theme-admonition-info .admonitionIcon_Rf37 { + width: 18px !important; + height: 18px !important; + } +} + +@media (max-width: 480px) { + .theme-admonition.theme-admonition-info { + padding: 10px !important; + margin: 0.8rem 0 !important; + border-radius: 4px !important; + } + + .theme-admonition.theme-admonition-info p { + font-size: 0.9rem !important; + line-height: 1.5 !important; + } + + .theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { + font-size: 0.9rem !important; + } + + .theme-admonition.theme-admonition-info .admonitionIcon_Rf37 { + width: 16px !important; + height: 16px !important; + } +} + +/* note component */ +.theme-admonition.theme-admonition-note { + background-color: #eaf6f4 !important; + border: 2px solid #00b8a9 !important; + padding: 16px !important; + border-radius: 8px !important; + font-family: "Roboto", sans-serif !important; + margin: 1.5rem 0 !important; +} + +.theme-admonition.theme-admonition-note p { + color: #333 !important; + font-size: 1rem !important; + line-height: 1.6 !important; +} + +.theme-admonition.theme-admonition-note a { + color: #ff6600 !important; + text-decoration: none !important; +} + +.theme-admonition.theme-admonition-note a:hover { + text-decoration: underline !important; +} +.admonitionHeading_Gvgb { + color: #208682; + display: flex; + align-items: center; + font-size: 1rem !important; + + flex-direction: row; + text-transform: capitalize !important; +} + +.admonitionIcon_Rf37 svg { + display: none !important; +} + +.theme-admonition.theme-admonition-note .admonitionIcon_Rf37 { + background-image: url("/static/img/Icons/Icons.png"); + background-position: center; + width: 20px; + height: 20px; + background-size: cover; +} + +/* Dark theme support for note component */ +[data-theme="dark"] .theme-admonition.theme-admonition-note { + background-color: #252828 !important; + border: 2px solid #208682 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-note p { + color: #f5f5f5 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-note a { + color: #ff865b !important; +} + +[data-theme="dark"] .admonitionHeading_Gvgb { + color: #25bab1 !important; +} + +/* Responsive design for note component */ +@media (max-width: 768px) { + .theme-admonition.theme-admonition-note { + padding: 12px !important; + margin: 1rem 0 !important; + border-radius: 6px !important; + } + + .theme-admonition.theme-admonition-note p { + font-size: 0.95rem !important; + } + + .admonitionHeading_Gvgb { + font-size: 0.95rem !important; + } + + .theme-admonition.theme-admonition-note .admonitionIcon_Rf37 { + width: 18px !important; + height: 18px !important; + } +} + +@media (max-width: 480px) { + .theme-admonition.theme-admonition-note { + padding: 10px !important; + margin: 0.8rem 0 !important; + border-radius: 4px !important; + } + + .theme-admonition.theme-admonition-note p { + font-size: 0.9rem !important; + line-height: 1.5 !important; + } + + .admonitionHeading_Gvgb { + font-size: 0.9rem !important; + } + + .theme-admonition.theme-admonition-note .admonitionIcon_Rf37 { + width: 16px !important; + height: 16px !important; + } +} + +/* ===== TIP COMPONENT STYLING ===== */ +/* Style Docusaurus :::tip admonitions to match design */ +.theme-admonition.theme-admonition-tip { + background-color: #FFFCFB !important; + border: 2px solid #ff865b !important; + padding: 1rem 1.25rem !important; + border-radius: 16px !important; + font-family: "Roboto", sans-serif !important; + margin: 1.5rem 0 !important; +} + +.theme-admonition.theme-admonition-tip p { + color: #333 !important; + font-size: 0.9rem !important; + line-height: 1.6 !important; + margin: 0 !important; +} + +.theme-admonition.theme-admonition-tip a { + color: #ff570a !important; + text-decoration: none !important; +} + +.theme-admonition.theme-admonition-tip a:hover { + text-decoration: underline !important; +} + +.theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { + color: #ff570a !important; + display: flex !important; + align-items: center !important; + font-size: 1.1rem !important; + font-weight: 600 !important; + margin-bottom: 0.5rem !important; + text-transform: capitalize !important; +} + +.theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 svg { + display: none !important; +} + +.theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23ff570a'/%3E%3C/svg%3E") !important; + background-position: center !important; + background-repeat: no-repeat !important; + background-size: contain !important; + width: 20px !important; + height: 20px !important; + margin-right: 0.5rem !important; +} + +/* Dark theme support for tip component */ +[data-theme="dark"] .theme-admonition.theme-admonition-tip { + background-color: #232323 !important; + border: 2px solid #e97c57 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-tip p { + color: #f5f5f5 !important; + font-size: 0.9rem !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-tip a { + color: #ff865b !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { + color: #e97c57 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23e97c57'/%3E%3C/svg%3E") !important; + width: 20px !important; + height: 20px !important; +} + +/* Responsive design for tip component */ +@media (max-width: 768px) { + .theme-admonition.theme-admonition-tip { + padding: 0.9rem 1.1rem !important; + margin: 1rem 0 !important; + border-radius: 12px !important; + } + + .theme-admonition.theme-admonition-tip p { + font-size: 0.85rem !important; + } + + .theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { + font-size: 1rem !important; + margin-bottom: 0.4rem !important; + } + + .theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { + width: 18px !important; + height: 18px !important; + margin-right: 0.4rem !important; + } +} + +@media (max-width: 480px) { + .theme-admonition.theme-admonition-tip { + padding: 0.8rem 1rem !important; + margin: 0.8rem 0 !important; + border-radius: 10px !important; + } + + .theme-admonition.theme-admonition-tip p { + font-size: 0.8rem !important; + line-height: 1.5 !important; + } + + .theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { + font-size: 0.95rem !important; + margin-bottom: 0.3rem !important; + } + + .theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { + width: 16px !important; + height: 16px !important; + margin-right: 0.3rem !important; + } +} + +/* ===== WARNING COMPONENT STYLING ===== */ +/* Style Docusaurus :::warning admonitions to match design */ +.theme-admonition.theme-admonition-warning { + background-color: #ffffff !important; + border: 2px solid #f1c232 !important; + padding: 1rem 1.25rem !important; + border-radius: 16px !important; + font-family: "Roboto", sans-serif !important; + margin: 1.5rem 0 !important; +} + +.theme-admonition.theme-admonition-warning p { + color: #333 !important; + font-size: 1rem !important; + line-height: 1.6 !important; + margin: 0 !important; +} + +.theme-admonition.theme-admonition-warning a { + color: #b38705 !important; + text-decoration: none !important; +} + +.theme-admonition.theme-admonition-warning a:hover { + text-decoration: underline !important; +} + +.theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { + color: #b38705 !important; + display: flex !important; + align-items: center !important; + font-size: 1.1rem !important; + font-weight: 600 !important; + margin-bottom: 0.5rem !important; + text-transform: capitalize !important; +} + +.theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 svg { + display: none !important; +} + +.theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 { + background-image: url("/static/img/icons/Warning.png") !important; + background-position: center !important; + background-repeat: no-repeat !important; + background-size: contain !important; + width: 20px !important; + height: 20px !important; + margin-right: 0.5rem !important; +} + +/* Dark theme support for warning component */ +[data-theme="dark"] .theme-admonition.theme-admonition-warning { + background-color: #232323 !important; + border: 2px solid #4b4a47 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-warning p { + color: #f5f5f5 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-warning a { + color: #e9af01 !important; +} + +[data-theme="dark"] .theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { + color: #e9af01 !important; +} + +/* Responsive design for warning component */ +@media (max-width: 768px) { + .theme-admonition.theme-admonition-warning { + padding: 0.9rem 1.1rem !important; + margin: 1rem 0 !important; + border-radius: 12px !important; + } + + .theme-admonition.theme-admonition-warning p { + font-size: 0.95rem !important; + } + + .theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { + font-size: 1rem !important; + margin-bottom: 0.4rem !important; + } + + .theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 { + width: 18px !important; + height: 18px !important; + margin-right: 0.4rem !important; + } +} + +@media (max-width: 480px) { + .theme-admonition.theme-admonition-warning { + padding: 0.8rem 1rem !important; + margin: 0.8rem 0 !important; + border-radius: 10px !important; + } + + .theme-admonition.theme-admonition-warning p { + font-size: 0.9rem !important; + line-height: 1.5 !important; + } + + .theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { + font-size: 0.95rem !important; + margin-bottom: 0.3rem !important; + } + + .theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 { + width: 16px !important; + height: 16px !important; + margin-right: 0.3rem !important; + } +} + +/* ===== DOCUSAURUS CODE BLOCK OVERRIDES ===== */ +/* Override default Docusaurus code blocks to match custom chat-bubble styling */ + +.prism-code, +pre[class*="language-"], +.theme-code-block pre { + background-color: #f6f7f8 !important; + border: 1px solid #e0e1e2 !important; + border-radius: 8px !important; + padding: 0.6rem 0.8rem !important; + margin: 1rem 0 !important; + font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace !important; + font-size: 0.9rem !important; + line-height: 1.2 !important; + color: #333 !important; +} + +.codeBlockContainer_Ckt0, +div[class*="codeBlockContainer"] { + background-color: transparent !important; + border: none !important; + border-radius: 8px !important; + margin: 1rem 0 !important; +} + +.codeBlockContent_biex, +div[class*="codeBlockContent"] { + background-color: transparent !important; + border: none !important; + padding: 0 !important; +} + +.prism-code .token-line, +pre[class*="language-"] .token-line { + color: #333 !important; +} + +/* Style the copy button to match the design */ +.codeBlockContainer_Ckt0 .copyButton_kopz, +div[class*="codeBlockContainer"] button[class*="copyButton"] { + position: absolute !important; + top: 0.75rem !important; + right: 0.75rem !important; + background: rgba(255, 255, 255, 0.8) !important; + border: 1px solid #e0e1e2 !important; + border-radius: 4px !important; + color: #666 !important; + padding: 0.4rem !important; + opacity: 0.8 !important; + transition: opacity 0.2s ease, background 0.2s ease !important; +} + +.codeBlockContainer_Ckt0 .copyButton_kopz:hover, +div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { + opacity: 1 !important; + background: rgba(255, 255, 255, 0.95) !important; +} + +/* Dark theme support for code blocks */ +[data-theme="dark"] .prism-code, +[data-theme="dark"] pre[class*="language-"], +[data-theme="dark"] .theme-code-block pre { + background-color: #232323 !important; + border: 1px solid #363636 !important; + color: #f5f5f5 !important; + padding: 0.6rem 0.8rem !important; + margin: 1rem 0 !important; + line-height: 1.2 !important; +} + +[data-theme="dark"] .codeBlockContainer_Ckt0, +[data-theme="dark"] div[class*="codeBlockContainer"] { + background-color: transparent !important; + border: none !important; + margin: 1rem 0 !important; +} + +[data-theme="dark"] .prism-code .token-line, +[data-theme="dark"] pre[class*="language-"] .token-line { + color: #f5f5f5 !important; +} + +[data-theme="dark"] .codeBlockContainer_Ckt0 .copyButton_kopz, +[data-theme="dark"] div[class*="codeBlockContainer"] button[class*="copyButton"] { + background: rgba(0, 0, 0, 0.6) !important; + border: 1px solid #363636 !important; + color: #f5f5f5 !important; +} + +[data-theme="dark"] .codeBlockContainer_Ckt0 .copyButton_kopz:hover, +[data-theme="dark"] div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { + background: rgba(0, 0, 0, 0.8) !important; +} + +/* Responsive design for code blocks */ +@media (max-width: 768px) { + .prism-code, + pre[class*="language-"], + .theme-code-block pre { + padding: 0.5rem 0.7rem !important; + margin: 0.8rem 0 !important; + font-size: 0.85rem !important; + line-height: 1.15 !important; + border-radius: 6px !important; + } + + .codeBlockContainer_Ckt0, + div[class*="codeBlockContainer"] { + margin: 0.8rem 0 !important; + border-radius: 6px !important; + } + + .codeBlockContainer_Ckt0 .copyButton_kopz, + div[class*="codeBlockContainer"] button[class*="copyButton"] { + top: 0.5rem !important; + right: 0.5rem !important; + padding: 0.3rem !important; + } +} + +@media (max-width: 480px) { + .prism-code, + pre[class*="language-"], + .theme-code-block pre { + padding: 0.4rem 0.6rem !important; + margin: 0.6rem 0 !important; + font-size: 0.8rem !important; + line-height: 1.1 !important; + border-radius: 4px !important; + } + + .codeBlockContainer_Ckt0, + div[class*="codeBlockContainer"] { + margin: 0.6rem 0 !important; + border-radius: 4px !important; + } + + .codeBlockContainer_Ckt0 .copyButton_kopz, + div[class*="codeBlockContainer"] button[class*="copyButton"] { + top: 0.4rem !important; + right: 0.4rem !important; + padding: 0.25rem !important; + } +} + +/* ===== LANGUAGE-SPECIFIC CODE BLOCK STYLING ===== */ +/* Python, YAML, and Bash code blocks with dark background - both light and dark themes */ + +.prism-code[class*="language-python"], +pre[class*="language-python"], +.prism-code[class*="language-yaml"], +pre[class*="language-yaml"], +.prism-code[class*="language-yml"], +pre[class*="language-yml"], +.prism-code[class*="language-bash"], +pre[class*="language-bash"], +.prism-code[class*="language-shell"], +pre[class*="language-shell"] { + background-color: #171717 !important; + color: #E8E8E8 !important; + border: 1px solid #363636 !important; + border-radius: 6px !important; +} + +.prism-code[class*="language-python"] .token-line, +pre[class*="language-python"] .token-line, +.prism-code[class*="language-yaml"] .token-line, +pre[class*="language-yaml"] .token-line, +.prism-code[class*="language-yml"] .token-line, +pre[class*="language-yml"] .token-line { + color: #ffffff !important; +} + +/* Bash token lines - light gray text on dark background for light theme */ +.prism-code[class*="language-bash"] .token-line, +pre[class*="language-bash"] .token-line, +.prism-code[class*="language-shell"] .token-line, +pre[class*="language-shell"] .token-line { + color: #E8E8E8 !important; +} + +/* Copy button styling for language-specific blocks */ +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-python"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yaml"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yml"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) button[class*="copyButton"] { + background: rgba(0, 0, 0, 0.6) !important; + border: 1px solid #363636 !important; + color: #f5f5f5 !important; +} + +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-python"]) button[class*="copyButton"]:hover, +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yaml"]) button[class*="copyButton"]:hover, +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yml"]) button[class*="copyButton"]:hover, +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) button[class*="copyButton"]:hover, +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) button[class*="copyButton"]:hover { + background: rgba(0, 0, 0, 0.8) !important; +} + +/* Dark theme - override text color to be light for dark theme */ +[data-theme="dark"] .prism-code[class*="language-python"], +[data-theme="dark"] pre[class*="language-python"], +[data-theme="dark"] .prism-code[class*="language-yaml"], +[data-theme="dark"] pre[class*="language-yaml"], +[data-theme="dark"] .prism-code[class*="language-yml"], +[data-theme="dark"] pre[class*="language-yml"], +[data-theme="dark"] .prism-code[class*="language-bash"], +[data-theme="dark"] pre[class*="language-bash"], +[data-theme="dark"] .prism-code[class*="language-shell"], +[data-theme="dark"] pre[class*="language-shell"] { + color: #f5f5f5 !important; +} + +[data-theme="dark"] .prism-code[class*="language-python"] .token-line, +[data-theme="dark"] pre[class*="language-python"] .token-line, +[data-theme="dark"] .prism-code[class*="language-yaml"] .token-line, +[data-theme="dark"] pre[class*="language-yaml"] .token-line, +[data-theme="dark"] .prism-code[class*="language-yml"] .token-line, +[data-theme="dark"] pre[class*="language-yml"] .token-line { + color: #f5f5f5 !important; +} + +/* Dark theme bash token lines - light gray text on dark background */ +[data-theme="dark"] .prism-code[class*="language-bash"] .token-line, +[data-theme="dark"] pre[class*="language-bash"] .token-line, +[data-theme="dark"] .prism-code[class*="language-shell"] .token-line, +[data-theme="dark"] pre[class*="language-shell"] .token-line { + color: #f5f5f5 !important; +} + +/* ===== SIMPLE BASH SYNTAX HIGHLIGHTING ===== */ +/* Target whatever tokens Prism.js actually generates */ + +/* All available token types - cover all bases */ +.prism-code[class*="language-bash"] .token, +pre[class*="language-bash"] .token, +.prism-code[class*="language-shell"] .token, +pre[class*="language-shell"] .token { + color: inherit; /* Let specific tokens override */ +} + +/* Comments */ +.prism-code[class*="language-bash"] .token.comment, +pre[class*="language-bash"] .token.comment, +.prism-code[class*="language-shell"] .token.comment, +pre[class*="language-shell"] .token.comment { + color: #6a737d !important; + font-style: italic !important; +} + +/* Strings - pink */ +.prism-code[class*="language-bash"] .token.string, +pre[class*="language-bash"] .token.string, +.prism-code[class*="language-shell"] .token.string, +pre[class*="language-shell"] .token.string { + color: #f472b6 !important; +} + +/* Variables - light blue */ +.prism-code[class*="language-bash"] .token.variable, +.prism-code[class*="language-bash"] .token.environment, +.prism-code[class*="language-bash"] .token.builtin, +.prism-code[class*="language-bash"] .token.function, +.prism-code[class*="language-bash"] .token.command, +.prism-code[class*="language-bash"] .token.keyword, +pre[class*="language-bash"] .token.variable, +pre[class*="language-bash"] .token.environment, +pre[class*="language-bash"] .token.builtin, +pre[class*="language-bash"] .token.function, +pre[class*="language-bash"] .token.command, +pre[class*="language-bash"] .token.keyword, +.prism-code[class*="language-shell"] .token.variable, +.prism-code[class*="language-shell"] .token.environment, +.prism-code[class*="language-shell"] .token.builtin, +.prism-code[class*="language-shell"] .token.function, +.prism-code[class*="language-shell"] .token.command, +.prism-code[class*="language-shell"] .token.keyword, +pre[class*="language-shell"] .token.variable, +pre[class*="language-shell"] .token.environment, +pre[class*="language-shell"] .token.builtin, +pre[class*="language-shell"] .token.function, +pre[class*="language-shell"] .token.command, +pre[class*="language-shell"] .token.keyword { + color: #7dd3fc !important; +} + +/* Numbers */ +.prism-code[class*="language-bash"] .token.number, +pre[class*="language-bash"] .token.number, +.prism-code[class*="language-shell"] .token.number, +pre[class*="language-shell"] .token.number { + color: #fbbf24 !important; +} + +/* Dark theme versions */ +[data-theme="dark"] .prism-code[class*="language-bash"] .token.comment, +[data-theme="dark"] pre[class*="language-bash"] .token.comment, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.comment, +[data-theme="dark"] pre[class*="language-shell"] .token.comment { + color: #6b7280 !important; + font-style: italic !important; +} + +[data-theme="dark"] .prism-code[class*="language-bash"] .token.string, +[data-theme="dark"] pre[class*="language-bash"] .token.string, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.string, +[data-theme="dark"] pre[class*="language-shell"] .token.string { + color: #f472b6 !important; +} + +[data-theme="dark"] .prism-code[class*="language-bash"] .token.variable, +[data-theme="dark"] .prism-code[class*="language-bash"] .token.environment, +[data-theme="dark"] .prism-code[class*="language-bash"] .token.builtin, +[data-theme="dark"] .prism-code[class*="language-bash"] .token.function, +[data-theme="dark"] .prism-code[class*="language-bash"] .token.command, +[data-theme="dark"] .prism-code[class*="language-bash"] .token.keyword, +[data-theme="dark"] pre[class*="language-bash"] .token.variable, +[data-theme="dark"] pre[class*="language-bash"] .token.environment, +[data-theme="dark"] pre[class*="language-bash"] .token.builtin, +[data-theme="dark"] pre[class*="language-bash"] .token.function, +[data-theme="dark"] pre[class*="language-bash"] .token.command, +[data-theme="dark"] pre[class*="language-bash"] .token.keyword, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.variable, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.environment, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.builtin, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.function, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.command, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.keyword, +[data-theme="dark"] pre[class*="language-shell"] .token.variable, +[data-theme="dark"] pre[class*="language-shell"] .token.environment, +[data-theme="dark"] pre[class*="language-shell"] .token.builtin, +[data-theme="dark"] pre[class*="language-shell"] .token.function, +[data-theme="dark"] pre[class*="language-shell"] .token.command, +[data-theme="dark"] pre[class*="language-shell"] .token.keyword { + color: #7dd3fc !important; +} + +[data-theme="dark"] .prism-code[class*="language-bash"] .token.number, +[data-theme="dark"] pre[class*="language-bash"] .token.number, +[data-theme="dark"] .prism-code[class*="language-shell"] .token.number, +[data-theme="dark"] pre[class*="language-shell"] .token.number { + color: #fbbf24 !important; +} + + +/* ===== CODE BLOCK TITLE STYLING FOR BASH/.ENV FILES ===== */ +/* Light theme - black title on light background */ +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) div[class*="codeBlockTitle"], +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) div[class*="codeBlockTitle"], +div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) div[class*="codeBlockTitle"], +div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) div[class*="codeBlockTitle"] { + background-color: #f6f7f8 !important; + color: #000000 !important; + border: 1px solid #e0e1e2 !important; + border-bottom: none !important; + font-weight: 600 !important; + margin-bottom: 0 !important; + border-radius: 6px 6px 0 0 !important; +} + +/* Dark theme - white title on dark background */ +[data-theme="dark"] div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) div[class*="codeBlockTitle"], +[data-theme="dark"] div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) div[class*="codeBlockTitle"], +[data-theme="dark"] div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) div[class*="codeBlockTitle"], +[data-theme="dark"] div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) div[class*="codeBlockTitle"] { + background-color: #2a2a2a !important; + color: #ffffff !important; + border: 1px solid #363636 !important; + border-bottom: none !important; + font-weight: 600 !important; + margin-bottom: 0 !important; + border-radius: 6px 6px 0 0 !important; +} + +/* Remove any gap between title and code block for bash/shell */ +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) .prism-code, +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) .prism-code, +div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) pre, +div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) pre { + margin-top: 0 !important; + border-radius: 0 0 6px 6px !important; +} + +/* For bash/shell code blocks without titles, keep full border radius */ +div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(.prism-code[class*="language-bash"]) .prism-code, +div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(.prism-code[class*="language-shell"]) .prism-code, +div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(pre[class*="language-bash"]) pre, +div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(pre[class*="language-shell"]) pre { + border-radius: 6px !important; +} diff --git a/static/img/Icons/Icons.png b/static/img/Icons/Icons.png new file mode 100644 index 0000000000000000000000000000000000000000..4fd5b868d6984acbb0d6a98fcf80b79ff60af434 GIT binary patch literal 1686 zcmV;H25I?;P))~d6vrP($)3rkIs$V8=LA(h_OVY8`2?{yoyv(Lx^C>5ZsMH4&aS(p2WTaq!0ri( z8&uhJ#*s<%0i=>x2IvO@q@)@AHqMBQ2>%zbpeyp<39cvp@sFqCyY%X7w`CsR~OJCtq53HTl^eA3~E@KEgYY5)RvHq3z(c7 zZvzu=S`coLR)lO!z~nSd0OE7+Q`Ht0UEny5npz_p5imLV^%**bGyG@I^1n`%mu2W2 zBzg8x{fy#o(29GdciyV;y^UF;cLC8!NC%M;Z=a%td_bix0qCAoS+|H$$Q->mdkR!R z8B6)_@CZEORlwx*7o4&%c<@H)F$KJZPuaxBeh!~I0Oi>U>nu)bK76?gp716hQ9L<4 zchL$a&;Vp1J&Nc>K$3Vu;2Jbap#_rHM=8FjQRPjZM06IAu;y{-#5??_7uV1t#V#Nk zS6ZWoHPJ~xHDv^xo9{qx$~rsC3bRNeLNwq9FW*5;Y76-A;846z*>}qh`c)LP5sz^V z*)rUMJAv+#x-U6`+C){0HD3ks)Ij7Ia4hPD>cK70?K#w>mVo8d9T+a7r|o(XFZu2D zR+)ToLXCxGJ2>CC_6CfWRLEI_T2mMW{Ksg0tozt?&C@Io#Y=JhUVI^Nn_U?$V>Db&pv(5ak~&k^w7=s1_Ia8G-&0aT zjnOof8G8#2@l z79a~)WIznl$glN5xfJXdzogoJ?0XLbWimtiIeKKdcO=pQGEv`fVcJBVjUT*{`NT75 z3d{t-MkJSo`(kxvu?sFJUqhe5Lgn4=qw;y{N3mVOik^;0Rtjm*1!RU$NEimO4w%+K zfn`=ABmvc$VB9!&TFtWfC7&2BB-C|~W`UcrF%Vx?ro{(*m~t>}j~)@S+d!VeBGG=# z*cw~k9N8|SVHRxx0h$-iQ9z~(oAZy*0A(Tm{pW3yEKT0r?l+U&$^XU&+!u?1$0=+i z{ui2HGkSAp&nfbO60}Wp%}pBI1f17xeWOd2HC3P&ZXu$h1qR#%lpO=>4zuoZxC2c< z#+II%Z;r^x2#5k2)(Igj6(4W7^Xu&xMWh{~y(c8heDxYU0GJ@vD4Fkwp3O@N3+I?I^) z*|y2xt`q|FwctFz1R`_+Z*o)ORJKm^Va+I8;q)&)>P~vG@S0J;Gh0Sj$QJtYa z&@L5zlD9=esK4d_djV(StfDnyq#Agf$#xf>!DXW+I8xTOQ^Vz2%>nhgvs5dXFeNy> zbW*A3$aOW2rasz(A8ZH}u-lq|#ej~-<|OB8bf?ZKPljF@#f#Vn{_|li3wOu|X0k!Y zAP@%V8}WD*HrStAe5<-?MQ0ysQd>Y(5@b;EU@2mBwajFLnzq&b(aLeSEH_RWX+Fd? z!`!ea!9{yEUWSN;Gm9P&PdJ~Si@}lUUz17ihyG)2X|MpNalY64@q3v5IVQ)LE~u?a zp8pP&XXxbN?9m=LQrn3vlAIh}RP+zdY4i+l5evqQSBkK_YD}f>}wn;211XA@2Rfn-Z$Sq`->lz%mo>PQPEG16q=1_5UXLqfR{C|yu zHM+v_*W2d@hmCg7HZI_t7KNOuj($vfv=K_SCg7YxNSxM9{NWvtQAIPS;f;@lB~fNa zaQnfYD(7HpnJV2St7ljM!g|fJ5*JGoaFMd9vhcFGrsF~O=Sc4y$Jg-RjITb%707*qoM6N<$g3kvN6aWAK literal 0 HcmV?d00001 diff --git a/static/img/Icons/Tip.png b/static/img/Icons/Tip.png new file mode 100644 index 0000000000000000000000000000000000000000..8cfb10cb9a2f964c0d6e665e3e7783bf4c78e30d GIT binary patch literal 487 zcmVKI8x;llB#v>g>L3e_v?Ivwz|n-pYVm7AZdb45ePIuxM>kJ>TPX05 zEkM)-m1^dZwf3PWm;rv0A*a<2m*F;_4Ax61%>e409yZ|0 zEiEVJP@4D&iHyED8^FmJm>N^q_YxWz(6uZRPAk0~uG321*(ArYDu}xOiE*q_3qzTKfUmCQZyr(g;k!b{6MyzC7w0K2xM(mu$=F7^p z%}uzBhH~w5+1=QR$Sg dSUAIf*&8)nl+;vnfn@*y002ovPDHLkV1itb&v5_% literal 0 HcmV?d00001 diff --git a/static/img/Icons/Vector.png b/static/img/Icons/Vector.png new file mode 100644 index 0000000000000000000000000000000000000000..cec316fe6f0a965ff1893711f195b0346d370d54 GIT binary patch literal 478 zcmV<40U`d0P)200009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPhAH($JAgN*suvbL10=lF4i`xEk ztk#!1rz%dAYY;H6C?ngXzjXW0CXJ%kntBl8oUacXYk!@9&$ZF-ygpa)!#rgB1KX3l U(^&uO&j0`b07*qoM6N<$f>&Y0cmMzZ literal 0 HcmV?d00001 diff --git a/static/img/Icons/Warning.png b/static/img/Icons/Warning.png new file mode 100644 index 0000000000000000000000000000000000000000..73aecee6c65fb7ba80b4954115e3eb77f2487fac GIT binary patch literal 1631 zcmV-l2B7(gP)@~0drDELIAGL9O(c600d`2O+f$vv5yPnMnBDo$>`(wLEiElAEiElAEspWm{GgA2;4lmv z#3!8U<&@iM~q;!Cc4@Q2?|?pEL!&KYnaJT8RfZw}CZd>oA!-^WMeDXhUEJaCMV zC9j?u55Z&pLHG(B!zm9$?+YNgq0R}wKXhp-JLQ1^+n%e=*+B9R9Ksm`ewc@+!1;;B zsnO;9AOc5l#(?6BXs>U~Aun{ofS2M2=Vig{0zIY#;OO3=}G3WVhWBy3E_n)c4dt<1M0{Yo%L%cYvch1P}aQeS_>#v z42Xe)k}ViG9?KRLoBPd_k~PfRT9Y+a4Cu3jmMub}6p5Z`0fCS;7*K4+_`M-7#EGt`d;IKWT#%+}UYxO`39O4G=h?`#=PvVRbFx3kWZbg|3PB@1( z6Y>Vv$UJXqTGj+mBN#Y1F}@2Napri~y}c5K>!)v6nyL*pJi(GyMk8XLOfM0s7nWKg zbf|3#U;Y*r%6A|5@Y+Ag{Tzcq-eyvoClkv+-R1vU42Xe)agatq3>*P?7rA51CyJ-r zDDS9{HE$?c1B}0@OV-q4Kv{Re0~k0=Mn{x2Yzt(bTvz$uxB=1o#QJqA8%OW^aS~sE zVUB-|-vCi~#Tik@ezI``1}s@n<34yps15shvQY!>x(nnRK)U&ESujr)OUEC?DI!nq z=yX45W7L3TnO-dNMe^OUB;b>Ivd8$j$$(W%@5Z<8gVVnX^KjSU>z6U)Np!FKs~6 zW%>u=|K!u%7s~+@r0(*6X#=Xt^kwtiT>yYD0|46{D|a z;Uc}{{=4_%>AF%Qr6{jmNwcI1T@9rQs%f=_sFbE{X%*Sk`Cx^)1(;|;P21!ooBG(* zuq(V4&eID|;WTiN)s|gb8aRedn_L-LQ`mq-+S00m*#hp5fFV?Ea%H;z3mLF%nZ78v z{^4ekm{vDI_x7KU^YF$*>ZOw>7nL>IK}7Zt;O7ff4;<8eOg(I<(`(N7wb;|T$ z0F1n{hYdU3uyQR=r%kR%`CrR`sxm#crJ2fisZFIVus#@I|6P}|aV-C1jt?4W88A>R zu6k{0x@?#7F^?E43O!@?4}2?88gSnMAIZi|m+574155QL<&jRCoQ|yVG)^#{@2VJ0 z;$fQ3F=0p#^Itv_)9w@uqs)`V%v0sbWE93SJy~hy@N&PM_|+o*$Eo;Fh@in{R5e{{ zK-EKlreuo?kZp1bStFgos)qn=m+9+7RsIjVp){c6dZ6;R3vk`wa1GxU5j~vWCYM`{ z*=GWBc)GAg@T^G7|I4RGGgDYqrhmrd%9@M;MR4dti-c@@UDklarp|LmMC#SkV;KXc zn>x&`pI34Llx-pS%csXP21LE%c`zhfBc2&(3+D52Udl>lBCh}RoGo1Z)wq_HmX?;5 dmX?-g`5%ct!NaxS%V7Wj002ovPDHLkV1hA${MG;f literal 0 HcmV?d00001 diff --git a/static/img/overview/Azure.png b/static/img/overview/Azure.png new file mode 100644 index 0000000000000000000000000000000000000000..6e8b02eef1b3fef67e8137af5a4a1adf6288ef2c GIT binary patch literal 1864 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 CCTuAH literal 0 HcmV?d00001 diff --git a/static/img/overview/Bitbucket.png b/static/img/overview/Bitbucket.png new file mode 100644 index 0000000000000000000000000000000000000000..0f3499137121aa183b60d00f6a2d4e2ec599ef96 GIT binary patch literal 1468 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 Date: Thu, 24 Jul 2025 19:11:44 +0530 Subject: [PATCH 2/3] docs: optimized the styles of all the Admonitions (#438) --- docs/overview/introduction.md | 62 +-- src/css/custom.css | 840 +++++++++++----------------------- 2 files changed, 274 insertions(+), 628 deletions(-) diff --git a/docs/overview/introduction.md b/docs/overview/introduction.md index 0cc1a925..f937ac67 100644 --- a/docs/overview/introduction.md +++ b/docs/overview/introduction.md @@ -9,7 +9,6 @@ description: slug: "/" --- - # Introduction This page provides a conceptual introduction to CodeRabbit. For a hands-on tutorial, see [Quickstart](/getting-started/quickstart/). @@ -19,14 +18,7 @@ This page provides a conceptual introduction to CodeRabbit. For a hands-on tutor Developers can interact directly with the CodeRabbit bot within their existing Git platform's pull request interface to add context, ask questions, or even have the bot generate code. Over time, CodeRabbit learns from user input and improves its suggestions.
- +
## Core features @@ -66,48 +58,21 @@ No matter how you tune and customize CodeRabbit, its default settings make it us CodeRabbit integrates in just a few clicks with many popular Git platforms: -
-
- GitHub, including GitHub Enterprise Server - GitHub, including GitHub Enterprise Server -
-
- GitLab, including self-managed GitLab - GitLab, including self-managed GitLab -
-
- Bitbucket Cloud - Bitbucket Cloud -
-
- Azure DevOps - Azure DevOps -
-
+- GitHub, GitHub Enterprise Cloud, GitHub Enterprise Server, +- GitLab, GitLab Self-Managed +- Azure DevOps +- Bitbucket Cloud + For more information, see [Supported Git Platforms](/platforms/). ### Issue-management integration You can integrate CodeRabbit with issue-management platforms. This lets you ask CodeRabbit to create tickets during code reviews, or chat with CodeRabbit about your code from within issue comments. Compatible platforms include the following: -
-
- GitHub Issues - GitHub Issues -
-
- GitLab Issues - GitLab Issues -
-
- Jira - Jira -
-
- Linear - Linear -
-
+- GitHub Issues +- GitLab Issues +- Jira +- Linear For more information, see [Issue Creation](/guides/issue-creation) and [Issue Chat](/guides/issue-chat). @@ -118,7 +83,6 @@ CodeRabbit collects only the minimum amount of information needed to provide you - All queries to large language models (LLMs) exist in-memory only, with zero retention after each query completes. - We don't use your code, code reviews, or other collected data to train LLMs. - CodeRabbit doesn't share any collected customer data with third parties. -- Works with contributors through natural-language conversation in comments. - We keep all customer data confidential, and isolated by organization. - Our data collection and storage practices comply with SOC 2 and GDPR standards. @@ -128,9 +92,7 @@ For more information about how we protect your data, see [the CodeRabbit Trust C Public repositories can use the Pro tier of CodeRabbit at no charge, including all of the code-review features described on this page. Rate limits might apply. -For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support. - -For more information, see [Pricing](https://www.coderabbit.ai/pricing). +For private repositories, a number of pricing tiers are available. These range from a Free tier that offers unlimited code-change summaries, to an Enterprise tier with access to advanced features and SLA support. For more information, see [Pricing](https://www.coderabbit.ai/pricing). ## Review local changes from within VSCode @@ -141,5 +103,7 @@ For more information, see [Review local changes](/code-editors). ## What's next - [Quickstart](/getting-started/quickstart/) lets you experience your first CodeRabbit code review first-hand. + - [Review local changes](/code-editors) guides you through installing and using a subset of CodeRabbit features directly from your code editor. + - [Why CodeRabbit?](/overview/why-coderabbit) dives further into the philosophies and technologies that drive CodeRabbit. diff --git a/src/css/custom.css b/src/css/custom.css index 520c9645..988e2e31 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -363,127 +363,6 @@ a[docid="docs"] > svg { padding-left: 0.5rem; } -/* ===== PLATFORM GRID STYLES ===== */ -.platform-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - margin: 1.5rem 0; -} - -.platform-card { - display: flex; - align-items: center; - background: var(--imf-list-card-background-color); - border-radius: 8px; - padding: 1.3rem; - border: 2px solid var(--ifm-background-color-secondary); -} - -.platform-icon { - width: 32px; - height: 32px; - margin-right: 16px; -} - -[data-theme="dark"] .platform-icon { - filter: invert(1); -} - -/* Responsive design for mobile */ -@media (max-width: 768px) { - .platform-grid { - grid-template-columns: 1fr; - gap: 0.75rem; - } - - .platform-card { - padding: 1rem; - } - - .platform-icon { - width: 24px; - height: 24px; - margin-right: 12px; - } -} - -/* ===== PLATFORM INTEGRATION GRID STYLES ===== */ -/* Grid layout for displaying supported Git platforms and issue management integrations */ -.platform-integration-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - margin: 1.5rem 0; -} - -.platform-integration-card { - display: flex; - align-items: center; - padding: 1.5rem; - border: 1px solid var(--ifm-color-emphasis-200); - border-radius: 8px; - background-color: var(--ifm-background-surface-color); -} - -.platform-integration-icon { - width: 32px; - height: 32px; - margin-right: 1rem; - flex-shrink: 0; -} - -.platform-integration-card span { - font-size: 1rem; - font-weight: 500; - color: var(--ifm-color-content); - line-height: 1.4; -} - -/* Dark mode adjustments for platform icons */ -[data-theme="dark"] .platform-integration-icon { - filter: invert(1) brightness(0.9); -} - -/* Dark mode styling for platform integration cards */ -[data-theme="dark"] .platform-integration-card { - border-color: var(--ifm-color-emphasis-400); - background-color: var(--ifm-background-color-secondary); -} - -/* Responsive design for mobile */ -@media (max-width: 768px) { - .platform-integration-grid { - grid-template-columns: 1fr; - gap: 0.75rem; - } - - .platform-integration-card { - padding: 1.25rem; - } - - .platform-integration-icon { - width: 28px; - height: 28px; - margin-right: 0.75rem; - } -} - -@media (max-width: 480px) { - .platform-integration-card { - padding: 1rem; - } - - .platform-integration-icon { - width: 24px; - height: 24px; - margin-right: 0.5rem; - } - - .platform-integration-card span { - font-size: 0.9rem; - } -} /* ===== PLATFORM TABLES STYLING ===== */ .markdown table { @@ -491,7 +370,6 @@ a[docid="docs"] > svg { width: 100%; border-collapse: separate; border-spacing: 0; - background: #ffffff !important; border: none !important; table-layout: auto; margin: 2rem 0; @@ -500,7 +378,18 @@ a[docid="docs"] > svg { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } -/* Create scrollable wrapper for tables on mobile */ +/* Consolidated table background and border declarations */ +.markdown table thead, +.markdown table tbody, +.markdown table tr, +.markdown table th, +.markdown table td, +.markdown table tbody tr:hover, +.markdown table tbody tr:hover td { + background: #ffffff !important; + border: none !important; +} + @media (max-width: 768px) { .markdown { overflow-x: auto; @@ -514,27 +403,12 @@ a[docid="docs"] > svg { } } -.markdown table thead { - background: #ffffff !important; -} - -.markdown table tbody { - background: #ffffff !important; -} - -.markdown table tr { - background: #ffffff !important; - border: none !important; -} - .markdown table th { - background: #ffffff !important; color: var(--ifm-heading-color); - padding: 1.5rem 2rem 1.5rem 2rem; + padding: 1.5rem 2rem; text-align: left; font-weight: 600; font-size: 1.1rem; - border: none !important; border-bottom: 1px solid #e5e7eb !important; border-right: 1px solid #f3f4f6 !important; box-sizing: border-box; @@ -552,13 +426,11 @@ a[docid="docs"] > svg { } .markdown table td { - padding: 1.5rem 2rem 1.5rem 2rem; - border: none !important; + padding: 1.5rem 2rem; border-bottom: 1px solid #f3f4f6 !important; border-right: 1px solid #f3f4f6 !important; color: var(--ifm-color-content); vertical-align: middle; - background: #ffffff !important; box-sizing: border-box; font-size: 1rem; } @@ -634,22 +506,19 @@ a[docid="docs"] > svg { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } -[data-theme="dark"] .markdown table thead { - background: #232323 !important; -} - -[data-theme="dark"] .markdown table tbody { - background: #232323 !important; -} - -[data-theme="dark"] .markdown table tr { +/* Consolidated dark theme table background and border declarations */ +[data-theme="dark"] .markdown table thead, +[data-theme="dark"] .markdown table tbody, +[data-theme="dark"] .markdown table tr, +[data-theme="dark"] .markdown table th, +[data-theme="dark"] .markdown table td, +[data-theme="dark"] .markdown table tbody tr:hover, +[data-theme="dark"] .markdown table tbody tr:hover td { background: #232323 !important; border: none !important; } [data-theme="dark"] .markdown table th { - background: #232323 !important; - border: none !important; border-bottom: 1px solid #404040 !important; border-right: 1px solid #363636 !important; } @@ -659,10 +528,8 @@ a[docid="docs"] > svg { } [data-theme="dark"] .markdown table td { - border: none !important; border-bottom: 1px solid #363636 !important; border-right: 1px solid #363636 !important; - background: #232323 !important; } [data-theme="dark"] .markdown table td:last-child { @@ -673,130 +540,67 @@ a[docid="docs"] > svg { border-bottom: none !important; } -[data-theme="dark"] .markdown table tbody tr:hover { - background: #232323 !important; -} -[data-theme="dark"] .markdown table tbody tr:hover td { - background: #232323 !important; +/* ===== SUPPORTED LINKS WITH CHECKMARK ICONS ===== */ +/* Add checkmark icons to "Supported" links in platform tables */ +.markdown table td a[href*="github-com"], +.markdown table td a[href*="github-enterprise-server"], +.markdown table td a[href*="gitlab-com"], +.markdown table td a[href*="self-hosted-gitlab"], +.markdown table td a[href*="azure-devops"], +.markdown table td a[href*="bitbucket"] { + display: inline-flex; + align-items: center; + gap: 0.5rem; } -/* Support icon styling */ -.support-icon { - display: inline; - margin-right: 0.75rem; - vertical-align: middle; - width: 20px; - height: 20px; +.markdown table td a[href*="github-com"]::before, +.markdown table td a[href*="github-enterprise-server"]::before, +.markdown table td a[href*="gitlab-com"]::before, +.markdown table td a[href*="self-hosted-gitlab"]::before, +.markdown table td a[href*="azure-devops"]::before, +.markdown table td a[href*="bitbucket"]::before { + content: ""; + width: 16px; + height: 16px; + background: url('/img/Icons/Vector.png') center/contain no-repeat; flex-shrink: 0; } -.markdown table td .support-icon + * { - color: var(--ifm-color-content); - font-weight: 400; -} - -[data-theme="dark"] .markdown table td .support-icon + * { - color: var(--ifm-color-content); -} - -@media (max-width: 768px) { - .support-icon { - width: 18px; - height: 18px; - } -} - -@media (max-width: 480px) { - .support-icon { - width: 16px; - height: 16px; - } -} - -/* ===== REUSABLE NOTE COMPONENT STYLES ===== */ -.note-box { - border: 2px solid #25bab1; - border-radius: 12px; - background-color: #f1fffe; - padding: 1rem 1.2rem; - margin: 1.5rem 0; -} - -[data-theme="dark"] .note-box { - border: 2px solid #208682; - background-color: #252828; +/* Dark theme and responsive styles */ +[data-theme="dark"] .markdown table td a[href*="github-com"]::before, +[data-theme="dark"] .markdown table td a[href*="github-enterprise-server"]::before, +[data-theme="dark"] .markdown table td a[href*="gitlab-com"]::before, +[data-theme="dark"] .markdown table td a[href*="self-hosted-gitlab"]::before, +[data-theme="dark"] .markdown table td a[href*="azure-devops"]::before, +[data-theme="dark"] .markdown table td a[href*="bitbucket"]::before { + filter: invert(1) brightness(0.8); } -/* Responsive design for note box */ @media (max-width: 768px) { - .note-box { - padding: 0.8rem 1rem; - margin: 1rem 0; - font-size: 0.95rem; - border-radius: 10px; - } - - .note-icon { - width: 18px; - height: 18px; + .markdown table td a[href*="github-com"]::before, + .markdown table td a[href*="github-enterprise-server"]::before, + .markdown table td a[href*="gitlab-com"]::before, + .markdown table td a[href*="self-hosted-gitlab"]::before, + .markdown table td a[href*="azure-devops"]::before, + .markdown table td a[href*="bitbucket"]::before { + width: 14px; + height: 14px; } } @media (max-width: 480px) { - .note-box { - padding: 0.7rem 0.8rem; - margin: 0.8rem 0; - font-size: 0.9rem; - border-radius: 8px; + .markdown table td a[href*="github-com"]::before, + .markdown table td a[href*="github-enterprise-server"]::before, + .markdown table td a[href*="gitlab-com"]::before, + .markdown table td a[href*="self-hosted-gitlab"]::before, + .markdown table td a[href*="azure-devops"]::before, + .markdown table td a[href*="bitbucket"]::before { + width: 12px; + height: 12px; } - - .note-icon { - width: 16px; - height: 16px; - } -} - - - -/* ===== WARNING BOX STYLING ===== */ - -.note-header { - display: flex; - align-items: center; - margin-bottom: 0.5rem; -} - -.note-icon { - width: 1.2rem; - height: 1.2rem; - margin-right: 0.5rem; -} - -.note-title { - color: #208682; - font-weight: 600; - font-size: 1rem; - margin: 0; -} - -.note-content { - color: var(--ifm-color-content); - line-height: 1.6; - margin: 0; -} - -.note-content a { - color: var(--ifm-color-primary); - text-decoration: none; - font-weight: 500; } -.note-content a:hover { - text-decoration: underline; -} - - /* ===== DOCUSAURUS BLOCKQUOTE OVERRIDE ===== */ /* Override standard markdown blockquotes (>) to match custom design */ .markdown blockquote { @@ -844,100 +648,6 @@ a[docid="docs"] > svg { } -/* ===== REUSABLE CHAT BUBBLE STYLES ===== */ -/* Simple HTML/CSS chat bubble styling to match original ChatBubble component */ -.custom-chat-bubble { - background: #f6f7f8; - border: 1px solid #e0e1e2; - color: var(--imf-text-color); - border-radius: 6px; - padding: 1em 1.2em; - margin: 1em 0; - font-family: "Fira Mono", "Menlo", "Monaco", "Consolas", monospace; - font-size: 0.98em; - white-space: pre-wrap; - word-break: break-word; - position: relative; -} - -.custom-chat-bubble .chat-content { - padding-right: 2.5rem; -} - -.custom-chat-bubble .copy-button { - position: absolute; - top: 0.75rem; - right: 0.75rem; - background: rgba(255, 255, 255, 0.1); - border: none; - border-radius: 4px; - color: var(--imf-text-color); - cursor: pointer; - padding: 0.5rem; - opacity: 0.7; - transition: - opacity 0.2s ease, - background 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -.custom-chat-bubble .copy-button:hover { - opacity: 1; - background: rgba(255, 255, 255, 0.2); -} - -.custom-chat-bubble .copy-button:active { - transform: scale(0.95); -} - -/* Responsive design */ -@media (max-width: 768px) { - .custom-chat-bubble { - padding: 0.8rem 1rem; - font-size: 0.95rem; - } - - .custom-chat-bubble .chat-content { - padding-right: 2.2rem; - } - - .custom-chat-bubble .copy-button { - top: 0.6rem; - right: 0.6rem; - padding: 0.4rem; - } -} - -@media (max-width: 480px) { - .custom-chat-bubble { - padding: 0.7rem 0.8rem; - font-size: 0.9rem; - } - - .custom-chat-bubble .chat-content { - padding-right: 2rem; - } - - .custom-chat-bubble .copy-button { - top: 0.5rem; - right: 0.5rem; - padding: 0.3rem; - } -} - -[data-theme="dark"] .custom-chat-bubble { - background: #232323; - border: 1px solid #363636; -} - -[data-theme="dark"] .custom-chat-bubble .copy-button { - background: rgba(255, 255, 255, 0.1); - color: #ffffff; -} - -/* new css changes */ /* info component */ .theme-admonition.theme-admonition-info { @@ -1537,249 +1247,221 @@ div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { } } -/* ===== LANGUAGE-SPECIFIC CODE BLOCK STYLING ===== */ -/* Python, YAML, and Bash code blocks with dark background - both light and dark themes */ +/* ===== CODE BLOCK STYLING ===== */ +.prism-code[class*="language-python"], pre[class*="language-python"], .prism-code[class*="language-yaml"], pre[class*="language-yaml"], .prism-code[class*="language-yml"], pre[class*="language-yml"], .prism-code[class*="language-bash"], pre[class*="language-bash"], .prism-code[class*="language-shell"], pre[class*="language-shell"] { background: #171717 !important; color: #e8e8e8 !important; border: 1px solid #363636 !important; } -.prism-code[class*="language-python"], -pre[class*="language-python"], -.prism-code[class*="language-yaml"], -pre[class*="language-yaml"], -.prism-code[class*="language-yml"], -pre[class*="language-yml"], -.prism-code[class*="language-bash"], -pre[class*="language-bash"], -.prism-code[class*="language-shell"], -pre[class*="language-shell"] { - background-color: #171717 !important; - color: #E8E8E8 !important; - border: 1px solid #363636 !important; - border-radius: 6px !important; +/* Syntax highlighting */ +.prism-code[class*="language-"] .token, pre[class*="language-"] .token { color: #e8e8e8 !important; font-style: normal !important; } +.prism-code[class*="language-"] .token.string, pre[class*="language-"] .token.string { color: #ff6b9d !important; } +.prism-code[class*="language-"] .token.keyword, pre[class*="language-"] .token.keyword { color: #79D5FF !important; } +.prism-code[class*="language-"] .token.function, pre[class*="language-"] .token.function { color: #FFB07B !important; } +.prism-code[class*="language-"] .token.builtin, pre[class*="language-"] .token.builtin { color: #7dd3fc !important; } +.prism-code[class*="language-"] .token.number, pre[class*="language-"] .token.number { color: #53FFE8 !important; } +.prism-code[class*="language-"] .token.operator, .prism-code[class*="language-"] .token.punctuation, pre[class*="language-"] .token.operator, pre[class*="language-"] .token.punctuation { color: #d1d5db !important; } +.prism-code[class*="language-"] .token.comment, pre[class*="language-"] .token.comment { color: #9ca3af !important; font-style: italic !important; } + +/* Copy button for dark code blocks */ +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) button[class*="copyButton"], +div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class*="copyButton"] { + background: rgba(0, 0, 0, 0.6) !important; + color: #f5f5f5 !important; } -.prism-code[class*="language-python"] .token-line, -pre[class*="language-python"] .token-line, -.prism-code[class*="language-yaml"] .token-line, -pre[class*="language-yaml"] .token-line, -.prism-code[class*="language-yml"] .token-line, -pre[class*="language-yml"] .token-line { - color: #ffffff !important; +/* ===== GIT PLATFORM INTEGRATION GRID ===== */ +/* Transform the git platforms list into a visual grid with icons */ +#git-platform-integration ~ p + ul { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + list-style: none; + padding: 0; + margin: 1.5rem 0; + align-items: start; } -/* Bash token lines - light gray text on dark background for light theme */ -.prism-code[class*="language-bash"] .token-line, -pre[class*="language-bash"] .token-line, -.prism-code[class*="language-shell"] .token-line, -pre[class*="language-shell"] .token-line { - color: #E8E8E8 !important; +#git-platform-integration ~ p + ul li { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1.5rem 2rem; + border: 2px solid #e0e0e0; + border-radius: 8px; + background-color: #fafafa; + font-weight: 500; + min-height: 100px; + height: 100px; + box-sizing: border-box; + margin: 0; + position: relative; + top: 0; } -/* Copy button styling for language-specific blocks */ -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-python"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yaml"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yml"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) button[class*="copyButton"] { - background: rgba(0, 0, 0, 0.6) !important; - border: 1px solid #363636 !important; - color: #f5f5f5 !important; +#git-platform-integration ~ p + ul li::before { + content: ""; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + flex-shrink: 0; } -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-python"]) button[class*="copyButton"]:hover, -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yaml"]) button[class*="copyButton"]:hover, -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-yml"]) button[class*="copyButton"]:hover, -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) button[class*="copyButton"]:hover, -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) button[class*="copyButton"]:hover { - background: rgba(0, 0, 0, 0.8) !important; +/* Platform-specific icons using nth-child since we know the order: + 1. GitHub, 2. GitLab, 3. Bitbucket, 4. Azure */ +#git-platform-integration ~ p + ul li:nth-child(1)::before { + background-image: url('/img/overview/Github.png'); } -/* Dark theme - override text color to be light for dark theme */ -[data-theme="dark"] .prism-code[class*="language-python"], -[data-theme="dark"] pre[class*="language-python"], -[data-theme="dark"] .prism-code[class*="language-yaml"], -[data-theme="dark"] pre[class*="language-yaml"], -[data-theme="dark"] .prism-code[class*="language-yml"], -[data-theme="dark"] pre[class*="language-yml"], -[data-theme="dark"] .prism-code[class*="language-bash"], -[data-theme="dark"] pre[class*="language-bash"], -[data-theme="dark"] .prism-code[class*="language-shell"], -[data-theme="dark"] pre[class*="language-shell"] { - color: #f5f5f5 !important; +#git-platform-integration ~ p + ul li:nth-child(2)::before { + background-image: url('/img/overview/Gitlab.png'); } -[data-theme="dark"] .prism-code[class*="language-python"] .token-line, -[data-theme="dark"] pre[class*="language-python"] .token-line, -[data-theme="dark"] .prism-code[class*="language-yaml"] .token-line, -[data-theme="dark"] pre[class*="language-yaml"] .token-line, -[data-theme="dark"] .prism-code[class*="language-yml"] .token-line, -[data-theme="dark"] pre[class*="language-yml"] .token-line { - color: #f5f5f5 !important; +#git-platform-integration ~ p + ul li:nth-child(3)::before { + background-image: url('/img/overview/Bitbucket.png'); } -/* Dark theme bash token lines - light gray text on dark background */ -[data-theme="dark"] .prism-code[class*="language-bash"] .token-line, -[data-theme="dark"] pre[class*="language-bash"] .token-line, -[data-theme="dark"] .prism-code[class*="language-shell"] .token-line, -[data-theme="dark"] pre[class*="language-shell"] .token-line { - color: #f5f5f5 !important; +#git-platform-integration ~ p + ul li:nth-child(4)::before { + background-image: url('/img/overview/Azure.png'); } -/* ===== SIMPLE BASH SYNTAX HIGHLIGHTING ===== */ -/* Target whatever tokens Prism.js actually generates */ - -/* All available token types - cover all bases */ -.prism-code[class*="language-bash"] .token, -pre[class*="language-bash"] .token, -.prism-code[class*="language-shell"] .token, -pre[class*="language-shell"] .token { - color: inherit; /* Let specific tokens override */ -} - -/* Comments */ -.prism-code[class*="language-bash"] .token.comment, -pre[class*="language-bash"] .token.comment, -.prism-code[class*="language-shell"] .token.comment, -pre[class*="language-shell"] .token.comment { - color: #6a737d !important; - font-style: italic !important; -} - -/* Strings - pink */ -.prism-code[class*="language-bash"] .token.string, -pre[class*="language-bash"] .token.string, -.prism-code[class*="language-shell"] .token.string, -pre[class*="language-shell"] .token.string { - color: #f472b6 !important; -} - -/* Variables - light blue */ -.prism-code[class*="language-bash"] .token.variable, -.prism-code[class*="language-bash"] .token.environment, -.prism-code[class*="language-bash"] .token.builtin, -.prism-code[class*="language-bash"] .token.function, -.prism-code[class*="language-bash"] .token.command, -.prism-code[class*="language-bash"] .token.keyword, -pre[class*="language-bash"] .token.variable, -pre[class*="language-bash"] .token.environment, -pre[class*="language-bash"] .token.builtin, -pre[class*="language-bash"] .token.function, -pre[class*="language-bash"] .token.command, -pre[class*="language-bash"] .token.keyword, -.prism-code[class*="language-shell"] .token.variable, -.prism-code[class*="language-shell"] .token.environment, -.prism-code[class*="language-shell"] .token.builtin, -.prism-code[class*="language-shell"] .token.function, -.prism-code[class*="language-shell"] .token.command, -.prism-code[class*="language-shell"] .token.keyword, -pre[class*="language-shell"] .token.variable, -pre[class*="language-shell"] .token.environment, -pre[class*="language-shell"] .token.builtin, -pre[class*="language-shell"] .token.function, -pre[class*="language-shell"] .token.command, -pre[class*="language-shell"] .token.keyword { - color: #7dd3fc !important; -} - -/* Numbers */ -.prism-code[class*="language-bash"] .token.number, -pre[class*="language-bash"] .token.number, -.prism-code[class*="language-shell"] .token.number, -pre[class*="language-shell"] .token.number { - color: #fbbf24 !important; -} - -/* Dark theme versions */ -[data-theme="dark"] .prism-code[class*="language-bash"] .token.comment, -[data-theme="dark"] pre[class*="language-bash"] .token.comment, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.comment, -[data-theme="dark"] pre[class*="language-shell"] .token.comment { - color: #6b7280 !important; - font-style: italic !important; -} - -[data-theme="dark"] .prism-code[class*="language-bash"] .token.string, -[data-theme="dark"] pre[class*="language-bash"] .token.string, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.string, -[data-theme="dark"] pre[class*="language-shell"] .token.string { - color: #f472b6 !important; -} - -[data-theme="dark"] .prism-code[class*="language-bash"] .token.variable, -[data-theme="dark"] .prism-code[class*="language-bash"] .token.environment, -[data-theme="dark"] .prism-code[class*="language-bash"] .token.builtin, -[data-theme="dark"] .prism-code[class*="language-bash"] .token.function, -[data-theme="dark"] .prism-code[class*="language-bash"] .token.command, -[data-theme="dark"] .prism-code[class*="language-bash"] .token.keyword, -[data-theme="dark"] pre[class*="language-bash"] .token.variable, -[data-theme="dark"] pre[class*="language-bash"] .token.environment, -[data-theme="dark"] pre[class*="language-bash"] .token.builtin, -[data-theme="dark"] pre[class*="language-bash"] .token.function, -[data-theme="dark"] pre[class*="language-bash"] .token.command, -[data-theme="dark"] pre[class*="language-bash"] .token.keyword, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.variable, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.environment, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.builtin, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.function, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.command, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.keyword, -[data-theme="dark"] pre[class*="language-shell"] .token.variable, -[data-theme="dark"] pre[class*="language-shell"] .token.environment, -[data-theme="dark"] pre[class*="language-shell"] .token.builtin, -[data-theme="dark"] pre[class*="language-shell"] .token.function, -[data-theme="dark"] pre[class*="language-shell"] .token.command, -[data-theme="dark"] pre[class*="language-shell"] .token.keyword { - color: #7dd3fc !important; -} - -[data-theme="dark"] .prism-code[class*="language-bash"] .token.number, -[data-theme="dark"] pre[class*="language-bash"] .token.number, -[data-theme="dark"] .prism-code[class*="language-shell"] .token.number, -[data-theme="dark"] pre[class*="language-shell"] .token.number { - color: #fbbf24 !important; -} - - -/* ===== CODE BLOCK TITLE STYLING FOR BASH/.ENV FILES ===== */ -/* Light theme - black title on light background */ -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) div[class*="codeBlockTitle"], -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) div[class*="codeBlockTitle"], -div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) div[class*="codeBlockTitle"], -div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) div[class*="codeBlockTitle"] { - background-color: #f6f7f8 !important; - color: #000000 !important; - border: 1px solid #e0e1e2 !important; - border-bottom: none !important; - font-weight: 600 !important; - margin-bottom: 0 !important; - border-radius: 6px 6px 0 0 !important; +/* Dark theme support */ +[data-theme="dark"] #git-platform-integration ~ p + ul li { + background-color: #232323; + border-color: #363636; + color: #ffffff; } -/* Dark theme - white title on dark background */ -[data-theme="dark"] div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) div[class*="codeBlockTitle"], -[data-theme="dark"] div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) div[class*="codeBlockTitle"], -[data-theme="dark"] div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) div[class*="codeBlockTitle"], -[data-theme="dark"] div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) div[class*="codeBlockTitle"] { - background-color: #2a2a2a !important; - color: #ffffff !important; - border: 1px solid #363636 !important; - border-bottom: none !important; - font-weight: 600 !important; - margin-bottom: 0 !important; - border-radius: 6px 6px 0 0 !important; +[data-theme="dark"] #git-platform-integration ~ p + ul li::before { + filter: invert(1) brightness(0.8); +} + +/* Responsive design */ +@media (max-width: 768px) { + #git-platform-integration ~ p + ul { + grid-template-columns: 1fr 1fr; + gap: 0.8rem; + } + + #git-platform-integration ~ p + ul li { + padding: 1.2rem 1.5rem; + font-size: 0.95rem; + } +} + +@media (max-width: 480px) { + #git-platform-integration ~ p + ul { + grid-template-columns: 1fr; + gap: 0.6rem; + } + + #git-platform-integration ~ p + ul li { + padding: 1rem 1.2rem; + font-size: 0.9rem; + } + + #git-platform-integration ~ p + ul li::before { + width: 20px; + height: 20px; + } +} + +/* ===== ISSUE-MANAGEMENT INTEGRATION GRID ===== */ +/* Transform the issue-management platforms list into a visual grid with icons */ +/* Target the ul that comes after the Issue-management integration heading by position */ +#issue-management-integration ~ p + ul { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + list-style: none; + padding: 0; + margin: 1.5rem 0; + align-items: start; +} + +#issue-management-integration ~ p + ul li { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1.5rem 2rem; + border: 2px solid #e0e0e0; + border-radius: 8px; + background-color: #fafafa; + font-weight: 500; + min-height: 100px; + height: 100px; + box-sizing: border-box; + margin: 0; + position: relative; + top: 0; +} + +#issue-management-integration ~ p + ul li::before { + content: ""; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + flex-shrink: 0; +} + +/* Platform-specific icons using nth-child since we know the order: + 1. GitHub Issues, 2. GitLab Issues, 3. Jira, 4. Linear */ +#issue-management-integration ~ p + ul li:nth-child(1)::before { + background-image: url('/img/overview/Github.png'); +} + +#issue-management-integration ~ p + ul li:nth-child(2)::before { + background-image: url('/img/overview/Gitlab.png'); +} + +#issue-management-integration ~ p + ul li:nth-child(3)::before { + background-image: url('/img/overview/Jira.png'); +} + +#issue-management-integration ~ p + ul li:nth-child(4)::before { + background-image: url('/img/overview/Linear.png'); +} + +/* Dark theme support */ +[data-theme="dark"] #issue-management-integration ~ p + ul li { + background-color: #232323; + border-color: #363636; + color: #ffffff; } -/* Remove any gap between title and code block for bash/shell */ -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) .prism-code, -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) .prism-code, -div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) pre, -div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) pre { - margin-top: 0 !important; - border-radius: 0 0 6px 6px !important; +[data-theme="dark"] #issue-management-integration ~ p + ul li::before { + filter: invert(1) brightness(0.8); +} + +/* Responsive design */ +@media (max-width: 768px) { + #issue-management-integration ~ p + ul { + grid-template-columns: 1fr 1fr; + gap: 0.8rem; + } + + #issue-management-integration ~ p + ul li { + padding: 0.8rem 1rem; + font-size: 0.95rem; + } } -/* For bash/shell code blocks without titles, keep full border radius */ -div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(.prism-code[class*="language-bash"]) .prism-code, -div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(.prism-code[class*="language-shell"]) .prism-code, -div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(pre[class*="language-bash"]) pre, -div[class*="codeBlockContainer"]:not(:has(div[class*="codeBlockTitle"])):has(pre[class*="language-shell"]) pre { - border-radius: 6px !important; +@media (max-width: 480px) { + #issue-management-integration ~ p + ul { + grid-template-columns: 1fr; + gap: 0.6rem; + } + + #issue-management-integration ~ p + ul li { + padding: 0.7rem 0.8rem; + font-size: 0.9rem; + } + + #issue-management-integration ~ p + ul li::before { + width: 20px; + height: 20px; + } } From 12d440aca833e29552117ac458e98625ee563a7f Mon Sep 17 00:00:00 2001 From: Prasad Bhat Date: Thu, 24 Jul 2025 23:14:01 +0530 Subject: [PATCH 3/3] docs: optimized custom.css to have the changes for admonitions (#438) --- src/css/custom.css | 1007 +++++++++++++++----------------------------- 1 file changed, 341 insertions(+), 666 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 988e2e31..02722064 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -48,8 +48,8 @@ --imf-note-border-color: #25bab1; --imf-note-background-color: #f1fffe; --imf-note-text-color: #208682; - --imf-text-color-bg: #e8e8e8; - --imf-text-color: #171717; + --imf-text-color-bg: #f6f7f8; + --imf-text-color: #1a1a1a; --imf-text-button-color-bg: #e8e8e8; } @@ -347,12 +347,11 @@ a[docid="docs"] > svg { background-color: var(--ifm-breadcrumb-item-background-active); } -/* Add left spacing to main content */ +/* ===== MARKDOWN LAYOUT ===== */ .markdown { padding-left: 1.5rem; } -/* Align numbered lists with other content */ .markdown ol { padding-left: 1.2rem; margin-left: 0; @@ -363,8 +362,7 @@ a[docid="docs"] > svg { padding-left: 0.5rem; } - -/* ===== PLATFORM TABLES STYLING ===== */ +/* ===== TABLE STYLING ===== */ .markdown table { display: table; width: 100%; @@ -376,103 +374,94 @@ a[docid="docs"] > svg { border-radius: 12px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + background: #ffffff !important; } -/* Consolidated table background and border declarations */ -.markdown table thead, -.markdown table tbody, -.markdown table tr, -.markdown table th, -.markdown table td, -.markdown table tbody tr:hover, -.markdown table tbody tr:hover td { - background: #ffffff !important; +.markdown table * { + background: inherit !important; border: none !important; } -@media (max-width: 768px) { - .markdown { - overflow-x: auto; - } - - .markdown table { - min-width: 600px; - width: auto; - margin: 1.5rem 0; - display: table; - } +.markdown table th, +.markdown table td { + padding: 1.5rem 2rem; + box-sizing: border-box; + border-right: 1px solid #f3f4f6 !important; } .markdown table th { color: var(--ifm-heading-color); - padding: 1.5rem 2rem; text-align: left; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid #e5e7eb !important; - border-right: 1px solid #f3f4f6 !important; - box-sizing: border-box; margin: 0; } -.markdown table th:first-child { - border-top-left-radius: 12px; -} - -.markdown table th:last-child { - border-bottom: 1px solid #e5e7eb !important; - border-right: none !important; - border-top-right-radius: 12px; -} - .markdown table td { - padding: 1.5rem 2rem; - border-bottom: 1px solid #f3f4f6 !important; - border-right: 1px solid #f3f4f6 !important; color: var(--ifm-color-content); vertical-align: middle; - box-sizing: border-box; font-size: 1rem; -} - -.markdown table td:last-child { border-bottom: 1px solid #f3f4f6 !important; - border-right: none !important; } -.markdown table tbody tr:last-child td { - border-bottom: none !important; -} - -.markdown table tbody tr:last-child td:first-child { - border-bottom-left-radius: 12px; -} +.markdown table th:first-child { border-top-left-radius: 12px; } +.markdown table th:last-child { border-top-right-radius: 12px; border-right: none !important; } +.markdown table td:last-child, +.markdown table th:last-child { border-right: none !important; } +.markdown table tbody tr:last-child td { border-bottom: none !important; } +.markdown table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; } +.markdown table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; } -.markdown table tbody tr:last-child td:last-child { - border-bottom-right-radius: 12px; +/* Dark theme tables */ +[data-theme="dark"] .markdown table { + background: #232323 !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } -.markdown table tbody tr:hover { - background: #ffffff !important; +[data-theme="dark"] .markdown table th { + border-bottom: 1px solid #404040 !important; + border-right: 1px solid #363636 !important; } -.markdown table tbody tr:hover td { - background: #ffffff !important; +[data-theme="dark"] .markdown table td { + border-bottom: 1px solid #363636 !important; + border-right: 1px solid #363636 !important; } -/* Responsive design for tables */ +/* Responsive tables */ @media (max-width: 768px) { - .markdown table th { - padding: 1.2rem 1.5rem; - font-size: 1rem; - white-space: nowrap; + .markdown { + overflow-x: auto; + } + + .markdown table { + min-width: 600px; + width: auto; + margin: 1.5rem 0; } + .markdown table th, .markdown table td { padding: 1.2rem 1.5rem; font-size: 0.95rem; white-space: nowrap; } + + .markdown table th { + font-size: 1rem; + } + + /* Table icon responsive */ + .markdown table td a[href*="github-com"]::before, + .markdown table td a[href*="github-enterprise-server"]::before, + .markdown table td a[href*="gitlab-com"]::before, + .markdown table td a[href*="self-hosted-gitlab"]::before, + .markdown table td a[href*="azure-devops"]::before, + .markdown table td a[href*="bitbucket"]::before { + width: 14px; + height: 14px; + } } @media (max-width: 480px) { @@ -482,16 +471,14 @@ a[docid="docs"] > svg { font-size: 0.9rem; } - .markdown table th { - padding: 1rem 1.2rem; - font-size: 0.95rem; - white-space: nowrap; - } - + .markdown table th, .markdown table td { padding: 1rem 1.2rem; font-size: 0.9rem; - white-space: nowrap; + } + + .markdown table th { + font-size: 0.95rem; } .support-icon { @@ -499,50 +486,21 @@ a[docid="docs"] > svg { height: 16px !important; margin-right: 0.5rem !important; } -} -[data-theme="dark"] .markdown table { - background: #232323 !important; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -} - -/* Consolidated dark theme table background and border declarations */ -[data-theme="dark"] .markdown table thead, -[data-theme="dark"] .markdown table tbody, -[data-theme="dark"] .markdown table tr, -[data-theme="dark"] .markdown table th, -[data-theme="dark"] .markdown table td, -[data-theme="dark"] .markdown table tbody tr:hover, -[data-theme="dark"] .markdown table tbody tr:hover td { - background: #232323 !important; - border: none !important; -} - -[data-theme="dark"] .markdown table th { - border-bottom: 1px solid #404040 !important; - border-right: 1px solid #363636 !important; -} - -[data-theme="dark"] .markdown table th:last-child { - border-right: none !important; -} - -[data-theme="dark"] .markdown table td { - border-bottom: 1px solid #363636 !important; - border-right: 1px solid #363636 !important; -} - -[data-theme="dark"] .markdown table td:last-child { - border-right: none !important; -} - -[data-theme="dark"] .markdown table tbody tr:last-child td { - border-bottom: none !important; + /* Table icon responsive */ + .markdown table td a[href*="github-com"]::before, + .markdown table td a[href*="github-enterprise-server"]::before, + .markdown table td a[href*="gitlab-com"]::before, + .markdown table td a[href*="self-hosted-gitlab"]::before, + .markdown table td a[href*="azure-devops"]::before, + .markdown table td a[href*="bitbucket"]::before { + width: 12px; + height: 12px; + } } -/* ===== SUPPORTED LINKS WITH CHECKMARK ICONS ===== */ -/* Add checkmark icons to "Supported" links in platform tables */ +/* Platform links with checkmark icons */ .markdown table td a[href*="github-com"], .markdown table td a[href*="github-enterprise-server"], .markdown table td a[href*="gitlab-com"], @@ -567,38 +525,13 @@ a[docid="docs"] > svg { flex-shrink: 0; } -/* Dark theme and responsive styles */ [data-theme="dark"] .markdown table td a[href*="github-com"]::before, [data-theme="dark"] .markdown table td a[href*="github-enterprise-server"]::before, [data-theme="dark"] .markdown table td a[href*="gitlab-com"]::before, [data-theme="dark"] .markdown table td a[href*="self-hosted-gitlab"]::before, [data-theme="dark"] .markdown table td a[href*="azure-devops"]::before, [data-theme="dark"] .markdown table td a[href*="bitbucket"]::before { - filter: invert(1) brightness(0.8); -} - -@media (max-width: 768px) { - .markdown table td a[href*="github-com"]::before, - .markdown table td a[href*="github-enterprise-server"]::before, - .markdown table td a[href*="gitlab-com"]::before, - .markdown table td a[href*="self-hosted-gitlab"]::before, - .markdown table td a[href*="azure-devops"]::before, - .markdown table td a[href*="bitbucket"]::before { - width: 14px; - height: 14px; - } -} - -@media (max-width: 480px) { - .markdown table td a[href*="github-com"]::before, - .markdown table td a[href*="github-enterprise-server"]::before, - .markdown table td a[href*="gitlab-com"]::before, - .markdown table td a[href*="self-hosted-gitlab"]::before, - .markdown table td a[href*="azure-devops"]::before, - .markdown table td a[href*="bitbucket"]::before { - width: 12px; - height: 12px; - } + filter: none; } /* ===== DOCUSAURUS BLOCKQUOTE OVERRIDE ===== */ @@ -630,52 +563,32 @@ a[docid="docs"] > svg { border-left: 4px solid #666666; } -/* Responsive design for blockquotes */ -@media (max-width: 768px) { - .markdown blockquote { - padding: 1rem 1.2rem; - margin: 1.2rem 0; - border-left-width: 3px; - } -} - -@media (max-width: 480px) { - .markdown blockquote { - padding: 0.8rem 1rem; - margin: 1rem 0; - border-left-width: 3px; - } -} -/* info component */ -.theme-admonition.theme-admonition-info { - background-color: #e3f2fd !important; - border: 2px solid #4cb3d4 !important; - padding: 16px !important; - border-radius: 8px !important; +/* ===== ADMONITION COMPONENTS ===== */ +/* Base admonition styles */ +.theme-admonition { + border: 2px solid !important; font-family: "Roboto", sans-serif !important; margin: 1.5rem 0 !important; } -.theme-admonition.theme-admonition-info p { +.theme-admonition p { color: #333 !important; font-size: 1rem !important; line-height: 1.6 !important; } -.theme-admonition.theme-admonition-info a { - color: #1976d2 !important; +.theme-admonition a { text-decoration: none !important; } -.theme-admonition.theme-admonition-info a:hover { +.theme-admonition a:hover { text-decoration: underline !important; } -.theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { - color: #4cb3d4 !important; +.admonitionHeading_Gvgb { display: flex !important; align-items: center !important; font-size: 1rem !important; @@ -683,226 +596,66 @@ a[docid="docs"] > svg { text-transform: capitalize !important; } -.theme-admonition.theme-admonition-info .admonitionIcon_Rf37 svg { - display: block !important; - color: #4cb3d4 !important; - fill: #4cb3d4 !important; - width: 16px !important; - height: 16px !important; -} - -/* Dark theme support for info component */ -[data-theme="dark"] .theme-admonition.theme-admonition-info { - background-color: #252828 !important; - border: 2px solid #4cb3d4 !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-info p { - color: #f5f5f5 !important; +.admonitionIcon_Rf37 svg { + display: none !important; } -[data-theme="dark"] .theme-admonition.theme-admonition-info a { - color: #64b5f6 !important; +/* Individual admonition types */ +.theme-admonition-info { + background-color: #e3f2fd !important; + border-color: #4cb3d4 !important; + padding: 16px !important; + border-radius: 8px !important; } -[data-theme="dark"] .theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { +.theme-admonition-info a { color: #1976d2 !important; } +.theme-admonition-info .admonitionHeading_Gvgb { color: #4cb3d4 !important; } +.theme-admonition-info .admonitionIcon_Rf37 svg { + display: block !important; color: #4cb3d4 !important; + fill: #4cb3d4 !important; + width: 16px !important; + height: 16px !important; } -/* Responsive design for info component */ -@media (max-width: 768px) { - .theme-admonition.theme-admonition-info { - padding: 12px !important; - margin: 1rem 0 !important; - border-radius: 6px !important; - } - - .theme-admonition.theme-admonition-info p { - font-size: 0.95rem !important; - } - - .theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { - font-size: 0.95rem !important; - } - - .theme-admonition.theme-admonition-info .admonitionIcon_Rf37 { - width: 18px !important; - height: 18px !important; - } -} - -@media (max-width: 480px) { - .theme-admonition.theme-admonition-info { - padding: 10px !important; - margin: 0.8rem 0 !important; - border-radius: 4px !important; - } - - .theme-admonition.theme-admonition-info p { - font-size: 0.9rem !important; - line-height: 1.5 !important; - } - - .theme-admonition.theme-admonition-info .admonitionHeading_Gvgb { - font-size: 0.9rem !important; - } - - .theme-admonition.theme-admonition-info .admonitionIcon_Rf37 { - width: 16px !important; - height: 16px !important; - } -} - -/* note component */ -.theme-admonition.theme-admonition-note { +.theme-admonition-note { background-color: #eaf6f4 !important; - border: 2px solid #00b8a9 !important; + border-color: #00b8a9 !important; padding: 16px !important; border-radius: 8px !important; - font-family: "Roboto", sans-serif !important; - margin: 1.5rem 0 !important; -} - -.theme-admonition.theme-admonition-note p { - color: #333 !important; - font-size: 1rem !important; - line-height: 1.6 !important; -} - -.theme-admonition.theme-admonition-note a { - color: #ff6600 !important; - text-decoration: none !important; } -.theme-admonition.theme-admonition-note a:hover { - text-decoration: underline !important; -} -.admonitionHeading_Gvgb { - color: #208682; - display: flex; - align-items: center; - font-size: 1rem !important; - - flex-direction: row; - text-transform: capitalize !important; -} - -.admonitionIcon_Rf37 svg { - display: none !important; -} - -.theme-admonition.theme-admonition-note .admonitionIcon_Rf37 { +.theme-admonition-note a { color: #ff6600 !important; } +.theme-admonition-note .admonitionHeading_Gvgb { color: #208682 !important; } +.theme-admonition-note .admonitionIcon_Rf37 { background-image: url("/static/img/Icons/Icons.png"); background-position: center; width: 20px; - height: 20px; - background-size: cover; -} - -/* Dark theme support for note component */ -[data-theme="dark"] .theme-admonition.theme-admonition-note { - background-color: #252828 !important; - border: 2px solid #208682 !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-note p { - color: #f5f5f5 !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-note a { - color: #ff865b !important; -} - -[data-theme="dark"] .admonitionHeading_Gvgb { - color: #25bab1 !important; -} - -/* Responsive design for note component */ -@media (max-width: 768px) { - .theme-admonition.theme-admonition-note { - padding: 12px !important; - margin: 1rem 0 !important; - border-radius: 6px !important; - } - - .theme-admonition.theme-admonition-note p { - font-size: 0.95rem !important; - } - - .admonitionHeading_Gvgb { - font-size: 0.95rem !important; - } - - .theme-admonition.theme-admonition-note .admonitionIcon_Rf37 { - width: 18px !important; - height: 18px !important; - } -} - -@media (max-width: 480px) { - .theme-admonition.theme-admonition-note { - padding: 10px !important; - margin: 0.8rem 0 !important; - border-radius: 4px !important; - } - - .theme-admonition.theme-admonition-note p { - font-size: 0.9rem !important; - line-height: 1.5 !important; - } - - .admonitionHeading_Gvgb { - font-size: 0.9rem !important; - } - - .theme-admonition.theme-admonition-note .admonitionIcon_Rf37 { - width: 16px !important; - height: 16px !important; - } -} - -/* ===== TIP COMPONENT STYLING ===== */ -/* Style Docusaurus :::tip admonitions to match design */ -.theme-admonition.theme-admonition-tip { - background-color: #FFFCFB !important; - border: 2px solid #ff865b !important; - padding: 1rem 1.25rem !important; - border-radius: 16px !important; - font-family: "Roboto", sans-serif !important; - margin: 1.5rem 0 !important; -} - -.theme-admonition.theme-admonition-tip p { - color: #333 !important; - font-size: 0.9rem !important; - line-height: 1.6 !important; - margin: 0 !important; + height: 20px; + background-size: cover; } -.theme-admonition.theme-admonition-tip a { - color: #ff570a !important; - text-decoration: none !important; +.theme-admonition-tip { + background-color: #FFFCFB !important; + border-color: #ff865b !important; + padding: 1rem 1.25rem !important; + border-radius: 16px !important; } -.theme-admonition.theme-admonition-tip a:hover { - text-decoration: underline !important; +.theme-admonition-tip p { + font-size: 0.9rem !important; + margin: 0 !important; } -.theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { +.theme-admonition-tip a { color: #ff570a !important; } +.theme-admonition-tip .admonitionHeading_Gvgb { color: #ff570a !important; - display: flex !important; - align-items: center !important; font-size: 1.1rem !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; - text-transform: capitalize !important; -} - -.theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 svg { - display: none !important; } -.theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { +.theme-admonition-tip .admonitionIcon_Rf37 { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23ff570a'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; @@ -912,121 +665,23 @@ a[docid="docs"] > svg { margin-right: 0.5rem !important; } -/* Dark theme support for tip component */ -[data-theme="dark"] .theme-admonition.theme-admonition-tip { - background-color: #232323 !important; - border: 2px solid #e97c57 !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-tip p { - color: #f5f5f5 !important; - font-size: 0.9rem !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-tip a { - color: #ff865b !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { - color: #e97c57 !important; -} - -[data-theme="dark"] .theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23e97c57'/%3E%3C/svg%3E") !important; - width: 20px !important; - height: 20px !important; -} - -/* Responsive design for tip component */ -@media (max-width: 768px) { - .theme-admonition.theme-admonition-tip { - padding: 0.9rem 1.1rem !important; - margin: 1rem 0 !important; - border-radius: 12px !important; - } - - .theme-admonition.theme-admonition-tip p { - font-size: 0.85rem !important; - } - - .theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { - font-size: 1rem !important; - margin-bottom: 0.4rem !important; - } - - .theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { - width: 18px !important; - height: 18px !important; - margin-right: 0.4rem !important; - } -} - -@media (max-width: 480px) { - .theme-admonition.theme-admonition-tip { - padding: 0.8rem 1rem !important; - margin: 0.8rem 0 !important; - border-radius: 10px !important; - } - - .theme-admonition.theme-admonition-tip p { - font-size: 0.8rem !important; - line-height: 1.5 !important; - } - - .theme-admonition.theme-admonition-tip .admonitionHeading_Gvgb { - font-size: 0.95rem !important; - margin-bottom: 0.3rem !important; - } - - .theme-admonition.theme-admonition-tip .admonitionIcon_Rf37 { - width: 16px !important; - height: 16px !important; - margin-right: 0.3rem !important; - } -} - -/* ===== WARNING COMPONENT STYLING ===== */ -/* Style Docusaurus :::warning admonitions to match design */ -.theme-admonition.theme-admonition-warning { +.theme-admonition-warning { background-color: #ffffff !important; - border: 2px solid #f1c232 !important; + border-color: #f1c232 !important; padding: 1rem 1.25rem !important; border-radius: 16px !important; - font-family: "Roboto", sans-serif !important; - margin: 1.5rem 0 !important; -} - -.theme-admonition.theme-admonition-warning p { - color: #333 !important; - font-size: 1rem !important; - line-height: 1.6 !important; - margin: 0 !important; -} - -.theme-admonition.theme-admonition-warning a { - color: #b38705 !important; - text-decoration: none !important; -} - -.theme-admonition.theme-admonition-warning a:hover { - text-decoration: underline !important; } -.theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { +.theme-admonition-warning p { margin: 0 !important; } +.theme-admonition-warning a { color: #b38705 !important; } +.theme-admonition-warning .admonitionHeading_Gvgb { color: #b38705 !important; - display: flex !important; - align-items: center !important; font-size: 1.1rem !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; - text-transform: capitalize !important; -} - -.theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 svg { - display: none !important; } -.theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 { +.theme-admonition-warning .admonitionIcon_Rf37 { background-image: url("/static/img/icons/Warning.png") !important; background-position: center !important; background-repeat: no-repeat !important; @@ -1036,75 +691,121 @@ a[docid="docs"] > svg { margin-right: 0.5rem !important; } -/* Dark theme support for warning component */ -[data-theme="dark"] .theme-admonition.theme-admonition-warning { - background-color: #232323 !important; - border: 2px solid #4b4a47 !important; +/* Dark theme admonitions */ +[data-theme="dark"] .theme-admonition p { color: #f5f5f5 !important; } + +[data-theme="dark"] .theme-admonition-info { + background-color: #252828 !important; } -[data-theme="dark"] .theme-admonition.theme-admonition-warning p { - color: #f5f5f5 !important; +[data-theme="dark"] .theme-admonition-info p { color: #f5f5f5 !important; } +[data-theme="dark"] .theme-admonition-info a { color: #64b5f6 !important; } +[data-theme="dark"] .theme-admonition-info .admonitionHeading_Gvgb { color: #4cb3d4 !important; } + +[data-theme="dark"] .theme-admonition-note { + background-color: #252828 !important; + border-color: #208682 !important; +} + +[data-theme="dark"] .theme-admonition-note a { color: #ff865b !important; } +[data-theme="dark"] .theme-admonition-note .admonitionHeading_Gvgb, +[data-theme="dark"] .admonitionHeading_Gvgb { color: #25bab1 !important; } + +[data-theme="dark"] .theme-admonition-tip { + background-color: #232323 !important; + border-color: #e97c57 !important; } -[data-theme="dark"] .theme-admonition.theme-admonition-warning a { - color: #e9af01 !important; +[data-theme="dark"] .theme-admonition-tip p { font-size: 0.9rem !important; } +[data-theme="dark"] .theme-admonition-tip a { color: #ff865b !important; } +[data-theme="dark"] .theme-admonition-tip .admonitionHeading_Gvgb { color: #e97c57 !important; } +[data-theme="dark"] .theme-admonition-tip .admonitionIcon_Rf37 { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z' fill='%23e97c57'/%3E%3C/svg%3E") !important; } -[data-theme="dark"] .theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { - color: #e9af01 !important; +[data-theme="dark"] .theme-admonition-warning { + background-color: #232323 !important; + border-color: #4b4a47 !important; } -/* Responsive design for warning component */ +[data-theme="dark"] .theme-admonition-warning a { color: #e9af01 !important; } +[data-theme="dark"] .theme-admonition-warning .admonitionHeading_Gvgb { color: #e9af01 !important; } + +/* Responsive admonitions */ @media (max-width: 768px) { - .theme-admonition.theme-admonition-warning { - padding: 0.9rem 1.1rem !important; + .theme-admonition { + padding: 12px !important; margin: 1rem 0 !important; - border-radius: 12px !important; + border-radius: 6px !important; } - - .theme-admonition.theme-admonition-warning p { - font-size: 0.95rem !important; + + .theme-admonition p { font-size: 0.95rem !important; } + .admonitionHeading_Gvgb { font-size: 0.95rem !important; } + .admonitionIcon_Rf37 { width: 18px !important; height: 18px !important; } + + .theme-admonition-tip { + padding: 0.9rem 1.1rem !important; + border-radius: 12px !important; } - - .theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { + + .theme-admonition-tip p { font-size: 0.85rem !important; } + .theme-admonition-tip .admonitionHeading_Gvgb { font-size: 1rem !important; margin-bottom: 0.4rem !important; } - - .theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 { - width: 18px !important; - height: 18px !important; - margin-right: 0.4rem !important; + + .theme-admonition-warning { + padding: 0.9rem 1.1rem !important; + border-radius: 12px !important; + } + + .theme-admonition-warning .admonitionHeading_Gvgb { + font-size: 1rem !important; + margin-bottom: 0.4rem !important; } } @media (max-width: 480px) { - .theme-admonition.theme-admonition-warning { - padding: 0.8rem 1rem !important; + .theme-admonition { + padding: 10px !important; margin: 0.8rem 0 !important; - border-radius: 10px !important; + border-radius: 4px !important; } - - .theme-admonition.theme-admonition-warning p { + + .theme-admonition p { font-size: 0.9rem !important; line-height: 1.5 !important; } - - .theme-admonition.theme-admonition-warning .admonitionHeading_Gvgb { + + .admonitionHeading_Gvgb { font-size: 0.9rem !important; } + .admonitionIcon_Rf37 { width: 16px !important; height: 16px !important; } + + .theme-admonition-tip { + padding: 0.8rem 1rem !important; + border-radius: 10px !important; + } + + .theme-admonition-tip p { + font-size: 0.8rem !important; + line-height: 1.5 !important; + } + + .theme-admonition-tip .admonitionHeading_Gvgb { font-size: 0.95rem !important; margin-bottom: 0.3rem !important; } - - .theme-admonition.theme-admonition-warning .admonitionIcon_Rf37 { - width: 16px !important; - height: 16px !important; - margin-right: 0.3rem !important; + + .theme-admonition-warning { + padding: 0.8rem 1rem !important; + border-radius: 10px !important; + } + + .theme-admonition-warning .admonitionHeading_Gvgb { + font-size: 0.95rem !important; + margin-bottom: 0.3rem !important; } } -/* ===== DOCUSAURUS CODE BLOCK OVERRIDES ===== */ -/* Override default Docusaurus code blocks to match custom chat-bubble styling */ - .prism-code, pre[class*="language-"], .theme-code-block pre { @@ -1139,26 +840,18 @@ pre[class*="language-"] .token-line { color: #333 !important; } -/* Style the copy button to match the design */ -.codeBlockContainer_Ckt0 .copyButton_kopz, -div[class*="codeBlockContainer"] button[class*="copyButton"] { - position: absolute !important; - top: 0.75rem !important; - right: 0.75rem !important; - background: rgba(255, 255, 255, 0.8) !important; - border: 1px solid #e0e1e2 !important; - border-radius: 4px !important; - color: #666 !important; - padding: 0.4rem !important; - opacity: 0.8 !important; - transition: opacity 0.2s ease, background 0.2s ease !important; +/* Override for text blocks specifically - force dark text */ +.language-text .token-line, +.prism-code.language-text .token-line, +pre[class*="language-text"] .token-line, +.language-text, +.prism-code.language-text, +pre.language-text, +code[class*="language-text"], +.language-text * { + color: #000000 !important; } -.codeBlockContainer_Ckt0 .copyButton_kopz:hover, -div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { - opacity: 1 !important; - background: rgba(255, 255, 255, 0.95) !important; -} /* Dark theme support for code blocks */ [data-theme="dark"] .prism-code, @@ -1184,17 +877,6 @@ div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { color: #f5f5f5 !important; } -[data-theme="dark"] .codeBlockContainer_Ckt0 .copyButton_kopz, -[data-theme="dark"] div[class*="codeBlockContainer"] button[class*="copyButton"] { - background: rgba(0, 0, 0, 0.6) !important; - border: 1px solid #363636 !important; - color: #f5f5f5 !important; -} - -[data-theme="dark"] .codeBlockContainer_Ckt0 .copyButton_kopz:hover, -[data-theme="dark"] div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { - background: rgba(0, 0, 0, 0.8) !important; -} /* Responsive design for code blocks */ @media (max-width: 768px) { @@ -1214,12 +896,6 @@ div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { border-radius: 6px !important; } - .codeBlockContainer_Ckt0 .copyButton_kopz, - div[class*="codeBlockContainer"] button[class*="copyButton"] { - top: 0.5rem !important; - right: 0.5rem !important; - padding: 0.3rem !important; - } } @media (max-width: 480px) { @@ -1239,12 +915,6 @@ div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { border-radius: 4px !important; } - .codeBlockContainer_Ckt0 .copyButton_kopz, - div[class*="codeBlockContainer"] button[class*="copyButton"] { - top: 0.4rem !important; - right: 0.4rem !important; - padding: 0.25rem !important; - } } /* ===== CODE BLOCK STYLING ===== */ @@ -1260,18 +930,11 @@ div[class*="codeBlockContainer"] button[class*="copyButton"]:hover { .prism-code[class*="language-"] .token.operator, .prism-code[class*="language-"] .token.punctuation, pre[class*="language-"] .token.operator, pre[class*="language-"] .token.punctuation { color: #d1d5db !important; } .prism-code[class*="language-"] .token.comment, pre[class*="language-"] .token.comment { color: #9ca3af !important; font-style: italic !important; } -/* Copy button for dark code blocks */ -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-bash"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(.prism-code[class*="language-shell"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(pre[class*="language-bash"]) button[class*="copyButton"], -div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class*="copyButton"] { - background: rgba(0, 0, 0, 0.6) !important; - color: #f5f5f5 !important; -} -/* ===== GIT PLATFORM INTEGRATION GRID ===== */ -/* Transform the git platforms list into a visual grid with icons */ -#git-platform-integration ~ p + ul { +/* ===== INTEGRATION GRIDS ===== */ +/* Base styles for both Git and Issue management integration grids */ +#git-platform-integration ~ p + ul, +#issue-management-integration ~ p + ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; @@ -1281,7 +944,8 @@ div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class* align-items: start; } -#git-platform-integration ~ p + ul li { +#git-platform-integration ~ p + ul li, +#issue-management-integration ~ p + ul li { display: flex; align-items: center; gap: 0.75rem; @@ -1298,7 +962,8 @@ div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class* top: 0; } -#git-platform-integration ~ p + ul li::before { +#git-platform-integration ~ p + ul li::before, +#issue-management-integration ~ p + ul li::before { content: ""; width: 24px; height: 24px; @@ -1308,39 +973,35 @@ div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class* flex-shrink: 0; } -/* Platform-specific icons using nth-child since we know the order: - 1. GitHub, 2. GitLab, 3. Bitbucket, 4. Azure */ -#git-platform-integration ~ p + ul li:nth-child(1)::before { - background-image: url('/img/overview/Github.png'); -} - -#git-platform-integration ~ p + ul li:nth-child(2)::before { - background-image: url('/img/overview/Gitlab.png'); -} - -#git-platform-integration ~ p + ul li:nth-child(3)::before { - background-image: url('/img/overview/Bitbucket.png'); -} +/* Git platform icons */ +#git-platform-integration ~ p + ul li:nth-child(1)::before { background-image: url('/img/overview/Github.png'); } +#git-platform-integration ~ p + ul li:nth-child(2)::before { background-image: url('/img/overview/Gitlab.png'); } +#git-platform-integration ~ p + ul li:nth-child(3)::before { background-image: url('/img/overview/Bitbucket.png'); } +#git-platform-integration ~ p + ul li:nth-child(4)::before { background-image: url('/img/overview/Azure.png'); } -#git-platform-integration ~ p + ul li:nth-child(4)::before { - background-image: url('/img/overview/Azure.png'); -} +/* Issue management icons */ +#issue-management-integration ~ p + ul li:nth-child(1)::before { background-image: url('/img/overview/Github.png'); } +#issue-management-integration ~ p + ul li:nth-child(2)::before { background-image: url('/img/overview/Gitlab.png'); } +#issue-management-integration ~ p + ul li:nth-child(3)::before { background-image: url('/img/overview/Jira.png'); } +#issue-management-integration ~ p + ul li:nth-child(4)::before { background-image: url('/img/overview/Linear.png'); } /* Dark theme support */ -[data-theme="dark"] #git-platform-integration ~ p + ul li { +[data-theme="dark"] #git-platform-integration ~ p + ul li, +[data-theme="dark"] #issue-management-integration ~ p + ul li { background-color: #232323; border-color: #363636; color: #ffffff; } -[data-theme="dark"] #git-platform-integration ~ p + ul li::before { +[data-theme="dark"] #git-platform-integration ~ p + ul li::before, +[data-theme="dark"] #issue-management-integration ~ p + ul li::before { filter: invert(1) brightness(0.8); } -/* Responsive design */ +/* Responsive integration grids */ @media (max-width: 768px) { - #git-platform-integration ~ p + ul { - grid-template-columns: 1fr 1fr; + #git-platform-integration ~ p + ul, + #issue-management-integration ~ p + ul { gap: 0.8rem; } @@ -1348,10 +1009,16 @@ div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class* padding: 1.2rem 1.5rem; font-size: 0.95rem; } + + #issue-management-integration ~ p + ul li { + padding: 0.8rem 1rem; + font-size: 0.95rem; + } } @media (max-width: 480px) { - #git-platform-integration ~ p + ul { + #git-platform-integration ~ p + ul, + #issue-management-integration ~ p + ul { grid-template-columns: 1fr; gap: 0.6rem; } @@ -1361,107 +1028,115 @@ div[class*="codeBlockContainer"]:has(pre[class*="language-shell"]) button[class* font-size: 0.9rem; } - #git-platform-integration ~ p + ul li::before { + #issue-management-integration ~ p + ul li { + padding: 0.7rem 0.8rem; + font-size: 0.9rem; + } + + #git-platform-integration ~ p + ul li::before, + #issue-management-integration ~ p + ul li::before { width: 20px; height: 20px; } } -/* ===== ISSUE-MANAGEMENT INTEGRATION GRID ===== */ -/* Transform the issue-management platforms list into a visual grid with icons */ -/* Target the ul that comes after the Issue-management integration heading by position */ -#issue-management-integration ~ p + ul { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - list-style: none; - padding: 0; - margin: 1.5rem 0; - align-items: start; -} - -#issue-management-integration ~ p + ul li { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 1.5rem 2rem; - border: 2px solid #e0e0e0; - border-radius: 8px; - background-color: #fafafa; - font-weight: 500; - min-height: 100px; - height: 100px; - box-sizing: border-box; - margin: 0; - position: relative; - top: 0; -} - -#issue-management-integration ~ p + ul li::before { - content: ""; - width: 24px; - height: 24px; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - flex-shrink: 0; -} - -/* Platform-specific icons using nth-child since we know the order: - 1. GitHub Issues, 2. GitLab Issues, 3. Jira, 4. Linear */ -#issue-management-integration ~ p + ul li:nth-child(1)::before { - background-image: url('/img/overview/Github.png'); -} - -#issue-management-integration ~ p + ul li:nth-child(2)::before { - background-image: url('/img/overview/Gitlab.png'); -} - -#issue-management-integration ~ p + ul li:nth-child(3)::before { - background-image: url('/img/overview/Jira.png'); +/* ===== DATA PRIVACY SECTION PLAIN BULLETS ===== */ +/* Ensure data privacy section uses regular bullet points, not boxes */ +#data-privacy-and-security ~ p + ul { + display: block !important; + grid-template-columns: none !important; + gap: 0 !important; + list-style: disc !important; + padding-left: 1.5rem !important; + margin: 1rem 0 !important; } -#issue-management-integration ~ p + ul li:nth-child(4)::before { - background-image: url('/img/overview/Linear.png'); +#data-privacy-and-security ~ p + ul li { + display: list-item !important; + align-items: initial !important; + gap: 0 !important; + padding: 0.25rem 0 !important; + border: none !important; + border-radius: 0 !important; + background-color: transparent !important; + font-weight: normal !important; + min-height: auto !important; + height: auto !important; + box-sizing: content-box !important; + margin: 0 !important; + position: static !important; + top: auto !important; } -/* Dark theme support */ -[data-theme="dark"] #issue-management-integration ~ p + ul li { - background-color: #232323; - border-color: #363636; - color: #ffffff; +#data-privacy-and-security ~ p + ul li::before { + display: none !important; + content: none !important; + width: 0 !important; + height: 0 !important; + background: none !important; } -[data-theme="dark"] #issue-management-integration ~ p + ul li::before { - filter: invert(1) brightness(0.8); +[data-theme="dark"] #data-privacy-and-security ~ p + ul li { + background-color: transparent !important; + border: none !important; + color: inherit !important; } -/* Responsive design */ -@media (max-width: 768px) { - #issue-management-integration ~ p + ul { - grid-template-columns: 1fr 1fr; - gap: 0.8rem; - } - - #issue-management-integration ~ p + ul li { - padding: 0.8rem 1rem; - font-size: 0.95rem; - } +/* ===== FORCE DARK TEXT FOR TEXT CODE BLOCKS ===== */ +/* Aggressive override for text code blocks in light theme */ +:root { + --prism-color-text: #000000 !important; +} + +[data-theme="light"] .language-text .token-line, +[data-theme="light"] .prism-code.language-text .token-line, +[data-theme="light"] pre.language-text .token-line, +[data-theme="light"] .language-text span, +[data-theme="light"] .prism-code.language-text span, +[data-theme="light"] pre.language-text span, +.theme-code-block .language-text .token-line, +.theme-code-block .language-text span, +.codeBlockContent_biex .language-text .token-line, +.codeBlockContent_biex .language-text span { + color: #1c1e21 !important; + opacity: 1 !important; } -@media (max-width: 480px) { - #issue-management-integration ~ p + ul { - grid-template-columns: 1fr; - gap: 0.6rem; - } - - #issue-management-integration ~ p + ul li { - padding: 0.7rem 0.8rem; - font-size: 0.9rem; - } - - #issue-management-integration ~ p + ul li::before { - width: 20px; - height: 20px; - } +/* Also target text nodes directly */ +[data-theme="light"] .language-text, +[data-theme="light"] .prism-code.language-text, +[data-theme="light"] pre.language-text, +.theme-code-block .language-text, +.codeBlockContent_biex .language-text { + color: #1c1e21 !important; +} + +/* Reset button styling in text blocks */ +[data-theme="light"] .language-text button, +[data-theme="light"] .language-text [class*="button"], +[data-theme="light"] .prism-code.language-text button, +[data-theme="light"] .prism-code.language-text [class*="button"], +[data-theme="light"] pre.language-text button, +[data-theme="light"] pre.language-text [class*="button"], +.theme-code-block .language-text button, +.theme-code-block .language-text [class*="button"], +.codeBlockContent_biex .language-text button, +.codeBlockContent_biex .language-text [class*="button"] { + color: initial; +} + +/* Make copy button icon lighter in dark mode - target all possible SVG elements */ +[data-theme="dark"] .copyButtonIcons_IEyt, +[data-theme="dark"] .copyButtonIcons_IEyt *, +[data-theme="dark"] .copyButtonIcons_IEyt svg, +[data-theme="dark"] .copyButtonIcons_IEyt svg *, +[data-theme="dark"] .copyButtonIcons_IEyt path, +[data-theme="dark"] button .copyButtonIcons_IEyt, +[data-theme="dark"] button .copyButtonIcons_IEyt *, +[data-theme="dark"] button .copyButtonIcons_IEyt svg, +[data-theme="dark"] button .copyButtonIcons_IEyt svg *, +[data-theme="dark"] button .copyButtonIcons_IEyt path { + color: #f5f5f5 !important; + fill: #f5f5f5 !important; + stroke: #f5f5f5 !important; }