Quelle  identity-block.css   Sprache: unbekannt

/* 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/. */

@namespace html url("http://www.w3.org/1999/xhtml");

#tracking-protection-icon-container,
#identity-box,
#trust-icon-container,
#urlbar-label-box {
  height: var(--urlbar-basic-component-size);
}

#identity-box {
  &[pageproxystate="invalid"] {
    pointer-events: none;
    -moz-user-focus: ignore;

    #identity-icon-label {
      display: none;
    }

    /* If the proxy state is invalid, but the urlbar is persisting search terms,
       we still want the user to be able to interact with the permission box.
       It will be visible. The identity-box wrapper itself stays out of the
       tab order so keyboard users go straight to the next focusable element. */
    #urlbar[persistsearchterms] & {
      > #identity-permission-box {
        pointer-events: auto;
        -moz-user-focus: normal;
      }

      /* And don't show the identity icon box in this case,
         just permissions indication */
      > #identity-icon-box {
        display: none;
      }
    }
  }
}

#identity-box,
#trust-icon-container,
#tracking-protection-icon-container {
  /* Set default fill for icons in the identity block.
     Individual icons can override this. */
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);
}

#urlbar:not([persistsearchterms]) #identity-box[pageproxystate="invalid"] {
  > #identity-permission-box,
  > #notification-popup-box {
    display: none;
  }
}

@media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") {
  #urlbar:not([persistsearchterms]) #identity-box[pageproxystate="invalid"] {
    display: none;
  }
}

.identity-box-button {
  padding-inline: var(--urlbar-icon-padding);
  border-radius: var(--urlbar-inner-border-radius);
}

.identity-box-button,
#trust-icon-container,
#tracking-protection-icon-container {
  outline: var(--toolbarbutton-outline);
  outline-offset: var(--toolbarbutton-outline-offset);

  &:hover:not([open="true"]) {
    background-color: var(--urlbar-box-background-color-hover);
    color: var(--urlbar-box-text-color-hover);
    outline-color: var(--toolbarbutton-outline-color-hover);
  }

  &:hover:active,
  &[open="true"] {
    background-color: var(--urlbar-box-background-color-active);
    color: var(--urlbar-box-text-color-hover);
    outline-color: var(--toolbarbutton-outline-color-active);
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }
}

#identity-icon-label {
  padding-inline-start: 4px;
  margin: 0;
}

#identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button,
#urlbar-label-box {
  background-color: var(--urlbar-box-background-color);
  color: var(--urlbar-box-text-color);
  padding-inline: 8px;
  border-radius: var(--urlbar-inner-border-radius);
}

#urlbar[focused] {
  #identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button:not(:hover, [open]),
  #urlbar-label-box {
    background-color: var(--urlbar-box-background-color-focus);
  }
}

#identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button {
  &:hover:not([open]) {
    background-color: var(--urlbar-box-background-color-hover);
    color: var(--urlbar-box-text-color-hover);
  }

  &:is(:hover:active, [open]) {
    background-color: var(--urlbar-box-background-color-active);
    color: var(--urlbar-box-text-color-hover);
  }
}

#urlbar[searchmode]:not([focused]) > .urlbar-input-container {
  > #urlbar-label-box,
  > #urlbar-search-mode-indicator {
    pointer-events: none;
  }

  > #urlbar-search-mode-indicator > #urlbar-search-mode-indicator-close {
    pointer-events: initial;
  }
}

.urlbar-label {
  margin: 0;
}

.sharing-icon,
#identity-icon,
#permissions-granted-icon,
#tracking-protection-icon,
.notification-anchor-icon,
#blocked-permissions-container > .blocked-permission-icon {
  -moz-context-properties: fill, fill-opacity;
}

.sharing-icon,
#identity-icon,
#permissions-granted-icon,
#tracking-protection-icon,
#trust-icon,
#blocked-permissions-container > .blocked-permission-icon {
  width: 16px;
  height: 16px;
}

.sharing-icon,
#identity-icon,
#tracking-protection-icon,
#blocked-permissions-container > .blocked-permission-icon {
  margin-inline-start: 4px;
}

#tracking-protection-icon {
  margin-inline-start: 0;
}

/* MAIN IDENTITY ICON */
#identity-icon {
  margin-inline-start: 0;
  list-style-image: url(chrome://global/skin/icons/info.svg);
}

#identity-box[pageproxystate="valid"].chromeUI #identity-icon {
  list-style-image: url(chrome://branding/content/icon16.png);
}
@media (min-resolution: 1.1dppx) {
  #identity-box[pageproxystate="valid"].chromeUI #identity-icon {
    list-style-image: url(chrome://branding/content/icon32.png);
  }
}

#identity-box[pageproxystate="valid"].localResource #identity-icon {
  list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
}

#identity-box[pageproxystate="invalid"] {
  .identity-box-button {
    outline: none;
  }

  #identity-icon {
    list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  }
}

#urlbar[actiontype="extension"] > .urlbar-input-container > #identity-box #identity-icon {
  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
}

#identity-box[pageproxystate="valid"].extensionPage #identity-icon {
  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
}

#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon {
  list-style-image: url(chrome://global/skin/icons/security.svg);
}

#identity-box[pageproxystate="valid"].weakCipher #identity-icon,
#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon,
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon,
#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon,
#identity-box[pageproxystate="valid"].certErrorPage #identity-icon {
  list-style-image: url(chrome://global/skin/icons/security-warning.svg);
  fill: unset;
}

#identity-box[pageproxystate="valid"].notSecure #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon,
#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon {
  list-style-image: url(chrome://global/skin/icons/security-broken.svg);
}

#permissions-granted-icon {
  list-style-image: url(chrome://browser/skin/permissions.svg);
}

#identity-permission-box {
  display: none;
}

#identity-permission-box[open="true"],
#identity-permission-box[hasPermissions],
#identity-permission-box[hasSharingIcon] {
  display: flex;
}

/* SHARING ICON */
#webrtc-sharing-icon[sharing="camera"] {
  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
}

#webrtc-sharing-icon[sharing="microphone"] {
  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
}

#webrtc-sharing-icon[sharing="screen"] {
  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
}

#geo-sharing-icon[sharing] {
  list-style-image: url("chrome://browser/skin/notification-icons/geo.svg");
  -moz-context-properties: fill;
  fill: var(--icon-color-critical);
}

#serial-sharing-icon[sharing] {
  list-style-image: url("chrome://browser/skin/notification-icons/serial.svg");
  -moz-context-properties: fill;
  fill: var(--icon-color-critical);
}

.sharing-icon:not([sharing]) {
  display: none;
}

#webrtc-sharing-icon[sharing]:not([paused]) {
  -moz-context-properties: fill;
  fill: var(--icon-color-critical);
}

/* TRACKING PROTECTION ICON */

#tracking-protection-icon-container {
  padding-inline: var(--urlbar-icon-padding);
  border-radius: var(--urlbar-inner-border-radius);
  /* This is needed in order to position the blue dot indicator. */
  position: relative;
}

.urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI {
  display: none;
}

#tracking-protection-icon-box {
  overflow: hidden;
  width: 16px;
  height: 16px;
}

#tracking-protection-icon-tooltip {
  max-width: 500px;
}

.urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box {
  list-style-image: url(chrome://browser/skin/tracking-protection.svg);

  &[active] {
    list-style-image: url(chrome://browser/skin/tracking-protection-active.svg);
  }

  &[hasException] {
    list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
  }
}

.urlbar-input-container[pageproxystate="invalid"] > #tracking-protection-icon-container,
#trust-icon-container {
  display: none;
}

@media -moz-pref("browser.urlbar.trustPanel.featureGate") {
  #tracking-protection-icon-container {
    display: none;
  }

  #identity-box {
    /* Keep displaying the moz-extension or chrome UI chicklet */
    &[pageproxystate="valid"]:not(.chromeUI, .extensionPage) {
      #identity-icon-box {
        display: none;
      }
    }
  }

  #trust-icon-container {
    padding-inline: var(--urlbar-icon-padding);
    border-radius: var(--urlbar-inner-border-radius);
    -moz-context-properties: fill, fill-opacity;

    /* The urlbar will show insecure or secure icon by default depending
       on the state of the connection, the further clauses may override that. */
    &:where(.insecure) {
      list-style-image: url(chrome://browser/skin/trust-icon-insecure.svg);
      background-color: var(--urlbar-box-background-color);
      color: var(--urlbar-box-text-color);
    }

    &.secure {
      list-style-image: url(chrome://browser/skin/trust-icon-active.svg);
    }

    &.breached {
      /* position: relative is set on the container so that the absolutely-positioned
        ::before and ::after pseudo-elements are anchored to it */
      position: relative;
      color: var(--icon-color-warning);
      list-style-image: url(chrome://browser/skin/tracking-protection.svg);

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translate(-50%, -50%) scale(1);
        background: var(--background-color-warning);
        border-radius: 100%;
        z-index: 0;
        pointer-events: none;
        transform-origin: center;
        opacity: 0;
      }

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translate(-50%, -50%);
        background-image: url(chrome://browser/skin/trust-icon-warning.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 2;
        pointer-events: none;
        opacity: 1;
        /* Remove background after pulse */
        background-color: transparent;
      }

      > #trust-icon {
        /* position: relative is required for z-index to take effect on this element. */
        position: relative;
        z-index: 1;
        border-radius: 50%;
        opacity: 0;
      }
    }

    &.breach-animating {
      &::before {
        animation: trust-icon-breach-pulse 1200ms ease-in-out 0s 1 forwards;
      }

      &::after {
        opacity: 0;
        animation:
          trust-icon-breach-icon-appear 1200ms linear 0s 1 forwards,
          trust-icon-breach-icon-pulse 1200ms ease-in-out 0s 1 forwards;
      }

      > #trust-icon {
        opacity: 1;
        animation: trust-icon-breach-image-hide 1200ms linear 0s 1 forwards;
      }
    }

    &.inactive:not(.insecure) {
      list-style-image: url(chrome://browser/skin/trust-icon-disabled.svg);
    }

    &.warning {
      list-style-image: url(chrome://browser/skin/trust-icon-warning.svg);
    }

    &.file {
      list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
    }

    .urlbar-input-container[pageproxystate="valid"] > &:not(.chickletShown) {
      display: inline-flex;
    }
  }

  #trust-icon-container:not(.insecure) > #trust-label {
    display: none;
  }
}

/*
 * Breach animation choreography (all animations run simultaneously for 1200ms):
 *
 * ::before  — warning circle background: pulses outward then fades away
 * ::after   — warning icon: fades in and pulses in place (stays visible)
 * #trust-icon — original icon: fades out to reveal the warning icon above it
 *
 * z-index layering: ::before (0) < #trust-icon (1) < ::after (2)
 */

/* The warning circle background: starts visible, scales outward, then fades out. */
@keyframes trust-icon-breach-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* The warning icon: fades in over the full duration. */
@keyframes trust-icon-breach-icon-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* The warning icon: pulses slightly in scale while remaining visible. */
@keyframes trust-icon-breach-icon-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* The original icon: fades out so the warning icon (::after) becomes visible. */
@keyframes trust-icon-breach-image-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}