mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 09:47:56 +08:00
Peter Marshall
9a3d85fa0b
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible :focus-visible is basically the exact same functionality as the custom data-keyboard-focus attribute that devtools maintains. This CL converts all of our uses of data-keyboard-focus in CSS to use :focus-visible. This has no intended behaviour change although it's possible there are small differences in our implementation vs. the web platform one, so this might cause some regression with focus styles for keyboard interaction. I tested a few of these manually to verify they still do the same thing. The CSS linter was unhappy about the ordering of some rules due to specificity-ordering checks, so there is some re-ordering too. A follow-up CL will remove our implementation of data-keyboard-focus. Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236 Commit-Queue: Peter Marshall <petermarshall@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Reviewed-by: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Jack Lynch <jalyn@microsoft.com> Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
173 lines
4.0 KiB
CSS
173 lines
4.0 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-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;
|
|
}
|
|
|
|
:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu {
|
|
border: 1px solid rgb(196 196 196 / 90%);
|
|
border-top: 1px solid rgb(196 196 196 / 50%);
|
|
border-radius: 4px;
|
|
background-color: rgb(240 240 240);
|
|
box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
|
|
|
|
--context-menu-hover-color: #fff;
|
|
--context-menu-seperator-color: rgb(222 222 222);
|
|
}
|
|
|
|
.soft-context-menu-item {
|
|
display: flex;
|
|
width: 100%;
|
|
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(214deg 81% 60%), hsl(214deg 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: 70%;
|
|
pointer-events: none;
|
|
margin: auto 5px auto 0;
|
|
}
|
|
|
|
.soft-context-menu-item-mouse-over .checkmark {
|
|
opacity: 100%;
|
|
filter: none;
|
|
}
|
|
|
|
:host-context(.-theme-with-dark-background) .checkmark {
|
|
filter: invert(80%);
|
|
}
|
|
|
|
@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:focus-visible {
|
|
forced-color-adjust: none;
|
|
background: canvas;
|
|
border-color: Highlight;
|
|
}
|
|
|
|
.soft-context-menu-separator > .separator-line {
|
|
border-bottom-color: ButtonText;
|
|
}
|
|
|
|
.checkmark {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.spritesheet-smallicons:not(.icon-mask) {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.soft-context-menu-item-mouse-over .spritesheet-smallicons:not(.icon-mask) {
|
|
filter: invert(0);
|
|
}
|
|
}
|