tenfourfox/browser/themes/shared/identity-block/identity-block.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

#identity-box {
  --identity-box-hover-background-color: rgb(231,230,230);
  --identity-box-selected-background-color: rgb(211,210,210);
  --identity-box-verified-color: hsl(92,100%,30%);
%ifdef MOZ_OFFICIAL_BRANDING
  --identity-box-chrome-color: rgb(229,115,0);
%else
%if MOZ_UPDATE_CHANNEL == aurora
  --identity-box-chrome-color: rgb(51,30,84);
%else
  --identity-box-chrome-color: rgb(0,33,71);
%endif
%endif

  border-inline-end: 1px solid var(--urlbar-separator-color);
  border-image: linear-gradient(transparent 15%,
                                var(--urlbar-separator-color) 15%,
                                var(--urlbar-separator-color) 85%,
                                transparent 85%);
  border-image-slice: 1;
  font-size: .9em;
  padding: 3px 5px;
  margin-inline-end: 4px;
  overflow: hidden;
  /* The latter two properties have a transition to handle the delayed hiding of
     the forward button when hovered. */
  transition: background-color 150ms ease, padding-left, padding-right;
}

#identity-box:hover,
#identity-box[open=true] {
  border-image-source: none;
}

#identity-box:hover {
  background-color: var(--identity-box-hover-background-color);
}

#identity-box:hover:active,
#identity-box[open=true] {
  background-color: var(--identity-box-selected-background-color);
}

#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
  color: var(--identity-box-verified-color);
}

#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
  color: var(--identity-box-chrome-color);
}

#identity-icon-labels {
  padding-inline-start: 2px;
}

#notification-popup-box:not([hidden]) + #identity-box {
  padding-inline-start: 10px;
  border-radius: 0;
}

@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
  border-radius: 0;
}

@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
  padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px);
}

@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
  /* Forward button hiding is delayed when hovered, so we should use the same
     delay for the identity box. We handle both horizontal paddings (for LTR and
     RTL), the latter two delays here are for padding-left and padding-right. */
  transition-delay: 0s, 100s, 100s;
}

@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
  /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
  padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px);
}

/* MAIN IDENTITY ICON */

#identity-icon {
  width: 16px;
  height: 16px;
  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
}

#identity-box:hover > #identity-icon,
#identity-box[open=true] > #identity-icon {
  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
}

#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
}

#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
  opacity: 0.3;
}

#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
  -moz-image-region: inherit;
  list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
  width: 16px;
  height: 16px;
  opacity: 1;
}

/* TRACKING PROTECTION ICON */

#tracking-protection-icon {
  width: 16px;
  height: 16px;
  margin-inline-start: 2px;
  margin-inline-end: 0;
  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
  opacity: 1;
}

#tracking-protection-icon[state="loaded-tracking-content"] {
  list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
}

#tracking-protection-icon[animate] {
  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
}

#tracking-protection-icon:not([state]) {
  margin-inline-end: -18px;
  pointer-events: none;
  opacity: 0;
  /* Only animate the shield in, when it disappears hide it immediately. */
  transition: none;
}

#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
  visibility: collapse;
}

/* CONNECTION ICON */

#connection-icon {
  width: 16px;
  height: 16px;
  margin-inline-start: 2px;
  visibility: collapse;
}

#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
  list-style-image: url(chrome://browser/skin/identity-secure.svg);
  visibility: visible;
}

#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
  list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
  visibility: visible;
}

#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
  list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
  visibility: visible;
}

#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
  list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
  visibility: visible;
}