readthedocs · agjohnson · Dec 16, 2024 · Dec 17, 2024 · Dec 18, 2024 · Dec 18, 2024
@@ -101,7 +101,7 @@
       "load_when_embedded": false
     },
     "ethicalads": {
-      "ad_free": false,
+      "ad_free": true,
       "enabled": true,
       "publisher": "readthedocs",
       "campaign_types": ["community", "house", "paid"],

@@ -0,0 +1,5 @@
+/* Theme defaults? */
+:root {
+  --readthedocs-font-size: 10px;
+  --readthedocs-flyout-font-size: 30px;
+}
@@ -15,6 +15,7 @@
       );
     </script>
     <meta name="readthedocs-resolver-filename" content="/index.html" />
+    <link rel="stylesheet" href="global.css" />
   </head>
   <body>
       <h1 id="documentation-addons">Documentation Addons</h1>

@@ -8,4 +8,11 @@ export const ASCIIDOCTOR = "asciidoctor";
 export const JEKYLL = "jekyll";
 export const DOCSIFY = "docsify";
 export const ANTORA = "antora";
+export const MDBOOK = "mdbook";
 export const FALLBACK_DOCTOOL = "fallback";
+
+// Known documentation tools themes
+export const SPHINX_ALABASTER = "alabaster";
+export const SPHINX_FURO = "furo";
+export const SPHINX_READTHEDOCS = "readthedocs";
+export const SPHINX_IMMATERIAL = "immaterial";
@@ -0,0 +1,55 @@
+import styleSheetFlyout from "./flyout.css";
+
+import { CSSResult } from "lit";
+
+// We use a native construct here as Lit's CSSResult is largely read only.
+export const defaultStyleSheet = new CSSStyleSheet();
+
+/*
+ * Specific styles based on documentation tools and themes
+ *
+ * Usage of `@layer` at-rule pushes this rules down a step in
+ * precedence/priority. This allows a user `:root` rule to override these
+ * values.
+ **/
+defaultStyleSheet.replaceSync(`
+@layer defaults {
+  :root[data-readthedocs-tool="mkdocs-material"] {
+    --readthedocs-font-size: 0.58rem;
+    --readthedocs-flyout-font-size: 0.58rem;
+  }
+
+  :root[data-readthedocs-tool="antora"] {
+    --readthedocs-font-size: 0.7rem;
+    --readthedocs-flyout-font-size: 0.7rem;
+  }
+
+  :root[data-readthedocs-tool="mdbook"] {
+    --readthedocs-font-size: 1.3rem;
+    --readthedocs-flyout-font-size: 1.3rem;
+  }
+
+  :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] {
+    --readthedocs-font-size: 0.75rem;
+    --readthedocs-flyout-font-size: 0.75rem;
+  }
+
+  :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] {
+    --readthedocs-font-size: 0.58rem;
+    --readthedocs-flyout-font-size: 0.58rem;
+  }
+}
+`);
+
+const styleSheets = [styleSheetFlyout];
+
+for (let styleSheet of styleSheets) {
+  if (styleSheet instanceof CSSResult) {
+    styleSheet = styleSheet.styleSheet;
+  }
+  for (const rule of styleSheet.cssRules) {
+    if (rule instanceof CSSLayerBlockRule && rule.name == "defaults") {
+      defaultStyleSheet.insertRule(rule.cssText);
+    }
+  }
+}
@@ -1,4 +1,24 @@
-/* New */
+/* Flyout styles */
+
+@layer defaults {
+  :root {
+    --readthedocs-flyout-font-family: var(--readthedocs-font-family);
+    --readthedocs-flyout-font-size: var(--readthedocs-font-size);
+    --readthedocs-flyout-line-height: 1.25em;
+    --readthedocs-flyout-header-font-size: 1.125em;
+    --readthedocs-flyout-dt-font-size: 1.125em;
+    --readthedocs-flyout-dd-font-size: 1.125em;
+    --readthedocs-flyout-line-height: 1.25em;
+
+    --readthedocs-flyout-color: rgb(128, 128, 128);
+    --readthedocs-flyout-background-color: rgb(39, 39, 37);
+    --readthedocs-flyout-current-version-color: #27ae60;
+    --readthedocs-flyout-section-heading-color: rgb(128, 128, 128);
+    --readthedocs-flyout-item-link-color: rgb(252, 252, 252);
+    --readthedocs-flyout-divider-color: #413d3d;
+    --readthedocs-flyout-link-color: rgb(42, 128, 185);
+  }
+}
 
 .container {
   position: fixed;
@@ -7,6 +27,7 @@
   height: auto;
   max-height: calc(100% - 100px);
   overflow-y: auto;
+  line-height: var(--readthedocs-flyout-line-height);
 }
 
 .container.bottom-right {
@@ -29,25 +50,11 @@
   top: 50px;
 }
 
-:host {
-  --addons-flyout-font-size: var(
-    --readthedocs-flyout-font-size,
-    var(--readthedocs-font-size, 0.8rem)
-  );
-}
-
 :host > div {
-  font-family: var(
-    --readthedocs-flyout-font-family,
-    "Lato",
-    "proxima-nova",
-    "Helvetica Neue",
-    "Arial",
-    "sans-serif"
-  );
-  font-size: var(--addons-flyout-font-size);
-  color: var(--readthedocs-flyout-color, rgb(128, 128, 128));
-  background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37));
+  font-family: var(--readthedocs-flyout-font-family);
+  font-size: var(--readthedocs-flyout-font-size);
+  color: var(--readthedocs-flyout-color);
+  background-color: var(--readthedocs-flyout-background-color);
   z-index: 3000;
   padding: 0 10px;
   overflow-y: auto;
@@ -59,27 +66,21 @@ header {
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37));
+  background-color: var(--readthedocs-flyout-background-color);
   position: sticky;
   top: 0;
   padding: 10px 0;
 }
 
 header > span {
-  color: var(--readthedocs-flyout-current-version-color, #27ae60);
-  font-size: var(
-    --readthedocs-flyout-header-font-size,
-    calc(var(--addons-flyout-font-size) * 1.125)
-  );
+  color: var(--readthedocs-flyout-current-version-color);
+  font-size: var(--readthedocs-flyout-header-font-size);
   margin-left: 10px;
 }
 
 header > span svg.icon {
   color: rgb(128, 128, 128);
-  height: var(
-    --readthedocs-flyout-header-font-size,
-    calc(var(--addons-flyout-font-size) * 1.125)
-  );
+  height: var(--readthedocs-flyout-header-font-size);
   padding-right: 5px;
   vertical-align: middle;
 }
@@ -107,25 +108,19 @@ dl {
 }
 
 dl > dt {
-  font-size: var(
-    --readthedocs-flyout-dt-font-size,
-    calc(var(--addons-flyout-font-size) * 1.125)
-  );
-  color: var(--readthedocs-flyout-section-heading-color, rgb(128, 128, 128));
+  font-size: var(--readthedocs-flyout-dt-font-size);
+  color: var(--readthedocs-flyout-section-heading-color);
 }
 
 dl > dd {
   display: inline-block;
   margin: 0;
-  font-size: var(
-    --readthedocs-flyout-dd-font-size,
-    calc(var(--addons-flyout-font-size) * 1.125)
-  );
+  font-size: var(--readthedocs-flyout-dd-font-size);
 }
 
 dd a {
   text-decoration: none;
-  color: var(--readthedocs-flyout-item-link-color, rgb(252, 252, 252));
+  color: var(--readthedocs-flyout-item-link-color);
   padding: 6px;
   display: inline-block;
 }
@@ -148,10 +143,10 @@ hr {
   padding: 0;
   border-top-width: 1px;
   border-top-style: solid;
-  border-top-color: var(--readthedocs-flyout-divider-color, #413d3d);
+  border-top-color: var(--readthedocs-flyout-divider-color);
 }
 
 small a {
   text-decoration: none;
-  color: var(--readthedocs-flyout-link-color, rgb(42, 128, 185));
+  color: var(--readthedocs-flyout-link-color);
 }
@@ -9,6 +9,7 @@ import { default as objectPath } from "object-path";
 
 import styleSheet from "./flyout.css";
 import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils";
+import { SPHINX, MKDOCS_MATERIAL } from "./constants";
 import {
   EVENT_READTHEDOCS_SEARCH_SHOW,
   EVENT_READTHEDOCS_FLYOUT_HIDE,
@@ -31,9 +32,12 @@ export class FlyoutElement extends LitElement {
     super();
 
     this.config = null;
+    this.classes = {};
     this.opened = false;
     this.floating = true;
     this.position = "bottom-right";
+    this.classes = { floating: this.floating, container: true };
+    this.classes[this.position] = true;
     this.readthedocsLogo = READTHEDOCS_LOGO;
   }
 
@@ -310,11 +314,8 @@ export class FlyoutElement extends LitElement {
       return nothing;
     }
 
-    const classes = { floating: this.floating, container: true };
-    classes[this.position] = true;
-
     return html`
-      <div class=${classMap(classes)}>
+      <div class=${classMap(this.classes)}>
         ${this.renderHeader()}
         <main class=${classMap({ closed: !this.opened })}>
           ${this.renderLanguages()} ${this.renderVersions()}

@@ -11,13 +11,16 @@ import * as filetreediff from "./filetreediff";
 import * as customscript from "./customscript";
 import { default as objectPath } from "object-path";
 import {
+  docTool,
   domReady,
   isEmbedded,
   IS_PRODUCTION,
   setupLogging,
   getMetadataValue,
 } from "./utils";
 
+import { defaultStyleSheet } from "./defaults.js";
+
 export function setup() {
   const addons = [
     flyout.FlyoutAddon,
@@ -50,6 +53,28 @@ export function setup() {
           }
         }
 
+        // Apply fixes to variables for individual documentation tools
+        const elementHtml = document.querySelector("html");
+        if (elementHtml) {
+          // Inject styles at the parent DOM to set variables at :root
+          document.adoptedStyleSheets = [defaultStyleSheet];
+
+          // If we detect a documentation tool, set attributes on :root to allow
+          // for CSS selectors to utilize these values.
+          if (docTool.documentationTool) {
+            elementHtml.setAttribute(
+              "data-readthedocs-tool",
+              docTool.documentationTool,
+            );
+          }
+          if (docTool.documentationTheme) {
+            elementHtml.setAttribute(
+              "data-readthedocs-tool-theme",
+              docTool.documentationTheme,
+            );
+          }
+        }
+
         return getReadTheDocsConfig(sendUrlParam);
       })
       .then((config) => {