diff options
Diffstat (limited to 'browser/themes/shared/notification-icons.css')
| -rw-r--r-- | browser/themes/shared/notification-icons.css | 404 |
1 files changed, 404 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..bd6271f4b9 --- /dev/null +++ b/browser/themes/shared/notification-icons.css @@ -0,0 +1,404 @@ +/* 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(--toolbar-field-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/fingerprint.svg); +} + +#permission-popup-menulist { + margin-inline-end: 0; +} + +#webRTC-preview:not([hidden]) { + -moz-box-orient: vertical; +} + +#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: -moz-box; + visibility: collapse; +} + +#plugins-notification-icon.plugin-blocked[showing] { + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; +} + +@keyframes pluginBlockedNotification { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* TRANSLATION */ + +.translation-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +.translation-icon.in-use { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +@media (-moz-platform: macos) and (min-resolution: 1.1dppx) { + .translation-icon { + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); + } + + .translation-icon.in-use { + -moz-image-region: rect(0px, 64px, 32px, 32px); + } +} + +/* 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); +} |