react-native-devtools-frontend/front_end/security/lockIcon.css

/* Copyright (c) 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: url(Images/securityIcons.png);
    -webkit-mask-size: 80px 32px;

    background-color: #888;
}

@media (-webkit-min-device-pixel-ratio: 1.1) {
    .lock-icon,
    .security-property {
        -webkit-mask-image: url(Images/securityIcons_2x.png);
    }
}

.lock-icon-secure {
    -webkit-mask-position: 0px 0px;
    background-color: #0B8043;
}

.lock-icon-unknown,
.lock-icon-neutral {
    -webkit-mask-position: -16px 0px;
    background-color: #000000; /* Black for clarity on lower DPI screens */
}

@media (-webkit-min-device-pixel-ratio: 1.1) {
    .lock-icon-unknown,
    .lock-icon-neutral {
        background-color: #5A5A5A; /* Gray for hiDPI screens */
    }
}

.lock-icon-insecure {
    -webkit-mask-position: -32px 0px;
    background-color: #C63626;
}

.security-property-secure {
    -webkit-mask-position: 0px -16px;
    background-color: #0B8043;
}

.security-property-neutral {
    -webkit-mask-position: -16px -16px;
    background-color: #C63626;
}

.security-property-insecure {
    -webkit-mask-position: -32px -16px;
    background-color: #C63626;
}

.security-property-info {
    -webkit-mask-position: -48px -16px;
    background-color: rgba(0, 0, 0, 0.5);
}

.security-property-unknown {
    -webkit-mask-position: -64px -16px;
    background-color: rgba(0, 0, 0, 0.5);
}

.url-scheme-secure {
    color: #0b8043;
}

.url-scheme-neutral,
.url-scheme-insecure {
    color: #cb3626;
}

.url-scheme-separator {
    color: #8a8a8a;
}