Change close notification button for all screen sizes

This commit is contained in:
Zola Gonano 2021-12-20 13:55:32 +00:00
parent 066c3c3c1c
commit f28d458b60

View file

@ -56,7 +56,7 @@ a { color: black }
text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white; text-align: center; background-color: #e74c3c; line-height: 45px; vertical-align: bottom; font-size: 40px; color: white;
} }
.notification .body { .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; background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
} }
.notification .message-outer { display: table-row } .notification .message-outer { display: table-row }
@ -66,9 +66,12 @@ a { color: black }
.notification.visible { max-width: 350px } .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 { opacity: 0.8 }
.notification .close:hover { color: black } .notification .close {
.notification .close:active, .notification .close:focus { color: #AF3BFF } 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 small { color: #AAA }
.notification .multiline { white-space: normal; word-break: break-word; max-width: 300px; } .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) } .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 .message { white-space: normal; }
.notification .buttons { padding-right: 22px; padding-right: 40px; } .notification .buttons { padding-right: 22px; padding-right: 40px; }
.notification .button { white-space: nowrap; } .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; } .notification { margin: 0px; }
.notifications { right: 0px; max-width: 80%; } .notifications { right: 0px; max-width: 80%; }
} }