From 00f72e0f7329eb0d51e9bd1b7d5bb31aae745c3e Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Mon, 16 Dec 2024 11:44:27 +0100
Subject: [PATCH] Add styles based on the documentation tool

Use our heuristic to detect the documentation tool/theme and add specific
`--readthedocs-*` CSS variables based on that for known tools/themes.

Reference: https://github.com/readthedocs/readthedocs.org/pull/11849#issuecomment-2540234995
---
 src/flyout.js                  | 21 ++++++++++++++++++++-
 src/flyout.mkdocs.material.css |  4 ++++
 src/flyout.sphinx.furo.css     |  4 ++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/flyout.mkdocs.material.css
 create mode 100644 src/flyout.sphinx.furo.css

diff --git a/src/flyout.js b/src/flyout.js
index a10c9753..974567e2 100644
--- a/src/flyout.js
+++ b/src/flyout.js
@@ -8,7 +8,15 @@ import { classMap } from "lit/directives/class-map.js";
 import { default as objectPath } from "object-path";
 
 import styleSheet from "./flyout.css";
-import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils";
+import styleMkDocsMaterial from "./flyout.mkdocs.material.css";
+import styleSphinxFuro from "./flyout.sphinx.furo.css";
+import {
+  AddonBase,
+  addUtmParameters,
+  getLinkWithFilename,
+  docTool,
+} from "./utils";
+import { SPHINX, MKDOCS_MATERIAL } from "./constants";
 import {
   EVENT_READTHEDOCS_SEARCH_SHOW,
   EVENT_READTHEDOCS_FLYOUT_HIDE,
@@ -387,6 +395,17 @@ export class FlyoutAddon extends AddonBase {
     for (const elem of elems) {
       elem.loadConfig(config);
     }
+
+    this.addCustomStyle();
+  }
+
+  addCustomStyle() {
+    const doctool = docTool.documentationTool;
+    if (doctool === MKDOCS_MATERIAL) {
+      document.adoptedStyleSheets.push(styleMkDocsMaterial);
+    } else if (doctool == SPHINX && docTool.isSphinxFuroLikeTheme()) {
+      document.adoptedStyleSheets.push(styleSphinxFuro);
+    }
   }
 }
 
diff --git a/src/flyout.mkdocs.material.css b/src/flyout.mkdocs.material.css
new file mode 100644
index 00000000..61c2aa6e
--- /dev/null
+++ b/src/flyout.mkdocs.material.css
@@ -0,0 +1,4 @@
+:root {
+  /* Reduce Read the Docs' flyout font a little bit */
+  --readthedocs-flyout-font-size: 0.7rem;
+}
diff --git a/src/flyout.sphinx.furo.css b/src/flyout.sphinx.furo.css
new file mode 100644
index 00000000..b5d141f0
--- /dev/null
+++ b/src/flyout.sphinx.furo.css
@@ -0,0 +1,4 @@
+:root {
+  /* Reduce Read the Docs' flyout font a little bit */
+  --readthedocs-flyout-font-size: 0.75rem;
+}