X-Git-Url: https://git.stricted.de/?a=blobdiff_plain;f=wcfsetup%2Finstall%2Ffiles%2Fstyle%2Fui%2Facl.scss;h=2f0a87e7ac8887411678f3e80348d327651c6ad6;hb=cda436396a16409db10df82d2f4fb0e9997ac661;hp=9d01577ac54c63189c5c4d00d78e3adc5e7331c7;hpb=1eb32afbc3738dddbf56db06940191112013431a;p=GitHub%2FWoltLab%2FWCF.git

diff --git a/wcfsetup/install/files/style/ui/acl.scss b/wcfsetup/install/files/style/ui/acl.scss
index 9d01577ac5..2f0a87e7ac 100644
--- a/wcfsetup/install/files/style/ui/acl.scss
+++ b/wcfsetup/install/files/style/ui/acl.scss
@@ -41,7 +41,7 @@
 	}
 
 	/* search input */
-	& + .dropdown {
+	& + .dropdown, & + input[type="text"] {
 		display: block;
 		margin-top: 20px;
 	}
@@ -51,29 +51,32 @@
 .aclPermissionList {
 	margin-top: 40px;
 	position: relative;
+	display: grid;
+	column-gap: 1px;
+	grid-template-columns: 10px auto repeat(3, 60px);
+	grid-template-rows: auto;
 
-	&::after,
-	&::before {
-		min-width: 60px;
-		position: absolute;
-		text-align: center;
-		top: -5px;
-		transform: translateY(-100%);
+	> div {
+		grid-column: 1 / span 5;
+		transition: background-color 0.2s;
 
-		@include wcfFontSmall;
-	}
+		&:not(:last-child):not(:first-child) {
+			border-bottom: 1px solid var(--wcfContentBorderInner);
+		}
 
-	&::after {
-		content: attr(data-deny);
-		right: 0;
-	}
+		&:nth-child(2) {
+			border-top: 1px solid var(--wcfContentBorder);
+		}
+
+		&:last-child {
+			border-bottom: 1px solid var(--wcfContentBorder);
+		}
+
+		&:hover {
+			background-color: var(--wcfTabularBoxBackgroundActive);
+		}
 
-	&::before {
-		content: attr(data-grant);
-		right: 80px;
-	}
 
-	> li {
 		&.aclCategory {
 			padding: 20px 10px 10px 0;
 
@@ -85,22 +88,48 @@
 		}
 
 		&:not(.aclCategory) {
-			display: flex;
 			padding: 10px 0;
+			display: grid;
+			grid-template-columns: subgrid;
+			grid-template-rows: subgrid;
 		}
 
-		> span {
-			flex: 1 1 auto;
-			padding-left: 10px;
+		&.aclHeader {
+			display: grid;
+			grid-template-columns: subgrid;
+			grid-template-rows: subgrid;
+
+			> span {
+				text-align: center;
+				@include wcfFontSmall;
+
+				&.inherited {
+					grid-column-start: 3;
+				}
+
+				&.grant {
+					grid-column-start: 4;
+				}
+
+				&.deny {
+					grid-column-start: 5;
+				}
+			}
+
+			&:hover {
+				background-color: transparent;
+			}
 		}
 
-		> label {
-			cursor: pointer;
-			flex: 0 0 auto;
-			padding: 0 20px;
+		&:not(.aclHeader) {
+			> span {
+				grid-column: span 2;
+				grid-column-start: 2;
+			}
 
-			& + label {
-				margin-left: 20px;
+			> label {
+				text-align: center;
+				cursor: pointer;
 			}
 		}
 	}