summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/controlcenter/panel.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/controlcenter/panel.css')
-rw-r--r--browser/themes/shared/controlcenter/panel.css781
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;
+}