From 32f233acfd3a48db1b8afeba9695cd6a93883e94 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Wed, 30 Dec 2020 23:00:52 -0500
Subject: Fix display notification close button style (#1185)

---
 ext/mixed/css/display.css        | 20 +++++++-------------
 ext/mixed/css/material.css       |  1 +
 ext/mixed/display-templates.html |  2 +-
 3 files changed, 9 insertions(+), 14 deletions(-)

(limited to 'ext/mixed')

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 4c06e492..b4de7134 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -1447,7 +1447,10 @@ button.action-button[data-icon=source-term]::before {
     flex: 1 1 auto;
     padding-right: 0.5em;
 }
-.footer-notification-close-button {
+button.footer-notification-close-button,
+button.footer-notification-close-button:focus,
+button.footer-notification-close-button:hover,
+button.footer-notification-close-button:active {
     flex: 0 0 auto;
     background-color: transparent;
     margin: -0.25em;
@@ -1456,21 +1459,12 @@ button.action-button[data-icon=source-term]::before {
     outline: none;
     cursor: pointer;
     font-size: inherit;
+    box-shadow: none;
 }
 .footer-notification-close-button-icon {
     display: block;
-    width: calc(12em / var(--font-size-no-units));
-    height: calc(12em / var(--font-size-no-units));
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-mode: alpha;
-    mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
-    mask-image: url(/mixed/img/cross.svg);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center center;
-    -webkit-mask-mode: alpha;
-    -webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
-    -webkit-mask-image: url(/mixed/img/cross.svg);
+    width: calc(16em / var(--font-size-no-units));
+    height: calc(16em / var(--font-size-no-units));
     background-color: var(--notification-text-color);
 }
 
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index cb6997ad..3adf4803 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -181,6 +181,7 @@
 .icon[data-icon=collapse]                { --icon-image: url(/mixed/img/collapse.svg); }
 .icon[data-icon=expand]                  { --icon-image: url(/mixed/img/expand.svg); }
 .icon[data-icon=window]                  { --icon-image: url(/mixed/img/window.svg); }
+.icon[data-icon=cross]                   { --icon-image: url(/mixed/img/cross.svg); }
 
 
 /* Checkbox */
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index b24ab09f..4c202448 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -127,7 +127,7 @@
 <!-- Extra -->
 <template id="footer-notification-template"><div class="footer-notification">
     <div class="footer-notification-body"></div>
-    <button class="footer-notification-close-button"><span class="footer-notification-close-button-icon"></span></button>
+    <button class="footer-notification-close-button"><span class="footer-notification-close-button-icon icon" data-icon="cross"></span></button>
 </div></template>
 <template id="profile-list-item-template"><label class="profile-list-item">
     <div class="profile-list-item-selection"><label class="radio"><input type="radio" class="profile-entry-is-default-radio" name="profile-entry-default-radio"><span class="radio-body"><span class="radio-border"></span><span class="radio-dot"></span></span></label></div>
-- 
cgit v1.2.3