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: readthedocs/readthedocs.org#11849 (comment)

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);
+    }
   }
 }
 

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;
+}

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;
+}