From c541bc0705877fe00a6681afee1652dc90b690eb Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 9 Mar 2020 17:33:39 +0000 Subject: [PATCH] Fix mark as read button for dark theme This changes the mark as read button to a mask image so that it can be themed like other images. Fixes https://github.com/vector-im/riot-web/issues/12640 --- .../views/rooms/_TopUnreadMessagesBar.scss | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index 5f6f869877..28eddf1fa2 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -51,7 +51,7 @@ limitations under the License. position: absolute; width: 38px; height: 38px; - mask: url('$(res)/img/icon-jump-to-first-unread.svg'); + mask-image: url('$(res)/img/icon-jump-to-first-unread.svg'); mask-repeat: no-repeat; mask-position: 9px 13px; background: $roomtile-name-color; @@ -61,12 +61,20 @@ limitations under the License. display: block; width: 18px; height: 18px; - background-image: url('$(res)/img/cancel.svg'); - background-position: center; - background-size: 10px; - background-repeat: no-repeat; - background-color: $primary-bg-color; + background: $primary-bg-color; border: 1.3px solid $roomtile-name-color; - border-radius: 99px; + border-radius: 10px; margin: 5px auto; } + +.mx_TopUnreadMessagesBar_markAsRead::before { + content: ""; + position: absolute; + width: 18px; + height: 18px; + mask-image: url('$(res)/img/cancel.svg'); + mask-repeat: no-repeat; + mask-size: 10px; + mask-position: 4px 4px; + background: $roomtile-name-color; +}