feat: add span rules to avoid user overriden by simply span selector. (#575)

Myriad-Dreamin · web-flow · commit 5cc1c4238dbd · 2024-08-10T12:36:00.000+08:00
diff --git a/github-pages/assets/style.css b/github-pages/assets/style.css
@@ -17,6 +17,8 @@ body {
 }
 
 .typst-html-semantics span {
+  color: transparent;
+  font-family: monospace;
   transform-origin: left top;
   position: absolute;
   display: inline-block;
diff --git a/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.css b/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.css
@@ -7,6 +7,8 @@
 }
 
 :host ::ng-deep .typst-html-semantics span {
+  color: transparent;
+  font-family: monospace;
   transform-origin: left top;
   position: absolute;
   display: inline-block;
diff --git a/packages/typst.react/src/lib/TypstDocument.tsx b/packages/typst.react/src/lib/TypstDocument.tsx
@@ -17,6 +17,8 @@ const htmlLayerCss = `
 }
 
 .typst-html-semantics span {
+  color: transparent;
+  font-family: monospace;
   transform-origin: left top;
   position: absolute;
   display: inline-block;
diff --git a/packages/typst.ts/examples/typst.ts.css b/packages/typst.ts/examples/typst.ts.css
@@ -21,6 +21,8 @@ body {
 }
 
 .typst-html-semantics span {
+  color: transparent;
+  font-family: monospace;
   transform-origin: left top;
   position: absolute;
   display: inline-block;
diff --git a/packages/typst.ts/index.html b/packages/typst.ts/index.html
@@ -55,6 +55,8 @@
       }
 
       .typst-html-semantics span {
+        color: transparent;
+        font-family: monospace;
         transform-origin: left top;
         position: absolute;
         display: inline-block;
diff --git a/projects/hexo-renderer-typst/lib/typst.css b/projects/hexo-renderer-typst/lib/typst.css
@@ -39,6 +39,8 @@
 }
 
 .typst-html-semantics span {
+  color: transparent;
+  font-family: monospace;
   transform-origin: left top;
   position: absolute;
   display: inline-block;
@@ -66,7 +68,7 @@
 
 .typst-html-semantics span::-moz-selection {
   color: transparent;
-  background: #7db9dea0;
+  background: #7db9de;
 }
 
 .typst-html-semantics span::selection {

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,8 @@ body {`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.typst-html-semantics span {`
	`20`	`+ color: transparent;`
	`21`	`+ font-family: monospace;`
`20`	`22`	`transform-origin: left top;`
`21`	`23`	`position: absolute;`
`22`	`24`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,8 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`:host ::ng-deep .typst-html-semantics span {`
	`10`	`+ color: transparent;`
	`11`	`+ font-family: monospace;`
`10`	`12`	`transform-origin: left top;`
`11`	`13`	`position: absolute;`
`12`	`14`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
@@ -17,6 +17,8 @@ const htmlLayerCss = `
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.typst-html-semantics span {`
	`20`	`+ color: transparent;`
	`21`	`+ font-family: monospace;`
`20`	`22`	`transform-origin: left top;`
`21`	`23`	`position: absolute;`
`22`	`24`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,8 @@ body {`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.typst-html-semantics span {`
	`24`	`+ color: transparent;`
	`25`	`+ font-family: monospace;`
`24`	`26`	`transform-origin: left top;`
`25`	`27`	`position: absolute;`
`26`	`28`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,8 @@`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.typst-html-semantics span {`
	`58`	`+ color: transparent;`
	`59`	`+ font-family: monospace;`
`58`	`60`	`transform-origin: left top;`
`59`	`61`	`position: absolute;`
`60`	`62`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,8 @@`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`.typst-html-semantics span {`
	`42`	`+ color: transparent;`
	`43`	`+ font-family: monospace;`
`42`	`44`	`transform-origin: left top;`
`43`	`45`	`position: absolute;`
`44`	`46`	`display: inline-block;`
`@@ -66,7 +68,7 @@`
`66`	`68`
`67`	`69`	`.typst-html-semantics span::-moz-selection {`
`68`	`70`	`color: transparent;`
`69`		`- background: #7db9dea0;`
	`71`	`+ background: #7db9de;`
`70`	`72`	`}`
`71`	`73`
`72`	`74`	`.typst-html-semantics span::selection {`