Issue 2195 - Added notification opt-out (Platform)

skin/popup.css

Index: skin/popup.css
===================================================================
--- a/skin/popup.css
+++ b/skin/popup.css
@@ -63,7 +63,6 @@
 
 #notification
 {
-  display: none;
   position: relative;
   margin-top: -70px;
   min-height: 50px;
@@ -96,7 +95,7 @@
   color: #fff;
 }
 
-#close-notification
+#notification-close
 {
   cursor: pointer;
   display: inline-block;
@@ -109,6 +108,40 @@
   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;