chrome-devtools-frontend/front_end/panels/security/lockIcon.css

Chrome DevTools UI

/*
 * 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;
  -webkit-mask-image: var(--image-file-securityIcons);
  -webkit-mask-size: 80px 32px;
  background-color: var(--color-text-disabled);
}

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

.lock-icon-unknown,
.lock-icon-neutral {
  -webkit-mask-position: -16px 0;
  background-color: var(--color-text-primary);
}

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

.lock-icon-insecure {
  -webkit-mask-position: -32px 0;
  background-color: var(--color-text-secondary);
}

.lock-icon-insecure-broken {
  -webkit-mask-position: -32px 0;
  background-color: var(--color-accent-red);
}

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

.security-property-neutral {
  -webkit-mask-position: -16px -16px;
  background-color: var(--color-accent-red);

  .security-property-insecure {
    -webkit-mask-position: -32px -16px;
    background-color: var(--color-accent-red);
  }

  .security-property-insecure-broken {
    -webkit-mask-position: -32px -16px;
    background-color: var(--color-accent-red);
  }

  .security-property-info {
    -webkit-mask-position: -48px -16px;
    background-color: rgb(0 0 0 / 50%); /* stylelint-disable-line plugin/use_theme_colors */
    /* See: crbug.com/1152736 for color variable migration. */
  }

  .security-property-unknown {
    -webkit-mask-position: -64px -16px;
    background-color: rgb(0 0 0 / 50%); /* stylelint-disable-line plugin/use_theme_colors */
    /* See: crbug.com/1152736 for color variable migration. */
  }

  .url-scheme-secure {
    color: var(--color-accent-green);
  }

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

  .url-scheme-separator {
    color: var(--color-text-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;
    }
  }
}