Issue 2195 - Added notification opt-out (Platform)

skin/popup.css

 body
 {
   min-width: 250px;
   margin: 0px;
   font-family: Segoe UI, Arial, sans-serif;
   font-size: 13px;
   color: #545454;
   background-color: #f8f6f2;
   background-image: url(background.png);
 }
@@ skipping 45 matching lines @@
   padding: 0px 20px;
 }
 
 #notification, #menu
 {
   margin-bottom: 10px;
 }
 
 #notification
 {
-  display: none;
   position: relative;
   margin-top: -70px;
   min-height: 50px;
   padding: 10px;
   color: #fff;
   border: 3px solid black;
   background-color: #555;
 }
 
 #notification.critical
@@ skipping 12 matching lines @@
 {
   margin: 0px 15px 5px 0px;
   font-size: 15px;
 }
 
 #notification a
 {
   color: #fff;
 }
 
-#close-notification
+#notification-close
 {
   cursor: pointer;
   display: inline-block;
   position: absolute;
   top: 10px;
   right: 10px;
   width: 8px;
   height: 8px;
   background-image: url(popup.png);
   background-position: -34px -89px;
 }
 
+#notification.closing
+{
+  border-color: #000;
+  background-color: #020D14;
+}
+
+#notification.closing #notification-content,
+#notification:not(.closing) #notification-close-content

[Sebastian Noack, 2015/06/25 13:55:04]

Isn't the |:not(.closing)| redundant here?

[Thomas Greiner, 2015/06/25 16:48:45]

No, because if #notification has the class "closing" then
#notification-close-content should not be hidden.

Basically, this selector acts like a toggle to show either #notification-content
if "closing" is set or #notification-close-content if it isn't. Here's an
alternative way of writing it:

#notification.closing #notification-content,
#notification #notification-close-content
{
  display: none;
}

#notification.closing #notification-close-content
{
  display: inherit;
}

+{
+  display: none;
+}
+
+#notification-close-content li
+{
+  padding: 7px 7px 7px 17px;
+  color: #FFF;
+  text-decoration: underline;
+  white-space: inherit;
+  border: none;
+}
+
+#notification-close-content li::before
+{
+  content: "\0203A";
+  display: inline-block; /* prevent pseudo element from being underlined */
+  width: 10px;
+  margin-left: -10px;
+}
+
+#notification-close-content li:hover
+{
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 footer
 {
   cursor: pointer;
   padding: 10px 35px;
   border-top: 1px solid #e1ddd8;
   background-image: url(background-main.png);
 }
 
 footer:hover
 {
@@ skipping 213 matching lines @@
 
 .checkbox[aria-checked="false"]:hover
 {
   background-position: -34px -49px;
 }
 
 label
 {
   vertical-align: middle;
 }