Add hover and border

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / acl.scss

diff --git a/wcfsetup/install/files/style/ui/acl.scss b/wcfsetup/install/files/style/ui/acl.scss
index 9d01577ac54c63189c5c4d00d78e3adc5e7331c7..2f0a87e7ac8887411678f3e80348d327651c6ad6 100644 (file)
--- 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;
                        }
                }
        }