Source code
Revision control
Copy as Markdown
Other Tools
/* 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
.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"] {
--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);
*|*:root[lwtheme] & {
--notification-background: #38383d;
--notification-text: rgb(249, 249, 250);
}
}
}
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 {
}
notification[type="warning"] > hbox > .messageImage {
}
notification[type="critical"] > hbox > .messageImage {
}
.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%;
}