fune/browser/themes/shared/controlcenter/panel.inc.css

%if 0
/* 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/. */
%endif
%filter substitution
%define identityPopupExpanderWidth 38px

/* Hide all conditional elements by default. */
:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
  display: none;
}

/* This is used by screenshots tests to hide intermittently different
 * identity popup shadows (see bug 1425253). */
#identity-popup.no-shadow {
  -moz-window-shadow: none;
}

/* Show the right elements for the right connection states. */
#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=extension] [when-connection~=extension],
/* Show insecure login forms messages when needed. */
#identity-popup[loginforms=insecure] [when-loginforms=insecure],
/* 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],
/* Show 'disable MCB' button always when there is mixed active content blocked. */
#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
  display: inherit;
}

/* Hide redundant messages based on insecure login forms presence. */
#identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
  display: none;
}
#identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
  display: none;
}

/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
#identity-popup-securityView-body:-moz-any([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-body[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 > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
  /* Set default fill for icons in the identity popup.
     Individual icons can override this. */
  fill: currentColor;
  fill-opacity: .6;
}

#identity-popup-mainView {
  min-width: 33em;
  max-width: 33em;
}

.identity-popup-section:not(:first-child) {
  border-top: 1px solid var(--panel-separator-color);
}

.identity-popup-security-content,
#identity-popup-permissions-content,
#identity-popup-content-blocking-content {
  background-repeat: no-repeat;
  background-position: 1em 1em;
  background-size: 24px auto;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: .6;
  padding: 0.5em 0 1em;
  /* .identity-popup-host depends on this width */
  padding-inline-start: calc(2em + 24px);
  padding-inline-end: 1em;
}

.identity-popup-security-content:-moz-locale-dir(rtl),
#identity-popup-permissions-content:-moz-locale-dir(rtl),
#identity-popup-content-blocking-content:-moz-locale-dir(rtl) {
  background-position: calc(100% - 1em) 1em;
}

/* EXPAND BUTTON */

.identity-popup-expander {
  margin: 0;
  padding: 4px 0;
  min-width: auto;
  width: @identityPopupExpanderWidth@;
  border-style: none;
  -moz-appearance: none;
  background: url("chrome://browser/skin/arrow-left.svg") center no-repeat;
  background-size: 16px, auto;
  -moz-context-properties: fill;
  fill: currentColor;
  color: inherit;
}

.identity-popup-expander:-moz-locale-dir(ltr) {
  transform: scaleX(-1);
}

.identity-popup-expander > .button-box {
  border-right: 1px solid var(--panel-separator-color);
  padding: 0;
}

.identity-popup-expander:hover {
  background-color: var(--arrowpanel-dimmed);
}

.identity-popup-expander:hover:active {
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

/* PREFERENCES BUTTON */

.identity-popup-preferences-button {
  list-style-image: url(chrome://browser/skin/settings.svg);
  padding: 5px 8px !important;
  margin-bottom: 2px !important;
}

.identity-popup-preferences-button > .toolbarbutton-text {
  display: none;
}

/* CONTENT */

#identity-popup-content-blocking-disabled-label,
.identity-popup-content-blocking-category-label,
.identity-popup-content-blocking-category-state-label,
.identity-popup-content-blocking-category-add-blocking,
.identity-popup-permission-label,
.identity-popup-permission-state-label,
.identity-popup-security-content > description,
#identity-popup-security-descriptions > description,
#identity-popup-securityView-body > description,
#identity-popup-permissions-content > description,
#identity-popup-content-blocking-content > description {
  font-size: 110%;
  margin: 0;
}

#identity-popup-permissions-content > description,
#identity-popup-content-blocking-content > description {
  color: var(--panel-disabled-color);
}

/* This element needs the pre-wrap because we add newlines to it in the code. */
#identity-popup-content-supplemental {
  white-space: pre-wrap;
}

.identity-popup-headline {
  margin: 3px 0 4px;
  font-size: 150%;
}

.identity-popup-host {
  word-wrap: break-word;
  /* 1em + 2em + 24px is .identity-popup-security-content padding
   * 30em is the panel width */
  max-width: calc(30rem - 3rem - 24px - @identityPopupExpanderWidth@);
}

.identity-popup-warning-gray {
  padding-inline-start: 24px;
  background: url(chrome://browser/skin/controlcenter/warning.svg) no-repeat 0 50%;
  fill: #808080;
  stroke: #fff;
  -moz-context-properties: fill, stroke;
}

.identity-popup-warning-yellow {
  padding-inline-start: 24px;
  background: url(chrome://browser/skin/controlcenter/warning.svg) no-repeat 0 50%;
  fill: #ffbf00;
  stroke: #fff;
  -moz-context-properties: fill, stroke;
}

.identity-popup-warning-gray:-moz-locale-dir(rtl),
.identity-popup-warning-yellow:-moz-locale-dir(rtl) {
  background-position: 100% 50%;
}
/* SECURITY */
.identity-popup-connection-secure {
  color: #058B00;
}

:root[lwt-popup-brighttext] .identity-popup-connection-secure {
  color: #30e60b;
}

.identity-popup-connection-not-secure {
  color: #d74345;
}

.identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
}

#identity-popup[connection=chrome] .identity-popup-security-content {
  background-image: url(chrome://branding/content/icon48.png);
}
#identity-popup[connection^=secure] .identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/connection.svg);
  -moz-context-properties: fill;
  fill: #12BC00;
}
/* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
#identity-popup[ciphers=weak] .identity-popup-security-content,
#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/connection.svg);
  -moz-context-properties: fill, fill-opacity;
}

#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-content {
  background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
  fill: unset;
  -moz-context-properties: fill, fill-opacity;
}

#identity-popup[loginforms=insecure] .identity-popup-security-content,
#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
  -moz-context-properties: fill, fill-opacity;
}

#identity-popup[connection=extension] .identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/extension.svg);
  -moz-context-properties: fill;
  fill: #60bf4c;
}

#identity-popup-security-descriptions > description {
  margin-top: 6px;
  color: var(--panel-disabled-color);
}

#identity-popup-securityView-body {
  margin-inline-start: calc(2em + 24px);
  margin-inline-end: 1em;
  border-top: 1px solid var(--panel-separator-color);
  padding-inline-end: 1em;
}

#identity-popup-more-info-footer {
  margin-top: 1em;
}

.identity-popup-footer {
  background-color: var(--arrowpanel-dimmed);
}

.identity-popup-footer > button {
  -moz-appearance: none;
  margin: 0;
  border: none;
  border-top: 1px solid var(--panel-separator-color);
  padding: 8px 20px;
  color: inherit;
  background-color: transparent;
}

.identity-popup-footer > button:hover,
.identity-popup-footer > button:focus {
  background-color: var(--arrowpanel-dimmed);
}

.identity-popup-footer > button:hover:active {
  background-color: var(--arrowpanel-dimmed-further);
}

#identity-popup-content-verifier ~ description {
  margin-top: 1em;
  color: var(--panel-disabled-color);
}

description#identity-popup-content-verified-by,
description#identity-popup-content-owner,
description#identity-popup-content-verifier,
#identity-popup-securityView-body > button {
  margin-top: 1em;
}

#identity-popup-securityView-body > button {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* CONTENT BLOCKING / TRACKING PROTECTION */

#identity-popup-content-blocking-content {
  background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
}

/* We can currently show either the old tracking protection-only UI, which has "Tracking Protection"
 * as a label, or the new content blocking UI which has a different label and also a list of
 * categories of blockers. This rule hides elements depending on which UI we want to show */
#identity-popup-content-blocking-content[contentBlockingUI] #tracking-protection-label,
#identity-popup-content-blocking-content:not([contentBlockingUI]) #content-blocking-label,
#identity-popup-content-blocking-content:not([contentBlockingUI]) > #identity-popup-content-blocking-category-list {
  display: none;
}

/* Disabled label */

#identity-popup-content-blocking-disabled-label {
  padding: 0px 5px;
  border-radius: 3px;
  margin: 5px;
  display: none;
  color: #fff;
}

#identity-popup-content-blocking-content[hasException] #identity-popup-content-blocking-disabled-label {
  display: -moz-box;
  background-color: #d7b600;
  stroke: #d7b600;
}

#identity-popup-content-blocking-content[enabled][hasException] #identity-popup-content-blocking-disabled-label-global {
  display: none;
}

#identity-popup-content-blocking-content:not([enabled]) #identity-popup-content-blocking-disabled-label {
  display: -moz-box;
  background-color: #d70022;
  stroke: #d70022;
}

#identity-popup-content-blocking-content:not([enabled]) #identity-popup-content-blocking-disabled-label-exception {
  display: none;
}

#identity-popup-content-blocking-disabled-label > label {
  margin: 0;
  line-height: 18px;
}

#identity-popup-content-blocking-disabled-label > image {
  list-style-image: url(chrome://browser/skin/controlcenter/warning.svg);
  fill: currentColor;
  -moz-context-properties: fill, stroke;
  margin-inline-end: 4px;
  height: 13px;
  width: 13px;
}

/* Content Blocking categories */

#identity-popup-content-blocking-category-list {
  margin-top: 10px;
}

/* Don't show the categories when no trackers were detected. */
#identity-popup-content-blocking-content:not([detected]) > #identity-popup-content-blocking-category-list {
  display: none;
}

/* Show the "detected"/"not detected" message depending on the content state. */
#identity-popup-content-blocking-content:not([detected]) > #identity-popup-content-blocking-detected,
#identity-popup-content-blocking-content[detected] > #identity-popup-content-blocking-not-detected {
  display: none;
}

#identity-popup-content-blocking-content[enabled][hasException] .identity-popup-content-blocking-category-state-label,
.identity-popup-content-blocking-category:not(.blocked) .identity-popup-content-blocking-category-state-label {
  display: none;
}

.identity-popup-content-blocking-category.blocked .identity-popup-content-blocking-category-add-blocking {
  display: none;
}

.fastblock-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/slowtrackers.svg);
}

#identity-popup-content-blocking-category-fastblock.blocked > .fastblock-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/slowtrackers-disabled.svg);
}

.tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/trackers.svg);
}

#identity-popup-content-blocking-category-tracking-protection.blocked > .tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/trackers-disabled.svg);
}

/* Content Blocking action button */

.tracking-protection-button {
  margin: 1em 0 0;
  display: none;
}

/* Show the right action buttons depending on content state */
/* Offer to temporarily add an exception in private mode. */
#main-window:not([privatebrowsingmode]) #identity-popup-content-blocking-content[enabled][detected]:not([hasException]) > #tracking-action-unblock,
/* Offer to permanently add an exception in normal mode. */
#main-window[privatebrowsingmode] #identity-popup-content-blocking-content[enabled][detected]:not([hasException]) > #tracking-action-unblock-private,
/* If there's an exception just offer to remove the exception again. */
#identity-popup-content-blocking-content[enabled][hasException] > #tracking-action-block {
  display: -moz-box;
}

/* PERMISSIONS */

#identity-popup-permissions-content {
  background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
  padding-bottom: 1.5em;
}

@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
  /* The extra padding-bottom is there to work around XUL flex (Bug 1368281).
     This rule and the 1.5em above can both be removed once we are only using CSS flex. */
  #identity-popup-permissions-content {
    padding-bottom: 1em;
  }
}

#identity-popup-permissions-headline {
  /* Make sure the label is as tall as the icon so that the permission list
     which is aligned with the icon doesn't cover it up. */
  min-height: 24px;
}

#identity-popup-content-blocking-category-list,
#identity-popup-permission-list {
  /* Offset the padding set on #identity-popup-permissions-content so that it
     shows up just below the section. The permission icons are 16px wide and
     should be right aligned with the section icon. */
  margin-inline-start: calc(-1em - 16px);
}

.identity-popup-content-blocking-category,
.identity-popup-permission-item {
  min-height: 24px;
}

#identity-popup-permission-list:not(:empty) {
  margin-top: 5px;
}

.identity-popup-content-blocking-category-icon,
.identity-popup-permission-icon {
  width: 16px;
  height: 16px;
}

.identity-popup-permission-icon.in-use {
  -moz-context-properties: fill;
  fill: rgb(224, 41, 29);
  animation: 1.5s ease in-use-blink infinite;
}

@keyframes in-use-blink {
  50% { opacity: 0; }
}

.identity-popup-content-blocking-category-label,
.identity-popup-content-blocking-category-state-label,
.identity-popup-permission-label,
.identity-popup-permission-state-label {
  /* We need to align the action buttons and permission icons with the text.
     This is tricky because the icon height is defined in pixels, while the
     font height can vary with platform and system settings, and at least on
     Windows the default font metrics reserve more extra space for accents.
     This value is a good compromise for different platforms and font sizes. */
  margin-top: -0.1em;
}

.identity-popup-content-blocking-category-label,
.identity-popup-permission-label {
  margin-inline-start: 1em;
}

.identity-popup-content-blocking-category-state-label,
.identity-popup-content-blocking-category-add-blocking,
.identity-popup-permission-state-label {
  margin-inline-end: 5px;
  text-align: end;
}

.identity-popup-content-blocking-category-state-label,
.identity-popup-permission-state-label {
  color: var(--panel-disabled-color);
}

.identity-popup-permission-remove-button {
  -moz-appearance: none;
  margin: 0;
  border-width: 0;
  border-radius: 50%;
  min-width: 0;
  padding: 2px;
  background-color: transparent;
  color: inherit;
  opacity: 0.6;
}

.identity-popup-permission-remove-button > .button-box {
  padding: 0;
}

.identity-popup-permission-remove-button > .button-box > .button-icon {
  margin: 0;
  width: 16px;
  height: 16px;
  list-style-image: url(chrome://browser/skin/panel-icon-cancel.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}

.identity-popup-permission-remove-button > .button-box > .button-text {
  display: none;
}

/* swap foreground / background colors on hover */
.identity-popup-permission-remove-button:not(:-moz-focusring):hover {
  background-color: currentColor;
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
  fill: var(--arrowpanel-background);
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
  opacity: 0.8;
}