diff options
Diffstat (limited to 'toolkit/themes/shared/alert.css')
| -rw-r--r-- | toolkit/themes/shared/alert.css | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/toolkit/themes/shared/alert.css b/toolkit/themes/shared/alert.css new file mode 100644 index 0000000000..e4c86fe15a --- /dev/null +++ b/toolkit/themes/shared/alert.css @@ -0,0 +1,211 @@ +/* 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/. */ + +@import url("chrome://global/skin/global.css"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#alertBox { + border: 1px solid threedshadow; + background-color: -moz-Dialog; + color: -moz-DialogText; +} + +@media (-moz-platform: windows) { + #alertNotification { + appearance: none; + background: transparent; + } + + #alertBox { + margin: 10px; + border-radius: 1px; + box-shadow: 0 2px 10px rgba(0,0,0,0.59); + } + + @media (-moz-windows-default-theme) and (prefers-color-scheme: light) { + #alertBox { + border-color: rgba(107,107,107,.3); + background-color: rgba(255,255,255,.9); + color: rgba(0,0,0,.9); + } + } +} + +@media (-moz-platform: macos) { + #alertNotification { + appearance: none; + background: transparent; + } + + #alertBox { + border-radius: 1px; + } +} + +#alertBox[animate] { + animation-timing-function: cubic-bezier(.12,1.23,.48,1.09); +} + +#alertBox[animate][clicked] { + animation-duration: .6s; + animation-name: alert-clicked-animation; +} + +/* This is used if the close button is clicked + before the animation has finished. */ +#alertBox[animate][closing] { + animation-duration: .6s; + animation-name: alert-closing-animation; +} + +#alertBox[animate]:not([clicked], [closing]):hover { + /* !important is necessary because CSS animations have highest + importance in the cascade with exception to !important rules. */ + opacity: 1 !important; +} + +@keyframes alert-animation { + from { + opacity: 0; + } + 5% { + opacity: 1; + } + 95% { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-clicked-animation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-closing-animation { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +#alertIcon { + margin-top: 6px; + margin-inline-start: 8px; + margin-inline-end: 0; + margin-bottom: 0; + width: 16px; + min-height: 16px; + max-height: 16px; +} + +@media (resolution: 2dppx) { + #alertIcon { + image-rendering: -moz-crisp-edges; + } +} + +#alertImage { + width: 80px; + height: 80px; + max-width: 80px; + max-height: 80px; + object-fit: scale-down; + margin: 0 7px 7px; +} + +.alertTextBox { + padding-top: 4px; + /* The text box width is increased to make up for the lack of image when one + is not provided. 349px is the text box width when a picture is present, + 255px, plus the width of the image, 80px, and the margins, 7px each. */ + width: 349px; +} + +#alertBox[hasImage] > box > #alertTextBox { + width: 255px; +} + +#alertBox:not([hasImage]) > box > #alertTextBox { + padding-inline-start: 8px; +} + +#alertTextLabel { + padding-inline-end: 8px; +} + +.alertTitle { + flex: 1; + font-weight: bold; + padding: 6px 8px 0; + width: 255px; +} + +#alertFooter { + align-items: flex-start; +} + +#alertBox:not([hasOrigin]) > box > #alertTextBox, +#alertFooter { + padding-bottom: 5px; +} + +#alertSourceLabel { + flex: 1; + font-size: 83.334%; + color: GrayText; +} + +#alertSettings { + appearance: none; + background-color: transparent; + border-width: 0; + border-radius: 20px; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/settings.svg"); + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 4px; + margin-bottom: 0; +} + +#alertSettings > .button-box { + padding: 0; +} + +#alertSettings .button-icon { + margin: 0; +} + +#alertSettings:hover, +#alertSettings[open] { + fill: #ddd; +} + +#alertSettings:hover { + background-color: rgb(128,128,128); +} + +#alertSettings[open], +#alertSettings:hover:active { + background-color: rgb(102,102,102); +} + +#alertSettings[focusedViaMouse]:-moz-focusring { + outline: none; +} + +#alertSettings > .button-box > .button-menu-dropmarker, +#alertSettings > .button-box > .box-inherit > .button-text { + display: none; +} |