From f28d458b60ea0b2988fdb100e0cac99d6d6ee614 Mon Sep 17 00:00:00 2001
From: Zola Gonano <zolagonano@protonmail.com>
Date: Mon, 20 Dec 2021 13:55:32 +0000
Subject: [PATCH] Change close notification button for all screen sizes

---
 src/Ui/media/Wrapper.css | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/Ui/media/Wrapper.css b/src/Ui/media/Wrapper.css
index 3c531e29..e8a8ea5d 100644
--- a/src/Ui/media/Wrapper.css
+++ b/src/Ui/media/Wrapper.css
@@ -56,7 +56,7 @@ a { color: black }
 	text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
 }
 .notification .body {
-	padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; box-sizing: border-box;
+        border-right: 40px solid transparent; padding-left: 14px; padding-right: 60px; height: 50px; vertical-align: middle; display: table; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ;
 	background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
 }
 .notification .message-outer { display: table-row }
@@ -66,9 +66,12 @@ a { color: black }
 
 .notification.visible { max-width: 350px }
 
-.notification .close { position: absolute; top: 0; right: 0; font-size: 19px; line-height: 13px; color: #DDD; padding: 7px; text-decoration: none }
-.notification .close:hover { color: black }
-.notification .close:active, .notification .close:focus { color: #AF3BFF }
+.notification .close:hover { opacity: 0.8 }
+.notification .close {
+        position: absolute; top: 0; right: 0; text-decoration: none; margin: 10px; padding: 0px; display: block; width: 30px; height: 30px;
+        text-align: center; background-color: tomato; line-height: 30px; vertical-align: bottom; font-size: 30px; color: white;
+}
+
 .notification small { color: #AAA }
 .notification .multiline { white-space: normal; word-break: break-word; max-width: 300px; }
 .body-white .notification { box-shadow: 0 1px 9px rgba(0,0,0,0.1) }
@@ -225,12 +228,6 @@ a { color: black }
     .notification .message { white-space: normal; }
     .notification .buttons { padding-right: 22px; padding-right: 40px; }
     .notification .button { white-space: nowrap; }
-    .notification .close:hover { color: white }
-    .notification .close:active, .notification .close:focus { color: white }
-    .notification .close {
-	   padding: 0px; display: block; width: 50px; height: 50px;
-	   text-align: center; background-color: tomato; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
-    }
     .notification { margin: 0px; }
     .notifications { right: 0px; max-width: 80%; }
 }