Make cascading of mx_RoomHeader_closeButton easy to understand (#10756

) Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · May 5, 2023 · b724cb5 · b724cb5
1 parent 4bca514
commit b724cb5
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
@@ -179,7 +179,7 @@ limitations under the License.
         mask-size: contain;
     }
 
-    &:not(.mx_RoomHeader_closeButton):hover {
+    &:hover {
         background: rgba($accent, 0.1);
 
         &::before {
@@ -232,10 +232,20 @@ limitations under the License.
     mask-image: url("$(res)/img/element-icons/call/spotlight.svg");
 }
 
-.mx_RoomHeader_closeButton::before {
-    mask-image: url("$(res)/img/cancel.svg");
-    mask-size: 20px;
-    mask-position: center;
+.mx_RoomHeader_closeButton {
+    &::before {
+        mask-image: url("$(res)/img/cancel.svg");
+        mask-size: 20px;
+        mask-position: center;
+    }
+
+    &:hover {
+        background: unset; /* remove background color on hover */
+
+        &::before {
+            background-color: $icon-button-color; /* set the default background color */
+        }
+    }
 }
 
 .mx_RoomHeader_minimiseButton::before {