panel.css (30430B)
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 :root { 6 --trustpanel-graphic-bg: light-dark(var(--color-gray-20), var(--color-gray-90)); 7 --trustpanel-highlight-bg: light-dark(var(--color-violet-10), var(--color-violet-90)); 8 --trustpanel-warning-bg: light-dark(var(--color-red-20), var(--color-red-90)); 9 --trustpanel-inner-border: 1px solid var(--color-violet-20); 10 --trustpanel-inner-warning-border: 1px solid var(--color-red-10); 11 } 12 13 /* Hide all conditional elements by default. */ 14 :is([when-connection], [when-customroot], [when-mixedcontent], [when-ciphers], [when-httpsonlystatus]) { 15 display: none; 16 } 17 18 #identity-popup, 19 #permission-popup, 20 #trustpanel-popup, 21 #protections-popup { 22 --popup-width: 30.81em; 23 /* Set default fill for icons in the identity popup. 24 Individual icons can override this. */ 25 fill: currentColor; 26 --horizontal-padding: calc(var(--arrowpanel-menuitem-padding-inline) * 2); 27 --vertical-section-padding: 0.9em; 28 --height-offset: 0px; 29 font: menu; 30 } 31 32 #protections-popup[toast] { 33 --popup-width: 27.12em; 34 } 35 36 #protections-popup[infoMessageShowing] { 37 --height-offset: 260px; 38 } 39 40 /* This is used by screenshots tests to hide intermittently different 41 * identity popup shadows (see bug 1425253). */ 42 #identity-popup.no-shadow, 43 #permission-popup.no-shadow { 44 -moz-window-shadow: none; 45 } 46 47 /* Show the right elements for the right connection states. */ 48 .site-information-popup[customroot=true] [when-customroot=true], 49 .site-information-popup[connection=not-secure] [when-connection~=not-secure], 50 .site-information-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden], 51 .site-information-popup[connection=secure-ev] [when-connection~=secure-ev], 52 .site-information-popup[connection=secure-etsi] [when-connection~=secure-etsi], 53 .site-information-popup[connection=secure] [when-connection~=secure], 54 .site-information-popup[connection=chrome] [when-connection~=chrome], 55 .site-information-popup[connection=file] [when-connection~=file], 56 .site-information-popup[connection=associated] [when-connection~=associated], 57 .site-information-popup[connection=extension] [when-connection~=extension], 58 .site-information-popup[connection=cert-error-page] [when-connection~=cert-error-page], 59 .site-information-popup[connection=net-error-page] [when-connection~=net-error-page], 60 .site-information-popup[connection=https-only-error-page] [when-connection~=https-only-error-page], 61 /* Show weak cipher messages when needed. */ 62 .site-information-popup[ciphers=weak] [when-ciphers~=weak], 63 /* Show mixed content warnings when needed */ 64 .site-information-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], 65 .site-information-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], 66 .site-information-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], 67 /* Show the right elements when there is mixed passive content loaded and active blocked. */ 68 .site-information-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], 69 /* HTTPS-Only and HTTPS-First Mode */ 70 .site-information-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception], 71 .site-information-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded], 72 .site-information-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top], 73 .site-information-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub], 74 /* Show 'disable MCB' button always when there is mixed active content blocked. */ 75 #identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { 76 display: revert; 77 } 78 79 /* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ 80 #identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure], 81 /* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ 82 #identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { 83 display: none; 84 } 85 86 /* Make sure hidden elements don't accidentally become visible from one of the 87 above selectors (see Bug 1194258) */ 88 #identity-popup [hidden] { 89 display: none !important; 90 } 91 92 #identity-popup-mainView, 93 #permission-popup-mainView, 94 #trustpanel-popup-mainView, 95 #trustpanel-blockerView, 96 #protections-popup-mainView { 97 min-width: var(--popup-width); 98 max-width: var(--popup-width); 99 } 100 101 #protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section), 102 #protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header), 103 #protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) { 104 /* Hide all elements in the panel except for the toast descriptions */ 105 display: none; 106 } 107 108 #protections-popup[toast] #protections-popup-mainView-panel-header { 109 min-height: unset; /* revert panelUI-shared.css */ 110 } 111 112 #identity-popup-security-description > description { 113 font-weight: var(--font-weight-semibold); 114 margin-top: 0.5em; 115 } 116 117 #identity-popup-security-httpsonlymode { 118 margin-top: 1em; 119 } 120 121 #identity-popup-security-httpsonlymode-menulist { 122 width: 11em; 123 margin: 0.5em 0; 124 } 125 126 #identity-popup-security-httpsonlymode-info { 127 font-size: 0.85em; 128 color: var(--text-color-deemphasized); 129 } 130 131 #identity-popup-security-httpsonlymode-info > description { 132 margin-bottom: 0.5em; 133 } 134 135 #permission-popup-permissions-content { 136 padding-inline: 1.25em; 137 min-width: 0; 138 } 139 140 /* CONTENT */ 141 142 :where(#trustpanel-popup, #protections-popup, #identity-popup) :is(description, label) { 143 margin: 0; 144 } 145 146 #protections-popup .panel-header > h1 > span, 147 #permission-popup .panel-header > h1 > span, 148 #identity-popup .panel-header > h1 > span { 149 /* This is needed for the overflow-wrap to work correctly when the domain name is really long. */ 150 max-width: calc(var(--popup-width) - 2 * var(--arrowpanel-menuitem-margin-inline)); 151 overflow-wrap: break-word; 152 } 153 154 #protections-popup .panel-header > h1 > span { 155 /* The protections popup panel header text needs a different calculation because it contains an info button. 156 * icon-full-width is included twice to compensate for the margin-inline-start of the text, 157 * used to center it even if the header includes a info button. See .panel-header-with-info-button */ 158 /* prettier-ignore */ 159 max-width: calc(var(--popup-width) 160 - var(--arrowpanel-menuitem-margin-inline) * 2 161 - var(--arrowpanel-header-info-icon-full-width) * 2); 162 } 163 164 #identity-popup .panel-header > .subviewbutton-back + h1 > span { 165 /* Same idea as above, but in the identity popup when there's a back button. */ 166 /* prettier-ignore */ 167 max-width: calc(var(--popup-width) 168 - var(--arrowpanel-menuitem-margin-inline) * 2 169 - var(--arrowpanel-header-back-icon-full-width) * 2); 170 } 171 172 #protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator { 173 display: none; 174 } 175 176 #protections-popup-mainView-panel-header-section { 177 /* Don't display the info message on top of the panel content while it fades in and out */ 178 overflow: hidden; 179 } 180 181 #permission-popup-permissions-content > description, 182 #protections-popup-content > description { 183 color: var(--text-color-deemphasized); 184 } 185 186 /* This element needs the pre-wrap because we add newlines to it in the code. */ 187 #identity-popup-content-supplemental { 188 white-space: pre-wrap; 189 } 190 191 /* SECURITY */ 192 193 .site-information-popup[mixedcontent~="active-loaded"] .identity-popup-connection-not-secure, 194 .site-information-popup:not([mixedcontent]) .identity-popup-connection-not-secure { 195 font-weight: var(--font-weight-bold); 196 } 197 198 #identity-popup-mainView > .panel-subview-body { 199 padding-bottom: var(--panel-subview-body-padding-block); 200 } 201 202 #identity-popup-mainView[footerVisible="true"] > .panel-subview-body { 203 padding-bottom: 0; 204 } 205 206 .identity-popup-section { 207 margin-inline: var(--arrowpanel-menuitem-margin-inline); 208 padding-inline: var(--arrowpanel-menuitem-padding-inline); 209 } 210 211 .identity-popup-section.indented { 212 /* Align with the text displayed following the lock icon, in the connection status button above. 213 16px is the icon size and 8px is the inline-start padding of the text. */ 214 padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + 8px); 215 } 216 217 .identity-popup-security-connection { 218 list-style-image: url(chrome://global/skin/icons/security-broken.svg); 219 margin: var(--arrowpanel-menuitem-margin); 220 padding: var(--arrowpanel-menuitem-padding); 221 -moz-context-properties: fill; 222 min-height: 24px; 223 } 224 225 .site-information-popup[connection="chrome"] .identity-popup-security-connection { 226 /* This is rendered at 16px. In upstream mozilla this was icon48.png, which 227 * for tb-alpha and tb-nightly will include a small "alpha" and "moon" symbol, 228 * respectively. This do not render well at 16px, so we swap to icon32.png, 229 * which does not include these symbols. 230 * This also keeps the icon consistent with the favicon used for some internal 231 * pages (icon32.png) and the site identity button icon (icon16.png or 232 * icon32.png). 233 * See tor-browser#42088 */ 234 list-style-image: url(chrome://branding/content/icon32.png); 235 } 236 237 .site-information-popup[connection="file"] .identity-popup-security-connection { 238 list-style-image: url(chrome://global/skin/icons/page-portrait.svg); 239 } 240 241 .site-information-popup[connection="associated"] .identity-popup-security-connection { 242 list-style-image: url(chrome://global/skin/icons/info.svg); 243 } 244 245 .site-information-popup[connection^="secure"] .identity-popup-security-connection { 246 list-style-image: url(chrome://global/skin/icons/security.svg); 247 } 248 249 /* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ 250 .site-information-popup[ciphers="weak"] .identity-popup-security-connection, 251 .site-information-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection { 252 list-style-image: url(chrome://global/skin/icons/security-warning.svg); 253 -moz-context-properties: fill, fill-opacity; 254 } 255 256 .site-information-popup[connection="secure-cert-user-overridden"] .identity-popup-security-connection, 257 .site-information-popup[connection="cert-error-page"] .identity-popup-security-connection { 258 list-style-image: url(chrome://global/skin/icons/security-warning.svg); 259 fill: unset; 260 } 261 262 .site-information-popup[connection="net-error-page"] .identity-popup-security-connection { 263 list-style-image: url(chrome://global/skin/icons/info.svg); 264 fill: unset; 265 } 266 267 .site-information-popup[mixedcontent~="active-loaded"][isbroken] .identity-popup-security-connection { 268 list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); 269 } 270 271 .site-information-popup[connection="extension"] .identity-popup-security-connection { 272 list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); 273 } 274 275 .identity-popup-security-connection-icon { 276 width: 16px; 277 height: 16px; 278 } 279 280 .identity-popup-security-connection description, 281 .identity-popup-connection-secure.security-view, 282 .identity-popup-connection-secure.upgraded, 283 .identity-popup-connection-not-secure.security-view { 284 padding-inline-start: 8px; 285 } 286 287 #identity-popup-securityView-extended-info > button, 288 #identity-popup-securityView-extended-info > hbox > .text-link, 289 #identity-popup-content-verifier, 290 #identity-popup-content-verifier ~ description, 291 #identity-popup-content-owner-label { 292 margin-block: 0.5em; 293 } 294 295 #identity-popup-securityView-extended-info > .identity-popup-warning-box { 296 font-weight: var(--font-weight-semibold); 297 } 298 299 #identity-popup-securityView-extended-info > .identity-popup-warning-box > label { 300 display: inline-block; 301 } 302 303 #identity-popup-securityView-extended-info > button { 304 margin-inline: 0; 305 } 306 307 @media (-moz-platform: macos) { 308 #identity-popup-securityView-extended-info > button { 309 min-height: 30px; 310 } 311 312 #identity-popup-securityView-extended-info > button:focus-visible { 313 outline: var(--focus-outline); 314 } 315 } 316 317 #identity-popup-content-verifier-unknown > label { 318 display: inline; 319 } 320 321 /* CONTENT BLOCKING / TRACKING PROTECTION */ 322 323 #protections-popup-not-blocking-section-why:hover, 324 #protections-popup-show-report-stack:hover > .protections-popup-footer-button { 325 color: var(--button-text-color-ghost-hover); 326 background-color: var(--button-background-color-ghost-hover); 327 } 328 329 #protections-popup-show-report-stack:hover:active > .protections-popup-footer-button { 330 color: var(--button-text-color-ghost-active); 331 background-color: var(--button-background-color-ghost-active); 332 } 333 334 /* This subview could get filled with a lot of trackers, set a maximum size 335 * and allow it to scroll vertically.*/ 336 #protections-popup-socialblockView, 337 #protections-popup-cookiesView, 338 #protections-popup-trackersView, 339 #trustpanel-blocker-items { 340 max-height: calc(600px + var(--height-offset)); 341 } 342 343 #protections-popup-trackersView-list.empty { 344 align-items: center; 345 justify-content: center; 346 } 347 348 .protections-popup-empty-label { 349 color: var(--text-color-deemphasized); 350 } 351 352 .protections-popup-trackersView-empty-image { 353 width: var(--size-item-xlarge); 354 height: var(--size-item-xlarge); 355 -moz-context-properties: fill; 356 margin-bottom: 16px; 357 } 358 359 #protections-popup-cookiesView .protections-popup-empty-label { 360 margin-inline-start: 24px; 361 margin-block: 2px 4px; 362 } 363 364 .protections-popup-cookiesView-list-header { 365 color: var(--text-color-deemphasized); 366 margin: 5px 0; 367 } 368 369 #protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header { 370 display: none; 371 } 372 373 .protections-popup-list { 374 padding: 5px 16px !important; /* override panelUI-shared.css */ 375 } 376 377 .protections-popup-list-item { 378 display: flex; 379 margin: 5px 0; 380 } 381 382 .protections-popup-list-host-label { 383 direction: ltr; 384 text-align: match-parent; 385 } 386 387 /* Special alignment for items which include a state label (e.g. "Allowed") */ 388 .protections-popup-list-item-with-state > label { 389 margin: auto 0; 390 } 391 .protections-popup-list-item-with-state { 392 justify-content: space-between; 393 } 394 395 /* Content Blocking categories */ 396 397 #tracking-protection-container { 398 #protections-popup:not([detected]) & { 399 flex: 0 1 10em; 400 margin-block: var(--space-medium); 401 } 402 403 > tooltip { 404 max-width: var(--popup-width); 405 } 406 } 407 408 .protections-popup-section-header { 409 color: var(--text-color-deemphasized); 410 411 :root[uidensity="compact"] & { 412 margin-block: 4px; 413 } 414 } 415 416 #protections-popup-no-trackers-found-description { 417 margin: auto 7.25em; 418 font-size: 1.1em; 419 text-align: center; 420 color: var(--text-color-deemphasized); 421 422 &:not([hidden]) ~ #protections-popup-content { 423 display: none; 424 } 425 } 426 427 #protections-popup-not-blocking-section-why { 428 border-radius: var(--border-radius-xsmall); 429 430 &:hover { 431 outline: 4px solid var(--button-background-color-ghost-hover); 432 } 433 } 434 435 .trackers-icon { 436 list-style-image: url(chrome://browser/skin/canvas.svg); 437 } 438 439 .socialblock-icon { 440 list-style-image: url(chrome://browser/skin/thumb-down.svg); 441 } 442 443 .thirdpartycookies-icon { 444 list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); 445 } 446 447 .cryptominers-icon { 448 list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg); 449 } 450 451 .fingerprinters-icon { 452 list-style-image: url(chrome://browser/skin/fingerprint.svg); 453 } 454 455 /* PERMISSIONS */ 456 457 .permission-popup-permission-item { 458 min-height: 24px; 459 } 460 461 .protections-popup-category[uidisabled] { 462 display: none; 463 } 464 465 #permission-popup-storage-access-permission-list-header { 466 padding-inline-end: 8px; 467 } 468 469 .permission-popup-permission-item, 470 #permission-popup-storage-access-permission-list-header { 471 margin-block: 0.25em; 472 } 473 474 #permission-popup-permission-reload-hint, 475 #permission-popup-permission-empty-hint { 476 margin-top: 8px; 477 } 478 479 .permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child { 480 display: none; 481 } 482 483 #permission-popup-storage-access-permission-list-hint { 484 margin-top: 0.25em; 485 color: var(--text-color-deemphasized); 486 } 487 488 #permission-popup-storage-access-permission-list-hint, 489 #permission-popup-storage-access-permission-learn-more { 490 /* Matches offset for items - 16px icon + 8px margin */ 491 margin-inline-start: calc(16px + 8px); 492 } 493 494 .permission-popup-permission-icon { 495 width: 16px; 496 height: 16px; 497 } 498 499 .permission-popup-permission-label, 500 .permission-popup-permission-header-label { 501 margin-inline-start: 8px; 502 } 503 504 .permission-popup-permission-label-subitem { 505 /* Align label with other labels with icon. */ 506 /* icon width + icon inline margin + label inline margin */ 507 margin-inline-start: calc(16px + 3px + 10px); 508 } 509 510 .permission-popup-permission-state-label { 511 margin-inline-end: 5px; 512 text-align: end; 513 } 514 515 .permission-popup-permission-remove-button { 516 appearance: none; 517 min-width: auto; 518 margin: 0; 519 margin-inline-start: 2px; 520 padding: 2px; 521 padding-inline-end: 6px; 522 background-color: var(--button-background-color); 523 color: var(--button-text-color); 524 border: var(--button-border); 525 border-radius: var(--button-border-radius); 526 527 > .button-box > .button-icon { 528 margin: 0; 529 width: 12px; 530 height: 12px; 531 list-style-image: url(chrome://global/skin/icons/close.svg); 532 -moz-context-properties: fill; 533 fill: currentColor; 534 } 535 536 > .button-box > .button-text { 537 display: none; 538 } 539 540 &:hover { 541 color: var(--button-text-color-hover); 542 background-color: var(--button-background-color-hover); 543 border-color: var(--button-border-color-hover); 544 } 545 546 &:hover:active { 547 color: var(--button-text-color-active); 548 background-color: var(--button-background-color-active); 549 border-color: var(--button-border-color-active); 550 } 551 } 552 553 #protections-popup-cookie-banner-undetected { 554 color: var(--text-color-deemphasized); 555 } 556 557 #protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header, 558 #protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header { 559 display: none; 560 } 561 562 #protections-popup-toast-panel-tp-on-desc, 563 #protections-popup-toast-panel-tp-off-desc { 564 display: none; 565 } 566 567 #protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc, 568 #protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc { 569 display: revert; 570 } 571 572 #protections-popup-cookie-banner-switch > vbox { 573 gap: var(--space-xxsmall); 574 } 575 576 /* Protection popup footer categories */ 577 578 #protections-popup-trackers-blocked-counter-box { 579 margin: var(--arrowpanel-menuitem-margin); 580 padding: var(--arrowpanel-menuitem-padding); 581 visibility: hidden; 582 opacity: 0; 583 transition: opacity 200ms linear; 584 justify-self: end; 585 } 586 587 #protections-popup-trackers-blocked-counter-box[showing] { 588 visibility: visible; 589 opacity: 1; 590 } 591 592 #protections-popup-trackers-blocked-counter-description, 593 #protections-popup-footer-protection-type-label { 594 color: var(--text-color-deemphasized); 595 } 596 597 .protections-popup-description > description { 598 margin: 10px 16px; 599 } 600 601 #protections-popup:not([milestone]) #protections-popup-milestones, 602 #protections-popup:not([milestone]) #protections-popup-milestones-separator { 603 display: none; 604 } 605 606 #protections-popup-milestones-content { 607 background-color: var(--panel-banner-item-background-color); 608 } 609 610 /* The padding-block for menuitems is set to 0 in compact mode which, with the 611 * shield icon being bigger than a usual menuitem, makes the item look crowded 612 * even for compact mode. */ 613 :root[uidensity="compact"] #protections-popup-milestones-content { 614 padding-block: 4px; 615 } 616 617 #protections-popup-milestones-content:hover { 618 background-color: var(--panel-banner-item-hover-bgcolor); 619 } 620 621 #protections-popup-milestones-content:hover:active { 622 background-color: var(--panel-banner-item-active-bgcolor); 623 } 624 625 #protections-popup-milestones-text { 626 font-weight: var(--font-weight-semibold); 627 } 628 629 #protections-popup-milestones-illustration { 630 list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg); 631 -moz-context-properties: fill, stroke; 632 margin-inline-start: var(--horizontal-padding); 633 margin-inline-end: 4px; 634 height: 40px; 635 width: 32px; 636 } 637 638 #protections-popup[milestone] #protections-popup-milestones-illustration { 639 fill: #45278d; 640 stroke: #321c64; 641 } 642 643 #protections-popup[milestone="5000"] #protections-popup-milestones-illustration { 644 fill: #5a29cb; 645 stroke: #45278d; 646 } 647 648 #protections-popup[milestone="10000"] #protections-popup-milestones-illustration { 649 fill: #7641e5; 650 stroke: #5a29cb; 651 } 652 653 #protections-popup[milestone="25000"] #protections-popup-milestones-illustration { 654 fill: #e31587; 655 stroke: #c60084; 656 } 657 658 #protections-popup[milestone="50000"] #protections-popup-milestones-illustration { 659 fill: #ff298a; 660 stroke: #e31587; 661 } 662 663 #protections-popup[milestone="100000"] #protections-popup-milestones-illustration { 664 fill: #ffa436; 665 stroke: #e27f2e; 666 } 667 668 #protections-popup[milestone="500000"] #protections-popup-milestones-illustration { 669 fill: #ffd567; 670 stroke: #ffbd4f; 671 } 672 673 .permission-popup-section { 674 padding-bottom: 12px; 675 } 676 677 #permission-popup-menulist { 678 padding-inline: 12px 6px; 679 margin: 0; 680 681 &, 682 > menupopup { 683 min-width: 6.5em; 684 } 685 } 686 687 .protections-popup-section-header, 688 .protections-popup-switch-section-header { 689 padding: var(--arrowpanel-menuitem-padding); 690 margin: var(--arrowpanel-menuitem-margin); 691 } 692 693 .identity-popup-expander:focus-visible, 694 .permission-popup-permission-remove-button:focus-visible { 695 outline: var(--focus-outline); 696 } 697 698 @media (-moz-platform: linux) { 699 .identity-popup-expander > .button-box, 700 .permission-popup-permission-remove-button > .button-box { 701 appearance: none; 702 } 703 } 704 705 #blocked-popup-indicator-item, 706 #geo-access-indicator-item { 707 margin-top: -2px; 708 margin-inline-start: 16px; 709 } 710 711 #blocked-popup-indicator-item, 712 #blocked-popup-indicator-item > label { 713 display: block; 714 } 715 716 #geo-access-indicator-item { 717 font-size: 0.8em; 718 color: var(--text-color-deemphasized); 719 } 720 721 /** Shim-allow warning and indicator icons **/ 722 723 .protections-popup-shim-allow-hint { 724 padding: 0 2em; 725 margin-block-end: 10px; 726 } 727 728 .protections-popup-shim-allow-hint-icon, 729 .protections-popup-list-host-shim-allow-indicator { 730 -moz-context-properties: fill; 731 background-image: url("chrome://global/skin/icons/info-filled.svg"); 732 background-repeat: no-repeat; 733 background-position: center; 734 735 fill: light-dark(#0090ed, #80ebff); 736 } 737 738 .protections-popup-shim-allow-hint-icon { 739 width: 24px; 740 height: 24px; 741 742 background-size: contain; 743 margin-inline-end: 0.5em; 744 } 745 746 .protections-popup-list-host-shim-allow-indicator { 747 width: 16px; 748 } 749 750 .protections-popup-shim-allow-hint-icon { 751 margin-inline-end: 0.5em; 752 } 753 754 .protections-popup-list-host-shim-allow-indicator { 755 margin-inline-start: 0.5em; 756 min-width: 16px; 757 } 758 759 #cookieBannerView-disable-site, 760 #cookieBannerView-enable-site { 761 font-weight: var(--font-weight-semibold); 762 } 763 764 .protections-popup-cookieBannerView-footer { 765 margin-top: auto; 766 } 767 768 /* Cookie banner state toggles for the popup menu item */ 769 770 #protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected, 771 #protections-popup-cookie-banner-section:not([data-state="undetected"]) description#protections-popup-cookie-banner-undetected, 772 #protections-popup-cookie-banner-section:not([data-state="site-disabled"]) description#protections-popup-cookie-banner-site-disabled { 773 display: none; 774 } 775 776 /* Cookie banner state toggles for the subview: if the state is detected, show 777 * the disable controls; if the state is site-disabled, show the enable controls. */ 778 #protections-popup-cookieBannerView:not([data-state="detected"]) #protections-popup-cookieBannerView-disable-button, 779 #protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site, 780 #protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site-warning, 781 #protections-popup-cookieBannerView:not([data-state="site-disabled"]) #protections-popup-cookieBannerView-enable-button, 782 #protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site, 783 #protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site-description { 784 display: none; 785 } 786 787 .protections-popup-smartblock-section { 788 background-color: var(--background-color-information); 789 border-radius: var(--border-radius-small); 790 margin-inline: var(--arrowpanel-menuitem-margin-inline); 791 margin-block-start: var(--space-small); 792 padding-block: var(--space-small); 793 } 794 795 .protections-popup-smartblock-toggle-box { 796 margin-inline: var(--arrowpanel-menuitem-margin-inline); 797 padding-inline: var(--arrowpanel-menuitem-padding-inline); 798 } 799 800 .protections-popup-smartblock-toggle-box > moz-toggle { 801 padding-block-end: var(--arrowpanel-menuitem-padding-block); 802 } 803 804 /* Trustpanel popup */ 805 806 #trustpanel-header-row { 807 justify-content: space-between; 808 padding-block-start: var(--space-small); 809 padding-inline-start: var(--space-large); 810 } 811 812 #trustpanel-popup-host-wrapper { 813 overflow: hidden; 814 } 815 816 #trustpanel-popup-host { 817 align-self: center; 818 } 819 820 #trustpanel-graphic-section { 821 margin: var(--space-small) var(--space-large); 822 padding: var(--space-large); 823 padding-block-start: var(--space-small); 824 border-radius: var(--border-radius-medium); 825 flex-direction: column; 826 } 827 828 .only-trustpanel { 829 visibility: hidden; 830 831 #trustpanel-popup & { 832 visibility: visible; 833 } 834 } 835 836 #trustpanel-popup { 837 &[tracking-protection="warning"] { 838 #trustpanel-graphic-image { 839 background-image: url(chrome://browser/skin/trustpanel-graphic-warning.svg); 840 } 841 #trustpanel-graphic-section { 842 background: var(--trustpanel-warning-bg); 843 } 844 } 845 &[tracking-protection="enabled"] { 846 #trustpanel-graphic-image { 847 background-image: url(chrome://browser/skin/trustpanel-graphic-enabled.svg); 848 } 849 #trustpanel-graphic-section { 850 background: var(--trustpanel-highlight-bg); 851 } 852 } 853 854 &[tracking-protection="disabled"] { 855 #trustpanel-graphic-image { 856 background-image: url(chrome://browser/skin/trustpanel-graphic-disabled.svg); 857 } 858 #trustpanel-graphic-section { 859 background: var(--trustpanel-graphic-bg); 860 } 861 } 862 } 863 864 #trustpanel-graphic-image { 865 -moz-context-properties: fill; 866 background-repeat: no-repeat; 867 background-position: center; 868 fill: light-dark(#0090ed, #80ebff); 869 width: 80px; 870 height: 80px; 871 background-size: contain; 872 margin-inline-end: var(--space-small); 873 } 874 875 #trustpanel-graphic-section-text { 876 align-self: center; 877 margin-inline-start: var(--space-medium); 878 } 879 880 .trustpanel-header { 881 font-weight: var(--heading-font-weight); 882 margin-block-end: var(--space-medium); 883 884 #trustpanel-blockerDetailsView &, 885 #trustpanel-blockerView & { 886 margin-block-start: var(--space-large); 887 } 888 } 889 890 #trustpanel-toggle-checkbox-container { 891 justify-content: space-between; 892 } 893 894 #trustpanel-connection-icon, 895 #trustpanel-siteinfo-icon, 896 #trustpanel-popup-icon { 897 -moz-context-properties: fill, fill-opacity; 898 width: var(--icon-size); 899 height: var(--icon-size); 900 margin-inline-end: var(--space-xsmall); 901 align-self: center; 902 } 903 904 #trustpanel-connection-icon, 905 #trustpanel-siteinfo-icon { 906 list-style-image: url(chrome://global/skin/icons/security-broken.svg); 907 908 #trustpanel-popup:is([connection^="secure"], [connection="extension"], [connection="chrome"], [connection="file"]) & { 909 list-style-image: url(chrome://global/skin/icons/security.svg); 910 } 911 } 912 913 #trustpanel-popup-icon:not([src]), 914 #trustpanel-popup-icon[src=""] { 915 display: none; 916 } 917 918 .trustpanel-section { 919 padding: var(--arrowpanel-menuitem-padding); 920 margin: var(--arrowpanel-menuitem-margin); 921 } 922 923 #trustpanel-toggle-section { 924 margin: var(--space-large); 925 926 &[disabled] label { 927 color: var(--button-text-color-ghost-disabled); 928 opacity: var(--button-opacity-disabled); 929 } 930 } 931 932 .protections-popup-list-host-label, 933 .trustpanel-blocker-section > label { 934 margin-inline: var(--space-xlarge); 935 } 936 937 #trustpanel-blocker-section-header span { 938 color: var(--color-accent-primary); 939 } 940 941 .trustpanel-graphic-inner { 942 margin: var(--space-xsmall); 943 padding: var(--space-medium); 944 border-radius: var(--border-radius-medium); 945 } 946 947 #trustpanel-blocker-section { 948 background: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12)); 949 border: var(--trustpanel-inner-border); 950 } 951 952 .trustpanel-blocker-section[hidden] + toolbarseparator { 953 display: none; 954 } 955 956 #trustpanel-insecure-section { 957 visibility: collapse; 958 background: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12)); 959 border: var(--trustpanel-inner-warning-border); 960 961 #trustpanel-popup[tracking-protection="warning"] & { 962 visibility: visible; 963 } 964 965 .trustpanel-header { 966 background-image: url(chrome://global/skin/icons/security-broken.svg); 967 background-position: left center; 968 background-repeat: no-repeat; 969 background-size: var(--icon-size); 970 padding-inline-start: calc(var(--icon-size) + var(--space-small)); 971 -moz-context-properties: fill; 972 973 &:-moz-locale-dir(rtl) { 974 background-position-x: right; 975 } 976 } 977 } 978 979 #trustpanel-smartblock-section { 980 margin: var(--space-large); 981 } 982 983 #trustpanel-smartblock-toggle-container { 984 margin-block-start: var(--space-large); 985 } 986 987 .moz-button-subviewbutton-nav { 988 --button-font-weight: normal; 989 --button-alignment: inline-start; 990 --button-border-radius: var(--border-radius-small); 991 --focus-outline-offset: -2px; 992 margin: var(--space-small); 993 width: -moz-available; 994 995 &::part(button) { 996 -moz-context-properties: fill; 997 background-image: url(chrome://global/skin/icons/arrow-right.svg); 998 background-repeat: no-repeat; 999 background-position: right var(--space-large) center; 1000 padding-inline-end: calc(var(--space-small) + var(--icon-size) + var(--space-large)); 1001 } 1002 1003 &:-moz-locale-dir(rtl)::part(button) { 1004 background-image: url(chrome://global/skin/icons/arrow-left.svg); 1005 background-position-x: left var(--space-large); 1006 } 1007 }