mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-15 11:04:43 +08:00
Kham Udom
0bf716dac1
The patch fixes the navigator tree and the filter list widget, adding hover and focus color values. There are also small fixes to the soft context menu, the tab over flow button and change the text prompt foreground color to be the disabled color. update: Add transparent border to set border color for high contrast Before: https://imgur.com/a/UvVdlCM After: https://imgur.com/a/mMXrlLs Bug: 1048378 Change-Id: Ib775144f6a798ccaabc7ac9d3083eb01c9250c3d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2055896 Commit-Queue: Kham Udom <khamu@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org>
162 lines
4.2 KiB
CSS
162 lines
4.2 KiB
CSS
/*
|
|
* Copyright (c) 2014 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.
|
|
*/
|
|
|
|
.soft-context-menu {
|
|
overflow-y: auto;
|
|
min-width: 160px !important;
|
|
/* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
|
|
padding: 4px 0 4px 0;
|
|
border: 1px solid #b9b9b9;
|
|
background-color: #FFF;
|
|
box-shadow: var(--drop-shadow);
|
|
--context-menu-hover-bg: #ebebeb;
|
|
--context-menu-hover-color: #222;
|
|
--context-menu-seperator-color: var(--divider-color);
|
|
}
|
|
|
|
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu {
|
|
border: 1px solid rgba(196, 196, 196, 0.9);
|
|
border-top: 1px solid rgba(196, 196, 196, 0.5);
|
|
border-radius: 4px;
|
|
background-color: rgb(240, 240, 240);
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
|
|
--context-menu-hover-color: #FFF;
|
|
--context-menu-seperator-color: rgb(222, 222, 222);
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .soft-context-menu {
|
|
--context-menu-hover-bg: var(--selection-bg-color);
|
|
--context-menu-hover-color: var(--selection-fg-color);
|
|
border: none;
|
|
}
|
|
|
|
.soft-context-menu-item {
|
|
display: flex;
|
|
width: 100%;
|
|
line-height: 14px;
|
|
font-size: 12px;
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
padding: 2px 7px 2px 8px;
|
|
margin: 0 13px 0 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.soft-context-menu-disabled {
|
|
color: #999;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.soft-context-menu-separator {
|
|
height: 10px;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
.soft-context-menu-separator > .separator-line {
|
|
margin: 0;
|
|
height: 5px;
|
|
border-bottom: 1px solid var(--context-menu-seperator-color);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.soft-context-menu-item-mouse-over {
|
|
border-top: 1px solid var(--context-menu-hover-bg);
|
|
border-bottom: 1px solid var(--context-menu-hover-bg);
|
|
background-color: var(--context-menu-hover-bg);
|
|
color: var(--context-menu-hover-color);
|
|
}
|
|
|
|
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu-item-mouse-over {
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
|
|
}
|
|
|
|
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .separator-line {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.soft-context-menu-item-submenu-arrow {
|
|
pointer-events: none;
|
|
font-size: 11px;
|
|
text-align: right;
|
|
align-self: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
|
|
color: var(--selection-fg-color);
|
|
}
|
|
|
|
.soft-context-menu-custom-item {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: auto;
|
|
}
|
|
|
|
.soft-context-menu-shortcut {
|
|
color: gray;
|
|
pointer-events: none;
|
|
flex: 1 1 auto;
|
|
text-align: right;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
|
|
color: inherit;
|
|
}
|
|
|
|
.checkmark {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
margin: auto 5px auto 0px;
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .checkmark {
|
|
filter: invert(80%);
|
|
}
|
|
|
|
.soft-context-menu-item-mouse-over .checkmark {
|
|
opacity: 1;
|
|
filter: none;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.soft-context-menu-item {
|
|
forced-color-adjust: none;
|
|
}
|
|
.soft-context-menu-item-mouse-over {
|
|
border-top-color: Highlight;
|
|
border-bottom-color: Highlight;
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.soft-context-menu-shortcut {
|
|
color: ButtonText;
|
|
}
|
|
.soft-context-menu-item-mouse-over .soft-context-menu-shortcut {
|
|
color: HighlightText;
|
|
}
|
|
.soft-context-menu[data-keyboard-focus="true"]:focus {
|
|
forced-color-adjust: none;
|
|
background: Canvas;
|
|
border-color: Highlight;
|
|
}
|
|
.soft-context-menu-separator > .separator-line {
|
|
border-bottom-color: ButtonText;
|
|
}
|
|
.checkmark {
|
|
opacity: 1;
|
|
}
|
|
.spritesheet-smallicons:not(.icon-mask) {
|
|
filter: invert(100%);
|
|
}
|
|
.soft-context-menu-item-mouse-over .spritesheet-smallicons:not(.icon-mask) {
|
|
filter: invert(0);
|
|
}
|
|
}
|