diff --git a/package-lock.json b/package-lock.json
index a3eb6244..70d200db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@readthedocs/addons",
- "version": "0.29.1",
+ "version": "0.30.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@readthedocs/addons",
- "version": "0.29.1",
+ "version": "0.30.0",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.6.13"
diff --git a/public/_/readthedocs-addons.json b/public/_/readthedocs-addons.json
index fbd2a057..f0733723 100644
--- a/public/_/readthedocs-addons.json
+++ b/public/_/readthedocs-addons.json
@@ -104,7 +104,7 @@
"load_when_embedded": false
},
"ethicalads": {
- "ad_free": false,
+ "ad_free": true,
"enabled": true,
"publisher": "readthedocs",
"campaign_types": ["community", "house", "paid"],
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 00000000..9ceeab91
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,5 @@
+/* Theme defaults? */
+:root {
+ --readthedocs-font-size: 10px;
+ --readthedocs-flyout-font-size: 30px;
+}
diff --git a/public/index.html b/public/index.html
index 06c81277..fae53a39 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
);
+
Documentation Addons
diff --git a/src/application.js b/src/application.js
index 55ed801b..00bf2d79 100644
--- a/src/application.js
+++ b/src/application.js
@@ -28,7 +28,7 @@ import * as customscript from "./customscript";
import * as application from "./application";
import { default as objectPath } from "object-path";
-import doctoolsStyleSheet from "./doctools.css";
+import { defaultStyleSheet } from "./defaults.js";
export class AddonsApplication {
constructor() {
@@ -125,11 +125,7 @@ export class AddonsApplication {
const elementHtml = document.querySelector("html");
if (elementHtml) {
// Inject styles at the parent DOM to set variables at :root
- let styleSheet = doctoolsStyleSheet;
- if (doctoolsStyleSheet instanceof CSSResult) {
- styleSheet = doctoolsStyleSheet.styleSheet;
- }
- document.adoptedStyleSheets = [styleSheet];
+ document.adoptedStyleSheets = [defaultStyleSheet];
// If we detect a documentation tool, set attributes on :root to allow
// for CSS selectors to utilize these values.
diff --git a/src/doctools.css b/src/defaults.js
similarity index 62%
rename from src/doctools.css
rename to src/defaults.js
index f4e11cd9..0c14f84c 100644
--- a/src/doctools.css
+++ b/src/defaults.js
@@ -1,3 +1,10 @@
+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
*
@@ -5,38 +12,44 @@
* precedence/priority. This allows a user `:root` rule to override these
* values.
**/
+defaultStyleSheet.replaceSync(`
@layer defaults {
- :root[data-readthedocs-tool="docusaurus"] {
- --readthedocs-flyout-header-font-size: 0.9rem;
- }
-
:root[data-readthedocs-tool="mkdocs-material"] {
--readthedocs-font-size: 0.58rem;
- --readthedocs-flyout-header-font-size: 0.7rem;
--readthedocs-flyout-font-size: 0.58rem;
}
:root[data-readthedocs-tool="antora"] {
--readthedocs-font-size: 0.7rem;
- --readthedocs-flyout-header-font-size: 0.8rem;
--readthedocs-flyout-font-size: 0.7rem;
}
:root[data-readthedocs-tool="mdbook"] {
--readthedocs-font-size: 1.3rem;
- --readthedocs-flyout-header-font-size: 1.5rem;
--readthedocs-flyout-font-size: 1.3rem;
}
:root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] {
--readthedocs-font-size: 0.725rem;
- --readthedocs-flyout-header-font-size: 0.845rem;
--readthedocs-flyout-font-size: 0.725rem;
}
:root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] {
--readthedocs-font-size: 0.58rem;
- --readthedocs-flyout-header-font-size: 0.7rem;
--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);
+ }
+ }
+}
diff --git a/src/flyout.css b/src/flyout.css
index df23523a..d4065788 100644
--- a/src/flyout.css
+++ b/src/flyout.css
@@ -1,23 +1,35 @@
/* Flyout styles */
-:host {
- /* These variables are used more than once, use a local variable so we can set
- * a default in this addon */
- --addons-flyout-font-size: var(
- --readthedocs-flyout-font-size,
- var(--readthedocs-font-size, 0.8rem)
- );
- --addons-flyout-line-height: var(--readthedocs-flyout-line-height, 1.25em);
+@layer defaults {
+ :root {
+ --readthedocs-flyout-max-width: 25em;
+
+ --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;
- max-width: var(--readthedocs-flyout-max-width, 25em);
+ max-width: var(--readthedocs-flyout-max-width);
width: auto;
height: auto;
max-height: calc(100% - 100px);
overflow-y: auto;
- line-height: var(--addons-flyout-line-height);
+ line-height: var(--readthedocs-flyout-line-height);
}
.container.bottom-right {
@@ -41,18 +53,11 @@
}
:host > div {
- font-family: var(
- --readthedocs-flyout-font-family,
- "Lato",
- "proxima-nova",
- "Helvetica Neue",
- "Arial",
- "sans-serif"
- );
- font-size: var(--addons-flyout-font-size);
- line-height: 1.2em;
- 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);
+ line-height: var(--readthedocs-flyout-line-height);
z-index: 3000;
padding: 0 10px;
overflow-y: auto;
@@ -64,10 +69,10 @@ header {
gap: 1em;
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: 0px;
- font-size: var(--readthedocs-flyout-header-font-size, 1.25em);
+ font-size: var(--readthedocs-flyout-header-font-size);
}
header > img.logo {
@@ -80,7 +85,9 @@ header > img.logo {
}
header > span {
- color: var(--readthedocs-flyout-current-version-color, #27ae60);
+ color: var(--readthedocs-flyout-current-version-color);
+ font-size: var(--readthedocs-flyout-header-font-size);
+ margin-left: 10px;
/* Total height of 1 + 0.75 + 0.75 = 2.5em */
padding: 0.75em 0em;
line-height: 1em;
@@ -105,7 +112,7 @@ header > span:first-of-type {
header > span svg.icon {
color: rgb(128, 128, 128);
- height: 1em;
+ height: var(--readthedocs-flyout-header-font-size);
padding-right: 0.25em;
vertical-align: middle;
}
@@ -126,25 +133,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;
}
@@ -167,10 +168,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);
}