Further fix icons not displaying properly. (#8688)

Leilei332 · web-flow · commit a42a7972cb9b · 2024-10-19T13:41:30.000+01:00
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
@@ -720,8 +720,8 @@ html body.tc-body .tc-btn-rounded:hover svg {
 }
 
 button svg.tc-image-button, button .tc-image-button img {
-	height: auto;
-	width: 1em;
+	max-height: 1em;
+	max-width: 1em;
 }
 
 .tc-unfold-banner {
@@ -2623,6 +2623,9 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	flex-grow: 0;
 	flex-shrink: 0;
 	line-height: 1;
+	height: 2em;
+	width: 2em;
+	display: grid;
 }
 
 .tc-plugin-info-chunk.tc-plugin-info-description {
@@ -2689,8 +2692,9 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 }
 
 .tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg {
-	width: 2em;
-	height: auto;
+	max-width: 2em;
+	max-height: 2em;
+	margin: auto;
 }
 
 .tc-plugin-info-dropdown {
@@ -2857,12 +2861,13 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 
 .tc-chooser-item svg,
 .tc-chooser-item img{
-	width: 1em;
-	height: 1em;
+	max-width: 1em;
+	max-height: 1em;
 	vertical-align: middle;
 }
 
 .tc-language-chooser .tc-image-button img {
+	max-width: 2em;
 	width: auto;
 	vertical-align: -0.15em;
 }

Original file line number	Diff line number	Diff line change
`@@ -720,8 +720,8 @@ html body.tc-body .tc-btn-rounded:hover svg {`
`720`	`720`	`}`
`721`	`721`
`722`	`722`	`button svg.tc-image-button, button .tc-image-button img {`
`723`		`- height: auto;`
`724`		`- width: 1em;`
	`723`	`+ max-height: 1em;`
	`724`	`+ max-width: 1em;`
`725`	`725`	`}`
`726`	`726`
`727`	`727`	`.tc-unfold-banner {`
`@@ -2623,6 +2623,9 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta`
`2623`	`2623`	`flex-grow: 0;`
`2624`	`2624`	`flex-shrink: 0;`
`2625`	`2625`	`line-height: 1;`
	`2626`	`+ height: 2em;`
	`2627`	`+ width: 2em;`
	`2628`	`+ display: grid;`
`2626`	`2629`	`}`
`2627`	`2630`
`2628`	`2631`	`.tc-plugin-info-chunk.tc-plugin-info-description {`
`@@ -2689,8 +2692,9 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta`
`2689`	`2692`	`}`
`2690`	`2693`
`2691`	`2694`	`.tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg {`
`2692`		`- width: 2em;`
`2693`		`- height: auto;`
	`2695`	`+ max-width: 2em;`
	`2696`	`+ max-height: 2em;`
	`2697`	`+ margin: auto;`
`2694`	`2698`	`}`
`2695`	`2699`
`2696`	`2700`	`.tc-plugin-info-dropdown {`
`@@ -2857,12 +2861,13 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta`
`2857`	`2861`
`2858`	`2862`	`.tc-chooser-item svg,`
`2859`	`2863`	`.tc-chooser-item img{`
`2860`		`- width: 1em;`
`2861`		`- height: 1em;`
	`2864`	`+ max-width: 1em;`
	`2865`	`+ max-height: 1em;`
`2862`	`2866`	`vertical-align: middle;`
`2863`	`2867`	`}`
`2864`	`2868`
`2865`	`2869`	`.tc-language-chooser .tc-image-button img {`
	`2870`	`+ max-width: 2em;`
`2866`	`2871`	`width: auto;`
`2867`	`2872`	`vertical-align: -0.15em;`
`2868`	`2873`	`}`