show mask background for transparent svg files

wxiaoguang · wxiaoguang · commit 05e57bb1b475 · 2025-12-12T10:35:12.000+08:00
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -39,6 +39,8 @@
 
   --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
   --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
+
+  --background-view-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC) right bottom var(--color-primary-light-7);
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {
diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css
@@ -13,7 +13,7 @@
 
 .image-diff-container img {
   border: 1px solid var(--color-primary-light-7);
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
+  background: var(--background-view-image);
 }
 
 .image-diff-container .before-container {
diff --git a/web_src/css/repo/file-view.css b/web_src/css/repo/file-view.css
@@ -81,6 +81,7 @@
 .view-raw img[src$=".svg" i] {
   max-height: 600px !important;
   max-width: 600px !important;
+  background: var(--background-view-image);
 }
 
 .file-view-render-container {

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,8 @@`
`39`	`39`
`40`	`40`	`--gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */`
`41`	`41`	`--gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */`
	`42`	`+`
	`43`	`+ --background-view-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC) right bottom var(--color-primary-light-7);`
`42`	`44`	`}`
`43`	`45`
`44`	`46`	`@media (min-width: 768px) and (max-width: 1200px) {`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`
`14`	`14`	`.image-diff-container img {`
`15`	`15`	`border: 1px solid var(--color-primary-light-7);`
`16`		`- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);`
	`16`	`+ background: var(--background-view-image);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.image-diff-container .before-container {`
Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,7 @@`
`81`	`81`	`.view-raw img[src$=".svg" i] {`
`82`	`82`	`max-height: 600px !important;`
`83`	`83`	`max-width: 600px !important;`
	`84`	`+ background: var(--background-view-image);`
`84`	`85`	`}`
`85`	`86`
`86`	`87`	`.file-view-render-container {`