POC: Make flyout font sizes customizable with a single css variable (#…

…181) Fixes #95 Closes #175 This is missing proper documentation, but basically, by setting `--readthedocs-flyout-font-size` CSS variable on the flyout, you can control all of the font-sizes at once. For finer control, it's possible to instead override more specific CSS variables. --------- Co-authored-by: Manuel Kaufmann <[email protected]>
readthedocs · Nov 7, 2023 · f74dfba · f74dfba
1 parent 3ff4fa3
commit f74dfba
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/dist/readthedocs-addons.js b/dist/readthedocs-addons.js
diff --git a/dist/readthedocs-addons.js.map b/dist/readthedocs-addons.js.map
diff --git a/src/flyout.css b/src/flyout.css
@@ -29,6 +29,10 @@
   top: 50px;
 }
 
+:root {
+  --readthedocs-flyout-font-size: 0.8rem;
+}
+
 :host > div {
   font-family: var(
     --readthedocs-flyout-font-family,
@@ -38,7 +42,7 @@
     "Arial",
     "sans-serif"
   );
-  font-size: var(--readthedocs-flyout-font-size, 0.8rem);
+  font-size: var(--readthedocs-flyout-font-size);
   color: var(--readthedocs-flyout-color, rgb(128, 128, 128));
   background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37));
   z-index: 3000;
@@ -60,7 +64,10 @@ header {
 
 header > span {
   color: var(--readthedocs-flyout-current-version-color, #27ae60);
-  font-size: var(--readthedocs-flyout-header-font-size, 0.9rem);
+  font-size: var(
+    --readthedocs-flyout-header-font-size,
+    calc(var(--readthedocs-flyout-font-size) * 1.125)
+  );
 }
 
 header > img.logo {
@@ -85,14 +92,20 @@ dl {
 }
 
 dl > dt {
-  font-size: var(--readthedocs-flyout-dt-font-size, 0.9rem);
+  font-size: var(
+    --readthedocs-flyout-dt-font-size,
+    calc(var(--readthedocs-flyout-font-size) * 1.125)
+  );
   color: var(--readthedocs-flyout-section-heading-color, rgb(128, 128, 128));
 }
 
 dl > dd {
   display: inline-block;
   margin: 0;
-  font-size: var(--readthedocs-flyout-dd-font-size, 0.9rem);
+  font-size: var(
+    --readthedocs-flyout-dd-font-size,
+    calc(var(--readthedocs-flyout-font-size) * 1.125)
+  );
 }
 
 dd a {