Center cropper-canvas.

Cyperghost · Cyperghost · commit 243135e0ce4a · 2024-12-09T12:47:42.000+01:00
Fix, if the image on a side has a large dimension that a white area is displayed at the top and/or bottom
diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
@@ -465,3 +465,13 @@ html[data-color-scheme="dark"] .dialog::backdrop {
 		min-width: 0;
 	}
 }
+
+.dialog cropper-canvas {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* If the height of the image is many times greater than the width, a white area would be displayed at the bottom and/or top. */
+.dialog cropper-shade {
+	outline-width: max(100vh, 100vw) !important;
+}

Original file line number	Diff line number	Diff line change
`@@ -465,3 +465,13 @@ html[data-color-scheme="dark"] .dialog::backdrop {`
`465`	`465`	`min-width: 0;`
`466`	`466`	`}`
`467`	`467`	`}`
	`468`	`+`
	`469`	`+.dialog cropper-canvas {`
	`470`	`+ margin-left: auto;`
	`471`	`+ margin-right: auto;`
	`472`	`+}`
	`473`	`+`
	`474`	`+/* If the height of the image is many times greater than the width, a white area would be displayed at the bottom and/or top. */`
	`475`	`+.dialog cropper-shade {`
	`476`	`+ outline-width: max(100vh, 100vw) !important;`
	`477`	`+}`