identity-block.css (11444B)
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 #identity-box { 8 margin-inline-end: var(--identity-box-margin-inline); 9 10 &[pageproxystate="invalid"] { 11 pointer-events: none; 12 -moz-user-focus: ignore; 13 } 14 } 15 16 #identity-box, 17 #trust-icon-container, 18 #tracking-protection-icon-container { 19 /* Set default fill for icons in the identity block. 20 Individual icons can override this. */ 21 fill: currentColor; 22 fill-opacity: var(--urlbar-icon-fill-opacity); 23 } 24 25 #identity-box[pageproxystate="invalid"] { 26 > #identity-permission-box, 27 > #notification-popup-box, 28 #identity-icon-label { 29 display: none; 30 } 31 } 32 33 /* stylelint-disable-next-line media-query-no-invalid */ 34 @media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") { 35 #identity-box[pageproxystate="invalid"] { 36 display: none; 37 } 38 } 39 40 .identity-box-button { 41 padding-inline: var(--urlbar-icon-padding); 42 border-radius: var(--urlbar-inner-border-radius); 43 } 44 45 .identity-box-button, 46 #trust-icon-container, 47 #tracking-protection-icon-container { 48 outline: var(--toolbarbutton-outline); 49 outline-offset: var(--toolbarbutton-outline-offset); 50 51 &:hover:not([open="true"]) { 52 background-color: var(--urlbar-box-hover-bgcolor); 53 color: var(--urlbar-box-hover-text-color); 54 outline-color: var(--toolbarbutton-hover-outline-color); 55 } 56 57 &:hover:active, 58 &[open="true"] { 59 background-color: var(--urlbar-box-active-bgcolor); 60 color: var(--urlbar-box-hover-text-color); 61 outline-color: var(--toolbarbutton-active-outline-color); 62 } 63 64 &:focus-visible { 65 outline: var(--focus-outline); 66 outline-offset: var(--focus-outline-inset); 67 } 68 } 69 70 #identity-icon-label { 71 padding-inline-start: 4px; 72 margin: 0; 73 } 74 75 #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage), 76 #urlbar-label-box { 77 margin-inline-end: 8px; 78 /* stylelint-disable-next-line media-query-no-invalid */ 79 @media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") { 80 margin-inline-end: var(--urlbar-searchmodeswitcher-margin-inline-end); 81 } 82 /* stylelint-disable-next-line media-query-no-invalid */ 83 @media -moz-pref("browser.urlbar.trustPanel.featureGate") { 84 margin-inline-end: 0; 85 } 86 } 87 88 #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button, 89 #urlbar-label-box { 90 background-color: var(--urlbar-box-bgcolor); 91 color: var(--urlbar-box-text-color); 92 padding-inline: 8px; 93 border-radius: var(--urlbar-inner-border-radius); 94 } 95 96 #urlbar[focused] { 97 #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button:not(:hover, [open]), 98 #urlbar-label-box { 99 background-color: var(--urlbar-box-focus-bgcolor); 100 } 101 } 102 103 #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button { 104 &:hover:not([open]) { 105 background-color: var(--urlbar-box-hover-bgcolor); 106 color: var(--urlbar-box-hover-text-color); 107 } 108 109 &:is(:hover:active, [open]) { 110 background-color: var(--urlbar-box-active-bgcolor); 111 color: var(--urlbar-box-hover-text-color); 112 } 113 } 114 115 #urlbar[searchmode]:not([focused]) > .urlbar-input-container { 116 > #urlbar-label-box, 117 > #urlbar-search-mode-indicator { 118 pointer-events: none; 119 } 120 121 > #urlbar-search-mode-indicator > #urlbar-search-mode-indicator-close { 122 pointer-events: initial; 123 } 124 } 125 126 .urlbar-label { 127 margin: 0; 128 } 129 130 .sharing-icon, 131 #identity-icon, 132 #permissions-granted-icon, 133 #tracking-protection-icon, 134 .notification-anchor-icon, 135 #blocked-permissions-container > .blocked-permission-icon { 136 -moz-context-properties: fill, fill-opacity; 137 } 138 139 .sharing-icon, 140 #identity-icon, 141 #permissions-granted-icon, 142 #tracking-protection-icon, 143 #trust-icon, 144 #blocked-permissions-container > .blocked-permission-icon { 145 width: 16px; 146 height: 16px; 147 } 148 149 .sharing-icon, 150 #identity-icon, 151 #tracking-protection-icon, 152 #blocked-permissions-container > .blocked-permission-icon { 153 margin-inline-start: 4px; 154 } 155 156 #tracking-protection-icon { 157 margin-inline-start: 0; 158 } 159 160 /* MAIN IDENTITY ICON */ 161 #identity-icon { 162 margin-inline-start: 0; 163 list-style-image: url(chrome://global/skin/icons/info.svg); 164 } 165 166 #identity-box[pageproxystate="valid"].chromeUI #identity-icon { 167 list-style-image: url(chrome://branding/content/icon16.png); 168 } 169 @media (min-resolution: 1.1dppx) { 170 #identity-box[pageproxystate="valid"].chromeUI #identity-icon { 171 list-style-image: url(chrome://branding/content/icon32.png); 172 } 173 } 174 175 #identity-box[pageproxystate="valid"].localResource #identity-icon { 176 list-style-image: url(chrome://global/skin/icons/page-portrait.svg); 177 } 178 179 #identity-box[pageproxystate="invalid"] { 180 .identity-box-button { 181 outline: none; 182 } 183 184 #identity-icon { 185 list-style-image: url(chrome://global/skin/icons/search-glass.svg); 186 } 187 } 188 189 #urlbar[actiontype="extension"] > .urlbar-input-container > #identity-box #identity-icon { 190 list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); 191 } 192 193 #identity-box[pageproxystate="valid"].extensionPage #identity-icon { 194 list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); 195 } 196 197 #identity-box[pageproxystate="valid"].verifiedDomain #identity-icon, 198 #identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon { 199 list-style-image: url(chrome://global/skin/icons/security.svg); 200 } 201 202 #identity-box[pageproxystate="valid"].weakCipher #identity-icon, 203 #identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon, 204 #identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon, 205 #identity-box[pageproxystate="valid"].certUserOverridden #identity-icon, 206 #identity-box[pageproxystate="valid"].certErrorPage #identity-icon { 207 list-style-image: url(chrome://global/skin/icons/security-warning.svg); 208 fill: unset; 209 } 210 211 #identity-box[pageproxystate="valid"].notSecure #identity-icon, 212 #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, 213 #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { 214 list-style-image: url(chrome://global/skin/icons/security-broken.svg); 215 } 216 217 #identity-box[pageproxystate="valid"].onionUnknownIdentity #identity-icon, 218 #identity-box[pageproxystate="valid"].onionVerifiedDomain #identity-icon, 219 #identity-box[pageproxystate="valid"].onionMixedActiveBlocked #identity-icon { 220 list-style-image: url(chrome://global/skin/icons/onion-site.svg); 221 visibility: visible; 222 } 223 224 #identity-box[pageproxystate="valid"].onionMixedDisplayContent #identity-icon, 225 #identity-box[pageproxystate="valid"].onionMixedDisplayContentLoadedActiveBlocked #identity-icon, 226 #identity-box[pageproxystate="valid"].onionCertUserOverridden #identity-icon { 227 list-style-image: url(chrome://global/skin/icons/onion-warning.svg); 228 visibility: visible; 229 /* onion-warning includes another context-stroke color. Here we want it to 230 * match the context-fill color, which should be currentColor. */ 231 -moz-context-properties: fill, fill-opacity, stroke; 232 stroke: currentColor; 233 } 234 235 #identity-box[pageproxystate="valid"].onionMixedActiveContent #identity-icon { 236 list-style-image: url(chrome://global/skin/icons/onion-slash.svg); 237 visibility: visible; 238 } 239 240 #permissions-granted-icon { 241 list-style-image: url(chrome://browser/skin/permissions.svg); 242 } 243 244 #identity-permission-box { 245 display: none; 246 } 247 248 #identity-permission-box[open="true"], 249 #identity-permission-box[hasPermissions], 250 #identity-permission-box[hasSharingIcon] { 251 display: flex; 252 } 253 254 /* SHARING ICON */ 255 256 #webrtc-sharing-icon[sharing="camera"] { 257 list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); 258 } 259 260 #webrtc-sharing-icon[sharing="microphone"] { 261 list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); 262 } 263 264 #webrtc-sharing-icon[sharing="screen"] { 265 list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); 266 } 267 268 #geo-sharing-icon[sharing] { 269 list-style-image: url("chrome://browser/skin/notification-icons/geo.svg"); 270 } 271 272 .sharing-icon:not([sharing]) { 273 display: none; 274 } 275 276 #webrtc-sharing-icon[sharing]:not([paused]) { 277 -moz-context-properties: fill; 278 fill: rgb(224, 41, 29); 279 } 280 281 /* TRACKING PROTECTION ICON */ 282 283 #tracking-protection-icon-container { 284 /* Always hide the tracking toolbar button in Base Browser. 285 * tor-browser#26345. */ 286 display: none !important; 287 padding-inline: var(--urlbar-icon-padding); 288 border-radius: var(--urlbar-inner-border-radius); 289 /* This is needed in order to position the blue dot indicator. */ 290 position: relative; 291 } 292 293 .urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI { 294 display: none; 295 } 296 297 #tracking-protection-icon-box { 298 overflow: hidden; 299 width: 16px; 300 height: 16px; 301 } 302 303 #tracking-protection-icon-tooltip { 304 max-width: 500px; 305 } 306 307 .urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box { 308 list-style-image: url(chrome://browser/skin/tracking-protection.svg); 309 310 &[active] { 311 list-style-image: url(chrome://browser/skin/tracking-protection-active.svg); 312 } 313 314 &[hasException] { 315 list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg); 316 } 317 } 318 319 .urlbar-input-container[pageproxystate="invalid"] > #tracking-protection-icon-container, 320 #trust-icon-container { 321 display: none; 322 } 323 324 /* stylelint-disable-next-line media-query-no-invalid */ 325 @media -moz-pref("browser.urlbar.trustPanel.featureGate") { 326 #tracking-protection-icon-container, 327 /* Keep displaying the moz-extension or chrome UI chicklet */ 328 #identity-box[pageproxystate="valid"]:not(.chromeUI, .extensionPage) #identity-icon-box { 329 display: none; 330 } 331 332 .searchmode-switcher, 333 #identity-box { 334 margin-inline-end: 0; 335 } 336 337 #urlbar-label-box, 338 .urlbar-input-box { 339 margin-inline-start: var(--identity-box-margin-inline); 340 } 341 342 #trust-icon-container { 343 padding-inline: var(--urlbar-icon-padding); 344 border-radius: var(--urlbar-inner-border-radius); 345 -moz-context-properties: fill, fill-opacity; 346 /* Height shouldn't need defined here but is failing wpt tests without. 347 Investigating in https://bugzilla.mozilla.org/show_bug.cgi?id=2004907 */ 348 height: calc(16px + (2 * var(--urlbar-icon-padding))); 349 350 /* The urlbar will show insecure or secure icon by default depending 351 on the state of the connection, the further clauses may override that. */ 352 &:where(.insecure) { 353 list-style-image: url(chrome://browser/skin/trust-icon-insecure.svg); 354 background-color: var(--urlbar-box-bgcolor); 355 color: var(--urlbar-box-text-color); 356 } 357 358 &.secure { 359 list-style-image: url(chrome://browser/skin/trust-icon-active.svg); 360 } 361 362 &.inactive { 363 list-style-image: url(chrome://browser/skin/trust-icon-disabled.svg); 364 } 365 366 &.warning { 367 list-style-image: url(chrome://browser/skin/trust-icon-warning.svg); 368 } 369 370 &.file { 371 list-style-image: url(chrome://global/skin/icons/page-portrait.svg); 372 } 373 374 .urlbar-input-container[pageproxystate="valid"] > &:not(.chickletShown) { 375 display: inline-flex; 376 } 377 } 378 379 #trust-icon-container:not(.insecure) > #trust-label { 380 display: none; 381 } 382 }