1 files changed, 206 insertions, 0 deletions
diff --git a/toolkit/themes/osx/global/notification.css b/toolkit/themes/osx/global/notification.css
new file mode 100644
index 0000000000..24b3d3920b
--- /dev/null
+++ b/toolkit/themes/osx/global/notification.css
@@ -0,0 +1,206 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include shared.inc
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+notification {
+  padding: 3px 3px 4px;
+  text-shadow: none;
+}
+
+notification[type="info"] {
+  color: rgba(255,255,255,0.95);
+  background: linear-gradient(#606060, #404040);
+  border-top: 1px solid #2a2a2a;
+  border-bottom: 1px solid #2a2a2a;
+}
+
+notification[type="warning"] {
+  color: rgba(0,0,0,0.95);
+  background: linear-gradient(#ffe13e, #ffc703);
+  border-top: 1px solid #bf8a01;
+  border-bottom: 1px solid #bf8a01;
+}
+
+notification[type="critical"] {
+  color: rgba(255,255,255,0.95);
+  background: linear-gradient(#d40000, #980000);
+  border-top: 1px solid #5d0000;
+  border-bottom: 1px solid #5d0000;
+}
+
+notificationbox[notificationside="top"] > notification {
+  border-top-style: none;
+}
+
+notificationbox[notificationside="bottom"] > notification {
+  border-bottom-style: none;
+}
+
+.messageText > .text-link {
+  color: inherit !important;
+  text-decoration: underline;
+}
+
+.messageImage {
+  width: 16px;
+  height: 16px;
+  margin: 0 4px;
+}
+
+/* Default icons for notifications */
+
+.messageImage[type="info"] {
+  list-style-image: url("chrome://global/skin/notification/info-icon.png");
+}
+
+.messageImage[type="warning"] {
+  list-style-image: url("chrome://global/skin/notification/warning-icon.png");
+}
+
+.messageImage[type="critical"] {
+  list-style-image: url("chrome://global/skin/notification/error-icon.png");
+}
+
+.messageText {
+  margin: 0 3px !important;
+  padding: 0;
+  font-weight: bold;
+}
+
+.messageCloseButton {
+  -moz-appearance: none;
+  padding: 0;
+  margin: 0 2px;
+  border: none;
+}
+
+/*
+ Invert the close icon for @type=info since both are normally dark. It's unclear
+ why !important is necessary here so remove it if it's no longer needed.
+*/
+notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
+  -moz-image-region: rect(0, 64px, 16px, 48px) !important;
+}
+
+@media (min-resolution: 2dppx) {
+  notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
+    -moz-image-region: rect(0, 128px, 32px, 96px) !important;
+  }
+}
+
+.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
+  border-radius: 10000px;
+  box-shadow: 0 0 2px 1px -moz-mac-focusring,
+              0 0 0 2px -moz-mac-focusring inset;
+}
+
+@media (min-resolution: 2dppx) {
+  .messageCloseButton > .toolbarbutton-icon {
+    width: 16px;
+  }
+}
+
+/* Popup notification */
+
+.popup-notification-body {
+  max-width: 25em;
+}
+
+.popup-notification-origin:not([value]),
+.popup-notification-learnmore-link:not([href]) {
+  display: none;
+}
+
+.popup-notification-origin {
+  margin-bottom: .3em !important;
+}
+
+.popup-notification-learnmore-link {
+  margin-top: .5em !important;
+}
+
+.popup-notification-button-container {
+  margin-top: 17px;
+}
+
+.popup-notification-menubutton {
+  -moz-appearance: none;
+}
+
+.popup-notification-menubutton:not([type="menu-button"]):-moz-focusring,
+.popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker,
+.popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
+  box-shadow: @focusRingShadow@;
+  position: relative;
+}
+
+.popup-notification-menubutton:not([type="menu-button"]),
+.popup-notification-menubutton > .button-menubutton-button,
+.popup-notification-menubutton > .button-menubutton-dropmarker {
+  -moz-appearance: none;
+  color: #434343;
+  border-radius: 4px;
+  border: 1px solid #b5b5b5;
+  background: linear-gradient(#fff, #f2f2f2);
+  box-shadow: inset 0 1px rgba(255,255,255,.8),
+              inset 0 0 1px rgba(255,255,255,.25),
+              0 1px rgba(255,255,255,.3);
+  background-clip: padding-box;
+  background-origin: padding-box;
+  padding: 2px 6px;
+}
+
+.popup-notification-menubutton > .button-menubutton-button {
+  -moz-appearance: none;
+  margin: 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-inline-start: 8px;
+  padding-inline-end: 5px;
+}
+
+.popup-notification-menubutton > .button-menubutton-dropmarker {
+  padding: 7px 8px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-inline-start: -1px;
+  list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
+}
+
+.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
+.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
+.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.popup-notification-menubutton:not([type="menu-button"]):hover:active,
+.popup-notification-menubutton > .button-menubutton-button:hover:active,
+.popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
+  box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
+}
+
+.popup-notification-closebutton {
+  margin-inline-end: -12px;
+  margin-top: -13px;
+}
+
+.popup-notification-closeitem > .menu-iconic-left {
+  display: none;
+}
+
+.popup-notification-menubutton > .button-menubutton-button[disabled] {
+  opacity: 0.5;
+}
+
+.popup-notification-warning {
+  color: #aa1b08;
+}