From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- toolkit/themes/shared/popupnotification.css | 132 ++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 toolkit/themes/shared/popupnotification.css (limited to 'toolkit/themes/shared/popupnotification.css') diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css new file mode 100644 index 0000000000..6b795bfdd5 --- /dev/null +++ b/toolkit/themes/shared/popupnotification.css @@ -0,0 +1,132 @@ +/* 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/. */ + +.popup-notification-panel::part(content) { + /* To keep the rounded borders of the panel, we use overflow: hidden; from the + * panel-no-padding class to ensure the contents are clipped to the border box. + * That causes us to override the "display" property so that the height of the + * contents is computed correctly. */ + display: flex; + /* Make multiple popupnotifications stack vertically. */ + flex-direction: column; +} + +.popup-notification-panel > popupnotification:not([hidden]) { + /* Since the anonymous parent (::part(content)) has display: flex, sizing + * computations work better with display: block; than with the XUL default + * display: flex; + * TODO(emilio): we can probably remove this. */ + display: block; +} + +popupnotification { + font: caption; +} + +popupnotificationcontent { + margin-top: .5em; +} + +.popup-notification-header-container, +.popup-notification-footer-container { + display: flex; + /** Padding + Icon width + border-radius + popup-notification-body-width **/ + max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + var(--popup-notification-body-width)); +} + +.popup-notification-body-container { + padding: var(--arrowpanel-padding); +} + +.popup-notification-icon { + width: 32px; + height: 32px; + margin-inline-end: var(--arrowpanel-padding); +} + +.popup-notification-body { + width: var(--popup-notification-body-width); + flex: 1 auto; +} + +.popup-notification-closebutton { + margin-inline-end: -8px; + margin-top: -8px; +} + +.popup-notification-origin:not([value]), +.popup-notification-learnmore-link:not([href]) { + display: none; +} + +.popup-notification-origin { + margin-bottom: .3em !important; +} + +.popup-notification-hint-text { + margin-top: .5em !important; +} + +.popup-notification-hint-text:empty { + display: none; +} + +.popup-notification-secondary-button:not([dropmarkerhidden="true"]) { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +/** + * The focus ring is an outline thicker than 1px, meaning that for split buttons, + * if the main button part of the split button has :focus-visible, the ring will + * be partially hidden behind the dropmarker button. We work around this by + * temporarily boosting the z-index of the main button while showing its focus + * ring. + */ +.popup-notification-secondary-button:not([dropmarkerhidden="true"]):focus-visible { + z-index: 2; +} + +.popup-notification-dropmarker { + border-start-start-radius: 0 !important; + border-end-start-radius: 0 !important; + margin-inline-start: 1px !important; + padding: 8px !important; + max-width: 32px; +} + +.popup-notification-dropmarker > .button-box > hbox { + display: none; +} + +.popup-notification-dropmarker > .button-box > .button-menu-dropmarker { + appearance: none; + display: flex; + content: url(chrome://global/skin/icons/arrow-down.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.popup-notification-warning { + color: #d74345; +} + +.popup-notification-icon:not([hasicon]) { + display: none; +} + +.popup-notification-icon { + height: 16px; + width: 16px; + margin-inline-end: 6px; +} + +.popup-notification-checkbox > .checkbox-label-box > .checkbox-label { + opacity: 0.7; +} + +.popup-notification-learnmore-link { + text-decoration: underline; + margin-block: 4px 0; +} -- cgit v1.2.3