Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 184 insertions, 0 deletions

diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css
new file mode 100644
index 0000000000..997d7f348e
--- /dev/null
+++ b/toolkit/themes/shared/notification.css
@@ -0,0 +1,184 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+.notificationbox-stack {
+  /* Prevent the animation from overlapping the navigation toolbar */
+  overflow: clip;
+}
+
+.notificationbox-stack[notificationside="top"] {
+  /* Create a stacking context for the box-shadow */
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 3px 10px -7px #000;
+}
+
+notification {
+  height: 56px;
+  padding-inline-start: 16px;
+  background: var(--notification-background);
+  color: var(--notification-text);
+  border-color: var(--notification-border);
+  border-style: solid;
+  border-width: 1px 0;
+  text-shadow: none;
+  font-size: 1.15em;
+
+  --notification-background: Window;
+  --notification-text: WindowText;
+  --notification-border: rgba(12, 12, 13, 0.2);
+  --notification-button-background: rgba(12,12,13,.1);
+  --notification-button-background-hover: rgba(12,12,13,0.2);
+  --notification-button-background-active: rgba(12,12,13,0.3);
+  --notification-button-text: inherit;
+  --notification-primary-button-background: #0060df;
+  --notification-primary-button-background-hover: #003eaa;
+  --notification-primary-button-background-active: #002275;
+  --notification-primary-button-text: rgb(249, 249, 250);
+}
+
+notification[type="info"]:-moz-lwtheme-brighttext {
+  --notification-background: #38383d;
+  --notification-text: rgb(249, 249, 250);
+  --notification-button-background: rgba(249,249,250,.1);
+  --notification-button-background-hover: rgba(249,249,250,.2);
+  --notification-button-background-active: rgba(249,249,250,.3);
+}
+
+notification.animated {
+  transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
+}
+
+.notificationbox-stack[notificationside="top"] > notification {
+  border-top-style: none;
+}
+
+.notificationbox-stack[notificationside="bottom"] > notification {
+  border-bottom-style: none;
+}
+
+notification[type="warning"] {
+  --notification-background: #ffe900;
+  --notification-text: #0c0c0d;
+}
+
+notification[type="critical"] {
+  --notification-background: #d70022;
+  --notification-text: #fff;
+}
+
+notification[type="critical"] > .close-icon:hover {
+  fill-opacity: .2;
+}
+
+notification[type="critical"] > .close-icon:hover:active {
+  fill-opacity: .3;
+}
+
+.messageText {
+  margin-inline-start: 12px !important;
+  margin-block: 12px;
+}
+
+.messageText > .text-link {
+  color: inherit !important;
+  text-decoration: underline;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.messageImage {
+  width: 32px;
+  height: 32px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+notification[type="info"] > hbox > .messageImage {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+notification[type="warning"] > hbox > .messageImage {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+notification[type="critical"] > hbox > .messageImage {
+  list-style-image: url("chrome://global/skin/icons/error.svg");
+}
+
+.messageCloseButton {
+  margin: 0;
+  padding: 0;
+}
+
+.messageCloseButton > .toolbarbutton-icon {
+  padding: 6px;
+  /* Override width and height from close-icon.css */
+  width: 32px !important;
+  height: 32px !important;
+  /* Close button needs to be clickable from the edge of the window */
+  margin-inline-end: 16px;
+}
+
+.messageCloseButton:-moz-focusring {
+  /* Override the dotted outline from button.css */
+  outline: none;
+}
+
+.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
+  outline: var(--toolbarbutton-focus-outline, 2px solid currentColor);
+  -moz-outline-radius: var(--toolbarbutton-border-radius, 4px);
+}
+
+.notification-button {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background-color: var(--notification-button-background);
+  /* Override button.css hover & active styles */
+  color: var(--notification-button-text) !important;
+  padding: 0 8px;
+  margin: 4px 8px;
+  height: 32px;
+}
+
+.notification-button[disabled] {
+  opacity: 0.5;
+}
+
+.notification-button:not([disabled]):hover {
+  background-color: var(--notification-button-background-hover);
+}
+
+.notification-button:not([disabled]):hover:active {
+  background-color: var(--notification-button-background-active);
+}
+
+.notification-button:-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline, 2px solid currentColor);
+  -moz-outline-radius: var(--toolbarbutton-border-radius, 4px);
+}
+
+.notification-button.primary {
+  background-color: var(--notification-primary-button-background);
+  /* Override button.css hover & active styles */
+  color: var(--notification-primary-button-text) !important;
+}
+
+.notification-button.primary:-moz-focusring {
+  outline: 4px solid rgba(0, 96, 223, 0.5);
+  outline-offset: -1px;
+}
+
+.notification-button.primary:not([disabled]):hover {
+  background-color: var(--notification-primary-button-background-hover);
+}
+
+.notification-button.primary:not([disabled]):hover:active {
+  background-color: var(--notification-primary-button-background-active);
+}