summaryrefslogtreecommitdiffstats
path: root/toolkit/themes/shared/notification.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /toolkit/themes/shared/notification.css
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/themes/shared/notification.css')
-rw-r--r--toolkit/themes/shared/notification.css188
1 files changed, 188 insertions, 0 deletions
diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css
new file mode 100644
index 0000000000..b94918cce8
--- /dev/null
+++ b/toolkit/themes/shared/notification.css
@@ -0,0 +1,188 @@
+/* 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");
+@namespace html "http://www.w3.org/1999/xhtml";
+
+.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;
+}
+
+notification {
+ min-height: 40px;
+ 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);
+}
+
+@media (prefers-color-scheme: dark) {
+ notification[type="info"]:-moz-lwtheme {
+ --notification-background: #38383d;
+ --notification-text: rgb(249, 249, 250);
+ }
+
+ notification[type="info"] {
+ --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);
+ }
+}
+
+html|notification-message.animated,
+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 {
+ background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+notification[type="critical"] > .close-icon:hover:active {
+ background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+.messageText {
+ margin-inline-start: 12px !important;
+ margin-block: 0;
+}
+
+.messageText > .text-link {
+ text-decoration: underline;
+ margin-block: 0;
+}
+
+.messageText > .text-link:not(.notification-link) {
+ color: inherit !important;
+ margin-inline: 0;
+}
+
+.messageImage {
+ width: 24px;
+ margin: 4px 0;
+ -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;
+ width: 32px;
+ /* Close button needs to be clickable from the edge of the window */
+ margin-inline-end: 8px;
+}
+
+.messageCloseButton:focus-visible {
+ /* Override the dotted outline from button.css */
+ outline: none;
+}
+
+.messageCloseButton:focus-visible > .toolbarbutton-icon {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+ border-radius: var(--toolbarbutton-border-radius, 4px);
+}
+
+.notification-button {
+ appearance: none;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ background-color: var(--notification-button-background);
+ color: var(--notification-button-text);
+ padding: 0 6px;
+ margin: 4px 8px;
+ height: 24px;
+}
+
+.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:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.notification-button.primary {
+ background-color: var(--notification-primary-button-background);
+ color: var(--notification-primary-button-text);
+}
+
+.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);
+}
+
+.notificationbox-stack {
+ background-color: var(--toolbar-bgcolor);
+ width: 100%;
+}