modernize css for acl list

diff --git a/ts/WoltLabSuite/Core/Ui/Acl/List.ts b/ts/WoltLabSuite/Core/Ui/Acl/List.ts
index ee9db9ab0f2e23111a1ce49934bbd74d9039f9d5..0da1397dc8d833b9528fba93890488bd555b8cd9 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Acl/List.ts
+++ b/ts/WoltLabSuite/Core/Ui/Acl/List.ts
@@ -92,6 +92,7 @@ export = class AclList {
     elementContainer.appendChild(this.#aclList);
 
     this.#searchInput = document.createElement("input");
+    this.#searchInput.classList.add("aclSearchInput");
     this.#searchInput.type = "text";
     this.#searchInput.classList.add("long");
     this.#searchInput.placeholder = getPhrase("wcf.acl.search." + (!includeUserGroups ? "user." : "") + "description");
@@ -207,9 +208,10 @@ export = class AclList {
     const html = `<fa-icon size="16" name="${type === "group" ? "users" : "user"}" solid></fa-icon>
         <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
         <button type="button" class="aclItemDeleteButton jsTooltip" title="${getPhrase("wcf.global.button.delete")}">
-          <fa-icon size="16" name="xmark" solid></fa-icon>
+          <fa-icon size="16" class="aclListItemIcon" name="xmark" solid></fa-icon>
         </button>`;
     const listItem = document.createElement("li");
+    listItem.classList.add("aclListItem");
     listItem.innerHTML = html;
     listItem.dataset.objectId = objectID;
     listItem.dataset.type = type;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
index 194dfe6f90aaa594a515049c9f3de753ffb76312..e391bcdda5ca992736488e6722716c954266a027 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/List.js
@@ -40,6 +40,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/User/Search/Input",
             this.#aclList.classList.add("aclList");
             elementContainer.appendChild(this.#aclList);
             this.#searchInput = document.createElement("input");
+            this.#searchInput.classList.add("aclSearchInput");
             this.#searchInput.type = "text";
             this.#searchInput.classList.add("long");
             this.#searchInput.placeholder = (0, Language_1.getPhrase)("wcf.acl.search." + (!includeUserGroups ? "user." : "") + "description");
@@ -134,9 +135,10 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Ui/User/Search/Input",
             const html = `<fa-icon size="16" name="${type === "group" ? "users" : "user"}" solid></fa-icon>
         <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
         <button type="button" class="aclItemDeleteButton jsTooltip" title="${(0, Language_1.getPhrase)("wcf.global.button.delete")}">
-          <fa-icon size="16" name="xmark" solid></fa-icon>
+          <fa-icon size="16" class="aclListItemIcon" name="xmark" solid></fa-icon>
         </button>`;
             const listItem = document.createElement("li");
+            listItem.classList.add("aclListItem");
             listItem.innerHTML = html;
             listItem.dataset.objectId = objectID;
             listItem.dataset.type = type;

diff --git a/wcfsetup/install/files/style/ui/acl.scss b/wcfsetup/install/files/style/ui/acl.scss
index dc04c2479c4ad49107eaa4ff29ed65f791feb38c..8b51e365714db706203957f5fa46b87868079bc5 100644 (file)
--- a/wcfsetup/install/files/style/ui/acl.scss
+++ b/wcfsetup/install/files/style/ui/acl.scss
@@ -2,49 +2,48 @@
 .aclList {
        max-height: 400px;
        overflow: auto;
+}
+
+.aclList:not(:empty) {
+       border-bottom: 1px solid var(--wcfContentBorder);
+       border-top: 1px solid var(--wcfContentBorder);
+}
+
+.aclListItem {
+       align-items: center;
+       display: flex;
+       padding: 10px 0;
+}
+
+.aclListItem:not(.active) {
+       cursor: pointer;
+}
+
+.aclListItem.active {
+       background-color: var(--wcfTabularBoxBackgroundActive);
+}
+
+.aclListItemIcon {
+       flex: 0 0 36px;
+       padding: 0 5px;
+}
+
+.aclLabel {
+       flex: 1 1 auto;
+       margin: 0 5px;
+}
+
+.aclListItem:first-child {
+       border-top: none;
+}
+
+.aclListItem:last-child {
+       border-bottom: none;
+}
 
-       &:not(:empty) {
-               border-bottom: 1px solid var(--wcfContentBorder);
-               border-top: 1px solid var(--wcfContentBorder);
-       }
-
-       > li {
-               align-items: center;
-               display: flex;
-               padding: 10px 0;
-
-               &:not(.active) {
-                       cursor: pointer;
-               }
-
-               &.active {
-                       background-color: var(--wcfTabularBoxBackgroundActive);
-               }
-
-               > .icon {
-                       flex: 0 0 36px;
-                       padding: 0 5px;
-               }
-
-               > .aclLabel {
-                       flex: 1 1 auto;
-                       margin: 0 5px;
-               }
-
-               &:first-child {
-                       border-top: none;
-               }
-
-               &:last-child {
-                       border-bottom: none;
-               }
-       }
-
-       /* search input */
-       & + .dropdown, & + input[type="text"] {
-               display: block;
-               margin-top: 20px;
-       }
+/* search input */
+.aclSearchInput {
+       margin-top: 20px !important;
 }
 
 /* permissions per object */