mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 22:24:37 +08:00
Kalon Hinds
0cf5b5b69d
This patch provides forced-colors overrides to make icons and relevant security info visible in high contrast mode. Before: https://imgur.com/a/5NIJzYi After: https://imgur.com/a/4Q4yPWa Bug: 1048378 Change-Id: I5f925f498ac8523d9c69d3b0a13ebe3a8310ebe0 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2057534 Reviewed-by: Mathias Bynens <mathias@chromium.org> Commit-Queue: Kalon Hinds <kahinds@microsoft.com>
110 lines
2.4 KiB
CSS
110 lines
2.4 KiB
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.svg);
|
|
-webkit-mask-size: 80px 32px;
|
|
|
|
background-color: #888;
|
|
}
|
|
|
|
.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: #5A5A5A;
|
|
}
|
|
|
|
.lock-icon-insecure-broken {
|
|
-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-insecure-broken {
|
|
-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,
|
|
.url-scheme-insecure-broken {
|
|
color: #cb3626;
|
|
}
|
|
|
|
.url-scheme-separator {
|
|
color: #8a8a8a;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
.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;
|
|
}
|
|
.security-property-info,
|
|
.security-property-unknown {
|
|
background-color: CanvasText;
|
|
}
|
|
}
|