1203 lines
36 KiB
CSS
1203 lines
36 KiB
CSS
/* 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/. */
|
|
|
|
:root {
|
|
--trustpanel-graphic-bg: light-dark(var(--color-gray-20), var(--color-gray-90));
|
|
--trustpanel-highlight-bg: light-dark(var(--color-violet-10), var(--color-violet-90));
|
|
--trustpanel-warning-bg: light-dark(var(--color-red-20), var(--color-red-90));
|
|
--trustpanel-inner-border: 1px solid var(--color-violet-20);
|
|
--trustpanel-inner-warning-border: 1px solid var(--color-red-10);
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--trustpanel-highlight-bg: light-dark(var(--color-violet-10), var(--color-violet-desaturated-70));
|
|
/* White cards use the standard border token, like the breach alert card;
|
|
tinted states override these below. */
|
|
--trustpanel-card-border-color: var(--border-color);
|
|
--trustpanel-card-divider-color: var(--border-color);
|
|
}
|
|
}
|
|
|
|
/* On the tinted cards (violet for enabled, box-info for disabled) the border
|
|
and divider use a subtle wash that blends with the fill. */
|
|
#trustpanel-popup:is([tracking-protection="enabled"], [tracking-protection="disabled"]) {
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--trustpanel-card-border-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.12));
|
|
--trustpanel-card-divider-color: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
|
|
}
|
|
}
|
|
|
|
/* Hide all conditional elements by default. */
|
|
:is([when-connection], [when-customroot], [when-mixedcontent], [when-ciphers], [when-httpsonlystatus]) {
|
|
display: none;
|
|
}
|
|
|
|
#identity-popup,
|
|
#permission-popup,
|
|
#trustpanel-popup,
|
|
#protections-popup {
|
|
--controlcenter-popup-content-width: 30.81em;
|
|
/* Set default fill for icons in the identity popup.
|
|
Individual icons can override this. */
|
|
fill: currentColor;
|
|
--horizontal-padding: calc(var(--panel-menuitem-padding-inline) * 2);
|
|
--vertical-section-padding: 0.9em;
|
|
--height-offset: 0px;
|
|
font: menu;
|
|
}
|
|
|
|
#protections-popup[toast] {
|
|
--controlcenter-popup-content-width: 27.12em;
|
|
}
|
|
|
|
#protections-popup[infoMessageShowing] {
|
|
--height-offset: 260px;
|
|
}
|
|
|
|
/* This is used by screenshots tests to hide intermittently different
|
|
* identity popup shadows (see bug 1425253). */
|
|
#identity-popup.no-shadow,
|
|
#permission-popup.no-shadow {
|
|
-moz-window-shadow: none;
|
|
}
|
|
|
|
/* Show the right elements for the right connection states. */
|
|
.site-information-popup[customroot] [when-customroot],
|
|
.site-information-popup[connection=not-secure] [when-connection~=not-secure],
|
|
.site-information-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
|
|
.site-information-popup[connection=secure-ev] [when-connection~=secure-ev],
|
|
.site-information-popup[connection=secure-etsi] [when-connection~=secure-etsi],
|
|
.site-information-popup[connection=secure] [when-connection~=secure],
|
|
.site-information-popup[connection=chrome] [when-connection~=chrome],
|
|
.site-information-popup[connection=file] [when-connection~=file],
|
|
.site-information-popup[connection=associated] [when-connection~=associated],
|
|
.site-information-popup[connection=extension] [when-connection~=extension],
|
|
.site-information-popup[connection=cert-error-page] [when-connection~=cert-error-page],
|
|
.site-information-popup[connection=net-error-page] [when-connection~=net-error-page],
|
|
.site-information-popup[connection=https-only-error-page] [when-connection~=https-only-error-page],
|
|
/* Show weak cipher messages when needed. */
|
|
.site-information-popup[ciphers=weak] [when-ciphers~=weak],
|
|
/* Show mixed content warnings when needed */
|
|
.site-information-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
|
|
.site-information-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
|
|
.site-information-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
|
|
/* Show the right elements when there is mixed passive content loaded and active blocked. */
|
|
.site-information-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
|
|
/* HTTPS-Only and HTTPS-First Mode */
|
|
.site-information-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception],
|
|
.site-information-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded],
|
|
.site-information-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top],
|
|
.site-information-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub],
|
|
/* Show 'disable MCB' button always when there is mixed active content blocked. */
|
|
#identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
|
|
display: revert;
|
|
}
|
|
|
|
#identity-popup-content-eu-trust-mark {
|
|
list-style-image: light-dark(url("chrome://global/skin/icons/EU-trust-mark.svg"), url("chrome://global/skin/icons/EU-trust-mark-inverted.svg"));
|
|
align-self: start;
|
|
/* The EU trust mark MUST be at least 64px wide (and 85px tall). */
|
|
width: 64px;
|
|
margin-top: var(--space-xlarge);
|
|
margin-inline-end: var(--space-xlarge);
|
|
}
|
|
|
|
/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
|
|
#identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure],
|
|
/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
|
|
#identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
|
|
display: none;
|
|
}
|
|
|
|
/* Make sure hidden elements don't accidentally become visible from one of the
|
|
above selectors (see Bug 1194258) */
|
|
#identity-popup [hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#identity-popup-mainView,
|
|
#permission-popup-mainView,
|
|
#trustpanel-popup-mainView,
|
|
#trustpanel-blockerView,
|
|
#protections-popup-mainView {
|
|
min-width: var(--controlcenter-popup-content-width);
|
|
max-width: var(--controlcenter-popup-content-width);
|
|
}
|
|
|
|
#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section),
|
|
#protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header),
|
|
#protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) {
|
|
/* Hide all elements in the panel except for the toast descriptions */
|
|
display: none;
|
|
}
|
|
|
|
#protections-popup[toast] #protections-popup-mainView-panel-header {
|
|
min-height: unset; /* revert panelUI-shared.css */
|
|
}
|
|
|
|
#identity-popup-security-description > description {
|
|
font-weight: var(--font-weight-semibold);
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
#identity-popup-security-httpsonlymode {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
#identity-popup-security-httpsonlymode-menulist {
|
|
width: 11em;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
#identity-popup-security-httpsonlymode-info {
|
|
font-size: 0.85em;
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
#identity-popup-security-httpsonlymode-info > description {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#permission-popup-permissions-content {
|
|
padding-inline: 1.25em;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* CONTENT */
|
|
|
|
:where(#trustpanel-popup, #protections-popup, #identity-popup) :is(description, label) {
|
|
margin: 0;
|
|
}
|
|
|
|
#protections-popup .panel-header > h1 > span,
|
|
#permission-popup .panel-header > h1 > span,
|
|
#identity-popup .panel-header > h1 > span {
|
|
/* This is needed for the overflow-wrap to work correctly when the domain name is really long. */
|
|
max-width: calc(var(--controlcenter-popup-content-width) - 2 * var(--panel-menuitem-margin-inline));
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
#protections-popup .panel-header > h1 > span {
|
|
/* The protections popup panel header text needs a different calculation because it contains an info button.
|
|
* icon-full-width is included twice to compensate for the margin-inline-start of the text,
|
|
* used to center it even if the header includes a info button. See .panel-header-with-info-button */
|
|
/* prettier-ignore */
|
|
max-width: calc(var(--controlcenter-popup-content-width)
|
|
- var(--panel-menuitem-margin-inline) * 2
|
|
- var(--panel-header-info-icon-full-width) * 2);
|
|
}
|
|
|
|
#identity-popup .panel-header > .subviewbutton-back + h1 > span {
|
|
/* Same idea as above, but in the identity popup when there's a back button. */
|
|
/* prettier-ignore */
|
|
max-width: calc(var(--controlcenter-popup-content-width)
|
|
- var(--panel-menuitem-margin-inline) * 2
|
|
- var(--panel-header-back-icon-full-width) * 2);
|
|
}
|
|
|
|
#protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator {
|
|
display: none;
|
|
}
|
|
|
|
#protections-popup-mainView-panel-header-section {
|
|
/* Don't display the info message on top of the panel content while it fades in and out */
|
|
overflow: hidden;
|
|
}
|
|
|
|
#permission-popup-permissions-content > description,
|
|
#protections-popup-content > description {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
/* This element needs the pre-wrap because we add newlines to it in the code. */
|
|
#identity-popup-content-supplemental {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* SECURITY */
|
|
|
|
.site-information-popup[mixedcontent~="active-loaded"] .identity-popup-connection-not-secure,
|
|
.site-information-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
#identity-popup-mainView > .panel-subview-body {
|
|
padding-bottom: var(--panel-subview-body-padding-block);
|
|
}
|
|
|
|
#identity-popup-mainView[footerVisible="true"] > .panel-subview-body {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.identity-popup-section {
|
|
margin-inline: var(--panel-menuitem-margin-inline);
|
|
padding-inline: var(--panel-menuitem-padding-inline);
|
|
}
|
|
|
|
.identity-popup-section.indented {
|
|
/* Align with the text displayed following the lock icon, in the connection status button above.
|
|
16px is the icon size and 8px is the inline-start padding of the text. */
|
|
padding-inline: calc(var(--panel-menuitem-padding-inline) + 16px + 8px);
|
|
}
|
|
|
|
.identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/security-broken.svg);
|
|
margin: var(--panel-menuitem-margin);
|
|
padding: var(--panel-menuitem-padding);
|
|
padding-block: var(--space-large);
|
|
-moz-context-properties: fill;
|
|
}
|
|
|
|
.site-information-popup[connection="chrome"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://branding/content/icon48.png);
|
|
}
|
|
|
|
.site-information-popup[connection="file"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
|
|
}
|
|
|
|
.site-information-popup[connection="associated"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/info.svg);
|
|
}
|
|
|
|
.site-information-popup[connection^="secure"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/security.svg);
|
|
}
|
|
|
|
.site-information-popup[connection^="secure"][customroot] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/security-custom-root.svg);
|
|
}
|
|
|
|
/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */
|
|
.site-information-popup[ciphers="weak"] .identity-popup-security-connection,
|
|
.site-information-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/security-warning.svg);
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
|
|
.site-information-popup[connection="secure-cert-user-overridden"] .identity-popup-security-connection,
|
|
.site-information-popup[connection="cert-error-page"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/security-warning.svg);
|
|
fill: unset;
|
|
}
|
|
|
|
.site-information-popup[connection="net-error-page"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://global/skin/icons/info.svg);
|
|
fill: unset;
|
|
}
|
|
|
|
.site-information-popup[mixedcontent~="active-loaded"][isbroken] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
|
|
}
|
|
|
|
.site-information-popup[connection="extension"] .identity-popup-security-connection {
|
|
list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
|
|
}
|
|
|
|
.identity-popup-security-connection-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.identity-popup-security-connection description,
|
|
.identity-popup-connection-secure.security-view,
|
|
.identity-popup-connection-secure.upgraded,
|
|
.identity-popup-connection-not-secure.security-view {
|
|
padding-inline-start: 8px;
|
|
}
|
|
|
|
#identity-popup-securityView-extended-info > button,
|
|
#identity-popup-securityView-extended-info > hbox > .text-link,
|
|
#identity-popup-content-owner-label,
|
|
#identity-popup-content-verifier-label,
|
|
#identity-popup-content-etsi,
|
|
#identity-popup-content-cert-exception-overridden {
|
|
margin-block: 0.5em;
|
|
}
|
|
|
|
#identity-popup-content-supplemental {
|
|
margin-block-end: 0.5em;
|
|
}
|
|
|
|
#identity-popup-content-verifier {
|
|
margin-block-end: 0.5em;
|
|
}
|
|
|
|
#identity-popup-securityView-extended-info {
|
|
margin-inline: var(--panel-menuitem-margin-inline);
|
|
|
|
@media not (prefers-contrast) {
|
|
--card-background-color: color-mix(in srgb, currentColor 2%, transparent);
|
|
}
|
|
|
|
#trustpanel-popup:is([connection="chrome"], [connection="file"], [connection="associated"], [connection="extension"]) & {
|
|
display: none;
|
|
}
|
|
|
|
> .identity-popup-warning-box {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
> .identity-popup-warning-box > label {
|
|
display: inline-block;
|
|
}
|
|
|
|
> button {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
> button {
|
|
min-height: 30px;
|
|
}
|
|
|
|
> button:focus-visible {
|
|
outline: var(--focus-outline);
|
|
}
|
|
}
|
|
}
|
|
|
|
#identity-popup-content-verifier-unknown > label {
|
|
display: inline;
|
|
}
|
|
|
|
/* CONTENT BLOCKING / TRACKING PROTECTION */
|
|
|
|
#protections-popup-not-blocking-section-why:hover,
|
|
#protections-popup-show-report-stack:hover > .protections-popup-footer-button {
|
|
color: var(--button-text-color-ghost-hover);
|
|
background-color: var(--button-background-color-ghost-hover);
|
|
}
|
|
|
|
#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button {
|
|
color: var(--button-text-color-ghost-active);
|
|
background-color: var(--button-background-color-ghost-active);
|
|
}
|
|
|
|
/* This subview could get filled with a lot of trackers, set a maximum size
|
|
* and allow it to scroll vertically.*/
|
|
#protections-popup-socialblockView,
|
|
#protections-popup-cookiesView,
|
|
#protections-popup-trackersView,
|
|
#trustpanel-blocker-items {
|
|
max-height: calc(600px + var(--height-offset));
|
|
}
|
|
|
|
#protections-popup-trackersView-list.empty {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.protections-popup-empty-label {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
.protections-popup-trackersView-empty-image {
|
|
width: var(--size-item-xlarge);
|
|
height: var(--size-item-xlarge);
|
|
-moz-context-properties: fill;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
#protections-popup-cookiesView .protections-popup-empty-label {
|
|
margin-inline-start: 24px;
|
|
margin-block: 2px 4px;
|
|
}
|
|
|
|
.protections-popup-cookiesView-list-header {
|
|
color: var(--text-color-deemphasized);
|
|
margin: 5px 0;
|
|
}
|
|
|
|
#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header {
|
|
display: none;
|
|
}
|
|
|
|
.protections-popup-list {
|
|
padding: 5px 16px !important; /* override panelUI-shared.css */
|
|
}
|
|
|
|
.protections-popup-list-item {
|
|
display: flex;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.protections-popup-list-host-label {
|
|
direction: ltr;
|
|
text-align: match-parent;
|
|
}
|
|
|
|
/* Special alignment for items which include a state label (e.g. "Allowed") */
|
|
.protections-popup-list-item-with-state > label {
|
|
margin: auto 0;
|
|
}
|
|
.protections-popup-list-item-with-state {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Content Blocking categories */
|
|
|
|
#tracking-protection-container {
|
|
#protections-popup:not([detected]) & {
|
|
flex: 0 1 10em;
|
|
margin-block: var(--space-medium);
|
|
}
|
|
|
|
> tooltip {
|
|
max-width: var(--controlcenter-popup-content-width);
|
|
}
|
|
}
|
|
|
|
.protections-popup-section-header {
|
|
color: var(--text-color-deemphasized);
|
|
|
|
:root[uidensity="compact"] & {
|
|
margin-block: 4px;
|
|
}
|
|
}
|
|
|
|
#protections-popup-no-trackers-found-description {
|
|
margin: auto 7.25em;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
color: var(--text-color-deemphasized);
|
|
|
|
&:not([hidden]) ~ #protections-popup-content {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#protections-popup-not-blocking-section-why {
|
|
border-radius: var(--border-radius-xsmall);
|
|
|
|
&:hover {
|
|
outline: 4px solid var(--button-background-color-ghost-hover);
|
|
}
|
|
}
|
|
|
|
.trackers-icon {
|
|
list-style-image: url(chrome://browser/skin/canvas.svg);
|
|
}
|
|
|
|
.socialblock-icon {
|
|
list-style-image: url(chrome://browser/skin/thumb-down.svg);
|
|
}
|
|
|
|
.thirdpartycookies-icon {
|
|
list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
|
|
}
|
|
|
|
.cryptominers-icon {
|
|
list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
|
|
}
|
|
|
|
.fingerprinters-icon {
|
|
list-style-image: url(chrome://browser/skin/fingerprint.svg);
|
|
}
|
|
|
|
/* PERMISSIONS */
|
|
|
|
.permission-popup-permission-item {
|
|
min-height: 24px;
|
|
}
|
|
|
|
.protections-popup-category[uidisabled] {
|
|
display: none;
|
|
}
|
|
|
|
#permission-popup-storage-access-permission-list-header {
|
|
padding-inline-end: 8px;
|
|
}
|
|
|
|
.permission-popup-permission-item,
|
|
#permission-popup-storage-access-permission-list-header {
|
|
margin-block: 0.25em;
|
|
}
|
|
|
|
#permission-popup-permission-reload-hint,
|
|
#permission-popup-permission-empty-hint {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child {
|
|
display: none;
|
|
}
|
|
|
|
#permission-popup-storage-access-permission-list-hint {
|
|
margin-top: 0.25em;
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
#permission-popup-storage-access-permission-list-hint,
|
|
#permission-popup-storage-access-permission-learn-more {
|
|
/* Matches offset for items - 16px icon + 8px margin */
|
|
margin-inline-start: calc(16px + 8px);
|
|
}
|
|
|
|
.permission-popup-permission-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.permission-popup-permission-label,
|
|
.permission-popup-permission-header-label {
|
|
margin-inline-start: 8px;
|
|
}
|
|
|
|
.permission-popup-permission-label-subitem {
|
|
/* Align label with other labels with icon. */
|
|
/* icon width + icon inline margin + label inline margin */
|
|
margin-inline-start: calc(16px + 3px + 10px);
|
|
}
|
|
|
|
.permission-popup-permission-state-label {
|
|
margin-inline-end: 5px;
|
|
text-align: end;
|
|
}
|
|
|
|
.permission-popup-permission-remove-button {
|
|
appearance: none;
|
|
min-width: auto;
|
|
margin: 0;
|
|
margin-inline-start: 2px;
|
|
padding: 2px;
|
|
padding-inline-end: 6px;
|
|
background-color: var(--button-background-color);
|
|
color: var(--button-text-color);
|
|
border: var(--button-border);
|
|
border-radius: var(--button-border-radius);
|
|
|
|
> .button-box > .button-icon {
|
|
margin: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
list-style-image: url(chrome://global/skin/icons/close.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
> .button-box > .button-text {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--button-text-color-hover);
|
|
background-color: var(--button-background-color-hover);
|
|
border-color: var(--button-border-color-hover);
|
|
}
|
|
|
|
&:hover:active {
|
|
color: var(--button-text-color-active);
|
|
background-color: var(--button-background-color-active);
|
|
border-color: var(--button-border-color-active);
|
|
}
|
|
}
|
|
|
|
#protections-popup-cookie-banner-undetected {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
#protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header,
|
|
#protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header {
|
|
display: none;
|
|
}
|
|
|
|
#protections-popup-toast-panel-tp-on-desc,
|
|
#protections-popup-toast-panel-tp-off-desc {
|
|
display: none;
|
|
}
|
|
|
|
#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc,
|
|
#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc {
|
|
display: revert;
|
|
}
|
|
|
|
#protections-popup-cookie-banner-switch > vbox {
|
|
gap: var(--space-xxsmall);
|
|
}
|
|
|
|
/* Protection popup footer categories */
|
|
|
|
#protections-popup-trackers-blocked-counter-box {
|
|
margin: var(--panel-menuitem-margin);
|
|
padding: var(--panel-menuitem-padding);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 200ms linear;
|
|
justify-self: end;
|
|
}
|
|
|
|
#protections-popup-trackers-blocked-counter-box[showing] {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#protections-popup-trackers-blocked-counter-description,
|
|
#protections-popup-footer-protection-type-label {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
.protections-popup-description > description {
|
|
margin: 10px 16px;
|
|
}
|
|
|
|
#protections-popup:not([milestone]) #protections-popup-milestones,
|
|
#protections-popup:not([milestone]) #protections-popup-milestones-separator {
|
|
display: none;
|
|
}
|
|
|
|
#protections-popup-milestones-content {
|
|
background-color: var(--panel-banner-item-background-color);
|
|
}
|
|
|
|
/* The padding-block for menuitems is set to 0 in compact mode which, with the
|
|
* shield icon being bigger than a usual menuitem, makes the item look crowded
|
|
* even for compact mode. */
|
|
:root[uidensity="compact"] #protections-popup-milestones-content {
|
|
padding-block: 4px;
|
|
}
|
|
|
|
#protections-popup-milestones-content:hover {
|
|
background-color: var(--panel-banner-item-hover-bgcolor);
|
|
}
|
|
|
|
#protections-popup-milestones-content:hover:active {
|
|
background-color: var(--panel-banner-item-active-bgcolor);
|
|
}
|
|
|
|
#protections-popup-milestones-text {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
#protections-popup-milestones-illustration {
|
|
list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg);
|
|
-moz-context-properties: fill, stroke;
|
|
margin-inline-start: var(--horizontal-padding);
|
|
margin-inline-end: 4px;
|
|
height: 40px;
|
|
width: 32px;
|
|
}
|
|
|
|
#protections-popup[milestone] #protections-popup-milestones-illustration {
|
|
fill: #45278d;
|
|
stroke: #321c64;
|
|
}
|
|
|
|
#protections-popup[milestone="5000"] #protections-popup-milestones-illustration {
|
|
fill: #5a29cb;
|
|
stroke: #45278d;
|
|
}
|
|
|
|
#protections-popup[milestone="10000"] #protections-popup-milestones-illustration {
|
|
fill: #7641e5;
|
|
stroke: #5a29cb;
|
|
}
|
|
|
|
#protections-popup[milestone="25000"] #protections-popup-milestones-illustration {
|
|
fill: #e31587;
|
|
stroke: #c60084;
|
|
}
|
|
|
|
#protections-popup[milestone="50000"] #protections-popup-milestones-illustration {
|
|
fill: #ff298a;
|
|
stroke: #e31587;
|
|
}
|
|
|
|
#protections-popup[milestone="100000"] #protections-popup-milestones-illustration {
|
|
fill: #ffa436;
|
|
stroke: #e27f2e;
|
|
}
|
|
|
|
#protections-popup[milestone="500000"] #protections-popup-milestones-illustration {
|
|
fill: #ffd567;
|
|
stroke: #ffbd4f;
|
|
}
|
|
|
|
.permission-popup-section {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
#permission-popup-menulist {
|
|
padding-inline: 12px 6px;
|
|
margin: 0;
|
|
|
|
&,
|
|
> menupopup {
|
|
min-width: 6.5em;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.protections-popup-section-header,
|
|
.protections-popup-switch-section-header {
|
|
padding: var(--panel-menuitem-padding);
|
|
margin: var(--panel-menuitem-margin);
|
|
}
|
|
|
|
.identity-popup-expander:focus-visible,
|
|
.permission-popup-permission-remove-button:focus-visible {
|
|
outline: var(--focus-outline);
|
|
}
|
|
|
|
@media (-moz-platform: linux) {
|
|
.identity-popup-expander > .button-box,
|
|
.permission-popup-permission-remove-button > .button-box {
|
|
appearance: none;
|
|
}
|
|
}
|
|
|
|
#blocked-popup-indicator-item,
|
|
#geo-access-indicator-item {
|
|
margin-top: -2px;
|
|
margin-inline-start: 16px;
|
|
}
|
|
|
|
#blocked-popup-indicator-item,
|
|
#blocked-popup-indicator-item > label {
|
|
display: block;
|
|
}
|
|
|
|
#geo-access-indicator-item {
|
|
font-size: 0.8em;
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
/** Shim-allow warning and indicator icons **/
|
|
|
|
.protections-popup-shim-allow-hint {
|
|
padding: 0 2em;
|
|
margin-block-end: 10px;
|
|
}
|
|
|
|
.protections-popup-shim-allow-hint-icon,
|
|
.protections-popup-list-host-shim-allow-indicator {
|
|
-moz-context-properties: fill;
|
|
background-image: url("chrome://global/skin/icons/info-filled.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
fill: light-dark(#0090ed, #80ebff);
|
|
}
|
|
|
|
.protections-popup-shim-allow-hint-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
background-size: contain;
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
.protections-popup-list-host-shim-allow-indicator {
|
|
width: 16px;
|
|
}
|
|
|
|
.protections-popup-shim-allow-hint-icon {
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
.protections-popup-list-host-shim-allow-indicator {
|
|
margin-inline-start: 0.5em;
|
|
min-width: 16px;
|
|
}
|
|
|
|
#cookieBannerView-disable-site,
|
|
#cookieBannerView-enable-site {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.protections-popup-cookieBannerView-footer {
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Cookie banner state toggles for the popup menu item */
|
|
|
|
#protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected,
|
|
#protections-popup-cookie-banner-section:not([data-state="undetected"]) description#protections-popup-cookie-banner-undetected,
|
|
#protections-popup-cookie-banner-section:not([data-state="site-disabled"]) description#protections-popup-cookie-banner-site-disabled {
|
|
display: none;
|
|
}
|
|
|
|
/* Cookie banner state toggles for the subview: if the state is detected, show
|
|
* the disable controls; if the state is site-disabled, show the enable controls. */
|
|
#protections-popup-cookieBannerView:not([data-state="detected"]) #protections-popup-cookieBannerView-disable-button,
|
|
#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site,
|
|
#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site-warning,
|
|
#protections-popup-cookieBannerView:not([data-state="site-disabled"]) #protections-popup-cookieBannerView-enable-button,
|
|
#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site,
|
|
#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site-description {
|
|
display: none;
|
|
}
|
|
|
|
.protections-popup-smartblock-section {
|
|
background-color: var(--background-color-information);
|
|
border-radius: var(--border-radius-small);
|
|
margin-inline: var(--panel-menuitem-margin-inline);
|
|
margin-block-start: var(--space-small);
|
|
padding-block: var(--space-small);
|
|
}
|
|
|
|
.protections-popup-smartblock-toggle-box {
|
|
margin-inline: var(--panel-menuitem-margin-inline);
|
|
padding-inline: var(--panel-menuitem-padding-inline);
|
|
}
|
|
|
|
.protections-popup-smartblock-toggle-box > moz-toggle {
|
|
padding-block-end: var(--panel-menuitem-padding-block);
|
|
}
|
|
|
|
/* Trustpanel popup */
|
|
|
|
#trustpanel-header-section {
|
|
padding-block-end: var(--space-small);
|
|
}
|
|
|
|
#trustpanel-header-row {
|
|
justify-content: space-between;
|
|
padding-block-start: var(--space-small);
|
|
padding-inline-start: var(--space-large);
|
|
}
|
|
|
|
#trustpanel-popup-host-wrapper {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#trustpanel-popup-host {
|
|
align-self: center;
|
|
}
|
|
|
|
#trustpanel-graphic-section {
|
|
margin: var(--space-small) var(--space-large);
|
|
padding: var(--space-large);
|
|
padding-block-start: var(--space-small);
|
|
border-radius: var(--border-radius-medium);
|
|
flex-direction: column;
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
padding-block-start: var(--space-large);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-large);
|
|
align-self: stretch;
|
|
border: 1px solid var(--trustpanel-card-border-color);
|
|
border-radius: var(--border-radius-large);
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
.trustpanel-card-main {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: var(--space-large);
|
|
align-self: stretch;
|
|
}
|
|
|
|
.trustpanel-card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--space-small);
|
|
align-self: stretch;
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Only the text vbox inside the row needs to fill horizontal space alongside
|
|
the shield icon. */
|
|
.trustpanel-card-main > .trustpanel-card-content {
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.trustpanel-card-content > label,
|
|
.trustpanel-card-content > description,
|
|
.trustpanel-card-content > .trustpanel-header {
|
|
margin: 0;
|
|
}
|
|
|
|
.trustpanel-card-divided {
|
|
border-top: 1px solid var(--trustpanel-card-divider-color);
|
|
}
|
|
}
|
|
|
|
.only-trustpanel {
|
|
visibility: hidden;
|
|
|
|
#trustpanel-popup & {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
/* Assets per state: the graphic image (legacy + Nova) and the card background
|
|
are selected by the tracking-protection state via custom properties. */
|
|
#trustpanel-popup[tracking-protection="warning"] {
|
|
--trustpanel-image-legacy: url(chrome://browser/skin/trustpanel-graphic-warning.svg);
|
|
--trustpanel-image-nova: url(chrome://browser/content/controlcenter/assets/breach-alert-shield-warning.svg);
|
|
--trustpanel-background: var(--trustpanel-warning-bg);
|
|
}
|
|
|
|
#trustpanel-popup[tracking-protection="enabled"] {
|
|
--trustpanel-image-legacy: url(chrome://browser/skin/trustpanel-graphic-enabled.svg);
|
|
--trustpanel-image-nova: url(chrome://browser/content/controlcenter/assets/breach-alert-shield-check.svg);
|
|
--trustpanel-background: var(--trustpanel-highlight-bg);
|
|
}
|
|
|
|
#trustpanel-popup[tracking-protection="disabled"] {
|
|
--trustpanel-image-legacy: url(chrome://browser/skin/trustpanel-graphic-disabled.svg);
|
|
--trustpanel-image-nova: url(chrome://browser/content/controlcenter/assets/breach-alert-shield-cross.svg);
|
|
--trustpanel-background: var(--trustpanel-graphic-bg);
|
|
}
|
|
|
|
#trustpanel-graphic-section {
|
|
background: var(--trustpanel-background, none);
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
#trustpanel-popup[tracking-protection="warning"] #trustpanel-graphic-section,
|
|
#trustpanel-popup[connection="not-secure"] #trustpanel-graphic-section,
|
|
#trustpanel-popup[connection="cert-error-page"] #trustpanel-graphic-section {
|
|
background: none;
|
|
}
|
|
|
|
#trustpanel-popup[tracking-protection="disabled"] #trustpanel-graphic-section {
|
|
background: var(--background-color-box-info);
|
|
}
|
|
|
|
/* Only one secondary section in the card per state. When the insecure
|
|
callout is active (tracking-protection="warning"), it trumps the blocker
|
|
callout. When ETP is off (tracking-protection="disabled") the blocker
|
|
count is meaningless, so hide it too. */
|
|
#trustpanel-popup[tracking-protection="warning"] #trustpanel-blocker-section,
|
|
#trustpanel-popup[tracking-protection="disabled"] #trustpanel-blocker-section {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#trustpanel-graphic-image,
|
|
#trustpanel-graphic-image-legacy {
|
|
-moz-context-properties: fill;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
fill: light-dark(#0090ed, #80ebff);
|
|
}
|
|
|
|
/* Legacy graphic shows by default; the Nova graphic replaces it behind the
|
|
pref. */
|
|
#trustpanel-graphic-image-legacy {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-inline-end: var(--space-small);
|
|
background-image: var(--trustpanel-image-legacy);
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#trustpanel-graphic-image {
|
|
display: none;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
display: revert;
|
|
width: var(--size-image-medium);
|
|
height: var(--size-image-medium);
|
|
flex-shrink: 0;
|
|
background-image: var(--trustpanel-image-nova);
|
|
}
|
|
}
|
|
|
|
#trustpanel-graphic-section-text {
|
|
align-self: center;
|
|
margin-inline-start: var(--space-medium);
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
align-self: flex-start;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
.trustpanel-header {
|
|
font-weight: var(--font-weight-heading);
|
|
margin-block-end: var(--space-medium);
|
|
|
|
#trustpanel-blockerDetailsView &,
|
|
#trustpanel-blockerView & {
|
|
margin-block-start: var(--space-large);
|
|
}
|
|
}
|
|
|
|
#trustpanel-toggle-checkbox-container {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#trustpanel-connection-icon,
|
|
#trustpanel-siteinfo-icon,
|
|
#trustpanel-popup-icon {
|
|
-moz-context-properties: fill, fill-opacity;
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
margin-inline-end: var(--space-xsmall);
|
|
align-self: center;
|
|
}
|
|
|
|
#trustpanel-connection-icon,
|
|
#trustpanel-siteinfo-icon {
|
|
list-style-image: url(chrome://global/skin/icons/security-broken.svg);
|
|
|
|
#trustpanel-popup:is([connection^="secure"], [connection="extension"], [connection="chrome"], [connection="file"]):not(
|
|
[connection="secure-cert-user-overridden"]
|
|
)
|
|
& {
|
|
list-style-image: url(chrome://global/skin/icons/security.svg);
|
|
}
|
|
|
|
#trustpanel-popup[connection^="secure"][customroot] & {
|
|
list-style-image: url(chrome://global/skin/icons/security-custom-root.svg);
|
|
}
|
|
|
|
#trustpanel-popup[connection="net-error-page"] & {
|
|
list-style-image: url(chrome://global/skin/icons/info.svg);
|
|
}
|
|
}
|
|
|
|
#trustpanel-popup-icon:not([src]),
|
|
#trustpanel-popup-icon[src=""] {
|
|
display: none;
|
|
}
|
|
|
|
.trustpanel-section {
|
|
padding: var(--panel-menuitem-padding);
|
|
margin: var(--panel-menuitem-margin);
|
|
}
|
|
|
|
#trustpanel-toggle-section {
|
|
margin-block: var(--space-large);
|
|
margin-inline: var(--panel-menuitem-margin-inline);
|
|
padding-inline: var(--panel-menuitem-padding-inline);
|
|
|
|
&[disabled] label {
|
|
color: var(--button-text-color-ghost-disabled);
|
|
opacity: var(--button-opacity-disabled);
|
|
}
|
|
}
|
|
|
|
.protections-popup-list-host-label,
|
|
.trustpanel-blocker-section > label {
|
|
margin-inline: var(--space-xlarge);
|
|
}
|
|
|
|
#trustpanel-blocker-section-header span {
|
|
color: var(--color-accent-primary);
|
|
}
|
|
|
|
.trustpanel-blocker-section[hidden] + toolbarseparator {
|
|
display: none;
|
|
}
|
|
|
|
/* Legacy UI renders the blocker/insecure sections as filled, bordered boxes.
|
|
Nova replaces them with a plain top divider (.trustpanel-card-divided). */
|
|
.trustpanel-graphic-inner {
|
|
margin: var(--space-xsmall);
|
|
padding: var(--space-medium);
|
|
border-radius: var(--border-radius-medium);
|
|
background: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12));
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
#trustpanel-blocker-section {
|
|
border: var(--trustpanel-inner-border);
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
border: none;
|
|
border-top: 1px solid var(--trustpanel-card-divider-color);
|
|
padding-top: var(--space-large);
|
|
}
|
|
}
|
|
|
|
/* Insecure-section lives inline in the card. Visibility is gated to the
|
|
not-secure connection state — cert-overridden HTTPS pages also have
|
|
tracking-protection="warning" but should not surface the unencrypted
|
|
warning. */
|
|
#trustpanel-insecure-section {
|
|
visibility: collapse;
|
|
border: var(--trustpanel-inner-warning-border);
|
|
|
|
#trustpanel-popup[tracking-protection="warning"][connection="not-secure"] & {
|
|
visibility: visible;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
border: none;
|
|
border-top: 1px solid var(--trustpanel-card-divider-color);
|
|
padding-block-start: var(--space-large);
|
|
}
|
|
|
|
.trustpanel-header {
|
|
background-image: url(chrome://global/skin/icons/security-broken.svg);
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
background-size: var(--icon-size);
|
|
padding-inline-start: calc(var(--icon-size) + var(--space-small));
|
|
-moz-context-properties: fill;
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
background-position-x: right;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
background-image: none;
|
|
padding-inline-start: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#trustpanel-smartblock-section {
|
|
margin: var(--space-large);
|
|
}
|
|
|
|
#trustpanel-smartblock-toggle-container {
|
|
margin-block-start: var(--space-large);
|
|
}
|
|
|
|
#trustpanel-securityInformationView > .panel-header + toolbarseparator {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.moz-button-subviewbutton-nav {
|
|
--button-font-weight: normal;
|
|
--button-content-alignment: inline-start;
|
|
--button-border-radius: var(--border-radius-small);
|
|
--focus-outline-offset: -2px;
|
|
margin: var(--space-small);
|
|
width: -moz-available;
|
|
|
|
&::part(button) {
|
|
-moz-context-properties: fill;
|
|
background-image: url(chrome://global/skin/icons/arrow-right.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: right var(--space-large) center;
|
|
padding-inline-end: calc(var(--space-small) + var(--icon-size) + var(--space-large));
|
|
}
|
|
|
|
&:-moz-locale-dir(rtl)::part(button) {
|
|
background-image: url(chrome://global/skin/icons/arrow-left.svg);
|
|
background-position-x: left var(--space-large);
|
|
}
|
|
}
|