Visual diff: use default CSS variables for Material for MkDocs (#610)

humitos · web-flow · commit 117b7a3d5b7f · 2025-07-01T10:38:03.000+02:00
![Screenshot_2025-06-30_13-51-21](https://github.com/user-attachments/assets/b756fb30-29d1-44b0-9fb0-fdfdd1f13432) Closes #505
diff --git a/src/defaults.css b/src/defaults.css
@@ -7,6 +7,7 @@
 
   :root[data-readthedocs-tool="mkdocs-material"] {
     --readthedocs-font-size: 1.455em;
+    --readthedocs-filetreediff-icon-width: 0.6rem;
   }
 
   :root[data-readthedocs-tool="antora"] {
diff --git a/src/filetreediff.css b/src/filetreediff.css
@@ -10,6 +10,7 @@
     --readthedocs-filetreediff-border-color: #ddd;
     --readthedocs-filetreediff-label-color: #333;
     --readthedocs-filetreediff-chunks-color: #27ae60;
+    --readthedocs-filetreediff-icon-width: 0.8rem;
   }
 }
 
@@ -41,7 +42,6 @@
   background-color: var(--readthedocs-filetreediff-background-color);
   border-radius: 0.25em;
   appearance: revert;
-  font-size: var(--readthedocs-filetreediff-font-size);
 }
 
 :host > div > div > label {
@@ -70,8 +70,8 @@
 }
 
 :host > div > div > a {
-  width: 0.8rem;
-  color: var(--addons-filetreediff-color);
+  width: var(--readthedocs-filetreediff-icon-width);
+  color: var(--readthedocs-filetreediff-color);
 }
 
 :host > div > div > a.version {

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`
`8`	`8`	`:root[data-readthedocs-tool="mkdocs-material"] {`
`9`	`9`	`--readthedocs-font-size: 1.455em;`
	`10`	`+ --readthedocs-filetreediff-icon-width: 0.6rem;`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`:root[data-readthedocs-tool="antora"] {`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@`
`10`	`10`	`--readthedocs-filetreediff-border-color: #ddd;`
`11`	`11`	`--readthedocs-filetreediff-label-color: #333;`
`12`	`12`	`--readthedocs-filetreediff-chunks-color: #27ae60;`
	`13`	`+ --readthedocs-filetreediff-icon-width: 0.8rem;`
`13`	`14`	`}`
`14`	`15`	`}`
`15`	`16`
`@@ -41,7 +42,6 @@`
`41`	`42`	`background-color: var(--readthedocs-filetreediff-background-color);`
`42`	`43`	`border-radius: 0.25em;`
`43`	`44`	`appearance: revert;`
`44`		`- font-size: var(--readthedocs-filetreediff-font-size);`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`:host > div > div > label {`
`@@ -70,8 +70,8 @@`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`:host > div > div > a {`
`73`		`- width: 0.8rem;`
`74`		`- color: var(--addons-filetreediff-color);`
	`73`	`+ width: var(--readthedocs-filetreediff-icon-width);`
	`74`	`+ color: var(--readthedocs-filetreediff-color);`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`:host > div > div > a.version {`