From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 16 May 2023 11:30:41 +0000 (+0200)
Subject: Improve the CSS for the editor history and add dark mode support
X-Git-Tag: 6.0.0_Alpha_1~94
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c1ea900be134b5edfff8c12fd37297f0fac0be00;p=GitHub%2FWoltLab%2FWCF.git

Improve the CSS for the editor history and add dark mode support

See #5362
---

diff --git a/wcfsetup/install/files/style/ui/messageEditHistory.scss b/wcfsetup/install/files/style/ui/messageEditHistory.scss
index 4948725aa5..28d0e357c7 100644
--- a/wcfsetup/install/files/style/ui/messageEditHistory.scss
+++ b/wcfsetup/install/files/style/ui/messageEditHistory.scss
@@ -1,10 +1,15 @@
 /* edit history */
 .editHistoryDiff {
+	--diffAdded-background: #dff0d8;
+	--diffAdded-color: #3c763d;
+	--diffRemoved-background: #f2dede;
+	--diffRemoved-color: #a94442;
+
 	@include screen-md-down {
 		overflow: auto;
 	}
 
-	> .table {
+	.table {
 		@include screen-lg {
 			table-layout: fixed;
 		}
@@ -33,13 +38,13 @@
 			}
 
 			&.diffAdded {
-				background-color: rgb(223, 240, 216);
-				color: rgb(60, 118, 61);
+				background-color: var(--diffAdded-background);
+				color: var(--diffAdded-color);
 			}
 
 			&.diffRemoved {
-				background-color: rgb(242, 222, 222);
-				color: rgb(169, 68, 66);
+				background-color: var(--diffRemoved-background);
+				color: var(--diffRemoved-color);
 			}
 
 			&.diffSection {
@@ -52,38 +57,36 @@
 
 				@include wcfFontHeadline;
 			}
-		}
 
-		tr:not(:first-child) > .diffSection {
-			border-top: 20px solid transparent;
-		}
+			tr:not(:first-child) .diffSection {
+				border-top: 20px solid transparent;
+			}
 
-		& + form {
-			/* Out of the way, Lydia! */
-			margin-top: 40px;
+			& + form {
+				/* Out of the way, Lydia! */
+				margin-top: 40px;
+			}
 		}
 	}
 
-	> .sideBySide:first-child {
+	.sideBySide:first-child {
 		margin-bottom: 20px;
 		text-align: center;
 	}
 
 	.sideBySide {
-		display: flex;
-
-		> div {
-			flex: 0 0 50%;
-			max-width: 50%;
-
-			&:first-child {
-				padding-right: 10px;
-			}
+		column-gap: 20px;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
+}
 
-			&:last-child {
-				padding-left: 10px;
-			}
-		}
+html[data-color-scheme="dark"] {
+	.editHistoryDiff {
+		--diffAdded-background: #172810;
+		--diffAdded-color: #4f9c51;
+		--diffRemoved-background: #281010;
+		--diffRemoved-color: #d95654;
 	}
 }