Make the EntityTile chevron a masked SVG for theming

Fixes element-hq/element-web#7320
matrix-org · Mar 14, 2019 · e4181c4 · e4181c4
1 parent 5409db4
commit e4181c4
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss
@@ -22,10 +22,20 @@ limitations under the License.
 }
 
 .mx_EntityTile:hover {
-    background-image: url('$(res)/img/member_chevron.png');
-    background-position: center right 10px;
-    background-repeat: no-repeat;
     padding-right: 30px;
+    position: relative; // to keep the chevron aligned
+}
+
+.mx_EntityTile:hover::before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 8px); // center
+    right: 10px;
+    mask: url('$(res)/img/member_chevron.png');
+    mask-repeat: no-repeat;
+    width: 16px;
+    height: 16px;
+    background-color: $rightpanel-button-color;
 }
 
 .mx_EntityTile .mx_PresenceLabel {