Issue 5540 - implement notification

skin/new-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 1060 matching lines @@
 body:not([data-dialog="language-change"]) #dialog-title-language-change,
 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add,
 body:not([data-dialog="language-add"]) #dialog-body button.add,
 body:not([data-dialog="language-change"]) #dialog-body button.change,
 body:not([data-dialog="predefined"]) #dialog-title-predefined,
 body:not([data-dialog="predefined"]) #dialog-content-predefined,
 body:not([data-dialog]) #dialog
 {
   display: none;
 }
+
+/*
+  Notification
+*/
+
+#notification
+{
+  position: fixed;
+  top: 0rem;
+  left: 0rem;
+  display: flex;
+  padding: 1rem 1.9rem;
+  width: 100%;
+  box-sizing: border-box;
+  opacity: 0.8;
+  font-size: 1rem;
+  color: #099CD0;
+  background-color: #E1F2FA;
+}
+
+#notification strong
+{
+  flex: 1;
+  text-align: center;
+}
+
+#hide-notification
+{
+  border: 0rem;
+  padding: 0rem;
+  margin: 0rem 1rem;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+#hide-notification::after
+{
+  content: "";
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  border: 0rem;
+  background-color: #099DD1;
+  -webkit-mask: url(delete.svg);
+  mask: url(delete.svg);
+}
+
+#hide-notification:hover::after
+{
+  background-color: #5CBCE1;
+}