notification-icons.css (8323B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @namespace html url("http://www.w3.org/1999/xhtml"); 6 7 #notification-popup-box { 8 height: calc(var(--urlbar-min-height) - 2 * var(--urlbar-container-border-padding)); 9 -moz-context-properties: fill, fill-opacity; 10 fill: currentColor; 11 fill-opacity: var(--urlbar-icon-fill-opacity); 12 color: inherit; 13 border-radius: var(--urlbar-inner-border-radius); 14 15 &:hover { 16 background-color: hsla(0, 0%, 70%, 0.2); 17 } 18 19 &:hover:active, 20 &[open] { 21 background-color: hsla(0, 0%, 70%, 0.3); 22 } 23 } 24 25 .popup-notification-icon, 26 .permission-popup-permission-icon { 27 -moz-context-properties: fill, fill-opacity; 28 fill: currentColor; 29 } 30 31 /* Notification anchors should only be visible when their associated 32 notifications are. */ 33 #blocked-permissions-container > .blocked-permission-icon:not([showing]), 34 .notification-anchor-icon:not([showing]) { 35 display: none; 36 } 37 38 /* This class can be used alone or in combination with the class defining the 39 type of icon displayed. This rule must be defined before the others in order 40 for its list-style-image to be overridden. */ 41 .notification-anchor-icon { 42 list-style-image: url(chrome://global/skin/icons/info-filled.svg); 43 padding: var(--urlbar-icon-padding); 44 45 &:focus-visible { 46 outline: var(--focus-outline); 47 outline-offset: var(--focus-outline-inset); 48 border-radius: var(--urlbar-inner-border-radius); 49 } 50 51 #nav-bar:not([keyNav]) & { 52 -moz-user-focus: normal; 53 } 54 } 55 56 .blocked-permission-icon:focus-visible { 57 outline: var(--focus-outline); 58 outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); 59 border-radius: var(--border-radius-xsmall); 60 } 61 62 /* INDIVIDUAL NOTIFICATIONS */ 63 64 .focus-tab-by-prompt-icon { 65 list-style-image: url(chrome://global/skin/icons/info.svg); 66 } 67 68 .storage-access-icon { 69 list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); 70 } 71 72 .persistent-storage-icon { 73 list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); 74 75 &.blocked-permission-icon { 76 list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); 77 } 78 } 79 80 .desktop-notification-icon { 81 list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); 82 83 &.blocked-permission-icon { 84 list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); 85 } 86 } 87 88 .geo-icon { 89 list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); 90 91 &.blocked-permission-icon { 92 list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); 93 } 94 } 95 96 .localhost-icon { 97 list-style-image: url(chrome://browser/skin/notification-icons/local-host.svg); 98 99 &.blocked-permission-icon { 100 list-style-image: url(chrome://browser/skin/notification-icons/local-host-blocked.svg); 101 } 102 } 103 104 .local-network-icon { 105 list-style-image: url(chrome://browser/skin/notification-icons/local-network.svg); 106 107 &.blocked-permission-icon { 108 list-style-image: url(chrome://browser/skin/notification-icons/local-network-blocked.svg); 109 } 110 } 111 112 .open-protocol-handler-icon { 113 list-style-image: url(chrome://global/skin/icons/open-in-new.svg); 114 115 &:-moz-locale-dir(rtl) { 116 transform: scaleX(-1); 117 } 118 } 119 120 .xr-icon { 121 list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); 122 123 &.blocked-permission-icon { 124 list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); 125 } 126 } 127 128 .autoplay-media-icon { 129 list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); 130 131 &.blocked-permission-icon { 132 list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); 133 } 134 } 135 136 .indexedDB-icon { 137 list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); 138 } 139 140 .popup-notification-icon[popupid="tor-clientauth"], 141 .tor-clientauth-icon, 142 #password-notification-icon { 143 list-style-image: url(chrome://browser/skin/login.svg); 144 145 &[extraAttr="attention"] { 146 fill: var(--toolbarbutton-icon-fill-attention); 147 fill-opacity: 1; 148 } 149 } 150 151 .camera-icon { 152 list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); 153 154 &.in-use { 155 list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); 156 } 157 158 &.blocked-permission-icon { 159 list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); 160 } 161 } 162 163 .microphone-icon { 164 list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); 165 166 &.in-use { 167 list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); 168 } 169 170 &.blocked-permission-icon { 171 list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); 172 } 173 174 &.popup-notification-icon { 175 list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); 176 } 177 } 178 179 .screen-icon { 180 list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); 181 182 &.in-use { 183 list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); 184 } 185 186 &.blocked-permission-icon { 187 list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); 188 } 189 } 190 191 .speaker-icon { 192 list-style-image: url(chrome://browser/skin/notification-icons/speaker.svg); 193 } 194 195 .midi-icon { 196 list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); 197 } 198 199 #canvas-notification-icon, 200 .canvas-icon { 201 list-style-image: url(chrome://browser/skin/canvas.svg); 202 } 203 204 .canvas-icon.blocked-permission-icon { 205 list-style-image: url(chrome://browser/skin/canvas-blocked.svg); 206 } 207 208 #webauthn-notification-icon, 209 .popup-notification-icon[popupid^="webauthn-prompt-"] { 210 list-style-image: url(chrome://browser/skin/fingerprint.svg); 211 } 212 213 #identity-credential-notification-icon, 214 #credential-chooser-notification-icon { 215 list-style-image: url(chrome://browser/skin/login.svg); 216 } 217 218 #webRTC-all-windows-shared, 219 #webRTC-previewWarning { 220 font-size: 0.8em; 221 222 @media not (prefers-contrast) { 223 opacity: 0.6; 224 } 225 } 226 227 #webRTC-previewWarning { 228 margin-block-start: var(--space-large); 229 } 230 231 /** 232 * All learn-more links tend to have an !important margin-top, but 233 * the small one below the WebRTC preview warning is special and 234 * doesn't have one by design. 235 */ 236 #webRTC-previewWarning-learnMore { 237 margin-top: 0 !important; 238 font-size: 0.75em; 239 } 240 241 /* This icon has a block sign in it, so we don't need a blocked version. */ 242 .popup-icon { 243 list-style-image: url("chrome://browser/skin/notification-icons/popup.svg"); 244 } 245 246 /** 247 * Bug 1708716: The blocked popup icon is just slightly vertically offset from 248 * the other icons that can appear alongside it in the URL bar due to how it's 249 * placed in the SVG file. We nudge it a little here to make it line up in a 250 * more aesthetically pleasing way. 251 */ 252 #blocked-permissions-container > .popup-icon { 253 transform: translateY(1px); 254 } 255 256 /* EME */ 257 258 .drm-icon { 259 list-style-image: url("chrome://browser/skin/drm-icon.svg"); 260 } 261 262 .notification-anchor-icon[animate="true"], 263 #eme-notification-icon[firstplay="true"] { 264 animation: emeTeachingMoment 0.2s linear 0s 5 normal; 265 } 266 267 @keyframes emeTeachingMoment { 268 0% { 269 transform: translateX(0); 270 } 271 25% { 272 transform: translateX(3px); 273 } 274 75% { 275 transform: translateX(-3px); 276 } 277 100% { 278 transform: translateX(0); 279 } 280 } 281 282 /* INSTALL ADDONS */ 283 284 .install-icon { 285 list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); 286 287 &.blocked-permission-icon { 288 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); 289 } 290 } 291 292 /* UPDATE */ 293 294 .popup-notification-icon[popupid="update-available"], 295 .popup-notification-icon[popupid="update-manual"], 296 .popup-notification-icon[popupid="update-other-instance"], 297 .popup-notification-icon[popupid="update-restart"] { 298 background: url(chrome://browser/skin/update-badge.svg) no-repeat center; 299 -moz-context-properties: fill; 300 fill: var(--panel-banner-item-update-supported-bgcolor); 301 } 302 303 .popup-notification-icon[popupid="update-unsupported"] { 304 background: url(chrome://global/skin/icons/warning.svg) no-repeat center; 305 -moz-context-properties: fill; 306 fill: var(--warning-icon-bgcolor); 307 }