summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/notification-icons.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/themes/shared/notification-icons.css
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/themes/shared/notification-icons.css')
-rw-r--r--browser/themes/shared/notification-icons.css382
1 files changed, 382 insertions, 0 deletions
diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css
new file mode 100644
index 0000000000..eafb6929fd
--- /dev/null
+++ b/browser/themes/shared/notification-icons.css
@@ -0,0 +1,382 @@
+/* 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 html url("http://www.w3.org/1999/xhtml");
+
+#notification-popup-box {
+ height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: var(--urlbar-icon-fill-opacity);
+ color: inherit;
+ border-radius: var(--urlbar-icon-border-radius);
+}
+#notification-popup-box:hover {
+ background-color: hsla(0,0%,70%,.2);
+}
+#notification-popup-box:hover:active,
+#notification-popup-box[open] {
+ background-color: hsla(0,0%,70%,.3);
+}
+
+.popup-notification-icon,
+.permission-popup-permission-icon {
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+}
+
+.notification-anchor-icon:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+ border-radius: var(--urlbar-icon-border-radius);
+}
+
+.blocked-permission-icon:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset));
+ border-radius: 1px;
+}
+
+/* This class can be used alone or in combination with the class defining the
+ type of icon displayed. This rule must be defined before the others in order
+ for its list-style-image to be overridden. */
+.notification-anchor-icon {
+ list-style-image: url(chrome://global/skin/icons/info-filled.svg);
+ padding: var(--urlbar-icon-padding);
+}
+
+/* INDIVIDUAL NOTIFICATIONS */
+
+.focus-tab-by-prompt-icon {
+ list-style-image: url(chrome://global/skin/icons/info.svg);
+}
+
+.storage-access-icon {
+ list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
+}
+
+.persistent-storage-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg);
+}
+
+.persistent-storage-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg);
+}
+
+.desktop-notification-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
+}
+
+.desktop-notification-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg);
+}
+
+.geo-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
+}
+
+.geo-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg);
+}
+
+.open-protocol-handler-icon {
+ list-style-image: url(chrome://global/skin/icons/open-in-new.svg);
+}
+
+.open-protocol-handler-icon:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+.xr-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/xr.svg);
+}
+
+.xr-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg);
+}
+
+.autoplay-media-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
+}
+
+.autoplay-media-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg);
+}
+
+.storage-access-notification-content {
+ color: var(--panel-disabled-color);
+ font-style: italic;
+ margin-top: 15px;
+}
+
+.storage-access-notification-content .text-link {
+ color: -moz-nativehyperlinktext;
+}
+
+.storage-access-notification-content .text-link:hover {
+ text-decoration: underline;
+}
+
+#storage-access-notification .popup-notification-body-container {
+ padding: 20px;
+}
+
+.indexedDB-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg);
+}
+
+#password-notification-icon {
+ list-style-image: url(chrome://browser/skin/login.svg);
+}
+
+#password-notification-icon[extraAttr="attention"] {
+ fill: var(--toolbarbutton-icon-fill-attention);
+ fill-opacity: 1;
+}
+
+.camera-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
+}
+
+.camera-icon.in-use {
+ list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
+}
+
+.camera-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg);
+}
+
+.microphone-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.microphone-icon.in-use {
+ list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.microphone-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg);
+}
+
+.popup-notification-icon.microphone-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.screen-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
+}
+
+.screen-icon.in-use {
+ list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
+}
+
+.screen-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg);
+}
+
+.speaker-icon {
+ list-style-image: url(chrome://global/skin/media/audio.svg);
+}
+
+.midi-icon,
+.midi-sysex-icon {
+ list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
+}
+
+#canvas-notification-icon,
+.canvas-icon {
+ list-style-image: url(chrome://browser/skin/canvas.svg);
+}
+
+.canvas-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/canvas-blocked.svg);
+}
+
+#webauthn-notification-icon,
+.popup-notification-icon[popupid^="webauthn-prompt-"] {
+ list-style-image: url(chrome://browser/skin/fingerprint.svg);
+}
+
+#identity-credential-notification-icon {
+ list-style-image: url(chrome://browser/skin/login.svg);
+}
+
+#permission-popup-menulist {
+ margin-inline-end: 0;
+}
+
+#webRTC-preview:not([hidden]) {
+ flex-direction: column;
+}
+
+#webRTC-previewVideo {
+ border-radius: 4px;
+ border: 1px solid var(--panel-separator-color);
+ min-width: 0;
+ min-height: 10em;
+ max-height: 250px;
+}
+
+#webRTC-all-windows-shared,
+#webRTC-previewWarning {
+ font-size: 0.8em;
+}
+
+@media not (prefers-contrast) {
+ #webRTC-all-windows-shared,
+ #webRTC-previewWarning {
+ opacity: 0.6;
+ }
+}
+
+#webRTC-previewWarning {
+ margin-block-start: 14px;
+}
+
+/**
+ * All learn-more links tend to have an !important margin-top, but
+ * the small one below the WebRTC preview warning is special and
+ * doesn't have one by design.
+ */
+#webRTC-previewWarning-learnMore {
+ margin-top: 0 !important;
+ font-size: 0.75em;
+}
+
+#webRTC-previewWarningBox:-moz-locale-dir(rtl) {
+ background-position: calc(100% - .75em) .75em;
+}
+
+#webRTC-previewWarning > .text-link {
+ margin-inline-start: 0;
+}
+
+/* This icon has a block sign in it, so we don't need a blocked version. */
+.popup-icon {
+ list-style-image: url("chrome://browser/skin/notification-icons/popup.svg");
+}
+
+/**
+ * Bug 1708716: The blocked popup icon is just slightly vertically offset from
+ * the other icons that can appear alongside it in the URL bar due to how it's
+ * placed in the SVG file. We nudge it a little here to make it line up in a
+ * more aesthetically pleasing way.
+ */
+#blocked-permissions-container > .popup-icon {
+ transform: translateY(1px);
+}
+
+#permission-popup-menulist,
+#permission-popup-menulist > menupopup {
+ min-width: 6.5em;
+}
+
+/* EME */
+
+.drm-icon {
+ list-style-image: url("chrome://browser/skin/drm-icon.svg");
+}
+
+.notification-anchor-icon[animate=true],
+#eme-notification-icon[firstplay=true] {
+ animation: emeTeachingMoment 0.2s linear 0s 5 normal;
+}
+
+@keyframes emeTeachingMoment {
+ 0% {transform: translateX(0); }
+ 25% {transform: translateX(3px) }
+ 75% {transform: translateX(-3px) }
+ 100% { transform: translateX(0); }
+}
+
+/* INSTALL ADDONS */
+
+.install-icon {
+ list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
+}
+
+.install-icon.blocked-permission-icon {
+ list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
+}
+
+/* PLUGINS */
+
+.plugin-icon {
+ list-style-image: url(chrome://global/skin/icons/plugin.svg);
+ transition: fill 1.5s;
+}
+
+#plugin-icon-badge {
+ list-style-image: url(chrome://browser/skin/notification-icons/plugin-badge.svg);
+ width: 16px;
+ height: 16px;
+ opacity: 0;
+ transition: opacity 1.5s;
+}
+
+#plugins-notification-icon:not(.plugin-blocked)[extraAttr="inactive"] > .plugin-icon {
+ fill-opacity: 0.25;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
+ opacity: 1;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
+ animation: blink-badge 1000ms ease 0s 5 alternate both;
+}
+
+@keyframes blink-badge {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.plugin-blocked > .plugin-icon {
+ list-style-image: url(chrome://global/skin/icons/plugin-blocked.svg);
+ fill: #d92215 !important;
+}
+
+.plugin-blocked > #plugin-icon-badge {
+ visibility: collapse;
+}
+
+#notification-popup-box[hidden] {
+ /* Override display:none to make the pluginBlockedNotification animation work
+ when showing the notification repeatedly. */
+ display: flex;
+ visibility: collapse;
+}
+
+#plugins-notification-icon.plugin-blocked[showing] {
+ animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
+}
+
+@keyframes pluginBlockedNotification {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* UPDATE */
+.popup-notification-icon[popupid="update-available"],
+.popup-notification-icon[popupid="update-manual"],
+.popup-notification-icon[popupid="update-other-instance"],
+.popup-notification-icon[popupid="update-restart"] {
+ background: url(chrome://browser/skin/update-badge.svg) no-repeat center;
+ -moz-context-properties: fill;
+ fill: var(--panel-banner-item-update-supported-bgcolor);
+}
+
+.popup-notification-icon[popupid="update-unsupported"] {
+ background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+ -moz-context-properties: fill;
+ fill: var(--warning-icon-bgcolor);
+}