front_end/panels/security/lockIcon.css

/*
 * Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.lock-icon,
.security-property {
  height: 16px;
  width: 16px;
  mask-image: var(--image-file-securityIcons);
  mask-size: 80px 32px;
  background-color: var(--sys-color-state-disabled);
}

.lock-icon-secure {
  mask-position: 0 0;
  background-color: var(--sys-color-green-bright);
}

.lock-icon-unknown,
.lock-icon-neutral {
  mask-position: -16px 0;
  background-color: var(--sys-color-on-surface);
}

@media (-webkit-min-device-pixel-ratio: 1.1) {
  .lock-icon-unknown,
  .lock-icon-neutral {
    background-color: var(--sys-color-token-subtle);
  }
}

.lock-icon-insecure {
  mask-position: -32px 0;
  background-color: var(--sys-color-token-subtle);
}

.lock-icon-insecure-broken {
  mask-position: -32px 0;
  background-color: var(--sys-color-error-bright);
}

.security-property-secure {
  mask-position: 0 -16px;
  background-color: var(--sys-color-green-bright);
}

.security-property-neutral {
  mask-position: -16px -16px;
  background-color: var(--sys-color-error-bright);

  .security-property-insecure {
    mask-position: -32px -16px;
    background-color: var(--sys-color-error-bright);
  }

  .security-property-insecure-broken {
    mask-position: -32px -16px;
    background-color: var(--sys-color-error-bright);
  }

  .security-property-info {
    mask-position: -48px -16px;
    background-color: var(--sys-color-on-surface-subtle);
  }

  .security-property-unknown {
    mask-position: -64px -16px;
    background-color: var(--sys-color-on-surface-subtle);
  }

  .url-scheme-secure {
    color: var(--sys-color-tertiary);
  }

  .url-scheme-neutral,
  .url-scheme-insecure,
  .url-scheme-insecure-broken {
    color: var(--sys-color-error);
  }

  .url-scheme-separator {
    color: var(--sys-color-state-disabled);
  }

  @media (forced-colors: active) {
    .lock-icon,
    .security-property,
    .url-scheme-neutral,
    .url-scheme-insecure,
    .url-scheme-insecure-broken {
      forced-color-adjust: none;
    }

    .lock-icon-unknown,
    .lock-icon-neutral {
      background-color: Highlight;
    }

    .security-property-info,
    .security-property-unknown {
      background-color: canvastext;
    }

    .tree-outline:not(.hide-selection-when-blurred) li.selected .security-property-info,
    .tree-outline:not(.hide-selection-when-blurred) li.selected .security-property-unknown {
      background-color: HighlightText;
    }
  }
}