diff options
Diffstat (limited to 'browser/themes/shared/controlcenter/panel.css')
| -rw-r--r-- | browser/themes/shared/controlcenter/panel.css | 781 |
1 files changed, 781 insertions, 0 deletions
diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css new file mode 100644 index 0000000000..d7685cdc69 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.css @@ -0,0 +1,781 @@ +/* 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/. */ + +/* Hide all conditional elements by default. */ +:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) { + display: none; +} + +#identity-popup, +#permission-popup, +#protections-popup { + --popup-width: 30.81em; + /* Set default fill for icons in the identity popup. + Individual icons can override this. */ + fill: currentColor; + --horizontal-padding: calc(var(--arrowpanel-menuitem-padding-inline) * 2); + --vertical-section-padding: 0.9em; + --height-offset: 0px; + font: menu; +} + +#protections-popup[toast] { + --popup-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. */ +#identity-popup[customroot=true] [when-customroot=true], +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +#identity-popup[connection=associated] [when-connection~=associated], +#identity-popup[connection=extension] [when-connection~=extension], +#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page], +#identity-popup[connection=net-error-page] [when-connection~=net-error-page], +#identity-popup[connection=https-only-error-page] [when-connection~=https-only-error-page], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-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. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* HTTPS-Only and HTTPS-First Mode */ +#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception], +#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded], +#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top], +#identity-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; +} + +/* 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, +#protections-popup-mainView { + min-width: var(--popup-width); + max-width: var(--popup-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: 600; + 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(#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(--popup-width) - 2 * var(--arrowpanel-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 */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-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. */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-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 */ + +#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure, +#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { + 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(--arrowpanel-menuitem-margin-inline); + padding-inline: var(--arrowpanel-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(--arrowpanel-menuitem-padding-inline) + 16px + 8px); +} + +.identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + -moz-context-properties: fill; + min-height: 24px; +} + +#identity-popup[connection=chrome] .identity-popup-security-connection { + list-style-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection=file] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#identity-popup[connection=associated] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +#identity-popup[connection^=secure] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] .identity-popup-security-connection, +#identity-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; +} + +#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, +#identity-popup[connection=cert-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + +#identity-popup[connection=net-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); + fill: unset; +} + +#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-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-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-verifier, +#identity-popup-content-verifier ~ description, +#identity-popup-content-owner-label { + margin-block: 0.5em; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box { + font-weight: 600; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box > label { + display: inline-block; +} + +#identity-popup-securityView-extended-info > button { + margin-inline: 0; +} + +@media (-moz-platform: macos) { + #identity-popup-securityView-extended-info > button { + min-height: 30px; + } + + #identity-popup-securityView-extended-info > button:focus-visible { + outline: var(--focus-outline); + } +} + +#identity-popup-content-verifier-unknown > label { + display: inline; +} + +#protections-popup-sendReportView-description > label { + display: inline; +} + +/* CONTENT BLOCKING / TRACKING PROTECTION */ + +#protections-popup-sendReportView-heading, +#protections-popup-sendReportView-body, +#protections-popup-siteNotWorkingView-body { + padding: var(--vertical-section-padding) var(--horizontal-padding); +} + +.protections-popup-sendReportView-collection-section { + margin-bottom: 16px; +} + +#protections-popup-sendReportView-collection-url { + appearance: none; + border: none; + margin: 4px 0; +} + +#protections-popup-sendReportView-collection-comments { + height: 120px; + resize: vertical; +} + +.protections-popup-sendReportView-collection-section label { + margin-bottom: 2px; +} + +#protections-popup-sendReportView-report-error { + margin-bottom: 24px; + color: #d74345; +} + +#protections-popup-not-blocking-section-why:hover, +#protections-popup-show-report-stack:hover > .protections-popup-footer-button { + background-color: var(--panel-item-hover-bgcolor); +} + +#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button { + background-color: var(--panel-item-active-bgcolor); +} + +/* 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 { + 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: 48px; + height: 48px; + -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 */ + +#protections-popup-no-trackers-found-description { + margin: 4.85em 7.25em; + font-size: 1.1em; + text-align: center; + color: var(--text-color-deemphasized); +} + +.protections-popup-section-header { + color: var(--text-color-deemphasized); +} + +:root[uidensity="compact"] .protections-popup-section-header { + margin-block: 4px; +} + +#tracking-protection-container > tooltip { + max-width: var(--popup-width); +} +/* + * The category list is split into two sections: "Blocking" and "Not Blocking", + * with five different category items distributed between them at runtime. + * To achieve this, we use a grid layout with 12 rows: one row for each header + * label and five rows in each section for the items. + * Items with the "blocked" class are assigned rows 2-6, and those without + * are assigned rows 8-12, with the headers taking rows 1 and 7. + */ + +#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content { + display: none; +} + +#protections-popup-not-blocking-section-why { + border-radius: 2px; +} + +#protections-popup-not-blocking-section-why:hover { + outline: 4px solid var(--panel-item-hover-bgcolor); +} + +.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; + border-width: 0; + padding: 2px; + padding-inline-end: 6px; + background-color: var(--button-bgcolor); + color: var(--button-color); + border-radius: 4px; +} + +.permission-popup-permission-remove-button > .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; +} + +.permission-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +.permission-popup-permission-remove-button:not(:focus-visible):hover { + background-color: var(--button-hover-bgcolor); +} + +.permission-popup-permission-remove-button:not(:focus-visible):hover:active { + background-color: var(--button-active-bgcolor) +} + +#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-switch-header { + font-weight: 600; +} + +#protections-popup-siteNotWorkingView-body-issue-list { + padding-inline-start: 1em; +} + +/* Protection popup footer categories */ + +#protections-popup-trackers-blocked-counter-box { + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-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: 600; +} + +#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; +} + +.protections-popup-section-header, +.protections-popup-switch-section-header, +#protections-popup-siteNotWorkingView-header { + padding: var(--arrowpanel-menuitem-padding); + margin: var(--arrowpanel-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; +} + +#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: 600; +} + +.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; +} |